If anyone's looking for something like a framework that works with buildless workflows you might check out the project I work on: Lit ( https://lit.dev )
Lit gives you reactive components, declarative HTML templates, runtime encapsulated DOM and styles, interoperability with frameworks and HTML via web components, and a lot more - with no required build tools at all.
We take great care to make sure our libraries are usable without build tools. We support plain JS (in addition to TypeScript). Our libraries work straight from CDNs like Unpkg. When installed locally you can use a dev server that rewrites bare module specifiers or use an 8-line import map to make all of our core packages importable (we carefully keep all of our import specifiers compatible with the web and compact import maps). Components are inspectable with regular DevTools. You can even write components right in DevTools, or in a script tag in plain HTML.
I honestly wish this weren't a unique selling point of Lit, but as far as I can tell, of the "major" frameworks or component libraries out there (including React, Vue, Angular, Solid, Ember, Svelte, Stencil, Preact, and more) we're the only ones that fully work with plain JS within our regular mainstream usage patterns.
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?
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/[email protected]/index.js?module';
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
Is it designed to run server-side rather than for static sites?
Looks like you need a -- it could map 'lit' to the CDN hosted version or to a relative path.</p><p>More info: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...</a></p>
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.