@sitecore-feaas/clientside 0.5.5 → 0.5.7

package/src/cdn.ts

@@ -108,6 +108,9 @@ export function getStylesheetURL(props: FEAASCDNStylesheetProps) {
     props = { src: props }
   }
   if ('src' in props) {
+    // edge url are always well formed
+    if (String(props.src).includes('v1/files/components/styles')) return props.src
+
     props = {
       ...parseStylesheetSource(props.src)
     }
@@ -188,7 +191,6 @@ export async function fetchAndRevalidateStylesheet(
   props: FEAASCDNStylesheetProps,
   callback: ValidatableStylesheetCallback
 ) {
-  if (typeof props == 'string') props = { src: props }
   return fetchAndRevalidate(
     getStylesheetURL(props),
     {

package/src/dom/rendering.ts

@@ -96,23 +96,33 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   } 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) || []
-    if (!Array.isArray(value))
-      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)
+    if (!Array.isArray(value)) {
+      const oldKeys = element.getAttribute('data-attributes-keys')?.split(',').filter(Boolean) || []
+      if (!Array.isArray(value))
+        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(','))
+    }
+    // BYOC components also accept their data object in datasources attribute.
+    if (element.tagName == 'FEAAS-EXTERNAL') {
+      const datasourceId =
+        String(element.getAttribute('data-path-attributes') || '')
+          .slice(0, -1)
+          .split('.')[0] || '_'
+      setDOMAttribute(element, 'datasources', JSON.stringify({ [datasourceId]: value }))
     }
-    setDOMAttribute(element, 'data-attributes-keys', Object.keys(value || {}).join(','))
     return
   }
   if (typeof value == 'boolean') {
@@ -198,7 +208,12 @@ export function renderDOMElement(
     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)
+        setDOMAttribute(
+          element,
+          name,
+          queryScopes(datascopes, datapath, true, undefined, element.tagName != 'FEAAS-EXTERNAL'),
+          config
+        )
       }
       if (name == 'data-embed-src') {
         setDOMAttribute(element, name, element.getAttribute(name), config)

package/src/dom/stylesheet.ts

@@ -2,6 +2,7 @@ import {
   FEAASCDNStylesheetProps,
   fetchAndRevalidateStylesheet,
   getStylesheetURL,
+  parseStylesheetSource,
   ValidatableStylesheetCallback
 } from '../cdn.js'
 
@@ -19,15 +20,18 @@ export function renderStylesheetPromise(props: FEAASCDNStylesheetProps, styleshe
 
 const validatedStylesheets = new WeakSet<HTMLStyleElement | HTMLLinkElement>()
 export function loadStylesheet(props: FEAASCDNStylesheetProps, callback?: ValidatableStylesheetCallback) {
-  var foundStylesheet: HTMLStyleElement | HTMLLinkElement
   var writableStylesheet: HTMLStyleElement
+  var foundStylesheet = findStylesheet(props)
 
-  if (foundStylesheet && validatedStylesheets.has(foundStylesheet)) {
-    return Promise.resolve(foundStylesheet)
+  if (foundStylesheet) {
+    if (validatedStylesheets.has(foundStylesheet)) {
+      return Promise.resolve(foundStylesheet)
+    }
+    // it can be that page already have stylesheet using alternative URL (e.g. edge url), use that instead
+    props = foundStylesheet.getAttribute('data-href') || foundStylesheet.getAttribute('href')
   }
 
   return fetchAndRevalidateStylesheet(props, (cssText, phase) => {
-    foundStylesheet ||= findStylesheet(props)
     // dont need to write stylesheet for cached state if we already found a stylesheet
     if (!(phase == 'initial' && foundStylesheet)) {
       writableStylesheet ||=
@@ -35,7 +39,7 @@ export function loadStylesheet(props: FEAASCDNStylesheetProps, callback?: Valida
       writableStylesheet.textContent = cssText
     }
     callback?.(cssText, phase)
-  }).then(() => foundStylesheet || writableStylesheet)
+  }).then(() => writableStylesheet || foundStylesheet)
 }
 
 export function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps) {
@@ -44,11 +48,17 @@ export function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps) {
   })
 }
 
