@sitecore-feaas/clientside 0.1.52 → 0.1.53

package/src/ui/FEAASExternal.tsx

@@ -20,12 +20,38 @@ const convertSchemaPropertiesToKebabCase = (schema: any) => {
   return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
 }
 
+// TODO: parse object, number, array, boolean etc props
+
+export const parseProps = (propName: string, propValue: string, properties: any) => {
+  switch (properties?.[propName]?.type) {
+    case 'string':
+      return propValue
+    case 'object':
+      return JSON.parse(propValue)
+    case 'array':
+      return JSON.parse(propValue)
+    case 'number':
+      return +propValue
+    case 'integer':
+      return +propValue
+    case 'boolean':
+      return propValue === 'true'
+    default:
+      return propValue
+  }
+}
+
 export function FEAASExternalProps(element: FEAASBase = this) {
   const attributes = element.getAttributeNames()
+  const id = element.getAttribute('data-external-id')
+  const schema: any = FEAASExternal.registered[id]?.schema
   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
+    if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
+      const value = element.getAttribute(curr)
+      return { ...prev, [reverseKebabCase(curr)]: parseProps(curr, value, schema?.properties) }
+    } else {
+      return prev
+    }
   }, {})
   return props
 }
@@ -63,8 +89,8 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
         const components = Object.keys(FEAASExternal.registered).map((name) => ({
           ...FEAASExternal.registered[name],
           name,
-          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[name].schema),
-          component: FEAASExternal.registered[name].component.toString()
+          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[name].schema)
+          //component: FEAASExternal.registered[name].component.toString()
         }))
 
         // send components from iframe to parent window
@@ -79,7 +105,7 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
     }
   }
 
-  static loadComponents() {
+  /*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
@@ -87,7 +113,7 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
       const component = eval('(' + c.component + ')')
       FEAASExternal.registerComponent(component, schema, name)
     })
-  }
+  }*/
 
   static Preview(props: Partial<FEAASComponentProps<any>> & { src: string }) {
     const src =

package/test/FEAASExternal.test.tsx

@@ -1,17 +1,27 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import React from 'react'
 import * as Clientside from '../src/ui/react.js'
-import FEAASExternal from "../src/ui/FEAASExternal.js";
+import FEAASExternal from '../src/ui/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}`)
   }
+  const helloSchema = {
+    properties: {
+      firstName: {
+        type: 'string'
+      },
+      telephone: {
+        type: 'number'
+      }
+    }
+  }
   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')
+    Clientside.External.registerComponent(Hello, helloSchema, '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
@@ -46,4 +56,5 @@ describe('External', () => {
     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>')
   })
+  // TODO: add test for props parsing
 })