Should TS features be included with the bundles for use in Deno?

[bicknellr]

This discussion is meant to expand on this thread in the Lit Slack.

Deno's built-in support for TypeScript makes it possible to write and run TypeScript without a distinct build step. Should Deno + TS without other tools be considered a target workflow for the bundles? If so, should the bundles include features meant strictly for TypeScript? (i.e. type declarations, Lit's decorators)

cc @duncanmak @taylor-vann

[taylor-vann]

I think there's a lot of love for webcomponents in Deno and it's a great environment for new ideas that are browser focused, Lit could really make an impact. Deno encourages shallow dependencies, something where Lit shines. I've already used Lit with success in deno, direct support would be even better!

[zandaqo]

I use Deno for library development, including for compago (framework/state management lib for Lit). Importing Lit did prove to be tricky due to issues with typings in modules generated by Skypack and ESM, so having Lit itself support Deno would be a boon.

Deno provides unparalleled DX for development and I recommend to check it out if you're not going to deploy on it/use it as a runtime. A heads-up, though, when it comes to Lit, there is an issue with the Deno formatter not (officially) supporting html template tags.

[taylor-vann]

I completely agree about the unparalleled DX. It's been incredibly difficult to work in NPM after some time in deno <3

[beingminimal]

Hey we also want to use deno and lit in production.
But we have hardly found any sample repo for that and while we were searching we have found this also.
See this long awaited bug fix denoland/deno#13048
Due to such things now it is confusing for developers, how to solve such an issue to run lit in deno?
And we will be so grateful to you if you can solve this for us.
Awaiting your response. Thanks

[zandaqo]

For bundling my lit apps, I use esbuild (with a plugin).

I haven't had much experience with the Deno bundler--when I first encountered it, there was even talk about discontinuing it in favor of esbuild, but they decided against it, so I assume in time they are going to fix this and other issues.

[taylor-vann]

@zandaqo @codecycleteam
Lit almost works out of the box with skypack :D
And i think it will work without all the extra types imports below once #2383 is resolved

When I create projects in deno with Lit:

1. set tsconfig to include the DOM

{
  "compilerOptions": {
    "lib": ["dom", "esnext"],
    "strict": true,
    "experimentalDecorators": true
  }
}

2. make sure TrustedTypes is available.

// deps.ts

import "https://cdn.skypack.dev/trusted-types?dts";

export type { TemplateResult } from "https://cdn.skypack.dev/lit?dts";

// @deno-types="https://cdn.skypack.dev/lit?dts"
export { css, html, LitElement } from "https://cdn.skypack.dev/lit";
export {
  customElement,
  property,
  state,
} from "https://cdn.skypack.dev/lit/decorators";

3. run the deno bundle command

deno bundle --config ./tsconfig.json ./mod.ts ./bundle.js

[tdillon]

@taylor-vann, when you setup a new Deno project as you outlined above, do reactive properties work?

[taylor-vann]

Yes :) I can confirm reactive properties work.
Here is an example of lit (and lit's decorators) being used to represent router state
https://github.com/herebythere/router/tree/main/docs

[tdillon]

@taylor-vann I agree the reactive properties work during the initial render, but the experience I'm having is subsequent updates to the reactive properties are not working.

Here is my super simple Deno example that doesn't work: https://github.com/tdillon/test-lit-reactive-properties.

I also have a Lit Playground example that works. Just click the My App: ??? text and it will update the reactive property.

[taylor-vann]

Hey sorry for the late reply!
I'll take a look at your demo :D thanks
This issue isn't prioritized right now. But I'll keep working on this and share updates as they come!

[taylor-vann]

[edited, saw the deno.json]

Looking at my example though, i might be setting a property once aaaand might not ever be updating it! x_x
I'll double check.

[zandaqo]

@tdillon @taylor-vann I looked into it a bit more:

1. Using trusted types and adding ?dts to the imports indeed fixes importing as you can see in my library.
2. The reason reactive properties are not working has to do with the infamous overriding of class fields. Deno by default sets useDefineForClassFields to true. I'm not yet sure how to go around this without changing the component code and separating declaration and assignment of default properties.