Razor is awesome and the power of server-rendered cannot be underestimated. That said, sometimes you want a pure client-side experience and that's where JavaScript comes in.
This solution shows how to set up Vite to build Lit components into standalone Web Components that can be reused through out your ASP.NET Core applications.
- Using the ViteMiddleware package that supports development time and build time. The caveat is your
package.json
has to be at the root, that's fine. - The
Index.chstml
file has a<my-counter></my-counter>
tag. All Web Components must have a dash in them, it's the law of the internet. - The component is implemented under
Client/src/Counter.ts
.
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement("my-counter")
export class Counter extends LitElement {
static get styles() {
return css`
button { font-size: 3em }
`;
}
constructor() {
super();
this.count = 0;
this.display = "Click Me";
}
@property()
count = 0;
@property()
display = "Click Me";
increment() {
this.count++;
this.display = `Current Count: ${this.count}`;
}
render() {
return html`
<button @click=${this.increment}>
${this.display}
</button>
`
}
}
This is an example, but here are some recommendations if you'd like to use this as a jumping off point:
- Let Vite process all your assets, you can do neat things link minify, and purge unused files from the final artifacts build.
- Remove all the
lib
from the project and add the dependencies from NPM, you get the benefits previously mentioned. - Read the VITE documentation, seriously.
- Read the LIT documentation.
- Get used to TypeScript. Most IDEs have great support for it, and you won't make as many mistakes.
Hope you find this repository helpful. Cheers. 🍻