@astrojs/react - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

client.js

@@ -13,2 +13,41 @@ import { createElement, startTransition } from 'react';
 
+function createReactElementFromDOMElement(element) {
+	let attrs = {};
+	for (const attr of element.attributes) {
+		attrs[attr.name] = attr.value;
+	}
+
+	return createElement(
+		element.localName,
+		attrs,
+		Array.from(element.childNodes)
+			.map((c) => {
+				if (c.nodeType === Node.TEXT_NODE) {
+					return c.data;
+				} else if (c.nodeType === Node.ELEMENT_NODE) {
+					return createReactElementFromDOMElement(c);
+				} else {
+					return undefined;
+				}
+			})
+			.filter((a) => !!a)
+	);
+}
+
+function getChildren(childString, experimentalReactChildren) {
+	if (experimentalReactChildren && childString) {
+		let children = [];
+		let template = document.createElement('template');
+		template.innerHTML = childString;
+		for (let child of template.content.children) {
+			children.push(createReactElementFromDOMElement(child));
+		}
+		return children;
+	} else if (childString) {
+		return createElement(StaticHtml, { value: childString });
+	} else {
+		return undefined;
+	}
+}
+
 export default (element) =>
@@ -23,6 +62,7 @@ (Component, props, { default: children, ...slotted }, { client }) => {
 		}
+
 		const componentEl = createElement(
 			Component,
 			props,
-			children != null ? createElement(StaticHtml, { value: children }) : children
+			getChildren(children, element.hasAttribute('data-react-children'))
 		);
@@ -29,0 +69,0 @@ const rootKey = isAlreadyHydrated(element);

package.json

 {
   "name": "@astrojs/react",
   "description": "Use React components within Astro",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
@@ -54,3 +54,3 @@ "types": "./dist/index.d.ts",
     "vite": "^4.4.9",
-    "astro": "3.2.3",
+    "astro": "3.3.4",
     "astro-scripts": "0.0.14"
@@ -57,0 +57,0 @@ },

server.js

@@ -90,2 +90,3 @@ import React from 'react';
 	if (children && opts.experimentalReactChildren) {
+		attrs['data-react-children'] = true;
 		const convert = await import('./vnode-children.js').then((mod) => mod.default);
@@ -92,0 +93,0 @@ newProps.children = convert(children);

vnode-children.js

@@ -1,2 +0,2 @@
-import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml';
+import { parse, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml';
 import { createElement, Fragment } from 'react';
@@ -6,31 +6,30 @@
 export default function convert(children) {
-	const nodeMap = new WeakMap();
 	let doc = parse(children.toString().trim());
 	let id = ids++;
 	let key = 0;
-	let root = createElement(Fragment, { children: [] });
 
-	walkSync(doc, (node, parent, index) => {
-		let newNode = {};
+	function createReactElementFromNode(node) {
+		const childVnodes = Array.isArray(node.children)
+			? node.children
+					.map((child) => {
+						if (child.type === ELEMENT_NODE) {
+							return createReactElementFromNode(child);
+						} else if (child.type === TEXT_NODE) {
+							// 0-length text gets omitted in JSX
+							return child.value.trim() ? child.value : undefined;
+						}
+					})
+					.filter((n) => !!n)
+			: undefined;
+
 		if (node.type === DOCUMENT_NODE) {
-			nodeMap.set(node, root);
+			return createElement(Fragment, {}, childVnodes);
 		} else if (node.type === ELEMENT_NODE) {
 			const { class: className, ...props } = node.attributes;
-			// NOTE: do not manually pass `children`, React handles this internally
-			newNode = createElement(node.name, { ...props, className, key: `${id}-${key++}` });
-			nodeMap.set(node, newNode);
-			if (parent) {
-				const newParent = nodeMap.get(parent);
-				newParent.props.children[index] = newNode;
-			}
-		} else if (node.type === TEXT_NODE) {
-			newNode = node.value;
-			if (newNode.trim() && parent) {
-				const newParent = nodeMap.get(parent);
-				newParent.props.children[index] = newNode;
-			}
+			return createElement(node.name, { ...props, className, key: `${id}-${key++}` }, childVnodes);
 		}
-	});
+	}
 
+	const root = createReactElementFromNode(doc);
 	return root.props.children;
 }

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

27377

increased by3.55%

Lines of code

540

increased by6.93%

No dependency changes