@sitecore-feaas/clientside 0.1.28 → 0.1.29

package/src/components/FEAASComponent.tsx

@@ -1,29 +1,34 @@
-import { fetchAndRevalidateComponent } from '../cloud.js'
-import { renderDOMContent, renderDOMElement } from '../dom.js'
-import { FEAASBase, OptionalExcept } from './FEAASBase.js'
-import { FEAASLoader } from './FEAASLoader.js'
+import { DEFAULT_CDN_URL, FEAASCDNComponentParams, fetchAndRevalidateComponent, parseComponentSource } from '../cdn.js'
+import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
+import { loadStylesheetAllowStale } from '../headless.js'
+import { FEAASBase } from './FEAASBase.js'
 
 export function FEAASComponentsProps(element: FEAASBase = this) {
   let data: any
+  const src = element.getAttribute('src')
+  if (src) {
+    var { cdn, library, component, version, revision } = parseComponentSource(src)
+  }
   const dataValue = element.getAttribute('data')
-  if (dataValue != null) {
+  if (dataValue != null && dataValue != '') {
     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'),
+    data: data || {},
+    cdn: element.getContextAttribute('cdn') ?? cdn ?? DEFAULT_CDN_URL,
+    library: element.getAttribute('library') ?? library,
+    component: element.getAttribute('component') ?? component,
+    version: element.getAttribute('version') ?? version ?? 'responsive',
+    revision: (element.getAttribute('revision') ?? revision ?? 'published') as FEAASCDNComponentParams['revision'],
     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,
-    lastModified: element.getAttribute('last-modified')
+    lastModified: element.getAttribute('last-modified'),
+    withStylesheet: element.getAttribute('with-stylesheet') != 'false'
   }
 }
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
@@ -38,9 +43,19 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
     'template',
     'data',
     'instance',
-    'editable'
+    'editable',
+    'with-stylesheet'
   ]
 
+  defaultProps = {
+    cdn: DEFAULT_CDN_URL,
+    revision: 'published',
+    version: 'responsive',
+    withStylesheet: true,
+    editable: false,
+    suspended: false
+  } as Partial<FEAASComponentsProps>
+
   needsRefresh: boolean
   setData(data: any) {
     this.set({ data })
@@ -52,7 +67,10 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) return
-    this.payload = undefined
+    // force component to be refreshed
+    if (name == 'library' || name == 'component' || name == 'revision' || name == 'version') {
+      this.payload = undefined
+    }
     this.needsRefresh = true
     super.attributeChangedCallback(name, oldValue, newValue)
   }
@@ -98,18 +116,31 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
     )
   }
 
+  onLoad = (html: string) => {
+    this.payload = html
+    this.advance()
+  }
+
   async load() {
     // defer loading to original element
     if (this.getOriginal()) {
       return
     }
-    try {
-      fetchAndRevalidateComponent(this.props, this.onLoad)
-    } catch {
-      console.error(
-        `FEAAS: Could not fetch component: ${this.props.component}/${this.props.version}/${this.props.revision}`
-      )
+    if (this.props.withStylesheet) {
+      var stylesheetPromise = loadStylesheetAllowStale(this.props).then(() => {
+        stylesheetPromise = null
+        if (this.payload) {
+          this.onLoad(this.payload)
+        }
+      })
     }
+    return Promise.all([
+      stylesheetPromise,
+      fetchAndRevalidateComponent(this.props, (html) => {
+        this.payload = html
+        if (!stylesheetPromise) this.onLoad(html)
+      })
+    ]).then(() => this.payload)
   }
 
   update() {
@@ -129,10 +160,14 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'feaas-component': OptionalExcept<FEAASComponentsProps, 'component' | 'version' | 'revision'> & {
+      'feaas-component': (Partial<
+        Omit<FEAASComponentsProps, 'component' | 'version' | 'revision' | 'lastModified' | 'withStylesheet'>
+      > &
+        (Pick<FEAASComponentsProps, 'component' | 'version' | 'revision'> | { src: string })) & {
         children?: any
         dangerouslySetInnerHTML?: { __html: string }
         'last-modified'?: string
+        'with-stylesheet'?: 'false' | 'true' | ''
       }
     }
   }

package/src/components/FEAASLoader.tsx

@@ -16,6 +16,10 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
     return FEAASLoaderProps(this)
   }
 
