@sitecore-feaas/clientside 0.1.50 → 0.1.52

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
@@ -56,7 +57,7 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
 
   static setRegistrationCallback() {
     // if registerCallback has not already been triggered by another component, set it
-    if (!FEAASExternal.registrationCallback) {
+    if (!FEAASExternal.registrationCallback && typeof window !== 'undefined') {
       FEAASExternal.registrationCallback = setTimeout(() => {
         // create components array from object
         const components = Object.keys(FEAASExternal.registered).map((name) => ({
@@ -65,8 +66,9 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
           schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[name].schema),
           component: FEAASExternal.registered[name].component.toString()
         }))
+
         // send components from iframe to parent window
-        window.parent.postMessage(
+        window?.parent?.postMessage(
           JSON.stringify({
             action: 'register-components',
             data: components
@@ -86,6 +88,12 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
       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
+  }
 }
 
 declare global {

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,7 +1,7 @@
 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'
+import * as Clientside from '../src/ui/react.js'
+import FEAASExternal from "../src/ui/FEAASExternal.js";
 
 describe('External', () => {
   function Hello(props: { firstName: string; telephone: string }) {