React 19

[laurentpayot]

Hi, React 19 RC has been released a few weeks ago, with some breaking changes.

How will the soon to be released React 19 impact Feliz? Is React 19 compatibility planned?

[MangelMaxime]

We should indeed add support for React 19, however I still can't find information on what the expected JavaScript is.

All the documentation, I find are using JSX syntax but for Feliz we need to output result of the JSX compilation.

Currently this is what we are doing:

If in JSX you write

const MyButton = () =>  <button />

the JavaScript version of that was:

const MyButton = () => /*#__PURE__*/React.createElement("button", null);

The equivalent in Feliz is

[<ReactComponent>]
let MyButtion () =
	Html.button []

which compiles to

import { createElement } from "react";
import React from "react";

export function MyButtion() {
    return createElement("button", {});
}

Because of that I don't know yet if adding support for React 19, will be a breaking change or not.

It is also important to note that the code currently generated by Feliz is not even yet up to the latest version of what React does.

Since React 18 (I think), the recommended generated JavaScript is:

import * as JsxRuntime from "react/jsx-runtime";

var MyButton = JsxRuntime.jsx("button", null);

This is for example, the reason why when using Fast Refresh with Vite people need to set jsxRuntime: 'classic' for it to be working.

[Zaid-Ajaj]

Looking at the changes in React 19, nothing strikes me as breaking from Feliz point of view. That said, current Feliz version defines its react dependency (via a transitive reference to Fable.ReactDom.Types) as >= 18.x && < 19 so a breaking change is not out of the question if you happen to upgrade React to v19

[MangelMaxime]

I think the easiest way to see if something is broken or not would be for someone to upgrade to React 19 and we will see if React complains or something breaks :)

[rasheedaboud]

I updated Feliz to with react 19 bits and the new compiler and it seems to work fine so far...