Fragment / jsxFragment support

[mappu]

Hi, this is a cool project, thanks so much.

I am using Typescript to compile the JSX, with this tsconfig.json:

    "jsx": "react",
    "jsxFactory": "h",

Most code is converted properly, except when using a fragment:

const foo = <>
   <tr><td>row 1</td></td>
   <tr><td>row 2</td></td>
</>

this warning from Typescript is given:

The 'jsxFragmentFactory' compiler option must be provided to use JSX fragments with the 'jsxFactory' compiler option.

I tried "jsxFragmentFactory": "Fragment", in tsconfig.json but of course no such Fragment is known nor exported from the vhtml import.

• Is it possible to support JSX fragments in VHTML?
• Is there any other way of storing multiple <tr> siblings as per the above example?

[mappu]

I see there is Fragment support added in https://github.com/developit/vhtml/pull/16 but it does not yet conform to the Typescript jsxFragmentFactory implementation in https://github.com/microsoft/TypeScript/pull/35392 at all.

Adding const Fragment = ({ children }: { children: string[] }) => h(null as any, null, ...children); to the source file seems sufficient, but, it should be added into vhtml itself for jsxFragmentFactory to work more seamlessly.

[odinhb]

I wanted to mention that configuring tsconfig as

    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "h.Fragment",

allows me to use fragments with vhtml even though #33 is not merged. I don't know why this is. I suppose it might depend on the bundler. I'm currently using esbuild, but maybe it's worth a shot for others to try instead of waiting for support to be merged here?

[r-thomson]

The solution is to set up your config like this:

{
    jsxFactory: 'h',
    jsxFragment: 'null',
}

See these test cases: https://github.com/developit/vhtml/blob/96fe21e63a983d7a8f52d8c51a0c994490313abc/test/vhtml.js#L177-L191

[jcubic]

vhtml.Fragment works.

I have a working demo on CodePen