SolidJS•3mo ago

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•3mo 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).

peerreynders

StackBlitz

solidjs-mathlive - StackBlitz

Adapted from https://github.com/arnog/react-mathlive

CortexJS

p2•3mo ago

thank you so much, this has really helped

Gaming

Programming

equivalent of React.detailedHTMLProps<T>?