|
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