Directory

Including `version` in @wordpress/element · Issue #49308 · WordPress/gutenberg · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Including version in @wordpress/element #49308

Open
aurooba opened this issue Mar 23, 2023 · 3 comments · May be fixed by #49312
Open

Including version in @wordpress/element #49308

aurooba opened this issue Mar 23, 2023 · 3 comments · May be fixed by #49312
Labels
[Package] Element /packages/element [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@aurooba
Copy link
Member

aurooba commented Mar 23, 2023 •
edited

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
Copy link
Member

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

@Mamaduka Mamaduka added the [Package] Element /packages/element label Mar 23, 2023
@ddryo
Copy link
Contributor

ddryo commented Mar 23, 2023 •
edited

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 /> );

@dgwyer dgwyer linked a pull request Mar 23, 2023 that will close this issue
Open
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Mar 23, 2023
@aurooba
Copy link
Member Author

aurooba commented Mar 23, 2023

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

@t-hamano t-hamano mentioned this issue Jul 14, 2023
Merged
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Jul 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Package] Element /packages/element [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added support for React.version in the @wordpress/element package dgwyer/gutenberg
4 participants
@Mamaduka @jordesign @aurooba @ddryo