fix: adapter recognizes react 19 react.transitional.element

.changeset/fast-comics-provide.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Updated the react adapter to also recognize react.transitional.element (renamed from react.element)

packages/integrations/react/package.json

@@ -54,13 +54,13 @@
     "vite": "^6.0.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "cheerio": "1.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.50 || ^18.0.21 || ^19.0.0",

packages/integrations/react/server.js

@@ -5,7 +5,9 @@ import { incrementId } from './context.js';
 import StaticHtml from './static-html.js';
 
 const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
-const reactTypeof = Symbol.for('react.element');
+const reactLegacyTypeof = Symbol.for('react.element');
+const reactTypeof = Symbol.for('react.transitional.element');
+const supportedReactElementTypeofs = new Set([reactLegacyTypeof, reactTypeof]);
 
 async function check(Component, props, children) {
 	// Note: there are packages that do some unholy things to create "components".
@@ -28,7 +30,7 @@ async function check(Component, props, children) {
 	function Tester(...args) {
 		try {
 			const vnode = Component(...args);
-			if (vnode && vnode['$$typeof'] === reactTypeof) {
+			if (vnode && supportedReactElementTypeofs.has(vnode['$$typeof'])) {
 				isReactComponent = true;
 			}
 		} catch {}

packages/integrations/react/test/fixtures/react-18-component/astro.config.mjs

@@ -0,0 +1,13 @@
+import react from '@astrojs/react';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [react({
+		experimentalReactChildren: true,
+	}),	solid({
+		include: ['**/*.solid.jsx'],
+	}), vue()],
+});

packages/integrations/react/test/fixtures/react-18-component/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@test/react-18-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/react": "workspace:*",
+    "@astrojs/solid-js": "workspace:*",
+    "@astrojs/vue": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "solid-js": "^1.9.3",
+    "vue": "^3.5.13"
+  }
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/ArrowFunction.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div id="arrow-fn-component"></div>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/CloneElement.jsx

@@ -0,0 +1,6 @@
+import { cloneElement } from 'react';
+
+const ClonedWithProps = (element) => (props) =>
+  cloneElement(element, props);
+
+export default ClonedWithProps(<div id="cloned">Cloned With Props</div>);

packages/integrations/react/test/fixtures/react-18-component/src/components/ForgotImport.jsx

@@ -0,0 +1,3 @@
+export default function ({}) {
+  return <h2>oops</h2>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/GetSearch.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function GetSearch() {
+  return (<div>{window.location.search}</div>);
+}
+
+export default GetSearch

packages/integrations/react/test/fixtures/react-18-component/src/components/Goodbye.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2 id="vue-h2">Hasta la vista, {{ name }}</h2>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+  },
+};
+</script>

packages/integrations/react/test/fixtures/react-18-component/src/components/Greetings.solid.jsx

