TSX (and JSX) framework comparison

[bessey]

I am experimenting with AdonisJS and like others have been trying to get JSX working in some capacity. I do quite like Edge, but the lack of type checking and Prettier formatting made me want to consider more options.

Thus far, I have had pretty bad luck. Every option seems to have major tradeoffs

• Kita HTML: no context support. requires explicit XSS checks, with no way to be safe by default. Maybe I'm missing something but attempting to enforce this through static code analysis seems crazy vs taking a minor perf hit for clean templates and peace of mind.
• Preact: Exposes bad TypeScript types for event handlers HTML attributes. Since it expects handlers to be an actual JS function rather than a string. Perhaps this can be worked around
• React: Same TS issues as Preact. Also, expects arrays of elements to define key, which has no value in the context of pure single render static HTML output.
• JSXTE: No event handler issues, they are typed as strings. However no SVG support or className support, both of which make Tailwind best practices unwieldy.

Things I have yet to try but don't have high hopes for...

• Hono HTML supports client side rendering too, so I imagine the same event handler type issues will apply
• NanoJSX same as above.

I don't suppose anyone has suggestions to work around the issue, or more JSX frameworks to try? In my hand the ideal set of features is:

• XSS safe by default
• No reactivity, i.e. not designed for client side reactive rendering
• Strongly typed HTML elements and attributes, but typed for static HTML rendering (i.e. onclick: string)
• Still aliases class to className (because props destructuring is a pain otherwise)

Otherwise I might have to start cobbling something together 😄

[bessey]

Oh and another issue that I think no JSX system can solve elegantly; you can't use AlpineJS tags like @click.prevent in JSX as its syntactically invalid 😢.

This might tip the scales back in Edge's favour!

[thetutlage]

You can use x-on:click instead. Also, we have an article written on how to setup Kita JSX with AdonisJS https://adonisjs.com/blog/use-tsx-for-your-template-engine

[Julien-R44]

So yes, you can use x-on:click. but as soon as you need to have a modifier like .prevent, you need to do something a bit ugly. for example :

export function DialogRoot(props: PropsWithChildren) {
  return (
    <div
      x-data="{ modalOpen: false }"
      {...{ 'x-on:keydown.escape.window': 'modalOpen = false' }} // 👈👈👈
      class="{ 'z-40': modalOpen }"
    >
      {props.children}
    </div>
  )
}

Maybe that's why solutions like NanoJSX or Hono's client components are better suited in TSX stacks.

[thetutlage]

Maybe that's why solutions like NanoJSX or Hono's client components are better suited in TSX stacks.

Yeah, it seems like putting layers over layers. Once you opt for client components, you need to decide how to run them in both server and client. So you either use use server and use client directives + a compiler to bundle them. Or you go for islands.

Then you realize, if you are introducing the client components, why not use the power of React vs self implementing everything with a custom JSX parser.

And then you realize, you are basically implementing a poor's man NextJS.

---

For me personally, Edge shines for its simplicity, regardless of its lack of type-safety and auto-formatting.

TSX is nice, but the boundaries have been to drawn or you will end up putting layers over layers.

[Julien-R44]

About Kita, I would also say that one of the problems is the lack of API Context. They recommend using Async Local Storage to avoid props drilling, but async local storage has a fairly significant impact on performance.

also, I wanted to recommend maybe trying https://github.com/ncpa0/jsxte/. I haven't tried it, but they do have a Context API.

[thetutlage]

I used JSXTE before Kita, but something did not work for me as I expected. But, I am happy to give a try again and see how it goes.

[Julien-R44]

Yeah I remember we tried JSXTE instead of KitaJS initially, but I can't remember why we didn't keep it 😅 What was the reason?

[bessey]

I'm playing around with it now and one issue I've run into is the lack of SVG support

[bessey]

Also it doesn't offer remapping of class to anything else like className, so working with looks like cva that need a lot of ({ className }) destructuring is a pain

[RomainLanz]

About Kita requiring explicit XSS checks. I have asked @arthurfiorette in his Discord why it is that way and could we make it "safe" by default. But doing so creates some issues. Here is his answer:

Arthur Fiorette: This is actually an interesting topic
Arthur Fiorette: I tried using "safe-by-default" but there was a big problem with it
Arthur Fiorette: the main reason about whi kitajs is fast is because it returns raw strings
Arthur Fiorette: not objects, not arrays, not String instances with custom attributes, just strings
Arthur Fiorette: then it becomes impossible to distinguish <div><child /></div> and <div>{'<xss />'}</div>
Arthur Fiorette: since JSX translates to createElement(div, null, createElement(child, null)), the most inner jsx tag gets resolved first
Arthur Fiorette: and it becomes impossible to know if a children tag was rendered with jsx or comes from a user input
Arthur Fiorette: https://www.npmjs.com/package/ghtml does something similar, but reversed. As it does not uses JSX, they have choosen to use ! when escaping should be avoided

Arthur Fiorette: It may be a "safer" approach, but JSX will be impossible to use if every jsx child requires a attribute in their parent
Arthur Fiorette: What's left was to create some sort of LSP helper to detect them, since syntactically <div><child /></div> is very different from<div>{'<xss />'}</div>.

About the Context API, maybe we can try something and make KitaJS better. ALS creates a drop of performance, but it all depends on the application you are building. Also, ALS will become faster in some Node.js version because they are rewriting and improving the API.

JSXTE has a Context API, but I don't like that I have to write all my components who needs access to it inside a render function.

[arthurfiorette]

I'm also open to new ideas regarding XSS and ALS, if you guys can find a better way, I'm 100% open to implement it :)

[bessey]

Would an opt in less performant but safe by default jsx runtime sit well with you @arthurfiorette? E.g. "jsxImportSource": "@kitajs/html/safe"?

I was looking at the benchmarks and while I appreciate the existing approach gives Kita its speed, I personally would trade 3x slowdown for safe by default output that doesn't need annotation, even with scan-xss being perfect. By your own benchmark, Preact still generates the 200KB of DOM featuring >1k component renders in 1ms.

[arthurfiorette]

I'm experimenting with returning a superset of the string prototype which would still return a "string" like return type while allowing to differentiate between <tag /> and "<tag />".

It's currently 50% slower but I can get it down a little bit more and after all 50% slower of super fast is still faster than all major frameworks (besides ghtml).

[arthurfiorette]

Maybe I'm missing something but attempting to enforce this through static code analysis seems crazy vs taking a minor perf hit for clean templates and peace of mind.

This may sound crazy yes, but after extensive use of the scan-xss cli and the editor integration with ts-html-plugin, it gets super easy and I did not find any problems with it. With the editor integration, the feedback comes instantly and its hard to miss a safe attribute. Combining it with a CI/CD step to run xss-scan, it gets impossible to miss a safe attribute.

Even with this, I'll be implementing a ghtml like syntax for kita, which is safe by default but requires a ! to use child elements. I do not recommend ghtml for now because it does not supports many features from kita/html, like async components and suspense. However some users may think its a safer approach to use html`` like syntax with escaping by default.