-
-
Notifications
You must be signed in to change notification settings - Fork 783
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Preact Typescript #868
Comments
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. |
See this tweet from @ParamagicDev:
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? |
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:
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 |
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; |
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. |
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 |
Recent versions of See this issue reported in the lit repo: lit/lit#4138 (comment) This preactjs/preact#4124 is the missing piece to get proper type checking working. We might just copy that over to I tried to tweak the returned type from 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;
};
}
}
}
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. |
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 thesrc/app.tsx
file in your code editor or try running it throughtsc
.On the
main
branch, if you add a not defined propnonExistant="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:I tried installing
@types/react@18.0.17
and@types/react-dom@18.0.6
on thereact-types
branch. It did solve the problem with the component types, but introduced new errors, such as: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.The text was updated successfully, but these errors were encountered: