Who's using Lit or StencilJS

or Web Components in general??

#tech #coding #programming #lit #stenciljs #webcomponents #frontend

@khoi we use lots of #lit to power our #webComponents at #adobe! My team works on https://opensource.adobe.com/spectrum-web-components/index.html and then apps like #photoshop #illustator and #express leverage those elements and various amounts of Lit themselves to deliver on the web.
Spectrum Web Components - Spectrum Web Components

Spectrum Web Components provide interface components as custom elements to help teams work more efficiently and to make applications more consistent.

Spectrum Web Components
@westbrook great! I’m trying out Lit and it seems like it requires lots of build tool configuration. Is there a “npx create…” cli type of tool for Lit?

@khoi I often use `npm init @​open-wc`. It’s actively getting some version bumps and upgrades, right now, however, so using it may give you a little friction in the near term.

What sort of build tools are you running into needing? I like that sans TS you can just drop in and leverage Lit right out of the box with any server that resolves bare module specifiers.

If you want to go even leaner, @matsuuu’s got you covered with this great intro to Lit and Import Maps: https://dev.to/matsuuu/buildless-workflow-through-import-maps-featuring-lit-shoelace-and-more-4ill

Buildless workflow through import maps (featuring Lit, Shoelace and more)

Now that import maps are supported throughout all browsers, web development has taken a big step...

DEV Community
@matsuuu @westbrook I’m using Lit TS Starter kit but can’t piece the code together 😓
@khoi Are you on https://discord.gg/7GcrcFvG where you can ask clarifying questions and get support?
Join the Lit Discord Server!

Lit is an open-source JavaScript library for building fast, lightweight web components (https://lit.dev) | 4209 members

Discord

@khoi @westbrook There is a way to use Lit with no build config.

Use it with JS files, not TS files. Lit is a base class, not a compiler so you can use it at runtime without any build config/step if you are writing JS.

(You can still do type checking via jsdoc)

Example:

```
// @ts-check
import {LitElement, css, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;

static properties = {
name: {type: String},
};

constructor() {
super();
this.name = 'Somebody';
}

render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
customElements.define('simple-greeting', SimpleGreeting);
```