From 318471d547faf17013890b373dd08968e438591a Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 31 Jul 2022 13:31:31 +0530 Subject: [PATCH 1/9] =?UTF-8?q?Adding=20incremental=20support=20for=20Reac?= =?UTF-8?q?t=2018=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docusaurus/package.json | 4 +- .../docusaurus/src/client/clientEntry.tsx | 78 ++++++++++++++----- 2 files changed, 59 insertions(+), 23 deletions(-) diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 965856e2f702..6ee458d4e5b7 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -121,8 +121,8 @@ "tree-node-cli": "^1.5.2" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0", - "react-dom": "^16.8.4 || ^17.0.0" + "react": "^16.8.4 || ^17.0.0 || ^18.0.0-0", + "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0-0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index 8e53d92e1021..4b61ba61b6cf 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -5,19 +5,18 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {BrowserRouter} from 'react-router-dom'; -import {HelmetProvider} from 'react-helmet-async'; +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import { HelmetProvider } from "react-helmet-async"; -import ExecutionEnvironment from './exports/ExecutionEnvironment'; -import App from './App'; -import preload from './preload'; -import docusaurus from './docusaurus'; +import ExecutionEnvironment from "./exports/ExecutionEnvironment"; +import App from "./App"; +import preload from "./preload"; +import docusaurus from "./docusaurus"; declare global { interface NodeModule { - hot?: {accept: () => void}; + hot?: { accept: () => void }; } } @@ -29,18 +28,55 @@ if (ExecutionEnvironment.canUseDOM) { // first-load experience. // For development, there is no existing markup so we had to render it. // We also preload async component to avoid first-load loading screen. - const renderMethod = - process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render; - preload(window.location.pathname).then(() => { - renderMethod( - - - - - , - document.getElementById('__docusaurus'), - ); - }); + + if (React.version.includes("18.")) { + if (process.env.NODE_ENV === "production") { + const { hydrateRoot } = require("react-dom/client"); + + preload(window.location.pathname).then(() => { + hydrateRoot( + document.getElementById("__docusaurus"), + + + + + + ); + }); + } else { + const { createRoot } = require("react-dom/client"); + + preload(window.location.pathname).then(() => { + const docReactRoot = createRoot( + document.getElementById("__docusaurus") + ); + + docReactRoot.render( + + + + + + ); + }); + } + } else { + const ReactDOM = require("react-dom"); + const renderMethod = + process.env.NODE_ENV === "production" + ? ReactDOM.hydrate + : ReactDOM.render; + preload(window.location.pathname).then(() => { + renderMethod( + + + + + , + document.getElementById("__docusaurus") + ); + }); + } // Webpack Hot Module Replacement API if (module.hot) { From 56b203cdcd2e1454226580e3656d50451bf842f7 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 07:19:58 +0530 Subject: [PATCH 2/9] revert react 18 --- packages/docusaurus/package.json | 4 +- .../docusaurus/src/client/clientEntry.tsx | 124 +++++++----------- 2 files changed, 46 insertions(+), 82 deletions(-) diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 0d46f17a20b5..ab5e9df97847 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -121,8 +121,8 @@ "tree-node-cli": "^1.5.2" }, "peerDependencies": { - "react": "^16.8.4 || ^17.0.0 || ^18.0.0-0", - "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0-0" + "react": "^16.8.4 || ^17.0.0", + "react-dom": "^16.8.4 || ^17.0.0" }, "engines": { "node": ">=16.14" diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index 4b61ba61b6cf..6c10b312e091 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -5,83 +5,47 @@ * LICENSE file in the root directory of this source tree. */ -import React from "react"; -import { BrowserRouter } from "react-router-dom"; -import { HelmetProvider } from "react-helmet-async"; - -import ExecutionEnvironment from "./exports/ExecutionEnvironment"; -import App from "./App"; -import preload from "./preload"; -import docusaurus from "./docusaurus"; - -declare global { - interface NodeModule { - hot?: { accept: () => void }; - } -} - -// Client-side render (e.g: running in browser) to become single-page -// application (SPA). -if (ExecutionEnvironment.canUseDOM) { - window.docusaurus = docusaurus; - // For production, attempt to hydrate existing markup for performant - // first-load experience. - // For development, there is no existing markup so we had to render it. - // We also preload async component to avoid first-load loading screen. - - if (React.version.includes("18.")) { - if (process.env.NODE_ENV === "production") { - const { hydrateRoot } = require("react-dom/client"); - - preload(window.location.pathname).then(() => { - hydrateRoot( - document.getElementById("__docusaurus"), - - - - - - ); - }); - } else { - const { createRoot } = require("react-dom/client"); - - preload(window.location.pathname).then(() => { - const docReactRoot = createRoot( - document.getElementById("__docusaurus") - ); - - docReactRoot.render( - - - - - - ); - }); - } - } else { - const ReactDOM = require("react-dom"); - const renderMethod = - process.env.NODE_ENV === "production" - ? ReactDOM.hydrate - : ReactDOM.render; - preload(window.location.pathname).then(() => { - renderMethod( - - - - - , - document.getElementById("__docusaurus") - ); - }); - } - - // Webpack Hot Module Replacement API - if (module.hot) { - // Self-accepting method/ trick - // (https://github.com/webpack/webpack-dev-server/issues/100#issuecomment-290911036) - module.hot.accept(); - } -} + import React from 'react'; + import ReactDOM from 'react-dom'; + import {BrowserRouter} from 'react-router-dom'; + import {HelmetProvider} from 'react-helmet-async'; + + import ExecutionEnvironment from './exports/ExecutionEnvironment'; + import App from './App'; + import preload from './preload'; + import docusaurus from './docusaurus'; + + declare global { + interface NodeModule { + hot?: {accept: () => void}; + } + } + + // Client-side render (e.g: running in browser) to become single-page + // application (SPA). + if (ExecutionEnvironment.canUseDOM) { + window.docusaurus = docusaurus; + // For production, attempt to hydrate existing markup for performant + // first-load experience. + // For development, there is no existing markup so we had to render it. + // We also preload async component to avoid first-load loading screen. + const renderMethod = + process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render; + preload(window.location.pathname).then(() => { + renderMethod( + + + + + , + document.getElementById('__docusaurus'), + ); + }); + + // Webpack Hot Module Replacement API + if (module.hot) { + // Self-accepting method/ trick + // (https://github.com/webpack/webpack-dev-server/issues/100#issuecomment-290911036) + module.hot.accept(); + } + } \ No newline at end of file From 7b6f1cb41c660e620f8f822365ce31cab302728d Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 07:22:25 +0530 Subject: [PATCH 3/9] sanjaiyan: optimize --- .../docusaurus/src/webpack/templates/ssr.html.template.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index ee1f8f1b4716..4902c41a9606 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -16,10 +16,11 @@ export default ` <% }); %> <%~ it.headTags %> <% it.stylesheets.forEach((stylesheet) => { %> + <% }); %> <% it.scripts.forEach((script) => { %> - + <% }); %> > @@ -27,9 +28,6 @@ export default `
<%~ it.appHtml %>
- <% it.scripts.forEach((script) => { %> - - <% }); %> <%~ it.postBodyTags %> From 267b71a256c12047ddbe6785ee8ee8db1d0221d2 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 07:36:54 +0530 Subject: [PATCH 4/9] revert lint --- .../docusaurus/src/client/clientEntry.tsx | 93 +++++++++---------- 1 file changed, 43 insertions(+), 50 deletions(-) diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index 6c10b312e091..aa175566f2ff 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -1,51 +1,44 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import {BrowserRouter} from 'react-router-dom'; +import {HelmetProvider} from 'react-helmet-async'; - import React from 'react'; - import ReactDOM from 'react-dom'; - import {BrowserRouter} from 'react-router-dom'; - import {HelmetProvider} from 'react-helmet-async'; - - import ExecutionEnvironment from './exports/ExecutionEnvironment'; - import App from './App'; - import preload from './preload'; - import docusaurus from './docusaurus'; - - declare global { - interface NodeModule { - hot?: {accept: () => void}; - } - } - - // Client-side render (e.g: running in browser) to become single-page - // application (SPA). - if (ExecutionEnvironment.canUseDOM) { - window.docusaurus = docusaurus; - // For production, attempt to hydrate existing markup for performant - // first-load experience. - // For development, there is no existing markup so we had to render it. - // We also preload async component to avoid first-load loading screen. - const renderMethod = - process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render; - preload(window.location.pathname).then(() => { - renderMethod( - - - - - , - document.getElementById('__docusaurus'), - ); - }); - - // Webpack Hot Module Replacement API - if (module.hot) { - // Self-accepting method/ trick - // (https://github.com/webpack/webpack-dev-server/issues/100#issuecomment-290911036) - module.hot.accept(); - } - } \ No newline at end of file +import ExecutionEnvironment from './exports/ExecutionEnvironment'; +import App from './App'; +import preload from './preload'; +import docusaurus from './docusaurus'; + +declare global { + interface NodeModule { + hot?: {accept: () => void}; + } +} + +// Client-side render (e.g: running in browser) to become single-page +// application (SPA). +if (ExecutionEnvironment.canUseDOM) { + window.docusaurus = docusaurus; + // For production, attempt to hydrate existing markup for performant + // first-load experience. + // For development, there is no existing markup so we had to render it. + // We also preload async component to avoid first-load loading screen. + const renderMethod = + process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render; + preload(window.location.pathname).then(() => { + renderMethod( + + + + + , + document.getElementById('__docusaurus'), + ); + }); + + // Webpack Hot Module Replacement API + if (module.hot) { + // Self-accepting method/ trick + // (https://github.com/webpack/webpack-dev-server/issues/100#issuecomment-290911036) + module.hot.accept(); + } +} From 9006e0ec95ae702054e866727dae8ab63c107657 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 07:37:58 +0530 Subject: [PATCH 5/9] revert lint --- packages/docusaurus/src/client/clientEntry.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/docusaurus/src/client/clientEntry.tsx b/packages/docusaurus/src/client/clientEntry.tsx index aa175566f2ff..8e53d92e1021 100644 --- a/packages/docusaurus/src/client/clientEntry.tsx +++ b/packages/docusaurus/src/client/clientEntry.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'react-router-dom'; From 7a4a5a01417646506e479c9c18282d8f2469d0e1 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 09:03:24 +0530 Subject: [PATCH 6/9] Update ssr.html.template.ts --- packages/docusaurus/src/webpack/templates/ssr.html.template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index 4902c41a9606..083d2cd217c5 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -31,4 +31,4 @@ export default ` <%~ it.postBodyTags %> -`; +`; From c6a3ae7725f2c0664542af13eae0eb90c376f313 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sun, 11 Sep 2022 09:08:59 +0530 Subject: [PATCH 7/9] Remove unnecessary space Fix lint --- packages/docusaurus/src/webpack/templates/ssr.html.template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index 083d2cd217c5..4902c41a9606 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -31,4 +31,4 @@ export default ` <%~ it.postBodyTags %> -`; +`; From 3639e29e992b32a8b45bf45ee30dd33a9882f22d Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Sat, 1 Oct 2022 08:52:51 +0530 Subject: [PATCH 8/9] hoist preload --- .../docusaurus/src/webpack/templates/ssr.html.template.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index 4902c41a9606..08c6a96cee12 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -11,12 +11,14 @@ export default ` + <% it.stylesheets.forEach((stylesheet) => { %> + + <% }); %> <% it.metaAttributes.forEach((metaAttribute) => { %> <%~ metaAttribute %> <% }); %> <%~ it.headTags %> <% it.stylesheets.forEach((stylesheet) => { %> - <% }); %> <% it.scripts.forEach((script) => { %> From 4e33181db211940ed713b652b6a084482e11f10e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Thu, 13 Oct 2022 15:33:16 +0200 Subject: [PATCH 9/9] Update packages/docusaurus/src/webpack/templates/ssr.html.template.ts --- packages/docusaurus/src/webpack/templates/ssr.html.template.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts index 08c6a96cee12..d72872abea00 100644 --- a/packages/docusaurus/src/webpack/templates/ssr.html.template.ts +++ b/packages/docusaurus/src/webpack/templates/ssr.html.template.ts @@ -11,9 +11,6 @@ export default ` - <% it.stylesheets.forEach((stylesheet) => { %> - - <% }); %> <% it.metaAttributes.forEach((metaAttribute) => { %> <%~ metaAttribute %> <% }); %>