Using Lit with Javascript and no build tools

Question

I am building a desktop app that monitors some things and generates data about what it is monitoring. When the user wants to interact with the data the app starts a very simple web server. The server serves static pages and has a basic http API to serve the data. I use html as a universal UI, the user uses their browser to view and interact with the data.

I would like to rewrite my html/css/js into a component based web app using Google's Lit 2. I like the idea of plain web components but I noticed that Lit offers some great additional features. Not surprisingly, most of the Lit docs are geared toward a more traditional web environment with a build step. I want to see if I can keep my server as simple as possible and avoid traditional backend tools (typescript compilation, minification, etc). I would like to replace my current static html/css/js with Lit components in a series of simple js files.

Currently, my server serves my pages from a 'public' directory and has a minimal http API:

- public/
 -- js/
 -- css/
 -- index.html

How should I use Lit in a system without a build step? What is the minimum set of Lit files I would need to serve along with my own javascript classes that inherit from LitElement?

@Danny'365CSI'Engelman I started my rewrite using React. I liked the components but I was a little annoyed with all of the tooling (my web server runs locally and is about as simple and bare bones as you can get). I looked at several other frameworks and thought Lit would be easy to plug in to my unusual environment and I liked the html template string and auto-diffing that Lit does. But, it appears it is not as easy as I thought it would be to get it in my environment. So, now I am experimenting with plain old web components. — Mark M
– Mark M, Commented Aug 3, 2021 at 15:23
Not old, vanilla web components gives you everything you want, and zero upgrading issues in the future (Lit2 did have breaking changes). Analyze Lit and copy the features you want to your own baseclass, and you are set for the next 25 javascript years. — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Aug 3, 2021 at 16:14

Nickolay · Accepted Answer · 2022-10-28 21:56:04Z

15

2022 update: Starting with version 2.2.0, lit is also available as a pre-built bundle, see https://lit.dev/docs/getting-started/#use-bundles

<simple-greeting name="World"></simple-greeting>

<script type="module">
import {html, css, LitElement} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/core/lit-core.min.js';

export class SimpleGreeting extends LitElement {
  static get styles() {
    return css`p { color: blue }`;
  }

  static get properties() {
    return {
      name: {type: String}
    }
  }

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

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('simple-greeting', SimpleGreeting);
</script>

Original answer:

The Lit team doesn't provide a pre-built bundle as of 2021-08-01, you have to build yourself (to resolve the bare module specifiers, such as import .. from 'lit-html', which are not supported by browsers yet)

If you're fine with relying on a third-party CDN and supporting modern browsers only, skypack is very useful, as you can simply import lit from 'https://cdn.skypack.dev/lit'; in a web page.

(If you open https://cdn.skypack.dev/lit and then the pinned URL specified in comments, you can see there are only 5 JS modules involved, so extracting them from lit's source by hand to host as part of your application shouldn't be very hard either.)

edited Oct 28, 2022 at 21:56

answered Aug 2, 2021 at 1:50

Nickolay

32.5k13 gold badges111 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

robstarbuck Over a year ago

This example uses unpkg.com/lit-element/lit-element.js?module as the CDN. gist.github.com/mcmoe/a5292cecfde3cf4fdf997e8b6a25790f

YouCodeThings Over a year ago

Update, the Lit team now provides a bundle: lit.dev/docs/getting-started/#use-bundles

vintprox Over a year ago

Well, since only the minified version is provided and they don't compile *.d.ts files along with *.js, it's rather notorious approach for my use case.

Milton Over a year ago

The bundles linked in the Lit docs also do not include the decorators

Neutrino · Accepted Answer · 2024-09-28 14:21:11Z

0

The official bundles don't support essential feature like Context.

Unpkg does not work with Lit version 3.

I was able to get this working using Esm.sh

import { LitElement, html } from 'https://esm.sh/lit';
import { createContext, ContextProvider } from 'https://esm.sh/@lit/context';


const simpleContext = createContext('simple-context');

export class SimpleGreeting extends LitElement {

   provider = new ContextProvider(this, {
      context: simpleContext,
      initialValue: {
         a: 1
      }
   })

   constructor() {
      super();
   }

   render() {
      return html`<p>Hello, World!</p>`;
   }
}

customElements.define('simple-greeting', SimpleGreeting);

answered Sep 28, 2024 at 14:21

Neutrino

9,95510 gold badges70 silver badges103 bronze badges

1 Comment

Computer says 'no'--SOooooo Aug 16 at 10:49

Context was basically donated by Adobe, so Google doesn't see it as 'essential'. (Adobe also has a lit-mobx, but separate from lit repo.) But yeah, they don't include Lit Task either in the 'all' package, even though Task is Google's own dogfood. They don't care much about public CDN as Google doesn't use those.

Collectives™ on Stack Overflow

Using Lit with Javascript and no build tools

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related