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

Element: export new React 18 APIs #46610

Merged
merged 2 commits into from Dec 16, 2022
Merged

Element: export new React 18 APIs #46610

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd185af
Element: export new React 18 APIs
jsnajdr Dec 16, 2022
c9555a7
Export more APIs
jsnajdr Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/element/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -6,6 +6,10 @@

- Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))

### New Features

- Started exporting new React 18 APIs: `useSyncExternalStore`, `createRoot` and `hydrateRoot`

## 4.20.0 (2022-11-16)

## 4.19.0 (2022-11-02)
Expand Down
22 changes: 22 additions & 0 deletions packages/element/README.md
View file
Open in desktop
Expand Up @@ -198,6 +198,14 @@ _Returns_

- `Object`: Ref object.

### createRoot

Creates a new React root for the target DOM node.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An ideal place to mention that these are deprecated now in React 18.


_Related_

- <https://reactjs.org/docs/react-dom-client.html#createroot>

### findDOMNode

Finds the dom node of a React component.
Expand Down Expand Up @@ -234,6 +242,14 @@ _Parameters_
- _element_ `import('./react').WPElement`: Element to hydrate.
- _target_ `HTMLElement`: DOM node into which element should be hydrated.

### hydrateRoot

Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.

_Related_

- <https://reactjs.org/docs/react-dom-client.html#hydrateroot>

### isEmptyElement

Checks if the provided WP element is empty.
Expand Down Expand Up @@ -423,6 +439,12 @@ _Related_

- <https://reactjs.org/docs/hooks-reference.html#usestate>

### useSyncExternalStore

_Related_

- <https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore>

<!-- END TOKEN(Autogenerated API docs) -->

## Contributing to this package
Expand Down
15 changes: 15 additions & 0 deletions packages/element/src/react-platform.js
View file
Open in desktop
Expand Up @@ -8,6 +8,7 @@ import {
hydrate,
unmountComponentAtNode,
} from 'react-dom';
import { createRoot, hydrateRoot } from 'react-dom/client';

/**
* Creates a portal into which a component can be rendered.
Expand Down Expand Up @@ -43,6 +44,20 @@ export { render };
*/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add a @deprecated for render() and hydrate() now that they are deprecated in React 18?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we if add @deprecated, we need to also add a real deprecated function call, so let's leave it for later when we migrate all of our usage.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. Maybe adding a comment would suffice then.

export { hydrate };

/**
* Creates a new React root for the target DOM node.
*
* @see https://reactjs.org/docs/react-dom-client.html#createroot
*/
export { createRoot };

/**
* Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
*
* @see https://reactjs.org/docs/react-dom-client.html#hydrateroot
*/
export { hydrateRoot };

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also expose Suspense?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suspense has already been exposed for some time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, right 👍

/**
* Removes any mounted element from the target DOM node.
*
Expand Down
6 changes: 6 additions & 0 deletions packages/element/src/react.js
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@ import {
useImperativeHandle,
useLayoutEffect,
useDebugValue,
useSyncExternalStore,
lazy,
Suspense,
} from 'react';
Expand Down Expand Up @@ -185,6 +186,11 @@ export { useRef };
*/
export { useState };

/**
* @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
*/
export { useSyncExternalStore };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make sense to add the rest of the new hooks (useId, useTransition, useDeferredValue, useInsertionEffect)? I can immediately see opportunities for almost all of them.

Note that if we add useTransition we might want to expose startTransition as well.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, pushed a commit that exports them all.


/**
* @see https://reactjs.org/docs/react-api.html#reactlazy
*/
Expand Down