@sitecore-feaas/clientside 0.0.1

package/src/dom.ts

@@ -0,0 +1,321 @@
+import { JSONPath } from 'jsonpath-plus'
+import { CloudStylesheet, CloudTemplate, fetchComponent, fetchStylesheet } from './cloud.js'
+
+export interface FEAASCustomizations {
+  processTemplate?: (element: HTMLElement, template: string, data: any) => string
+  processData?: (element: HTMLElement, data: any) => any
+  processValue?: (element: HTMLElement, property: string, value: any) => any
+  shouldRepeat?: (element: HTMLElement, value: any) => boolean
+  onRender?: (element: HTMLElement, data: any) => void
+}
+
+export interface ExplicitTemplate {
+  template: string
+}
+
+export type Datascopes = Record<string, any>
+
+export type FEAASComponentProps = {
+  data?: Datascopes
+} & (ExplicitTemplate | CloudTemplate) &
+  FEAASCustomizations
+
+export function renderComponentElement(content: string, datasources?: Datascopes) {
+  const wrapper = document.createElement('div')
+  wrapper.innerHTML = content
+  const fragment = document.createDocumentFragment()
+  while (wrapper.firstChild) {
+    fragment.appendChild(wrapper.firstChild)
+  }
+  renderDOMElement(fragment, datasources)
+  return wrapper
+}
+
+export function cleanCollectionBit(path: string) {
+  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
+}
+
+export function normalizeCollectionScope(path: string) {
+  return cleanCollectionBit(path) + '.*'
+}
+
+function getDOMCollectionIndex(element: HTMLElement) {
+  const datascope = element.getAttribute('data-path-scope')
+  var index = 0
+  for (var p = element; (p = <HTMLElement>p.previousElementSibling); ) {
+    if (p.getAttribute('data-path-scope') == datascope) {
+      index++
+    }
+  }
+  return index
+}
+
+function updateDOMClones(element: HTMLElement, targetCount: number, config?: FEAASCustomizations) {
+  const datascope = element.getAttribute('data-path-scope')
+  if (datascope == null) {
+    return
+  }
+  var index = getDOMCollectionIndex(element)
+  if (index != 0) {
+    return
+  }
+
+  const parentElement = element.parentElement
+  if (parentElement == null) {
+    return
+  }
+
+  /*dont remove first element, just hide it*/
+  if (targetCount == 0) {
+    element.style.display = 'none'
+  } else if (element.style.display) {
+    element.style.display = ''
+    if (element.getAttribute('style') == '') element.removeAttribute('style')
+  }
+
+  var count = index + 1
+  var last = element
+  for (var n = element; (n = <HTMLElement>n.nextElementSibling); ) {
+    if (n.getAttribute('data-path-scope') == datascope) {
+      count++
+      last = n
+    }
+  }
+  /* add missing clones */
+  for (var i = count; i < targetCount; i++) {
+    parentElement.insertBefore(last.cloneNode(true), last.nextElementSibling)
+  }
+  /* remove excessive clones fron previous renders */
+  for (var i = Math.max(1, targetCount); i < count; i++) {
+    last = <HTMLElement>last.previousElementSibling
+    parentElement.removeChild(<HTMLElement>last.nextElementSibling)
+  }
+}
+
+export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
+  var path = datapath
+  /* find closest parent scope */
+  const keys = Object.keys(scopes).sort((b, a) => a.length - b.length)
+  for (const scope of keys) {
+    if (datapath.startsWith(scope) && 'ends with it') {
+      if (scope == datapath) {
+        if (singleValue) {
+          return scopes[scope]
+        } else {
+          continue
+        }
+      }
+      path = datapath.substring(scope.length + 1)
+      json = scopes[scope]
+      break
+    }
+  }
+
+  const collection = JSONPath({
+    path: path,
+    json: json
+  })
+  if (singleValue && collection) {
+    return collection[0]
+  } else {
+    return collection
+  }
+}
+
+export function setDOMAttribute(element: HTMLElement, attribute: string, value: any, config?: FEAASCustomizations) {
+  if (!element) return
+  var target = element
+  if (config?.processValue) {
+    value = config?.processValue(element, attribute, value)
+  }
+  var prop = attribute.replace('data-path-', '')
+  if (attribute == 'data-path-src') {
+    target = element.tagName == 'IMG' ? element : <HTMLElement>element.querySelector('img, video')
+  } else if (attribute == 'data-path-href') {
+    target = element.querySelector('a') || element.closest('a')
+  } else if (attribute == 'data-path-hidden') {
+    value = !value ? true : null
+  } else if (attribute == 'data-path' || attribute == 'data-embed-html' || attribute == 'html') {
+    prop = 'innerHTML'
+  } else if (attribute == 'data-embed-src') {
+    loadScript(element, value)
+  } else if (attribute == 'data-path-attributes') {
+    const oldKeys = element.getAttribute('data-attributes-keys')?.split(',').filter(Boolean) || []
+    for (var property in value) {
+      var subvalue = value[property]
+      setDOMAttribute(
+        element,
+        property,
+        typeof subvalue == 'object' && subvalue ? JSON.stringify(subvalue) : subvalue,
+        config
+      )
+    }
+    for (var i = 0; i < oldKeys.length; i++) {
+      if (value == null || !(oldKeys[i] in value)) {
+        setDOMAttribute(element, oldKeys[i], null, config)
+      }
+    }
+    setDOMAttribute(element, 'data-attributes-keys', Object.keys(value || {}).join(','))
+    return
+  }
+  if (typeof value == 'boolean') {
+    value = value ? '' : null
+  }
+  if (!target) return
+
+  var placeholder = String(element.getAttribute('data-path-placeholder') || target[prop as keyof HTMLElement])
+
+  if (value != null) {
+    if (prop == 'innerHTML') {
+      if (target.innerHTML != value) {
+        target.innerHTML = value
+      }
+    } else {
+      if (target.getAttribute(prop) != value) {
+        target.setAttribute(prop, value)
+      }
+    }
+  } else {
+    if (prop == 'innerHTML') {
+      target.innerHTML = placeholder
+    } else {
+      target.removeAttribute(prop)
+    }
+  }
+}
+
+export function observeDOMElement(element: HTMLElement) {
+  const observer = new element.ownerDocument.defaultView.MutationObserver((changes) => {
+    changes.forEach((change) => {
+      const target = change.target as HTMLElement
+      const src = target.getAttribute('data-embed-src')
+      if (src) {
+        loadScript(target, src)
+      }
+
+      if (change.addedNodes) {
+        change.addedNodes.forEach((node) => {
+          if (node.nodeType == 1) autoloadScripts(node as HTMLElement, false)
+        })
+      }
+    })
+  })
+  observer.observe(element, { attributes: true, subtree: true, childList: true })
+  return observer
+}
+
+export function autoloadScripts(element: HTMLElement, observe = true) {
+  const embeds = element.querySelectorAll('[data-embed-src]')
+  for (var i = 0; i < embeds.length; i++) {
+    const embed = embeds[i]
+    loadScript(embed as HTMLElement, embed.getAttribute('data-embed-src'))
+  }
+  if (observe) return observeDOMElement(element)
+}
+
+export function loadScript(element: HTMLElement, src: string) {
+  for (var p = element; p; p = p.parentElement) {
+    if (!p.parentElement) {
+      const scripts = p.querySelectorAll('script')
+      for (var i = 0; i < scripts.length; i++) {
+        if (scripts[i].getAttribute('src') == src) {
+          return true
+        }
+      }
+      if (p.tagName == 'HTML') p = p.querySelector('head') || p
+      const script = p.ownerDocument.createElement('script')
+      script.type = 'module'
+      script.src = src
+      p.appendChild(script)
+      break
+    }
+  }
+}
+
+// order in which attributes are proccesed. Rightmost are more important
+var sortOrder = ['data-attributes-keys', 'data-path-attributes', 'data-path-scope']
+export function renderDOMElement(
+  input: HTMLElement | DocumentFragment,
+  datascopes?: any,
+  config?: FEAASCustomizations,
+  isNested?: boolean
+) {
+  const element = <HTMLElement>input
+  if (!isNested) {
+    datascopes = config?.processData?.(element, datascopes) || datascopes
+  }
+  if (element.nodeType == 1) {
+    const datascope = element.getAttribute('data-path-scope')
+    if (datascope) {
+      const index = getDOMCollectionIndex(element)
+      const collection = queryScopes(datascopes, datascope, false) || []
+      if (index == 0) {
+        updateDOMClones(element, config?.shouldRepeat?.(element, collection) === false ? 1 : collection.length, config)
+      }
+
+      datascopes = {
+        ...datascopes,
+        [normalizeCollectionScope(datascope)]: collection[index]
+      }
+    }
+    const attrs = Array.prototype.slice.call(element.attributes).sort((a, b) => {
+      return sortOrder.indexOf(a.name) - sortOrder.indexOf(b.name)
+    })
+    for (var i = 0; i < attrs.length; i++) {
+      const { name, value: datapath } = attrs[i]
+      if (name.startsWith('data-path') && name != 'data-path-scope') {
+        setDOMAttribute(element, name, queryScopes(datascopes, datapath, true), config)
+      }
+      if (name == 'data-embed-src') {
+        setDOMAttribute(element, name, element.getAttribute(name), config)
+      }
+    }
+  }
+  for (var i = 0; i < element.children.length; i++) {
+    renderDOMElement(<HTMLElement>element.children[i], datascopes, config, true)
+  }
+  if (!isNested) {
+    config?.onRender?.(element, datascopes)
+  }
+  return element
+}
+
+export function renderDOMContent(root: HTMLElement, template: string, data?: Datascopes, config?: FEAASCustomizations) {
+  const newTemplate = config?.processTemplate?.(root, template, data) || template
+  root.innerHTML = newTemplate
+  root.classList.add('-feaas')
+  return renderDOMElement(root, data, config)
+}
+
+export function renderStylesheet(props: CloudStylesheet, style?: HTMLStyleElement) {
+  renderStylesheetPromise(props, (style ||= document.createElement('style')))
+  return style
+}
+
+export function renderStylesheetPromise(props: CloudStylesheet, style?: HTMLStyleElement) {
+  style ||= document.createElement('style')
+  return fetchStylesheet(props, (cssText) => {
+    style.textContent = cssText
+  }).then(() => style)
+}
+
+export function renderComponent(props: FEAASComponentProps, root?: HTMLElement) {
+  renderComponentPromise(props, (root ||= document.createElement('div')))
+  return root
+}
+
+export async function renderComponentPromise(props: FEAASComponentProps, root?: HTMLElement) {
+  root ||= document.createElement('div')
+  if (!root.childNodes.length) {
+    if ('template' in props) {
+      return renderDOMContent(root, props.template, props.data, props)
+    } else {
+      return fetchComponent(props, (template) => {
+        return renderDOMContent(root, template, props.data, props)
+      }).then(() => root)
+    }
+    /* update element with new data */
+  } else {
+    return renderDOMElement(root, props.data, props)
+  }
+}