+// Find stylesheet on the page for given props, also check by alternative edge url
 export function findStylesheet(props: FEAASCDNStylesheetProps) {
-  return (document.head.querySelector(`style[data-href="${getStylesheetURL(props)}"]`) ||
-    document.querySelector(`link[rel="stylesheet"][href="${getStylesheetURL(props)}"]`)) as
-    | HTMLStyleElement
-    | HTMLLinkElement
+  const cdnURL = getStylesheetURL(props)
+  const { library } = parseStylesheetSource(cdnURL)
+  const edgeURL = `/files/components/styles/${library}.css`
+  return document.querySelector(
+    `style[data-href="${cdnURL}"], 
+    link[rel="stylesheet"][href="${cdnURL}"], 
+    style[data-href*="${edgeURL}"], 
+    link[rel="stylesheet"][href*="${edgeURL}"]`
+  ) as HTMLStyleElement | HTMLLinkElement
 }
 
 export function createStylesheet(props: FEAASCDNStylesheetProps) {

package/src/dom/thumbnail.ts

@@ -2,7 +2,7 @@ import type { SDK, Style, VersionModel, ComponentModel, StylesheetModel } from '
 import { fetchAndRevalidate } from '../fetch.js'
 import { renderComponent } from './component.js'
 
-export type Callback = (image: HTMLImageElement, isCached: boolean) => void
+export type Callback = (image: HTMLImageElement | null, isCached: boolean) => void
 
 export const convertBase64toBlob = (base64: string) => fetch(base64).then((res) => res.blob())
 

package/src/fetch.ts

@@ -1,17 +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.
- *
- * 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.
- */
 const phases = ['initial', 'check', 'updated'] as const
 export type ValidatableRequestPhase = (typeof phases)[number]
 export type FetchCache = Record<string, FetchCacheRequest>
@@ -38,6 +26,18 @@ export function clearFetchCache() {
   fetchCache = {}
 }
 
+/**
+ * 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 async function fetchAndRevalidate(
   url: ValidatableRequest['url'],
   options?: ValidatableRequest['options'],
@@ -51,23 +51,6 @@ export async function fetchAndRevalidate(
     .then((result) => result.response)
 }
 
-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 class InvalidResponse extends Error {}
-
 /**
  * Executes a fetch request optionally validating and handling the response. Using callback function it's possible to
  * observe successful response twice: Cached version first, and up-to-date later.
@@ -123,6 +106,23 @@ export async function fetchWithCacheAwareness(
   }
 }
 
+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 class InvalidResponse extends Error {}
+
 /**
  * Validates cache of previousl fetch If the resource is cached and there is a newer version available, it will be
  * re-fetched.

package/src/utils/data.ts

@@ -7,11 +7,15 @@ export function queryObjectRaw(json: any, path: string) {
     return []
   }
 }
-export function queryObject(json: any, path: string) {
-  return queryObjectRaw(json, path)?.flat(Infinity) || []
+export function queryObject(json: any, path: string, flatten = true) {
+  const data = queryObjectRaw(json, path) || []
+  if (flatten) {
+    return data.flat(Infinity)
+  }
+  return data
 }
 
-export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
+export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes, flatten = true) {
   var path = datapath
   /* find closest parent scope */
   const keys = Object.keys(scopes).sort((b, a) => a.length - b.length)
@@ -30,11 +34,11 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
     }
   }
 
-  var collection = queryObject(json, path)
+  var collection = queryObject(json, path, flatten)
 
   // If regular path didn't match any data, try fallbacks
   // datasourceId.wrapper.$.path
