@sitecore-feaas/clientside 0.1.47 → 0.1.49

package/src/components/FEAASExternal.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { FEAASBase } from './FEAASBase.js'
+import { ReactJSX, ReactModules } from './FEAASElement.js'
+import { kebabCase, reverseKebabCase } from '../utils/string.js'
+
+const convertSchemaPropertiesToKebabCase = (schema: any) => {
+  if (!schema) return
+
+  let kebabSchemaProperties, kebabRequiredProperties
+  if (schema.properties) {
+    kebabSchemaProperties = Object.keys(schema.properties).reduce((acc: { [key: string]: string }, key) => {
+      acc[kebabCase(key)] = schema.properties[key]
+      return acc
+    }, {})
+
+    kebabRequiredProperties = schema.required.map((item: string) => kebabCase(item))
+  }
+  return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
+}
+
+export function FEAASExternalProps(element: FEAASBase = this) {
+  const attributes = element.getAttributeNames()
+  const props = attributes.reduce((prev, curr) => {
+    if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr))
+      return { ...prev, [reverseKebabCase(curr)]: element.getAttribute(curr) }
+    else return prev
+  }, {})
+  return props
+}
+
+export type RegisteredComponents = { [id: string]: { component: React.ElementType; schema: any } }
+export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & { dataExternalId: string }
+
+export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactModules> {
+  static registered: RegisteredComponents = {}
+  static registrationCallback: NodeJS.Timeout
+  load() {
+    return Promise.resolve({ React, ReactDOM })
+  }
+
+  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')
+    return <>{Component && <Component {...props} />}</>
+  }
+
+  getProps() {
+    return FEAASExternalProps(this)
+  }
+
+  static registerComponent(component: React.FC, schema: any = {}, id?: string) {
+    FEAASExternal.registered[id || component.name] = { component, schema }
+  }
+
+  static setRegistrationCallback() {
+    // if registerCallback has not already been triggered by another component, set it
+    if (!FEAASExternal.registrationCallback) {
+      FEAASExternal.registrationCallback = setTimeout(() => {
+        // create components array from object
+        const components = Object.keys(FEAASExternal.registered).map((name) => ({
+          ...FEAASExternal.registered[name],
+          name,
+          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[name].schema),
+          component: FEAASExternal.registered[name].component.toString()
+        }))
+        // send components from iframe to parent window
+        window.parent.postMessage(
+          JSON.stringify({
+            action: 'register-components',
+            data: components
+          }),
+          '*'
+        )
+      }, 500)
+    }
+  }
+
+  static loadComponents() {
+    const components = JSON.parse(sessionStorage.getItem('feaas-external-components'))
+    components.forEach((c: { name: string; schema: any; component: React.FC }) => {
+      const name = c.name
+      const schema = c.schema
+      const component = eval('(' + c.component + ')')
+      FEAASExternal.registerComponent(component, schema, name)
+    })
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-external': {
+        'data-external-id': string
+        children?: any
+        dangerouslySetInnerHTML?: { __html: string }
+        [key: string]: any
+      }
+    }
+  }
+}
+
+FEAASExternal.register('feaas-external')
+FEAASExternal.setRegistrationCallback()
+
+export { FEAASExternal as External }

package/src/headless.ts