@@ -0,0 +1,5 @@
+// Render a solid component to ensure multi-framework setups work when framework type cannot
+// be derived from extension alone.
+export default function ({ name }) {
+  return <h2 id={`solid-${name}`}>Greetings {name}!</h2>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/Hello.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ({ name, unused }) {
+  return <h2 id={`react-${name}`}>Hello {name}!</h2>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/ImportsThrowsAnError.jsx

@@ -0,0 +1,7 @@
+import ThrowsAnError from "./ThrowsAnError";
+
+export default function() {
+	return <>
+		<ThrowsAnError />
+	</>
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/LazyComponent.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const LazyComponent = () => {
+  return (
+    <span id="lazy">inner content</span>
+  );
+};
+
+export default LazyComponent;

packages/integrations/react/test/fixtures/react-18-component/src/components/PragmaComment.jsx

@@ -0,0 +1,5 @@
+/** @jsxImportSource react */
+
+export default function() {
+  return <div className="pragma-comment">Hello world</div>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/PragmaCommentTypeScript.tsx

@@ -0,0 +1,5 @@
+/** @jsxImportSource react */
+
+export default function({}: object) {
+  return <div className="pragma-comment">Hello world</div>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/PropsSpread.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default (props) => {
+  return <div id="component-spread-props">{props.text}</div>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/Pure.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default class StaticComponent extends React.PureComponent {
+
+    render() {
+        return (
+            <div id="pure">
+                <h1>Static component</h1>
+            </div>
+        )
+    }
+
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/Research.jsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export function Research2() {
+  const [value] = React.useState(1)
+
+  return <div id="research">foo bar {value}</div>
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/Suspense.jsx

@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react';
+const LazyComponent = React.lazy(() => import('./LazyComponent.jsx'));
+
+export const ParentComponent = () => {
+  return (
+    <div id="outer">
+      <Suspense>
+        <LazyComponent />
+      </Suspense>
+    </div>
+  );
+};
+
+export default ParentComponent;

packages/integrations/react/test/fixtures/react-18-component/src/components/ThrowsAnError.jsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export default function() {
+	let player = undefined;
+	// This is tested in dev mode, so make it work during the build to prevent
+	// breaking other tests.
+	if(import.meta.env.MODE === 'production') {
+		player = {};
+	}
+	const [] = useState(player.currentTime || null);
+
+	return (
+		<div>Should have thrown</div>
+	)
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/TypeScriptComponent.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function({}) {
+  return <div className="ts-component">Hello world</div>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/WithChildren.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ({ id, children }) {
+	return (
+		<div id={id}>
+			<div className="with-children">{children}</div>
+			<div className="with-children-count">{children.length}</div>
+		</div>
+	);
+}

packages/integrations/react/test/fixtures/react-18-component/src/components/WithId.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function () {
+	const id = React.useId();
+  return <p className='react-use-id' id={id}>{id}</p>;
+}

packages/integrations/react/test/fixtures/react-18-component/src/pages/children.astro

@@ -0,0 +1,18 @@
+---
+import WithChildren from '../components/WithChildren';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<WithChildren id="one">
+			<div>child 1</div><div>child 2</div>
+		</WithChildren>
+
+		<WithChildren id="two" client:load>
+			<div>child 1</div><div>child 2</div>
+		</WithChildren>
+  </body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/pages/error-rendering.astro

@@ -0,0 +1,11 @@
+---
+import ImportsThrowsAnError from '../components/ImportsThrowsAnError';
+---
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+	<ImportsThrowsAnError />
+</body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/pages/index.astro

@@ -0,0 +1,42 @@
+---
+import ArrowFunction from '../components/ArrowFunction.jsx';
+import CloneElement from '../components/CloneElement';
+import Later from '../components/Goodbye.vue';
+import Hello from '../components/Hello.jsx';
+import GreetingsSolid from '../components/Greetings.solid.jsx';
+import PropsSpread from '../components/PropsSpread.jsx';
+import Pure from '../components/Pure.jsx';
+import {Research2} from '../components/Research.jsx';
+import TypeScriptComponent from '../components/TypeScriptComponent';
+import WithChildren from '../components/WithChildren';
+import WithId from '../components/WithId';
+
+const someProps = {
+  text: 'Hello world!',
+};
+---
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <Hello name="static" />
+    <Hello name="load" client:load />
+    <!-- Test island deduplication, i.e. same UID as the component above. -->
+    <Hello name="load" client:load />
+    <!-- Test island deduplication account for non-render affecting props. -->
+    <Hello name="load" unused="" client:load />
+    <Later name="baby" />
+    <ArrowFunction />
+    <PropsSpread {...someProps}/>
+    <Research2 client:idle />
+    <TypeScriptComponent client:load />
+    <Pure />
+		<CloneElement />
+		<WithChildren client:load>test</WithChildren>
+		<WithChildren client:load children="test" />
+		<WithId client:idle />
+		<WithId client:idle />
+    <GreetingsSolid name="sir" client:load />
+  </body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/pages/pragma-comment.astro

@@ -0,0 +1,14 @@
+---
+import PragmaComponent from '../components/PragmaComment.jsx';
+import PragmaComponentTypeScript from '../components/PragmaCommentTypeScript.tsx';
+---
+
+<html>
+<head>
+  <title>React component works with Pragma comment</title>
+</head>
+<body>
+  <PragmaComponent client:load/>
+  <PragmaComponentTypeScript client:load/>
+</body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/pages/suspense.astro

@@ -0,0 +1,17 @@
+---
+import Suspense from '../components/Suspense.jsx';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<div id="client">
+			<Suspense client:load />
+		</div>
+    <div id="server">
+			<Suspense />
+		</div>
+  </body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/skipped-pages/forgot-import.astro

@@ -0,0 +1,12 @@
+---
+import ForgotImport from '../components/ForgotImport.jsx';
+---
+
+<html>
+<head>
+  <title>Here we are</title>
+</head>
+<body>
+  <ForgotImport />
+</body>
+</html>

packages/integrations/react/test/fixtures/react-18-component/src/skipped-pages/window.astro

@@ -0,0 +1,8 @@
+---
+import GetSearch from '../components/GetSearch.jsx';
+---
+<html>
+<body>
+  <GetSearch />
+</body>
+</html>

packages/integrations/react/test/fixtures/react-component/astro.config.mjs

@@ -1,10 +1,13 @@
 import react from '@astrojs/react';
 import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react({
 		experimentalReactChildren: true,
+	}),	solid({
+		include: ['**/*.solid.jsx'],
 	}), vue()],
 });

packages/integrations/react/test/fixtures/react-component/package.json

@@ -4,10 +4,12 @@
   "private": true,
   "dependencies": {
     "@astrojs/react": "workspace:*",
+    "@astrojs/solid-js": "workspace:*",
     "@astrojs/vue": "workspace:*",
     "astro": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "solid-js": "^1.9.3",
     "vue": "^3.5.13"
   }
 }