@astrojs/react - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0-beta.3

client.js

@@ -34,3 +34,3 @@ import { createElement, startTransition } from 'react';
 			return startTransition(() => {
-				createRoot(element, renderOptions).render(componentEl);
+				createRoot(element).render(componentEl);
 			});
@@ -37,0 +37,0 @@ }

dist/index.d.ts

 import type { AstroIntegration } from 'astro';
 import { type Options as ViteReactPluginOptions } from '@vitejs/plugin-react';
-export type Options = Pick<ViteReactPluginOptions, 'include' | 'exclude'>;
-export default function ({ include, exclude, }?: Pick<ViteReactPluginOptions, 'include' | 'exclude'>): AstroIntegration;
+export type ReactIntegrationOptions = Pick<ViteReactPluginOptions, 'include' | 'exclude'> & {
+    experimentalReactChildren?: boolean;
+};
+export default function ({ include, exclude, experimentalReactChildren, }?: ReactIntegrationOptions): AstroIntegration;

dist/index.js

@@ -12,4 +12,29 @@ import { version as ReactVersion } from "react-dom";
 }
-function getViteConfiguration({ include, exclude } = {}) {
+function optionsPlugin(experimentalReactChildren) {
+  const virtualModule = "astro:react:opts";
+  const virtualModuleId = "\0" + virtualModule;
   return {
+    name: "@astrojs/react:opts",
+    resolveId(id) {
+      if (id === virtualModule) {
+        return virtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === virtualModuleId) {
+        return {
+          code: `export default {
+						experimentalReactChildren: ${JSON.stringify(experimentalReactChildren)}
+					}`
+        };
+      }
+    }
+  };
+}
+function getViteConfiguration({
+  include,
+  exclude,
+  experimentalReactChildren
+} = {}) {
+  return {
     optimizeDeps: {
@@ -27,3 +52,3 @@ include: [
     },
-    plugins: [react({ include, exclude })],
+    plugins: [react({ include, exclude }), optionsPlugin(!!experimentalReactChildren)],
     resolve: {
@@ -47,3 +72,4 @@ dedupe: ["react", "react-dom", "react-dom/server"]
   include,
-  exclude
+  exclude,
+  experimentalReactChildren
 } = {}) {
@@ -55,3 +81,5 @@ return {
         addRenderer(getRenderer());
-        updateConfig({ vite: getViteConfiguration({ include, exclude }) });
+        updateConfig({
+          vite: getViteConfiguration({ include, exclude, experimentalReactChildren })
+        });
         if (command === "dev") {
@@ -58,0 +86,0 @@ const preamble = FAST_REFRESH_PREAMBLE.replace(

package.json

 {
   "name": "@astrojs/react",
   "description": "Use React components within Astro",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "type": "module",
@@ -43,3 +43,4 @@ "types": "./dist/index.d.ts",
     "@astrojs/internal-helpers": "0.2.0-beta.1",
-    "@vitejs/plugin-react": "^4.0.3"
+    "@vitejs/plugin-react": "^4.0.3",
+    "ultrahtml": "^1.2.0"
   },
@@ -51,3 +52,6 @@ "devDependencies": {
     "react-dom": "^18.1.0",
-    "astro": "3.0.0-beta.2",
+    "chai": "^4.3.7",
+    "cheerio": "1.0.0-rc.12",
+    "vite": "^4.4.6",
+    "astro": "3.0.0-beta.3",
     "astro-scripts": "0.0.14"
@@ -54,0 +58,0 @@ },

README.md

@@ -64,2 +64,42 @@ # @astrojs/react ⚛️
 
+## Options
+
+### Children parsing
+
+Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.
+
+For example, the `<ReactComponent />` below will only receive a single child element:
+
+```astro
+---
+import ReactComponent from './ReactComponent';
+---
+
+<ReactComponent>
+  <div>one</div>
+  <div>two</div>
+</ReactComponent>
+```
+
+If you are using a library that _expects_ more than one child element element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
+
+You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility.
+
+You can enable this option in the configuration for the React integration:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+export default defineConfig({
+  // ...
+  integrations: [
+    react({
+      experimentalReactChildren: true,
+    }),
+  ],
+});
+```
+
 ## Troubleshooting
@@ -66,0 +106,0 @@

server.js

@@ -5,2 +5,3 @@ import React from 'react';
 import { incrementId } from './context.js';
+import opts from 'astro:react:opts';
 
@@ -89,3 +90,6 @@ const slotName = (str) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 	const newChildren = children ?? props.children;
-	if (newChildren != null) {
+	if (children && opts.experimentalReactChildren) {
+		const convert = await import('./vnode-children.js').then((mod) => mod.default);
+		newProps.children = convert(children);
+	} else if (newChildren != null) {
 		newProps.children = React.createElement(StaticHtml, {
@@ -92,0 +96,0 @@ hydrate: needsHydration(metadata),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23587

increased by9.82%

Lines of code

470

increased by7.8%

Number of lines in readme file

116

increased by52.63%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

9

increased by50%

Dependency changes

• + Addedultrahtml@^1.2.0

• + Addedultrahtml@1.5.3(transitive)