Skip to content

Element: export new React 18 APIs #46610

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

Merged
jsnajdr merged 2 commits into from
Dec 16, 2022
Merged

Element: export new React 18 APIs #46610

Show file tree
Hide file tree
Changes from all commits
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/element/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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 ([46610](https://github.com/WordPress/gutenberg/pull/46610))

## 4.20.0 (2022-11-16)

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

- `Object`: Ref object.

### createRoot

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

@tyxla tyxla Dec 16, 2022

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 @@ -332,6 +348,12 @@ _Returns_

- `string`: Serialized element.

### startTransition

_Related_

- <https://reactjs.org/docs/react-api.html#starttransition>

### StrictMode

Component that activates additional checks and warnings for its descendants.
Expand Down Expand Up @@ -381,18 +403,36 @@ _Related_

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

### useDeferredValue

_Related_

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

### useEffect

_Related_

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

### useId

_Related_

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

### useImperativeHandle

_Related_

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

### useInsertionEffect

_Related_

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

### useLayoutEffect

_Related_
Expand Down Expand Up @@ -423,6 +463,18 @@ _Related_

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

### useSyncExternalStore

_Related_

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

### useTransition

_Related_

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

<!-- 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
Original file line number Diff line number Diff line change
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

@tyxla tyxla Dec 16, 2022

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

@youknowriad youknowriad Dec 16, 2022

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

@tyxla tyxla Dec 16, 2022

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

@tyxla tyxla Dec 16, 2022

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

@jsnajdr jsnajdr Dec 16, 2022

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

@tyxla tyxla Dec 16, 2022

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
48 changes: 42 additions & 6 deletions packages/element/src/react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,22 @@ import {
isValidElement,
memo,
StrictMode,
useState,
useEffect,
useContext,
useReducer,
useCallback,
useContext,
useDebugValue,
useDeferredValue,
useEffect,
useId,
useMemo,
useRef,
useImperativeHandle,
useInsertionEffect,
useLayoutEffect,
useDebugValue,
useReducer,
useRef,
useState,
useSyncExternalStore,
useTransition,
startTransition,
lazy,
Suspense,
} from 'react';
Expand Down Expand Up @@ -150,16 +156,31 @@ export { useContext };
*/
export { useDebugValue };

/**
* @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue
*/
export { useDeferredValue };

/**
* @see https://reactjs.org/docs/hooks-reference.html#useeffect
*/
export { useEffect };

/**
* @see https://reactjs.org/docs/hooks-reference.html#useid
*/
export { useId };

/**
* @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
*/
export { useImperativeHandle };

/**
* @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect
*/
export { useInsertionEffect };

/**
* @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
*/
Expand All @@ -185,6 +206,21 @@ export { useRef };
*/
export { useState };

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

@tyxla tyxla Dec 16, 2022

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

@jsnajdr jsnajdr Dec 16, 2022

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/hooks-reference.html#usetransition
*/
export { useTransition };

/**
* @see https://reactjs.org/docs/react-api.html#starttransition
*/
export { startTransition };

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