Hacker News Reader

Comment by mtlynch | Hacker News Reader

I've been looking for a modern JS library that doesn't require a build step, and I've always skipped over Lit because I thought it depended on a build until this comment.

Is there any documentation about using it without a build? All the documentation and tutorials seem to assume a build step. I've found several different "getting started" entrypoints on the site, and they all begin with "npm install" and "import {LitElement, html} from 'lit';" which won't work without a build step, correct?

View on HN

Some of this depends on what you consider a build step. I generally don't consider installing from npm a build step. I also don't really consider rewriting import specifiers a build step - it's just locating files on disk.

Regardless, we do have some workflows for completely "tool-less" (or local-tool-less).

- We publish bundles to jsDelivr: https://lit.dev/docs/getting-started/#use-bundles

- You can import directly from JS module CDNs like unpkg.com, ie:

    import {LitElement, html} from 'https://unpkg.com/lit@2.6.1/index.js?module';

Ultimately we're not really dogmatic about things and support a wide variety of tools. The thing we care about is that tool-less development is possible, and that you can use standard semantics and tools with no special configuration (ie, regular Node resolution is all that's required locally, we stick to standard ES2020).

Ah, gotcha. Thanks!

>I generally don't consider installing from npm a build step. I also don't really consider rewriting import specifiers a build step - it's just locating files on disk.

Sorry, maybe this is just my JS ignorance, but I don't understand how this runs without a build step.

If I run npm -i lit, it puts lit into node_modules. But then if I put "import {LitElement, html} from 'lit';" into a JS file and run a dumb static webserver (like python3 -m http.server), what's linking "from 'lit'" to the necessary files in node_modules?

I just tried running the first tutorial[0] verbatim after npm installing lit to the same directory, and I get:

  Uncaught TypeError: The specifier “lit” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”. my-element.js:1:31

I'd love to use this, I'm just not following how this works.

Is it designed to run server-side rather than for static sites?

[0] https://lit.dev/tutorials/intro-to-lit/

Looks like you need a <script type="importmap"> -- it could map 'lit' to the CDN hosted version or to a relative path.

More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...

Ah, thanks! I'd never encountered these before.

It seems like a handy way to make my code match the code in documentation that assumes a Node environment.

No problem! There's also a polyfill if you need to support Safari:

https://github.com/guybedford/es-module-shims

Thankfully iOS 16.4 will be natively supporting import maps so fingers crossed this might be easier soon

https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-a...

When one writes `import 'lit'` the browser doesn't know where Lit is. This is called a bare module specifier vs an absolute import specifier:

  import '/home/user/project/node_modules/lit/index.js'

A relative specifier:

  import '../node_modules/lit/index.js'

Or a URL Specifier:

  import 'https://unpkg.com/lit?module'

So you have four-ish options to tell the browser where to look for 'lit':

1. Use a server that will use the node module resolution algorithm and transforms it to a relative specifier as it encounters the import (transform/build-ish?)

2. Use experimental "import maps" to go fully buildless to tell the browser where to point that bare module to (buildless)

3. Bundle all your code (build step)

4. Use a bundle from a CDN

Here are some examples of each:

Server that transforms import specifiers (lit.dev does this by default):

https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish)

Import Maps (2):

https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless)

https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish)

Url Specifiers (2):

https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless)

https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish)

hope this helps with some of your questions

Cool, appreciate the thorough answer! I'll give Lit another look now that I understand how to run it buildless + static.

if you change your application code on disk and reload the page and it works, then there's no build step. 1-time setup actions like installing from NPM aren't considered.

Reply on news.ycombinator.com