@sitecore-feaas/clientside 0.1.51 → 0.1.53

package/src/ui/FEAASExternal.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { FEAASBase } from '../components/FEAASBase.js'
 import { ReactJSX, ReactModules } from '../components/FEAASElement.js'
 import { kebabCase, reverseKebabCase } from '../utils/string.js'
+import { Component, FEAASComponentProps } from './react.js'
 
 const convertSchemaPropertiesToKebabCase = (schema: any) => {
   if (!schema) return
@@ -19,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
 }
@@ -62,22 +89,23 @@ 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
         window?.parent?.postMessage(
           JSON.stringify({
             action: 'register-components',
             data: components
           }),
-          window?.parent?.origin
+          '*'
         )
       }, 500)
     }
   }
 
-  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
@@ -85,6 +113,12 @@ 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 =
+      props?.src || (typeof window !== 'undefined' ? window.location.search.match(/feaasSrc=([^&]+)/)?.[1] : null)
+    return src ? <Component src={src} {...props} /> : null
   }
 }
 

package/src/ui/react.tsx

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

package/test/FEAASComponent.react.test.tsx

@@ -6,136 +6,76 @@ import { Component } from '../src/ui/react.js'
 import ReactDOM from 'react-dom'
 import React from 'react'
 
+async function test(react: any, html: string) {
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+  const root = ReactDOM.render(react, div)
+  expect(div.innerHTML).toEqual(html)
+
+  const div2 = document.createElement('div')
+  document.body.appendChild(div2)
+  div2.innerHTML = html
+
+  var onHydrate
+  const promise = new Promise((r) => {
+    onHydrate = r
+  })
+  ReactDOM.hydrate(react, div2, onHydrate)
+  await promise
+  expect(div2.innerHTML).toEqual(html)
+}
+
 describe('React', () => {
-  it('render react component', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render react component', async () => {
+    await test(
       <section>
         <Component src='library/test'></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
     )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
+  })
+  it('render react with empty template', async () => {
+    await test(
       <section>
-        <Component src='library/test'></Component>
+        <Component src='library/test' template=''></Component>
       </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test"></feaas-component></section>'
     )
   })
-  it('render react component with src and overrides', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render react component with src and overrides', async () => {
+    await test(
       <section>
         <Component src='library/test' component='test2'></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test2" src="library/test"></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
-      <section>
-        <Component src='library/test' component='test2'></Component>
-      </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test2" src="library/test"></feaas-component></section>'
     )
   })
-  it('render react component with extras', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render react component with extras', async () => {
+    await test(
       <section>
         <Component src='library/test' version='v1'></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
-      <section>
-        <Component src='library/test' version='v1'></Component>
-      </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" version="v1" src="library/test"></feaas-component></section>'
     )
   })
-  it('render react template', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render react template', async () => {
+    await test(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
-      <section>
-        <Component src='library/test' template={'<div data-path-src="abc">'}></Component>
-      </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
-  it('render template with data and src', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
-      <section>
-        <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
-      </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
+  it('render template with data and src', async () => {
+    await test(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={{ abc: 321 }}></Component>
       </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
-  it('render template with data but without src', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render template with data but without src', async () => {
+    test(
       <section>
         <Component
           library='library'
@@ -144,76 +84,22 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
-      <section>
-        <Component
-          library='library'
-          component='test'
-          template={'<div data-path-src="abc">'}
-          data={{ abc: 321 }}
-        ></Component>
-      </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
-  it('render template with data with src and stringy data', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
-      <section>
-        <Component src='library/test' template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
-      </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
+  it('render template with data with src and stringy data', async () => {
+    test(
       <section>
         <Component src='library/test' template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
       </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component library="library" component="test" src="library/test" data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })
-  it('render template with data and template', () => {
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    const root = ReactDOM.render(
+  it('render template with data and template', async () => {
+    test(
       <section>
         <Component template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
       </section>,
-      div
-    )
-    expect(div.innerHTML).toEqual(
-      '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
-    )
-    const div2 = document.createElement('div')
-    document.body.appendChild(div2)
-    div2.innerHTML = div.innerHTML
-    ReactDOM.hydrate(
-      <section>
-        <Component template={'<div data-path-src="abc">'} data={'{"abc":321}'}></Component>
-      </section>,
-      div2
-    )
-    expect(div2.innerHTML).toEqual(
       '<section><feaas-component data="{&quot;abc&quot;:321}"><div data-path-src="abc"></div></feaas-component></section>'
     )
   })

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