@sitecore-feaas/clientside 0.1.19 → 0.1.21

package/src/fetch.ts

@@ -1,64 +1,95 @@
-/* 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.
+/**
+ * Utility to cache-bust static files. It relies on reading Date header to detect cached response, so it requires CORS
+ * settings to be set.
+ *
+ * It accepts validator function that determines if response is usable. If response was pulled from cache and is valid,
+ * the optional callback function is fired right away. Then HEAD request is made bypassing the cache, to see if the
+ * response has an newer Last-Modified header. In case it does and it passes validation, third request is fired that
+ * actually fetches the new content and callback is invoked the second time.
+ *
+ * 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.
+ */
+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
+  isCached?: boolean
+  response?: 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
+  url: ValidatableRequest['url'],
+  options?: ValidatableRequest['options'],
+  validator?: ValidatableRequest['validator'],
+  callback?: ValidatableRequest['callback']
 ) {
   // 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')
+  return fetchAndValidate({ url, options, validator, callback })
+    .then(refetchAndValidate)
+    .then((result) => result.response)
+}
 
+export async function fetchAndValidate(
+  { url, options, validator, callback }: ValidatableRequest,
+  phase: 'initial' | 'updated' | 'check' = 'initial'
+) {
+  const date = new Date()
+  console.log('fetch', phase, url)
+  const response = await fetch(url, options)
+  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
-  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'
-    })
+  const isCached = new Date(response.headers.get('date')) < date
+  callback?.(response, phase)
+  return {
+    url,
+    options,
+    isCached,
+    response,
+    validator
+  }
+}
 
-    // 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')
-      }
+export async function refetchAndValidate(request: ValidatableRequest & Required<Pick<ValidatableRequest, 'response'>>) {
+  const { url, isCached, options, validator, response, callback } = request
+  if (isCached) {
+    // check if response was stale by sending quick HEAD request busting cache
+    const { response: head } = await fetchAndValidate(
+      {
+        url: url + '?' + Math.random(),
+        options: {
+          ...options,
+          method: 'HEAD',
+          cache: 'no-cache'
+        },
+        validator
+      },
+      'check'
+    )
 
+    // 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
-      response = await fetch(url, {
-        ...options,
-        cache: 'reload'
-      })
+      return invalidateRequest(request)
     }
   }
+  return request
+}
 
-  if (validator(response) === false) {
-    throw new Error('Response is not valid')
-  }
-  if (initialResponse !== response) {
-    callback(response, 'valid')
-  }
-
-  return response
+export async function invalidateRequest(request: ValidatableRequest) {
+  const { url, options, validator, callback } = request
+  return fetchAndValidate(
+    {
+      url,
+      options: {
+        ...options,
+        cache: 'reload'
+      },
+      validator,
+      callback
+    },
+    'updated'
+  )
 }

package/src/ui/FEAASContext.tsx

@@ -4,7 +4,7 @@ import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
 export function FEAASContextProps(element: HTMLElement = this) {
   return {
     library: element?.getAttribute('library') as string,
-    src: element?.getAttribute('src') ?? '/assets/context.js',
+    src: element?.getAttribute('src') ?? '/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',
@@ -36,26 +36,24 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     return this.shadowRoot || this.attachShadow({ mode: 'open' })
   }
 
-  reactRoot: HTMLDivElement
-  getReactRoot() {
-    if (!this.reactRoot) {
-      this.reactRoot = document.createElement('div')
-      this.getRoot().appendChild(this.reactRoot)
+  reactRootElement: HTMLDivElement
+  getReactRootElement() {
+    if (!this.reactRootElement) {
+      this.reactRootElement = document.createElement('div')
+      this.getRoot().appendChild(this.reactRootElement)
     }
-    return this.reactRoot
+    return this.reactRootElement
   }
 
   /** Pull in children FEAAS react elements into the shadow DOM so they receieve the styles */
-  nestedCallback(event: Event) {
-    super.nestedCallback(event)
-
-    const target = event.composedPath()[0] as FEAASBase
-    if (target.parentNode != this.getRoot()) {
-      this.getRoot().appendChild(target)
-    }
+  connectedCallback(): void {
+    Array.from(this.children).forEach((child) => {
+      this.getRoot().appendChild(child)
+    })
+    super.connectedCallback()
   }
 
-  renderReact(
+  render(
     { children, library }: React.PropsWithChildren<FEAASContextProps>,
     { AppContext, Chakra: { Button, Tooltip }, React }: typeof this.payload
   ) {
@@ -69,6 +67,7 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     }
     return (
       <AppContext
+        backend={this.props.backend}
         libraryId={this.props.library}
         container={this.getRoot()}
         getToken={this.props.getToken}