-  if (Array.isArray(collection) && collection?.length == 0) {
+  if (collection.length == 0) {
     collection = [
       // look up in `_` datasource id (catch-all id is used in JSS)
       //   _.wrapper.$.path
@@ -56,11 +60,11 @@ export function queryScopes(scopes: any, datapath: string, singleValue = false,
     ]
       .filter((v, i, a) => a.indexOf(v) === i)
       .reduce((v, path) => {
-        return v.length > 0 ? v : queryObject(json, path)
+        return v.length > 0 ? v : queryObject(json, path, flatten)
       }, [] as any[])
   }
 
-  if (singleValue && Array.isArray(collection)) {
+  if (singleValue) {
     return collection[0]
   } else {
     return collection

package/test/FEAASComponent.react.test.tsx

@@ -9,9 +9,11 @@ function Hello(props: { firstName: string; telephone: string }) {
   return React.createElement(
     'div',
     {},
-    `Hello my name is ${props.firstName} (${typeof props.firstName}) and my tel is ${
-      props.telephone
-    } (${typeof props.telephone}). And context value is ${context}`
+    `
+Hello my name is ${props.firstName || 'Unknown'} (${typeof props.firstName}) and my tel is ${
+      props.telephone || 'Unknown'
+    } (${typeof props.telephone}).
+And context value is ${context}`
   )
 }
 const helloSchema = {
@@ -26,6 +28,36 @@ const helloSchema = {
   }
 } as const
 
+function HelloData(props: { firstName: string; telephone: string; datasources: any; superobject: any }) {
+  const context = useContext(DataContext)
+
+  return React.createElement(
+    'div',
+    {},
+    `
+Hello my name is ${props.firstName || 'Unknown'} (${typeof props.firstName}) and my tel is ${
+      props.telephone || 'Unknown'
+    } (${typeof props.telephone}).
+And context value is ${context}.
+Typeof datasources: ${typeof props.datasources} with keys ${Object.keys(props.datasources || {})})
+Typeof superobject ${typeof props.superobject}, ${JSON.stringify(props.superobject)})`
+  )
+}
+const helloDataSchema = {
+  name: 'MyTestDataComponent',
+  properties: {
+    firstName: {
+      type: 'string'
+    },
+    telephone: {
+      type: 'number'
+    },
+    superobject: {
+      type: 'object'
+    }
+  }
+} as const
+
 export async function validate(react: any, html: string) {
   const div = document.createElement('div')
   document.body.appendChild(div)
@@ -123,7 +155,9 @@ describe('React', () => {
       <section>
         <ExternalComponent componentName='MyTestComponent' telephone={'12345'} firstName='Yarik' />
       </section>,
-      '<section><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></section>'
+      '<section><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 12345 (number).\n' +
+        'And context value is DEFAULT</div></feaas-external></section>'
     )
   })
   it('render wrapped external component with parsed values', async () => {
@@ -137,7 +171,29 @@ describe('React', () => {
           data={{ abc: 321 }}
         ></Component>
       </section>,
-      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is DEFAULT</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 12345 (number).\n' +
+        'And context value is DEFAULT</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render wrapped external component and parse data object', async () => {
+    registerComponent(HelloData, helloDataSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external data-path-attributes="my.$" first-name="Yarik" data-external-id="MyTestDataComponent"></feaas-external>'
+            }
+            data={{ my: { telephone: 321, superobject: { a: 1, b: 2 } } }}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      `<section><feaas-component class="-feaas" data="{&quot;my&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;a&quot;:1,&quot;b&quot;:2}}}"><feaas-external data-external-id="MyTestDataComponent" telephone="321" superobject="{&quot;a&quot;:1,&quot;b&quot;:2}" data-path-attributes="my.$" first-name="Yarik" data-attributes-keys="telephone,superobject" datasources="{&quot;my&quot;:{&quot;telephone&quot;:321,&quot;superobject&quot;:{&quot;a&quot;:1,&quot;b&quot;:2}}}" hydrate="false"><div>
+Hello my name is Yarik (string) and my tel is 321 (number).
+And context value is INHERITED.
+Typeof datasources: object with keys my)
+Typeof superobject object, {"a":1,"b":2})</div></feaas-external></feaas-component></section>`
     )
   })
   it('render wrapped external component with context provider', async () => {
@@ -153,7 +209,9 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 12345 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;abc&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="12345" first-name="Yarik" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 12345 (number).\n' +
+        'And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
   it('render wrapped external component with context provider and data mapping', async () => {
@@ -169,7 +227,27 @@ describe('React', () => {
           ></Component>
         </section>
       </DataContext.Provider>,
-      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-external-id="MyTestComponent" data-path-attributes="$" first-name="Yarik" telephone="321" data-attributes-keys="telephone" hydrate="false"><div>Hello my name is Yarik (string) and my tel is 321 (number). And context value is INHERITED</div></feaas-external></feaas-component></section>'
+      '<section><feaas-component class="-feaas" data="{&quot;telephone&quot;:321}"><feaas-external data-external-id="MyTestComponent" telephone="321" data-path-attributes="$" first-name="Yarik" data-attributes-keys="telephone" datasources="{&quot;_&quot;:{&quot;telephone&quot;:321}}" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is 321 (number).\n' +
+        'And context value is INHERITED</div></feaas-external></feaas-component></section>'
+    )
+  })
+  it('render not map attributes of external component with given array', async () => {
+    registerComponent(Hello, helloSchema)
+    validate(
+      <DataContext.Provider value='INHERITED'>
+        <section>
+          <Component
+            template={
+              '<feaas-external first-name="Yarik" data-path-attributes="$" data-external-id="MyTestComponent"></feaas-external>'
+            }
+            data={[{ telephone: 321 }]}
+          ></Component>
+        </section>
+      </DataContext.Provider>,
+      '<section><feaas-component class="-feaas" data="[{&quot;telephone&quot;:321}]"><feaas-external data-external-id="MyTestComponent" first-name="Yarik" data-path-attributes="$" datasources="{&quot;_&quot;:[{&quot;telephone&quot;:321}]}" hydrate="false"><div>\n' +
+        'Hello my name is Yarik (string) and my tel is Unknown (undefined).\n' +
+        'And context value is INHERITED</div></feaas-external></feaas-component></section>'
     )
   })
 })

package/test/FEAASStylesheet.test.tsx

@@ -1,7 +1,7 @@
 import { afterAll, beforeEach, beforeAll, describe, expect, it, vi } from 'vitest'
 import { FEAASStylesheet } from '../src/components/FEAASStylesheet.js'
 import { renderDOMContent } from '../src/dom/rendering.js'
-import { clearFetchCache, DEFAULT_CDN_URL, loadStylesheet } from '../src/headless.js'
+import { clearFetchCache, DEFAULT_CDN_URL, findStylesheet, loadStylesheet } from '../src/headless.js'
 
 const earliest = new Date(2000, 1, 1, 0, 0, 0)
 const earlier = new Date(2000, 1, 2, 0, 0, 0)
@@ -179,5 +179,107 @@ describe('Stylesheet', () => {
     await expect(loadStylesheet(`http://CDN/L/published.css`).then((r) => r.textContent)).resolves.toEqual('FRESH {}')
   })
 
-  it('should ')
+  describe('.findStylesheet', () => {
+    it('should find FEAASStylesheet', async () => {
+      const spy = vi.spyOn(global, 'fetch')
+      spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        // Serve from cache
+        return new Response('CSS {}', {
+          headers: {
+            date: earlier.toUTCString(),
+            'last-modified': earliest.toUTCString()
+          }
+        })
+      })
+
+      document.body.innerHTML = '<feaas-stylesheet library="L" cdn="https://CDN" revision="staged"></feaas-stylesheet>'
+      const stylesheet = document.body.firstElementChild as FEAASStylesheet
+      await stylesheet.whenRendered
+      expect(findStylesheet({ library: 'L', cdn: 'https://CDN', revision: 'staged' })?.textContent).toEqual('CSS {}')
+    })
+  })
+  it('should find stylesheet by its edge url', async () => {
+    document.body.innerHTML =
+      '<link rel="http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc/>'
+    expect(findStylesheet({ library: 'L', cdn: 'https://CDN', revision: 'staged' })).toEqual(
+      document.body.firstElementChild
+    )
+    expect(findStylesheet({ library: 'L', cdn: 'https://CDN', revision: 'published' })).toEqual(
+      document.body.firstElementChild
+    )
+    expect(findStylesheet({ library: 'T', cdn: 'https://CDN', revision: 'staged' })).toEqual(null)
+    expect(findStylesheet({ library: 'T', cdn: 'https://CDN', revision: 'published' })).toEqual(null)
+  })
+  it('should reload stylesheet embedded as edge url', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      if (
+        !url.includes(
+          'http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc'
+        )
+      )
+        return
+
+      if (options?.method != 'HEAD') {
+        // Serve from cache
+        return new Response('YESTERDAY {}', {
+          headers: {
+            date: earlier.toUTCString(),
+            'last-modified': earliest.toUTCString()
+          }
+        })
+      } else if (options?.method == 'HEAD') {
+        return new Response(null, {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      } else {
+        return new Response('FRESH {}', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      }
+    })
+
+    document.body.innerHTML =
+      '<link rel="stylesheet" href="http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc" />'
+
+    const stylesheet = await loadStylesheet({ library: 'L', cdn: 'https://CDN', revision: 'staged' })
+    expect(stylesheet?.tagName).toEqual('STYLE')
+    expect(stylesheet?.getAttribute('data-href')).toEqual(
+      'http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc'
+    )
+  })
+  it("should not attempt to reload edge stylesheet if it's up to date", async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      if (
+        !url.includes(
+          'http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc'
+        )
+      )
+        return
+
+      if (options?.method != 'HEAD') {
+        // Serve from cache
+        return new Response('YESTERDAY {}', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earliest.toUTCString()
+          }
+        })
+      }
+    })
+
+    document.body.innerHTML =
+      '<link rel="stylesheet" href="http://edge-platform-staging.sitecore-staging.cloud/v1/files/components/styles/L.css?sitecoreContextId=abc" />'
+
+    const stylesheet = await loadStylesheet({ library: 'L', cdn: 'https://CDN', revision: 'staged' })
+    expect(stylesheet?.tagName).toEqual('LINK')
+    expect(stylesheet).toEqual(document.body.firstElementChild)
+  })
 })

