@astrojs/react - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

dist/index.d.ts

		import type { AstroIntegration } from 'astro';
		export default function (): AstroIntegration;
		export type ReactIntegrationOptions = {
		experimentalReactChildren: boolean;
		};
		export default function ({ experimentalReactChildren }?: ReactIntegrationOptions): AstroIntegration;

dist/index.js

		@@ -30,4 +30,25 @@ import { version as ReactVersion } from "react-dom";
		}
		function getViteConfiguration() {
		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(experimentalReactChildren) {
		return {
		optimizeDeps: {
		@@ -58,6 +79,7 @@ include: [
		]
		}
		},
		plugins: [optionsPlugin(experimentalReactChildren)]
		};
		}
		function src_default() {
		function src_default({ experimentalReactChildren } = { experimentalReactChildren: false }) {
		return {
		@@ -68,3 +90,3 @@ name: "@astrojs/react",
		addRenderer(getRenderer());
		updateConfig({ vite: getViteConfiguration() });
		updateConfig({ vite: getViteConfiguration(experimentalReactChildren) });
		}
		@@ -71,0 +93,0 @@ }

package.json

		{
		"name": "@astrojs/react",
		"description": "Use React components within Astro",
		"version": "2.2.2",
		"version": "2.3.0",
		"type": "module",
		@@ -43,3 +43,4 @@ "types": "./dist/index.d.ts",
		"@babel/core": "^7.22.5",
		"@babel/plugin-transform-react-jsx": "^7.22.5"
		"@babel/plugin-transform-react-jsx": "^7.22.5",
		"ultrahtml": "^1.2.0"
		},
		@@ -51,3 +52,6 @@ "devDependencies": {
		"react-dom": "^18.1.0",
		"astro": "2.10.8",
		"chai": "^4.3.7",
		"cheerio": "1.0.0-rc.12",
		"vite": "^4.4.6",
		"astro": "2.10.10",
		"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