[major] upgrade to React 18 (#1875)

* feat: upgrade to react 18, document issues (#1874) * test(CEECORE-2971): fix fe-frameworkLib CSR test and upgrade React v18 (#1876) * test: resolve CEECORE-2971 * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2971): remove comments from fe-frameworkLib CSR test Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> * refactor(CEECORE-3041): Remove method renderToStaticMarkup from frameworkLib and update test (#1883) * test: resolve CEECORE-2971 * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2971): remove comments from fe-frameworkLib CSR test * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * refactor(CEECORE-2932): replace depricated render methods and unnecessary dependecies in frameworkLib * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * test(CEECORE-2932): remove react-async-ssr references from ssr-framework test * docs: remove react-async-ssr reference from README * docs: remove react-async-ssr reference from README * refactor: remove react-async-ssr from package.json files * refactor: remove react-async-ssr from package.json files * fix: run getTestWritable() within tests and define as an arrow function * remove renderToStaticMarkup and refactor test in subapp-react Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.lan> * major(CEECORE-3087): Upgrade xarc-react-router package to V6 (#1887) * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * fix: run getTestWritable() within tests and define as an arrow function * Remove redundant getTestWritable defintion * remove redundant Stream import * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * refactor(CEECORE-2932): replace depricated render methods and unnecessary dependecies in frameworkLib * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * remove getTestWritable * remove test subapp * major: upgrade react-router in xarc-react-router package to v6 * update remaining dependencies in xarc-react-router * upgrade dependencies * remove redundant Strema import Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> * feat(CEECORE-3011) add a basic react v18 based subapp version 2Subapp2 (#1886) * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * refactor(CEECORE-2932): replace depricated render methods and unnecessary dependecies in frameworkLib * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * fix: run getTestWritable() within tests and define as an arrow function * undo test file changes * update subapp2-basic folders * upgrade xarc-react-router dependencies * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * fix: run getTestWritable() within tests and define as an arrow function * Remove redundant getTestWritable defintion * remove redundant Stream import * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * refactor(CEECORE-2932): replace depricated render methods and unnecessary dependecies in frameworkLib * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * remove getTestWritable * remove test subapp * major: upgrade react-router in xarc-react-router package to v6 * update remaining dependencies in xarc-react-router * upgrade dependencies * remove redundant Strema import * add react-router v6 support * add title * refactor routes file * refactor routes file * update package.json files for xarc-react-router and subapp2 Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> * refactor(CEECORE-3033): update redux-router-engine with renderToPipeableStream method for SSR (#1884) * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * fix: run getTestWritable() within tests and define as an arrow function * remove renderToStaticMarkup and refactor test in subapp-react * replace renderToNodeStream with renderToPipeableStream, adjust tests * remove dangling commas and trailing empty spaces * remove redundant sample app * remove redundant formatting changes * remove redundant formatting changes in redux-router-engine test Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.lan> * [FIX](CEECORE-3051): React 18 - Suspense fallback rendering issue (#1889) * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * fix: run getTestWritable() within tests and define as an arrow function * Remove redundant getTestWritable defintion * remove redundant Stream import * feat(CEECORE-2971): upgrade to React v18 * test(CEECORE-2980): refactor test to work with renderToPipeableNodeStream * refactor(CEECORE-2932): replace depricated render methods and unnecessary dependecies in frameworkLib * test(CEECORE-2932): update ssr-framework test to work with renderToPipeableNodeStream * remove getTestWritable * remove test subapp * WIP: change renderToPipeableStream implementation * remove formatting changes * cleanup * refactor frameworkLib tests for new render method implementation * remove redundtant hydration tests and add comments Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> * !feat: upgrade react-subapp package to react-router v6 (#1890) * upgrade and refactor react-subapp to react-router v6 * remove extra empty comment from test expectations * feat(CEECORE-3010): add a basic react v18 based subapp version 1 (#1880) * add subapp-v1 with react 18 suspense feature * add new suspense and transition features * add comments to suspense demo * upgrade subapp V1 packages * refactor framework-lib to workl with react router v6 * refactor subapp1-online-store to work with react router 6 * upgrade and refactor react-subapp to react-router v6 * add FEATURES section to README * add BrowserRouter to the subapp * remove extra empty comment from test expectations * remove test folder * feat(CEECORE-3162): upgrade React 18.0.0 to 18.2.0 (#1891) * minor: upgrade to react 18.2.0 * minor: upgrade react 18.1.0 to 10.2.0 * upgrade remaining react version to 18.2.0 * fix: update dependencies to resolve build issues (#1892) * fix: fix error with ts 4.7.2 version * fix: fix test cases and lint issues * patch: add eslint-plugin-tsdoc as dev dependency * Removed duplicate 'fetch' variable as it is already defined as a built-in global variable * fix: fix error with ts 4.7.2 version * fix: fix lint issues * revert changes in xarc-react-query test * (fix)CEECORE-3183: fix failing test cases (#1893) * fix: fixed lint issue related to react component * fix: failed tests and checks in subapp-react (#1894) * (fix)CEECORE-3183: fix failing test cases * fix failed checks from subapp-react * fix:remove redundant props (#1895) Co-authored-by: Srinath Muthyala <Srinath.reddy.muthyala@walmart.com> Co-authored-by: mristic505 <mateja.ristic@gmail.com> * fix subapp-server failed test (#1896) * fix: update package dependencies to resolve build issues (#1897) Co-authored-by: Srinath Muthyala <Srinath.reddy.muthyala@walmart.com> * fix: update package dependencies to resolve build issues (#1898) Co-authored-by: Srinath Muthyala <Srinath.reddy.muthyala@walmart.com> Co-authored-by: mristic505 <mateja.ristic@gmail.com> Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.local> Co-authored-by: Mateja Ristic <matejaristic@MatejaR-USMAC22.lan> Co-authored-by: smuthya <59977748+smuthya@users.noreply.github.com> Co-authored-by: Srinath Muthyala <Srinath.reddy.muthyala@walmart.com>
electrode-io · Jul 13, 2022 · c226869 · c226869
1 parent 60e173d
commit c226869
Show file tree

Hide file tree

Showing 108 changed files with 3,824 additions and 540 deletions.
diff --git a/docusaurus/package.json b/docusaurus/package.json
@@ -15,8 +15,8 @@
     "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
     "classnames": "^2.2.6",
     "docusaurus-lunr-search": "^1.0.3",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "bugs": {
     "url": "https://github.com/electrode-io/electrode/issues"

diff --git a/fyn-lock.yaml b/fyn-lock.yaml
@@ -1,5 +1,6 @@
 $fyn:
  layout: normal
+ flattenTop: true
 $pkg:
  dev:
   '@xarc/module-dev': ^4.0.0

diff --git a/packages/electrode-react-webapp/package.json b/packages/electrode-react-webapp/package.json
@@ -80,8 +80,8 @@
     "koa-router": "^7.4.0",
     "object-assign": "^4.1.0",
     "prettier": "^1.5.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^5.2.0",
     "run-verify": "^1.0.2",
     "stream-to-array": "^2.3.0",

diff --git a/packages/electrode-redux-router-engine/lib/redux-router-engine.js b/packages/electrode-redux-router-engine/lib/redux-router-engine.js
@@ -15,6 +15,7 @@ const { combineReducers, createStore } = require("redux");
 const pkg = require("../package.json");
 const util = require("./util");
 const ServerContext = require("./server-context");
+const { Stream } = require("stream");
 
 const BAD_CHARS_REGEXP = /[<\u2028\u2029]/g;
 const REPLACEMENTS_FOR_BAD_CHARS = {
@@ -32,7 +33,6 @@ const ROUTE_HANDLER = Symbol("route handler");
 class ReduxRouterEngine {
   constructor(options) {
     assert(options.routes, "Must provide react-router routes for redux-router-engine");
-
     this.options = Object.assign({ webappPrefix: "", basename: "" }, options);
     this.options.withIds = Boolean(options.withIds);
 
@@ -72,6 +72,21 @@ class ReduxRouterEngine {
     this._envTargets = util.getEnvTargets();
   }
 
+  getStreamWritable() {
+    const writable = new Stream.PassThrough();
+    writable.setEncoding("utf8");
+    const output = { result: "" };
+    writable.on("data", (chunk) => {
+      output.result += chunk;
+    });
+    const completed = new Promise((resolve) => {
+      writable.on("finish", () => {
+        resolve();
+      });
+    });
+    return { writable, completed, output };
+  }
+
   startMatch(req, options = {}) {
     // hapi@18 compatibility: use "origin" to determine (WHATWG has origin, Url.parse does not)
     // https://github.com/hapijs/hapi/issues/3871
@@ -114,7 +129,6 @@ class ReduxRouterEngine {
       const earlyOut = this.checkMatch(options);
       if (earlyOut) return earlyOut;
       await this.prepReduxStore(options);
-
       return await this._handleRender(options);
     } catch (err) {
       this.options.logError.call(this, req, err);
@@ -253,40 +267,34 @@ class ReduxRouterEngine {
     }
   }
 
-  _renderToString({ req, location, store, routeContext, withIds }) {
+  async _renderToString({ req, location, store, routeContext }) {
     if (req.app && req.app.disableSSR) {
       return "<!-- SSR disabled by request -->";
     } else {
-      assert(React, `${pkg.name}: can't do SSR because react not found`);
-      assert(ReactDomServer, `${pkg.name}: can't do SSR because react-dom not found`);
-
-      let ssrApi;
-      if (this._streaming) {
-        ssrApi = withIds
-          ? ReactDomServer.renderToNodeStream
-          : ReactDomServer.renderToStaticNodeStream;
-      } else {
-        ssrApi = withIds ? ReactDomServer.renderToString : ReactDomServer.renderToStaticMarkup;
-      }
-
-      return ssrApi(
+      const element = React.createElement(
+        // server side context to provide request
+        ServerContext,
+        { request: req },
+        // redux provider
         React.createElement(
-          // server side context to provide request
-          ServerContext,
-          { request: req },
-          // redux provider
+          Provider,
+          { store },
+          // user route component
           React.createElement(
-            Provider,
-            { store },
-            // user route component
-            React.createElement(
-              StaticRouter,
-              { location, context: routeContext, basename: this.options.basename },
-              this._routesComponent
-            )
+            StaticRouter,
+            { location, context: routeContext, basename: this.options.basename },
+            this._routesComponent
           )
         )
       );
+
+      if (!this._streaming) return ReactDomServer.renderToString(element);
+
+      const { writable, output, completed } = this.getStreamWritable();
+      const { pipe } = await ReactDomServer.renderToPipeableStream(element);
+      pipe(writable);
+      await completed;
+      return output.result;
     }
   }
 

diff --git a/packages/electrode-redux-router-engine/package.json b/packages/electrode-redux-router-engine/package.json
@@ -44,8 +44,8 @@
     "babel-register": "^6.5.2",
     "electrode-archetype-njs-module-dev": "^2.3.2",
     "electrode-server": "^1.5.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "run-verify": "^1.0.2",
     "stream-to-array": "^2.3.0",
     "test-init-nm": "./test/nm/test-init-nm",
@@ -60,8 +60,8 @@
     "redux": "^4.0.0 || ^3.6.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "nyc": {
     "all": true,

diff --git a/packages/electrode-redux-router-engine/test/routes.jsx b/packages/electrode-redux-router-engine/test/routes.jsx
@@ -234,7 +234,11 @@ const routes = [
   },
   {
     path: "/invalid-component",
-    component: () => {}
+    // React 18 renderToString method does not error out the same way as in previous versions.       
+    // Status 500 has to be manually declared here.
+    component: () => {
+      throw { status: 500 };
+    }
   },
   {
     path: "/error-component",

diff --git a/packages/electrode-redux-router-engine/test/spec/electrode-server.integration.spec.js b/packages/electrode-redux-router-engine/test/spec/electrode-server.integration.spec.js
@@ -4,7 +4,6 @@ const ReduxRouterEngine = require("../..");
 const expect = require("chai").expect;
 const electrodeServer = require("electrode-server");
 const { runFinally, asyncVerify } = require("run-verify");
-const streamToArray = require("stream-to-array");
 
 require("babel-register");
 
@@ -25,15 +24,7 @@ describe("electrode server (Hapi) integration", function() {
       handler: async (request, reply) => {
         if (!engine) engine = new ReduxRouterEngine({ routes, streaming, withIds });
         const result = await engine.render(request);
-        if (streaming) {
-          result.resultType = result.html.constructor.name;
-          streamToArray(result.html, (err, arr) => {
-            result.html = arr.join("");
-            reply(result);
-          });
-        } else {
-          reply(result);
-        }
+        reply(result);
       }
     });
 
@@ -55,7 +46,7 @@ describe("electrode server (Hapi) integration", function() {
       () => setupServer(),
       s => {
         server = s;
-        return server.inject("/test").then(resp => {
+        return server.inject("/test").then((resp) => {
           expect(resp.result).to.deep.equal({
             status: 200,
             html: "<div>Page<div>Home</div></div>",
@@ -73,10 +64,10 @@ describe("electrode server (Hapi) integration", function() {
       () => setupServer(),
       s => {
         server = s;
-        return server.inject("/test?foo=bar").then(resp => {
+        return server.inject("/test?foo=bar").then((resp) => {
           expect(resp.result).to.deep.equal({
             status: 200,
-            html: "<div>Page<div>Home - Query: ?foo=bar</div></div>",
+            html: "<div>Page<div>Home<!-- --> - Query: ?foo=bar</div></div>",
             prefetch: "window.__PRELOADED_STATE__ = {};"
           });
         });
@@ -91,12 +82,11 @@ describe("electrode server (Hapi) integration", function() {
       () => setupServer(true),
       s => {
         server = s;
-        return server.inject("/test").then(resp => {
+        return server.inject("/test").then((resp) => {
           expect(resp.result).to.deep.equal({
             status: 200,
             html: "<div>Page<div>Home</div></div>",
-            prefetch: "window.__PRELOADED_STATE__ = {};",
-            resultType: "ReactMarkupReadableStream"
+            prefetch: "window.__PRELOADED_STATE__ = {};"
           });
         });
       },
@@ -110,12 +100,11 @@ describe("electrode server (Hapi) integration", function() {
       () => setupServer(true, true),
       s => {
         server = s;
-        return server.inject("/test").then(resp => {
+        return server.inject("/test").then((resp) => {
           expect(resp.result).to.deep.equal({
             status: 200,
             html: `<div>Page<div>Home</div></div>`,
-            prefetch: "window.__PRELOADED_STATE__ = {};",
-            resultType: "ReactMarkupReadableStream"
+            prefetch: "window.__PRELOADED_STATE__ = {};"
           });
         });
       },

diff --git a/packages/electrode-redux-router-engine/test/spec/redux-router-engine.spec.js b/packages/electrode-redux-router-engine/test/spec/redux-router-engine.spec.js
@@ -4,9 +4,7 @@ const Path = require("path");
 const ReduxRouterEngine = require("../..");
 const xstdout = require("xstdout");
 const Url = require("url");
-
 const expect = require("chai").expect;
-
 require("babel-register");
 
 const routes = require("../routes.jsx").default;
@@ -85,7 +83,7 @@ describe("redux-router-engine", function() {
 
     return engine.render(testReq).then(result => {
       expect(result.status).to.equal(200);
-      expect(result.html).to.equal("<div>Page<div>Home - Query: ?foo=bar</div></div>");
+      expect(result.html).to.equal("<div>Page<div>Home<!-- --> - Query: ?foo=bar</div></div>");
       expect(result.prefetch).to.equal("window.__PRELOADED_STATE__ = {};");
     });
   });
@@ -96,7 +94,7 @@ describe("redux-router-engine", function() {
 
     return engine.render(testReq, { location: Url.parse("/test?a=1") }).then(result => {
       expect(result.status).to.equal(200);
-      expect(result.html).to.equal("<div>Page<div>Home - Query: ?a=1</div></div>");
+      expect(result.html).to.equal("<div>Page<div>Home<!-- --> - Query: ?a=1</div></div>");
       expect(result.prefetch).to.equal("window.__PRELOADED_STATE__ = {};");
     });
   });
@@ -180,7 +178,9 @@ describe("redux-router-engine", function() {
     return engine.render(testReq).then(result => {
       intercept.restore();
       expect(result.status).to.equal(500);
-      expect(result._err.message).to.contain("Nothing was returned from render");
+      // React 18 renderToString method does not error out the same way as in previous versions.
+      // "Nothing was returned from render" is not returned and neither is status 500.
+      // Instead, status 500 has to be manually declared in routes.js
     });
   });
 

diff --git a/packages/subapp-react/README.md b/packages/subapp-react/README.md
@@ -73,12 +73,6 @@ import { React, loadSubApp } from "subapp-react";
 export default loadSubApp({ name: "MySubapp", Component, useReactRouter: true });
 ```
 
-## Support for SSR with Suspense
-
-async server side rendering with React suspense is enabled with [react-async-ssr]
-
-- First, you have to install [react-async-ssr] with `npm i react-async-ssr`
-
 ## License
 
 Copyright (c) 2016-present, WalmartLabs
@@ -88,4 +82,3 @@ Licensed under the [Apache License, Version 2.0].
 [apache license, version 2.0]: https://www.apache.org/licenses/LICENSE-2.0
 [react-router]: https://www.npmjs.com/package/react-router
 [react-router-dom]: https://www.npmjs.com/package/react-router-dom
-[react-async-ssr]: https://www.npmjs.com/package/react-async-ssr