@sitecore-feaas/clientside 0.1.56 → 0.2.1

package/src/ui/FEAASContext.tsx

@@ -1,14 +1,14 @@
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/context'
 import type { AuthModel } from '@sitecore-feaas/sdk'
-import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js'
 import { ControlledPromise } from '../utils/promise.js'
 
 export function FEAASContextProps(element: HTMLElement) {
   return {
     library: element?.getAttribute('library') as string,
     src: element?.getAttribute('src') ?? '/context.js',
-    frontend: element?.getAttribute('frontend') ?? 'https://components.sitecoreclud.io',
-    backend: element?.getAttribute('backend') ?? 'https://components.sitecoreclud.io/api',
+    frontend: element?.getAttribute('frontend') ?? 'https://components.sitecorecloud.io',
+    backend: element?.getAttribute('backend') ?? 'https://components.sitecorecloud.io/api',
     cdn: element?.getAttribute('cdn') ?? 'https://feaas.blob.core.windows.net',
     auth: null as Partial<AuthModel>,
     isolate: element?.getAttribute('isolate') == null || element?.getAttribute('isolate') == 'true'
@@ -20,7 +20,7 @@ export type FEAASContextProps = ReturnType<typeof FEAASContextProps>
  * Context provides shared parameters and react providers for its nested elements. It loads lazily once any of its
  * nested components load. Just placing it on the page without any consumers does not impose any overhead.
  */
-export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASContextImports> {
+export class FEAASContext extends FEAASElement<FEAASContextProps, typeof FEAASContextImports> {
   static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'template']
   getProps() {
     return FEAASContextProps(this)
@@ -35,7 +35,6 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
   }
 
   isReadyToLoad() {
-    console.log('Is ready?', this.props, super.isReadyToLoad() && this.props.library != null)
     return super.isReadyToLoad() && this.props.library != null
   }
 
@@ -44,7 +43,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return theme
   }
 
-  getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
+  getRoot(): HTMLElement | FEAASElement<any, any> | ShadowRoot {
     if (this.getAttribute('isolate') === 'false') return this
     return this.shadowRoot || this.attachShadow({ mode: 'open' })
   }
@@ -60,12 +59,20 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
   }
 
   /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
-  connectedCallback(): void {
+  connectedCallback() {
+    //if (this.props.isolate)
     Array.from(this.children).forEach((child) => {
       this.getRoot().appendChild(child)
     })
+    document.addEventListener('feaasMount', this)
+    document.addEventListener('feaasUnmount', this)
     super.connectedCallback()
   }
+  disconnectedCallback() {
+    document.removeEventListener('feaasMount', this)
+    document.removeEventListener('feaasUnmount', this)
+    super.disconnectedCallback()
+  }
 
   sdk: FEAASContextImports.SDK
   onStatusChange: FEAASContextImports.SDKStatusCallback = (status, sdk) => {
@@ -102,6 +109,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
           portalProps
         }}
         chakraProps={{
+          resetScope: '.feaas-reset',
           cssVarsRoot: ':host',
           resetCSS: true,
           toastOptions: {
@@ -123,4 +131,5 @@ declare global {
   }
 }
 
+export { FEAASContext as Context }
 FEAASContext.register('feaas-context')

package/src/ui/FEAASEditor.tsx

@@ -1,5 +1,5 @@
 import type * as FEAASEditorImports from '@sitecore-feaas/frontend/editor'
-import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { FEAASElement, OptionalExcept } from '../components/FEAASElement.js'
 import { FEAASLoader } from '../components/FEAASLoader.js'
 
 export function getFramePosition(element: HTMLElement) {
@@ -38,7 +38,7 @@ export function getFramePosition(element: HTMLElement) {
     { left: 0, top: 0 }
   )
 }
-export function FEAASEditorProps(element: FEAASBase) {
+export function FEAASEditorProps(element: FEAASElement) {
   return {
     context: HTMLElement,
     frontend: element?.getContextAttribute('frontend'),
@@ -63,7 +63,7 @@ type Rect = {
   height: number
 }
 
-export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorImports> {
+export class FEAASEditor extends FEAASElement<FEAASEditorProps, typeof FEAASEditorImports> {
   framePoint: Pick<Rect, 'top' | 'left'> = { top: 0, left: 0 }
   wrapperRect: Rect = { top: 0, left: 0, width: 0, height: 0 }
   bodyRect: Rect = { top: 0, left: 0, width: 0, height: 0 }
@@ -329,7 +329,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     this.setLoadingState()
   }
 
-  shouldFork(version: FEAASEditorImports.SDK.VersionModel) {
+  shouldFork(version: FEAASEditorImports.Model.VersionModel) {
     return version.forkOriginId == null && this.props.instance != null
   }
 
@@ -423,8 +423,8 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     this.setAttribute('state', 'ready')
   }
 
-  component: FEAASEditorImports.SDK.ComponentModel
-  version: FEAASEditorImports.SDK.VersionModel
+  component: FEAASEditorImports.Model.ComponentModel
+  version: FEAASEditorImports.Model.VersionModel
   closing: ReturnType<typeof setTimeout>
 
   render(
@@ -458,7 +458,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
     const { React } = this.payload
     const sdk = useSDK()
     const library = useLibrary()
-    const [component, setComponent] = useState<FEAASEditorImports.SDK.ComponentModel>()
+    const [component, setComponent] = useState<FEAASEditorImports.Model.ComponentModel>()
     const { setConfirm } = useContext(ConfirmationContext)
     const usedId = instanceId || versionId
 

package/src/ui/FEAASExternal.tsx

@@ -1,26 +1,72 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { FEAASBase } from '../components/FEAASBase.js'
-import { ReactJSX, ReactModules } from '../components/FEAASElement.js'
+import { FEAASElement } from '../components/FEAASElement.js'
+import { ReactJSX, ReactModules } from '../components/FEAASReactElement.js'
 import { kebabCase, reverseKebabCase } from '../utils/string.js'
 import { Component, FEAASComponentProps } from './react.js'
+import type { ExternalComponent, ExternalComponentOptions } from '@sitecore-feaas/sdk'
 
-const convertSchemaPropertiesToKebabCase = (schema: any) => {
+/** Checks if title exists in a property and if not, it generates it from (kebab-cased) property key */
+const addTitles = (properties: { [key: string]: any }) =>
+  Object.keys(properties).reduce((acc: { [key: string]: any }, key) => {
+    if (properties[key].title) {
+      acc[key] = properties[key]
+    } else {
+      const title = key
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ')
+      acc[key] = { ...properties[key], title }
+    }
+    return acc
+  }, {})
+
+const objectKeysToKebabCase = (object: { [key: string]: any } = {}) =>
+  Object.keys(object).reduce((acc: { [key: string]: any }, key) => {
+    acc[kebabCase(key)] = object[key]
+    return acc
+  }, {})
+
+const transformSchema = (schema: ExternalComponent['schema']) => {
   if (!schema) return
+  if (!schema.properties) return schema
+  let properties, required
 
-  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
-    }, {})
+  /* kebab-case properties */
+  properties = objectKeysToKebabCase(schema.properties)
+  required = (schema.required || []).map((item: string) => kebabCase(item))
 
-    kebabRequiredProperties = (schema.required || []).map((item: string) => kebabCase(item))
-  }
-  return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
+  /* generate titles if not exist */
+  properties = addTitles(properties)
+
+  /* remove title from schema - it will be passed separately to use custom styling in the form */
+  const title: string = undefined
+  return { ...schema, properties, required, title }
 }
 
-export const parseProps = (propName: string, propValue: string, properties: any) => {
+const transformUiSchema = (uiSchema: ExternalComponent['uiSchema'], properties: { [key: string]: any }) => {
+  if (!uiSchema || !properties) return
+  let transformed: ExternalComponent['uiSchema']
+
+  /* kebab-case keys */
+  transformed = objectKeysToKebabCase(uiSchema)
+
+  /* use updown input widget as default for numbers */
+  const numberProperties = Object.keys(properties).filter((key) => /(integer|number)/.test(properties[key].type))
+  numberProperties.forEach((propertyName) => {
+    if (!transformed[propertyName]) transformed[propertyName] = { 'ui:widget': 'updown' }
+    else if (!transformed[propertyName]['ui:widget']) transformed[propertyName]['ui:widget'] = 'updown'
+  })
+
+  return transformed
+}
+
+export const parseProps = (
+  propName: string,
+  propValue: string,
+  properties: ExternalComponent['schema']['properties']
+) => {
+  //@ts-ignore
   switch (properties?.[propName]?.type) {
     case 'string':
       return propValue
@@ -39,10 +85,10 @@ export const parseProps = (propName: string, propValue: string, properties: any)
   }
 }
 
-export function FEAASExternalProps(element: FEAASBase) {
+export function FEAASExternalProps(element: FEAASElement) {
   const attributes = element.getAttributeNames()
   const id = element.getAttribute('data-external-id')
-  const schema: any = FEAASExternal.registered[id]?.schema
+  const schema: ExternalComponent['schema'] = FEAASExternal.registered[id]?.schema
   const props = attributes.reduce((prev, curr) => {
     if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
       const value = element.getAttribute(curr)
@@ -54,10 +100,12 @@ export function FEAASExternalProps(element: FEAASBase) {
   return props
 }
 
-export type RegisteredComponents = { [id: string]: { component: React.ElementType; schema: any } }
+export type RegisteredComponents = {
+  [id: string]: ExternalComponent
+}
 export type FEAASExternalProps = ReturnType<typeof FEAASExternalProps> & { dataExternalId: string }
 
-export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactModules> {
+export default class FEAASExternal extends FEAASElement<FEAASExternalProps, ReactModules> {
   static registered: RegisteredComponents = {}
   static registrationCallback: NodeJS.Timeout
   load() {
@@ -75,10 +123,12 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
     return FEAASExternalProps(this)
   }
 
-  static registerComponent(component: React.FC, schema: any = {}) {
-    const id = schema.name || component.name
-    const enrichedSchema = { ...schema, title: id, type: 'object' }
-    FEAASExternal.registered[id] = { component, schema: enrichedSchema }
+  static registerComponent(component: React.FC, options: ExternalComponentOptions = {}) {
+    const id = options.name || component.name
+    const { thumbnail, group, ui: uiSchema, ...schemaOptions } = options
+    const schema = { ...schemaOptions, type: 'object' } as ExternalComponent['schema']
+    FEAASExternal.registered[id] = { component, schema, uiSchema, thumbnail, group, title: schema?.title || id }
+    FEAASExternal.setRegistrationCallback()
   }
 
   static setRegistrationCallback() {
@@ -89,12 +139,16 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
         const components = Object.keys(FEAASExternal.registered).map((id) => ({
           ...FEAASExternal.registered[id],
           name: id,
-          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[id].schema)
+          schema: transformSchema(FEAASExternal.registered[id].schema),
+          uiSchema: transformUiSchema(
+            FEAASExternal.registered[id].uiSchema,
+            FEAASExternal.registered[id].schema?.properties
+          )
           //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

package/src/ui/FEAASPicker.tsx

@@ -1,7 +1,7 @@
 import type * as FEAASPickerImports from '@sitecore-feaas/frontend/picker'
-import { FEAASBase } from '../components/FEAASBase.js'
+import { FEAASElement } from '../components/FEAASElement.js'
 
-export function FEAASPickerProps(element: FEAASBase<any, any>) {
+export function FEAASPickerProps(element: FEAASElement<any, any>) {
   return {
     part: element?.getAttribute('part') || 'picker',
     slot: element?.getAttribute('part') || 'picker',
@@ -18,7 +18,7 @@ export function FEAASPickerProps(element: FEAASBase<any, any>) {
 }
 export type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
 
-export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerImports> {
+export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPickerImports> {
   static observedAttributes = ['library', 'mode', 'frontend', 'src', 'hidden', 'variant']
 
   defaultProps = {
@@ -66,4 +66,5 @@ declare global {
   }
 }
 
+export { FEAASPicker as Picker }
 FEAASPicker.register('feaas-picker')

package/src/ui/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "declaration": true,
     "rootDir": ".",
-    "tsBuildInfoFile": "../../types/tsbuildinfo_ui",
+    "tsBuildInfoFile": "../../types/ui/tsbuildinfo",
     "declarationDir": "../../types/ui",
     "outDir": "../../build/ui"
   },

package/test/FEAASBase.test.tsx

@@ -1,10 +1,10 @@
 import { describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { JSDOM } from 'jsdom'
 
 describe('React', function () {
   describe('Error boundary', () => {
-    class FEAASErrorTest extends FEAASBase<{ throwAt: string }> {
+    class FEAASErrorTest extends FEAASElement<{ throwAt: string }> {
       static observedAttributes = ['test']
 
       log() {}

package/test/FEAASComponent.test.tsx

@@ -15,7 +15,9 @@ describe('Components', () => {
     // vi.useRealTimers()
   })
   beforeEach(() => {
-    document.write()
+    document.open()
+    document.write('<html><head></head><body></body></html>')
+    document.close()
     clearFetchCache()
   })
   it('should load component using', async () => {

package/test/FEAASContext.test.tsx

@@ -1,13 +1,16 @@
 import { beforeEach, describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { FEAASContextProps, FEAASContext } from '../src/ui/FEAASContext.js'
 import { JSDOM } from 'jsdom'
 import { vi } from 'vitest'
+import { ReactNode, ReactElement, JSXElementConstructor } from 'react'
 
 describe('React', function () {
   describe('FEAASContext', () => {
     beforeEach(() => {
-      document.write()
+      document.open()
+      document.write('<html><head></head><body></body></html>')
+      document.close()
     })
     it('should initiate loading with isolation', async () => {
       // @ts-ignore
@@ -37,40 +40,214 @@ describe('React', function () {
       expect(spyLoad).toHaveBeenCalledTimes(1)
 
       expect(component.outerHTML).toBe(
-        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
+        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
       )
     })
-  })
-  it('should initiate loading without isolation', async () => {
-    // @ts-ignore
-    const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
-    // @ts-ignore
-    spyLoad.mockImplementation(async (url: string) => {
-      if (url.match('test.js')) {
-        return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
-          ([React, ReactDOM, ReactDOMClient]) => {
-            return {
-              React,
-              ReactDOM,
-              ReactDOMClient,
-              Chakra: { Tooltip: {} },
-              AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+    it('should initiate loading without isolation', async () => {
+      // @ts-ignore
+      const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
+      // @ts-ignore
+      spyLoad.mockImplementation(async (url: string) => {
+        if (url.match('test.js')) {
+          return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+            ([React, ReactDOM, ReactDOMClient]) => {
+              return {
+                React,
+                ReactDOM,
+                ReactDOMClient,
+                Chakra: { Tooltip: {} },
+                AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+              }
             }
-          }
-        )
+          )
+        }
+      })
+      // Fixme change to production component
+      document.body.innerHTML = '<feaas-context src="test.js" library="abc" isolate="false"></feaas-context>'
+
+      const component = document.body.firstElementChild as FEAASContext
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spyLoad).toHaveBeenCalledTimes(1)
+
+      expect(component.outerHTML).toBe(
+        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
+      )
+    })
+    it('should initiate loading with isolation', async () => {
+      // @ts-ignore
+      const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
+      // @ts-ignore
+      spyLoad.mockImplementation(async (url: string) => {
+        if (url.match('test.js')) {
+          return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+            ([React, ReactDOM, ReactDOMClient]) => {
+              return {
+                React,
+                ReactDOM,
+                ReactDOMClient,
+                Chakra: { Tooltip: {} },
+                AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+              }
+            }
+          )
+        }
+      })
+      // Fixme change to production component
+      document.body.innerHTML = '<feaas-context src="test.js" library="abc"></feaas-context>'
+
+      const component = document.body.firstElementChild as FEAASContext
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spyLoad).toHaveBeenCalledTimes(1)
+
+      expect(component.outerHTML).toBe(
+        '<feaas-context src="test.js" library="abc" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net"></feaas-context>'
+      )
+      expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
+    })
+    it('should nest components and render them in order', async () => {
+      const renders = [] as FEAASElement[]
+      class FEAASElementTestRenderOrder extends FEAASElement {
+        update() {
+          renders.push(this)
+        }
       }
+      FEAASElementTestRenderOrder.register('feaas-element-test-order')
+
+      const top = document.createElement('feaas-element-test-order') as FEAASElement
+      top.innerHTML = `
+      <feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+      </feaas-element-test-order>
+      <feaas-element-test-order></feaas-element-test-order>
+      <feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+      </feaas-element-test-order>
+    `
+      document.body.appendChild(top)
+      await expect(top.whenRendered).resolves.toEqual(top)
+      expect(top.descendants).toEqual([
+        top.children[0],
+        top.children[0].children[0],
+
+        top.children[0].children[1],
+
+        top.children[1],
+
+        top.children[2],
+
+        top.children[2].children[0]
+      ])
+      expect(renders).toEqual([
+        top.children[0].children[0],
+        top.children[0].children[1],
+        top.children[0],
+        top.children[1],
+        top.children[2].children[0],
+        top.children[2],
+        top
+      ])
     })
-    // Fixme change to production component
-    document.body.innerHTML = '<feaas-context src="test.js" library="abc"></feaas-context>'
 
-    const component = document.body.firstElementChild as FEAASContext
+    it('should nest components into context', async () => {
+      const renders = [] as FEAASElement[]
+      class FEAASElementTestRenderOrder extends FEAASElement {
+        render(props: any, payload: any): ReactNode | ReactElement<any, string | JSXElementConstructor<any>> {
+          return null
+        }
+        load() {
+          return this.import('context.js')
+        }
+      }
+      ;[FEAASElementTestRenderOrder, FEAASContext].forEach((klass) => {
+        // @ts-ignore
+        const spyLoad = vi.spyOn(klass.prototype, 'import')
+        // @ts-ignore
+        spyLoad.mockImplementation(async (url: string) => {
+          if (url.match('context.js')) {
+            return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+              ([React, ReactDOM, ReactDOMClient]) => {
+                return {
+                  React,
+                  ReactDOM,
+                  ReactDOMClient,
+                  Chakra: { Tooltip: {} },
+                  AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+                }
+              }
+            )
+          }
+        })
+        const spyRender = vi.spyOn(klass.prototype, 'render')
+        spyRender.mockImplementation(function (this: FEAASContext, { children }, { React }) {
+          renders.push(this)
+          return <>{children}</>
+        })
+      })
+
+      FEAASElementTestRenderOrder.register('feaas-element-test-nesting')
+
+      const context = document.createElement('feaas-context') as FEAASElement
+      context.setAttribute('library', 'library1')
+      const top = document.createElement('feaas-element-test-nesting') as FEAASElement
+      top.innerHTML = `
+      <feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+      </feaas-element-test-nesting>
+      <feaas-element-test-nesting></feaas-element-test-nesting>
+      <feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+      </feaas-element-test-nesting>
+    `
+      document.body.appendChild(context)
+      context.render = function () {
+        renders.push(this)
+        return FEAASContext.prototype.render.apply(this, arguments)
+      }
+      document.body.appendChild(top)
+      await expect(top.whenRendered).resolves.toEqual(top)
+      await expect(context.whenRendered).resolves.toEqual(context)
+      expect(top.refs.top).toEqual(context)
+      expect(top.refs.topReact).toEqual(context)
+      expect(top.refs.parentReact).toEqual(context)
+      expect(context.descendants).toEqual([
+        top,
+        top.children[0],
+        top.children[0].children[0],
 
-    await expect(component.whenRendered).resolves.toEqual(component)
-    expect(spyLoad).toHaveBeenCalledTimes(1)
+        top.children[0].children[1],
 
-    expect(component.outerHTML).toBe(
-      '<feaas-context src="test.js" library="abc" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"></feaas-context>'
-    )
-    expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
+        top.children[1],
+
+        top.children[2],
+
+        top.children[2].children[0]
+      ])
+      // FIXME: Currently re-renders happen on each element addition
+      //expect(renders).toEqual([
+      //  context,
+      //  top.children[0].children[0],
+      //  top.children[0].children[1],
+      //  top.children[0],
+      //  top.children[1],
+      //  top.children[2].children[0],
+      //  top.children[2],
+      //  top
+      //])
+
+      const els = [
+        context,
+        top.children[0].children[0],
+        top.children[0].children[1],
+        top.children[0],
+        top.children[1],
+        top.children[2].children[0],
+        top.children[2],
+        top
+      ].forEach((el) => expect(renders).toContain(el))
+    })
   })
 })

package/test/FEAASPicker.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { FEAASPickerProps, FEAASPicker } from '../src/ui/FEAASPicker.js'
 import { JSDOM } from 'jsdom'
 import { vi } from 'vitest'
@@ -7,7 +7,9 @@ import { vi } from 'vitest'
 describe('React', function () {
   describe('FEAASPicker', () => {
     beforeEach(() => {
-      document.write()
+      document.open()
+      document.write('<html><head></head><body></body></html>')
+      document.close()
     })
     it('should initiate loading', async () => {
       // @ts-ignore

package/types/components/FEAASComponent.d.ts

@@ -1,5 +1,5 @@
-import { FEAASBase } from './FEAASBase.js';
-export declare function FEAASComponentsProps(element: FEAASBase): {
+import { FEAASElement } from './FEAASElement.js';
+export declare function FEAASComponentsProps(element: FEAASElement): {
     data: any;
     cdn: string;
     library: string;
@@ -15,7 +15,7 @@ export declare function FEAASComponentsProps(element: FEAASBase): {
     withStylesheet: boolean;
 };
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>;
-export declare class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
+export declare class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     static observedAttributes: string[];
     defaultProps: Partial<{
         data: any;

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

@@ -1 +1 @@
-{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS;;;;;;;;;;;;;;EA6BtD;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAC1E,qBAAa,cAAe,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACzE,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAUhF,SAAS,IAAI,GAAG;;IAahB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAsBV,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EA6BzD;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAC1E,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAUhF,SAAS,IAAI,GAAG;;IAahB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAsBV,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}