From 57f48b27019bbad5c8d61808291dc8bc6cdedb52 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Thu, 31 Mar 2022 09:51:29 -0700 Subject: [PATCH] Add support for React 18 in @astrojs/react (#2947) 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 * add changeset * add docs Co-authored-by: delucis --- .changeset/ninety-jars-swim.md | 5 ++ .../fixtures/react-component/package.json | 5 +- packages/integrations/react/client-v17.js | 13 ++++ packages/integrations/react/client.js | 8 +-- packages/integrations/react/package.json | 8 ++- packages/integrations/react/server-v17.js | 67 +++++++++++++++++++ packages/integrations/react/server.js | 2 +- packages/integrations/react/src/index.ts | 17 +++-- pnpm-lock.yaml | 20 ++++-- 9 files changed, 127 insertions(+), 18 deletions(-) create mode 100644 .changeset/ninety-jars-swim.md create mode 100644 packages/integrations/react/client-v17.js create mode 100644 packages/integrations/react/server-v17.js diff --git a/.changeset/ninety-jars-swim.md b/.changeset/ninety-jars-swim.md new file mode 100644 index 000000000..dd7c79c13 --- /dev/null +++ b/.changeset/ninety-jars-swim.md @@ -0,0 +1,5 @@ +--- +'@astrojs/react': minor +--- + +Add support for React v18 diff --git a/packages/astro/test/fixtures/react-component/package.json b/packages/astro/test/fixtures/react-component/package.json index 020549b3f..7ab49d4c0 100644 --- a/packages/astro/test/fixtures/react-component/package.json +++ b/packages/astro/test/fixtures/react-component/package.json @@ -5,6 +5,9 @@ "dependencies": { "@astrojs/react": "workspace:*", "@astrojs/vue": "workspace:*", - "astro": "workspace:*" + "astro": "workspace:*", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "vue": "^3.2.31" } } diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js new file mode 100644 index 000000000..a6bc7d3bc --- /dev/null +++ b/packages/integrations/react/client-v17.js @@ -0,0 +1,13 @@ +import { createElement } from 'react'; +import { hydrate } from 'react-dom'; +import StaticHtml from './static-html.js'; + +export default (element) => (Component, props, children) => + hydrate( + createElement( + Component, + { ...props, suppressHydrationWarning: true }, + children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children + ), + element + ); diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index a6bc7d3bc..11d63cfcb 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -1,13 +1,13 @@ import { createElement } from 'react'; -import { hydrate } from 'react-dom'; +import { hydrateRoot } from 'react-dom/client'; import StaticHtml from './static-html.js'; export default (element) => (Component, props, children) => - hydrate( + hydrateRoot( + element, createElement( Component, { ...props, suppressHydrationWarning: true }, children != null ? createElement(StaticHtml, { value: children, suppressHydrationWarning: true }) : children - ), - element + ) ); diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json index 64c79afe2..b1a2be46d 100644 --- a/packages/integrations/react/package.json +++ b/packages/integrations/react/package.json @@ -21,7 +21,9 @@ "exports": { ".": "./dist/index.js", "./client.js": "./client.js", + "./client-v17.js": "./client-v17.js", "./server.js": "./server.js", + "./server-v17.js": "./server-v17.js", "./package.json": "./package.json", "./jsx-runtime": "./jsx-runtime.js" }, @@ -34,14 +36,16 @@ "@babel/plugin-transform-react-jsx": "^7.17.3" }, "devDependencies": { + "@types/react": "^17.0.43", + "@types/react-dom": "^17.0.14", "astro": "workspace:*", "astro-scripts": "workspace:*", "react": "^17.0.2", "react-dom": "^17.0.2" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" }, "engines": { "node": "^14.15.0 || >=16.0.0" diff --git a/packages/integrations/react/server-v17.js b/packages/integrations/react/server-v17.js new file mode 100644 index 000000000..1c0c41286 --- /dev/null +++ b/packages/integrations/react/server-v17.js @@ -0,0 +1,67 @@ +import React from 'react'; +import ReactDOM from 'react-dom/server.js'; +import StaticHtml from './static-html.js'; + +const reactTypeof = Symbol.for('react.element'); + +function errorIsComingFromPreactComponent(err) { + return err.message && (err.message.startsWith("Cannot read property '__H'") || err.message.includes("(reading '__H')")); +} + +function check(Component, props, children) { + // Note: there are packages that do some unholy things to create "components". + // Checking the $$typeof property catches most of these patterns. + if (typeof Component === 'object') { + const $$typeof = Component['$$typeof']; + return $$typeof && $$typeof.toString().slice('Symbol('.length).startsWith('react'); + } + if (typeof Component !== 'function') return false; + + if (Component.prototype != null && typeof Component.prototype.render === 'function') { + return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component); + } + + let error = null; + let isReactComponent = false; + function Tester(...args) { + try { + const vnode = Component(...args); + if (vnode && vnode['$$typeof'] === reactTypeof) { + isReactComponent = true; + } + } catch (err) { + if (!errorIsComingFromPreactComponent(err)) { + error = err; + } + } + + return React.createElement('div'); + } + + renderToStaticMarkup(Tester, props, children, {}); + + if (error) { + throw error; + } + return isReactComponent; +} + +function renderToStaticMarkup(Component, props, children, metadata) { + delete props['class']; + const vnode = React.createElement(Component, { + ...props, + children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined, + }); + let html; + if (metadata && metadata.hydrate) { + html = ReactDOM.renderToString(vnode); + } else { + html = ReactDOM.renderToStaticMarkup(vnode); + } + return { html }; +} + +export default { + check, + renderToStaticMarkup, +}; diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js index 1c0c41286..e102b57fe 100644 --- a/packages/integrations/react/server.js +++ b/packages/integrations/react/server.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom/server.js'; +import ReactDOM from 'react-dom/server'; import StaticHtml from './static-html.js'; const reactTypeof = Symbol.for('react.element'); diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts index 128c6406d..2ea2dd5fb 100644 --- a/packages/integrations/react/src/index.ts +++ b/packages/integrations/react/src/index.ts @@ -1,10 +1,11 @@ import { AstroIntegration } from 'astro'; +import { version as ReactVersion } from 'react-dom'; function getRenderer() { return { name: '@astrojs/react', - clientEntrypoint: '@astrojs/react/client.js', - serverEntrypoint: '@astrojs/react/server.js', + clientEntrypoint: ReactVersion.startsWith('18.') ? '@astrojs/react/client.js' : '@astrojs/react/client-v17.js', + serverEntrypoint: ReactVersion.startsWith('18.') ? '@astrojs/react/server.js' : '@astrojs/react/server-v17.js', jsxImportSource: 'react', jsxTransformOptions: async () => { const { @@ -17,7 +18,11 @@ function getRenderer() { {}, { runtime: 'automatic', - importSource: '@astrojs/react', + // This option tells the JSX transform how to construct the "*/jsx-runtime" import. + // In React v17, we had to shim this due to an export map issue in React. + // In React v18, this issue was fixed and we can import "react/jsx-runtime" directly. + // See `./jsx-runtime.js` for more details. + importSource: ReactVersion.startsWith('18.') ? 'react' : '@astrojs/react', } ), ], @@ -29,14 +34,14 @@ function getRenderer() { function getViteConfiguration() { return { optimizeDeps: { - include: ['@astrojs/react/client.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'], - exclude: ['@astrojs/react/server.js'], + 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'], }, resolve: { dedupe: ['react', 'react-dom'], }, ssr: { - external: ['react-dom/server.js'], + external: ReactVersion.startsWith('18.') ? ['react-dom/server', 'react-dom/client'] : ['react-dom/server.js', 'react-dom/client.js'], }, }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6fe40282..99da4e7df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1011,10 +1011,16 @@ importers: '@astrojs/react': workspace:* '@astrojs/vue': workspace:* astro: workspace:* + react: ^17.0.2 + react-dom: ^17.0.2 + 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 + vue: 3.2.31 packages/astro/test/fixtures/remote-css: specifiers: @@ -1276,6 +1282,8 @@ importers: packages/integrations/react: specifiers: '@babel/plugin-transform-react-jsx': ^7.17.3 + '@types/react': ^17.0.43 + '@types/react-dom': ^17.0.14 astro: workspace:* astro-scripts: workspace:* react: ^17.0.2 @@ -1283,6 +1291,8 @@ importers: dependencies: '@babel/plugin-transform-react-jsx': 7.17.3 devDependencies: + '@types/react': 17.0.43 + '@types/react-dom': 17.0.14 astro: link:../../astro astro-scripts: link:../../../scripts react: 17.0.2 @@ -4009,19 +4019,23 @@ packages: /@types/prop-types/15.7.4: resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==} - dev: false /@types/pug/2.0.6: resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==} dev: false + /@types/react-dom/17.0.14: + resolution: {integrity: sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==} + dependencies: + '@types/react': 17.0.43 + dev: true + /@types/react/17.0.43: resolution: {integrity: sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.11 - dev: false /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} @@ -4053,7 +4067,6 @@ packages: /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: false /@types/semver/6.2.3: resolution: {integrity: sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==} @@ -5236,7 +5249,6 @@ packages: /csstype/3.0.11: resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==} - dev: false /csv-generate/3.4.3: resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}