Mqx
Mqx8mo ago

Deno + Lit

Hey how can use the Lit framework with Deno? Is there a guide or config on how to use it with this framework?
lit.dev
Lit
Simple. Fast. Web Components.
13 Replies
TurboJack
TurboJack8mo ago
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.
Kyiro
Kyiro8mo ago
You can esbuild it yourself or use Aleph.js (actually no clue if it supports lit)
king8fisher
king8fisher8mo ago
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...
Mqx
Mqx8mo ago
okay I will try esbuild
Kyiro
Kyiro8mo ago
esbuild has a deno.land module btw
Mqx
Mqx8mo ago
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';
Kyiro
Kyiro8mo ago
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
Mqx
Mqx8mo ago
Thanks
jimmont
jimmont8mo ago
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.
jimmont
jimmont8mo ago
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/
jimmont
jimmont8mo ago
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 management
GitHub
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.
Mqx
Mqx8mo ago
Thanks for sharing
jimmont
jimmont8mo ago
np, if you find something useful there it would be great to know the details--feel free to message about it
More Posts
Issues with Crypto Subtle Digest ext:deno_crypto/00_crypto.jsCurrently we are using `deno_core v0.200.0` `deno_runtime v0.123.0` when attempting to invoke `cryptAnyway to use deno fmt within a script itself without having to call deno again?I am working on a code generator and I'd like to run a string through deno fmt before I save to fileinteraction_endpoint_url: couldn't be verifiedI'm trying to create an http interactions bot using deno deploy, but sometimes my url fails to be veLost access to deno land module, how to reset the repo?My repository was accidentally destroyed on GitHub and I recreated it the same exact way. The webhooBDD with async testsI'd like to run some tests that all call the same helper function that wraps the bdd `it` function. Is there a schedule / pattern for which Deno releases get new Docker files?We'd love to update to Deno 1.37.1 in production, but deno_docker is still at 1.37.0. I've noticed tIs the Fresh compornents test function enabled?Attempting to write a test for Fresh compornents. I was able to verify the rendered content. I am Inquiry Regarding Deno Security Model and Command Injection VulnerabilityI am currently instructing a class on software security and have been exploring Deno's security mode`WARNING: v8::OwnedIsolate for snapshot was leaked` and/or crash after using snapshotOn startup, I create a runtime: ```rust let js_runtime = JsRuntimeForSnapshot::new(deno_corOak: Remove HTML extensions when serving filesUsing Oak, how can I serve `home.html` as `/home` (or `/home/`). I'm aware that `Context#send` exist