@sitecore-feaas/clientside 0.2.2 → 0.3.1

package/src/components/FEAASComponent.tsx

@@ -2,7 +2,7 @@ import { DEFAULT_CDN_URL, FEAASCDNComponentParams, fetchAndRevalidateComponent,
 import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
 import { loadStylesheetAllowStale } from '../headless.js'
 import { ControlledPromise } from '../utils/promise.js'
-import { fetchData } from '../utils/fetch.js'
+import { DataOptions, DataSettings } from '../utils/settings.js'
 import { FEAASElement } from './FEAASElement.js'
 
 export function FEAASComponentsProps(element: FEAASElement) {
@@ -13,14 +13,19 @@ 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 || {},
+    data: (data || {}) as DataOptions,
     cdn: element.getContextAttribute('cdn') ?? cdn ?? DEFAULT_CDN_URL,
     library: element.getAttribute('library') ?? library,
     component: element.getAttribute('component') ?? component,
@@ -89,12 +94,13 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     version: 'responsive',
     withStylesheet: true,
     editable: false,
-    suspended: false
+    suspended: false,
+    data: {}
   } as Partial<FEAASComponentsProps>
 
   needsRefresh: boolean
 
-  setData(data: any) {
+  setData(data: DataOptions) {
     this.set({ data })
   }
 
@@ -102,6 +108,10 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
     return FEAASComponentsProps(this)
   }
 
+  isJSONAttribute(prop: keyof FEAASComponentsProps) {
+    return prop == 'data'
+  }
+
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) return
 
@@ -125,7 +135,8 @@ export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
 
     this.whenDataReady = this.whenDataReady.restart()
 
-    const data = await fetchData(this.props.data)
+    const data = await DataSettings.fetch(this.props.data)
+
     const alreadyRendered = this.alreadyRendered
 
     await this.whenDataReady.resolve(data)
