An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Using Lit Components in an Enhance App
Recently, on the Enhance Discord, there was a question about how to use Lit web components in an Enhance application. Since Lit components extend standard web components, adding Lit to your Enhance app is easy.
Making Lit available in your Enhance application
Lit is a browser module. Well need to bundle in the dependency, so it is available in the browser at run time.
First, we need to install Lit by executing the command:
npm install lit
Then we need to add Lit to our run time bundles by editing our .arc
file. Under the @bundles
pragma in your .arc
file, add the following lines:
@bundleslit './node_modules/lit/index.js'
Luckily, Lit ships with a good entry point that includes all of the dependencies we will need.
You dont need to name your bundle the same as the npm package, but it makes sense to keep the same name in this case.
Including a Lit component
Next, well create a new file in our project's public
folder called my-element.js
. Well use the source from a Lit component we found on lit.dev as an example.
// public/my-element.jsimport {LitElement, html, css} from 'lit';export class MyElement extends LitElement { static properties = { greeting: {}, planet: {}, }; static styles = css` :host { display: inline-block; padding: 10px; background: lightgray; } .planet { color: var(--planet-color, blue); } `; constructor() { super(); this.greeting = 'Hello'; this.planet = 'World'; } render() { return html` <span @click=${this.togglePlanet} >${this.greeting} <span class="planet">${this.planet}</span> </span> `; } togglePlanet() { this.planet = this.planet === 'World' ? 'Mars' : 'World'; }}customElements.define('my-element', MyElement);
The Lit component can be used as-is with a tiny change. We need to modify where we import the Lit package from in our component. Change the import line from:
import {LitElement, html, css} from 'lit';
To:
import {LitElement, html, css} from '/_static/bundles/lit.mjs'
Using a Lit component in a page
Now we can use Lit components just like our Enhance components. For example, lets create a new page app/pages/lit.html
and populate it with the following lines:
<script type="module" src="/_static/my-element.js"></script><style> .mars { --planet-color: red; }</style><my-element></my-element><hr /><my-element class="mars" planet="Mars"></my-element>
The above HTML produces a page that looks like this:
If you are using this component on multiple pages, you should look at including the script tag in the Head of your Enhance app.
What about TypeScript components?
If you prefer to use TypeScript based Lit components the instructions are similar, but they do require a few extra steps.
First well install typescript
as a dev dependency.
npm install typescript save-dev
Next, well add lit
and lit-decorators
to our run time bundles by editing our .arc
file. Under the @bundles
pragma in your .arc
file, add the following lines:
@bundleslit './node_modules/lit/index.js'lit-decorators './node_modules/@lit/reactive-element/decorators.js'
Incidentally, its Lits use of experimental decorators which will require us to run
tsc
asesbuild
doesn't support decorators yet.
Finally, well need a tsconfig.json
file to tell tsc
how to compile our Lit TS web components. In the root of your project create a tsconfig.json
file and add the following lines:
{ "compilerOptions": { "target": "es2019", "module": "es2015", "moduleResolution": "node", "lib": ["es2019", "dom"], "declaration": true, "declarationMap": true, "experimentalDecorators": true, "useDefineForClassFields": false }, "include": ["ts/**/*"]}
Including a Lit component
Next, well create a ts
folder in the root of our project. Then we'll add a new file to the ts
folder called my-element-ts.js
. Well use the source from a Lit component we found on lit.dev as an example.
// ts/my-element-ts.tsimport {LitElement, html, css} from 'lit';import {customElement, property} from 'lit/decorators.js';@customElement("my-element-ts")export class MyElementTS extends LitElement { static styles = css` :host { display: inline-block; padding: 10px; background: lightgray; } .planet { color: var(--planet-color, blue); } `; @property() greeting = "Hello"; @property() planet = "World"; render() { return html` <span @click=${this.togglePlanet} >${this.greeting} <span class="planet">${this.planet}</span> </span> `; } togglePlanet() { this.planet = this.planet === "World" ? "Mars" : "World"; }}
Then we will need to run tsc
to compile our TypeScript component into JavaScript.
tsc
This will create the ts/my-element-ts.js
file. Open this file in your text editor and replace the lines:
import { LitElement, html, css } from 'lit';import { customElement, property } from 'lit/decorators.js';
With:
import {LitElement, html, css} from '/_static/bundles/lit.mjs'import { customElement, property } from '/_static/bundles/lit-decorators.mjs'
Then copy ts/my-element-ts.js
to public/my-element-ts.js
.
Using a Lit TS component in a page
Now we can use Lit TS components the same way we used a Lit JavaScript component. For example, lets create a new page app/pages/lit-ts.html
and populate it with the following lines:
<script type="module" src="/_static/my-element-ts.js"></script><style> .mars { --planet-color: red; }</style><my-element-ts></my-element-ts><hr /><my-element-ts class="mars" planet="Mars"></my-element-ts>
The above HTML produces a page that looks like this: \
Which is indistinguishable from the JavaScript version.
Next Steps
Well, getting Lit to work in an Enhance app wasnt too bad. The downside is this component only works with client-side rendering. I wonder if we can refactor it to be server-side rendered with Enhance?
Original Link: https://dev.to/begin/using-lit-components-in-an-enhance-app-4lf1
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To