@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.
Files changed (52) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +29 -154
  3. package/build/index.cjs +0 -3
  4. package/build/index.cjs.map +2 -2
  5. package/build/react-platform.cjs +8 -14
  6. package/build/react-platform.cjs.map +2 -2
  7. package/build/{find-dom-node.cjs → react-polyfill-base.cjs} +55 -22
  8. package/build/react-polyfill-base.cjs.map +7 -0
  9. package/build/react-polyfill.cjs +80 -0
  10. package/build/react-polyfill.cjs.map +7 -0
  11. package/build/react.cjs +0 -10
  12. package/build/react.cjs.map +2 -2
  13. package/build/serialize.cjs +1 -3
  14. package/build/serialize.cjs.map +2 -2
  15. package/build-module/index.mjs +0 -2
  16. package/build-module/index.mjs.map +2 -2
  17. package/build-module/react-platform.mjs +8 -14
  18. package/build-module/react-platform.mjs.map +2 -2
  19. package/build-module/{find-dom-node.mjs → react-polyfill-base.mjs} +45 -9
  20. package/build-module/react-polyfill-base.mjs.map +7 -0
  21. package/build-module/react-polyfill.mjs +47 -0
  22. package/build-module/react-polyfill.mjs.map +7 -0
  23. package/build-module/react.mjs +0 -10
  24. package/build-module/react.mjs.map +2 -2
  25. package/build-module/serialize.mjs +1 -3
  26. package/build-module/serialize.mjs.map +2 -2
  27. package/build-types/index.d.ts +0 -1
  28. package/build-types/index.d.ts.map +1 -1
  29. package/build-types/raw-html.d.ts +11 -25
  30. package/build-types/raw-html.d.ts.map +1 -1
  31. package/build-types/react-platform.d.ts +23 -49
  32. package/build-types/react-platform.d.ts.map +1 -1
  33. package/build-types/react-polyfill-base.d.ts +5 -0
  34. package/build-types/react-polyfill-base.d.ts.map +1 -0
  35. package/build-types/react-polyfill.d.ts +42 -0
  36. package/build-types/react-polyfill.d.ts.map +1 -0
  37. package/build-types/react.d.ts +1 -36
  38. package/build-types/react.d.ts.map +1 -1
  39. package/build-types/serialize.d.ts.map +1 -1
  40. package/package.json +9 -8
  41. package/src/index.ts +6 -1
  42. package/src/react-platform.ts +29 -59
  43. package/src/{find-dom-node.ts → react-polyfill-base.ts} +57 -16
  44. package/src/react-polyfill.ts +99 -0
  45. package/src/react.ts +1 -48
  46. package/src/serialize.ts +1 -3
  47. package/src/test/find-dom-node.js +2 -2
  48. package/src/test/react-polyfill.js +77 -0
  49. package/build/find-dom-node.cjs.map +0 -7
  50. package/build-module/find-dom-node.mjs.map +0 -7
  51. package/build-types/find-dom-node.d.ts +0 -10
  52. package/build-types/find-dom-node.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 8.0.0 (2026-06-04)
