3 ms·
I'm all for a lightweight approach to software development. But I don't understand the concept here. Looking at the first example: First I had to switch it fr
by TekMol 1y ago
I'm all for a lightweight approach to software development. But I don't understand the concept here.
Looking at the first example:
First I had to switch it from TS to JS. As I don't consider something that needs compilation before it runs to be lightweight.
Then, the first line is:
import {html, css, LitElement} from 'lit';
What is this? This is not a valid import. At least not in the browser. Is the example something that you have to compile on the server to make it run in the browser?
And when I use the "download" button on the playground version of the first example, I get a "package.json" which defines dependencies. That is also certainly not something a browser can handle.
So do I assume correctly that I need to set up a webserver, a dependency manager, and a serverside runtime to use these "light weight" components?
Or am I missing something? What would be the minimal amount of steps to save the example and actually have it run in the browser?
- fmbb 1y agoThe browser supports module imports. But your script must be of type ”module”: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- TekMol 1y agoNot with paths like 'lit' that is used here.
- uallo 1y agoImport map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- TekMol 1y agoThe example does not use an importmap attribute. Overall, the example does not seem like something that is supposed to run directly in the browser without some kind of intermediate step. That is why I asked what the minimal number of steps would be to download the example and have it work locally.
- Ruphin 1y agoI guess for most people the standard is to install things from NPM which explains the format of the documentation. If you want to do something completely raw, you can replace 'lit' with something like this: https://unpkg.com/lit@3.3.1/index.js?module https://unpkg.com/lit@3.3.1/index.js?module You can even dynamically import that in the a running browser console and use it directly on any webpage.
- Ruphin 1y agoObviously this wouldn't be suitable for (serious) production deployments, but it is a super accessible way to easily get started anywhere.
- TekMol 1y agoI guess for most people the standard is to install things from NPM "things" that run in the browser? replace 'lit' with something like this: https://unpkg.com/lit@3.3.1/index.js?module Thanks, that works: https://plnkr.co/edit/2y9JEOgSZLpO4bE7 https://plnkr.co/edit/2y9JEOgSZLpO4bE7
- Ruphin 1y agoI estimate the vast majority of "web projects" begin with npm installing something of some sort, yes. React is dominating the web development space (judging from the average "popular web stack 2025" search result), and it and a significant portion of the competing platforms start with installing some dependencies with npm (or yarn, or what have you). Especially projects that compete in the same space as Lit. That isn't a criticism of projects that don't use npm, and it doesn't make them less valid, but it makes sense for the documentation to match the average developer's experience.
- brazukadev 1y agoThe maintainers and then the docs assume that everyone is using typescript