Skip to content

Commit

Permalink
Element: export new React 18 APIs
Browse files Browse the repository at this point in the history
  • Loading branch information
jsnajdr committed Dec 16, 2022
1 parent f8efb0d commit bd185af
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/element/CHANGELOG.md
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: `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
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.

_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
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 };
*/
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 };

/**
* Removes any mounted element from the target DOM node.
*
Expand Down
6 changes: 6 additions & 0 deletions packages/element/src/react.js
Original file line number Diff line number Diff line change
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 };

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

1 comment on commit bd185af

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3712302040
📝 Reported issues:

Please sign in to comment.