S
SolidJS2mo ago
p2

equivalent of React.detailedHTMLProps<T>?

Trying to use a webcomponent in my solid project. It says that to interface with React using typescript, I add this to my jsx:
declare global {
namespace JSX {
interface IntrinsicElements {
'math-field': React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement>;
}
}
}
declare global {
namespace JSX {
interface IntrinsicElements {
'math-field': React.DetailedHTMLProps<React.HTMLAttributes<MathfieldElement>, MathfieldElement>;
}
}
}
What would the solid equivalent of this be? I have this which I hacked together from some other internet sources but It doesn't seem to be working:
declare module "solid-js" {
namespace JSX {
interface IntrinsicElements {
'math-field': HTMLAttributes<MathfieldElement>;
}
}
}
declare module "solid-js" {
namespace JSX {
interface IntrinsicElements {
'math-field': HTMLAttributes<MathfieldElement>;
}
}
}
2 Replies
peerreynders
peerreynders2mo ago
Yeah, in my experience "typed-JSX + Web Components" can be a bit of a slog. The smoothest way forward is probably to add each JSX prop as you need it; I found that I had to drop HTMLAttributes<MathfieldElement> for things to work. Example: https://stackblitz.com/edit/stackblitz-starters-g7yf6y?file=src%2Findex.tsx Fortunately you have full typed access to the MathfieldElement instance in the non-JSX Typescript (and then there is the SDK documentation).
p2
p22mo ago
thank you so much, this has really helped