summaryrefslogtreecommitdiff
path: root/packages/integrations/react
diff options
context:
space:
mode:
authorGravatar Arsh <69170106+lilnasy@users.noreply.github.com> 2023-11-21 17:19:43 +0000
committerGravatar GitHub <noreply@github.com> 2023-11-21 22:49:43 +0530
commitaf43fb51726fa2242cec03cb019fa4fa4a4403ef (patch)
tree2585b5ede16fd498e51fa81ef3e86ff7024ae896 /packages/integrations/react
parentd9e72cea399c1426311faa2ac93ce66c89b5e7ac (diff)
downloadastro-af43fb51726fa2242cec03cb019fa4fa4a4403ef.tar.gz
astro-af43fb51726fa2242cec03cb019fa4fa4a4403ef.tar.zst
astro-af43fb51726fa2242cec03cb019fa4fa4a4403ef.zip
fix(react): make children `undefined` with `experimentalReactChildren` (#9141)
* add test script * make children `undefined` with self-closing tags * add changeset * refactor: simplify
Diffstat (limited to 'packages/integrations/react')
-rw-r--r--packages/integrations/react/package.json6
-rw-r--r--packages/integrations/react/test/parsed-react-children.test.js15
-rw-r--r--packages/integrations/react/vnode-children.js16
3 files changed, 25 insertions, 12 deletions
diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json
index 49d357a94..100ac3baa 100644
--- a/packages/integrations/react/package.json
+++ b/packages/integrations/react/package.json
@@ -42,7 +42,8 @@
"scripts": {
"build": "astro-scripts build \"src/**/*.ts\" && tsc",
"build:ci": "astro-scripts build \"src/**/*.ts\"",
- "dev": "astro-scripts dev \"src/**/*.ts\""
+ "dev": "astro-scripts dev \"src/**/*.ts\"",
+ "test": "mocha --exit --timeout 20000"
},
"dependencies": {
"@vitejs/plugin-react": "^4.0.4",
@@ -57,7 +58,8 @@
"cheerio": "1.0.0-rc.12",
"react": "^18.1.0",
"react-dom": "^18.1.0",
- "vite": "^4.4.9"
+ "vite": "^4.4.9",
+ "mocha": "^10.2.0"
},
"peerDependencies": {
"@types/react": "^17.0.50 || ^18.0.21",
diff --git a/packages/integrations/react/test/parsed-react-children.test.js b/packages/integrations/react/test/parsed-react-children.test.js
new file mode 100644
index 000000000..876897c95
--- /dev/null
+++ b/packages/integrations/react/test/parsed-react-children.test.js
@@ -0,0 +1,15 @@
+import { expect } from 'chai';
+import convert from "../vnode-children.js";
+
+describe('experimental react children', () => {
+ it('has undefined as children for direct children', () => {
+ const [ imgVNode ] = convert('<img src="abc"></img>');
+ expect(imgVNode.props).to.deep.include({ children: undefined });
+ })
+
+ it('has undefined as children for nested children', () => {
+ const [ divVNode ] = convert('<div><img src="xyz"></img></div>');
+ const [ imgVNode ] = divVNode.props.children;
+ expect(imgVNode.props).to.deep.include({ children: undefined });
+ })
+})
diff --git a/packages/integrations/react/vnode-children.js b/packages/integrations/react/vnode-children.js
index cc8ec3510..5fd421e67 100644
--- a/packages/integrations/react/vnode-children.js
+++ b/packages/integrations/react/vnode-children.js
@@ -8,17 +8,10 @@ export default function convert(children) {
let key = 0;
function createReactElementFromNode(node) {
- const childVnodes = Array.isArray(node.children)
+ const childVnodes = Array.isArray(node.children) && node.children.length
? 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)
+ .map((child) => createReactElementFromNode(child))
+ .filter(Boolean)
: undefined;
if (node.type === DOCUMENT_NODE) {
@@ -26,6 +19,9 @@ export default function convert(children) {
} else if (node.type === ELEMENT_NODE) {
const { class: className, ...props } = node.attributes;
return createElement(node.name, { ...props, className, key: `${id}-${key++}` }, childVnodes);
+ } else if (node.type === TEXT_NODE) {
+ // 0-length text gets omitted in JSX
+ return node.value.trim() ? node.value : undefined;
}
}