117 SLOCs of HTML+JS, working equally well served from a server and from a local filesystem, complete with pagination, s, and a jump-to-page dialog. I was amazed at how far I could get with such a rudimentary tooling. I used ES modules, HyperApp as a minimalistic React/Redux workalike, and mini.css for some sane default styling. I put the JS right into a `` tag in the HTML. I didn’t even bother to have a separate JS file for the actual code, much less a build system. The only moving part, apart from the actual images/posts/videos, was a file called soup.js, which was just `window.soup=` plus the content metadata as JSON. The beauty of it was that it was a single static HTML file, copied verbatim to the archive. It produced an archive of assets, and I also added a rudimentary browser. One of my favourite hacks I did recently was in 2020 when soup.io was unexpectedly discontinued with short notice to promote my scraping framework, Skyscraper, I quickly whipped up a content downloader. If you go to lit.dev the documentation is actually pretty great and it’s probably the easiest way to get started. There are also a series of enhancement packages that are also totally opt in if you want more out of the box like internationalisation, client side routing etc. I tend to think of it as the 5kb developer experience enhancement that takes Web Components as a primitive and makes them an actual pleasure to work with. The side-effect of this is that it’s incredibly fast and lightweight. Some noticeable differences between it and other view layer libraries include the fact that it was written by a team who are arguably much closer to actual browsers engineers and it uses native Web Components. Lit is another library that is made up of a couple of things one of which is lit-html but is closer to a React or Vue by way of comparison. Lit-Html is a templating library similar to say Mustache or something like that but I would argue much more expressive. Hope this helps with some of your questions Server that transforms import specifiers (lit.dev does this by default): Use experimental "import maps" to go fully buildless to tell the browser where to point that bare module to (buildless) 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?)Ģ. So you have four-ish options to tell the browser where to look for 'lit':ġ. Import '/home/user/project/node_modules/lit/index.js' This is called a bare module specifier vs an absolute import specifier: When one writes `import 'lit'` the browser doesn't know where Lit is. Is it designed to run server-side rather than for static sites? I'd love to use this, I'm just not following how this works. Relative module specifiers must start with “./”, “./” or “/”. Uncaught TypeError: The specifier “lit” was a bare specifier, but was not remapped to anything. I just tried running the first tutorial verbatim after npm installing lit to the same directory, and I get: But then if I put "import from 'lit' " into a JS file and run a dumb static webserver (like python3 -m rver), what's linking "from 'lit'" to the necessary files in node_modules? If I run npm -i lit, it puts lit into node_modules. Sorry, maybe this is just my JS ignorance, but I don't understand how this runs without a build step. I also don't really consider rewriting import specifiers a build step - it's just locating files on disk. > I generally don't consider installing from npm a build step. 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. You can even write components right in DevTools, or in a script tag in plain HTML. Components are inspectable with regular DevTools. 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). Our libraries work straight from CDNs like Unpkg. We support plain JS (in addition to TypeScript). We take great care to make sure our libraries are usable without build tools. 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. If anyone's looking for something like a framework that works with buildless workflows you might check out the project I work on: Lit ( )
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |