@wordpress/element 7.0.0 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +29 -154
- package/build/index.cjs +0 -3
- package/build/index.cjs.map +2 -2
- package/build/react-platform.cjs +8 -14
- package/build/react-platform.cjs.map +2 -2
- package/build/{find-dom-node.cjs → react-polyfill-base.cjs} +55 -22
- package/build/react-polyfill-base.cjs.map +7 -0
- package/build/react-polyfill.cjs +80 -0
- package/build/react-polyfill.cjs.map +7 -0
- package/build/react.cjs +0 -10
- package/build/react.cjs.map +2 -2
- package/build/serialize.cjs +1 -3
- package/build/serialize.cjs.map +2 -2
- package/build-module/index.mjs +0 -2
- package/build-module/index.mjs.map +2 -2
- package/build-module/react-platform.mjs +8 -14
- package/build-module/react-platform.mjs.map +2 -2
- package/build-module/{find-dom-node.mjs → react-polyfill-base.mjs} +45 -9
- package/build-module/react-polyfill-base.mjs.map +7 -0
- package/build-module/react-polyfill.mjs +47 -0
- package/build-module/react-polyfill.mjs.map +7 -0
- package/build-module/react.mjs +0 -10
- package/build-module/react.mjs.map +2 -2
- package/build-module/serialize.mjs +1 -3
- package/build-module/serialize.mjs.map +2 -2
- package/build-types/index.d.ts +0 -1
- package/build-types/index.d.ts.map +1 -1
- package/build-types/raw-html.d.ts +11 -25
- package/build-types/raw-html.d.ts.map +1 -1
- package/build-types/react-platform.d.ts +23 -49
- package/build-types/react-platform.d.ts.map +1 -1
- package/build-types/react-polyfill-base.d.ts +5 -0
- package/build-types/react-polyfill-base.d.ts.map +1 -0
- package/build-types/react-polyfill.d.ts +42 -0
- package/build-types/react-polyfill.d.ts.map +1 -0
- package/build-types/react.d.ts +1 -36
- package/build-types/react.d.ts.map +1 -1
- package/build-types/serialize.d.ts.map +1 -1
- package/package.json +9 -8
- package/src/index.ts +6 -1
- package/src/react-platform.ts +29 -59
- package/src/{find-dom-node.ts → react-polyfill-base.ts} +57 -16
- package/src/react-polyfill.ts +99 -0
- package/src/react.ts +1 -48
- package/src/serialize.ts +1 -3
- package/src/test/find-dom-node.js +2 -2
- package/src/test/react-polyfill.js +77 -0
- package/build/find-dom-node.cjs.map +0 -7
- package/build-module/find-dom-node.mjs.map +0 -7
- package/build-types/find-dom-node.d.ts +0 -10
- package/build-types/find-dom-node.d.ts.map +0 -1
package/src/react-platform.ts
CHANGED
|
@@ -3,90 +3,52 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import {
|
|
5
5
|
createPortal,
|
|
6
|
+
findDOMNode,
|
|
6
7
|
flushSync,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
preloadModule,
|
|
13
|
-
useFormStatus,
|
|
8
|
+
/* eslint-disable react/no-deprecated */
|
|
9
|
+
render,
|
|
10
|
+
hydrate,
|
|
11
|
+
unmountComponentAtNode,
|
|
12
|
+
/* eslint-enable react/no-deprecated */
|
|
14
13
|
} from 'react-dom';
|
|
15
14
|
import { createRoot, hydrateRoot } from 'react-dom/client';
|
|
16
15
|
|
|
17
16
|
/**
|
|
18
17
|
* Creates a portal into which a component can be rendered.
|
|
19
18
|
*
|
|
20
|
-
* @see https://
|
|
21
|
-
*
|
|
22
|
-
* @param {React.ReactElement} child Any renderable child, such as an element,
|
|
23
|
-
* string, or fragment.
|
|
24
|
-
* @param {HTMLElement} container DOM node into which element should be rendered.
|
|
19
|
+
* @see https://react.dev/reference/react-dom/createPortal
|
|
25
20
|
*/
|
|
26
21
|
export { createPortal };
|
|
27
22
|
|
|
28
23
|
/**
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* @param {Function} callback Callback to run synchronously.
|
|
32
|
-
*/
|
|
33
|
-
export { flushSync };
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Eagerly connect to a server that you expect to load resources from.
|
|
24
|
+
* Finds the dom node of a React component.
|
|
37
25
|
*
|
|
38
|
-
* @
|
|
39
|
-
* @see https://react.dev/reference/react-dom/preconnect
|
|
26
|
+
* @param {React.ComponentType} component Component's instance.
|
|
40
27
|
*/
|
|
41
|
-
export {
|
|
28
|
+
export { findDOMNode };
|
|
42
29
|
|
|
43
30
|
/**
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
* @since 7.1.0
|
|
47
|
-
* @see https://react.dev/reference/react-dom/prefetchDNS
|
|
48
|
-
*/
|
|
49
|
-
export { prefetchDNS };
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Eagerly fetch and evaluate a stylesheet or external script.
|
|
53
|
-
*
|
|
54
|
-
* @since 7.1.0
|
|
55
|
-
* @see https://react.dev/reference/react-dom/preinit
|
|
56
|
-
*/
|
|
57
|
-
export { preinit };
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Eagerly fetch and evaluate an ESM module.
|
|
61
|
-
*
|
|
62
|
-
* @since 7.1.0
|
|
63
|
-
* @see https://react.dev/reference/react-dom/preinitModule
|
|
64
|
-
*/
|
|
65
|
-
export { preinitModule };
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Eagerly fetch a resource such as a stylesheet, font, or external script.
|
|
31
|
+
* Forces React to flush any updates inside the provided callback synchronously.
|
|
69
32
|
*
|
|
70
|
-
* @
|
|
71
|
-
* @see https://react.dev/reference/react-dom/preload
|
|
33
|
+
* @see https://react.dev/reference/react-dom/flushSync
|
|
72
34
|
*/
|
|
73
|
-
export {
|
|
35
|
+
export { flushSync };
|
|
74
36
|
|
|
75
37
|
/**
|
|
76
|
-
*
|
|
38
|
+
* Renders a given element into the target DOM node.
|
|
77
39
|
*
|
|
78
|
-
* @since
|
|
79
|
-
* @see https://react.dev/reference/react-dom/
|
|
40
|
+
* @deprecated since WordPress 6.2.0. Use `createRoot` instead.
|
|
41
|
+
* @see https://react.dev/reference/react-dom/render
|
|
80
42
|
*/
|
|
81
|
-
export {
|
|
43
|
+
export { render };
|
|
82
44
|
|
|
83
45
|
/**
|
|
84
|
-
*
|
|
46
|
+
* Hydrates a given element into the target DOM node.
|
|
85
47
|
*
|
|
86
|
-
* @since
|
|
87
|
-
* @see https://react.dev/reference/react-dom/
|
|
48
|
+
* @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
|
|
49
|
+
* @see https://react.dev/reference/react-dom/hydrate
|
|
88
50
|
*/
|
|
89
|
-
export {
|
|
51
|
+
export { hydrate };
|
|
90
52
|
|
|
91
53
|
/**
|
|
92
54
|
* Creates a new React root for the target DOM node.
|
|
@@ -103,3 +65,11 @@ export { createRoot };
|
|
|
103
65
|
* @see https://react.dev/reference/react-dom/client/hydrateRoot
|
|
104
66
|
*/
|
|
105
67
|
export { hydrateRoot };
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Removes any mounted element from the target DOM node.
|
|
71
|
+
*
|
|
72
|
+
* @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
|
|
73
|
+
* @see https://react.dev/reference/react-dom/unmountComponentAtNode
|
|
74
|
+
*/
|
|
75
|
+
export { unmountComponentAtNode };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { flushSync } from 'react-dom';
|
|
2
|
+
import { createRoot, hydrateRoot } from 'react-dom/client';
|
|
3
|
+
import type { Root } from 'react-dom/client';
|
|
2
4
|
|
|
3
5
|
const internalsKey = '_reactInternals';
|
|
4
6
|
|
|
@@ -53,21 +55,7 @@ function findHostFiberImpl( fiber: any ): any {
|
|
|
53
55
|
return null;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
|
-
|
|
57
|
-
* Finds the DOM node of a React component instance.
|
|
58
|
-
*
|
|
59
|
-
* @deprecated since WordPress 7.1.0. Use DOM refs instead.
|
|
60
|
-
* @see https://react.dev/reference/react-dom/findDOMNode
|
|
61
|
-
*
|
|
62
|
-
* @param instance Component's instance.
|
|
63
|
-
*/
|
|
64
|
-
export default function findDOMNode( instance: any ): Element | Text | null {
|
|
65
|
-
deprecated( 'wp.element.findDOMNode', {
|
|
66
|
-
since: '7.1',
|
|
67
|
-
alternative: 'DOM refs',
|
|
68
|
-
link: 'https://react.dev/reference/react-dom/findDOMNode',
|
|
69
|
-
} );
|
|
70
|
-
|
|
58
|
+
export function findDOMNode( instance: any ): Element | Text | null {
|
|
71
59
|
if ( instance === null || instance === undefined ) {
|
|
72
60
|
return null;
|
|
73
61
|
}
|
|
@@ -90,3 +78,56 @@ export default function findDOMNode( instance: any ): Element | Text | null {
|
|
|
90
78
|
const hostFiber = findHostFiber( fiber );
|
|
91
79
|
return hostFiber?.stateNode ?? null;
|
|
92
80
|
}
|
|
81
|
+
|
|
82
|
+
const roots = new WeakMap< Element, Root >();
|
|
83
|
+
|
|
84
|
+
export function render(
|
|
85
|
+
element: React.ReactNode,
|
|
86
|
+
container: Element,
|
|
87
|
+
callback?: () => void
|
|
88
|
+
): void {
|
|
89
|
+
let root = roots.get( container );
|
|
90
|
+
if ( ! root ) {
|
|
91
|
+
root = createRoot( container );
|
|
92
|
+
roots.set( container, root );
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
flushSync( () => {
|
|
96
|
+
root.render( element );
|
|
97
|
+
} );
|
|
98
|
+
|
|
99
|
+
if ( typeof callback === 'function' ) {
|
|
100
|
+
callback();
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export function hydrate(
|
|
105
|
+
element: React.ReactNode,
|
|
106
|
+
container: Element,
|
|
107
|
+
callback?: () => void
|
|
108
|
+
): void {
|
|
109
|
+
let root = roots.get( container );
|
|
110
|
+
if ( ! root ) {
|
|
111
|
+
root = hydrateRoot( container, element );
|
|
112
|
+
roots.set( container, root );
|
|
113
|
+
} else {
|
|
114
|
+
root.render( element );
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if ( typeof callback === 'function' ) {
|
|
118
|
+
callback();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export function unmountComponentAtNode( container: Element ): boolean {
|
|
123
|
+
const root = roots.get( container );
|
|
124
|
+
if ( ! root ) {
|
|
125
|
+
return false;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
flushSync( () => {
|
|
129
|
+
root.unmount();
|
|
130
|
+
} );
|
|
131
|
+
roots.delete( container );
|
|
132
|
+
return true;
|
|
133
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import deprecated from '@wordpress/deprecated';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Internal dependencies
|
|
8
|
+
*/
|
|
9
|
+
import {
|
|
10
|
+
findDOMNode as findDOMNodeBase,
|
|
11
|
+
render as renderBase,
|
|
12
|
+
hydrate as hydrateBase,
|
|
13
|
+
unmountComponentAtNode as unmountComponentAtNodeBase,
|
|
14
|
+
} from './react-polyfill-base';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Finds the DOM node of a React component instance.
|
|
18
|
+
*
|
|
19
|
+
* @deprecated since WordPress 7.1.0. Use DOM refs instead.
|
|
20
|
+
* @see https://react.dev/reference/react-dom/findDOMNode
|
|
21
|
+
*
|
|
22
|
+
* @param instance Component's instance.
|
|
23
|
+
*/
|
|
24
|
+
export function findDOMNode( instance: any ): Element | Text | null {
|
|
25
|
+
deprecated( 'wp.element.findDOMNode', {
|
|
26
|
+
since: '7.1',
|
|
27
|
+
alternative: 'DOM refs',
|
|
28
|
+
link: 'https://react.dev/reference/react-dom/findDOMNode',
|
|
29
|
+
} );
|
|
30
|
+
|
|
31
|
+
return findDOMNodeBase( instance );
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Renders a given element into the target DOM node.
|
|
36
|
+
*
|
|
37
|
+
* @deprecated since WordPress 6.2.0. Use `createRoot` instead.
|
|
38
|
+
* @see https://react.dev/reference/react-dom/render
|
|
39
|
+
*
|
|
40
|
+
* @param element Element to render.
|
|
41
|
+
* @param container DOM node into which to render.
|
|
42
|
+
* @param callback Optional callback called after render.
|
|
43
|
+
*/
|
|
44
|
+
export function render(
|
|
45
|
+
element: React.ReactNode,
|
|
46
|
+
container: Element,
|
|
47
|
+
callback?: () => void
|
|
48
|
+
): void {
|
|
49
|
+
deprecated( 'wp.element.render', {
|
|
50
|
+
since: '6.2',
|
|
51
|
+
alternative: 'wp.element.createRoot',
|
|
52
|
+
link: 'https://react.dev/reference/react-dom/client/createRoot',
|
|
53
|
+
} );
|
|
54
|
+
|
|
55
|
+
renderBase( element, container, callback );
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Hydrates a given element into the target DOM node.
|
|
60
|
+
*
|
|
61
|
+
* @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
|
|
62
|
+
* @see https://react.dev/reference/react-dom/hydrate
|
|
63
|
+
*
|
|
64
|
+
* @param element Element to hydrate.
|
|
65
|
+
* @param container DOM node to hydrate.
|
|
66
|
+
* @param callback Optional callback called after hydration.
|
|
67
|
+
*/
|
|
68
|
+
export function hydrate(
|
|
69
|
+
element: React.ReactNode,
|
|
70
|
+
container: Element,
|
|
71
|
+
callback?: () => void
|
|
72
|
+
): void {
|
|
73
|
+
deprecated( 'wp.element.hydrate', {
|
|
74
|
+
since: '6.2',
|
|
75
|
+
alternative: 'wp.element.hydrateRoot',
|
|
76
|
+
link: 'https://react.dev/reference/react-dom/client/hydrateRoot',
|
|
77
|
+
} );
|
|
78
|
+
|
|
79
|
+
hydrateBase( element, container, callback );
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Removes any mounted element from the target DOM node.
|
|
84
|
+
*
|
|
85
|
+
* @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
|
|
86
|
+
* @see https://react.dev/reference/react-dom/unmountComponentAtNode
|
|
87
|
+
*
|
|
88
|
+
* @param container DOM node in which to unmount.
|
|
89
|
+
* @return Whether the node was unmounted.
|
|
90
|
+
*/
|
|
91
|
+
export function unmountComponentAtNode( container: Element ): boolean {
|
|
92
|
+
deprecated( 'wp.element.unmountComponentAtNode', {
|
|
93
|
+
since: '6.2',
|
|
94
|
+
alternative: 'root.unmount()',
|
|
95
|
+
link: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',
|
|
96
|
+
} );
|
|
97
|
+
|
|
98
|
+
return unmountComponentAtNodeBase( container );
|
|
99
|
+
}
|
package/src/react.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
|
|
5
5
|
import {
|
|
6
|
-
Activity,
|
|
7
6
|
Children,
|
|
8
7
|
cloneElement,
|
|
9
8
|
Component,
|
|
@@ -16,20 +15,16 @@ import {
|
|
|
16
15
|
memo,
|
|
17
16
|
PureComponent,
|
|
18
17
|
StrictMode,
|
|
19
|
-
use,
|
|
20
|
-
useActionState,
|
|
21
18
|
useCallback,
|
|
22
19
|
useContext,
|
|
23
20
|
useDebugValue,
|
|
24
21
|
useDeferredValue,
|
|
25
22
|
useEffect,
|
|
26
|
-
useEffectEvent,
|
|
27
23
|
useId,
|
|
28
24
|
useMemo,
|
|
29
25
|
useImperativeHandle,
|
|
30
26
|
useInsertionEffect,
|
|
31
27
|
useLayoutEffect,
|
|
32
|
-
useOptimistic,
|
|
33
28
|
useReducer,
|
|
34
29
|
useRef,
|
|
35
30
|
useState,
|
|
@@ -71,14 +66,6 @@ export type RefCallback< T > = React.RefCallback< T >;
|
|
|
71
66
|
*/
|
|
72
67
|
export type Ref< T > = React.Ref< T >;
|
|
73
68
|
|
|
74
|
-
/**
|
|
75
|
-
* Hide and show parts of the UI while preserving state.
|
|
76
|
-
*
|
|
77
|
-
* @since 7.1.0
|
|
78
|
-
* @see https://react.dev/reference/react/Activity
|
|
79
|
-
*/
|
|
80
|
-
export { Activity };
|
|
81
|
-
|
|
82
69
|
/**
|
|
83
70
|
* Object that provides utilities for dealing with React children.
|
|
84
71
|
*/
|
|
@@ -168,22 +155,6 @@ export { memo };
|
|
|
168
155
|
*/
|
|
169
156
|
export { StrictMode };
|
|
170
157
|
|
|
171
|
-
/**
|
|
172
|
-
* Read the value of a resource like a Promise or context.
|
|
173
|
-
*
|
|
174
|
-
* @since 7.1.0
|
|
175
|
-
* @see https://react.dev/reference/react/use
|
|
176
|
-
*/
|
|
177
|
-
export { use };
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Manage state based on the result of a form action.
|
|
181
|
-
*
|
|
182
|
-
* @since 7.1.0
|
|
183
|
-
* @see https://react.dev/reference/react/useActionState
|
|
184
|
-
*/
|
|
185
|
-
export { useActionState };
|
|
186
|
-
|
|
187
158
|
/**
|
|
188
159
|
* @see https://react.dev/reference/react/useCallback
|
|
189
160
|
*/
|
|
@@ -209,14 +180,6 @@ export { useDeferredValue };
|
|
|
209
180
|
*/
|
|
210
181
|
export { useEffect };
|
|
211
182
|
|
|
212
|
-
/**
|
|
213
|
-
* Extract non-reactive logic from an Effect into an Effect Event.
|
|
214
|
-
*
|
|
215
|
-
* @since 7.1.0
|
|
216
|
-
* @see https://react.dev/reference/react/useEffectEvent
|
|
217
|
-
*/
|
|
218
|
-
export { useEffectEvent };
|
|
219
|
-
|
|
220
183
|
/**
|
|
221
184
|
* @see https://react.dev/reference/react/useId
|
|
222
185
|
*/
|
|
@@ -242,14 +205,6 @@ export { useLayoutEffect };
|
|
|
242
205
|
*/
|
|
243
206
|
export { useMemo };
|
|
244
207
|
|
|
245
|
-
/**
|
|
246
|
-
* Show a different state while an async action is underway.
|
|
247
|
-
*
|
|
248
|
-
* @since 7.1.0
|
|
249
|
-
* @see https://react.dev/reference/react/useOptimistic
|
|
250
|
-
*/
|
|
251
|
-
export { useOptimistic };
|
|
252
|
-
|
|
253
208
|
/**
|
|
254
209
|
* @see https://react.dev/reference/react/useReducer
|
|
255
210
|
*/
|
|
@@ -344,9 +299,7 @@ export function switchChildrenNodeName(
|
|
|
344
299
|
return elt;
|
|
345
300
|
}
|
|
346
301
|
|
|
347
|
-
const { children: childrenProp, ...props } =
|
|
348
|
-
elt as React.ReactElement< React.PropsWithChildren< unknown > >
|
|
349
|
-
).props;
|
|
302
|
+
const { children: childrenProp, ...props } = elt.props;
|
|
350
303
|
return createElement(
|
|
351
304
|
nodeName,
|
|
352
305
|
{ key: index, ...props },
|
package/src/serialize.ts
CHANGED
|
@@ -626,9 +626,7 @@ export function renderElement(
|
|
|
626
626
|
|
|
627
627
|
case Consumer.$$typeof:
|
|
628
628
|
return renderElement(
|
|
629
|
-
props.children(
|
|
630
|
-
context || type._currentValue || type._context._currentValue
|
|
631
|
-
),
|
|
629
|
+
props.children( context || type._currentValue ),
|
|
632
630
|
context,
|
|
633
631
|
legacyContext
|
|
634
632
|
);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { act, render } from '@testing-library/react';
|
|
2
2
|
import { Component } from '..';
|
|
3
|
-
import findDOMNodePolyfill from '../
|
|
3
|
+
import { findDOMNode as findDOMNodePolyfill } from '../react-polyfill';
|
|
4
4
|
|
|
5
|
-
describe( 'findDOMNode', () => {
|
|
5
|
+
describe.skip( 'findDOMNode', () => {
|
|
6
6
|
it( 'should return null when passed null', () => {
|
|
7
7
|
expect( findDOMNodePolyfill( null ) ).toBeNull();
|
|
8
8
|
expect( console ).toHaveWarned();
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { createElement } from '..';
|
|
5
|
+
import { render, hydrate, unmountComponentAtNode } from '../react-polyfill';
|
|
6
|
+
|
|
7
|
+
describe.skip( 'render', () => {
|
|
8
|
+
it( 'should render into a container', () => {
|
|
9
|
+
const container = document.createElement( 'div' );
|
|
10
|
+
|
|
11
|
+
render( createElement( 'p', null, 'hello' ), container );
|
|
12
|
+
|
|
13
|
+
expect( container ).toHaveTextContent( 'hello' );
|
|
14
|
+
expect( console ).toHaveWarned();
|
|
15
|
+
} );
|
|
16
|
+
|
|
17
|
+
it( 'should update the container on subsequent renders', () => {
|
|
18
|
+
const container = document.createElement( 'div' );
|
|
19
|
+
|
|
20
|
+
render( createElement( 'p', null, 'hello' ), container );
|
|
21
|
+
render( createElement( 'p', null, 'world' ), container );
|
|
22
|
+
|
|
23
|
+
expect( container ).toHaveTextContent( 'world' );
|
|
24
|
+
} );
|
|
25
|
+
|
|
26
|
+
it( 'should call the callback after rendering', () => {
|
|
27
|
+
const container = document.createElement( 'div' );
|
|
28
|
+
const callback = jest.fn();
|
|
29
|
+
|
|
30
|
+
render( createElement( 'p', null, 'hello' ), container, callback );
|
|
31
|
+
|
|
32
|
+
expect( callback ).toHaveBeenCalledTimes( 1 );
|
|
33
|
+
expect( container ).toHaveTextContent( 'hello' );
|
|
34
|
+
} );
|
|
35
|
+
} );
|
|
36
|
+
|
|
37
|
+
describe.skip( 'hydrate', () => {
|
|
38
|
+
it( 'should hydrate into a container with matching markup', () => {
|
|
39
|
+
const container = document.createElement( 'div' );
|
|
40
|
+
container.innerHTML = '<p>hello</p>';
|
|
41
|
+
|
|
42
|
+
hydrate( createElement( 'p', null, 'hello' ), container );
|
|
43
|
+
|
|
44
|
+
expect( container ).toHaveTextContent( 'hello' );
|
|
45
|
+
expect( console ).toHaveWarned();
|
|
46
|
+
} );
|
|
47
|
+
|
|
48
|
+
it( 'should call the callback after hydrating', () => {
|
|
49
|
+
const container = document.createElement( 'div' );
|
|
50
|
+
container.innerHTML = '<p>hello</p>';
|
|
51
|
+
const callback = jest.fn();
|
|
52
|
+
|
|
53
|
+
hydrate( createElement( 'p', null, 'hello' ), container, callback );
|
|
54
|
+
|
|
55
|
+
expect( callback ).toHaveBeenCalledTimes( 1 );
|
|
56
|
+
} );
|
|
57
|
+
} );
|
|
58
|
+
|
|
59
|
+
describe.skip( 'unmountComponentAtNode', () => {
|
|
60
|
+
it( 'should return false when the container has no root', () => {
|
|
61
|
+
const container = document.createElement( 'div' );
|
|
62
|
+
|
|
63
|
+
expect( unmountComponentAtNode( container ) ).toBe( false );
|
|
64
|
+
expect( console ).toHaveWarned();
|
|
65
|
+
} );
|
|
66
|
+
|
|
67
|
+
it( 'should unmount and return true when a root exists', () => {
|
|
68
|
+
const container = document.createElement( 'div' );
|
|
69
|
+
|
|
70
|
+
render( createElement( 'p', null, 'hello' ), container );
|
|
71
|
+
expect( container ).toHaveTextContent( 'hello' );
|
|
72
|
+
|
|
73
|
+
expect( unmountComponentAtNode( container ) ).toBe( true );
|
|
74
|
+
expect( container ).toHaveTextContent( '' );
|
|
75
|
+
expect( unmountComponentAtNode( container ) ).toBe( false );
|
|
76
|
+
} );
|
|
77
|
+
} );
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/find-dom-node.ts"],
|
|
4
|
-
"sourcesContent": ["import deprecated from '@wordpress/deprecated';\n\nconst internalsKey = '_reactInternals';\n\n// HostComponent fiber tag, represents a DOM element like <div>.\nconst HostComponent = 5;\nconst HostText = 6;\n\nfunction findCurrentFiber( fiber: any ): any {\n\tif ( ! fiber.alternate ) {\n\t\t// First mount \u2014 only one version exists, and it's current.\n\t\treturn fiber;\n\t}\n\n\t// Walk up to the HostRoot to figure out which tree this fiber is on.\n\tlet node = fiber;\n\twhile ( node.return ) {\n\t\tnode = node.return;\n\t}\n\n\t// The root's stateNode.current points to the current tree's root fiber.\n\tif ( node.stateNode.current === node ) {\n\t\t// We walked up the current tree, so `fiber` is already current.\n\t\treturn fiber;\n\t}\n\n\t// We walked up the alternate tree \u2014 switch to the current version.\n\treturn fiber.alternate;\n}\n\nfunction findHostFiber( fiber: any ): any {\n\tconst current = findCurrentFiber( fiber );\n\tif ( ! current ) {\n\t\treturn null;\n\t}\n\treturn findHostFiberImpl( current );\n}\n\nfunction findHostFiberImpl( fiber: any ): any {\n\tif ( fiber.tag === HostComponent || fiber.tag === HostText ) {\n\t\treturn fiber;\n\t}\n\n\tlet child = fiber.child;\n\twhile ( child ) {\n\t\tconst hostFiber = findHostFiberImpl( child );\n\t\tif ( hostFiber ) {\n\t\t\treturn hostFiber;\n\t\t}\n\t\tchild = child.sibling;\n\t}\n\n\treturn null;\n}\n\n/**\n * Finds the DOM node of a React component instance.\n *\n * @deprecated since WordPress 7.1.0. Use DOM refs instead.\n * @see https://react.dev/reference/react-dom/findDOMNode\n *\n * @param instance Component's instance.\n */\nexport default function findDOMNode( instance: any ): Element | Text | null {\n\tdeprecated( 'wp.element.findDOMNode', {\n\t\tsince: '7.1',\n\t\talternative: 'DOM refs',\n\t\tlink: 'https://react.dev/reference/react-dom/findDOMNode',\n\t} );\n\n\tif ( instance === null || instance === undefined ) {\n\t\treturn null;\n\t}\n\n\tif ( instance.nodeType !== undefined ) {\n\t\treturn instance as Element | Text;\n\t}\n\n\tconst fiber = instance[ internalsKey ];\n\tif ( fiber === undefined ) {\n\t\tif ( typeof instance.render === 'function' ) {\n\t\t\tthrow new Error( 'Unable to find node on an unmounted component.' );\n\t\t}\n\t\tconst keys = Object.keys( instance ).join( ',' );\n\t\tthrow new Error(\n\t\t\t`Argument appears to not be a ReactComponent. Keys: ${ keys }`\n\t\t);\n\t}\n\n\tconst hostFiber = findHostFiber( fiber );\n\treturn hostFiber?.stateNode ?? null;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,IAAM,eAAe;AAGrB,IAAM,gBAAgB;AACtB,IAAM,WAAW;AAEjB,SAAS,iBAAkB,OAAkB;AAC5C,MAAK,CAAE,MAAM,WAAY;AAExB,WAAO;AAAA,EACR;AAGA,MAAI,OAAO;AACX,SAAQ,KAAK,QAAS;AACrB,WAAO,KAAK;AAAA,EACb;AAGA,MAAK,KAAK,UAAU,YAAY,MAAO;AAEtC,WAAO;AAAA,EACR;AAGA,SAAO,MAAM;AACd;AAEA,SAAS,cAAe,OAAkB;AACzC,QAAM,UAAU,iBAAkB,KAAM;AACxC,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AACA,SAAO,kBAAmB,OAAQ;AACnC;AAEA,SAAS,kBAAmB,OAAkB;AAC7C,MAAK,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,UAAW;AAC5D,WAAO;AAAA,EACR;AAEA,MAAI,QAAQ,MAAM;AAClB,SAAQ,OAAQ;AACf,UAAM,YAAY,kBAAmB,KAAM;AAC3C,QAAK,WAAY;AAChB,aAAO;AAAA,IACR;AACA,YAAQ,MAAM;AAAA,EACf;AAEA,SAAO;AACR;AAUe,SAAR,YAA8B,UAAuC;AAC3E,wBAAAA,SAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,MAAK,aAAa,QAAQ,aAAa,QAAY;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,aAAa,QAAY;AACtC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,SAAU,YAAa;AACrC,MAAK,UAAU,QAAY;AAC1B,QAAK,OAAO,SAAS,WAAW,YAAa;AAC5C,YAAM,IAAI,MAAO,gDAAiD;AAAA,IACnE;AACA,UAAM,OAAO,OAAO,KAAM,QAAS,EAAE,KAAM,GAAI;AAC/C,UAAM,IAAI;AAAA,MACT,sDAAuD,IAAK;AAAA,IAC7D;AAAA,EACD;AAEA,QAAM,YAAY,cAAe,KAAM;AACvC,SAAO,WAAW,aAAa;AAChC;",
|
|
6
|
-
"names": ["deprecated"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/find-dom-node.ts"],
|
|
4
|
-
"sourcesContent": ["import deprecated from '@wordpress/deprecated';\n\nconst internalsKey = '_reactInternals';\n\n// HostComponent fiber tag, represents a DOM element like <div>.\nconst HostComponent = 5;\nconst HostText = 6;\n\nfunction findCurrentFiber( fiber: any ): any {\n\tif ( ! fiber.alternate ) {\n\t\t// First mount \u2014 only one version exists, and it's current.\n\t\treturn fiber;\n\t}\n\n\t// Walk up to the HostRoot to figure out which tree this fiber is on.\n\tlet node = fiber;\n\twhile ( node.return ) {\n\t\tnode = node.return;\n\t}\n\n\t// The root's stateNode.current points to the current tree's root fiber.\n\tif ( node.stateNode.current === node ) {\n\t\t// We walked up the current tree, so `fiber` is already current.\n\t\treturn fiber;\n\t}\n\n\t// We walked up the alternate tree \u2014 switch to the current version.\n\treturn fiber.alternate;\n}\n\nfunction findHostFiber( fiber: any ): any {\n\tconst current = findCurrentFiber( fiber );\n\tif ( ! current ) {\n\t\treturn null;\n\t}\n\treturn findHostFiberImpl( current );\n}\n\nfunction findHostFiberImpl( fiber: any ): any {\n\tif ( fiber.tag === HostComponent || fiber.tag === HostText ) {\n\t\treturn fiber;\n\t}\n\n\tlet child = fiber.child;\n\twhile ( child ) {\n\t\tconst hostFiber = findHostFiberImpl( child );\n\t\tif ( hostFiber ) {\n\t\t\treturn hostFiber;\n\t\t}\n\t\tchild = child.sibling;\n\t}\n\n\treturn null;\n}\n\n/**\n * Finds the DOM node of a React component instance.\n *\n * @deprecated since WordPress 7.1.0. Use DOM refs instead.\n * @see https://react.dev/reference/react-dom/findDOMNode\n *\n * @param instance Component's instance.\n */\nexport default function findDOMNode( instance: any ): Element | Text | null {\n\tdeprecated( 'wp.element.findDOMNode', {\n\t\tsince: '7.1',\n\t\talternative: 'DOM refs',\n\t\tlink: 'https://react.dev/reference/react-dom/findDOMNode',\n\t} );\n\n\tif ( instance === null || instance === undefined ) {\n\t\treturn null;\n\t}\n\n\tif ( instance.nodeType !== undefined ) {\n\t\treturn instance as Element | Text;\n\t}\n\n\tconst fiber = instance[ internalsKey ];\n\tif ( fiber === undefined ) {\n\t\tif ( typeof instance.render === 'function' ) {\n\t\t\tthrow new Error( 'Unable to find node on an unmounted component.' );\n\t\t}\n\t\tconst keys = Object.keys( instance ).join( ',' );\n\t\tthrow new Error(\n\t\t\t`Argument appears to not be a ReactComponent. Keys: ${ keys }`\n\t\t);\n\t}\n\n\tconst hostFiber = findHostFiber( fiber );\n\treturn hostFiber?.stateNode ?? null;\n}\n"],
|
|
5
|
-
"mappings": ";AAAA,OAAO,gBAAgB;AAEvB,IAAM,eAAe;AAGrB,IAAM,gBAAgB;AACtB,IAAM,WAAW;AAEjB,SAAS,iBAAkB,OAAkB;AAC5C,MAAK,CAAE,MAAM,WAAY;AAExB,WAAO;AAAA,EACR;AAGA,MAAI,OAAO;AACX,SAAQ,KAAK,QAAS;AACrB,WAAO,KAAK;AAAA,EACb;AAGA,MAAK,KAAK,UAAU,YAAY,MAAO;AAEtC,WAAO;AAAA,EACR;AAGA,SAAO,MAAM;AACd;AAEA,SAAS,cAAe,OAAkB;AACzC,QAAM,UAAU,iBAAkB,KAAM;AACxC,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AACA,SAAO,kBAAmB,OAAQ;AACnC;AAEA,SAAS,kBAAmB,OAAkB;AAC7C,MAAK,MAAM,QAAQ,iBAAiB,MAAM,QAAQ,UAAW;AAC5D,WAAO;AAAA,EACR;AAEA,MAAI,QAAQ,MAAM;AAClB,SAAQ,OAAQ;AACf,UAAM,YAAY,kBAAmB,KAAM;AAC3C,QAAK,WAAY;AAChB,aAAO;AAAA,IACR;AACA,YAAQ,MAAM;AAAA,EACf;AAEA,SAAO;AACR;AAUe,SAAR,YAA8B,UAAuC;AAC3E,aAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,MAAK,aAAa,QAAQ,aAAa,QAAY;AAClD,WAAO;AAAA,EACR;AAEA,MAAK,SAAS,aAAa,QAAY;AACtC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,SAAU,YAAa;AACrC,MAAK,UAAU,QAAY;AAC1B,QAAK,OAAO,SAAS,WAAW,YAAa;AAC5C,YAAM,IAAI,MAAO,gDAAiD;AAAA,IACnE;AACA,UAAM,OAAO,OAAO,KAAM,QAAS,EAAE,KAAM,GAAI;AAC/C,UAAM,IAAI;AAAA,MACT,sDAAuD,IAAK;AAAA,IAC7D;AAAA,EACD;AAEA,QAAM,YAAY,cAAe,KAAM;AACvC,SAAO,WAAW,aAAa;AAChC;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Finds the DOM node of a React component instance.
|
|
3
|
-
*
|
|
4
|
-
* @deprecated since WordPress 7.1.0. Use DOM refs instead.
|
|
5
|
-
* @see https://react.dev/reference/react-dom/findDOMNode
|
|
6
|
-
*
|
|
7
|
-
* @param instance Component's instance.
|
|
8
|
-
*/
|
|
9
|
-
export default function findDOMNode(instance: any): Element | Text | null;
|
|
10
|
-
//# sourceMappingURL=find-dom-node.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"find-dom-node.d.ts","sourceRoot":"","sources":["../src/find-dom-node.ts"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,QAAQ,EAAE,GAAG,GAAI,OAAO,GAAG,IAAI,GAAG,IAAI,CA4B1E"}
|