@sitecore-feaas/clientside 0.3.7 → 0.3.9

package/src/ui/FEAASExternal.tsx

@@ -82,14 +82,12 @@ export const parseProps = (propName: string, propValue: string, properties: JSON
   }
 }
 
-export function FEAASExternalProps(element: FEAASElement) {
-  const attributes = element.getAttributeNames()
+export function FEAASExternalProps(element: FEAASElement): any {
   const id = element.getAttribute('data-external-id')
   const schema: JSONSchema = FEAASExternal.registered[id]?.schema
-  const props = attributes.reduce((prev, curr) => {
-    if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
-      const value = element.getAttribute(curr)
-      return { ...prev, [reverseKebabCase(curr)]: parseProps(reverseKebabCase(curr), value, schema?.properties) }
+  const props = Array.from(element.attributes).reduce((prev, { name, value }) => {
+    if (!name.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(name)) {
+      return { ...prev, [reverseKebabCase(name)]: parseProps(reverseKebabCase(name), value, schema?.properties) }
     } else {
       return prev
     }
@@ -109,10 +107,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

@@ -1,5 +1,6 @@
 import {
   FEAASComponentProps,
+  FEAASElement,
   fetchComponent,
   getComponentURL,
   getStylesheetURL,
@@ -9,7 +10,7 @@ import React from 'react'
 import { renderHTMLContent, HTMLNode, parseHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
 export { renderHTMLContent }
-import { getComponent } from './FEAASExternal.js'
+import { FEAASExternalProps, getComponent } from './FEAASExternal.js'
 export { External, linkComponents, registerComponent, getComponent } from './FEAASExternal.js'
 export * from './index.js'
 export * from '../headless.js'
@@ -40,12 +41,17 @@ 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'))) {
+            const { dataExternalId, ...props } = FEAASExternalProps(node as any)
+            return [FEAASReactExternal, props]
+          }
+        },
+        index
+      )
     )
   }
 
@@ -63,7 +69,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 +81,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 +92,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 +108,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)
 }