WIP

plone · Apr 8, 2022 · 68e1d91 · 68e1d91
1 parent 720d402
commit 68e1d91
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -361,7 +361,7 @@
     "razzle": "3.4.5",
     "razzle-plugin-bundle-analyzer": "1.2.0",
     "rc-time-picker": "3.7.3",
-    "react": "17.0.2",
+    "react": "18.0.0",
     "react-anchor-link-smooth-scroll": "1.0.12",
     "react-animate-height": "2.0.17",
     "react-beautiful-dnd": "13.0.0",
@@ -370,7 +370,7 @@
     "react-detect-click-outside": "1.1.1",
     "react-dnd": "5.0.0",
     "react-dnd-html5-backend": "5.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.0.0",
     "react-dropzone": "11.1.0",
     "react-fast-compare": "2.0.4",
     "react-image-gallery": "1.0.7",

diff --git a/src/helpers/AuthToken/AuthToken.js b/src/helpers/AuthToken/AuthToken.js
@@ -78,7 +78,7 @@ export function persistAuthToken(store, req) {
             ) {
               store.dispatch(loginRenew());
             } else {
-              // TODO: issue Logout
+              // TODO: issue Logout, depend on history, pass it from the client
             }
           }
         }, exp);

diff --git a/src/server.jsx b/src/server.jsx
@@ -1,4 +1,5 @@
 /* eslint no-console: 0 */
+import fs from 'fs';
 import '@plone/volto/config'; // This is the bootstrap for the global config - server side
 import { existsSync, lstatSync, readFileSync } from 'fs';
 import React from 'react';
@@ -17,6 +18,7 @@ import { resetServerContext } from 'react-beautiful-dnd';
 import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
+import { renderToPipeableStream } from 'react-dom/server';
 
 import routes, { Routes } from '@root/routes';
 import config from '@plone/volto/registry';
@@ -190,6 +192,9 @@ server.get('/*', (req, res) => {
     statsFile: path.resolve(path.join(buildDir, 'loadable-stats.json')),
     entrypoints: ['client'],
   });
+  const assets = JSON.parse(
+    fs.readFileSync(path.resolve(path.join(buildDir, 'loadable-stats.json'))),
+  );
 
   const url = req.originalUrl || req.url;
   const location = parseUrl(url);
@@ -257,24 +262,39 @@ server.get('/*', (req, res) => {
             `,
     );
   } else {
-    res.status(200).send(
-      `<!doctype html>
-              ${renderToString(
-                <Html
-                  extractor={extractor}
-                  markup={markup}
-                  store={store}
-                  criticalCss={readCriticalCss(req)}
-                  apiPath={
-                    req.app.locals.detectedHost || config.settings.apiPath
-                  }
-                  publicURL={
-                    req.app.locals.detectedHost || config.settings.publicURL
-                  }
-                />,
-              )}
-            `,
+    let didError = false;
+    const assetsJS = assets['entrypoints']['client']['assets'].filter((asd) =>
+      asd.endsWith('.js'),
+    );
+    console.log(assetsJS);
+    res.socket.on('error', (error) => {
+      console.error('Fatal', error);
+    });
+
+    const { pipe, abort } = renderToPipeableStream(
+      <Html
+        extractor={extractor}
+        markup={markup}
+        store={store}
+        criticalCss={readCriticalCss(req)}
+        apiPath={req.app.locals.detectedHost || config.settings.apiPath}
+        publicURL={req.app.locals.detectedHost || config.settings.publicURL}
+      />,
+      {
+        bootstrapScripts: assetsJS,
+        onShellReady() {
+          // If something errored before we started streaming, we set the error code appropriately.
+          res.statusCode = didError ? 500 : 200;
+          res.setHeader('Content-type', 'text/html');
+          pipe(res);
+        },
+        onError(x) {
+          didError = true;
+          console.error(x);
+        },
+      },
     );
+    setTimeout(abort, 10000);
   }
 });
 

diff --git a/src/start-client.jsx b/src/start-client.jsx
@@ -1,7 +1,7 @@
 import '@plone/volto/config'; // This is the bootstrap for the global config - client side
 import '@root/theme';
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
 import { BrowserRouter } from 'react-router-dom';
@@ -54,7 +54,8 @@ export default () => {
   }
 
   loadableReady(() => {
-    hydrate(
+    hydrateRoot(
+      document.getElementById('main'),
       <CookiesProvider>
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
@@ -66,7 +67,6 @@ export default () => {
           </IntlProvider>
         </Provider>
       </CookiesProvider>,
-      document.getElementById('main'),
     );
   });
 };
diff --git a/yarn.lock b/yarn.lock
@@ -16557,14 +16557,13 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.21.0"
 
 react-draggable@^4.4.3:
   version "4.4.3"
@@ -16982,13 +16981,12 @@ react-with-styles@^4.1.0:
     prop-types "^15.7.2"
     react-with-direction "^1.3.1"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -17923,6 +17921,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 [email protected], schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6.6:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"