@sitecore-feaas/clientside 0.0.9 → 0.1.0

package/examples/index.html

@@ -1,5 +1,5 @@
 <script type="module">
-  import FEAAS from '../dist/browser/index.js.js'
+  import FEAAS from '../dist/browser/index.js'
   const renderMyComponent = (element, data) =>
     FEAAS.renderComponent(
       {

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "scripts": {
     "start": "webpack serve --open",
     "build": "rm -rf dist; npm run build:node; npm run build:browser;",
-    "build:node": "tsup --entry.index src/index.ts --entry.react src/react.ts --target es6  --format cjs,esm -d dist/node",
-    "build:browser": "tsup --entry.index src/index.ts --entry.react src/react.ts --target es6  --format cjs,esm -d dist/browser --minify",
-    "watch": "tsup --entry.index src/index.ts --entry.react src/react.ts --target es6  --format esm -d dist/node --watch",
+    "build:node": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/node",
+    "build:browser": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/browser --minify",
+    "watch": "tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format esm -d dist/node --watch",
     "test": "npx vitest --config ../frontend/vite.config.ts $FLAGS",
     "test:watch": "npx vitest --config ../frontend/vite.config.ts",
-    "prepublishOnly": "npm run build; cp ./dist/browser/*{js,ts} .",
-    "check": "npx tsc --noEmit",
-    "postpublish": "rm -rf ./*{js,ts}"
+    "prepublishOnly": "npm run build",
+    "check": "npx tsc --noEmit --emitDeclarationOnly false",
+    "postpublish": "node ../scripts/upload-package-to-blob-storage.js clientside $npm_package_version"
   },
   "license": "ISC",
   "dependencies": {
@@ -23,7 +23,7 @@
   },
   "tsup": {
     "platform": "browser",
-    "dts": true,
+    "dts": false,
     "splitting": false,
     "external": [
       "node-fetch"
@@ -38,23 +38,23 @@
     "react-dom": ">=16.8.0"
   },
   "main": "dist/browser/index.js",
-  "types": "dist/browser/react.d.ts",
+  "types": "dist/browser/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "typescript": "./src/index.ts",
-      "types": "./src/index.ts",
+      "types": "./types/index.d.ts",
       "require": "./dist/node/index.cjs",
       "browser": "./dist/browser/index.js",
       "default": "./dist/node/index.js"
     },
-    "./react": {
-      "typescript": "./src/react.ts",
-      "types": "./src/react.ts",
-      "require": "./dist/node/react.cjs",
-      "browser": "./dist/browser/react.js",
-      "development": "./src/react.ts",
-      "default": "./dist/node/react.js"
+    "./basic": {
+      "typescript": "./src/basic.ts",
+      "types": "./src/basic.ts",
+      "require": "./dist/node/basic.cjs",
+      "browser": "./dist/browser/basic.js",
+      "development": "./src/basic.ts",
+      "default": "./dist/node/basic.js"
     }
   },
   "typedoc": {

package/src/basic.ts

@@ -0,0 +1,5 @@
+export * from './dom.js'
+export * from './fetch.js'
+export * from './components/FEAASLoader.js'
+export * from './components/FEAASStylesheet.js'
+export * from './components/FEAASComponent.js'

package/src/cloud.ts

@@ -1,6 +1,7 @@
 import { fetchAndRevalidate } from './fetch.js'
 
 export interface CloudTemplate {
+  cdn?: string
   hostname?: string
   library: string
   component: string
@@ -8,27 +9,30 @@ export interface CloudTemplate {
   revision?: string
 }
 export interface CloudStylesheet {
+  cdn?: string
   hostname?: string
   library: string
-  revision?: string
+  revision?: 'staging' | 'published' | 'saved' | number
 }
 
 export function getComponentURL({
-  hostname = 'https://feaascomponentsapidev.blob.core.windows.net',
+  cdn = 'https://feaascomponentsapidev.blob.core.windows.net',
+  hostname,
   library,
   component,
   version,
   revision = 'published'
 }: CloudTemplate) {
-  return `${hostname}/components/${library}/${component}/${version}/${revision}.html`
+  return `${cdn || hostname}/components/${library}/${component}/${version}/${revision}.html`
 }
 
 export function getStylesheetURL({
-  hostname = `https://feaascomponentsapidev.blob.core.windows.net`,
+  cdn = `https://feaascomponentsapidev.blob.core.windows.net`,
+  hostname,
   library,
   revision = 'published'
 }: CloudStylesheet) {
-  return `${hostname}/styles/${library}/${revision}.css`
+  return `${cdn || hostname}/styles/${library}/${revision}.css`
 }
 
 export async function fetchComponent(props: CloudTemplate, callback: (html: string) => void) {

package/src/components/FEAASBase.tsx

@@ -0,0 +1,265 @@
+import { JSXElementConstructor, ReactElement, ReactNode } from 'react'
+import type ReactDOM from 'react-dom'
+import type React from 'react'
+
+export type OptionalExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>
+
+// Shim in case it's required in node.js environment
+var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as typeof HTMLElement) : HTMLElement
+interface ReactPayload {
+  React: typeof React
+  ReactDOM: typeof ReactDOM
+}
+
+export class FEAASBase<Props = any, Payload = any> extends HTMLElement {
+  static observedAttributes: string[]
+
+  /** Return attributes as parsed values */
+  getProps(context?: HTMLElement): any {
+    return {}
+  }
+
+  /** Properties parsed in current tick */
+  props: Props
+  overrides: Props
+
+  /** Timer until next tick */
+  nextRender: number
+
+  /** Is/was component in the dom? */
+  connected = null as Event
+
+  /** Result of lazy loading */
+  payload: Payload
+
+  refs: Record<string, FEAASBase> = {}
+  descendants: FEAASBase[] = []
+
+  /** Attaches shadow root if getShadowRootOptions any settings, or uses element itself */
+  getRoot(): FEAASBase | HTMLElement | ShadowRoot {
+    return this
+  }
+
+  /** Attribute changes trigger props parsing and schedules re-rendering */
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    this.set()
+  }
+
+  /** 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.set()
+  }
+
+  /** Nothing special happens on disconnect, except setting a flag */
+  disconnectedCallback() {
+    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) {
+    switch (event.type) {
+      case 'feaasConnected':
+        this.adoptedCallback(event)
+        break
+      case 'feaasDisconnected':
+        this.orphanCallback(event)
+        break
+    }
+  }
+
+  /** Act on children element being removed */
+  orphanCallback(event: Event) {
+    const target = event.composedPath()[0] as FEAASBase
+    const index = this.descendants.indexOf(target)
+    if (index == -1) return
+    console.log('FEAAS: Orphaning', this, target)
+    this.descendants.splice(index, -1)
+    this.refs[target.getComponentName()] = null
+    if (target.refs.parent == this) target.refs.parent = null
+    if (target.refs.top == this) {
+      target.refs.top = target.refs.parent
+    }
+  }
+
+  /** Act on children element being added */
+  adoptedCallback(event: Event): boolean | void {
+    const target = event.composedPath()[0] as FEAASBase
+    this.descendants.push(target)
+    console.log('FEAAS: Adopting', this, target)
+    this.refs[target.getComponentName()] = target
+    target.refs.top = this
+    target.refs.parent ||= this
+    if (target.renderReact) {
+      for (var p: FEAASBase = target.refs.parent; p; p = p.refs.parent) {
+        if (p.renderReact) {
+          target.refs.parentReact ||= p
+          target.refs.topReact = p
+        }
+      }
+    }
+  }
+
+  getComponentName() {
+    return this.tagName.replace('FEAAS-', '').toLowerCase()
+  }
+
+  /**
+   * Check if lazy component is ready to be loaded. For example a component may stay unloaded unless certain attributes
+   * are set
+   */
+  isReadyToLoad() {
+    return this.payload === undefined && this.getAttribute('hidden') == null
+  }
+
+  /** Load lazy component & render */
+  async reify() {
+    if (this.payload !== undefined) {
+      this.render()
+    } else if (this.isReadyToLoad()) {
+      this.payload = null
+      this.load().then(this.onLoad)
+    }
+  }
+
+  /** Invoke preloading logic that needs to finish before component can render */
+  load() {
+    return Promise.resolve(null)
+  }
+
+  /** Payload is inside onLoad callback. For web components that use react, it has to provide React & ReactDOM props */
+  onLoad = (payload: Payload) => {
+    if (payload == null) return
+
+    this.payload = payload
+    this.render()
+  }
+
+  /**
+   * Component-specific logic that updates the DOM. Default render implementation assume react rendering, in that case
+   * 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 {
+    console.log('FEAAS: React', this.tagName, this.payload)
+    if (this.payload == null) return
+    const { React, ReactDOM } = (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())
+    } else if (this.forceUpdateReact) {
+      this.forceUpdateReact?.()
+    } else {
+      this.refs.topReact.forceUpdateReact?.()
+    }
+  }
+
+  invokeReactRendering(): ReactNode {
+    const { React, ReactDOM } = (this.payload as ReactPayload) || {}
+    const children = this.descendants
+      .filter((r) => {
+        return r.refs.parentReact == this && r.payload
+      })
+      .map((child: FEAASBase<any, any>, index) => {
+        return React.createElement(this.getReactWrapper(child), {
+          key: this.tagName + '-' + index,
+          slot: child.getAttribute('slot')
+        })
+      })
+    return this.renderReact({ ...this.props, children }, this.payload)
+  }
+
+  reactWrapper: (props?: any) => ReactNode
+  getReactWrapper(target: FEAASBase = this, displayName = target.tagName) {
+    const Wrapper = (target.reactWrapper ||= (props?: any) => {
+      if (target.renderReact) {
+        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())
+      } else {
+        return target.render()
+      }
+    })
+    Object.assign(Wrapper, {
+      displayName: displayName
+    })
+    return Wrapper
+  }
+
+  uid: string
+  getUID() {
+    return (this.uid ||= String(Math.random()))
+  }
+  forceUpdateReact: (node?: ReactNode) => void
+
+  /**
+   * 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
+
+  getReactRoot(): HTMLElement | ShadowRoot {
+    return this.getRoot()
+  }
+
+  /** Set props and return values on new next tick */
+  set(overrides?: Partial<Props>) {
+    this.overrides = {
+      ...this.overrides,
+      ...overrides
+    }
+    this.props = {
+      ...this.getProps(),
+      ...this.overrides
+    }
+    for (var property in this.props) {
+      const value = this.props[property as keyof typeof this.props]
+      if (this.props[property] == null) {
+        this.removeAttribute(property)
+      } else if (typeof value == 'string' || typeof value == 'number') {
+        if (this.getAttribute(property) != String(value)) this.setAttribute(property, String(value))
+      }
+    }
+    this.scheduleRender()
+  }
+
+  /** Schedule rendering on next tick, to batch multiple attribute changes */
+  scheduleRender() {
+    cancelAnimationFrame(this.nextRender)
+    this.nextRender = requestAnimationFrame(() => {
+      this.reify()
+    })
+  }
+
+  formatURL(src: string, hostname: string) {
+    if (typeof src == 'string' && src.match(/\/[^\/]/)) {
+      return hostname + src
+    } else {
+      return src
+    }
+  }
+
+  getContextAttribute(name: string, element = this) {
+    return element.closest(`[${name}]`)?.getAttribute(name) ?? this.getAttribute(name)
+  }
+
+  static register(tagName: string) {
+    if (!window.customElements.get(tagName)) {
+      window.customElements.define(tagName, this)
+    }
+  }
+}

package/src/components/FEAASComponent.ts

@@ -0,0 +1,98 @@
+import { fetchComponent } from '../cloud.js'
+import { renderDOMContent, renderDOMElement } from '../dom.js'
+import { FEAASBase, OptionalExcept } from './FEAASBase.js'
+
+export function FEAASComponentsProps(element: FEAASBase = this) {
+  let data: any
+  const dataValue = element.getAttribute('data')
+  if (dataValue != null) {
+    try {
+      data = typeof dataValue == 'string' ? JSON.parse(dataValue) : {}
+    } catch (e) {}
+  }
+  return {
+    data: data ?? {},
+    library: element.getAttribute('library'),
+    component: element.getAttribute('component'),
+    version: element.getAttribute('version'),
+    revision: element.getAttribute('revision'),
+    hostname: element.getAttribute('hostname'),
+    cdn: element.getContextAttribute('cdn'),
+    template: element.getAttribute('template')
+  }
+}
+export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
+export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
+  static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'cdn', 'template', 'data']
+
+  needsRefresh: boolean
+  setData(data: any) {
+    this.set({ data })
+  }
+
+  getProps() {
+    return FEAASComponentsProps(this)
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    this.payload = undefined
+    this.needsRefresh = true
+    super.attributeChangedCallback(name, oldValue, newValue)
+  }
+
+  /* Check if component is a repeated clone, and return the original */
+  getOriginal() {
+    const scope = this.getAttribute('data-path-scope')
+    if (!scope) return
+    for (var current = this as Element; (current = current.previousElementSibling); ) {
+      if (current.getAttribute('data-path-scope') == scope) {
+        var last = current
+      } else {
+        break
+      }
+    }
+    return last as FEAASComponent
+  }
+
+  isReadyToLoad() {
+    return (
+      super.isReadyToLoad() && this.props.library != null && this.props.component != null && this.props.version != null
+    )
+  }
+
+  async load() {
+    // defer loading to original element
+    if (this.getOriginal()) {
+      return
+    }
+    try {
+      fetchComponent(this.props, this.onLoad)
+    } catch {
+      console.error(
+        `FEAAS: Could not fetch component: ${this.props.component}/${this.props.version}/${this.props.revision}`
+      )
+    }
+  }
+
+  render() {
+    if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
+      renderDOMElement(this, this.props.data)
+    } else {
+      this.needsRefresh = true
+      // defer rendering to original element
+      if (this.getOriginal()) {
+        return
+      }
+      renderDOMContent(this, this.payload, this.props.data)
+    }
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-component': OptionalExcept<FEAASComponentsProps, 'component' | 'version' | 'revision'>
+    }
+  }
+}
+FEAASComponent.register('feaas-component')

