@sitecore-feaas/clientside 0.1.27 → 0.1.29

package/src/dom/stylesheet.ts

@@ -0,0 +1,48 @@
+import {
+  FEAASCDNStylesheetParams,
+  fetchAndRevalidateStylesheet,
+  getStylesheetURL,
+  ValidatableStylesheetCallback
+} from '../cdn.js'
+export function renderStylesheet(props: FEAASCDNStylesheetParams, style?: HTMLStyleElement) {
+  renderStylesheetPromise(props, (style ||= document.createElement('style')))
+  return style
+}
+
+export function renderStylesheetPromise(props: FEAASCDNStylesheetParams, stylesheet?: HTMLStyleElement) {
+  stylesheet ||= document.createElement('style')
+  return fetchAndRevalidateStylesheet(props, (cssText, phase) => {
+    stylesheet.textContent = cssText
+  }).then(() => stylesheet)
+}
+
+export function loadStylesheet(props: FEAASCDNStylesheetParams, callback?: ValidatableStylesheetCallback) {
+  var foundStylesheet = findStylesheet(props) as HTMLStyleElement
+  if (!foundStylesheet) {
+    var createdStylesheet = createStylesheet(props)
+  }
+  return fetchAndRevalidateStylesheet(props, (cssText, phase) => {
+    if (createdStylesheet) {
+      createdStylesheet.textContent = cssText
+    }
+    callback?.(cssText, phase)
+  }).then(() => foundStylesheet || createdStylesheet)
+}
+
+export function loadStylesheetAllowStale(props: FEAASCDNStylesheetParams) {
+  return new Promise((resolve, reject) => {
+    loadStylesheet(props, resolve).catch(reject)
+  })
+}
+
+export function findStylesheet(props: FEAASCDNStylesheetParams) {
+  return document.head.querySelector(`style[data-href="${getStylesheetURL(props)}"]`)
+}
+
+export function createStylesheet(props: FEAASCDNStylesheetParams) {
+  const url = getStylesheetURL(props)
+  const stylesheet = document.createElement('style')
+  stylesheet.setAttribute('data-href', url)
+  document.head.appendChild(stylesheet)
+  return stylesheet
+}

package/src/fetch.ts

@@ -1,3 +1,5 @@
+import { ControlledPromise } from './utils/promise.js'
+
 /**
  * Utility to cache-bust static files. It relies on reading Date header to detect cached response, so it requires CORS
  * settings to be set.
@@ -10,60 +12,115 @@
  * It works as promise, but also accepts callback to use cached blobs mid-flight and have access to headers. Any network
  * errors will not be caught. Function throws when unable to fetch valid response.
  */
+const phases = ['initial', 'check', 'updated'] as const
+export type ValidatableRequestPhase = typeof phases[number]
+export type FetchCache = Record<string, FetchCacheRequest>
 export interface ValidatableRequest {
   url: Parameters<typeof fetch>[0]
   options?: Parameters<typeof fetch>[1]
   validator?: (resposne: Response) => boolean
-  callback?: (response: Response, status: 'initial' | 'updated' | 'check') => void
+  callback?: (response: Response, status: ValidatableRequestPhase) => any
   isCached?: boolean
   response?: Response
+  cache?: FetchCache
+}
+
+export type FetchCacheRequest = {
+  phase: ValidatableRequestPhase
+  initial: ControlledPromise<Response>
+  check: ControlledPromise<Response>
+  updated: ControlledPromise<Response>
+  final: ControlledPromise<Response>
+}
+
+export var fetchCache: Record<string, FetchCacheRequest> = {}
+export function clearFetchCache() {
+  fetchCache = {}
 }
 
 export async function fetchAndRevalidate(
   url: ValidatableRequest['url'],
   options?: ValidatableRequest['options'],
   validator?: ValidatableRequest['validator'],
-  callback?: ValidatableRequest['callback']
+  callback?: ValidatableRequest['callback'],
+  cache: FetchCache = fetchCache
 ) {
   // make request as usual, see if there's cached version of an asset
-  return fetchAndValidate({ url, options, validator, callback })
-    .then(refetchAndValidate)
+  return fetchWithCacheAwareness({ url, options, validator, callback, cache })
+    .then(fetchToValidateCache)
     .then((result) => result.response)
 }
 
