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?
Simple. Fast. Web Components.
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
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
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 - 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=$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 management
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
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

Looking for more? Join the community!

Recommended 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` existdeno_console not being properly instantiated?Not sure if it's indended, or if I am missing a step, but several core extensions, for example the dTailwind nonfunctional on fresh-update from 1.3.1 -> 1.4.3After running `deno run -A -r https://fresh.deno.dev/update .` on my project, the tailwind styles doassertEquals deprecated in vscode?Since upgrading to std@0.202.0 I'm seeing that assertEquals is marked deprecated, but I can't see whForce await import() to import a fresh copy?I have a Deno instance that dynamically loads a module with: `await import("some/module.js")` The mFresh ClassList Brokenhttps://github.com/Leave TLS connection open in between testsWhen I have 2 tests that use a database connection and attempt to close the connection `afterAll` thNvim tsserver clash with denolsI have read the docs and added a root_dir in my lua lsp file but for some reason tsserver still lanccircular type reference nonsensewhy does removing an array nest cause this to be a circular dependency?? shouldn't it be functionallGetting exports from an evaluated module with get_module_namespace always results in null valuesTrying to get module exports like the example [here](https://github.com/denoland/deno/pull/14026/fiIs there any way to define a signal inside a route component?Is there any way to define a signal inside a route component? I am trying to do it but an error rai