diff options
Diffstat (limited to 'packages/integrations/react')
| -rw-r--r-- | packages/integrations/react/CHANGELOG.md | 6 | ||||
| -rw-r--r-- | packages/integrations/react/package.json | 8 | ||||
| -rw-r--r-- | packages/integrations/react/test/parsed-react-children.test.js | 15 | ||||
| -rw-r--r-- | packages/integrations/react/vnode-children.js | 19 |
4 files changed, 33 insertions, 15 deletions
diff --git a/packages/integrations/react/CHANGELOG.md b/packages/integrations/react/CHANGELOG.md index 5b127b753..46d3a2512 100644 --- a/packages/integrations/react/CHANGELOG.md +++ b/packages/integrations/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @astrojs/react +## 3.0.6 + +### Patch Changes + +- [#9141](https://github.com/withastro/astro/pull/9141) [`af43fb517`](https://github.com/withastro/astro/commit/af43fb51726fa2242cec03cb019fa4fa4a4403ef) Thanks [@lilnasy](https://github.com/lilnasy)! - Fixes an issue where slotting self-closing elements (img, br, hr) into react components with `experimentalReactChildren` enabled led to an error. + ## 3.0.5 ### Patch Changes diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json index 911acc34a..482dfccf9 100644 --- a/packages/integrations/react/package.json +++ b/packages/integrations/react/package.json @@ -1,7 +1,7 @@ { "name": "@astrojs/react", "description": "Use React components within Astro", - "version": "3.0.5", + "version": "3.0.6", "type": "module", "types": "./dist/index.d.ts", "author": "withastro", @@ -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.2.0", @@ -57,7 +58,8 @@ "cheerio": "1.0.0-rc.12", "react": "^18.1.0", "react-dom": "^18.1.0", - "vite": "^5.0.0" + "vite": "^5.0.0", + "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..1c845836f --- /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..0b26ef423 100644 --- a/packages/integrations/react/vnode-children.js +++ b/packages/integrations/react/vnode-children.js @@ -8,24 +8,19 @@ export default function convert(children) { let key = 0; 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; + const childVnodes = + Array.isArray(node.children) && node.children.length + ? node.children.map((child) => createReactElementFromNode(child)).filter(Boolean) + : undefined; if (node.type === DOCUMENT_NODE) { return createElement(Fragment, {}, childVnodes); } 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; } } |