-export async function fetchAndValidate(
-  { url, options, validator, callback }: ValidatableRequest,
-  phase: 'initial' | 'updated' | 'check' = 'initial'
+export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = false) {
+  const key = String(url).replace('?head', '')
+  var cache = fetchCache[key]
+  if (!cache && !dontCreate) {
+    cache = fetchCache[key] = {
+      phase: null,
+      initial: ControlledPromise(),
+      check: ControlledPromise(),
+      updated: ControlledPromise(),
+      final: ControlledPromise()
+    }
+  }
+  return cache
+}
+
+export async function fetchWithCacheAwareness(
+  { url, options, validator, callback, cache }: ValidatableRequest,
+  phase: ValidatableRequestPhase = 'initial'
 ) {
   const date = new Date()
-  const response = await fetch(url, options)
+  if (cache != null) {
+    var cachedRequest = getFetchCache(url)
+    if (phases.indexOf(cachedRequest.phase) >= phases.indexOf(phase)) {
+      var promise = cachedRequest[phase]
+    } else {
+      cachedRequest.phase = phase
+    }
+  }
+  const response = await (promise || fetch(url, options))
+  if (!promise && cachedRequest) {
+    if (!response.ok) {
+      cachedRequest[phase].reject(new Error('Fetch failed'))
+    } else {
+      cachedRequest[phase].resolve(response)
+    }
+  }
   if (!response.ok) throw new Error('Fetch failed')
   if (validator?.(response) === false) throw new Error('Response is not valid')
   // see if response was pulled from cache
-  const isCached = new Date(response.headers.get('date')) < date
-  callback?.(response, phase)
+  const isCached =
+    new Date(response.headers.get('date')) < date ||
+    (promise && phase == 'initial' && (cachedRequest.phase == 'updated' || cachedRequest.phase == 'check'))
+  await callback?.(response, phase)
   return {
     url,
     options,
     isCached,
     response,
-    validator
+    validator,
+    callback,
+    cache
   }
 }
 
