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?

Answer 1

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.)