@sitecore-feaas/clientside 0.3.10 → 0.3.11-alpha.1

package/src/components/FEAASComponent.tsx

@@ -265,6 +265,7 @@ declare global {
         children?: any
         dangerouslySetInnerHTML?: { __html: string }
         'last-modified'?: string
+        hydrate?: 'false' | 'true'
         'with-stylesheet'?: 'false' | 'true' | ''
       } & (
         | {

package/src/components/FEAASElement.tsx

@@ -145,17 +145,21 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     if (typeof process != 'undefined' && process.env.TESTING) return
     const format = args[0]
 
-    console.log(
-      format +
-        ' ' +
-        args
-          .slice(1)
-          .map((arg: any) => {
-            return arg && typeof arg == 'object' ? '%O' : '%s'
-          })
-          .join(' '),
-      ...args.slice(1)
+    if (
+      (typeof location != 'undefined' && location?.hostname.startsWith('components-')) ||
+      localStorage['Sitecore.Components.Debug']
     )
+      console.log(
+        format +
+          ' ' +
+          args
+            .slice(1)
+            .map((arg: any) => {
+              return arg && typeof arg == 'object' ? '%O' : '%s'
+            })
+            .join(' '),
+        ...args.slice(1)
+      )
   }
 
   /** Nothing special happens on unmount, except setting a flag */
@@ -325,6 +329,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     const { React, ReactDOM, ReactDOMClient } = (this.payload as ReactPayload) || {}
     if (!React) throw new Error(`${this.tagName}: React is not present in payload`)
     if (!ReactDOM) throw new Error(`${this.tagName}: ReactDOM is not present in payload`)
+    if (this.getAttribute('hydrate') == 'false') return
     if (!this.refs.topReact && !this.forceUpdateReact) {
       if (ReactDOMClient) {
         this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())

package/src/dom/rendering.ts

@@ -84,14 +84,11 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
     value = config?.processValue(element, attribute, value)
   }
   var prop = attribute.replace('data-path-', '')
-  if (attribute == 'data-path-src') {
+  if (attribute == 'data-path-src' || attribute == 'data-path-alt') {
     const picture = Array.from(element.children).find((n) => n.localName == 'picture') || element
     target = element.localName == 'img' ? element : <HTMLElement>picture.querySelector('img, video')
   } else if (attribute == 'data-path-href') {
     target = element.querySelector('a') || element.closest('a')
-  } else if (attribute == 'data-path-alt') {
-    const picture = Array.from(element.children).find((n) => n.localName == 'picture') || element
-    target = picture.querySelector('img, picture')
   } else if (attribute == 'data-path-hidden') {
     value = !value ? true : null
   } else if (attribute == 'data-path' || attribute == 'data-embed-html' || attribute == 'html') {
@@ -121,13 +118,22 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   if (typeof value == 'boolean') {
     value = value ? '' : null
   }
-  if (!target) return
 
-  var placeholder = String(
-    (element.getAttribute('data-path-placeholder') || target[prop as keyof HTMLElement]) ?? target.getAttribute(prop)
-  )
+  if (!target) return
 
-  if (value != null) {
+  const usePlaceholder = prop == 'innerHTML' || prop == 'src'
+  if (usePlaceholder && (value == null || value === '')) {
+    var placeholder = String(
+      (element.getAttribute('data-path-placeholder') || target[prop as keyof HTMLElement]) ?? target.getAttribute(prop)
+    )
+    if (prop == 'innerHTML') {
+      target.innerHTML = placeholder
+    } else if (placeholder) {
+      target.setAttribute(prop, placeholder)
+    } else {
+      target.removeAttribute(prop)
+    }
+  } else if (value != null) {
     if (prop == 'innerHTML') {
       var str = String(value)
       // sanitize html of structural text elements
@@ -154,11 +160,7 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
       }
     }
   } else {
-    if (prop == 'innerHTML') {
-      target.innerHTML = placeholder
-    } else {
-      target.removeAttribute(prop)
-    }
+    target.removeAttribute(prop)
   }
 }
 

package/src/ui/FEAASExternal.tsx

@@ -22,7 +22,7 @@ const addTitles = (properties: { [key: string]: any }) =>
   }, {})
 
 /** Converts the keys of an object to kebab case. */
-const objectKeysToKebabCase = (object: { [key: string]: any } = {}) =>
+export const objectKeysToKebabCase = (object: { [key: string]: any } = {}) =>
   Object.keys(object).reduce((acc: { [key: string]: any }, key) => {
     acc[kebabCase(key)] = object[key]
     return acc
@@ -61,38 +61,52 @@ const transformUiSchema = (uiSchema: UISchema, properties: { [key: string]: any
 
   return transformed
 }
+
 /** Parses a property value based on its property name and type defined in the JSON properties object. */
-export const parseProps = (propName: string, propValue: string, properties: JSONSchema['properties']) => {
-  //@ts-ignore
+export const parseProps = (propName: string, value: string, properties: JSONSchema['properties']) => {
   switch (properties?.[propName]?.type) {
     case 'string':
-      return propValue
+      return value
     case 'object':
-      return JSON.parse(propValue)
+      try {
+        return typeof value == 'object' && value != null ? value : JSON.parse(value)
+      } catch (e) {
+        return null
+      }
     case 'array':
-      return JSON.parse(propValue)
+      try {
+        return Array.isArray(value) ? value : JSON.parse(value)
+      } catch (e) {
+        return null
+      }
     case 'number':
-      return +propValue
+      return parseFloat(value)
     case 'integer':
-      return +propValue
+      return parseInt(value)
     case 'boolean':
-      return propValue === 'true'
+      return value == 'true' || value == '1'
     default:
-      return propValue
+      return value
   }
 }
 
 export function FEAASExternalProps(element: FEAASElement): any {
-  const id = element.getAttribute('data-external-id')
-  const schema: JSONSchema = FEAASExternal.registered[id]?.schema
   const props = Array.from(element.attributes).reduce((prev, { name, value }) => {
+    return Object.assign(prev, { [name]: value })
+  }, {} as any)
+  return FEAASExternalPropsObject(props['data-external-id'], props)
+}
+
+export function FEAASExternalPropsObject(id: string, props: Record<string, string>): any {
+  const schema: JSONSchema = FEAASExternal.registered[id]?.schema
+  return Object.keys(props).reduce((prev, name) => {
+    const value = props[name]
     if (!name.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(name)) {
       return { ...prev, [reverseKebabCase(name)]: parseProps(reverseKebabCase(name), value, schema?.properties) }
     } else {
       return prev
     }
   }, {})
-  return props
 }
 
 export type RegisteredComponents = {
@@ -110,7 +124,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
   update() {
     const { dataExternalId: id } = this.props
     const Component = FEAASExternal.registered[id]?.component
-    if (!Component && this.childNodes.length > 0) return
+    if (!Component && this.getAttribute('hydrate') == 'false') return
     return super.update()
   }
 
@@ -118,7 +132,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
     const { dataExternalId: id } = props
     const Component = FEAASExternal.registered[id]?.component
     if (!Component) {
-      console.warn('FEAASExternal: The component you requested is not registered')
+      console.warn(`FEAASExternal: \`${id}\` is not registered`)
     }
     return <>{Component && <Component {...props} />}</>
   }
@@ -178,9 +192,15 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
    *   })
    *
    */
-  static registerComponent(component: React.ComponentType, options: ExternalComponentOptions) {
+  static registerComponent(
+    component: React.ComponentType | ((...args: any[]) => Promise<React.ReactElement>),
+    options: ExternalComponentOptions
+  ) {
     if (!options.name)
-      throw new Error('Could not register external component. Please make sure you provide a name in the options')
+      throw new Error(
+        'Could not register external component. Please make sure you provide a name in the options' +
+          JSON.stringify(options)
+      )
     const id = options.name
     const { thumbnail, group, ui: uiSchema, ...schemaOptions } = options
     const schema = { ...schemaOptions, type: 'object' } as JSONSchema
@@ -258,6 +278,10 @@ declare global {
         dangerouslySetInnerHTML?: { __html: string }
         [key: string]: any
       }
+      'feaas-registration': {
+        suppressHydrationWarning?: boolean
+        components: string
+      }
     }
   }
 }

package/src/ui/react.tsx

@@ -4,22 +4,31 @@ import {
   fetchComponent,
   getComponentURL,
   getStylesheetURL,
-  parseComponentSource
+  parseComponentSource,
+  FEAASStylesheetProps
 } from './index.js'
 import React from 'react'
 import { renderHTMLContent, HTMLNode, parseHTMLContent } from '../dom/html.js'
 import { DataSettings } from '../utils/settings.js'
+import { External, FEAASExternalPropsObject, getComponent, objectKeysToKebabCase } from './FEAASExternal.js'
+import { reverseKebabCase } from '../utils/string.js'
 export { renderHTMLContent }
-import { getComponent } from './FEAASExternal.js'
-export { External, linkComponents, registerComponent, getComponent } from './FEAASExternal.js'
+export { External, linkComponents, registerComponent, getComponent, FEAASExternalPropsObject } from './FEAASExternal.js'
 export * from './index.js'
 export * from '../headless.js'
 
+export type FEAASReactExternalComponentProps = { componentName: string; fallback?: any; [prop: string]: any }
+
 export type FEAASReactComponentProps = FEAASComponentProps & {
   preload?: boolean
   lastModified?: Date | string
 }
-export const ServerComponent = async (props: FEAASReactComponentProps) => {
+
+export const FEAASReactStylesheet = (props: FEAASStylesheetProps) => {
+  return <feaas-stylesheet {...props} />
+}
+
+export const FEAASReactServerComponent = async ({ ...props }: FEAASReactComponentProps) => {
   const fetchedData = await DataSettings.fetch(props?.data || {})
 
   const p: FEAASReactComponentProps = { ...props }
@@ -35,7 +44,6 @@ export const ServerComponent = async (props: FEAASReactComponentProps) => {
 }
 
 export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps) {
-  let html = ''
   let preload = null
   let children: null | React.ReactNode
 
@@ -43,9 +51,14 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
     children = parseHTMLContent(props.template, data || {}).map((node, index) =>
       HTMLNodeToReact(
         node,
-        (node) => {
-          if (node.localName == 'feaas-external' && getComponent(node.getAttribute('data-external-id'))) {
-            return [FEAASReactExternal, {}]
+        (node, attributes) => {
+          if (node.localName == 'feaas-external') {
+            const camelized = {} as any
+            for (var prop in attributes) {
+              const key = prop == 'data-external-id' ? 'componentName' : reverseKebabCase(prop)
+              camelized[key] = attributes[prop]
+            }
+            return [FEAASExternalComponent, camelized]
           }
         },
         index
@@ -70,6 +83,7 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
         suppressHydrationWarning
         template={null}
         data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
+        hydrate={'false'}
       >
         {children}
       </feaas-component>
@@ -77,20 +91,36 @@ export function FEAASReactComponent({ data, ...props }: FEAASReactComponentProps
   )
 }
 
-export function FEAASReactExternal(props: { 'data-external-id': string }) {
-  const Component = getComponent(props['data-external-id'])?.component
+export function FEAASReactExternalComponent(props: FEAASReactExternalComponentProps) {
+  const { componentName, fallback, ...attributes } = props
+  const Component = getComponent(componentName)?.component
+  if ((!Component && fallback) || !componentName)
+    return (
+      <feaas-external data-external-id={componentName} suppressHydrationWarning hydrate={'false'}>
+        {fallback}
+      </feaas-external>
+    )
+  const parsed = FEAASExternalPropsObject(componentName, attributes)
+  delete parsed['suppressHydrationWarning']
   // execute component as a function to supress hydration errors inside
   return (
-    <feaas-external {...props} suppressHydrationWarning>
-      {typeof Component == 'function' ? Component({ ...props }) : <Component {...props} />}
-    </feaas-external>
+    <>
+      <feaas-external
+        {...objectKeysToKebabCase(parsed)}
+        data-external-id={componentName}
+        suppressHydrationWarning
+        hydrate={'false'}
+      >
+        {Component == null ? null : <Component {...parsed} />}
+      </feaas-external>
+    </>
   )
 }
 
 /** 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, attributes: Record<string, any>) => [tagName: any, attributes: Record<string, any>],
   key?: any
 ): React.ReactNode {
   if (node.nodeType === 3) {
@@ -112,15 +142,59 @@ export function HTMLNodeToReact(
             [k]: v
           }
         }, {})
+    } else if (name == 'class') {
+      attributes.className = value
     } else {
       attributes[name] = value
     }
   }
 
-  const reactNode = callback?.(node)
+  const reactNode = callback?.(node, attributes)
   const reactName = reactNode?.[0] || node.nodeName.toLowerCase()
-  const reactAttributes = Object.assign({ key, suppressHydrationWarning: true }, attributes, reactNode?.[1] || {})
+  const reactAttributes = Object.assign({ key, suppressHydrationWarning: true }, reactNode?.[1] || attributes)
   return React.createElement(reactName, reactAttributes, ['img', 'br', 'input'].includes(reactName) ? null : children)
 }
 
+const NextComponents = new Map()
+var NextClientsideRenderer: any = null
+var NextDynamicFunction: any = null
+export function FEAASNextExternalComponent(props: FEAASReactExternalComponentProps) {
+  // See if component is registered in current context
+  const { componentName, ...attributes } = props
+  const Component = getComponent(componentName)?.component
+  if (!NextComponents.get(componentName)) {
+    // Designate component for rendering on clientside
+    const Dynamic = NextDynamicFunction(() => Promise.resolve(NextClientsideRenderer), {
+      ssr: false,
+      loading: () => <FEAASReactExternalComponent {...attributes} componentName={componentName} />
+    })
+
+    NextComponents.set(componentName, Dynamic)
+  }
+
+  const External = NextComponents.get(componentName)
+  return <External {...props} fallback={Component ? <Component {...props} /> : null}></External>
+}
+export function enableNextClientsideComponents(dynamic: any, component: any) {
+  NextDynamicFunction = dynamic
+  NextClientsideRenderer = component
+  return component
+}
+
+export function FEAASExternalComponent(props: FEAASReactExternalComponentProps) {
+  if (Object.keys(props).length == 0) {
+    // Serializing server-side registrations to clientside
+    return (
+      <feaas-registration components={JSON.stringify(Object.values(External.registered))} suppressHydrationWarning />
+    )
+  }
+  if (NextDynamicFunction) return FEAASNextExternalComponent(props)
+  return FEAASReactExternalComponent(props)
+}
+
+export const ExternalComponent = FEAASExternalComponent
+export const ReactExternalComponent = FEAASReactExternalComponent
+export const NextExternalComponent = FEAASNextExternalComponent
 export const Component = FEAASReactComponent
+export const ServerComponent = FEAASReactServerComponent
+export const Stylesheet = FEAASReactStylesheet

package/src/utils/data.ts

@@ -1,7 +1,14 @@
 import { JSONPath } from 'jsonpath-plus'
 
+export function queryObjectRaw(json: any, path: string) {
+  try {
+    return JSONPath<any[]>({ path, json })
+  } catch (e) {
+    return []
+  }
+}
 export function queryObject(json: any, path: string) {
-  return JSONPath<any[]>({ path, json })?.flat(Infinity) || []
+  return queryObjectRaw(json, path)?.flat(Infinity) || []
 }
 
 export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {

package/test/FEAASComponent.react.test.tsx

@@ -1,9 +1,32 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import ReactDOM from 'react-dom'
 import { describe, expect, it } from 'vitest'
-import { Component } from '../src/ui/react.js'
+import { Component, registerComponent, ExternalComponent } from '../src/ui/react.js'
 
-export async function test(react: any, html: string) {
+function Hello(props: { firstName: string; telephone: string }) {
+  const context = useContext(DataContext)
+
+  return React.createElement(
+    'div',
+    {},
+    `Hello my name is ${props.firstName} (${typeof props.firstName}) and my tel is ${
+      props.telephone
+    } (${typeof props.telephone}). And context value is ${context}`
+  )
+}
+const helloSchema = {
+  name: 'MyTestComponent',
+  properties: {
+    firstName: {
+      type: 'string'
+    },
+    telephone: {
+      type: 'number'
+    }
+  }
+} as const
+
+export async function validate(react: any, html: string) {
   const div = document.createElement('div')
   document.body.appendChild(div)
   const root = ReactDOM.render(react, div)
@@ -22,57 +45,59 @@ export async function test(react: any, html: string) {
   expect(div2.innerHTML).toEqual(html)
 }
 
+const DataContext = React.createContext('DEFAULT')
+
 describe('React', () => {
   it('render react component', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react with empty template', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test' template=''></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react component with src and overrides', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test' component='test2'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test2" src="library/test"></feaas-component></section>'
+      '<section><feaas-component library="library" component="test2" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react component with extras', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test' version='v1'></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" version="v1" src="library/test" hydrate="false"></feaas-component></section>'
     )
   })
   it('render react template', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" src="library/test" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with data and src', async () => {
-    await test(
+    await validate(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with data but without src', async () => {
-    test(
+    validate(
       <section>
         <Component
           library='library'
@@ -81,15 +106,70 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
   it('render template with style attribute', async () => {
-    test(
+    validate(
       <section>
         <Component template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
+      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><div data-path-src="abc"></div></feaas-component></section>'
+    )
+  })
+  it('render unwrapped external component with stringified values', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <section>
+        <ExternalComponent componentName='MyTestComponent' telephone={'12345'} firstName='Yarik' />
+      </section>,
+      '<section><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></section>'
+    )
+  })
+  it('render wrapped external component with parsed values', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <section>
+        <Component
+          template={
+            '<feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent"></feaas-external>'
+          }
+          data={{ abc: 321 }}
+        ></Component>
+      </section>,
+      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render wrapped external component with context provider', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent"></feaas-external>'
+            }
+            data={{ abc: 321 }}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component data="{&quot;abc&quot;:321}" hydrate="false"><feaas-external telephone="12345" first-name="Yarik" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render wrapped external component with context provider and data mapping', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external data-path-attributes="$" first-name="Yarik" data-path-attributes="$" data-external-id="MyTestComponent"></feaas-external>'
+            }
+            data={{ telephone: 321 }}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component data="{&quot;telephone&quot;:321}" hydrate="false"><feaas-external data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" data-external-id="MyTestComponent" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
 })

package/test/FEAASExternal.test.tsx

@@ -17,7 +17,7 @@ describe('External', () => {
         type: 'number'
       }
     }
-  }
+  } as const
   function Hello2(props: { firstName: string; address: string }) {
     return React.createElement('div', {}, `Hello my name is ${props.firstName} and my address is ${props.address}`)
   }
@@ -58,7 +58,7 @@ describe('External', () => {
         type: 'object'
       }
     }
-  }
+  } as const
   it('can register and render component', async () => {
     Clientside.External.registerComponent(Hello, helloSchema)
     document.body.innerHTML =