From 3a4dc9e0a7a21493f36426814a6fbef4c95ed535 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Thu, 31 Mar 2022 10:01:05 -0700 Subject: [PATCH] React 18 monorepo upgrade (#2948) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * First pass at supporting React 18 in @astrojs/react * Try marking React 18’s `react-dom/client` as external * Try a different approach to importing different React versions * Allow resolving JSON modules * Revert "Allow resolving JSON modules" This reverts commit 5279b7249c52b20fd74fe48f9f1047c9b3a117dc. * Try the separate client entrypoint approach from #2946 * Clean up diff * Trying to see something * Just keep swimming… 🐠 * update to support react 18 * update React to React 18 across the board Co-authored-by: delucis Co-authored-by: Matthew Phillips --- examples/docs/package.json | 4 +- examples/framework-multiple/package.json | 4 +- examples/framework-react/package.json | 4 +- examples/integrations-playground/package.json | 4 +- examples/subpath/package.json | 4 +- examples/with-markdown/package.json | 4 +- examples/with-nanostores/package.json | 4 +- .../fixtures/react-component/package.json | 4 +- packages/integrations/react/package.json | 4 +- packages/integrations/react/src/index.ts | 2 +- .../renderers/renderer-react/package.json | 4 +- pnpm-lock.yaml | 118 +++++++++--------- 12 files changed, 79 insertions(+), 81 deletions(-) diff --git a/examples/docs/package.json b/examples/docs/package.json index dba62dc47..e7cf7282a 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -14,8 +14,8 @@ "@docsearch/react": "^3.0.0", "@types/react": "^17.0.43", "preact": "^10.6.6", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "devDependencies": { "@astrojs/preact": "^0.0.2", diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 8f95c6935..4328d130e 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -21,8 +21,8 @@ "@webcomponents/template-shadowroot": "^0.1.0", "lit": "^2.2.1", "preact": "^10.6.6", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "solid-js": "^1.3.13", "svelte": "^3.46.4", "vue": "^3.2.31" diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index 69bfc446c..4cdd93049 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -13,7 +13,7 @@ "astro": "^0.25.4" }, "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/examples/integrations-playground/package.json b/examples/integrations-playground/package.json index 6c08c5f46..848bd2c4c 100644 --- a/examples/integrations-playground/package.json +++ b/examples/integrations-playground/package.json @@ -21,8 +21,8 @@ "@webcomponents/template-shadowroot": "^0.1.0", "lit": "^2.2.1", "preact": "^10.6.6", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "solid-js": "^1.3.13", "svelte": "^3.46.4", "vue": "^3.2.31" diff --git a/examples/subpath/package.json b/examples/subpath/package.json index f48f47a11..ea792f73a 100644 --- a/examples/subpath/package.json +++ b/examples/subpath/package.json @@ -14,7 +14,7 @@ "sass": "^1.49.9" }, "dependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" } } diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json index 843ee33ff..7f96d9ffa 100644 --- a/examples/with-markdown/package.json +++ b/examples/with-markdown/package.json @@ -18,8 +18,8 @@ }, "dependencies": { "preact": "^10.6.6", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "svelte": "^3.46.4", "vue": "^3.2.31" } diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index 828a8a608..55a60cadb 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -14,8 +14,8 @@ "@nanostores/vue": "^0.4.1", "nanostores": "^0.5.12", "preact": "^10.6.6", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "solid-nanostores": "0.0.6", "vue": "^3.2.31" }, diff --git a/packages/astro/test/fixtures/react-component/package.json b/packages/astro/test/fixtures/react-component/package.json index 7ab49d4c0..f90d42071 100644 --- a/packages/astro/test/fixtures/react-component/package.json +++ b/packages/astro/test/fixtures/react-component/package.json @@ -6,8 +6,8 @@ "@astrojs/react": "workspace:*", "@astrojs/vue": "workspace:*", "astro": "workspace:*", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.0.0", + "react-dom": "^18.0.0", "vue": "^3.2.31" } } diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json index b1a2be46d..1184ce8d3 100644 --- a/packages/integrations/react/package.json +++ b/packages/integrations/react/package.json @@ -40,8 +40,8 @@ "@types/react-dom": "^17.0.14", "astro": "workspace:*", "astro-scripts": "workspace:*", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "peerDependencies": { "react": "^17.0.2 || ^18.0.0", diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index 25899a025..2ea2dd5fb 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -35,7 +35,7 @@ function getViteConfiguration() { return { optimizeDeps: { include: [ReactVersion.startsWith('18.') ? '@astrojs/react/client.js' : '@astrojs/react/client-v17.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'], - exclude: [ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js'], + exclude: [ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js'], }, resolve: { dedupe: ['react', 'react-dom'], diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json index dece87056..ba35445e7 100644 --- a/packages/renderers/renderer-react/package.json +++ b/packages/renderers/renderer-react/package.json @@ -22,8 +22,8 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.17.3", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "engines": { "node": "^14.15.0 || >=16.0.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99da4e7df..93c0b6626 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,16 +92,16 @@ importers: '@types/react': ^17.0.43 astro: ^0.25.4 preact: ^10.6.6 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 dependencies: '@algolia/client-search': 4.13.0 '@docsearch/css': 3.0.0 - '@docsearch/react': 3.0.0_73997327e0ab5ab2aaf50785071cd6bd + '@docsearch/react': 3.0.0_9e0989ed96c3582fc46f3bba1f5ac769 '@types/react': 17.0.43 preact: 10.6.6 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 devDependencies: '@astrojs/preact': link:../../packages/integrations/preact '@astrojs/react': link:../../packages/integrations/react @@ -144,8 +144,8 @@ importers: astro: ^0.25.4 lit: ^2.2.1 preact: ^10.6.6 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 solid-js: ^1.3.13 svelte: ^3.46.4 vue: ^3.2.31 @@ -153,8 +153,8 @@ importers: '@webcomponents/template-shadowroot': 0.1.0 lit: 2.2.1 preact: 10.6.6 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 solid-js: 1.3.13 svelte: 3.46.4 vue: 3.2.31 @@ -182,11 +182,11 @@ importers: specifiers: '@astrojs/react': ^0.0.2 astro: ^0.25.4 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 dependencies: - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 devDependencies: '@astrojs/react': link:../../packages/integrations/react astro: link:../../packages/astro @@ -236,8 +236,8 @@ importers: astro: ^0.25.4 lit: ^2.2.1 preact: ^10.6.6 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 solid-js: ^1.3.13 svelte: ^3.46.4 vue: ^3.2.31 @@ -245,8 +245,8 @@ importers: '@webcomponents/template-shadowroot': 0.1.0 lit: 2.2.1 preact: 10.6.6 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 solid-js: 1.3.13 svelte: 3.46.4 vue: 3.2.31 @@ -315,12 +315,12 @@ importers: specifiers: '@astrojs/react': ^0.0.2 astro: ^0.25.4 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 sass: ^1.49.9 dependencies: - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 devDependencies: '@astrojs/react': link:../../packages/integrations/react astro: link:../../packages/astro @@ -335,14 +335,14 @@ importers: '@astrojs/vue': ^0.0.2 astro: ^0.25.4 preact: ^10.6.6 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 svelte: ^3.46.4 vue: ^3.2.31 dependencies: preact: 10.6.6 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 svelte: 3.46.4 vue: 3.2.31 devDependencies: @@ -392,18 +392,18 @@ importers: astro: ^0.25.4 nanostores: ^0.5.12 preact: ^10.6.6 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 solid-nanostores: 0.0.6 vue: ^3.2.31 dependencies: '@nanostores/preact': 0.1.3_nanostores@0.5.12+preact@10.6.6 - '@nanostores/react': 0.1.5_f66e5a41ef8212ca2b6be35009893a5b + '@nanostores/react': 0.1.5_33de46f26c75888291546388c72611d1 '@nanostores/vue': 0.4.1_nanostores@0.5.12+vue@3.2.31 nanostores: 0.5.12 preact: 10.6.6 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 solid-nanostores: 0.0.6 vue: 3.2.31 devDependencies: @@ -1011,15 +1011,15 @@ importers: '@astrojs/react': workspace:* '@astrojs/vue': workspace:* astro: workspace:* - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 vue: ^3.2.31 dependencies: '@astrojs/react': link:../../../../integrations/react '@astrojs/vue': link:../../../../integrations/vue astro: link:../../.. - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 vue: 3.2.31 packages/astro/test/fixtures/remote-css: @@ -1286,8 +1286,8 @@ importers: '@types/react-dom': ^17.0.14 astro: workspace:* astro-scripts: workspace:* - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 dependencies: '@babel/plugin-transform-react-jsx': 7.17.3 devDependencies: @@ -1295,8 +1295,8 @@ importers: '@types/react-dom': 17.0.14 astro: link:../../astro astro-scripts: link:../../../scripts - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 packages/integrations/sitemap: specifiers: @@ -1458,12 +1458,12 @@ importers: packages/renderers/renderer-react: specifiers: '@babel/plugin-transform-react-jsx': ^7.17.3 - react: ^17.0.2 - react-dom: ^17.0.2 + react: ^18.0.0 + react-dom: ^18.0.0 dependencies: '@babel/plugin-transform-react-jsx': 7.17.3 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 packages/renderers/renderer-solid: specifiers: @@ -3301,7 +3301,7 @@ packages: resolution: {integrity: sha512-1kkV7tkAsiuEd0shunYRByKJe3xQDG2q7wYg24SOw1nV9/2lwEd4WrUYRJC/ukGTl2/kHeFxsaUvtiOy0y6fFA==} dev: false - /@docsearch/react/3.0.0_73997327e0ab5ab2aaf50785071cd6bd: + /@docsearch/react/3.0.0_9e0989ed96c3582fc46f3bba1f5ac769: resolution: {integrity: sha512-yhMacqS6TVQYoBh/o603zszIb5Bl8MIXuOc6Vy617I74pirisDzzcNh0NEaYQt50fVVR3khUbeEhUEWEWipESg==} peerDependencies: '@types/react': '>= 16.8.0 < 18.0.0' @@ -3313,8 +3313,8 @@ packages: '@docsearch/css': 3.0.0 '@types/react': 17.0.43 algoliasearch: 4.13.0 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 transitivePeerDependencies: - '@algolia/client-search' dev: false @@ -3466,7 +3466,7 @@ packages: preact: 10.6.6 dev: false - /@nanostores/react/0.1.5_f66e5a41ef8212ca2b6be35009893a5b: + /@nanostores/react/0.1.5_33de46f26c75888291546388c72611d1: resolution: {integrity: sha512-1XEsszpCDcxNeX21QJ+4mFROdn45ulahJ9oLJEo0IA2HZPkwfjSzG+iSXImqFU5nzo0earvlD09z4C9olf8Sxw==} engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} peerDependencies: @@ -3475,8 +3475,8 @@ packages: react-dom: '>=16.8.0' dependencies: nanostores: 0.5.12 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 + react: 18.0.0 + react-dom: 18.0.0_react@18.0.0 dev: false /@nanostores/vue/0.4.1_nanostores@0.5.12+vue@3.2.31: @@ -8278,6 +8278,7 @@ packages: /object-assign/4.1.1: resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=} engines: {node: '>=0.10.0'} + dev: true /object-hash/2.2.0: resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==} @@ -8797,22 +8798,20 @@ packages: strip-json-comments: 2.0.1 dev: true - /react-dom/17.0.2_react@17.0.2: - resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} + /react-dom/18.0.0_react@18.0.0: + resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==} peerDependencies: - react: 17.0.2 + react: ^18.0.0 dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 - react: 17.0.2 - scheduler: 0.20.2 + react: 18.0.0 + scheduler: 0.21.0 - /react/17.0.2: - resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} + /react/18.0.0: + resolution: {integrity: sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==} engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 /read-pkg-up/7.0.1: resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==} @@ -9205,11 +9204,10 @@ packages: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} dev: false - /scheduler/0.20.2: - resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==} + /scheduler/0.21.0: + resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==} dependencies: loose-envify: 1.4.0 - object-assign: 4.1.1 /section-matter/1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}