6
+
7
+ ### Breaking Changes
8
+
9
+ - Revert React back to v18 [#78940](https://github.com/WordPress/gutenberg/pull/78940).
10
+
5
11
  ## 7.0.0 (2026-05-27)
6
12
 
7
13
  ### Breaking Changes
package/README.md CHANGED
@@ -27,18 +27,6 @@ The offerings of any framework necessarily become more complex as these requirem
27
27
 
28
28
  <!-- START TOKEN(Autogenerated API docs) -->
29
29
 
30
- ### Activity
31
-
32
- Hide and show parts of the UI while preserving state.
33
-
34
- _Related_
35
-
36
- - <https://react.dev/reference/react/Activity>
37
-
38
- _Changelog_
39
-
40
- `7.1.0`
41
-
42
30
  ### Children
43
31
 
44
32
  Object that provides utilities for dealing with React children.
@@ -134,12 +122,7 @@ Creates a portal into which a component can be rendered.
134
122
 
135
123
  _Related_
136
124
 
137
- - <https://github.com/facebook/react/issues/10309#issuecomment-318433235>
138
-
139
- _Parameters_
140
-
141
- - _child_ `React.ReactElement`: Any renderable child, such as an element, string, or fragment.
142
- - _container_ `HTMLElement`: DOM node into which element should be rendered.
125
+ - <https://react.dev/reference/react-dom/createPortal>
143
126
 
144
127
  ### createRef
145
128
 
@@ -163,25 +146,19 @@ _Changelog_
163
146
 
164
147
  ### findDOMNode
165
148
 
166
- > **Deprecated** since WordPress 7.1.0. Use DOM refs instead.
167
-
168
- Finds the DOM node of a React component instance.
169
-
170
- _Related_
171
-
172
- - <https://react.dev/reference/react-dom/findDOMNode>
149
+ Finds the dom node of a React component.
173
150
 
174
151
  _Parameters_
175
152
 
176
- - _instance_ `any`: Component's instance.
153
+ - _component_ `React.ComponentType`: Component's instance.
177
154
 
178
155
  ### flushSync
179
156
 
180
157
  Forces React to flush any updates inside the provided callback synchronously.
181
158
 
182
- _Parameters_
159
+ _Related_
183
160
 
184
- - _callback_ `Function`: Callback to run synchronously.
161
+ - <https://react.dev/reference/react-dom/flushSync>
185
162
 
186
163
  ### forwardRef
187
164
 
@@ -199,6 +176,16 @@ _Returns_
199
176
 
200
177
  A component which renders its children without any wrapping element.
201
178
 
179
+ ### hydrate
180
+
181
+ > **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead.
182
+
183
+ Hydrates a given element into the target DOM node.
184
+
185
+ _Related_
186
+
187
+ - <https://react.dev/reference/react-dom/hydrate>
188
+
202
189
  ### hydrateRoot
203
190
 
204
191
  Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
@@ -270,78 +257,6 @@ const placeholderLabel = Platform.select( {
270
257
  } );
271
258
  ```
272
259
 
273
- ### preconnect
274
-
275
- Eagerly connect to a server that you expect to load resources from.
276
-
277
- _Related_
278
-
279
- - <https://react.dev/reference/react-dom/preconnect>
280
-
281
- _Changelog_
282
-
283
- `7.1.0`
284
-
285
- ### prefetchDNS
286
-
287
- Eagerly look up the IP of a server that you expect to load resources from.
288
-
289
- _Related_
290
-
291
- - <https://react.dev/reference/react-dom/prefetchDNS>
292
-
293
- _Changelog_
294
-
295
- `7.1.0`
296
-
297
- ### preinit
298
-
299
- Eagerly fetch and evaluate a stylesheet or external script.
300
-
301
- _Related_
302
-
303
- - <https://react.dev/reference/react-dom/preinit>
304
-
305
- _Changelog_
306
-
307
- `7.1.0`
308
-
309
- ### preinitModule
310
-
311
- Eagerly fetch and evaluate an ESM module.
312
-
313
- _Related_
314
-
315
- - <https://react.dev/reference/react-dom/preinitModule>
316
-
317
- _Changelog_
318
-
319
- `7.1.0`
320
-
321
- ### preload
322
-
323
- Eagerly fetch a resource such as a stylesheet, font, or external script.
324
-
325
- _Related_
326
-
327
- - <https://react.dev/reference/react-dom/preload>
328
-
329
- _Changelog_
330
-
331
- `7.1.0`
332
-
333
- ### preloadModule
334
-
335
- Eagerly fetch an ESM module that you expect to use.
336
-
337
- _Related_
338
-
339
- - <https://react.dev/reference/react-dom/preloadModule>
340
-
341
- _Changelog_
342
-
343
- `7.1.0`
344
-
345
260
  ### PureComponent
346
261
 
347
262
  _Related_
@@ -376,6 +291,16 @@ _Returns_
376
291
 
377
292
  - Dangerously-rendering component.
378
293
 
294
+ ### render
295
+
296
+ > **Deprecated** since WordPress 6.2.0. Use `createRoot` instead.
297
+
298
+ Renders a given element into the target DOM node.
299
+
300
+ _Related_
301
+
302
+ - <https://react.dev/reference/react-dom/render>
303
+
379
304
  ### renderToString
380
305
 
381
306
  Serializes a React element to string.
@@ -415,29 +340,15 @@ _Returns_
415
340
 
416
341
  - `ReactNode`: The updated children object.
417
342
 
418
- ### use
419
-
420
- Read the value of a resource like a Promise or context.
421
-
422
- _Related_
423
-
424
- - <https://react.dev/reference/react/use>
425
-
426
- _Changelog_
427
-
428
- `7.1.0`
343
+ ### unmountComponentAtNode
429
344
 
430
- ### useActionState
345
+ > **Deprecated** since WordPress 6.2.0. Use `root.unmount()` instead.
431
346
 
432
- Manage state based on the result of a form action.
347
+ Removes any mounted element from the target DOM node.
433
348
 
434
349
  _Related_
435
350
 
436
- - <https://react.dev/reference/react/useActionState>
437
-
438
- _Changelog_
439
-
440
- `7.1.0`
351
+ - <https://react.dev/reference/react-dom/unmountComponentAtNode>
441
352
 
442
353
  ### useCallback
443
354
 
@@ -469,30 +380,6 @@ _Related_
469
380
 
470
381
  - <https://react.dev/reference/react/useEffect>
471
382
 
472
- ### useEffectEvent
473
-
474
- Extract non-reactive logic from an Effect into an Effect Event.
475
-
476
- _Related_
477
-
478
- - <https://react.dev/reference/react/useEffectEvent>
479
-
480
- _Changelog_
481
-
482
- `7.1.0`
483
-
484
- ### useFormStatus
485
-
486
- Read the status information of the parent form.
487
-
488
- _Related_
489
-
490
- - <https://react.dev/reference/react-dom/hooks/useFormStatus>
491
-
492
- _Changelog_
493
-
494
- `7.1.0`
495
-
496
383
  ### useId
497
384
 
498
385
  _Related_
@@ -523,18 +410,6 @@ _Related_
523
410
 
524
411
  - <https://react.dev/reference/react/useMemo>
525
412
 
526
- ### useOptimistic
527
-
528
- Show a different state while an async action is underway.
529
-
530
- _Related_
531
-
532
- - <https://react.dev/reference/react/useOptimistic>
533
-
534
- _Changelog_
535
-
536
- `7.1.0`
537
-
538
413
  ### useReducer
539
414
 
540
415
  _Related_
package/build/index.cjs CHANGED
@@ -34,7 +34,6 @@ __export(index_exports, {
34
34
  Platform: () => import_platform.default,
35
35
  RawHTML: () => import_raw_html.default,
36
36
  createInterpolateElement: () => import_create_interpolate_element.default,
37
- findDOMNode: () => import_find_dom_node.default,
38
37
  renderToString: () => import_serialize.default
39
38
  });
40
39
  module.exports = __toCommonJS(index_exports);
@@ -45,13 +44,11 @@ __reExport(index_exports, require("./utils.cjs"), module.exports);
45
44
  var import_platform = __toESM(require("./platform.cjs"));
46
45
  var import_serialize = __toESM(require("./serialize.cjs"));
47
46
  var import_raw_html = __toESM(require("./raw-html.cjs"));
48
- var import_find_dom_node = __toESM(require("./find-dom-node.cjs"));
49
47
  // Annotate the CommonJS export names for ESM import in node:
50
48
  0 && (module.exports = {
51
49
  Platform,
52
50
  RawHTML,
53
51
  createInterpolateElement,
54
- findDOMNode,
55
52
  renderToString,
56
53
  ...require("./react.cjs"),
57
54
  ...require("./react-platform.cjs"),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts"],
4
- "sourcesContent": ["export { default as createInterpolateElement } from './create-interpolate-element';\nexport * from './react';\nexport * from './react-platform';\nexport * from './utils';\nexport { default as Platform } from './platform';\nexport { default as renderToString } from './serialize';\nexport { default as RawHTML } from './raw-html';\nexport { default as findDOMNode } from './find-dom-node';\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAoD;AACpD,0BAAc,wBADd;AAEA,0BAAc,iCAFd;AAGA,0BAAc,wBAHd;AAIA,sBAAoC;AACpC,uBAA0C;AAC1C,sBAAmC;AACnC,2BAAuC;",
4
+ "sourcesContent": ["export { default as createInterpolateElement } from './create-interpolate-element';\nexport * from './react';\nexport * from './react-platform';\nexport * from './utils';\nexport { default as Platform } from './platform';\nexport { default as renderToString } from './serialize';\nexport { default as RawHTML } from './raw-html';\n// export {\n// \tfindDOMNode,\n// \trender,\n// \thydrate,\n// \tunmountComponentAtNode,\n// } from './react-polyfill';\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAoD;AACpD,0BAAc,wBADd;AAEA,0BAAc,iCAFd;AAGA,0BAAc,wBAHd;AAIA,sBAAoC;AACpC,uBAA0C;AAC1C,sBAAmC;",
6
6
  "names": []
7
7
  }
@@ -22,15 +22,12 @@ var react_platform_exports = {};
22
22
  __export(react_platform_exports, {
23
23
  createPortal: () => import_react_dom.createPortal,
24
24
  createRoot: () => import_client.createRoot,
25
+ findDOMNode: () => import_react_dom.findDOMNode,
25
26
  flushSync: () => import_react_dom.flushSync,
27
+ hydrate: () => import_react_dom.hydrate,
26
28
  hydrateRoot: () => import_client.hydrateRoot,
27
- preconnect: () => import_react_dom.preconnect,
28
- prefetchDNS: () => import_react_dom.prefetchDNS,
29
- preinit: () => import_react_dom.preinit,
30
- preinitModule: () => import_react_dom.preinitModule,
31
- preload: () => import_react_dom.preload,
32
- preloadModule: () => import_react_dom.preloadModule,
33
- useFormStatus: () => import_react_dom.useFormStatus
29
+ render: () => import_react_dom.render,
30
+ unmountComponentAtNode: () => import_react_dom.unmountComponentAtNode
34
31
  });
35
32
  module.exports = __toCommonJS(react_platform_exports);
36
33
  var import_react_dom = require("react-dom");
@@ -39,14 +36,11 @@ var import_client = require("react-dom/client");
39
36
  0 && (module.exports = {
40
37
  createPortal,
41
38
  createRoot,
39
+ findDOMNode,
42
40
  flushSync,
41
+ hydrate,
43
42
  hydrateRoot,
44
- preconnect,
45
- prefetchDNS,
46
- preinit,
47
- preinitModule,
48
- preload,
49
- preloadModule,
50
- useFormStatus
43
+ render,
44
+ unmountComponentAtNode
51
45
  });
52
46
  //# sourceMappingURL=react-platform.cjs.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/react-platform.ts"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreatePortal,\n\tflushSync,\n\tpreconnect,\n\tprefetchDNS,\n\tpreinit,\n\tpreinitModule,\n\tpreload,\n\tpreloadModule,\n\tuseFormStatus,\n} from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\n\n/**\n * Creates a portal into which a component can be rendered.\n *\n * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235\n *\n * @param {React.ReactElement} child Any renderable child, such as an element,\n * string, or fragment.\n * @param {HTMLElement} container DOM node into which element should be rendered.\n */\nexport { createPortal };\n\n/**\n * Forces React to flush any updates inside the provided callback synchronously.\n *\n * @param {Function} callback Callback to run synchronously.\n */\nexport { flushSync };\n\n/**\n * Eagerly connect to a server that you expect to load resources from.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preconnect\n */\nexport { preconnect };\n\n/**\n * Eagerly look up the IP of a server that you expect to load resources from.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/prefetchDNS\n */\nexport { prefetchDNS };\n\n/**\n * Eagerly fetch and evaluate a stylesheet or external script.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preinit\n */\nexport { preinit };\n\n/**\n * Eagerly fetch and evaluate an ESM module.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preinitModule\n */\nexport { preinitModule };\n\n/**\n * Eagerly fetch a resource such as a stylesheet, font, or external script.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preload\n */\nexport { preload };\n\n/**\n * Eagerly fetch an ESM module that you expect to use.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/preloadModule\n */\nexport { preloadModule };\n\n/**\n * Read the status information of the parent form.\n *\n * @since 7.1.0\n * @see https://react.dev/reference/react-dom/hooks/useFormStatus\n */\nexport { useFormStatus };\n\n/**\n * Creates a new React root for the target DOM node.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/createRoot\n */\nexport { createRoot };\n\n/**\n * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/hydrateRoot\n */\nexport { hydrateRoot };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAUO;AACP,oBAAwC;",
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreatePortal,\n\tfindDOMNode,\n\tflushSync,\n\t/* eslint-disable react/no-deprecated */\n\trender,\n\thydrate,\n\tunmountComponentAtNode,\n\t/* eslint-enable react/no-deprecated */\n} from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\n\n/**\n * Creates a portal into which a component can be rendered.\n *\n * @see https://react.dev/reference/react-dom/createPortal\n */\nexport { createPortal };\n\n/**\n * Finds the dom node of a React component.\n *\n * @param {React.ComponentType} component Component's instance.\n */\nexport { findDOMNode };\n\n/**\n * Forces React to flush any updates inside the provided callback synchronously.\n *\n * @see https://react.dev/reference/react-dom/flushSync\n */\nexport { flushSync };\n\n/**\n * Renders a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `createRoot` instead.\n * @see https://react.dev/reference/react-dom/render\n */\nexport { render };\n\n/**\n * Hydrates a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.\n * @see https://react.dev/reference/react-dom/hydrate\n */\nexport { hydrate };\n\n/**\n * Creates a new React root for the target DOM node.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/createRoot\n */\nexport { createRoot };\n\n/**\n * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.\n *\n * @since 6.2.0 Introduced in WordPress core.\n * @see https://react.dev/reference/react-dom/client/hydrateRoot\n */\nexport { hydrateRoot };\n\n/**\n * Removes any mounted element from the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.\n * @see https://react.dev/reference/react-dom/unmountComponentAtNode\n */\nexport { unmountComponentAtNode };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBASO;AACP,oBAAwC;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,23 +15,19 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
19
 
30
- // packages/element/src/find-dom-node.ts
31
- var find_dom_node_exports = {};
32
- __export(find_dom_node_exports, {
33
- default: () => findDOMNode
20
+ // packages/element/src/react-polyfill-base.ts
21
+ var react_polyfill_base_exports = {};
22
+ __export(react_polyfill_base_exports, {
23
+ findDOMNode: () => findDOMNode,
24
+ hydrate: () => hydrate,
25
+ render: () => render,
26
+ unmountComponentAtNode: () => unmountComponentAtNode
34
27
  });
35
- module.exports = __toCommonJS(find_dom_node_exports);
36
- var import_deprecated = __toESM(require("@wordpress/deprecated"));
28
+ module.exports = __toCommonJS(react_polyfill_base_exports);
29
+ var import_react_dom = require("react-dom");
30
+ var import_client = require("react-dom/client");
37
31
  var internalsKey = "_reactInternals";
38
32
  var HostComponent = 5;
39
33
  var HostText = 6;
@@ -72,11 +66,6 @@ function findHostFiberImpl(fiber) {
72
66
  return null;
73
67
  }
74
68
  function findDOMNode(instance) {
75
- (0, import_deprecated.default)("wp.element.findDOMNode", {
76
- since: "7.1",
77
- alternative: "DOM refs",
78
- link: "https://react.dev/reference/react-dom/findDOMNode"
79
- });
80
69
  if (instance === null || instance === void 0) {
81
70
  return null;
82
71
  }
@@ -96,4 +85,48 @@ function findDOMNode(instance) {
96
85
  const hostFiber = findHostFiber(fiber);
97
86
  return hostFiber?.stateNode ?? null;
98
87
  }
99
- //# sourceMappingURL=find-dom-node.cjs.map
88
+ var roots = /* @__PURE__ */ new WeakMap();
89
+ function render(element, container, callback) {
90
+ let root = roots.get(container);
91
+ if (!root) {
92
+ root = (0, import_client.createRoot)(container);
93
+ roots.set(container, root);
94
+ }
95
+ (0, import_react_dom.flushSync)(() => {
96
+ root.render(element);
97
+ });
98
+ if (typeof callback === "function") {
99
+ callback();
100
+ }
101
+ }
102
+ function hydrate(element, container, callback) {
103
+ let root = roots.get(container);
104
+ if (!root) {
105
+ root = (0, import_client.hydrateRoot)(container, element);
106
+ roots.set(container, root);
107
+ } else {
108
+ root.render(element);
109
+ }
110
+ if (typeof callback === "function") {
111
+ callback();
112
+ }
113
+ }
114
+ function unmountComponentAtNode(container) {
115
+ const root = roots.get(container);
116
+ if (!root) {
117
+ return false;
118
+ }
119
+ (0, import_react_dom.flushSync)(() => {
120
+ root.unmount();
121
+ });
122
+ roots.delete(container);
123
+ return true;
124
+ }
125
+ // Annotate the CommonJS export names for ESM import in node:
126
+ 0 && (module.exports = {
127
+ findDOMNode,
128
+ hydrate,
129
+ render,
130
+ unmountComponentAtNode
131
+ });
132
+ //# sourceMappingURL=react-polyfill-base.cjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/react-polyfill-base.ts"],
4
+ "sourcesContent": ["import { flushSync } from 'react-dom';\nimport { createRoot, hydrateRoot } from 'react-dom/client';\nimport type { Root } from 'react-dom/client';\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\nexport function findDOMNode( instance: any ): Element | Text | null {\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\nconst roots = new WeakMap< Element, Root >();\n\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = createRoot( container );\n\t\troots.set( container, root );\n\t}\n\n\tflushSync( () => {\n\t\troot.render( element );\n\t} );\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tlet root = roots.get( container );\n\tif ( ! root ) {\n\t\troot = hydrateRoot( container, element );\n\t\troots.set( container, root );\n\t} else {\n\t\troot.render( element );\n\t}\n\n\tif ( typeof callback === 'function' ) {\n\t\tcallback();\n\t}\n}\n\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tconst root = roots.get( container );\n\tif ( ! root ) {\n\t\treturn false;\n\t}\n\n\tflushSync( () => {\n\t\troot.unmount();\n\t} );\n\troots.delete( container );\n\treturn true;\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0B;AAC1B,oBAAwC;AAGxC,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;AAEO,SAAS,YAAa,UAAuC;AACnE,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;AAEA,IAAM,QAAQ,oBAAI,QAAyB;AAEpC,SAAS,OACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,eAAO,0BAAY,SAAU;AAC7B,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B;AAEA,kCAAW,MAAM;AAChB,SAAK,OAAQ,OAAQ;AAAA,EACtB,CAAE;AAEF,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,QACf,SACA,WACA,UACO;AACP,MAAI,OAAO,MAAM,IAAK,SAAU;AAChC,MAAK,CAAE,MAAO;AACb,eAAO,2BAAa,WAAW,OAAQ;AACvC,UAAM,IAAK,WAAW,IAAK;AAAA,EAC5B,OAAO;AACN,SAAK,OAAQ,OAAQ;AAAA,EACtB;AAEA,MAAK,OAAO,aAAa,YAAa;AACrC,aAAS;AAAA,EACV;AACD;AAEO,SAAS,uBAAwB,WAA8B;AACrE,QAAM,OAAO,MAAM,IAAK,SAAU;AAClC,MAAK,CAAE,MAAO;AACb,WAAO;AAAA,EACR;AAEA,kCAAW,MAAM;AAChB,SAAK,QAAQ;AAAA,EACd,CAAE;AACF,QAAM,OAAQ,SAAU;AACxB,SAAO;AACR;",
6
+ "names": []
7
+ }
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // packages/element/src/react-polyfill.ts
31
+ var react_polyfill_exports = {};
32
+ __export(react_polyfill_exports, {
33
+ findDOMNode: () => findDOMNode,
34
+ hydrate: () => hydrate,
35
+ render: () => render,
36
+ unmountComponentAtNode: () => unmountComponentAtNode
37
+ });
38
+ module.exports = __toCommonJS(react_polyfill_exports);
39
+ var import_deprecated = __toESM(require("@wordpress/deprecated"));
40
+ var import_react_polyfill_base = require("./react-polyfill-base.cjs");
41
+ function findDOMNode(instance) {
42
+ (0, import_deprecated.default)("wp.element.findDOMNode", {
43
+ since: "7.1",
44
+ alternative: "DOM refs",
45
+ link: "https://react.dev/reference/react-dom/findDOMNode"
46
+ });
47
+ return (0, import_react_polyfill_base.findDOMNode)(instance);
48
+ }
49
+ function render(element, container, callback) {
50
+ (0, import_deprecated.default)("wp.element.render", {
51
+ since: "6.2",
52
+ alternative: "wp.element.createRoot",
53
+ link: "https://react.dev/reference/react-dom/client/createRoot"
54
+ });
55
+ (0, import_react_polyfill_base.render)(element, container, callback);
56
+ }
57
+ function hydrate(element, container, callback) {
58
+ (0, import_deprecated.default)("wp.element.hydrate", {
59
+ since: "6.2",
60
+ alternative: "wp.element.hydrateRoot",
61
+ link: "https://react.dev/reference/react-dom/client/hydrateRoot"
62
+ });
63
+ (0, import_react_polyfill_base.hydrate)(element, container, callback);
64
+ }
65
+ function unmountComponentAtNode(container) {
66
+ (0, import_deprecated.default)("wp.element.unmountComponentAtNode", {
67
+ since: "6.2",
68
+ alternative: "root.unmount()",
69
+ link: "https://react.dev/reference/react-dom/client/createRoot#root-unmount"
70
+ });
71
+ return (0, import_react_polyfill_base.unmountComponentAtNode)(container);
72
+ }
73
+ // Annotate the CommonJS export names for ESM import in node:
74
+ 0 && (module.exports = {
75
+ findDOMNode,
76
+ hydrate,
77
+ render,
78
+ unmountComponentAtNode
79
+ });
80
+ //# sourceMappingURL=react-polyfill.cjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/react-polyfill.ts"],
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport {\n\tfindDOMNode as findDOMNodeBase,\n\trender as renderBase,\n\thydrate as hydrateBase,\n\tunmountComponentAtNode as unmountComponentAtNodeBase,\n} from './react-polyfill-base';\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 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\treturn findDOMNodeBase( instance );\n}\n\n/**\n * Renders a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `createRoot` instead.\n * @see https://react.dev/reference/react-dom/render\n *\n * @param element Element to render.\n * @param container DOM node into which to render.\n * @param callback Optional callback called after render.\n */\nexport function render(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.render', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.createRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot',\n\t} );\n\n\trenderBase( element, container, callback );\n}\n\n/**\n * Hydrates a given element into the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.\n * @see https://react.dev/reference/react-dom/hydrate\n *\n * @param element Element to hydrate.\n * @param container DOM node to hydrate.\n * @param callback Optional callback called after hydration.\n */\nexport function hydrate(\n\telement: React.ReactNode,\n\tcontainer: Element,\n\tcallback?: () => void\n): void {\n\tdeprecated( 'wp.element.hydrate', {\n\t\tsince: '6.2',\n\t\talternative: 'wp.element.hydrateRoot',\n\t\tlink: 'https://react.dev/reference/react-dom/client/hydrateRoot',\n\t} );\n\n\thydrateBase( element, container, callback );\n}\n\n/**\n * Removes any mounted element from the target DOM node.\n *\n * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.\n * @see https://react.dev/reference/react-dom/unmountComponentAtNode\n *\n * @param container DOM node in which to unmount.\n * @return Whether the node was unmounted.\n */\nexport function unmountComponentAtNode( container: Element ): boolean {\n\tdeprecated( 'wp.element.unmountComponentAtNode', {\n\t\tsince: '6.2',\n\t\talternative: 'root.unmount()',\n\t\tlink: 'https://react.dev/reference/react-dom/client/createRoot#root-unmount',\n\t} );\n\n\treturn unmountComponentAtNodeBase( container );\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAuB;AAKvB,iCAKO;AAUA,SAAS,YAAa,UAAuC;AACnE,wBAAAA,SAAY,0BAA0B;AAAA,IACrC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,aAAO,2BAAAC,aAAiB,QAAS;AAClC;AAYO,SAAS,OACf,SACA,WACA,UACO;AACP,wBAAAD,SAAY,qBAAqB;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,iCAAAE,QAAY,SAAS,WAAW,QAAS;AAC1C;AAYO,SAAS,QACf,SACA,WACA,UACO;AACP,wBAAAF,SAAY,sBAAsB;AAAA,IACjC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,iCAAAG,SAAa,SAAS,WAAW,QAAS;AAC3C;AAWO,SAAS,uBAAwB,WAA8B;AACrE,wBAAAH,SAAY,qCAAqC;AAAA,IAChD,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACP,CAAE;AAEF,aAAO,2BAAAI,wBAA4B,SAAU;AAC9C;",
6
+ "names": ["deprecated", "findDOMNodeBase", "renderBase", "hydrateBase", "unmountComponentAtNodeBase"]
7
+ }
package/build/react.cjs CHANGED
@@ -20,7 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // packages/element/src/react.ts
21
21
  var react_exports = {};
22
22
  __export(react_exports, {
23
- Activity: () => import_react.Activity,
24
23
  Children: () => import_react.Children,
25
24
  Component: () => import_react.Component,
26
25
  Fragment: () => import_react.Fragment,
@@ -38,20 +37,16 @@ __export(react_exports, {
38
37
  memo: () => import_react.memo,
39
38
  startTransition: () => import_react.startTransition,
40
39
  switchChildrenNodeName: () => switchChildrenNodeName,
41
- use: () => import_react.use,
42
- useActionState: () => import_react.useActionState,
43
40
  useCallback: () => import_react.useCallback,
44
41
  useContext: () => import_react.useContext,
45
42
  useDebugValue: () => import_react.useDebugValue,
46
43
  useDeferredValue: () => import_react.useDeferredValue,
47
44
  useEffect: () => import_react.useEffect,
48
- useEffectEvent: () => import_react.useEffectEvent,
49
45
  useId: () => import_react.useId,
50
46
  useImperativeHandle: () => import_react.useImperativeHandle,
51
47
  useInsertionEffect: () => import_react.useInsertionEffect,
52
48
  useLayoutEffect: () => import_react.useLayoutEffect,
53
49
  useMemo: () => import_react.useMemo,
54
- useOptimistic: () => import_react.useOptimistic,
55
50
  useReducer: () => import_react.useReducer,
56
51
  useRef: () => import_react.useRef,
57
52
  useState: () => import_react.useState,
@@ -94,7 +89,6 @@ function switchChildrenNodeName(children, nodeName) {
94
89
  }
95
90
  // Annotate the CommonJS export names for ESM import in node:
96
91
  0 && (module.exports = {
97
- Activity,
98
92
  Children,
99
93
  Component,
100
94
  Fragment,
@@ -112,20 +106,16 @@ function switchChildrenNodeName(children, nodeName) {
112
106
  memo,
113
107
  startTransition,
114
108
  switchChildrenNodeName,
115
- use,
116
- useActionState,
117
109
  useCallback,
118
110
  useContext,
119
111
  useDebugValue,
120
112
  useDeferredValue,
121
113
  useEffect,
122
- useEffectEvent,
123
114
  useId,
124
115
  useImperativeHandle,
125
116
  useInsertionEffect,
126
117
  useLayoutEffect,
127
118
  useMemo,
128
- useOptimistic,
129
119
  useReducer,
130
120
  useRef,
131
121
  useState,