Update React to 18.2.0

Updates React to 18.2.0 across all packages. This is a devDependency upgrade for all packages. This is a peerDependency package upgrade only for the core packages that actually changed or incorporate React 18 features. For all other packages they will maintain a peer dep of >= 16.x until they otherwise to be bumped.
fusionjs · Oct 4, 2022 · 8b8252c · 8b8252c
1 parent d30503f
commit 8b8252c
Show file tree

Hide file tree

Showing 54 changed files with 777 additions and 401 deletions.
diff --git a/flow-typed/npm/react-dom_v17.x.x.js b/flow-typed/npm/react-dom_v17.x.x.js
diff --git a/fusion-cli-tests/package.json b/fusion-cli-tests/package.json
@@ -37,9 +37,9 @@
     "jest-pnp-resolver": "^1.2.2",
     "locale": "0.1.0",
     "puppeteer": "^2.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "tape": "^4.10.1",
     "unfetch": "^4.1.0",
     "ws": "^7.1.1"

diff --git a/fusion-cli-tests/test/e2e/dynamic-import-app/test.js b/fusion-cli-tests/test/e2e/dynamic-import-app/test.js
@@ -41,7 +41,7 @@ async function getDistFiles(dir) {
 test('`fusion build` app with dynamic imports chunk hashing', async () => {
   await cmd(`build --dir=${dir} --production`);
 
-  const splitChunkId = 2;
+  const splitChunkId = 3;
   const distFiles = await getDistFiles(dir);
   const dynamicFileBundlePath = path.resolve(
     dir,

diff --git a/fusion-cli-tests/test/e2e/hmr.js b/fusion-cli-tests/test/e2e/hmr.js
@@ -44,6 +44,9 @@ module.exports = async function testHmr(
   const page = await browser.newPage();
   await page.goto(`http://localhost:${port}/`);
 
+  // Give client split time to load
+  await new Promise((res) => setTimeout(res, 1000));
+
   const content = await page.content();
   t.ok(
     content.includes('hmr-component-default'),

diff --git a/fusion-cli-tests/test/e2e/test-jest-app/fixture/package.json b/fusion-cli-tests/test/e2e/test-jest-app/fixture/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "react": "^17.0.2"
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "enzyme": "3.11.0"

diff --git a/fusion-cli-tests/test/e2e/universal-values/fixture/src/main.js b/fusion-cli-tests/test/e2e/universal-values/fixture/src/main.js
@@ -1,5 +1,5 @@
 // @noflow
-import App, {createToken, withUniversalValue, withRenderSetup, withSSREffect} from 'fusion-core';
+import App, {createToken, withUniversalValue, withRenderSetup, unstable_withPrepareEffect} from 'fusion-core';
 
 export default async function () {
   const app = new App('element', (el) => el);
@@ -51,11 +51,11 @@ function* TestPlugin3() {
 
     withRenderSetup(() => {
       if (__NODE__) {
-        withSSREffect(() => {
+        unstable_withPrepareEffect(() => {
           serialize("baz");
         });
       }
-  });
+    });
 
     if (__BROWSER__) {
       const hydrated = hydrate();

diff --git a/fusion-cli-tests/test/e2e/unparseable-user-agent/test.js b/fusion-cli-tests/test/e2e/unparseable-user-agent/test.js
@@ -41,7 +41,7 @@ async function getDistFiles(dir) {
 test('`fusion build` app with dynamic imports chunk hashing', async () => {
   await cmd(`build --dir=${dir} --production`);
 
-  const splitChunkId = 2;
+  const splitChunkId = 3;
   const distFiles = await getDistFiles(dir);
   const dynamicFileBundlePath = path.resolve(
     dir,

diff --git a/fusion-cli/build/babel-plugins/babel-plugin-functional-plugin-syntax/index.js b/fusion-cli/build/babel-plugins/babel-plugin-functional-plugin-syntax/index.js
@@ -10,7 +10,7 @@ const yieldHooks = new Set(['withDeps', 'withPlugin', 'withStartup']);
 
 const nodeOnlyHooks = new Set([
   'withMiddleware',
-  'withSSREffect',
+  'unstable_withPrepareEffect',
   'withEndpoint',
 ]);
 

diff --git a/fusion-cli/build/jest/base-jest-config.js b/fusion-cli/build/jest/base-jest-config.js
@@ -48,6 +48,7 @@ function getReactSetup() {
       case '16':
         return [require.resolve('./jest-framework-setup-16.js')];
       case '17':
+      case '18':
         return [require.resolve('./jest-framework-setup-17.js')];
       default:
         return [];

diff --git a/fusion-cli/build/jest/jest-framework-shims.js b/fusion-cli/build/jest/jest-framework-shims.js
@@ -8,6 +8,9 @@
 
 /* eslint-env node */
 
+// $FlowFixMe
+const {TextEncoder, TextDecoder} = require('util');
+
 process.on('unhandledRejection', (e) => {
   throw e;
 });
@@ -22,6 +25,10 @@ global.__BROWSER__ = Boolean(global.window);
 global.__NODE__ = !global.__BROWSER__;
 global.__DEV__ = process.env !== 'production';
 
+// Needed for React 18 Enzyme compatibility
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
+
 if (__NODE__) {
   // fixes issue when react testing library is pulled into node test
   process.env.RTL_SKIP_AUTO_CLEANUP = 'true';

diff --git a/fusion-cli/entries/server-entry.js b/fusion-cli/entries/server-entry.js
@@ -24,14 +24,15 @@ import BaseApp, {
   HttpServerToken,
   RoutePrefixToken,
   SSRBodyTemplateToken,
+  SSRShellTemplateToken,
   CriticalChunkIdsToken,
 } from 'fusion-core';
 
 import CriticalChunkIdsPlugin from '../plugins/critical-chunk-ids-plugin.js';
 import AssetsFactory from '../plugins/assets-plugin';
 import ContextPlugin from '../plugins/context-plugin';
 import ServerErrorPlugin from '../plugins/server-error-plugin';
-import {SSRBodyTemplate} from '../plugins/ssr-plugin';
+import {SSRBodyTemplate, getSSRShellTemplate} from '../plugins/ssr-plugin';
 import {SSRModuleScriptsBodyTemplate} from '../plugins/ssr-module-scripts-plugin';
 import stripRoutePrefix from '../lib/strip-prefix.js';
 // $FlowFixMe[cannot-resolve-module]
@@ -98,6 +99,10 @@ async function reload(
     SSRBodyTemplateToken,
     useModuleScripts ? SSRModuleScriptsBodyTemplate : SSRBodyTemplate
   );
+  app.register(
+    SSRShellTemplateToken,
+    getSSRShellTemplate(Boolean(useModuleScripts))
+  );
   app.register(CriticalChunkIdsToken, CriticalChunkIdsPlugin);
   if (prefix) {
     app.register(RoutePrefixToken, prefix);

diff --git a/fusion-cli/entries/serverless-entry.js b/fusion-cli/entries/serverless-entry.js
@@ -19,13 +19,14 @@ import '__SECRET_I18N_MANIFEST_INSTRUMENTATION_LOADER__!'; // eslint-disable-lin
 import BaseApp, {
   RoutePrefixToken,
   SSRBodyTemplateToken,
+  SSRShellTemplateToken,
   CriticalChunkIdsToken,
 } from 'fusion-core';
 
 import CriticalChunkIdsPlugin from '../plugins/critical-chunk-ids-plugin.js';
 import AssetsFactory from '../plugins/assets-plugin';
 import ContextPlugin from '../plugins/context-plugin';
-import {SSRBodyTemplate} from '../plugins/ssr-plugin';
+import {SSRBodyTemplate, getSSRShellTemplate} from '../plugins/ssr-plugin';
 import {SSRModuleScriptsBodyTemplate} from '../plugins/ssr-module-scripts-plugin';
 import stripRoutePrefix from '../lib/strip-prefix.js';
 
@@ -56,6 +57,7 @@ export default async function loadApp(
     SSRBodyTemplateToken,
     useModuleScripts ? SSRModuleScriptsBodyTemplate : SSRBodyTemplate
   );
+  app.register(SSRShellTemplateToken, getSSRShellTemplate(useModuleScripts));
   app.register(CriticalChunkIdsToken, CriticalChunkIdsPlugin);
   if (prefix) {
     app.register(RoutePrefixToken, prefix);