package/src/fetch.ts

@@ -0,0 +1,64 @@
+/* Utility to cache-bust static files.
+
+It handles multiple situations:
+
+1. Initial request, valid response
+2. Initial request, invalid response
+2. Initial request, missing response
+3. Cached request, valid response (1 extra head request)
+4. Cached request, invalid response, valid refetch (2 fetches + 1 head)
+5. Cached request, invalid response, invalid refetch (2 fetches + 1 head)
+
+It works as promise, but also accepts callback to use cached blobs mid-flight and have access to headers.
+Any network errors will not caught.
+Function throws when unable to fetch valid response.
+
+*/
+export async function fetchAndRevalidate(
+  url: Parameters<typeof fetch>[0],
+  options: Parameters<typeof fetch>[1],
+  validator: (resposne: Response) => boolean,
+  callback: (response: Response, status: 'cached' | 'valid') => void
+) {
+  // make request as usual, see if there's cached version of an asset
+  const date = new Date()
+  const initialResponse = await fetch(url, options)
+  if (!initialResponse.ok) throw new Error('Fetch failed')
+  const responseDate = new Date(initialResponse.headers.get('date'))
+  var response = initialResponse
+  callback(initialResponse, 'cached')
+
+  // see if response was pulled from cache
+  if (responseDate < date) {
+    // check if response was stale by sending quick HEAD reque st busting cache
+    const freshHeadResponse = await fetch(url + '?' + Math.random(), {
+      ...options,
+      method: 'HEAD',
+      cache: 'no-cache'
+    })
+
+    // there's a newer version of the file that we may fetch
+    if (freshHeadResponse.headers.get('last-modified') != initialResponse.headers.get('last-modified')) {
+      // check if re-fetching is even necessary
+      if (validator(freshHeadResponse) === false) {
+        //callback('stale', freshHeadResponse)
+        throw new Error('Response is stale')
+      }
+
+      // otherwise the new resource has to be re-fetched
+      response = await fetch(url, {
+        ...options,
+        cache: 'reload'
+      })
+    }
+  }
+
+  if (validator(response) === false) {
+    throw new Error('Response is not valid')
+  }
+  if (initialResponse !== response) {
+    callback(response, 'valid')
+  }
+
+  return response
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './dom.js'
+export * from './webcomponent.js'
+export * from './fetch.js'
+
+import * as DOM from './dom.js'
+import * as WEB from './webcomponent.js'
+
+export default {
+  ...DOM,
+  ...WEB
+}

package/src/react.ts

@@ -0,0 +1,66 @@
+import React from 'react'
+import { CloudStylesheet, fetchComponent, fetchStylesheet } from './cloud.js'
+import { FEAASComponentProps, renderDOMElement } from './dom.js'
+export * from './dom.js'
+export * from './cloud.js'
+export * from './webcomponent.js'
+import * as DOM from './dom.js'
+import * as WEB from './webcomponent.js'
+
+export function Component(props: FEAASComponentProps) {
+  const [template, setTemplate] = React.useState('template' in props ? props.template : null)
+  const data = props.data
+  const ref = React.useRef<HTMLElement>(null)
+
+  React.useEffect(
+    () => {
+      if (template == null && !('template' in props)) {
+        fetchComponent(props, setTemplate).catch(() => {
+          console.error(
+            `FEAAS: Could not fetch component: ${props.library}/${props.component}/${props.variant}/${props.version}`
+          )
+        })
+      }
+    },
+    'template' in props
+      ? [props.template, null, null, null]
+      : [props.library, props.component, props.variant, props.version, props.hostname]
+  )
+
+  React.useEffect(() => {
+    if (ref.current && template) {
+      ref.current.innerHTML = template
+    }
+  }, [ref, template])
+
+  React.useEffect(() => {
+    if (template && ref.current) {
+      renderDOMElement(ref.current, data || {}, props)
+    }
+  }, [ref, template, data])
+
+  return React.createElement('div', { ref, className: '-feaas' })
+}
+
+export function Stylesheet(props: CloudStylesheet) {
+  const ref = React.useRef<HTMLStyleElement>(null)
+  const [css, setCss] = React.useState<string>('')
+
+  React.useEffect(() => {
+    fetchStylesheet(props, setCss).catch((e) => {
+      console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`)
+    })
+  }, [props.hostname, props.library])
+
+  return React.createElement(
+    'style',
+    { ref, rel: 'stylesheet', className: '-stylesheet', 'data-library-id': props.library },
+    [css]
+  )
+}
+export default {
+  ...DOM,
+  ...WEB,
+  Stylesheet,
+  Component
+}

package/src/webcomponent.ts

@@ -0,0 +1,169 @@
+import { CloudTemplate, fetchComponent, fetchStylesheet } from './cloud.js'
+import { Datascopes, renderDOMContent, renderDOMElement } from './dom.js'
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'feaas-component': {
+        data?: any
+        library: string
+        component: string
+        variant: string
+        version?: string
+        hostname?: string
+        template?: string
+        children?: any
+      }
+      'feaas-stylesheet': {
+        library?: string
+        hostname?: string
+        children?: any
+      }
+    }
+  }
+}
+
+// Shim in case it's required in node.js environment
+var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as typeof HTMLElement) : HTMLElement
+
+export class HTMLFeaasComponent extends WebComponent {
+  static get observedAttributes() {
+    return ['data', 'library', 'component', 'variant', 'version', 'hostname', 'template']
+  }
+  connected = false
+
+  template: string = null
+  data: any = undefined
+  isFetching: boolean = false
+
+  connectedCallback() {
+    this.connected = true
+    this.render()
+  }
+
+  disconnectedCallback() {}
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (!this.connected) return
+    if (name == 'template') {
+      this.template = newValue
+    }
+    if (name == 'data' && this.children.length > 0) {
+      this.update()
+    } else {
+      this.render()
+    }
+  }
+
+  update() {
+    renderDOMElement(this, this.getProps().data)
+  }
+
+  setData(data: any) {
+    this.data = data
+    if (this.children.length > 0) {
+      this.update()
+    } else {
+      this.render()
+    }
+  }
+
+  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 HTMLFeaasComponent
+  }
+
+  getData(): any {
+    if (this.data) {
+      return this.data
+    }
+    if (this.getAttribute('data')) {
+      const dataValue = this.getAttribute('data')
+      return typeof dataValue == 'string' ? JSON.parse(dataValue) : {}
+    }
+    return this.getOriginal()?.getData() || {}
+    return {}
+  }
+
+  render() {
+    // defer rendering to original element
+    if (this.getOriginal()) {
+      return
+    }
+    const newProps = this.getProps()
+    if (this.template == null) {
+      if (!this.isFetching) {
+        if (newProps.component != null && newProps.variant != null) {
+          this.isFetching = true
+          fetchComponent(newProps, (template) => {
+            this.template = template
+            this.isFetching = false
+            renderDOMContent(this, this.template, newProps.data)
+          }).catch(() => {
+            console.error(
+              `FEAAS: Could not fetch component: ${newProps.component}/${newProps.variant}/${newProps.version}`
+            )
+          })
+        }
+      }
+    } else {
+      renderDOMContent(this, this.template, newProps.data)
+    }
+  }
+
+  getProps(): CloudTemplate & { data: Datascopes } {
+    return {
+      data: this.getData(),
+      library: (this.getAttribute('library') || undefined) as string,
+      component: (this.getAttribute('component') || undefined) as string,
+      variant: (this.getAttribute('variant') || undefined) as string,
+      version: (this.getAttribute('version') || undefined) as string,
+      hostname: (this.getAttribute('hostname') || undefined) as string
+    }
+  }
+}
+
+export class HTMLFeaasStylesheet extends WebComponent {
+  static get observedAttributes() {
+    return ['library', 'version', 'hostname']
+  }
+  connected = false
+  connectedCallback() {
+    this.connected = true
+    this.render()
+  }
+
+  attributeChangedCallback() {
+    if (this.connected) this.render()
+  }
+
+  render() {
+    const props = this.getProps()
+    fetchStylesheet(props, (cssText) => {
+      this.innerHTML = '<style>' + cssText + '</style>'
+    }).catch((e) => {
+      console.error(`FEAAS: Could not fetch stylesheet for library ${props.library}`)
+    })
+  }
+
+  getProps() {
+    return {
+      library: (this.getAttribute('library') || undefined) as string,
+      version: (this.getAttribute('version') || undefined) as string,
+      hostname: (this.getAttribute('hostname') || undefined) as string
+    }
+  }
+}
+
+if (typeof window != 'undefined' && !window.customElements.get('feaas-stylesheet')) {
+  window.customElements.define('feaas-stylesheet', HTMLFeaasStylesheet)
+  window.customElements.define('feaas-component', HTMLFeaasComponent)
+}