diff options
| -rw-r--r-- | .changeset/cool-jokes-unite.md | 5 | ||||
| -rw-r--r-- | packages/integrations/react/vnode-children.js | 20 |
2 files changed, 14 insertions, 11 deletions
diff --git a/.changeset/cool-jokes-unite.md b/.changeset/cool-jokes-unite.md new file mode 100644 index 000000000..57f0bedaf --- /dev/null +++ b/.changeset/cool-jokes-unite.md @@ -0,0 +1,5 @@ +--- +'@astrojs/react': patch +--- + +Update `experimentalReactChildren` behavior to support void tags diff --git a/packages/integrations/react/vnode-children.js b/packages/integrations/react/vnode-children.js index 9c7abe644..ea5bc0869 100644 --- a/packages/integrations/react/vnode-children.js +++ b/packages/integrations/react/vnode-children.js @@ -1,9 +1,12 @@ import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'; import { createElement, Fragment } from 'react'; +let ids = 0; 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) => { @@ -12,23 +15,18 @@ export default function convert(children) { nodeMap.set(node, root); } else if (node.type === ELEMENT_NODE) { const { class: className, ...props } = node.attributes; - newNode = createElement(node.name, { ...props, className, children: [] }); + // 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.trim(); - if (newNode.trim()) { - if (parent) { - const newParent = nodeMap.get(parent); - if (parent.children.length === 1) { - newParent.props.children[0] = newNode; - } else { - newParent.props.children[index] = newNode; - } - } + newNode = node.value; + if (newNode.trim() && parent) { + const newParent = nodeMap.get(parent); + newParent.props.children[index] = newNode; } } }); |