+  defaultProps = {
+    hidden: false
+  } as Partial<FEAASLoaderProps>
+
   static observedAttributes = ['hidden', 'opacity']
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {

package/src/components/FEAASStylesheet.tsx

@@ -1,17 +1,21 @@
-import { fetchStylesheet } from '../cloud.js'
+import { DEFAULT_CDN_URL, FEAASCDNStylesheetParams, parseStylesheetSource } from '../cdn.js'
+import { loadStylesheet } from '../dom/stylesheet.js'
 import { FEAASBase } from './FEAASBase.js'
 
 export function FEAASStylesheetProps(element: FEAASBase = this) {
+  const src = element.getAttribute('src')
+  if (src) {
+    var { cdn, library, revision } = parseStylesheetSource(src)
+  }
   return {
     library: element?.getContextAttribute('library'),
-    revision: (element?.getAttribute('revision') ?? 'published') as 'published' | 'staging' | 'saved' | number,
-    cdn: element?.getContextAttribute('cdn') || element?.getContextAttribute('hostname')
-  }
+    revision: element?.getAttribute('revision') ?? revision ?? 'published',
+    cdn: element?.getContextAttribute('cdn') ?? element?.getContextAttribute('hostname') ?? DEFAULT_CDN_URL
+  } as FEAASCDNStylesheetParams
 }
 export type FEAASStylesheetProps = ReturnType<typeof FEAASStylesheetProps>
 
 export class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
-  stylesheet: HTMLStyleElement
   getProps() {
     return FEAASStylesheetProps(this)
   }
@@ -20,16 +24,13 @@ export class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, string> {
     return this.props.library != null && this.props.revision != null && this.props.cdn != null
   }
 
