Fragment / jsxFragment support #31

Activity

1. mappu commented on Jun 3, 2021

   

   mappu

   on Jun 3, 2021

   Author

   More actions

   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.
2. bluelovers

   added a commit that references this issue on Nov 17, 2021

   feat: support typescript jsxFragmentFactory

   ...

   76f7569
3. odinhb commented on Oct 20, 2022

   

   odinhb

   on Oct 20, 2022

   More actions

   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?
4. r-thomson commented on Mar 4, 2023

   

   r-thomson

   on Mar 4, 2023

   More actions

   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>'
   	);
   	});
5. jcubic commented on Dec 30, 2023

   

   jcubic

   on Dec 30, 2023

   More actions

   vhtml.Fragment works.

   I have a working demo on CodePen