diff options
author | 2023-11-21 17:19:43 +0000 | |
---|---|---|
committer | 2023-11-21 22:49:43 +0530 | |
commit | af43fb51726fa2242cec03cb019fa4fa4a4403ef (patch) | |
tree | 2585b5ede16fd498e51fa81ef3e86ff7024ae896 /packages/integrations/react | |
parent | d9e72cea399c1426311faa2ac93ce66c89b5e7ac (diff) | |
download | astro-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.json | 6 | ||||
-rw-r--r-- | packages/integrations/react/test/parsed-react-children.test.js | 15 | ||||
-rw-r--r-- | packages/integrations/react/vnode-children.js | 16 |
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; } } |