package/src/components/FEAASContext.tsx

@@ -0,0 +1,105 @@
+import type * as FEAASContextImports from '@sitecore-feaas/frontend/src/components/providers/ContextProvider.jsx'
+
+import { FEAASBase, OptionalExcept } from './FEAASBase.jsx'
+
+export function FEAASContextProps(element: HTMLElement = this) {
+  return {
+    library: element?.getAttribute('library') as string,
+    src: element?.getAttribute('src') ?? '/assets/context.js',
+    frontend: element?.getAttribute('frontend') ?? 'https://components.sitecoreclud.io',
+    backend: element?.getAttribute('backend') ?? 'https://components-api.sitecoreclud.io',
+    cdn: element?.getAttribute('cdn') ?? 'https://feaascompontsapiprod.blob.core.windows.net',
+    getToken: null as (options: any) => Promise<string>
+  }
+}
+type FEAASContextProps = ReturnType<typeof FEAASContextProps>
+
+/**
+ * Context provides shared parameters and react providers for its nested elements. It loads lazily once any of its
+ * nested components load. Just placing it on the page without any consumers does not impose any overhead.
+ */
+export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASContextImports> {
+  static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'template']
+  getProps() {
+    return FEAASContextProps(this)
+  }
+
+  load() {
+    /* @vite-ignore */
+    return import(this.formatURL(this.props.src, this.props.frontend))
+  }
+
+  // Remove global styles
+  getTheme(theme: FEAASContextImports.Chakra.Theme): FEAASContextImports.Chakra.Theme {
+    return theme
+  }
+
+  getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
+    return this.shadowRoot || this.attachShadow({ mode: 'open' })
+  }
+
+  reactRoot: HTMLDivElement
+  getReactRoot() {
+    if (!this.reactRoot) {
+      this.reactRoot = document.createElement('div')
+      this.getRoot().appendChild(this.reactRoot)
+    }
+    return this.reactRoot
+  }
+
+  /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
+  adoptedCallback(event: Event) {
+    super.adoptedCallback(event)
+
+    const target = event.composedPath()[0] as FEAASBase
+    if (target.parentNode != this.getRoot()) {
+      this.getRoot().appendChild(target)
+    }
+  }
+
+  renderReact(
+    { children, library }: React.PropsWithChildren<FEAASContextProps>,
+    { AppContext, Chakra: { Button, Tooltip }, React: { useRef } }: typeof this.payload
+  ) {
+    Tooltip.defaultProps = {
+      hasArrow: true,
+      placement: 'top',
+      portalProps: {
+        containerRef: { current: this.getRoot() as HTMLElement }
+      }
+    }
+    return (
+      <AppContext
+        libraryId={this.props.library}
+        container={this.getRoot()}
+        getTheme={this.getTheme}
+        modalProps={{
+          portalProps: {
+            containerRef: { current: this.getRoot() as HTMLElement }
+          }
+        }}
+        chakraProps={{
+          cssVarsRoot: ':host',
+          resetCSS: true,
+          toastOptions: {
+            portalProps: {
+              containerRef: { current: this.getRoot() as HTMLElement }
+            }
+          }
+        }}
+      >
+        {children}
+      </AppContext>
+    )
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-context': OptionalExcept<FEAASContextProps, 'library'>
+    }
+  }
+}
+
+FEAASContext.register('feaas-context')