package/test/dom.test.ts

@@ -173,6 +173,14 @@ describe('DOM Clientside', function () {
         '<div data-path-attributes="test" a="a.jpg" b="2" c="{&quot;user&quot;:&quot;yarik&quot;}" data-attributes-keys="a,b,c"></div>'
       )
     })
+    /*
+    it('should render attributes object with global top level fallback', function () {
+      assertRenderedHTML(
+        `<div data-path-attributes="test"></div>`,
+        { a: 'a.jpg', b: 2, c: { user: 'yarik' } },
+        '<div data-path-attributes="test" a="a.jpg" b="2" c="{&quot;user&quot;:&quot;yarik&quot;}" data-attributes-keys="a,b,c"></div>'
+      )
+    }) */
     it('should render attributes in dynamic html', function () {
       assertRenderedHTML(
         `<div data-path="html"></div>`,

package/types/cdn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,uBAAuB,EACxB,MAAM,YAAY,CAAA;AAEnB,eAAO,MAAM,eAAe,wCAAwC,CAAA;AACpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IACpD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,sBAAsB,GAAG,CAAC,uBAAuB,GAAG,uBAAuB,CAAC,GACtF,qCAAqC,CAAA;AAEvC,MAAM,WAAW,wBAAwB;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAEpD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,wBAAwB,GAAG,MAAM,CAAA;AAElG,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,uBAAuB,CAQ5E;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,UAahE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,UAIlE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,wBAAwB,CAc9E;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM,UAYrE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,UAY9D;AAED,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EACjC,cAAc,UAAQ,0HA+CvB;AAED,mCAAmC;AACnC,wBAAsB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM;;;;;;;;IA5JzE;;OAEG;;;;;;;;GAqKJ;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;AACjG,wBAAsB,4BAA4B,CAChD,KAAK,EAAE,uBAAuB,EAC9B,QAAQ,EAAE,6BAA6B,qBAqBxC"}
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,uBAAuB,EACxB,MAAM,YAAY,CAAA;AAEnB,eAAO,MAAM,eAAe,wCAAwC,CAAA;AACpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IACpD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,sBAAsB,GAAG,CAAC,uBAAuB,GAAG,uBAAuB,CAAC,GACtF,qCAAqC,CAAA;AAEvC,MAAM,WAAW,wBAAwB;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAEpD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,wBAAwB,GAAG,MAAM,CAAA;AAElG,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,uBAAuB,CAQ5E;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,UAahE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,UAIlE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,wBAAwB,CAc9E;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM,UAYrE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,UAe9D;AAED,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EACjC,cAAc,UAAQ,0HA+CvB;AAED,mCAAmC;AACnC,wBAAsB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM;;;;;;;;IA/JzE;;OAEG;;;;;;;;GAwKJ;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;AACjG,wBAAsB,4BAA4B,CAChD,KAAK,EAAE,uBAAuB,EAC9B,QAAQ,EAAE,6BAA6B,qBAoBxC"}

package/types/dom/rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAIvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,CAAA;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,GAAG,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAA;IAC5D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC7E,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAwFhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA0CnB;AAMD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAc9G;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAW7G"}
+{"version":3,"file":"rendering.d.ts","sourceRoot":"","sources":["../../src/dom/rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAIvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,WAAW,mBAAmB;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,MAAM,CAAA;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,GAAG,CAAA;IAC7D,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;IAC1E,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAA;IAC5D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG;IAC7E,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,GAAG,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,GAC7C,mBAAmB,CAAA;AAsDrB,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,mBAAmB,QAkGhH;AAID,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,GAAG,gBAAgB,EACrC,UAAU,CAAC,EAAE,GAAG,EAChB,MAAM,CAAC,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,OAAO,eA+CnB;AAMD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,eAc9G;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,mBAAmB,EAAE,OAAO,UAAQ,UAW7G"}

package/types/dom/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/dom/stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EAGvB,6BAA6B,EAC9B,MAAM,WAAW,CAAA;AAElB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,EAAE,KAAK,CAAC,EAAE,gBAAgB,oBAGxF;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,uBAAuB,EAAE,UAAU,CAAC,EAAE,gBAAgB,6BAKpG;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,EAAE,QAAQ,CAAC,EAAE,6BAA6B,6BAkBtG;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,uBAAuB,oBAItE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,sCAK5D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,oBAM9D"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/dom/stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EAIvB,6BAA6B,EAC9B,MAAM,WAAW,CAAA;AAElB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,EAAE,KAAK,CAAC,EAAE,gBAAgB,oBAGxF;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,uBAAuB,EAAE,UAAU,CAAC,EAAE,gBAAgB,6BAKpG;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,EAAE,QAAQ,CAAC,EAAE,6BAA6B,6BAqBtG;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,uBAAuB,oBAItE;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,sCAU5D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,oBAM9D"}

package/types/dom/thumbnail.d.ts

@@ -1,5 +1,5 @@
 import type { VersionModel, ComponentModel, StylesheetModel } from '@sitecore-feaas/sdk';
-export type Callback = (image: HTMLImageElement, isCached: boolean) => void;
+export type Callback = (image: HTMLImageElement | null, isCached: boolean) => void;
 export declare const convertBase64toBlob: (base64: string) => Promise<Blob>;
 /** Parse fetch response as blob and turn it into HTMLImageElement off thread */
 export declare const responseToImage: (response: Response) => Promise<HTMLImageElement>;

package/types/dom/thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIpG,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAAE,eAAe,6BAsBnH;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}
+{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAIpG,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAElF,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAAE,eAAe,6BAsBnH;AAuFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}

package/types/fetch.d.ts

@@ -1,16 +1,4 @@
 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.
- *
- * 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.
- */
 declare const phases: readonly ["initial", "check", "updated"];
 export type ValidatableRequestPhase = (typeof phases)[number];
 export type FetchCache = Record<string, FetchCacheRequest>;
@@ -32,10 +20,19 @@ export type FetchCacheRequest = {
 };
 export declare var fetchCache: Record<string, FetchCacheRequest>;
 export declare function clearFetchCache(): void;
+/**
+ * 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 declare function fetchAndRevalidate(url: ValidatableRequest['url'], options?: ValidatableRequest['options'], validator?: ValidatableRequest['validator'], callback?: ValidatableRequest['callback'], cache?: FetchCache): Promise<Response>;
-export declare function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate?: boolean): FetchCacheRequest;
-export declare class InvalidResponse extends Error {
-}
 /**
  * Executes a fetch request optionally validating and handling the response. Using callback function it's possible to
  * observe successful response twice: Cached version first, and up-to-date later.
@@ -61,6 +58,9 @@ export declare function fetchWithCacheAwareness({ url, options, validator, callb
     callback: (response: Response, status: "initial" | "check" | "updated", isCached: boolean) => any;
     cache: FetchCache;
 }>;
+export declare function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate?: boolean): FetchCacheRequest;
+export declare class InvalidResponse extends Error {
+}
 /**
  * Validates cache of previousl fetch If the resource is cached and there is a newer version available, it will be
  * re-fetched.