From 00fe1c5dd55883b60810309a6202d25653071914 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 13 Mar 2019 09:11:51 -0600 Subject: [PATCH 01/11] wp.element - export lazy and Suspense --- packages/element/README.md | 16 ++++++++++++++++ packages/element/src/react.js | 15 +++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/packages/element/README.md b/packages/element/README.md index ae28a29cf6ec27..0f508a26fe06ee 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -239,6 +239,16 @@ Checks if an object is a valid WPElement `boolean`: true if objectToTest is a valid WPElement and false otherwise. +### lazy + +[src/index.js#L1-L1](src/index.js#L1-L1) + +The React.lazy function lets you render a dynamic import as a regular component. + +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### RawHTML [src/index.js#L5-L5](src/index.js#L5-L5) @@ -289,6 +299,12 @@ Serializes a React element to string. Component that activates additional checks and warnings for its descendants. +### Suspense + +[src/index.js#L1-L1](src/index.js#L1-L1) + +Component to do code-splitting by wrapping a dynamic import. + ### switchChildrenNodeName [src/index.js#L1-L1](src/index.js#L1-L1) diff --git a/packages/element/src/react.js b/packages/element/src/react.js index 703a0455d0a164..3c9bf153e9645d 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -12,6 +12,8 @@ import { Fragment, isValidElement, StrictMode, + lazy, + Suspense, } from 'react'; import { isString } from 'lodash'; @@ -99,6 +101,19 @@ export { isValidElement }; */ export { StrictMode }; +/** + * The React.lazy function lets you render a dynamic import as a regular component. + * + * @param {function} loadFunction A function that must call a dynamic import(). This must return a Promise which + * resolves to a module with a default export containing a React component. + */ +export { lazy }; + +/** + * Component to do code-splitting by wrapping a dynamic import. + */ +export { Suspense }; + /** * Concatenate two or more React children objects. * From a1b1d8213239ac2475f6e355aee597220e22ad70 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 13 Mar 2019 10:32:17 -0600 Subject: [PATCH 02/11] npm run docs:build --- packages/element/README.md | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/element/README.md b/packages/element/README.md index b98823e3b40fad..3d93401d19713a 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -336,60 +336,100 @@ Removes any mounted element from the target DOM node. Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useContext [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useDebugValue [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useImperativeHandle [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useLayoutEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useMemo [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useReducer [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useRef [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + ### useState [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available +**Parameters** + +- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. + From ac23f042efecbdbc3f36113fbf7dfb982beab0fe Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 13 Mar 2019 15:34:59 -0600 Subject: [PATCH 03/11] cleanup --- packages/element/src/react.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/element/src/react.js b/packages/element/src/react.js index 8c32504ee9d408..7a7fb12aa069c1 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -126,9 +126,6 @@ export { Suspense }; /** * Make React Hooks available - * - * @param {function} loadFunction A function that must call a dynamic import(). This must return a Promise which - * resolves to a module with a default export containing a React component. */ export { useCallback, From c0af4be6195f08b5140eefa13fe5d505fbfa5ece Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 13 Mar 2019 15:36:00 -0600 Subject: [PATCH 04/11] docs build --- packages/element/README.md | 40 -------------------------------------- 1 file changed, 40 deletions(-) diff --git a/packages/element/README.md b/packages/element/README.md index 3d93401d19713a..b98823e3b40fad 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -336,100 +336,60 @@ Removes any mounted element from the target DOM node. Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useContext [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useDebugValue [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useImperativeHandle [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useLayoutEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useMemo [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useReducer [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useRef [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useState [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - From a213c9cff07b5c907008948db410cb51caa97048 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 Mar 2019 15:43:23 +0100 Subject: [PATCH 05/11] Update README --- packages/element/README.md | 40 -------------------------------------- 1 file changed, 40 deletions(-) diff --git a/packages/element/README.md b/packages/element/README.md index 3d93401d19713a..b98823e3b40fad 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -336,100 +336,60 @@ Removes any mounted element from the target DOM node. Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useContext [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useDebugValue [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useImperativeHandle [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useLayoutEffect [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useMemo [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useReducer [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useRef [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### useState [src/index.js#L1-L1](src/index.js#L1-L1) Make React Hooks available -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - From bb22466bb98044a340f6d1d8e0b5acd42005a31a Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Mon, 25 Mar 2019 08:09:15 -0600 Subject: [PATCH 06/11] add lazy & Suspence with links to react docs --- packages/element/README.md | 10 +++++----- packages/element/src/react.js | 12 ++++++++++++ 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/element/README.md b/packages/element/README.md index 2cd748fbcee5b7..6da66a77737d01 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -243,11 +243,9 @@ Checks if an object is a valid WPElement [src/index.js#L1-L1](src/index.js#L1-L1) -The React.lazy function lets you render a dynamic import as a regular component. - -**Parameters** +**Related** -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. +- ### RawHTML @@ -303,7 +301,9 @@ Component that activates additional checks and warnings for its descendants. [src/index.js#L1-L1](src/index.js#L1-L1) -Component to do code-splitting by wrapping a dynamic import. +**Related** + +- ### switchChildrenNodeName diff --git a/packages/element/src/react.js b/packages/element/src/react.js index b4b9ef4146533e..038165de5e25d7 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -22,6 +22,8 @@ import { useImperativeHandle, useLayoutEffect, useDebugValue, + lazy, + Suspense, } from 'react'; import { isString } from 'lodash'; @@ -159,6 +161,16 @@ export { useRef }; */ export { useState }; +/** + * @see https://reactjs.org/docs/code-splitting.html#reactlazy + */ +export { lazy }; + +/** + * @see https://reactjs.org/docs/react-api.html#suspense + */ +export { Suspense }; + /** * Concatenate two or more React children objects. * From 1c13a7256e7c55b3144d74e648daa8c6f62eec86 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Mon, 25 Mar 2019 08:13:08 -0600 Subject: [PATCH 07/11] README from master --- packages/element/README.md | 56 ++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/packages/element/README.md b/packages/element/README.md index b98823e3b40fad..1985045799bea0 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -239,16 +239,6 @@ Checks if an object is a valid WPElement `boolean`: true if objectToTest is a valid WPElement and false otherwise. -### lazy - -[src/index.js#L1-L1](src/index.js#L1-L1) - -The React.lazy function lets you render a dynamic import as a regular component. - -**Parameters** - -- **loadFunction** `function`: A function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. - ### RawHTML [src/index.js#L5-L5](src/index.js#L5-L5) @@ -299,12 +289,6 @@ Serializes a React element to string. Component that activates additional checks and warnings for its descendants. -### Suspense - -[src/index.js#L1-L1](src/index.js#L1-L1) - -Component to do code-splitting by wrapping a dynamic import. - ### switchChildrenNodeName [src/index.js#L1-L1](src/index.js#L1-L1) @@ -334,61 +318,81 @@ Removes any mounted element from the target DOM node. [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useContext [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useDebugValue [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useEffect [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useImperativeHandle [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useLayoutEffect [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useMemo [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useReducer [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useRef [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- ### useState [src/index.js#L1-L1](src/index.js#L1-L1) -Make React Hooks available +**Related** + +- From 1466b25e3f4d31551290b916cb294868b10486f1 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Mon, 25 Mar 2019 08:13:25 -0600 Subject: [PATCH 08/11] npm run docs: build --- packages/element/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/element/README.md b/packages/element/README.md index 1985045799bea0..6da66a77737d01 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -239,6 +239,14 @@ Checks if an object is a valid WPElement `boolean`: true if objectToTest is a valid WPElement and false otherwise. +### lazy + +[src/index.js#L1-L1](src/index.js#L1-L1) + +**Related** + +- + ### RawHTML [src/index.js#L5-L5](src/index.js#L5-L5) @@ -289,6 +297,14 @@ Serializes a React element to string. Component that activates additional checks and warnings for its descendants. +### Suspense + +[src/index.js#L1-L1](src/index.js#L1-L1) + +**Related** + +- + ### switchChildrenNodeName [src/index.js#L1-L1](src/index.js#L1-L1) From 2d3532543c233f15eb76395433ce43f2b7f87ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Tue, 26 Mar 2019 08:40:43 +0100 Subject: [PATCH 09/11] Update react.js --- packages/element/src/react.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/element/src/react.js b/packages/element/src/react.js index 038165de5e25d7..275e77276e229e 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -162,12 +162,12 @@ export { useRef }; export { useState }; /** - * @see https://reactjs.org/docs/code-splitting.html#reactlazy + * @see https://reactjs.org/docs/react-api.html#reactlazy */ export { lazy }; /** - * @see https://reactjs.org/docs/react-api.html#suspense + * @see https://reactjs.org/docs/react-api.html#reactsuspense */ export { Suspense }; From 6fc1d5096e8b9ce9d8aafcd2c271bc9e75f009cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Tue, 26 Mar 2019 08:41:37 +0100 Subject: [PATCH 10/11] Update README.md --- packages/element/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/element/README.md b/packages/element/README.md index 6da66a77737d01..44ae7e16ba2f42 100755 --- a/packages/element/README.md +++ b/packages/element/README.md @@ -245,7 +245,7 @@ Checks if an object is a valid WPElement **Related** -- +- ### RawHTML @@ -303,7 +303,7 @@ Component that activates additional checks and warnings for its descendants. **Related** -- +- ### switchChildrenNodeName From 696d7280b6694c4c013e3760d0c9bcf336d96895 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Tue, 26 Mar 2019 09:11:02 +0100 Subject: [PATCH 11/11] Update CHANGELOG.md --- packages/element/CHANGELOG.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index 5cf43d26f2f3b8..db8c82c55972d4 100644 --- a/packages/element/CHANGELOG.md +++ b/packages/element/CHANGELOG.md @@ -1,3 +1,25 @@ +## 2.4.0 (Unreleased) + +### New Features + +- Added `lazy` feautre (see: https://reactjs.org/docs/react-api.html#reactlazy). +- Added `Suspense` component (see: https://reactjs.org/docs/react-api.html#reactsuspense). + +## 2.3.0 (2019-03-06) + +### New Features + +- Added `useCallback` hook (see: https://reactjs.org/docs/hooks-reference.html#usecallback). +- Added `useContext` hook (see: https://reactjs.org/docs/hooks-reference.html#usecontext). +- Added `useDebugValue` hook (see: https://reactjs.org/docs/hooks-reference.html#usedebugvalue). +- Added `useEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#useeffect). +- Added `useImperativeHandle` hook (see: https://reactjs.org/docs/hooks-reference.html#useimperativehandle). +- Added `useLayoutEffect` hook (see: https://reactjs.org/docs/hooks-reference.html#uselayouteffect). +- Added `useMemo` hook (see: https://reactjs.org/docs/hooks-reference.html#usememo). +- Added `useReducer` hook (see: https://reactjs.org/docs/hooks-reference.html#usereducer). +- Added `useRef` hook (see: https://reactjs.org/docs/hooks-reference.html#useref). +- Added `useState` hook (see: https://reactjs.org/docs/hooks-reference.html#usestate). + ## 2.1.8 (2018-11-15) ## 2.1.7 (2018-11-09)