Including version in @wordpress/element

[aurooba]

What problem does this address?

With WordPress 6.2, React 18 will come bundled with WordPress, and for the time being a lot of us will have to support both React 17 and 18 in our themes and plugins. It would be really nice if version from React came bundled inside @wordpress/element for an easier verbose check when mounting your React app.

Without version coming from element:

/**
 * Get React version
 */
import { version } from "react";
/**
 * Grab everything from @wordpress/element with a wildcard import
 */
import * as Element from "@wordpress/element";

/**
 * Internal Dependencies
 */
import App from "./app";

/**
 * If version is less than 18 use `render` to render the app
 * otherwise use `createRoot` to render the app
 */
if (parseInt(version) < 18) {
	Element.render(<App />, document.getElementById("root"));
} else {
	const domNode = document.getElementById("root");
	const root = Element.createRoot(domNode);
	root.render(<App />);
}

What is your proposed solution?

Include version in the import from React in @wordpress/element

Props to @ryanwelcher and @dgwyer for helping me think through this on Twitter :)

[Mamaduka]

You can also check if the new render method is defined and swap logic based on that.

/**
 * Grab everything from @wordpress/element with a wildcard import
 */
import * as Element from "@wordpress/element";

/**
 * Internal Dependencies
 */
import App from "./app";

/**
 * If version is less than 18 use `render` to render the app
 * otherwise use `createRoot` to render the app
 */
if ( Element.createRoot === undefined ) {
	Element.render(<App />, document.getElementById("root"));
} else {
	const domNode = document.getElementById("root");
	const root = Element.createRoot(domNode);
	root.render(<App />);
}

cc @jsnajdr

[ddryo]

I was using render in multiple files, so I dealt with it by combining them as a single function.

file name: compatible-render.js

import { render, createRoot } from '@wordpress/element';

export default function (root, component) {
	if (undefined !== createRoot) {
		createRoot(root).render(component);
	} else {
		render(component, root);
	}
}

Examples of use:

// import compatible-render.js
import compatibleRender from './path-to/compatible-render';

/* ... other code ... */

compatibleRender( document.getElementById("root"), <App /> );

[aurooba]

The solutions are great! And checking for undefined imports is definitely an excellent way to deal with the render issue specifically. But there are definitely going to be gotchas as we support both React 17 and 18 for a little bit, so I'm still in favour of including version as per @dgwyer's PR (#49312) into @wordpress/element