@@ -17,6 +17,7 @@ export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
+export * from './components/FEAASExternal.js'
 
 declare global {
   interface Window {

package/src/ui/react.tsx

@@ -5,7 +5,7 @@ import { renderHTMLContent } from '../dom/html.js'
 export { renderHTMLContent }
 
 export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any>) {
-  if ('template' in props) {
+  if ('template' in props && typeof props.template == 'string') {
     var html = renderHTMLContent(props.template, data || {})
   }
   if ('src' in props) {

package/src/utils/string.ts

@@ -0,0 +1,12 @@
+export function kebabCase(str: string) {
+  const KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g
+  return str.replace(KEBAB_REGEX, function (match) {
+    return '-' + match.toLowerCase()
+  })
+}
+export function reverseKebabCase(str: string) {
+  const REVERSE_KEBAB_REGEX = /-[a-z\u00E0-\u00F6\u00F8-\u00FE]/g
+  return str.replace(REVERSE_KEBAB_REGEX, function (match) {
+    return match.slice(1).toUpperCase()
+  })
+}

package/test/FEAASExternal.test.tsx

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import React from 'react'
+import * as Clientside from '@sitecore-feaas/clientside/react'
+import FEAASExternal from '../types/components/FEAASExternal.js'
+
+describe('External', () => {
+  function Hello(props: { firstName: string; telephone: string }) {
+    return React.createElement('div', {}, `Hello my name is ${props.firstName} and my tel is ${props.telephone}`)
+  }
+  function Hello2(props: { firstName: string; address: string }) {
+    return React.createElement('div', {}, `Hello my name is ${props.firstName} and my address is ${props.address}`)
+  }
+  it('can register and render component', async () => {
+    Clientside.External.registerComponent(Hello, {}, 'MyTestComponent')
+    document.body.innerHTML =
+      '<feaas-external id="external-component" class="-component" data-attributes-keys="first-name,telephone" first-name="Chuck" telephone="45657890875643" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="MyTestComponent" contenteditable="false"></feaas-external>'
+    const component = document.getElementById('external-component') as FEAASExternal
+    await expect(component.whenRendered).resolves.toEqual(component)
+    expect(component.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
+  })
+  it('can take functional component name as id', async () => {
+    Clientside.External.registerComponent(Hello)
+    document.body.innerHTML =
+      '<feaas-external id="external-component" class="-component" data-attributes-keys="first-name,telephone" first-name="Chuck" telephone="45657890875643" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="Hello" contenteditable="false"></feaas-external>'
+    const component = document.getElementById('external-component') as FEAASExternal
+    await expect(component.whenRendered).resolves.toEqual(component)
+    expect(component.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
+  })
+  it('should return empty if component is not registered', async () => {
+    document.body.innerHTML =
+      '<feaas-external id="external-component" class="-component" data-external-id="NotRegisteredComponent" contenteditable="false"></feaas-external>'
+    const component = document.getElementById('external-component') as FEAASExternal
+    await expect(component.whenRendered).resolves.toEqual(component)
+    expect(component.innerHTML).toEqual('')
+  })
+  it('can register and render multiple components', async () => {
+    Clientside.External.registerComponent(Hello, {}, 'MyTestComponent1')
+    Clientside.External.registerComponent(Hello2, {}, 'MyTestComponent2')
+    document.body.innerHTML =
+      '<feaas-external id="external-component1" class="-component" data-attributes-keys="first-name,telephone" first-name="Chuck" telephone="45657890875643" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="MyTestComponent1" contenteditable="false"></feaas-external>' +
+      '<feaas-external id="external-component2" class="-component" data-attributes-keys="first-name,address" first-name="George" address="Test street 12" data-attributes="{&quot;first-name&quot;:&quot;George&quot;,&quot;address&quot;:&quot;Test street 12&quot;}" data-external-id="MyTestComponent2" contenteditable="false"></feaas-external>'
+    const component1 = document.getElementById('external-component1') as FEAASExternal
+    await expect(component1.whenRendered).resolves.toEqual(component1)
+    expect(component1.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
+    const component2 = document.getElementById('external-component2') as FEAASExternal
+    await expect(component2.whenRendered).resolves.toEqual(component2)
+    expect(component2.innerHTML).toEqual('<div>Hello my name is George and my address is Test street 12</div>')
+  })
+})

package/types/components/FEAASExternal.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="node" resolution-mode="require"/>
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FEAASBase } from './FEAASBase.js';
+import { ReactJSX, ReactModules } from './FEAASElement.js';
+export declare function FEAASExternalProps(element?: FEAASBase): {};
+export type RegisteredComponents = {
+    [id: string]: {
+        component: React.ElementType;
+        schema: any;
+    };
+};
+export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & {
+    dataExternalId: string;
+};
+export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactModules> {
+    static registered: RegisteredComponents;
+    static registrationCallback: NodeJS.Timeout;
+    load(): Promise<{
+        React: typeof React;
+        ReactDOM: typeof ReactDOM;
+    }>;
+    render(props: FEAASExternalProps, { React }: ReactModules): ReactJSX;
+    getProps(): {};
+    static registerComponent(component: React.FC, schema?: any, id?: string): void;
+    static setRegistrationCallback(): void;
+    static loadComponents(): void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'feaas-external': {
+                'data-external-id': string;
+                children?: any;
+                dangerouslySetInnerHTML?: {
+                    __html: string;
+                };
+                [key: string]: any;
+            };
+        }
+    }
+}
+export { FEAASExternal as External };
+//# sourceMappingURL=FEAASExternal.d.ts.map

package/types/components/FEAASExternal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FEAASExternal.d.ts","sourceRoot":"","sources":["../../src/components/FEAASExternal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAkB1D,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,SAAgB,MAQ3D;AAED,MAAM,MAAM,oBAAoB,GAAG;IAAE,CAAC,EAAE,EAAE,MAAM,GAAG;QAAE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC;QAAC,MAAM,EAAE,GAAG,CAAA;KAAE,CAAA;CAAE,CAAA;AAClG,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnG,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,YAAY,CAAC;IACpF,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAAK;IAC5C,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,OAAO,CAAA;IAC3C,IAAI;;;;IAIJ,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,QAAQ;IAOpE,QAAQ;IAIR,MAAM,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,MAAM,GAAE,GAAQ,EAAE,EAAE,CAAC,EAAE,MAAM;IAI3E,MAAM,CAAC,uBAAuB;IAuB9B,MAAM,CAAC,cAAc;CAStB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,gBAAgB,EAAE;gBAChB,kBAAkB,EAAE,MAAM,CAAA;gBAC1B,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;aACnB,CAAA;SACF;KACF;CACF;AAKD,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA"}

package/types/headless.d.ts

@@ -15,6 +15,7 @@ export * from './components/FEAASElement.js';
 export * from './components/FEAASComponent.js';
 export * from './components/FEAASLoader.js';
 export * from './components/FEAASStylesheet.js';
+export * from './components/FEAASExternal.js';
 declare global {
     interface Window {
         FEAASLoading: Promise<any>;

package/types/headless.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}
+{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,+BAA+B,CAAA;AAE7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}