5 ms·

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 thi

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?

deleted 4y ago
[deleted]
spankalee 4y ago
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 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).
- mtlynch 4y ago
  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/ https://lit.dev/tutorials/intro-to-lit/
  - TimTheTinker 4y ago
    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/script/type/importmap https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
    - mtlynch 4y ago
      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.
      - TimTheTinker 4y ago
        No problem! There's also a polyfill if you need to support Safari: https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
        chrisehlee 4y ago
        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-and-ipados/ https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-a...
  - e111077 4y ago
    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=9092862a77acf73dd1e6faa73a326be9 https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish) Import Maps (2): https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2129c0 https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless) https://lit.dev/playground/#gist=91c0b286698612b013eb81881ffdfeb2 https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish) Url Specifiers (2): https://lit.dev/playground/#gist=05655736300f0425644e61a626410aef https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless) https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f6aa78 https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish) hope this helps with some of your questions
- colordrops 4y ago
  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.
deleted 4y ago
[deleted]

deleted 4y ago

[deleted]

spankalee 4y ago

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

mtlynch 4y ago
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/ https://lit.dev/tutorials/intro-to-lit/
- TimTheTinker 4y ago
  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/script/type/importmap https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
  - mtlynch 4y ago
    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.
    - TimTheTinker 4y ago
      No problem! There's also a polyfill if you need to support Safari: https://github.com/guybedford/es-module-shims https://github.com/guybedford/es-module-shims
      - chrisehlee 4y ago
        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-and-ipados/ https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-a...
- e111077 4y ago
  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=9092862a77acf73dd1e6faa73a326be9 https://lit.dev/playground/#gist=9092862a77acf73dd1e6faa73a3... (build-ish) Import Maps (2): https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2129c0 https://lit.dev/playground/#gist=0c4f66396b333c82cb27e7dd3b2... (buildless) https://lit.dev/playground/#gist=91c0b286698612b013eb81881ffdfeb2 https://lit.dev/playground/#gist=91c0b286698612b013eb81881ff... (build-ish) Url Specifiers (2): https://lit.dev/playground/#gist=05655736300f0425644e61a626410aef https://lit.dev/playground/#gist=05655736300f0425644e61a6264... (buildless) https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f6aa78 https://lit.dev/playground/#gist=6d23e8e8dadacd7488bdec81d0f... (build-ish) hope this helps with some of your questions
colordrops 4y ago
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.

deleted 4y ago

[deleted]