Support Preact Typescript

[tigrr]

What issue are you having?

It looks like right now Shoelace's React version's type definitions don't work with projects in Preact. The components themselves work, but the props' types information is missing.

I created a demo project on GitHub. It is created using Vite preact-ts template. Please clone it and try to open the src/app.tsx file in your code editor or try running it through tsc.

On the main branch, if you add a not defined prop nonExistant="nope" on the SlButton (line 21), Typescript won't show it as an error, whereas adding this prop to a div above of course produces an error:

Type '{ children: Element[]; class: string; nonExistant: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'nonExistant' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

I tried installing @types/[email protected] and @types/[email protected] on the react-types branch. It did solve the problem with the component types, but introduced new errors, such as:

(alias) const SlButton: React.ForwardRefExoticComponent<Partial<Omit<React.HTMLAttributes<Component>, "onSlBlur" | "onSlFocus"> & Omit<Component, "children" | "onSlBlur" | "onSlFocus" | "defaultChecked" | ... 251 more ... | "onTransitionEndCapture"> & {
    ...;
}> & React.RefAttributes<...>>
import SlButton
This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.ts(2746)

Describe the solution you'd like

I don't really know. Maybe others have some ideas how to implement support for Typescript and Preact in Shoelace or can offer workarounds. Other libraries (such as "material-ui" for example) work fine with Typescript Preact. Maybe this is something about @lit-labs/react.

Describe alternatives you've considered

The workaround I was trying was to install @types/react and @types/react-dom, but that doesn't work either.

[claviska]

I'd love to support this, but I'm also not sure what the right solution is. I'll dive in when I get some time, unless somebody has a suggestion here.

[claviska]

See this tweet from @ParamagicDev:

Preact supports custom-elements out of the box, is there any reason to use the React wrappers if you can use the regular HTML elements?

He raises a good point. Are you mostly trying to use the Shoelace wrappers idiomatically? If so, did you come across any problems using the custom elements directly?

[cyantree]

I'm playing around with the same thing. I'm experimenting with combining Preact elements and web components.

Using Shoelace componnents without a wrapper works, however the tags are unknown to JSX/TSX. Therefore the following error will be thrown:

Property 'sl-button' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

So to solve this it seems to be necessary to provide the appropriate type declarations like this:

declare global {
    namespace preact.createElement.JSX {
        interface IntrinsicElements {
            'sl-button': {
                children: any;
                size?: 'small' | 'medium' | 'large' | undefined;
            };
        }
    }
}

Maybe it's somehow possible to get rid of preact.createElement too.

[cyantree]

Here's another quite slim (and dirty?) wrapper to get it working with Preact until there's an official solution:

import type {SlButton as SlButtonNative} from '@shoelace-style/shoelace';
import '@shoelace-style/shoelace/dist/components/button/button.js';

export const SlButton = 'sl-button' as any as (props: {
    children?: any;
    'onsl-blur'?: ((e: CustomEvent) => void) | undefined;
} & Partial<Omit<SlButtonNative, 'children'>>) => any;

[claviska]

This is a bit of a stretch, and I don't expect a reply from Jason, but pinging @developit to see if there's a recommended solution for making types for React-wrapped custom elements work with Preact as well.

[KonnorRogers]

Oh wait I have a gist for this, it definitely doesn't work as-is, but should get fairly close to what is needed to support Preact. It uses the regular HTML elements and not the React Wrappers.

https://gist.github.com/KonnorRogers/3dbbd28a41190f9ef8961f25775e814a

[augustjk]

Recent versions of preact include almost all compatible types that can replace those from react.

See this issue reported in the lit repo: https://github.com/lit/lit/issues/4138#issuecomment-1702562940

This https://github.com/preactjs/preact/issues/4124 is the missing piece to get proper type checking working. We might just copy that over to @lit-labs/react if preact/compat aren't open to adding it.

I tried to tweak the returned type from @lit-labs/react directly usable in preact without the compat mapping and it's almost there but breaks with typescript >= 5.1. It seems like less headache to go with the mapping.

To directly use custom elements in preact, users would need to add something like this:

import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
import {
  SlBlurEvent,
  SlFocusEvent,
  SlInvalidEvent,
} from '@shoelace-style/shoelace';
import { LitElement } from 'lit';

declare module 'preact' {
  namespace JSX {
    interface IntrinsicElements {
      'sl-button': HTMLAttributes<SlButton> &
        Partial<Omit<SlButton, keyof LitElement>> & {
          'onsl-blur'?: (e: SlBlurEvent) => void;
          'onsl-focus'?: (e: SlFocusEvent) => void;
          'onsl-invalid'?: (e: SlInvalidEvent) => void;
        };
    }
  }
}

Partial<Omit<SlButton, keyof LitElement>> this could be better. Maybe picking from SlButton is better than omitting LitElement as some methods like render() can also show up in the suggestion. This is true of @lit-labs/react wrapped component as well though.

I don't know if there's a source for the event names the component fires that TS can pick up on without parsing a manifest to be able to auto generate this all within typescript.