@sitecore-feaas/clientside 0.3.7 → 0.3.8

package/src/ui/FEAASExternal.tsx

@@ -109,10 +109,19 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     return Promise.resolve({ React, ReactDOM })
   }
 
+  update() {
+    const { dataExternalId: id } = this.props
+    const Component = FEAASExternal.registered[id]?.component
+    if (!Component && this.childNodes.length > 0) return
+    return super.update()
+  }
+
   render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX {
     const { dataExternalId: id } = props
     const Component = FEAASExternal.registered[id]?.component
-    if (!Component) console.warn('FEAASExternal: The component you requested is not registered')
+    if (!Component) {
+      console.warn('FEAASExternal: The component you requested is not registered')
+    }
     return <>{Component && <Component {...props} />}</>
   }
 

package/src/ui/react.tsx

@@ -40,12 +40,16 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
   let children: null | React.ReactNode
 
   if ('template' in props && props.template) {
-    children = parseHTMLContent(props.template, data || {}).map((node) =>
-      HTMLNodeToReact(node, (node) => {
-        if (node.localName == 'feaas-external' && getComponent(node.getAttribute('data-external-id'))) {
-          return [FEAASReactExternal, {}]
-        }
-      })
+    children = parseHTMLContent(props.template, data || {}).map((node, index) =>
+      HTMLNodeToReact(
+        node,
+        (node) => {
+          if (node.localName == 'feaas-external' && getComponent(node.getAttribute('data-external-id'))) {
+            return [FEAASReactExternal, {}]
+          }
+        },
+        index
+      )
     )
   }
 
@@ -63,7 +67,7 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
       )}
       <feaas-component
         {...props}
-        suppressHydrationWarning={true}
+        suppressHydrationWarning
         template={null}
         data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
       >
@@ -75,9 +79,10 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
 
 export function FEAASReactExternal(props: { 'data-external-id': string }) {
   const Component = getComponent(props['data-external-id'])?.component
+  // execute component as a function to supress hydration errors inside
   return (
-    <feaas-external {...props}>
-      <Component {...props} />
+    <feaas-external {...props} suppressHydrationWarning>
+      {typeof Component == 'function' ? Component({ ...props }) : <Component {...props} />}
     </feaas-external>
   )
 }
@@ -85,12 +90,13 @@ export function FEAASReactExternal(props: { 'data-external-id': string }) {
 /** Turn HTMLNode into React tree. It accepts callback to customize the behavior */
 export function HTMLNodeToReact(
   node: HTMLNode,
-  callback?: (node: HTMLNode) => [tagName: any, attributes: Record<string, any>]
+  callback?: (node: HTMLNode) => [tagName: any, attributes: Record<string, any>],
+  key?: any
 ): React.ReactNode {
   if (node.nodeType === 3) {
     return node.textContent
   }
-  const children = Array.from(node.childNodes).map((child) => HTMLNodeToReact(child, callback))
+  const children = Array.from(node.childNodes).map((child, index) => HTMLNodeToReact(child, callback, index))
 
   const attributes: { [key: string]: string } = {}
   for (let i = 0; i < node.attributes.length; i++) {
@@ -100,7 +106,7 @@ export function HTMLNodeToReact(
 
   const reactNode = callback?.(node)
   const reactName = reactNode?.[0] || node.nodeName.toLowerCase()
-  const reactAttributes = Object.assign(attributes, reactName?.[1] || {})
+  const reactAttributes = Object.assign({ key, suppressHydrationWarning: true }, attributes, reactNode?.[1] || {})
   return React.createElement(reactName, reactAttributes, ['img', 'br', 'input'].includes(reactName) ? null : children)
 }