diff options
| -rw-r--r-- | packages/integrations/react/client.js | 37 | ||||
| -rw-r--r-- | packages/integrations/react/vnode-children.js | 26 |
2 files changed, 35 insertions, 28 deletions
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index 73f43aa94..cef488c83 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -12,38 +12,41 @@ function isAlreadyHydrated(element) { function createReactElementFromDOMElement(element) { let attrs = {}; - for(const attr of element.attributes) { + 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) + 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) { + if (experimentalReactChildren && childString) { let children = []; let template = document.createElement('template'); template.innerHTML = childString; - for(let child of template.content.children) { - children.push(createReactElementFromDOMElement(child)) + for (let child of template.content.children) { + children.push(createReactElementFromDOMElement(child)); } return children; - } else if(childString) { + } else if (childString) { return createElement(StaticHtml, { value: childString }); } else { return undefined; } - } export default (element) => @@ -55,7 +58,7 @@ export default (element) => for (const [key, value] of Object.entries(slotted)) { props[key] = createElement(StaticHtml, { value, name: key }); } - + const componentEl = createElement( Component, props, diff --git a/packages/integrations/react/vnode-children.js b/packages/integrations/react/vnode-children.js index 57a7fb66f..cc8ec3510 100644 --- a/packages/integrations/react/vnode-children.js +++ b/packages/integrations/react/vnode-children.js @@ -8,18 +8,22 @@ 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; - - if(node.type === DOCUMENT_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) { return createElement(Fragment, {}, childVnodes); - } else if(node.type === ELEMENT_NODE) { + } else if (node.type === ELEMENT_NODE) { const { class: className, ...props } = node.attributes; return createElement(node.name, { ...props, className, key: `${id}-${key++}` }, childVnodes); } |