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 #16 but it does not yet conform to the Typescript jsxFragmentFactory implementation in microsoft/TypeScript#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:

vhtml/test/vhtml.js

Lines 177 to 191 in 96fe21e

	it('should support string fragments', () => {
	expect(
	h(null, null, "foo", "bar", "baz")
	).to.equal(
	'foobarbaz'
	);
	});
	it('should support element fragments', () => {
	expect(
	h(null, null, <p>foo</p>, <em>bar</em>, <div class="qqqqqq">baz</div>)
	).to.equal(
	'<p>foo</p><em>bar</em><div class="qqqqqq">baz</div>'
	);
	});

[jcubic]

vhtml.Fragment works.

I have a working demo on CodePen