Add support for React 18 in @astrojs/react (#2947)

* 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 5279b72.

* 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 <[email protected]>

.changeset/ninety-jars-swim.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': minor
+---
+
+Add support for React v18

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"
   }
 }

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
+	);

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
+		)
 	);

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"

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,
+};

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');

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'],
 		},
 	};
 }