Consider supporting the React JSX transform API

[kitsonk]

I was wondering if you would consider supporting the "new" React JSX transform API.

Currently TypeScript and most bundlers support it. It would require having /jsx-runtime and a /jsx-dev-runtime modules as part of the package, and the transpiler would import those from a base. We are considering fully supporting it in Deno (see: denoland/deno#8440).

[yandeu]

I would love to switch to the new transform API. I have never used it. Do you have some simple examples?

[kitsonk]

Babel, swc, TypeScript, Flow (and basically every JSX transpiler of note) will take this:

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

And transform it into this:

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

The "import source" is set various ways, including the pragma /** @jsxImportSource nano-jsx */. That would cause the transpiler to try to import nano-jsx/jsx-runtime as an import specifier.

A JSX runtime should ideally supply a few APIs exported from jsx-runtime:

• jsx - the "typical" factory
• jsxs - the transpiler can determine that the children are static and so will use jsxs. It is part of the API, but currently React doesn't do anything special with it, it is just an alias for jsx.
• Fragment - a symbol that gets passed to jsx or jsxs as the type, to indicate it is a fragment (so no seperate function for fragment).

The API for jsx and jsxs is:

/**
 * @param {*} type
 * @param {object} props
 * @param {string=} key
 */

That is the Flow type annotations in React, I suspect it is more like this in TypeScript:

/**
 * @param {string | symbol} type
 * @param {Record<string, unknown>} props
 * @param {string=} key
 */

The key is interesting, because they (React) want to move it out of props and the transpilers seem to vary in their implementation. The above is what Babel outputs, but TypeScript outputs void 0 in the key position. So basically a runtime engine has to assume that if it is passed a key it is ignored in props.

There is also a "development" flag, which then imports from /jsx-dev-runtime and should have two exports:

• jsxDEV - same API as jsx and jsxs but with a little bit extra data passed by the transpiler. source which is an object that contains { fileName: string, lineNumber: number, columnNumber: number } and a reference to the context it was created in (self).
• Fragment - A fragment symbol

The Preact code is fairly straight forward supplying all the APIs: https://github.com/preactjs/preact/blob/master/jsx-runtime/src/index.js

[yandeu]

Thanks! I will have a look 👍🏻

Follow #21