|
1 | 1 | import type * as React from 'react';
|
2 |
| -import * as ReactDOM from 'react-dom'; |
| 2 | +import { createRoot } from 'react-dom/client'; |
3 | 3 | import type { Root } from 'react-dom/client';
|
4 | 4 |
|
5 |
| -// Let compiler not to search module usage |
6 |
| -const fullClone = { |
7 |
| - ...ReactDOM, |
8 |
| -} as typeof ReactDOM & { |
9 |
| - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: { |
10 |
| - usingClientEntryPoint?: boolean; |
11 |
| - }; |
12 |
| - createRoot?: CreateRoot; |
13 |
| -}; |
14 |
| - |
15 |
| -type CreateRoot = (container: ContainerType) => Root; |
16 |
| - |
17 |
| -const { version, render: reactRender, unmountComponentAtNode } = fullClone; |
18 |
| - |
19 |
| -let createRoot: CreateRoot; |
20 |
| -try { |
21 |
| - const mainVersion = Number((version || '').split('.')[0]); |
22 |
| - if (mainVersion >= 18) { |
23 |
| - ({ createRoot } = fullClone); |
24 |
| - } |
25 |
| -} catch (e) { |
26 |
| - // Do nothing; |
27 |
| -} |
28 |
| - |
29 |
| -function toggleWarning(skip: boolean) { |
30 |
| - const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = fullClone; |
31 |
| - |
32 |
| - if ( |
33 |
| - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && |
34 |
| - typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object' |
35 |
| - ) { |
36 |
| - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = |
37 |
| - skip; |
38 |
| - } |
39 |
| -} |
40 |
| - |
41 | 5 | const MARK = '__rc_react_root__';
|
42 | 6 |
|
43 | 7 | // ========================== Render ==========================
|
44 | 8 | type ContainerType = (Element | DocumentFragment) & {
|
45 | 9 | [MARK]?: Root;
|
46 | 10 | };
|
47 | 11 |
|
48 |
| -function modernRender(node: React.ReactElement, container: ContainerType) { |
49 |
| - toggleWarning(true); |
| 12 | +export function render(node: React.ReactElement, container: ContainerType) { |
50 | 13 | const root = container[MARK] || createRoot(container);
|
51 |
| - toggleWarning(false); |
52 | 14 |
|
53 | 15 | root.render(node);
|
54 | 16 |
|
55 | 17 | container[MARK] = root;
|
56 | 18 | }
|
57 | 19 |
|
58 |
| -function legacyRender(node: React.ReactElement, container: ContainerType) { |
59 |
| - reactRender?.(node, container); |
60 |
| -} |
61 |
| - |
62 |
| -/** @private Test usage. Not work in prod */ |
63 |
| -export function _r(node: React.ReactElement, container: ContainerType) { |
64 |
| - if (process.env.NODE_ENV !== 'production') { |
65 |
| - return legacyRender(node, container); |
66 |
| - } |
67 |
| -} |
68 |
| - |
69 |
| -export function render(node: React.ReactElement, container: ContainerType) { |
70 |
| - if (createRoot) { |
71 |
| - modernRender(node, container); |
72 |
| - return; |
73 |
| - } |
74 |
| - |
75 |
| - legacyRender(node, container); |
76 |
| -} |
77 |
| - |
78 | 20 | // ========================= Unmount ==========================
|
79 |
| -async function modernUnmount(container: ContainerType) { |
| 21 | +export async function unmount(container: ContainerType) { |
80 | 22 | // Delay to unmount to avoid React 18 sync warning
|
81 | 23 | return Promise.resolve().then(() => {
|
82 | 24 | container[MARK]?.unmount();
|
83 | 25 |
|
84 | 26 | delete container[MARK];
|
85 | 27 | });
|
86 | 28 | }
|
87 |
| - |
88 |
| -function legacyUnmount(container: ContainerType) { |
89 |
| - unmountComponentAtNode(container); |
90 |
| -} |
91 |
| - |
92 |
| -/** @private Test usage. Not work in prod */ |
93 |
| -export function _u(container: ContainerType) { |
94 |
| - if (process.env.NODE_ENV !== 'production') { |
95 |
| - return legacyUnmount(container); |
96 |
| - } |
97 |
| -} |
98 |
| - |
99 |
| -export async function unmount(container: ContainerType) { |
100 |
| - if (createRoot !== undefined) { |
101 |
| - // Delay to unmount to avoid React 18 sync warning |
102 |
| - return modernUnmount(container); |
103 |
| - } |
104 |
| - |
105 |
| - legacyUnmount(container); |
106 |
| -} |
0 commit comments