[ts-lit-plugin] Is it Lit-specific? Or works with any custom element framework with same `html` syntax?

[trusktr]

Does the ts-lit-plugin work only with Lit-based custom elements? Or will it work with any custom element definitions used in any html template tag (assuming it has the same syntax as Lit's)?

We're aiming to get Lit's syntax into html tagged templates in Solid.js and Pota to create interoperability with existing custom element tools (such as ts-lit-plugin).

If this all works based on some sort of generic type definition system (f.e. custom elements manifest or vscode custom data) and requires only the syntax, then this will be great. If on the other hand this works by relying on Lit-specific custom element type definitions, that may not work well.

[trusktr]

Or a related note, is there a guide on how to add type definitions for any non-Lit elements so that Lit users have the full type safety in Lit templates?

[trusktr]

This is lit-specific. We need something where libraries can easily map types of their library elements to types the html templates accept, etc.

For example, for Solid.js html templates, we need to be able to type check prop values inside of html templates to have T | (() => T) (a value, or a getter function that returns a value and is ran in an effect for reactivity). Later on, if TC39 Signals make it forward, this can be updated to T | (() => T) | Signal<T>.

At the moment, lit-plugin/lit-analyzer seems to check the type of a property from an element class, and use that type, but this is too restrictive for other frameworks besides Lit.

With Solid-based libraries like Lume Element, a class definition that defines a property like this:

class SomeElement extends Element {
  someValue = 123 // type is 'number'
}

needs to be allow users to use Solid html like this:

// num1 and num2 are getter functions that return `number` values
const [num1, setNum1] = createSignal(123)
const [num2, setNum2] = createSignal(456)

const added = () => num1() + num2()

const result = html`
  <some-element prop:some-value=${added}></some-element>
`

Note that frameworks may vary on the prop/attribute syntax, f.e. Solid has prop:foo and Lit has .foo, and Solid has attr:foo and Lit has foo, etc.

Here's a playground showing how Solid's prop: and attr: work:

https://playground.solidjs.com/anonymous/a7fd1d7e-84b8-4800-ad06-13f6755b7b9d

Instead of relying strictly on Lit's format, we need the expressive capability that JSX in TypeScript has. This way, frameworks can define prop types more flexibly and lit-plugin could actually be call custom-element-plugin or similar.

With TypeScript JSX, React has its own type definitions, and Solid has its own type definitions (f.e. Solid having type defs for prop:foo and attr:foo while React doesn't).

[JulianCataldo]

This is lit-specific. We need something where libraries can easily map types of their library elements to types the html templates accept, etc.

I'm building this specific tool right now. It should cover all your needs. You can find me on the #tooling channel of the Solid Discord, talking about it.

[shining-mind]

This is lit-specific. We need something where libraries can easily map types of their library elements to types the html templates accept, etc.

I'm building this specific tool right now. It should cover all your needs. You can find me on the #tooling channel of the Solid Discord, talking about it.

Can you share a link to the repo of your tool?