@sitecore-feaas/clientside 0.1.19 → 0.1.21

package/examples/index.html

@@ -1,54 +1,13 @@
 <script type="module">
-  import FEAAS from '../dist/browser/index.js'
-  const renderMyComponent = (element, data) =>
-    FEAAS.renderComponent(
-      {
-        componentId: 'our-dominator1',
-        versionId: 'dominator1-version2',
-        revision: 'staged',
-        hostname: 'https://feaascomponentsapidev.blob.core.windows.net',
-        data: data
-      },
-      element
-    )
+  import FEAASElement from '../dist/browser/basic.esm.js'
 
-  const stylesheet = FEAAS.renderStylesheet({
-    libraryId: 'our-wonderful-library'
-  })
-  document.head.appendChild(stylesheet)
 
-  const element = renderMyComponent(null, {
-    dominatorData: {
-      name: 'YarikZ',
-      goal: 'Explode the planet',
-      status: 'progressing',
-      items: [
-        {
-          'title-text': 'Hello world Hello Thomas 2r23r',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>',
-          open: true
-        },
-        { 'title-text': 'Bye world', html: 'Mystical island' }
-      ],
-      items2: [
-        {
-          'title-text': 'Cherry pop',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>'
-        },
-        {
-          'title-text': 'Berry',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>'
-        },
-        {
-          'title-text': 'Pear',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <a href="#">Link</a> Text</div>',
-          open: true
-        },
-        { 'title-text': 'Coolio', html: 'Mystical island' }
-      ]
+  export class Z extends FEAASElement<{}> {
+    renderReact(
+      props: { children?: ReactNode },
+      payload: { React: typeof import('react'); ReactDOM: typeof import('react-dom') }
+    ): ReactNode | ReactElement<any, string | JSXElementConstructor<any>> {
+      return
     }
-  })
-  document.body.appendChild(element)
-
-  // renderMyComponent(element, {"user": {"name": "Bob"}})
+  }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "scripts": {
     "start": "webpack serve --open",
     "build": "rm -rf dist;npm run build:types; npm run build:esbuild; npm run build:sourcemaps",
@@ -14,12 +14,7 @@
     "postpublish": "node ../cdn/upload-package.js clientside $npm_package_version"
   },
   "license": "ISC",
-  "optionalDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "peerDependencies": {
-    "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "main": "./dist/browser/index.esm.js",

package/src/basic.ts

@@ -1,6 +1,9 @@
+import FEAASElement from './components/FEAASElement.js'
+
 export * from './dom.js'
 export * from './fetch.js'
 export * from './components/FEAASBase.js'
+export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
@@ -8,7 +11,11 @@ export * from './components/FEAASStylesheet.js'
 declare global {
   interface Window {
     FEAASLoading: Promise<any>
+    FEAASElement: typeof FEAASElement
   }
 }
 
-if (typeof window != 'undefined') window.FEAASLoading ??= Promise.resolve()
+if (typeof window != 'undefined') {
+  window.FEAASElement = FEAASElement
+  window.FEAASLoading ??= Promise.resolve()
+}

package/src/cloud.ts

@@ -1,4 +1,4 @@
-import { fetchAndRevalidate } from './fetch.js'
+import { fetchAndRevalidate, fetchAndValidate, invalidateRequest, refetchAndValidate } from './fetch.js'
 
 export interface CloudTemplate {
   cdn?: string
@@ -7,6 +7,7 @@ export interface CloudTemplate {
   component: string
   version: string
   revision?: string
+  instance?: string
 }
 export interface CloudStylesheet {
   cdn?: string
@@ -36,20 +37,49 @@ export function getStylesheetURL({
 }
 
 export async function fetchComponent(props: CloudTemplate, callback: (html: string) => void) {
-  return fetchAndRevalidate(
-    getComponentURL(props),
-    {
-      headers: {
-        Accept: 'text/html'
+  const onlyIfNotDeleted = (response: Response) => {
+    return response.headers.get('x-ms-meta-versionDeletedAt') == null
+  }
+  const parseResponse = (response: Response) => {
+    response.text().then(callback)
+  }
+
+  // Fetch two requests in parallel: One optimistically checking if component was forked,
+  // and another checking original definition of a component
+  const results = await Promise.all([
+    props.instance &&
+      fetchAndValidate({
+        options: {
+          headers: {
+            Accept: 'text/html'
+          }
+        },
+        url: getComponentURL({ ...props, version: props.instance }),
+        validator: onlyIfNotDeleted
+      }).catch((e) => e as Error),
+    fetchAndValidate({ url: getComponentURL(props), validator: onlyIfNotDeleted }).catch((e) => e as Error)
+  ])
+  const result = results.find((result) => result && 'isCached' in result && result)
+  if (!result || result instanceof Error) {
+    const error = results.find((result) => result && result instanceof Error)
+    throw error || new Error('Can not fetch component')
+  }
+  if (results[0] == result) {
+    console.log('Using fork!', results)
+  }
+  parseResponse(result.response)
+  return refetchAndValidate({ ...result, callback: parseResponse }).catch((e) => {
+    if (results[0] == result) {
+      invalidateRequest({ ...result, callback: null, validator: null })
+      console.log('Fork was deleted')
+      // forked version was cached, but it's now deleted
+      if (!(results[1] instanceof Error)) {
+        parseResponse(results[1].response)
+        return refetchAndValidate({ ...results[1], callback: parseResponse })
       }
-    },
-    (response) => {
-      return response.headers.get('x-ms-meta-versionDeletedAt') == null
-    },
-    (response) => {
-      response.text().then(callback)
     }
-  )
+    throw e
+  })
 }
 
 export async function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void) {

package/src/components/FEAASBase.tsx

@@ -1,4 +1,5 @@
 import { JSXElementConstructor, ReactElement, ReactNode } from 'react'
+import type ReactDOMClient from 'react-dom/client'
 import type ReactDOM from 'react-dom'
 import type React from 'react'
 
@@ -9,6 +10,7 @@ var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as t
 interface ReactPayload {
   React: typeof React
   ReactDOM: typeof ReactDOM
+  ReactDOMClient: typeof ReactDOMClient
 }
 
 export class FEAASBase<Props = any, Payload = any> extends WebComponent {
@@ -27,7 +29,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   nextRender: number
 
   /** Is/was component in the dom? */
-  connected = null as Event
+  connected = false
 
   /** Result of lazy loading */
   payload: Payload
@@ -35,6 +37,12 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   refs: Record<string, FEAASBase> = {}
   descendants: FEAASBase[] = []
 
+  constructor() {
+    super()
+    this.addEventListener('feaasConnected', this)
+    this.addEventListener('feaasDisconnected', this)
+  }
+
   /** Attaches shadow root if getShadowRootOptions any settings, or uses element itself */
   getRoot(): FEAASBase | HTMLElement | ShadowRoot {
     return this
@@ -47,38 +55,76 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
 
   /** Components parses its attributes when connected, and schedules rendeirng */
   connectedCallback() {
-    console.log('FEAAS: Connected', this)
-    this.connected = new Event('feaasConnected', { bubbles: true, composed: true })
-    this.dispatchEvent(this.connected)
-    this.addEventListener('feaasConnected', this)
-    this.addEventListener('feaasDisconnected', this)
+    this.initialize()
+  }
+
+  /**
+   * Web components are initialized depth-first, making child elements render before its parents. This could here
+   * attempts to avoid this and inverts the initialization logic, so that children are initialized in the context of its
+   * already-initialized parents.
+   *
+   * FEAAS components dispatch `feaasConnected` event that allows components to store references to each other. In
+   * addition it allows external scripts to listen for initialization of FEAAS components
+   */
+  initialize() {
+    const parent = this.getParent() as FEAASBase
+    // Allow parent component to initialize first
+    if (parent && !parent.connected) return
+    if (this.connected) return
+    this.connected = true
+    console.log('FEAAS: Connected', this.tagName, this)
+    this.dispatchEvent(new Event('feaasConnected', { bubbles: true, composed: true }))
+    this.getElements().map((element: FEAASBase) => element.initialize())
     this.set()
+    return true
+  }
+
+  getParent(onlyFeaas = true) {
+    for (
+      var p: HTMLElement = this;
+      (p = p.parentElement || ((p.parentNode instanceof ShadowRoot ? p.parentNode.host : null) as HTMLElement));
+
+    ) {
+      if (!onlyFeaas || p.tagName.startsWith('FEAAS-')) return p
+    }
+  }
+
+  getElements(root: HTMLElement | ShadowRoot = this.getRoot(), onlyFeaas = true): HTMLElement[] {
+    return Array.from(root.querySelectorAll('*'))
+      .map(
+        (el) =>
+          [
+            !onlyFeaas || el.tagName.startsWith('FEAAS-') ? el : null,
+            el.shadowRoot ? this.getElements(el.shadowRoot, onlyFeaas) : null
+          ] as HTMLElement[]
+      )
+      .flat()
+      .filter(Boolean)
   }
 
   /** Nothing special happens on disconnect, except setting a flag */
   disconnectedCallback() {
+    if (!this.connected) return
     console.log('FEAAS: Disconnected', this)
-    this.removeEventListener('feaasConnected', this)
-    this.removeEventListener('feaasDisconnected', this)
     this.dispatchEvent(new Event('feaasDisconnected', { bubbles: true, composed: true }))
     this.connected = null
   }
 
   /** Catch-all event handler that dispatches events to callback */
   handleEvent(event: Event) {
+    const target = event.composedPath()[0] as FEAASBase
     switch (event.type) {
       case 'feaasConnected':
-        this.nestedCallback(event)
+        if (target != this) this.nestedCallback(target)
         break
       case 'feaasDisconnected':
-        this.unnestedCallback(event)
+        if (target != this) this.unnestedCallback(target)
         break
     }
   }
 
   /** Act on children element being removed */
-  unnestedCallback(event: Event) {
-    const target = event.composedPath()[0] as FEAASBase
+  unnestedCallback(target: FEAASBase) {
     const index = this.descendants.indexOf(target)
     if (index == -1) return
     console.log('FEAAS: Unnest', this, target)
@@ -91,8 +137,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   }
 
   /** Act on children element being added */
-  nestedCallback(event: Event): boolean | void {
-    const target = event.composedPath()[0] as FEAASBase
+  nestedCallback(target: FEAASBase): boolean | void {
     const index = this.descendants.indexOf(target)
     if (index != -1) return
     this.descendants.push(target)
@@ -100,9 +145,9 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
     this.refs[target.getComponentName()] = target
     target.refs.top = this
     target.refs.parent ||= this
-    if (target.renderReact) {
+    if (target.render) {
       for (var p: FEAASBase = target.refs.parent; p; p = p.refs.parent) {
-        if (p.renderReact) {
+        if (p.render) {
           target.refs.parentReact ||= p
           target.refs.topReact = p
         }
@@ -125,7 +170,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   /** Load lazy component & render */
   async reify() {
     if (this.payload !== undefined) {
-      this.render()
+      this.update()
     } else if (this.isReadyToLoad()) {
       this.payload = null
       this.load().then(this.onLoad)
@@ -142,7 +187,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
     if (payload == null) return
 
     this.payload = payload
-    this.render()
+    this.update()
   }
 
   /**
@@ -150,15 +195,15 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
    * the component needs to provide React & ReactDOM references in its payload. Web component redefine its render to not
    * use react at all
    */
-  render(nested = false): any {
+  update(nested = false): any {
     console.log('FEAAS: React', this.tagName, this.payload)
     if (this.payload == null) return
-    const { React, ReactDOM } = (this.payload as ReactPayload) || {}
+    const { React, ReactDOM, ReactDOMClient } = (this.payload as ReactPayload) || {}
     if (!React) throw new Error(`${this.tagName}: React is not present in payload`)
     if (!ReactDOM) throw new Error(`${this.tagName}: ReactDOM is not present in payload`)
-
     if (!this.refs.topReact && !this.forceUpdateReact) {
-      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot())
+      this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())
+      this.reactRoot.render(React.createElement(this.getReactWrapper(), { z: 'root' }))
     } else if (this.forceUpdateReact) {
       this.forceUpdateReact?.()
     } else {
@@ -178,19 +223,20 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
           slot: child.getAttribute('slot')
         })
       })
-    return this.renderReact({ ...this.props, children }, this.payload)
+    return this.render({ ...this.props, children }, this.payload)
   }
 
   reactWrapper: (props?: any) => ReactNode
+  reactRoot: ReactDOMClient.Root
   getReactWrapper(target: FEAASBase = this, displayName = target.tagName) {
     const Wrapper = (target.reactWrapper ||= (props?: any) => {
-      if (target.renderReact) {
+      if (target.render) {
         const { React, ReactDOM } = (target.payload as ReactPayload) || {}
         const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0)
         target.forceUpdateReact = forceUpdateReact
-        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRoot())
+        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRootElement())
       } else {
-        return target.render()
+        return target.update()
       }
     })
     Object.assign(Wrapper, {
@@ -209,12 +255,9 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
    * Render method that is pretty much the same as React Functional component, but with extra second argument for
    * payload (usually result of import, it is expected to have React in scope).
    */
-  renderReact?(
-    props: React.PropsWithChildren<typeof this.props>,
-    payload: typeof this.payload
-  ): ReactNode | ReactElement
+  render?(props: React.PropsWithChildren<typeof this.props>, payload: typeof this.payload): ReactNode | ReactElement
 
-  getReactRoot(): HTMLElement | ShadowRoot {
+  getReactRootElement(): HTMLElement | ShadowRoot {
     return this.getRoot()
   }
 
@@ -256,7 +299,14 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   }
 
   getContextAttribute(name: string, element = this) {
-    return element.closest(`[${name}]`)?.getAttribute(name) ?? this.getAttribute(name)
+    for (
+      var p: HTMLElement = this;
+      (p = p.parentElement || ((p.parentNode instanceof ShadowRoot ? p.parentNode.host : null) as HTMLElement));
+
+    ) {
+      if (p.getAttribute(name) != null) return p.getAttribute(name)
+    }
+    return this.getAttribute(name)
   }
 
   static register(tagName: string) {

package/src/components/{FEAASComponent.ts → FEAASComponent.tsx}

@@ -1,6 +1,7 @@
 import { fetchComponent } from '../cloud.js'
 import { renderDOMContent, renderDOMElement } from '../dom.js'
 import { FEAASBase, OptionalExcept } from './FEAASBase.js'
+import { FEAASLoader } from './FEAASLoader.js'
 
 export function FEAASComponentsProps(element: FEAASBase = this) {
   let data: any
@@ -19,12 +20,25 @@ export function FEAASComponentsProps(element: FEAASBase = this) {
     hostname: element.getAttribute('hostname'),
     cdn: element.getContextAttribute('cdn'),
     template: element.getAttribute('template'),
+    instance: element.getAttribute('instance'),
+    editable: element.getAttribute('editable') != null,
     suspended: element.getAttribute('suspended') != null
   }
 }
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
 export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
-  static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'cdn', 'template', 'data']
+  static observedAttributes = [
+    'library',
+    'component',
+    'version',
+    'revision',
+    'hostname',
+    'cdn',
+    'template',
+    'data',
+    'instance',
+    'editable'
+  ]
 
   needsRefresh: boolean
   setData(data: any) {
@@ -36,11 +50,33 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) return
     this.payload = undefined
     this.needsRefresh = true
     super.attributeChangedCallback(name, oldValue, newValue)
   }
 
+  getEditor(): any {
+    return (document.querySelector('feaas-context') as FEAASBase)?.refs.editor
+  }
+
+  constructor() {
+    super()
+    this.addEventListener('click', () => {
+      if (this.props.editable) {
+        this.edit()
+      }
+    })
+  }
+
+  edit() {
+    const editor = this.getEditor()
+    if (editor?.setTarget(this)) {
+      editor.open()
+      return true
+    }
+  }
+
   /* Check if component is a repeated clone, and return the original */
   getOriginal() {
     const scope = this.getAttribute('data-path-scope')
@@ -75,7 +111,7 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
     }
   }
 
-  render() {
+  update() {
     if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
       renderDOMElement(this, this.props.data)
     } else {

package/src/components/FEAASElement.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode, ReactElement, JSXElementConstructor, PropsWithChildren } from 'react'
+import type ReactDOMClient from 'react-dom/client'
+import { FEAASBase } from './FEAASBase.js'
+
+export type ReactModules = {
+  React: typeof React
+  ReactDOM: typeof ReactDOM
+  ReactDOMClient: typeof ReactDOMClient
+}
+export type ReactJSX = ReactNode | ReactElement<any, string | JSXElementConstructor<any>>
+export type FEAASReactRender<P> = {
+  (this: FEAASElement<P>, props: P, payload: ReactModules): ReactJSX
+}
+
+export default class FEAASElement<P> extends FEAASBase<P, ReactModules> {
+  load() {
+    return Promise.all([
+      // @ts-ignore
+      import('https://cdn.skypack.dev/react'),
+      // @ts-ignore
+      import('https://cdn.skypack.dev/react-dom'),
+      // @ts-ignore
+      import('https://cdn.skypack.dev/react-dom/client')
+    ]).then(([React, ReactDOM, ReactDOMClient]) => {
+      return { React, ReactDOM, ReactDOMClient }
+    })
+  }
+
+  render({}: P, { React }: ReactModules): ReactJSX {
+    return <></>
+  }
+}

package/src/components/{FEAASLoader.ts → FEAASLoader.tsx}

@@ -2,6 +2,7 @@ import { FEAASBase } from './FEAASBase.js'
 
 export function FEAASLoaderProps(element: HTMLElement = this) {
   return {
+    opacity: element?.getAttribute('opacity') ? parseFloat(element?.getAttribute('opacity')) : 1,
     hidden: element?.getAttribute('hidden') != null
   }
 }
@@ -11,9 +12,14 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
   stylesheet: HTMLStyleElement
   loader: HTMLDivElement
 
-  static observedAttributes = ['hidden']
+  getProps() {
+    return FEAASLoaderProps(this)
+  }
+
+  static observedAttributes = ['hidden', 'opacity']
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) return
     if (name == 'hidden') {
       this.style.setProperty('display', 'block', 'important')
       this.style.setProperty('transition', 'opacity 0.3s', 'important')
@@ -25,9 +31,12 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
         this.style.pointerEvents = 'all'
       }
     }
+    return super.attributeChangedCallback(name, oldValue, newValue)
   }
 
   connectedCallback() {
+    this.payload = null
+    super.connectedCallback()
     this.attributeChangedCallback('hidden', this.getAttribute('hidden'), this.getAttribute('hidden'))
     this.stylesheet = document.createElement('style')
     this.stylesheet.textContent = `
@@ -101,6 +110,10 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
     this.getRoot().appendChild(this.stylesheet)
     this.getRoot().appendChild(this.loader)
   }
+
+  update() {
+    this.loader.style.opacity = String(this.props.opacity)
+  }
 }
 
 declare global {

package/src/components/{FEAASStylesheet.ts → FEAASStylesheet.tsx}

@@ -24,7 +24,7 @@ export class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
     fetchStylesheet(this.props, this.onLoad)
   }
 
-  render() {
+  update() {
     if (!this.stylesheet) {
       this.stylesheet = document.createElement('style')
       this.appendChild(this.stylesheet)

package/src/dom.ts

@@ -310,6 +310,11 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
   const newTemplate = config?.processTemplate?.(root, template, data) || template
   root.innerHTML = newTemplate
   root.classList.add('-feaas')
+  // fixme, jss needs to assign theme classes to component instead
+  const anchor = root.closest('.component.feaas') || root
+  if (anchor.className.includes('-theme--')) {
+    for (const child of root.children) child.className = child.className.replace(/(\s|^)-theme--[^\s]+\s*/g, '$1')
+  }
   return renderDOMElement(root, data, config)
 }