-
-
Notifications
You must be signed in to change notification settings - Fork 632
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Reformat clientStartup.ts * Unmount roots correctly in React 18+ * Avoid checking if we are in Node or in browser so much
- Loading branch information
1 parent
8b708e0
commit db9c112
Showing
4 changed files
with
110 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| const reactMajorVersion = ReactDOM.version?.split('.')[0] || 16; | ||
|
|
||
| // TODO: once we require React 18, we can remove this and inline everything guarded by it. | ||
| // Not the default export because others may be added for future React versions. | ||
| // eslint-disable-next-line import/prefer-default-export | ||
| export const supportsRootApi = reactMajorVersion >= 18; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,43 @@ | ||
| import type { ReactElement } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import type { RenderReturnType } from './types'; | ||
|
|
||
| type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType; | ||
| const supportsReactCreateRoot = ReactDOM.version && | ||
| parseInt(ReactDOM.version.split('.')[0], 10) >= 18; | ||
|
|
||
| // TODO: once React dependency is updated to >= 18, we can remove this and just | ||
| // import ReactDOM from 'react-dom/client'; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| let reactDomClient: any; | ||
| if (supportsReactCreateRoot) { | ||
| // This will never throw an exception, but it's the way to tell Webpack the dependency is optional | ||
| // https://github.com/webpack/webpack/issues/339#issuecomment-47739112 | ||
| // Unfortunately, it only converts the error to a warning. | ||
| try { | ||
| // eslint-disable-next-line global-require,import/no-unresolved | ||
| reactDomClient = require('react-dom/client'); | ||
| } catch (e) { | ||
| // We should never get here, but if we do, we'll just use the default ReactDOM | ||
| // and live with the warning. | ||
| reactDomClient = ReactDOM; | ||
| } | ||
| } | ||
|
|
||
| export const reactHydrate: HydrateOrRenderType = supportsReactCreateRoot ? | ||
| reactDomClient.hydrateRoot : | ||
| (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode); | ||
|
|
||
| export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType { | ||
| if (supportsReactCreateRoot) { | ||
| const root = reactDomClient.createRoot(domNode); | ||
| root.render(reactElement); | ||
| return root; | ||
| } | ||
|
|
||
| // eslint-disable-next-line react/no-render-return-value | ||
| return ReactDOM.render(reactElement, domNode); | ||
| } | ||
|
|
||
| export default function reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType { | ||
| return hydrate ? reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement); | ||
| } | ||
| import type { ReactElement } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import type { RenderReturnType } from './types'; | ||
| import { supportsRootApi } from './reactApis'; | ||
|
|
||
| type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType; | ||
|
|
||
| // TODO: once React dependency is updated to >= 18, we can remove this and just | ||
| // import ReactDOM from 'react-dom/client'; | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| let reactDomClient: any; | ||
| if (supportsRootApi) { | ||
| // This will never throw an exception, but it's the way to tell Webpack the dependency is optional | ||
| // https://github.com/webpack/webpack/issues/339#issuecomment-47739112 | ||
| // Unfortunately, it only converts the error to a warning. | ||
| try { | ||
| // eslint-disable-next-line global-require,import/no-unresolved | ||
| reactDomClient = require('react-dom/client'); | ||
| } catch (e) { | ||
| // We should never get here, but if we do, we'll just use the default ReactDOM | ||
| // and live with the warning. | ||
| reactDomClient = ReactDOM; | ||
| } | ||
| } | ||
|
|
||
| export const reactHydrate: HydrateOrRenderType = supportsRootApi ? | ||
| reactDomClient.hydrateRoot : | ||
| (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode); | ||
|
|
||
| export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType { | ||
| if (supportsRootApi) { | ||
| const root = reactDomClient.createRoot(domNode); | ||
| root.render(reactElement); | ||
| return root; | ||
| } | ||
|
|
||
| // eslint-disable-next-line react/no-render-return-value | ||
| return ReactDOM.render(reactElement, domNode); | ||
| } | ||
|
|
||
| export default function reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType { | ||
| return hydrate ? reactHydrate(domNode, reactElement) : reactRender(domNode, reactElement); | ||
| } |