@sitecore-feaas/clientside 0.2.1 → 0.3.0

package/src/ui/FEAASPicker.tsx

@@ -5,7 +5,7 @@ export function FEAASPickerProps(element: FEAASElement<any, any>) {
   return {
     part: element?.getAttribute('part') || 'picker',
     slot: element?.getAttribute('part') || 'picker',
-    mode: element?.getAttribute('mode') as 'library' | 'element' | 'themes',
+    mode: element?.getAttribute('mode') as FEAASPickerImports.PickerProps['mode'],
     placeholder: element?.getAttribute('placeholder') || 'No theme',
     frontend: element?.getContextAttribute('frontend') ?? 'https://components.sitecorecloud.io',
     src: element?.getAttribute('src') ?? '/picker.js',
@@ -13,7 +13,8 @@ export function FEAASPickerProps(element: FEAASElement<any, any>) {
     variant: element?.getAttribute('variant') as 'internal' | 'pages',
     context: undefined as FEAASPickerImports.PickerProps['context'],
     onClose: undefined as (...args: any[]) => void,
-    onContextAttributeSet: undefined as (context: any, attribute: string, value: string) => void
+    setAttribute: undefined as FEAASPickerImports.AttributeSetter,
+    getAttribute: undefined as FEAASPickerImports.AttributeGetter
   }
 }
 export type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
@@ -32,26 +33,37 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
   load() {
     return this.import(this.formatURL(this.props.src, this.props.frontend))
   }
-
+  connectedCallback() {
+    this.setAttribute('feaas-role', 'ui')
+    super.connectedCallback()
+  }
   render(
     { placeholder, context, mode, children, variant }: React.PropsWithChildren<FEAASPickerProps>,
     { Picker, React, useLibrary }: typeof FEAASPickerImports
   ) {
+    const [renders, forceRender] = React.useReducer((c) => c + 1, 0)
     const collections = useLibrary('collections')
+    const components = useLibrary('components')
     const rules = useLibrary('stylesheet.styles')
+    const component = components.find((c) => c.id == context?.getAttribute('component'))
     return (
       <Picker
         rules={rules}
         collections={collections}
         themeContext={context}
         placeholder={placeholder}
-        mode={mode || undefined}
-        onModeChange={(mode) => {
-          if (!mode) this.props.onClose(mode)
+        component={component}
+        versionId={context.getAttribute('version')}
+        mode={mode || 'component'}
+        setAttribute={(context, attribute, value) => {
+          this.props.setAttribute(context, attribute, value)
+          forceRender()
         }}
-        onContextAttributeSet={this.props.onContextAttributeSet}
         context={context}
         variant={variant}
+        onModeChange={(mode) => {
+          this.set({ mode })
+        }}
       >
         {children}
       </Picker>

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-export * from '../headless.js'
-export * from './FEAASEditor.js'
-export * from './FEAASPicker.js'
-export * from './FEAASContext.js'
+export * from './FEAAS.js'
+import * as FEAAS from './FEAAS.js'
+
+FEAAS.Context.prototype.clientside = FEAAS

package/src/ui/react.tsx

@@ -1,27 +1,61 @@
-export * from './index.js'
-import { FEAASComponentProps, parseComponentSource } from './index.js'
+import {
+  FEAASComponentProps,
+  fetchComponent,
+  getComponentURL,
+  getStylesheetURL,
+  parseComponentSource
+} from './index.js'
 import React from 'react'
 import { renderHTMLContent } from '../dom/html.js'
+import { fetchData } from '../utils/fetch.js'
+
 export { renderHTMLContent }
 export { External } from './FEAASExternal.js'
+export * from './index.js'
+export * from '../headless.js'
+
+export const ServerComponent = async (props: FEAASComponentProps<any>) => {
+  const fetchedData = await fetchData(props?.data || {})
+
+  const p = { ...props }
+
+  if (('src' in p || 'component' in p) && p?.template == null) {
+    const response = await fetchComponent(p)
+
+    p.template = response.template
+    // p.lastModified = response.lastModified
+  }
+
+  return FEAASEmbed({ ...p, data: fetchedData })
+}
+
+export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any> & { src?: string; preload?: boolean }) {
+  let html = ''
+  let preload = null
 
-export function FEAASEmbed({ data, ...props }: FEAASComponentProps<any>) {
   if ('template' in props && props.template) {
-    var html = renderHTMLContent(props.template, data || {})
+    html = renderHTMLContent(props.template, data || {})
   }
+
   if ('src' in props) {
-    props = {
-      ...parseComponentSource(props.src),
-      ...props
-    }
+    props = { ...parseComponentSource(props.src), ...props }
   }
+
   return (
-    <feaas-component
-      {...props}
-      template={null}
-      data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
-      dangerouslySetInnerHTML={{ __html: html || '' }}
-    />
+    <>
+      {'preload' in props && preload === true && 'src' in props && (
+        <>
+          <link rel='preload' as='fetch' href={getComponentURL(props.src)} crossOrigin='anonymous' />
+          <link rel='preload' as='style' href={getStylesheetURL(props.src)} crossOrigin='anonymous' />
+        </>
+      )}
+      <feaas-component
+        {...props}
+        template={null}
+        data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
+        dangerouslySetInnerHTML={{ __html: html || '' }}
+      />
+    </>
   )
 }
 

package/src/utils/datapath.ts

@@ -29,3 +29,20 @@ export function cleanCollectionBit(path: string) {
 export function normalizeCollectionScope(path: string) {
   return cleanCollectionBit(path) + '.*'
 }
+
+export function getHumanizedLabel(path: string, maxBits = 2) {
+  var bits = cleanCollectionBit(path)
+    .split(/]\.|\.\*\./g)
+    .pop()
+    .split(/\./g)
+    .slice(-3)
+  bits = bits.filter((b) => isNaN(parseInt(b)))
+  return bits
+    .map((bit) => bit.charAt(0).toUpperCase() + bit.slice(1))
+    .slice(-maxBits)
+    .join(' ')
+}
+
+export function getLastPathBit(path: string) {
+  return cleanCollectionBit(path).split('.').pop()
+}

package/src/utils/fetch.ts

@@ -0,0 +1,60 @@
+type Data = object | any[]
+
+type DataSettings = { jsonpath: string; url: string }
+
+export const isDataSettings = (data: any): data is DataSettings => {
+  if (typeof data.url != 'string') return false
+
+  for (var property in data) {
+    if (
+      property == 'body' ||
+      property == 'params' ||
+      property == 'headers' ||
+      property == 'url' ||
+      property === 'method' ||
+      (property == 'jsonpath' && typeof data[property] == 'string')
+    ) {
+      continue
+    }
+
+    return false
+  }
+
+  return true
+}
+
+const performFetch = async (
+  settings: Parameters<typeof fetch>[1] & {
+    url: Parameters<typeof fetch>[0]
+  }
+): Promise<Data> => {
+  try {
+    const response = await fetch(settings.url, settings)
+
+    if (!response) return {}
+
+    return await response.json()
+  } catch (e) {
+    return {}
+  }
+}
+
+export async function fetchData(data: DataSettings | Record<string, DataSettings | Data> | Data): Promise<Data> {
+  if (!data) return data
+
+  if (isDataSettings(data)) return performFetch(data)
+
+  const keys = Object.keys(data)
+
+  const allRequests = await Promise.all(
+    keys.map((key: keyof typeof data) => (isDataSettings(data[key]) ? performFetch(data[key]) : null)).filter(Boolean)
+  )
+
+  return keys.reduce(
+    (obj, key: keyof typeof data) => ({
+      ...obj,
+      [key]: isDataSettings(data[key]) ? allRequests.shift() : data[key]
+    }),
+    {}
+  )
+}

package/src/utils/settings.ts

@@ -0,0 +1,69 @@
+export function clean(settings: any) {
+  let cleanSettings = {}
+
+  const hasNoBody =
+    settings?.method === 'GET' || settings?.method === 'HEAD' || Object.keys(settings?.body || {}).length === 0
+
+  const hasNoHeaders =
+    settings.headers &&
+    (Object.keys(settings.headers).length === 0 ||
+      (Object.keys(settings.headers).length === 1 &&
+        (settings.headers['Content-type'] || settings.headers['Content-Type']) &&
+        (settings.headers['Content-type'] === 'application/json' ||
+          settings.headers['Content-Type'] === 'application/json')))
+
+  const hasNoParams = settings.params || Object.keys(settings.params || {}).length === 0
+
+  if (settings.method && settings.method !== 'GET') cleanSettings = { ...cleanSettings, method: settings.method }
+  if (settings.body && !hasNoBody) cleanSettings = { ...cleanSettings, body: settings.body }
+  cleanSettings = {
+    ...cleanSettings,
+    headers: hasNoHeaders ? { 'Content-type': 'application/json' } : settings.headers
+  }
+  if (settings.params && !hasNoParams) cleanSettings = { ...cleanSettings, params: settings.params }
+
+  return { ...cleanSettings, url: settings.url || '' }
+}
+
+export function toFetchArguments(settings?: any): Parameters<typeof fetch> {
+  const normalized = normalize(settings)
+
+  let body = null
+
+  const contentType = normalized.headers['Content-Type'] || normalized.headers['Content-type']
+
+  const isJson = contentType === 'application/json'
+  const isForm = contentType === 'multipart/form-data'
+  const isUrlEncoded = contentType === 'application/x-www-form-urlencoded'
+
+  if (isJson) body = JSON.stringify(normalized.body)
+  if (isForm)
+    body = Object.keys(normalized.body).reduce((form: any, key) => {
+      form.append(key, normalized.body[key])
+      return form
+    }, new FormData())
+  if (isUrlEncoded) body = new URLSearchParams(normalized.body)
+
+  const params = Object.keys(normalized.params).length ? `?${new URLSearchParams(normalized.params)}` : ''
+
+  let url = `${normalized.url}${params}`
+
+  let options: any = {}
+
+  if (body) options.body = body
+  if (Object.keys(normalized.headers).length) options.headers = normalized.headers
+  if (normalized.method !== 'GET') options.method = normalized.method
+
+  return [url, options]
+}
+
+export function normalize(settings: any) {
+  return {
+    params: settings?.params || {},
+    headers: settings?.headers || {},
+    jsonpath: settings?.jsonpath || '$',
+    method: settings?.method || 'GET',
+    body: settings?.body || {},
+    url: settings?.url || ''
+  }
+}

package/test/FEAASComponent.react.test.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import { describe, expect, it } from 'vitest'
 import { Component } from '../src/ui/react.js'
 
-async function test(react: any, html: string) {
+export async function test(react: any, html: string) {
   const div = document.createElement('div')
   document.body.appendChild(div)
   const root = ReactDOM.render(react, div)

package/test/FEAASComponent.test.tsx

@@ -6,6 +6,7 @@ import { clearFetchCache } from '../src/fetch.js'
 const earliest = new Date(2000, 1, 1, 0, 0, 0)
 const earlier = new Date(2000, 1, 2, 0, 0, 0)
 const now = new Date(2000, 1, 2, 12, 0, 0)
+
 describe('Components', () => {
   beforeAll(() => {
     // vi.useFakeTimers()

package/test/FEAASComponentData.test.tsx

@@ -0,0 +1,215 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { FEAASComponent } from '../src/components/FEAASComponent.js'
+import { clearFetchCache } from '../src/fetch.js'
+
+const earliest = new Date(2000, 1, 1, 0, 0, 0)
+const earlier = new Date(2000, 1, 2, 0, 0, 0)
+const now = new Date(2000, 1, 2, 12, 0, 0)
+
+describe('FEAAS component data', () => {
+  beforeAll(() => {
+    vi.setSystemTime(now)
+    FEAASComponent.register('feaas-component')
+  })
+
+  beforeEach(() => {
+    document.write()
+    clearFetchCache()
+  })
+
+  const checkRaceCondition = async (promises: { promise: Promise<any>; name: string }[]) => {
+    const resolved: { promise: Promise<any>; name: string }[] = []
+    await Promise.all(
+      promises.map(async (p) => {
+        await p.promise
+        resolved.push(p)
+      })
+    )
+    expect(resolved.map(({ name }) => name)).to.eql(promises.map(({ name }) => name))
+  }
+
+  const staleCacheSpy = (dataDelay = 100, htmlDelay = 100, stylesDelay = 100) => {
+    return vi
+      .spyOn(global, 'fetch')
+      .mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.includes('.css')) {
+          await new Promise((resolve) => setTimeout(resolve, stylesDelay))
+          return new Response('YESTERDAY {}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earliest.toUTCString()
+            }
+          })
+        }
+
+        if (url.includes('CDN')) {
+          await new Promise((resolve) => setTimeout(resolve, htmlDelay))
+          return new Response('C', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+
+        if (url === 'http://my-url') {
+          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          return new Response(JSON.stringify({ text: 'My new text' }), {})
+        }
+
+        if (url === 'http://my-url2') {
+          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          return new Response(JSON.stringify({ text: 'My new text2' }), {})
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, htmlDelay))
+        return new Response('C', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      })
+  }
+
+  describe('Should render component using stale cache, no data initially, then data as object', async () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({})
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({})
+      expect(component.innerHTML).toEqual('C')
+      expect(spy).toHaveBeenCalledTimes(2)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+      component.setAttribute('data', '{"text": "this is text"}')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'this is text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(updateCall).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toEqual('this is text')
+      expect(component.readyData).toEqual({ text: 'this is text' })
+      expect(spy).toHaveBeenCalledTimes(2)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as object first, then settings', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{"text": "this is text"}' data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'this is text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ text: 'this is text' })
+      expect(component.innerHTML).toEqual('this is text')
+      expect(spy).toHaveBeenCalledTimes(2)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+      component.setAttribute('data', '{"jsonpath": "$", "url": "http://my-url"}')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'My new text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(updateCall).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toEqual('My new text')
+      expect(component.readyData).toEqual({ text: 'My new text' })
+      expect(spy).toHaveBeenCalledTimes(3)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as settings', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{ "jsonpath": "$", "url": "http://my-url" }' data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'My new text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ text: 'My new text' })
+      expect(component.innerHTML).toEqual('My new text')
+      expect(spy).toHaveBeenCalledTimes(3)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as mapping', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{ "datasource-1": {"jsonpath": "$", "url": "http://my-url"}, "datasource-2": {"jsonpath": "$", "url": "http://my-url2"} }' data-path="datasource-2.text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ 'datasource-1': { text: 'My new text' }, 'datasource-2': { text: 'My new text2' } })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ 'datasource-1': { text: 'My new text' }, 'datasource-2': { text: 'My new text2' } })
+      expect(component.innerHTML).toEqual('My new text2')
+      expect(spy).toHaveBeenCalledTimes(4)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  // TODO
+  it.skip('Should render component using non-stale cache and data as settings', async () => {})
+})

package/test/FEAASContext.test.tsx

@@ -40,7 +40,7 @@ describe('React', function () {
       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>'
+        '<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" feaas-role="ui"><div><p>Context abc</p></div></feaas-context>'
       )
     })
     it('should initiate loading without isolation', async () => {
@@ -71,7 +71,7 @@ describe('React', function () {
       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>'
+        '<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" feaas-role="ui"><div><p>Context abc</p></div></feaas-context>'
       )
     })
     it('should initiate loading with isolation', async () => {
@@ -102,7 +102,7 @@ describe('React', function () {
       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>'
+        '<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-role="ui"></feaas-context>'
       )
       expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
     })

package/test/FEAASExternal.test.tsx

@@ -37,6 +37,7 @@ describe('External', () => {
     )
   }
   const typesComponentSchema = {
+    name: 'TypesComponent',
     properties: {
       stringProp: {
         type: 'string'
@@ -66,14 +67,6 @@ describe('External', () => {
     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>'

package/test/ServerComponent.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ServerComponent } from '../src/ui/react.js'
+import { FEAASComponent } from '../src/components/FEAASComponent.js'
+import {test} from './FEAASComponent.react.test.js'
+
+const earliest = new Date(2000, 1, 1, 0, 0, 0)
+const earlier = new Date(2000, 1, 2, 0, 0, 0)
+const now = new Date(2000, 1, 2, 12, 0, 0)
+
+describe('React Server', () => {
+  beforeAll(() => {
+    vi.setSystemTime(now)
+    FEAASComponent.register('feaas-component')
+  })
+
+  beforeEach(() => {
+    document.write()
+  })
+
+  it('render server component', async () => {
+    vi.spyOn(global, 'fetch').mockImplementation(
+      async (url: string, options: Parameters<typeof fetch>[1] = {}) => new Response('{"data": "1"}')
+    )
+
+    const Component = await ServerComponent({ src: 'library/test', data: { url: 'http://localhost:4000/api/data' } })
+
+    await test(
+      <>{Component}</>,
+      `<feaas-component library="library" component="test" src="library/test" data="{&quot;data&quot;:&quot;1&quot;}">{"data": "1"}</feaas-component>`
+    )
+  })
+})