Deno + Lit
13 Replies
I'm looking for something simlar.
I want to use https://shoelace.style/ with fresh SSR.
Shoelace is built on top of lit.
Shoelace: A forward-thinking library of web components.
Hand-crafted custom elements for any occasion.
You can esbuild it yourself or use Aleph.js (actually no clue if it supports lit)
What a coincidence 😄 my favorite bird plus a similar desire to use shoelace. I only bumped into issues so far. May be someone could see what might be wrong. https://github.com/king8fisher/shoelace-style-deno/issues/1
GitHub
Attempt to use shoelace.style's SlButton fails · Issue #1 · king8fi...
Achieved: Deno sees the name of SlButton, apparently importing it correctly with intimidating link: import { SlButton } from "https://esm.sh/@shoelace-style/shoelace@2.8.0?alias=react:preact/c...
okay
I will try esbuild
esbuild has a deno.land module btw
yea but this is just a link to the webpage xD
But what I don't quite understand is this: Lit doesn't use a new syntax like React (TSX)... why or how do I have to build it at all?
Or is ESBuild then only for bundling?
Furthermore, I also have a little trouble getting Lit to run under Deno.... I import Lit from a CDN server. But in the examples everything is done via NPM (including the imports).
As an example, how do I import the following NPM module into Deno?
import {customElement} from 'lit/decorators.js';if you use ts
if you're using js, then you can skip esbuild
import maps & esm.sh or just bare url imports
https://esm.sh/lit@2.8.0/decorators.js
Thanks
awhile back I started a project intending to solve this problem of using Lit and a starter project myself, it's at: https://github.com/sourdough/starter
GitHub
GitHub - sourdough/starter: www starter 🦕
www starter 🦕. Contribute to sourdough/starter development by creating an account on GitHub.
it includes a few tools including for developing locally, this script shows the way
PORT=8000 && deno run --allow-read=./ --allow-net=0.0.0.0:$PORT https://raw.githubusercontent.com/sourdough/starter/main/tools/http.js --port=$PORT --index=index.html --www=./www/one of the other scripts in tools will pull down from one of the cdn's locally and I was pushing these externals (ie the lit/litelement etc libraries) into https://github.com/sourdough/wildtype so I could just clone the repo and work locally; I think it's the
external.importer.js at https://github.com/sourdough/starter/blob/main/tools/external.importer.js I should work on this project a little more so it's easier to pick up; Lit is basically all that's needed for state managementGitHub
GitHub - sourdough/wildtype: external ES modules--all external tran...
external ES modules--all external transformed dependencies as static assets - GitHub - sourdough/wildtype: external ES modules--all external transformed dependencies as static assets
GitHub
starter/tools/external.importer.js at main · sourdough/starter
www starter 🦕. Contribute to sourdough/starter development by creating an account on GitHub.
Thanks for sharing
np, if you find something useful there it would be great to know the details--feel free to message about it