@sitecore-feaas/clientside 0.2.2 → 0.3.0

package/src/components/FEAASComponent.tsx

@@ -13,12 +13,17 @@ export function FEAASComponentsProps(element: FEAASElement) {
     if (!parsed) throw new Error(`Could not parse FEAAS Component source: ${src}`)
     var { cdn, library, component, version, revision } = parsed
   }
+
   const dataValue = element.getAttribute('data')
+
   if (dataValue != null && dataValue != '') {
     try {
       data = typeof dataValue == 'string' ? JSON.parse(dataValue) : {}
-    } catch (e) {}
+    } catch (e) {
+      console.error(e)
+    }
   }
+
   return {
     data: data || {},
     cdn: element.getContextAttribute('cdn') ?? cdn ?? DEFAULT_CDN_URL,
@@ -126,6 +131,7 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     this.whenDataReady = this.whenDataReady.restart()
 
     const data = await fetchData(this.props.data)
+
     const alreadyRendered = this.alreadyRendered
 
     await this.whenDataReady.resolve(data)
@@ -229,7 +235,6 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
   update() {
     this.alreadyRendered = true
-
     if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
       renderDOMElement(this, this.readyData)
     } else {
@@ -257,7 +262,9 @@ declare global {
         'with-stylesheet'?: 'false' | 'true' | ''
       } & (
         | {
-            /** @deprecated Use cdn instead */
+            /**
+             * @deprecated Use cdn instead.
+             */
             hostname?: string
             cdn?: string
             library: string

package/src/components/FEAASElement.tsx

@@ -118,7 +118,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
       if (this.connected) return
       this.connected = true
       this.log('FEAAS: Mount', this.tagName, this)
-      this.dispatchEvent(new Event('feaasMount', { bubbles: true, composed: true }))
+      this.dispatchEventIndirectly(new Event('feaasMount', { bubbles: true, composed: true }))
       this.getElements().map((element: FEAASElement) => element.mount?.())
       this.set()
     } catch (e) {
@@ -126,6 +126,17 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     }
   }
 
+  dispatchEventIndirectly(event: Event) {
+    this.dispatchEvent(event)
+    const parent = this.getParent() as FEAASElement
+
+    if (parent && !parent.contains(this)) {
+      Object.defineProperty(event, 'target', { value: this, writable: false })
+      Object.defineProperty(event, 'composedPath', { value: () => [this], writable: false })
+      parent.handleEvent(event)
+    }
+  }
+
   log(...args: any) {
     if (typeof process != 'undefined' && process.env.TESTING) return
     console.log(...args)
@@ -135,7 +146,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
   unmount() {
     if (!this.connected) return
     this.log('FEAAS: Unmount', this)
-    this.dispatchEvent(new Event('feaasUnmount', { bubbles: true, composed: true }))
+    this.dispatchEventIndirectly(new Event('feaasUnmount', { bubbles: true, composed: true }))
     this.connected = false
   }
 
@@ -182,7 +193,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
     const index = this.descendants.indexOf(target)
     if (index == -1) return
     this.log('FEAAS: Unnest', this, target)
-    this.descendants.splice(index, -1)
+    this.descendants.splice(index, 1)
     this.refs[target.getComponentName()] = null
     if (target.refs.parent == this) target.refs.parent = null
     if (target.refs.top == this) {
@@ -224,7 +235,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
   /** Generic error handler */
   onError(error: Error, where: string = 'uncaught', handled = false) {
     const event = new CustomEvent('feaasError', { bubbles: true, composed: true, detail: error })
-    this.dispatchEvent(event)
+    this.dispatchEventIndirectly(event)
     this.whenLoaded.reject(error)
     if (!event.defaultPrevented && !handled) {
       this.whenRendered.reject(error)
@@ -248,7 +259,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
       if (this.payload === undefined) {
         if (!this.isReadyToLoad()) return
         this.payload = null
-        this.dispatchEvent(new Event('feaasLoad', { bubbles: true, composed: true }))
+        this.dispatchEventIndirectly(new Event('feaasLoad', { bubbles: true, composed: true }))
         const loaded = await this.load().catch((e) => {
           this.payload = undefined
           throw e
@@ -272,6 +283,7 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
   }
 
   flush() {
+    if (!this.connected) return
     const flushSync = (this.payload as ReactPayload)?.ReactDOM?.flushSync
     if (flushSync) {
       flushSync(() => this.update())

package/src/dom/rendering.ts

@@ -192,6 +192,7 @@ export function renderDOMElement(
   }
   return element
 }
+
 function isElement(node: Node): node is HTMLElement {
   return node.nodeType == 1
 }

package/src/dom/thumbnail.ts

@@ -25,9 +25,9 @@ export const responseToImage = (response: Response): Promise<HTMLImageElement> =
  * The function ensures that the version data for the component is available and selects the one that is most suitable
  * for a display width of 800 pixels.
  *
- * @param {ComponentModel} component - The component for which the version needs to be obtained.
+ * @param {ComponentModel} component  - The component for which the version needs to be obtained.
  * @returns {Promise<VersionModel>} - A promise that resolves to the most suitable version for a display width of 800
- *   pixels.
+ *                                  pixels.
  */
 export async function getVersionForThumbnail(component: ComponentModel): Promise<VersionModel> {
   if (!component.versions.length) await component.versions.fetch()
@@ -45,9 +45,9 @@ export async function getVersionForThumbnail(component: ComponentModel): Promise
  * 1. The first call can happen with the stale cached or outdated image.
  * 2. The second call occurs with the up-to-date loaded or freshly generated generated image.
  *
- * @param {ComponentModel} component - Relevant component.
- * @param {VersionModel} [version] - Relevant version (optional, falls back to responsive).
- * @param {Callback} [callback] - Callback to handle the loaded or generated image (optional).
+ * @param {ComponentModel} component   - Relevant component.
+ * @param {VersionModel}   [version]   - Relevant version (optional, falls back to responsive).
+ * @param {Callback}       [callback]  - Callback to handle the loaded or generated image (optional).
  * @returns {Promise<HTMLImageElement | null>} - The final thumbnail image (either loaded or freshly generated).
  */
 export async function get(component: ComponentModel, version?: VersionModel, callback?: Callback) {
@@ -83,16 +83,16 @@ export async function get(component: ComponentModel, version?: VersionModel, cal
  *
  * 1. The first call occurs if the image was previously cached by the browser, but the cache is stale.
  * 2. The second call happens when the image is updated from a fresh download. By this design, the user gets to see a
- *    cached image immediately while the updated image is being downloaded in the background.
+ * cached image immediately while the updated image is being downloaded in the background.
  *
  * If the version of a component is known to be newer than remote file, the function will throw `InvalidResponse` error.
  * As a way to handle that error, the `generate` function may be used to produce new thumbnail (@see render).
  *
- * @param {ComponentModel} component - The component to load a thumbnail for.
- * @param {VersionModel} [version] - The version of the component to load a thumbnail for. If not provided, a version
- *   suitable for a responsive component is selected.
- * @param {Callback} [callback] - A callback to handle the loaded image. This callback may be invoked twice for the
- *   reasons described above.
+ * @param {ComponentModel} component   - The component to load a thumbnail for.
+ * @param {VersionModel}   [version]   - The version of the component to load a thumbnail for. If not provided, a
+ *                                     version suitable for a responsive component is selected.
+ * @param {Callback}       [callback]  - A callback to handle the loaded image. This callback may be invoked twice for
+ *                                     the reasons described above.
  * @returns {Promise<HTMLImageElement>} - The thumbnail image for the component/version combination.
  */
 export async function load(
@@ -143,8 +143,8 @@ export async function load(
  * thumbnail. It then leverages `render` to generate an image with provided parameters and finally, if the component
  * isn't new, uploads the generated as a Blob onto cdn for future retrieval.
  *
- * @param {ComponentModel} component - Component instance.
- * @param {VersionModel} [version] - Version instance.
+ * @param {ComponentModel} component  - Component instance.
+ * @param {VersionModel}   [version]  - Version instance.
  * @returns {Promise<HTMLImageElement | null>} Thumbnail image or null if generation isn't possible.
  */
 export async function generate(component: ComponentModel, version?: VersionModel) {
@@ -174,15 +174,15 @@ export async function generate(component: ComponentModel, version?: VersionModel
  * injected into the iframe to capture the rendered component as an image. The image is created respecting the provided
  * design breakpoint, ensuring an accurate visual representation.
  *
- * @param {string[]} classList - Array of class names applied to the rendered component.
- * @param {Style.Rule<'breakpoint'>} breakpoint - Breakpoint style rule that dictates the viewport dimensions for
- *   rendering.
- * @param {string} template - String template of the component to render.
- * @param {any} data - Data object to be used when rendering the component.
- * @param {string} cssText - CSS rules to be applied during component rendering.
- * @param {EnvironmentVariables} env - Environment variables used to set frontend and backend endpoint URLs.
+ * @param {string[]}                 classList   - Array of class names applied to the rendered component.
+ * @param {Style.Rule<'breakpoint'>} breakpoint  - Breakpoint style rule that dictates the viewport dimensions for
+ *                                               rendering.
+ * @param {string}                   template    - String template of the component to render.
+ * @param {any}                      data        - Data object to be used when rendering the component.
+ * @param {string}                   cssText     - CSS rules to be applied during component rendering.
+ * @param {EnvironmentVariables}     env         - Environment variables used to set frontend and backend endpoint URLs.
  * @returns {Promise<BasicImage>} - Promise that resolves to an object containing the src, width, and height of the
- *   created image.
+ *                                created image.
  */
 function render(
   classList: string[],
@@ -239,8 +239,13 @@ function render(
       ${cssText}
       body, html { padding: 0; margin: 0; overflow: hidden }
     `
+    const stylesheet2 = iframe.contentWindow.document.createElement('style')
+    stylesheet2.textContent = `
+      body, html { padding: 0; margin: 0; overflow: hidden }
+    `
 
     iframe.contentWindow.document.head.appendChild(stylesheet)
+    iframe.contentWindow.document.head.appendChild(stylesheet2)
     const root = renderComponent({ template, data })
     root.classList.add(...classList, '-feaas--preview', '-emulate--' + breakpoint.details.slug)
     iframe.contentWindow.document.body.appendChild(root)
@@ -254,9 +259,9 @@ function render(
  * several metadata points, including identifiers and timestamps. Upon successful upload, it sends a no-cache fetch
  * request to the constructed URL to bust the cache.
  *
- * @param {ComponentModel} component - Component instance.
- * @param {VersionModel} version - Version instance.
- * @param {Blob} blob - Blob instance to upload.
+ * @param {ComponentModel} component  - Component instance.
+ * @param {VersionModel}   version    - Version instance.
+ * @param {Blob}           blob       - Blob instance to upload.
  * @returns {Promise<string>} URL of the uploaded Blob.
  */
 export async function upload(component: ComponentModel, version: VersionModel, blob: Blob): Promise<string> {

package/src/headless.ts

@@ -19,6 +19,11 @@ export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
 export * from './utils/datapath.js'
+export * as DOM from './dom/rendering.js'
+export * as Datascope from './dom/data.js'
+export * as Datapath from './utils/datapath.js'
+export * from './utils/fetch.js'
+export * as DataSettings from './utils/settings.js'
 export * as Thumbnail from './dom/thumbnail.js'
 
 declare global {

package/src/ui/FEAASExternal.tsx

@@ -122,10 +122,23 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
 
   /**
    * Register React component to be renderable as Sitecore component (in Components and Pages). Properties are defined
-   * as JSON schema, from which a configuration form will be produced using RJSF library. The library allows passing a
-   * UI schema that allows tight customization of form widgets, styles and its behavior.
+   * as {@link https://json-schema.org JSON Schema}, from which a configuration form will be produced using
+   * {@link https://rjsf-team.github.io/react-jsonschema-form/ RJSF library}. The library allows passing a
+   * {@link https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema UI Schema} that allows tight
+   * customization of form widgets, styles and behavior.
    *
+   * @param {React.ComponentType}      component                     React component that will be rendered.
+   * @param {string}                   options.title                 Component name as presented to the user.
+   * @param {JSONSchema['properties']} options.properties            Object of properties.
+   * @param {JSONSchema['type']}       options.properties[].type     JSON Schema type of a property.
+   * @param {string}                   [options.properties[].title]  Optional title displayed to the user.
+   * @param {string}                   [options.group]               Optional Image to be displayed in the UI.
+   * @param {string}                   [options.thumbnail]           Optional title displayed to the user.
+   * @param {UISchema}                 [options.ui]                  Optional component groupping.
+   * @see https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema
+   * @see https://json-schema.org
    * @example
+   *
    *   FEAAS.External.registerComponent(MyComponent, {
    *     // Name of a component as it will be presented to the user
    *     name: 'My Component',
@@ -157,17 +170,6 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
    *     required: ['color', 'text']
    *   })
    *
-   * @param {React.ComponentType} component React component that will be rendered.
-   * @param {string} options.name Component name as presented to the user.
-   * @param {string} options.title Component title to be used in the inputs form. Defaults to component name.
-   * @param {JSONSchema['properties']} options.properties Object of properties.
-   * @param {JSONSchema['type']} options.properties[].type JSON Schema type of a property.
-   * @param {string} [options.properties[].title] Optional title displayed to the user.
-   * @param {string} [options.group] Optional Image to be displayed in the UI.
-   * @param {string} [options.thumbnail] Optional title displayed to the user.
-   * @param {UISchema} [options.ui] Optional component groupping.
-   * @see https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema
-   * @see https://json-schema.org
    */
   static registerComponent(component: React.ComponentType, options: ExternalComponentOptions) {
     if (!options.name)

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' | 'datasources',
+    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>
@@ -40,21 +41,29 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
     { 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/react.tsx

@@ -1,32 +1,61 @@
-import { DatasourceModel, SDK } from '@sitecore-feaas/sdk'
-
-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

@@ -2,8 +2,26 @@ type Data = object | any[]
 
 type DataSettings = { jsonpath: string; url: string }
 
-export const isDataSettings = (data: any): data is DataSettings =>
-  typeof data === 'object' && 'jsonpath' in data && 'url' in data
+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] & {
@@ -24,8 +42,6 @@ const performFetch = async (
 export async function fetchData(data: DataSettings | Record<string, DataSettings | Data> | Data): Promise<Data> {
   if (!data) return data
 
-  console.log(data)
-
   if (isDataSettings(data)) return performFetch(data)
 
   const keys = Object.keys(data)

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/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>`
+    )
+  })
+})