Need clarification on jsx-runtime

[izimuth]

Hi,

I am trying to implement a custom renderer for solid but I am getting intellisense errors in visual studio code regarding the typing of JSX.Element.

At the bottom of https://github.com/solidjs/solid/tree/main/packages/solid/universal#readme there is this:

Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the jsxImportSource. If mixing and matching different JSX implementations you will need use the per file pragmas.

But i can't seem to figure out how to get it to work; can you please provide more clarification on what is involved? How do i add a "jsx-runtime entry" ?

I tried simply declaring JSX.ELement in a file and passing the reference to jsxImportSource but it has no effect.

[ryansolid]

It might be good to look how Solid exports this ourselves (they show up at build time on the repo). I have found this requires a little bit of play in the past. But Solid's repo export 2 different jsx runtimes. Might serve as an example. I don't actually have a custom renderer example with TSX offhand.

Generally you need a jsx.d.ts that defines all the elements you need. From there it should be a matter of setting the jsxImportSource. I'm going to move this to discussions and see if anyone else has experience here.

[Alloyed]

Ok, here are my notes from building my own typescript custom renderer:

From react you may be used to just typing JSX.Element without any imports, and having things "just work". This is, apparently, a deprecated feature!

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3307

In the future, I guess, it's expected that you import JSX explicitly via import {JSX} from 'react' or so. This matches what upstream solid does: import {JSX} from 'solid-js'

The typescript compiler internally, to understand your jsx, now automatically imports <your jsx import source>/jsx-runtime and uses that as the source of the JSX namespace. here is that file for react:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/jsx-runtime.d.ts

Importantly, that means that means you must have a jsx-runtime.d.ts and it must be named that specifically. Typescript won't work without it.

Beyond that, you probably want to export the JSX namespace to users of your renderer too, so they can write types with JSX expressions in them. The name here doesn't matter, jsx.d.ts isn't special, but most likely you'll want to export it from your index too.

In terms of the contents of the JSX namespace, the typescript official docs cover what each type does and what typescript can check for you:

https://www.typescriptlang.org/docs/handbook/jsx.html

hope this helps!

[rubick24]

I tried create my own JSX namespace, but it seems functions like children and createContext().Provider that imported from solid-js still reference to solid-js's JSX namespace. Maybe these function should use a generic type that JSX.Element can be passed in?