-export async function refetchAndValidate(request: ValidatableRequest & Required<Pick<ValidatableRequest, 'response'>>) {
-  const { url, isCached, options, validator, response, callback } = request
+export async function fetchToValidateCache(
+  request: ValidatableRequest & Required<Pick<ValidatableRequest, 'response'>>
+) {
+  const { url, isCached, options, validator, response, cache } = request
   if (isCached) {
     // check if response was stale by sending quick HEAD request busting cache
-    const { response: head } = await fetchAndValidate(
+    const { response: head } = await fetchWithCacheAwareness(
       {
-        url: url + '?' + Math.random(),
+        url: url + '?head',
         options: {
           ...options,
           method: 'HEAD',
           cache: 'no-cache'
         },
-        validator
+        validator,
+        cache
       },
       'check'
     )
@@ -71,23 +128,20 @@ export async function refetchAndValidate(request: ValidatableRequest & Required<
     // there's a newer version of the file that we may fetch
     if (head.headers.get('last-modified') != response.headers.get('last-modified')) {
       // otherwise the new resource has to be re-fetched
-      return invalidateRequest(request)
+      return fetchBypassingCache(request)
     }
   }
   return request
 }
 
-export async function invalidateRequest(request: ValidatableRequest) {
-  const { url, options, validator, callback } = request
-  return fetchAndValidate(
+export async function fetchBypassingCache(request: ValidatableRequest) {
+  return fetchWithCacheAwareness(
     {
-      url,
+      ...request,
       options: {
-        ...options,
+        ...request.options,
         cache: 'reload'
-      },
-      validator,
-      callback
+      }
     },
     'updated'
   )

package/src/{basic.ts → headless.ts}

@@ -1,8 +1,17 @@
+/**
+ * Simplified build of clientside that does not rely on any Frontend UI (like pickers). It refered from Frontend app to
+ * avoid circular dependency. Regular clientside build entry point is in ui/index.ts
+ */
+
 import FEAASElement from './components/FEAASElement.js'
 
-export * from './dom.js'
+export * from './dom/rendering.js'
+export * from './dom/data.js'
+export * from './dom/scripts.js'
+export * from './dom/stylesheet.js'
+export * from './dom/component.js'
 export * from './fetch.js'
-export * from './cloud.js'
+export * from './cdn.js'
 export * from './components/FEAASBase.js'
 export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'

package/src/ui/FEAASContext.tsx

@@ -1,4 +1,5 @@
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/types/components/providers/ContextProvider.js'
+import type { AuthModel } from '@sitecore-feaas/sdk'
 import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
 
 export function FEAASContextProps(element: HTMLElement = this) {
@@ -8,10 +9,11 @@ export function FEAASContextProps(element: HTMLElement = this) {
     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>
+    auth: null as Partial<AuthModel>,
+    isolate: element?.getAttribute('isolate') == null || element?.getAttribute('isolate') == 'true'
   }
 }
-type FEAASContextProps = ReturnType<typeof FEAASContextProps>
+export type FEAASContextProps = ReturnType<typeof FEAASContextProps>
 
 /**
  * Context provides shared parameters and react providers for its nested elements. It loads lazily once any of its
@@ -23,8 +25,12 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return FEAASContextProps(this)
   }
 
+  defaultProps = {
+    isolate: true
+  } as Partial<FEAASContextProps>
+
   load() {
-    return import(/* @vite-ignore */ /* webpackIgnore: true */ this.formatURL(this.props.src, this.props.frontend))
+    return this.import(this.formatURL(this.props.src, this.props.frontend))
   }
 
   isReadyToLoad() {
@@ -38,11 +44,13 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
   }
 
   getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
+    if (this.getAttribute('isolate') === 'false') return this
     return this.shadowRoot || this.attachShadow({ mode: 'open' })
   }
 
   reactRootElement: HTMLDivElement
   getReactRootElement() {
+    //if (!this.props.isolate) return this.getRoot()
     if (!this.reactRootElement) {
       this.reactRootElement = document.createElement('div')
       this.getRoot().appendChild(this.reactRootElement)
@@ -81,7 +89,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
         backend={this.props.backend}
         libraryId={this.props.library}
         container={this.getRoot()}
-        getToken={this.props.getToken}
+        auth={this.props.auth}
         getTheme={this.getTheme}
         onStatusChange={this.onStatusChange}
         modalProps={{

package/src/ui/FEAASEditor.tsx

@@ -70,6 +70,10 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
 
   static observedAttributes = ['library', 'component', 'version', 'revision', 'hidden', 'state', 'changed', 'forked']
 
+  defaultProps = {
+    hidden: false
+  } as Partial<FEAASEditorProps>
+
   getProps() {
     return FEAASEditorProps(this)
   }
@@ -230,6 +234,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
   }
 
   setPlaceholder() {
+    if (!this.iframe) return
     const x = this.iframe.clientWidth
     const y = this.iframe.clientHeight
     const rect = this.iframe.getBoundingClientRect()

package/src/ui/FEAASPicker.tsx

@@ -16,17 +16,21 @@ export function FEAASPickerProps(element: FEAASBase<any, any> = this) {
     onContextAttributeSet: undefined as (context: any, attribute: string, value: string) => void
   }
 }
-type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
+export type FEAASPickerProps = ReturnType<typeof FEAASPickerProps>
 
 export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerImports> {
   static observedAttributes = ['library', 'mode', 'frontend', 'src', 'hidden', 'variant']
 
+  defaultProps = {
+    hidden: false
+  } as Partial<FEAASPickerProps>
+
   getProps() {
     return FEAASPickerProps(this)
   }
 
   load() {
-    return import(/* @vite-ignore */ /* webpackIgnore: true */ this.formatURL(this.props.src, this.props.frontend))
+    return this.import(this.formatURL(this.props.src, this.props.frontend))
   }
 
   render(

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-export * from '../basic.js'
+export * from '../headless.js'
 export * from './FEAASEditor.js'
 export * from './FEAASPicker.js'
 export * from './FEAASContext.js'

package/src/ui/react.tsx

@@ -0,0 +1,8 @@
+import { FEAASComponentProps } from '../headless.js'
+
+export * from './index.js'
+import React from 'react'
+
+export function FEAASEmbed({ data, ...props }: FEAASComponentProps & { src: string }) {
+  return <feaas-component {...props} data={data ? JSON.stringify(data) : null} />
+}

package/src/utils/promise.ts

@@ -0,0 +1,34 @@
+export type ControlledPromise<T> = Promise<T> & {
+  resolve: (...args: any) => void
+  reject: (e: Error) => void
+  restart: () => ControlledPromise<T>
+  first: ControlledPromise<T>
+}
+
+export function ControlledPromise<T>(onSuccess?: (result: T) => void, onFailure = (e: Error) => {}) {
+  var first: ControlledPromise<T>
+  const restart = () => {
+    var resolve: (...args: any) => void
+    var reject: (e: Error) => void
+    const promise = new Promise<T>((success, failure) => {
+      resolve = (value: T) => {
+        onSuccess?.(value)
+        success(value)
+      }
+      reject = failure
+    })
+    var controlled: ControlledPromise<T> = Object.assign(promise, {
+      resolve,
+      reject,
+      restart,
+      first
+    })
+    first = controlled
+
+    // Avoid unhandled rejection
+    controlled.catch(onFailure)
+
+    return controlled
+  }
+  return restart()
+}

package/test/FEAASBase.test.tsx

@@ -0,0 +1,195 @@
+import { describe, it, assert, beforeAll, expect } from 'vitest'
+import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { JSDOM } from 'jsdom'
+
+describe('React', function () {
+  describe('Error boundary', () => {
+    class FEAASErrorTest extends FEAASBase<{ throwAt: string }> {
+      static observedAttributes = ['test']
+
+      log() {}
+
+      getProps() {
+        this.fail('get-props')
+        return {
+          throw: this.getAttribute('throw') ?? null,
+          test: this.getAttribute('test')
+        }
+      }
+
+      mount() {
+        if (this.fail('before-mount', true)) return
+        super.mount()
+        if (this.fail('after-mount', true)) {
+          super.unmount()
+        }
+      }
+
+      unmount() {
+        this.fail('before-unmount', true)
+        super.unmount()
+        this.fail('after-unmount', true)
+      }
+
+      connectedCallback(): void {
+        super.connectedCallback()
+      }
+
+      load() {
+        this.fail('before-load')
+        return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+          ([React, ReactDOM, ReactDOMClient]) => {
+            this.fail('after-load')
+            return { React, ReactDOM, ReactDOMClient }
+          }
+        )
+      }
+
+      render({}: typeof this.props, { React }: ReactPayload) {
+        const error = console.error
+        console.error = () => {}
+        requestAnimationFrame(() => (console.error = error))
+        this.fail('render')
+        return <div>{1}</div>
+      }
+
+      fail(type: string, soft = false) {
+        if (
+          (this.getAttribute('throw') == 'initial-' + type && !this.initialized) ||
+          (this.getAttribute('throw') == 'subsequent-' + type && this.initialized)
+        ) {
+          const e = new Error(this.getAttribute('throw'))
+          if (soft) {
+            this.onError(e)
+            return true
+          } else {
+            throw e
+          }
+        }
+      }
+    }
+    FEAASErrorTest.register('feaas-test-error-boundary')
+    const errors = [] as Error[]
+    document.addEventListener('feaasError', (e: CustomEvent<Error>) => {
+      errors.push(e.detail)
+      //e.preventDefault()
+    })
+
+    describe('during initialization', () => {
+      it('should render successfuly', async () => {
+        document.write('<feaas-test-error-boundary></feaas-test-error-boundary>')
+        await (document.body.firstElementChild as FEAASErrorTest).whenRendered
+        expect(document.body.innerHTML).toEqual(`<feaas-test-error-boundary><div>1</div></feaas-test-error-boundary>`)
+      })
+      async function failOn(errorType: string) {
+        try {
+          document.write(`<feaas-test-error-boundary throw="${errorType}"></feaas-test-error-boundary>`)
+        } catch (e) {}
+        const component = document.body.firstElementChild as FEAASErrorTest
+
+        // Initialization promise is rejected
+        await Promise.all([
+          expect(() => component.whenRendered).rejects.toEqual(new Error(errorType)),
+          expect(() => component.whenLoaded).rejects.toEqual(new Error(errorType))
+        ])
+
+        // feaasEvent is dispatched and bubbled to dom
+        expect(errors.splice(0)).toEqual([new Error(errorType)])
+
+        // Component is auto-unmounted (but not ejected from dom)
+        expect(component.connected).toBe(false)
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary throw="${errorType}"></feaas-test-error-boundary>`
+        )
+      }
+      it('handles error on get-props', () => failOn('initial-get-props'))
+      it('handles error on before mount', () => failOn('initial-before-mount'))
+      it('handles error on after mount', () => failOn('initial-after-mount'))
+      it('handles error on before load', () => failOn('initial-before-load'))
+      it('handles error on after load', () => failOn('initial-after-load'))
+    })
+    describe('during first render', () => {
+      it('should render successfuly', async () => {
+        document.write('<feaas-test-error-boundary></feaas-test-error-boundary>')
+        await (document.body.firstElementChild as FEAASErrorTest).whenRendered
+        expect(document.body.innerHTML).toEqual(`<feaas-test-error-boundary><div>1</div></feaas-test-error-boundary>`)
+      })
+      async function failOn(errorType: string) {
+        try {
+          document.write(`<feaas-test-error-boundary throw="${errorType}"></feaas-test-error-boundary>`)
+        } catch (e) {}
+        const component = document.body.firstElementChild as FEAASErrorTest
+
+        // Initialization promise is rejected
+        await Promise.all([
+          expect(() => component.whenRendered).rejects.toEqual(new Error(errorType)),
+          expect(component.whenLoaded).resolves.toBeTruthy()
+        ])
+
+        // feaasEvent is dispatched and bubbled to dom
+        expect(errors.splice(0)).toEqual([new Error(errorType)])
+
+        // Component is auto-unmounted (but not ejected from dom)
+        expect(component.connected).toBe(false)
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary throw="${errorType}"></feaas-test-error-boundary>`
+        )
+      }
+      it('handles error on render', () => failOn('initial-render'))
+    })
+    describe('subsequently', () => {
+      it('should render successfuly', async () => {
+        document.write('<feaas-test-error-boundary></feaas-test-error-boundary>')
+        const component = document.body.firstElementChild as FEAASErrorTest
+        await expect(component.whenLoaded).resolves.toBeTruthy()
+        component.setAttribute('test', 'lol')
+        await expect(component.whenRendered).resolves.toEqual(component)
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary test="lol"><div>1</div></feaas-test-error-boundary>`
+        )
+      })
+      async function failOn(errorType: string, callback: (component: FEAASErrorTest) => void) {
+        document.write(`<feaas-test-error-boundary throw="${errorType}"></feaas-test-error-boundary>`)
+        const component = document.body.firstElementChild as FEAASErrorTest
+
+        // Initialization promise is resolved
+        await expect(component.whenLoaded).resolves.toBeTruthy()
+        await expect(component.whenRendered).resolves.toBeTruthy()
+
+        // No errors were thrown during initialization
+        expect(errors.splice(0)).toEqual([])
+
+        // Component has rendered
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary throw="${errorType}"><div>1</div></feaas-test-error-boundary>`
+        )
+
+        // Execute logic after initialization
+        callback(component)
+        await expect(() => component.whenRendered).rejects.toEqual(new Error(errorType))
+
+        // feaasEvent is dispatched and bubbled to dom
+        expect(errors.splice(0)).toEqual([new Error(errorType)])
+
+        // Component is auto-unmounted (but not ejected from dom)
+        expect(component.connected).toBe(false)
+      }
+      it('handles error on change', async () => {
+        await failOn('subsequent-get-props', (component) => {
+          component.setAttribute('test', 'lol')
+        })
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary throw="subsequent-get-props" test="lol"><div>1</div></feaas-test-error-boundary>`
+        )
+      })
+      it('handles error on render', async () => {
+        await failOn('subsequent-render', (component) => {
+          component.setAttribute('test', 'lol')
+        })
+        expect(document.body.innerHTML).toEqual(
+          `<feaas-test-error-boundary throw="subsequent-render" test="lol"></feaas-test-error-boundary>`
+        )
+      })
+    })
+  })
+})