Dedicated Preact wrappers

[ouvreboite]

👋 Is there any interest in creating preact types for Shoelace?

It's already possible to use Shoelace in preact, but this requires using the react bindings + the preact/compat mode. That's doable in a node environment, but more work in a Deno environment (for example to use Shoelace in Fresh, which uses Preac). Astro is another place where Preact+Shoelace could make sense: Shoelace provides the accessible components and Preact adds the small/lightweight interactivity for the "islands".

Generating preact types from the custom-elements.json files is doable. I used blueprintui/custom-element-types as a proof-of-concept, which got me halfway there.

• I can use all the elements in my JSX/TSX ✅
• The JSDoc is missing, so the in-IDE documentation is sub-par 🚫
• The events are not typed 🚫

So, it seems fairly easy to generate dedicated Preact types (with good JSDoc and event types).

[claviska]

We'd love to add types for Preact. I'm not sure we'll have time to dedicate to it this year, but if someone contributed a PR for it we'd be grateful! (I can help write the docs for it.)

[ouvreboite]

Nice!

I can try to do a PR to generate the types to allow using Shoelace custom elements in Preact’s JSX (so to allow writing : <sl-input type ="text" onsl-input={handleInput} ></sl-input> with type safety )

But I think this would requires using the CDN import. I’m not sure this would allow bundling, as there would not be actual Preact components to import, merely a valid JSX syntax.