-  async load() {
-    fetchStylesheet(this.props, this.onLoad)
+  onLoad = (html: string) => {
+    this.payload = html
+    this.advance()
   }
 
-  update() {
-    if (!this.stylesheet) {
-      this.stylesheet = document.createElement('style')
-      this.appendChild(this.stylesheet)
-    }
-    this.stylesheet.textContent = this.payload
+  load() {
+    return loadStylesheet(this.props, this.onLoad)
   }
 }
 

package/src/dom/component.ts

@@ -0,0 +1,35 @@
+import { fetchAndRevalidateComponent } from '../cdn.js'
+import { Datascopes } from './data.js'
+import { FEAASComponentProps, renderDOMContent, renderDOMElement } from './rendering.js'
+
+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 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 fetchAndRevalidateComponent(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/dom/data.ts

@@ -0,0 +1,124 @@
+import { JSONPath } from 'jsonpath-plus'
+
+export type Datascopes = Record<string, any>
+
+export function cleanCollectionBit(path: string) {
+  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
+}
+
+export function normalizeCollectionScope(path: string) {
+  return cleanCollectionBit(path) + '.*'
+}
+
+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
+    }
+  }
+
+  var collection = JSONPath({ path, json })
+
+  // If regular path didn't match any data, try fallbacks
+  // datasourceId.wrapper.$.path
+  if (Array.isArray(collection) && collection?.length == 0) {
+    collection = [
+      // look up in `_` datasource id (catch-all id is used in JSS)
+      //   _.wrapper.$.path
+      path.replace(/^.*?\./, '_.'),
+      // look up directly on data root
+      //   wrapper.$.path
+      path.replace(/^.*?\./, ''),
+      // look up trimmed path in datasource
+      //   datasourceId.path
+      path.replace(/^([^.]+).*?\.\$\./, '$1.'),
+      // look up trimmed path in catch all datasource
+      //   _.path
+      path.replace(/^.*?\.\$\./, '_.'),
+      // look up trimmed path on root
+      // path
+      path.replace(/^.*?\.\$\./, ''),
+      // for case of top-level object data mapping full path can be replaced to _
+      path.replace(/^[^.]+$/, '_')
+    ]
+      .filter((v, i, a) => a.indexOf(v) === i)
+      .reduce((v, path) => {
+        return v.length > 0 ? v : JSONPath({ path, json })
+      }, [] as any[])
+  }
+
+  if (singleValue && Array.isArray(collection)) {
+    return collection[0]
+  } else {
+    return collection
+  }
+}
+
+export type CH1Node =
+  | {
+      type: string
+      text?: string
+      content?: CH1Node[]
+      marks?: CH1Node[]
+      attrs?: Record<string, any>
+    }
+  | CH1Node[]
+function serializeCH1Tag(data: any, attrs: Record<string, string> = {}, tag: string): string {
+  if (!tag) return serializeCH1RichText(data)
+  return `<${tag}${Object.entries(attrs)
+    .map(([k, v]) => v != null && ` ${k}="${v}"`)
+    .filter(Boolean)
+    .join('')}>${serializeCH1RichText(data)}</${tag}>`.replace(/^<([a-z0-9][^>]*)><\/[^>]+>$/, '<$1 />')
+}
+export function serializeCH1RichText(data: CH1Node | string | null | undefined): string {
+  if (Array.isArray(data)) return data.map(serializeCH1RichText).join('\n').trim()
+  if (typeof data == 'string') return data
+  if (data == null) return ''
+  switch (data.type) {
+    case 'heading':
+      const { level, ...attrs } = data.attrs
+      return serializeCH1Tag(data.content, attrs, 'h' + level)
+    case 'text':
+      return ((data.marks || []) as any[]).reduce((text, mark) => {
+        return serializeCH1Tag(
+          text,
+          mark.attrs,
+          {
+            link: 'a',
+            bold: 'strong',
+            italic: 'em',
+            strike: 's',
+            underline: 'u'
+          }[mark.type as string]
+        )
+      }, data.text?.replace(/\s+/, ' '))
+    default:
+      return serializeCH1Tag(
+        data.content || data.text,
+        data.attrs,
+        {
+          bulletList: 'ul',
+          orderedList: 'ol',
+          listItem: 'li',
+          horizontalRule: 'hr',
+          paragraph: 'p',
+          codeBlock: 'code',
+          blockquote: 'blockquote'
+        }[data.type]
+      )
+  }
+}
+
+export { JSONPath }

package/src/{dom.ts → dom/rendering.ts}

@@ -1,5 +1,6 @@
-import { JSONPath } from 'jsonpath-plus'
-import { CloudStylesheet, CloudTemplate, fetchAndRevalidateComponent, fetchStylesheet } from './cloud.js'
+import { FEAASCDNComponentProps } from '../cdn.js'
+import { Datascopes, normalizeCollectionScope, queryScopes, serializeCH1RichText } from './data.js'
+import { loadScript } from './scripts.js'
 
 export interface FEAASCustomizations {
   processTemplate?: (element: HTMLElement, template: string, data: any) => string
@@ -13,32 +14,11 @@ export interface ExplicitTemplate {
   template: string
 }
 
-export type Datascopes = Record<string, any>
-
 export type FEAASComponentProps = {
   data?: Datascopes
-} & (ExplicitTemplate | CloudTemplate) &
+} & (ExplicitTemplate | FEAASCDNComponentProps) &
   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
@@ -91,62 +71,6 @@ function updateDOMClones(element: HTMLElement, targetCount: number, config?: FEA
   }
 }
 
