I'm aware that TypeScript has support. Not sure how you would like this to be implemented though.

tsx-dom is currently always returning an HTMLElement. A Fragment is no HTMLElement. It would be an array of HTMLElements at best. If I change the return type to HTMLElement | HTMLElement[], you would always have to check the type of the returned value, which is a bit ugly.

Possible alternative

I guess it would be an option to return an HTMLElement, which is flagged somehow.
For example <>hello <b>sportshead</b><> would become <tsx-dom-fragment>hello <b>sportshead</b></tsx-dom-fragment> and whenever I encounter this tagName inside JSX, I would just extract its children and just trash the tsx-dom-fragment element itself. But this would only work inside of the JSX syntax. In all other places, where you work with the raw result, you'd have to check yourself.

I.e. If you have the following code:

const Greeting = () => <>hello <b>sportshead</b><>;
const element =  <main><Greeting /></main>;
document.body.appendChild(element);

You would see <main>hello <b>sportshead</b></main> in the browser.

However if you where to use it like this:

const element =  <>hello <b>sportshead</b><>;
document.body.appendChild(element);

You would see <tsx-dom-fragment>hello <b>sportshead</b></tsx-dom-fragment> in the browser.

This would not be what users expected though, so this would have to be made very clear in the documentation.

Of course, you could write a function to help with this issue:

import { h, appendChild} from "tsx-dom";

const element =  <>hello <b>sportshead</b><>;
appendChild(document.body, element);

and tsxAppendChild could take care of this for you. But that also adds some complexity to the usage and people might forget.

JSX Fragment support #4

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions