@sitecore-feaas/clientside 0.3.6 → 0.3.8

package/src/dom/thumbnail.ts

@@ -152,7 +152,8 @@ export async function generate(component: ComponentModel, version?: VersionModel
   if (!sourceVersion || sourceVersion.isViewEmpty()) {
     return null
   }
-  const { stylesheet, datasources } = component.library
+  const { stylesheet } = component.library
+  const { datasources } = component.sdk
   const img = await render(
     sourceVersion.classList,
     stylesheet.getBreakpointForWidth(800, sourceVersion.getBreakpoints()),

package/src/ui/FEAASContext.tsx

@@ -90,12 +90,16 @@ export class FEAASContext extends FEAASElement<FEAASContextProps, typeof FEAASCo
     this.sdk = sdk
   })
 
+  getPortalRoot() {
+    return this.getRoot()
+  }
+
   render(
     { children, library }: React.PropsWithChildren<FEAASContextProps>,
     { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload
   ) {
     const portalProps = {
-      containerRef: { current: this.getRoot() as HTMLElement }
+      containerRef: { current: this.getPortalRoot() as HTMLElement }
     }
     Tooltip.defaultProps = {
       hasArrow: true,

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)
 }
 

package/src/utils/data.ts

@@ -37,13 +37,13 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
       path.replace(/^.*?\./, ''),
       // look up trimmed path in datasource
       //   datasourceId.path
-      path.replace(/^([^.]+).*?\.\$\./, '$1.'),
+      path.replace(/^([^.]+).*?\.\$([\.\[])/, '$1$2'),
       // look up trimmed path in catch all datasource
       //   _.path
-      path.replace(/^.*?\.\$\./, '_.'),
+      path.replace(/^.*?\.\$([\.\[])/, '_$1'),
       // look up trimmed path on root
       // path
-      path.replace(/^.*?\.\$\./, ''),
+      path.replace(/^.*?\.\$([\.\[])/, '$$$1'),
       // for case of top-level object data mapping full path can be replaced to _
       path.replace(/^[^.]+$/, '_')
     ]

package/test/dom.test.ts

@@ -126,6 +126,27 @@ describe('DOM Clientside', function () {
         '<div><img data-path-src="context.test.$.image" src="a.jpg" /></div>'
       )
     })
+    it('should fall back to trimmed array path', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        { context: [{ image: 'a.jpg' }, { image: 'b.jpg' }] },
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
+    it('should fall back to global path when using trimmed array', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        [{ image: 'a.jpg' }, { image: 'b.jpg' }],
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
+    it('should fall back to catch all path when using trimmed array', function () {
+      assertRenderedHTML(
+        `<div><img data-path-src="context.test.$[1:2].image" /></div>`,
+        { _: [{ image: 'a.jpg' }, { image: 'b.jpg' }] },
+        '<div><img data-path-src="context.test.$[1:2].image" src="b.jpg" /></div>'
+      )
+    })
     it('should fall back to catch all datasource only if path matches', function () {
       assertRenderedHTML(
         `<div><img data-path-src="context.image" /></div>`,

package/types/dom/thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAInF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,6BAkB/E;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}
+{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAInF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,6BAmB/E;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}