-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
-    }
-  }
-
-  var collection = JSONPath({ path, json })
-
-  // If regular path didn't match any data, try fallbacks
-  // datasourceId.wrapper.$.path
-  if (Array.isArray(collection) && collection?.length == 0) {
-    collection = [
-      // look up in `_` datasource id (catch-all id is used in JSS)
-      //   _.wrapper.$.path
-      path.replace(/^.*?\./, '_.'),
-      // look up directly on data root
-      //   wrapper.$.path
-      path.replace(/^.*?\./, ''),
-      // look up trimmed path in datasource
-      //   datasourceId.path
-      path.replace(/^([^.]+).*?\.\$\./, '$1.'),
-      // look up trimmed path in catch all datasource
-      //   _.path
-      path.replace(/^.*?\.\$\./, '_.'),
-      // look up trimmed path on root
-      // path
-      path.replace(/^.*?\.\$\./, ''),
-      // for case of top-level object data mapping full path can be replaced to _
-      path.replace(/^[^.]+$/, '_')
-    ]
-      .filter((v, i, a) => a.indexOf(v) === i)
-      .reduce((v, path) => {
-        return v.length > 0 ? v : JSONPath({ path, json })
-      }, [] as any[])
-  }
-
-  if (singleValue && Array.isArray(collection)) {
-    return collection[0]
-  } else {
-    return collection
-  }
-}
-
 export function setDOMAttribute(element: HTMLElement, attribute: string, value: any, config?: FEAASCustomizations) {
   if (!element) return
   var target = element
@@ -213,54 +137,6 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   }
 }
 
-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(
@@ -343,93 +219,3 @@ export function renderHTMLContent(template: string, data?: Datascopes, config?:
     return root.innerHTML
   }
 }
-
-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 fetchAndRevalidateComponent(props, (template) => {
-        return renderDOMContent(root, template, props.data, props)
-      }).then(() => root)
-    }
-    /* update element with new data */
-  } else {
-    return renderDOMElement(root, props.data, props)
-  }
-}
-
-export type CH1Node =
-  | {
-      type: string
-      text?: string
-      content?: CH1Node[]
-      marks?: CH1Node[]
-      attrs?: Record<string, any>
-    }
-  | CH1Node[]
-function serializeCH1Tag(data: any, attrs: Record<string, string> = {}, tag: string): string {
-  if (!tag) return serializeCH1RichText(data)
-  return `<${tag}${Object.entries(attrs)
-    .map(([k, v]) => v != null && ` ${k}="${v}"`)
-    .filter(Boolean)
-    .join('')}>${serializeCH1RichText(data)}</${tag}>`.replace(/^<([a-z0-9][^>]*)><\/[^>]+>$/, '<$1 />')
-}
-export function serializeCH1RichText(data: CH1Node | string | null | undefined): string {
-  if (Array.isArray(data)) return data.map(serializeCH1RichText).join('\n').trim()
-  if (typeof data == 'string') return data
-  if (data == null) return ''
-  switch (data.type) {
-    case 'heading':
-      const { level, ...attrs } = data.attrs
-      return serializeCH1Tag(data.content, attrs, 'h' + level)
-    case 'text':
-      return ((data.marks || []) as any[]).reduce((text, mark) => {
-        return serializeCH1Tag(
-          text,
-          mark.attrs,
-          {
-            link: 'a',
-            bold: 'strong',
-            italic: 'em',
-            strike: 's',
-            underline: 'u'
-          }[mark.type as string]
-        )
-      }, data.text?.replace(/\s+/, ' '))
-    default:
-      return serializeCH1Tag(
-        data.content || data.text,
-        data.attrs,
-        {
-          bulletList: 'ul',
-          orderedList: 'ol',
-          listItem: 'li',
-          horizontalRule: 'hr',
-          paragraph: 'p',
-          codeBlock: 'code',
-          blockquote: 'blockquote'
-        }[data.type]
-      )
-  }
-}
-
-export { JSONPath }

package/src/dom/scripts.ts

@@ -0,0 +1,47 @@
+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
+    }
+  }
+}