@@ -229,7 +240,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 {
@@ -248,6 +258,7 @@ declare global {
     interface IntrinsicElements {
       'feaas-component': {
         data?: any
+        suppressHydrationWarning?: boolean
         template?: string
         instance?: string
         editable?: boolean
@@ -257,7 +268,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,21 @@ 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)
+    }
+  }
+
+  isJSONAttribute(attribute: keyof Props) {
+    return false
+  }
+
   log(...args: any) {
     if (typeof process != 'undefined' && process.env.TESTING) return
     console.log(...args)
@@ -135,7 +150,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 +197,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 +239,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 +263,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 +287,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())
@@ -433,12 +449,23 @@ export class FEAASElement<Props = any, Payload = any> extends WebComponent {
         ...this.overrides
       }
       for (var property in this.props) {
+        const isJSON = this.isJSONAttribute(property)
         const value = this.props[property]
+        const valueAsString = isJSON ? JSON.stringify(value) : String(value)
+        const defaultValue = this.defaultProps[property as keyof typeof this.defaultProps]
+        const defaultValueAsString = isJSON ? JSON.stringify(defaultValue) : String(defaultValue)
         const attribute = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-        if (value == null || value === this.defaultProps[property as keyof typeof this.defaultProps]) {
+        const oldValue = this.getAttribute(attribute)
+        try {
+          var odlValueAsString: string = isJSON ? JSON.stringify(JSON.parse(oldValue)) : oldValue
+        } catch (e) {
+          var odlValueAsString: string = null
+        }
+
+        if (value == null || valueAsString === defaultValueAsString) {
           this.removeAttribute(attribute)
-        } else if (typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean') {
-          if (this.getAttribute(attribute) != String(value)) this.setAttribute(attribute, String(value))
+        } else if (typeof value == 'string' || typeof value == 'number' || typeof value == 'boolean' || isJSON) {
+          if (odlValueAsString != valueAsString) this.setAttribute(attribute, valueAsString)
         }
       }
     } catch (e) {

package/src/dom/component.ts

@@ -1,8 +1,8 @@
 import { fetchAndRevalidateComponent } from '../cdn.js'
-import { Datascopes } from './data.js'
+import { DataScopes } from '../utils/settings.js'
 import { FEAASComponentProps, renderDOMContent, renderDOMElement } from './rendering.js'
 
-export function renderComponentElement(content: string, datasources?: Datascopes) {
+export function renderComponentElement(content: string, datasources?: DataScopes) {
   const wrapper = document.createElement('div')
   wrapper.innerHTML = content
   const fragment = document.createDocumentFragment()

package/src/dom/html.ts

@@ -1,6 +1,6 @@
 /** Lightweight DOM parser and serializer to use in server environments */
 
-import { Datascopes } from './data.js'
+import { DataScopes } from '../utils/settings.js'
 import { FEAASCustomizations, renderDOMElement } from './rendering.js'
 
 type HTMLAttribute = { name: string; value: string }
@@ -323,7 +323,7 @@ export function serializeHTML(nodes: HTMLNode[]): string {
     .join('')
 }
 
-export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations) {
+export function renderHTMLContent(template: string, data?: DataScopes, config?: FEAASCustomizations) {
   const newTemplate = config?.processTemplate?.(null, template, data) || template
   const nodes = parseHTML(newTemplate)
   return renderDOMElement(nodes[0] as unknown as HTMLElement, data, config).outerHTML

package/src/dom/rendering.ts

@@ -1,22 +1,24 @@
 import { FEAASCDNComponentProps } from '../cdn.js'
-import { Datascopes, queryScopes, serializeCH1RichText } from './data.js'
+import { queryScopes, serializeCH1RichText } from '../utils/data.js'
+import { Data, DataScopes } from '../utils/settings.js'
 import { parseHTML } from './html.js'
 import { loadScript } from './scripts.js'
 import { normalizeCollectionScope } from '../utils/datapath.js'
+import { DataOptions } from '../headless.js'
 
 export interface FEAASCustomizations {
-  processTemplate?: (element: HTMLElement, template: string, data: any) => string
-  processData?: (element: HTMLElement, data: any) => any
+  processTemplate?: (element: HTMLElement, template: string, data: DataScopes) => string
+  processData?: (element: HTMLElement, data: DataScopes) => any
   processValue?: (element: HTMLElement, property: string, value: any) => any
   shouldRepeat?: (element: HTMLElement, value: any) => boolean
-  onRender?: (element: HTMLElement, data: any) => void
+  onRender?: (element: HTMLElement, data: DataScopes) => void
 }
 
 export interface ExplicitTemplate {
   template: string
 }
 
-export type FEAASComponentProps<T = Datascopes> = Partial<ExplicitTemplate> & {
+export type FEAASComponentProps<T = DataOptions> = Partial<ExplicitTemplate> & {
   data?: T
 } & (ExplicitTemplate | FEAASCDNComponentProps) &
   FEAASCustomizations
@@ -192,11 +194,12 @@ export function renderDOMElement(
   }
   return element
 }
+
 function isElement(node: Node): node is HTMLElement {
   return node.nodeType == 1
 }
 
-export function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations) {
+export function renderDOMContent(root: HTMLElement, template: string, data?: Data, config?: FEAASCustomizations) {
   const newTemplate = config?.processTemplate?.(root, template, data) || template
   root.innerHTML = newTemplate
   root.classList.add('-feaas')
@@ -212,7 +215,7 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
   return renderDOMElement(root, data, config)
 }
 
-export function renderHTMLContent(template: string, data?: Datascopes, config?: FEAASCustomizations, fakeDOM = false) {
+export function renderHTMLContent(template: string, data?: Data, config?: FEAASCustomizations, fakeDOM = false) {
   const newTemplate = config?.processTemplate?.(null, template, data) || template
   if (typeof document === 'undefined' || fakeDOM) {
     const nodes = parseHTML(newTemplate)

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

@@ -6,7 +6,7 @@
 import FEAASReactElement from './components/FEAASReactElement.js'
 
 export * from './dom/rendering.js'
-export * from './dom/data.js'
+export * from './utils/data.js'
 export * from './dom/scripts.js'
 export * from './dom/stylesheet.js'
 export * from './dom/component.js'
@@ -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 './utils/data.js'
+export * as DataPath from './utils/datapath.js'
+export { DataSettings, fetchData } from './utils/settings.js'
+export type { Data, DataOptionsById, DataOptions, DataScopes } 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,37 @@ 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'))
+    var settings = context?.getAttribute('data')
+    if (settings) {
+      try {
+        settings = JSON.parse(settings)
+      } catch (e) {}
+    }
     return (
       <Picker
         rules={rules}
         collections={collections}
         themeContext={context}
         placeholder={placeholder}
-        mode={mode || undefined}
-        onModeChange={(mode) => {
-          if (!mode) this.props.onClose(mode)
+        component={component}
+        data={settings}
+        versionId={context?.getAttribute('version')}
+        mode={mode || (component ? 'component' : null)}
+        setAttribute={(context, attribute, value) => {
+          if (attribute == 'data' && value) value = JSON.stringify(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,33 +1,70 @@
-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 { DataSettings } from '../utils/settings.js'
 
 export { renderHTMLContent }
 export { External } from './FEAASExternal.js'
+export * from './index.js'
+export * from '../headless.js'
+
+export const ServerComponent = async (props: FEAASComponentProps) => {
+  const fetchedData = await DataSettings.fetch(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 FEAASReactComponent({ ...p, data: fetchedData })
+}
+
+export function FEAASReactComponent({ data, ...props }: FEAASComponentProps & { 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 }
+  } else if (!('template' in props)) {
+    if (!props.version) {
+      props = {
+        ...props,
+        version: 'responsive'
+      }
     }
   }
 
   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}
+        suppressHydrationWarning={true}
+        template={null}
+        data={typeof data == 'string' ? data : data ? JSON.stringify(data) : null}
+        dangerouslySetInnerHTML={{ __html: html || '' }}
+      />
+    </>
   )
 }
 
-export const Component = FEAASEmbed
+export const Component = FEAASReactComponent

package/src/{dom → utils}/data.ts

@@ -1,6 +1,8 @@
 import { JSONPath } from 'jsonpath-plus'
 
-export type Datascopes = Record<string, any> | any[]
+export function queryObject(json: any, path: string) {
+  return JSONPath({ path, json })
+}
 
 export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
   var path = datapath

package/src/utils/datapath.ts

@@ -20,12 +20,34 @@ export const parseRange = (qualifier: string) => {
   return bits.join(',')
 }
 
-export const getQualifier = (jsonpath: string) => jsonpath?.match(/(\.\*|\[[^\]]+\])$/)?.[0]
+export const getQualifier = (jsonpath: string) => jsonpath?.match(/(\.\*|\[[^\]]*\])$/)?.[0]
 
 export function cleanCollectionBit(path: string) {
-  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
+  return path.replace(/(\.?\[[^\]\[]*\]|\.\*)$/g, '')
 }
 
 export function normalizeCollectionScope(path: string) {
   return cleanCollectionBit(path) + '.*'
 }
+
+// increment numbers by given numbers, exclude second value of ranges to ensure inclusivity
+export function adjustNumbers(string: string, diff: number) {
+  return string?.replace(/(.|^)(\d+)/g, (m, b, n) => b + (b == ':' ? n : String(parseInt(n) + diff)))
+}
+
+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()
+}