@sitecore-feaas/clientside 0.1.19 → 0.1.20

package/examples/index.html

@@ -1,54 +1,13 @@
 <script type="module">
-  import FEAAS from '../dist/browser/index.js'
-  const renderMyComponent = (element, data) =>
-    FEAAS.renderComponent(
-      {
-        componentId: 'our-dominator1',
-        versionId: 'dominator1-version2',
-        revision: 'staged',
-        hostname: 'https://feaascomponentsapidev.blob.core.windows.net',
-        data: data
-      },
-      element
-    )
+  import FEAASElement from '../dist/browser/basic.esm.js'
 
-  const stylesheet = FEAAS.renderStylesheet({
-    libraryId: 'our-wonderful-library'
-  })
-  document.head.appendChild(stylesheet)
 
-  const element = renderMyComponent(null, {
-    dominatorData: {
-      name: 'YarikZ',
-      goal: 'Explode the planet',
-      status: 'progressing',
-      items: [
-        {
-          'title-text': 'Hello world Hello Thomas 2r23r',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>',
-          open: true
-        },
-        { 'title-text': 'Bye world', html: 'Mystical island' }
-      ],
-      items2: [
-        {
-          'title-text': 'Cherry pop',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>'
-        },
-        {
-          'title-text': 'Berry',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <p><a href="#">Link</a> Text</div></p>'
-        },
-        {
-          'title-text': 'Pear',
-          html: '<div class="-card--solid-color-cards -fill--light-blue"><button class="-button">Hola</button> <a href="#">Link</a> Text</div>',
-          open: true
-        },
-        { 'title-text': 'Coolio', html: 'Mystical island' }
-      ]
+  export class Z extends FEAASElement<{}> {
+    renderReact(
+      props: { children?: ReactNode },
+      payload: { React: typeof import('react'); ReactDOM: typeof import('react-dom') }
+    ): ReactNode | ReactElement<any, string | JSXElementConstructor<any>> {
+      return
     }
-  })
-  document.body.appendChild(element)
-
-  // renderMyComponent(element, {"user": {"name": "Bob"}})
+  }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "scripts": {
     "start": "webpack serve --open",
     "build": "rm -rf dist;npm run build:types; npm run build:esbuild; npm run build:sourcemaps",
@@ -14,12 +14,7 @@
     "postpublish": "node ../cdn/upload-package.js clientside $npm_package_version"
   },
   "license": "ISC",
-  "optionalDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
   "peerDependencies": {
-    "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "main": "./dist/browser/index.esm.js",

package/src/basic.ts

@@ -1,6 +1,9 @@
+import FEAASElement from './components/FEAASElement.js'
+
 export * from './dom.js'
 export * from './fetch.js'
 export * from './components/FEAASBase.js'
+export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
@@ -8,7 +11,11 @@ export * from './components/FEAASStylesheet.js'
 declare global {
   interface Window {
     FEAASLoading: Promise<any>
+    FEAASElement: typeof FEAASElement
   }
 }
 
-if (typeof window != 'undefined') window.FEAASLoading ??= Promise.resolve()
+if (typeof window != 'undefined') {
+  window.FEAASElement = FEAASElement
+  window.FEAASLoading ??= Promise.resolve()
+}

package/src/cloud.ts

@@ -1,4 +1,4 @@
-import { fetchAndRevalidate } from './fetch.js'
+import { fetchAndRevalidate, fetchAndValidate, invalidateRequest, refetchAndValidate } from './fetch.js'
 
 export interface CloudTemplate {
   cdn?: string
@@ -7,6 +7,7 @@ export interface CloudTemplate {
   component: string
   version: string
   revision?: string
+  instance?: string
 }
 export interface CloudStylesheet {
   cdn?: string
@@ -36,20 +37,49 @@ export function getStylesheetURL({
 }
 
 export async function fetchComponent(props: CloudTemplate, callback: (html: string) => void) {
-  return fetchAndRevalidate(
-    getComponentURL(props),
-    {
-      headers: {
-        Accept: 'text/html'
+  const onlyIfNotDeleted = (response: Response) => {
+    return response.headers.get('x-ms-meta-versionDeletedAt') == null
+  }
+  const parseResponse = (response: Response) => {
+    response.text().then(callback)
+  }
+
+  // Fetch two requests in parallel: One optimistically checking if component was forked,
+  // and another checking original definition of a component
+  const results = await Promise.all([
+    props.instance &&
+      fetchAndValidate({
+        options: {
+          headers: {
+            Accept: 'text/html'
+          }
+        },
+        url: getComponentURL({ ...props, version: props.instance }),
+        validator: onlyIfNotDeleted
+      }).catch((e) => e as Error),
+    fetchAndValidate({ url: getComponentURL(props), validator: onlyIfNotDeleted }).catch((e) => e as Error)
+  ])
+  const result = results.find((result) => result && 'isCached' in result && result)
+  if (!result || result instanceof Error) {
+    const error = results.find((result) => result && result instanceof Error)
+    throw error || new Error('Can not fetch component')
+  }
+  if (results[0] == result) {
+    console.log('Using fork!', results)
+  }
+  parseResponse(result.response)
+  return refetchAndValidate({ ...result, callback: parseResponse }).catch((e) => {
+    if (results[0] == result) {
+      invalidateRequest({ ...result, callback: null, validator: null })
+      console.log('Fork was deleted')
+      // forked version was cached, but it's now deleted
+      if (!(results[1] instanceof Error)) {
+        parseResponse(results[1].response)
+        return refetchAndValidate({ ...results[1], callback: parseResponse })
       }
-    },
-    (response) => {
-      return response.headers.get('x-ms-meta-versionDeletedAt') == null
-    },
-    (response) => {
-      response.text().then(callback)
     }
-  )
+    throw e
+  })
 }
 
 export async function fetchStylesheet(props: CloudStylesheet, callback: (css: string) => void) {

package/src/components/FEAASBase.tsx

@@ -1,4 +1,5 @@
 import { JSXElementConstructor, ReactElement, ReactNode } from 'react'
+import type ReactDOMClient from 'react-dom/client'
 import type ReactDOM from 'react-dom'
 import type React from 'react'
 
@@ -9,6 +10,7 @@ var WebComponent = typeof HTMLElement == 'undefined' ? (class {} as unknown as t
 interface ReactPayload {
   React: typeof React
   ReactDOM: typeof ReactDOM
+  ReactDOMClient: typeof ReactDOMClient
 }
 
 export class FEAASBase<Props = any, Payload = any> extends WebComponent {
@@ -27,7 +29,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   nextRender: number
 
   /** Is/was component in the dom? */
-  connected = null as Event
+  connected = false
 
   /** Result of lazy loading */
   payload: Payload
@@ -35,6 +37,12 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   refs: Record<string, FEAASBase> = {}
   descendants: FEAASBase[] = []
 
+  constructor() {
+    super()
+    this.addEventListener('feaasConnected', this)
+    this.addEventListener('feaasDisconnected', this)
+  }
+
   /** Attaches shadow root if getShadowRootOptions any settings, or uses element itself */
   getRoot(): FEAASBase | HTMLElement | ShadowRoot {
     return this
@@ -47,38 +55,76 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
 
   /** Components parses its attributes when connected, and schedules rendeirng */
   connectedCallback() {
-    console.log('FEAAS: Connected', this)
-    this.connected = new Event('feaasConnected', { bubbles: true, composed: true })
-    this.dispatchEvent(this.connected)
-    this.addEventListener('feaasConnected', this)
-    this.addEventListener('feaasDisconnected', this)
+    this.initialize()
+  }
+
+  /**
+   * Web components are initialized depth-first, making child elements render before its parents. This could here
+   * attempts to avoid this and inverts the initialization logic, so that children are initialized in the context of its
+   * already-initialized parents.
+   *
+   * FEAAS components dispatch `feaasConnected` event that allows components to store references to each other. In
+   * addition it allows external scripts to listen for initialization of FEAAS components
+   */
+  initialize() {
+    const parent = this.getParent() as FEAASBase
+    // Allow parent component to initialize first
+    if (parent && !parent.connected) return
+    if (this.connected) return
+    this.connected = true
+    console.log('FEAAS: Connected', this.tagName, this)
+    this.dispatchEvent(new Event('feaasConnected', { bubbles: true, composed: true }))
+    this.getElements().map((element: FEAASBase) => element.initialize())
     this.set()
+    return true
+  }
+
+  getParent(onlyFeaas = true) {
+    for (
+      var p: HTMLElement = this;
+      (p = p.parentElement || ((p.parentNode instanceof ShadowRoot ? p.parentNode.host : null) as HTMLElement));
+
+    ) {
+      if (!onlyFeaas || p.tagName.startsWith('FEAAS-')) return p
+    }
+  }
+
+  getElements(root: HTMLElement | ShadowRoot = this.getRoot(), onlyFeaas = true): HTMLElement[] {
+    return Array.from(root.querySelectorAll('*'))
+      .map(
+        (el) =>
+          [
+            !onlyFeaas || el.tagName.startsWith('FEAAS-') ? el : null,
+            el.shadowRoot ? this.getElements(el.shadowRoot, onlyFeaas) : null
+          ] as HTMLElement[]
+      )
+      .flat()
+      .filter(Boolean)
   }
 
   /** Nothing special happens on disconnect, except setting a flag */
   disconnectedCallback() {
+    if (!this.connected) return
     console.log('FEAAS: Disconnected', this)
-    this.removeEventListener('feaasConnected', this)
-    this.removeEventListener('feaasDisconnected', this)
     this.dispatchEvent(new Event('feaasDisconnected', { bubbles: true, composed: true }))
     this.connected = null
   }
 
   /** Catch-all event handler that dispatches events to callback */
   handleEvent(event: Event) {
+    const target = event.composedPath()[0] as FEAASBase
     switch (event.type) {
       case 'feaasConnected':
-        this.nestedCallback(event)
+        if (target != this) this.nestedCallback(target)
         break
       case 'feaasDisconnected':
-        this.unnestedCallback(event)
+        if (target != this) this.unnestedCallback(target)
         break
     }
   }
 
   /** Act on children element being removed */
-  unnestedCallback(event: Event) {
-    const target = event.composedPath()[0] as FEAASBase
+  unnestedCallback(target: FEAASBase) {
     const index = this.descendants.indexOf(target)
     if (index == -1) return
     console.log('FEAAS: Unnest', this, target)
@@ -91,8 +137,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   }
 
   /** Act on children element being added */
-  nestedCallback(event: Event): boolean | void {
-    const target = event.composedPath()[0] as FEAASBase
+  nestedCallback(target: FEAASBase): boolean | void {
     const index = this.descendants.indexOf(target)
     if (index != -1) return
     this.descendants.push(target)
@@ -153,12 +198,12 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   render(nested = false): any {
     console.log('FEAAS: React', this.tagName, this.payload)
     if (this.payload == null) return
-    const { React, ReactDOM } = (this.payload as ReactPayload) || {}
+    const { React, ReactDOM, ReactDOMClient } = (this.payload as ReactPayload) || {}
     if (!React) throw new Error(`${this.tagName}: React is not present in payload`)
     if (!ReactDOM) throw new Error(`${this.tagName}: ReactDOM is not present in payload`)
-
     if (!this.refs.topReact && !this.forceUpdateReact) {
-      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot())
+      this.reactRoot ||= ReactDOMClient.createRoot(this.getReactRootElement())
+      this.reactRoot.render(React.createElement(this.getReactWrapper(), { z: 'root' }))
     } else if (this.forceUpdateReact) {
       this.forceUpdateReact?.()
     } else {
@@ -182,13 +227,14 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   }
 
   reactWrapper: (props?: any) => ReactNode
+  reactRoot: ReactDOMClient.Root
   getReactWrapper(target: FEAASBase = this, displayName = target.tagName) {
     const Wrapper = (target.reactWrapper ||= (props?: any) => {
       if (target.renderReact) {
         const { React, ReactDOM } = (target.payload as ReactPayload) || {}
         const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0)
         target.forceUpdateReact = forceUpdateReact
-        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRoot())
+        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRootElement())
       } else {
         return target.render()
       }
@@ -214,7 +260,7 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
     payload: typeof this.payload
   ): ReactNode | ReactElement
 
-  getReactRoot(): HTMLElement | ShadowRoot {
+  getReactRootElement(): HTMLElement | ShadowRoot {
     return this.getRoot()
   }
 
@@ -256,7 +302,14 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   }
 
   getContextAttribute(name: string, element = this) {
-    return element.closest(`[${name}]`)?.getAttribute(name) ?? this.getAttribute(name)
+    for (
+      var p: HTMLElement = this;
+      (p = p.parentElement || ((p.parentNode instanceof ShadowRoot ? p.parentNode.host : null) as HTMLElement));
+
+    ) {
+      if (p.getAttribute(name) != null) return p.getAttribute(name)
+    }
+    return this.getAttribute(name)
   }
 
   static register(tagName: string) {

package/src/components/{FEAASComponent.ts → FEAASComponent.tsx}

@@ -1,6 +1,7 @@
 import { fetchComponent } from '../cloud.js'
 import { renderDOMContent, renderDOMElement } from '../dom.js'
 import { FEAASBase, OptionalExcept } from './FEAASBase.js'
+import { FEAASLoader } from './FEAASLoader.js'
 
 export function FEAASComponentsProps(element: FEAASBase = this) {
   let data: any
@@ -19,12 +20,25 @@ export function FEAASComponentsProps(element: FEAASBase = this) {
     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
   }
 }
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
 export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
-  static observedAttributes = ['library', 'component', 'version', 'revision', 'hostname', 'cdn', 'template', 'data']
+  static observedAttributes = [
+    'library',
+    'component',
+    'version',
+    'revision',
+    'hostname',
+    'cdn',
+    'template',
+    'data',
+    'instance',
+    'editable'
+  ]
 
   needsRefresh: boolean
   setData(data: any) {
@@ -36,11 +50,33 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) return
     this.payload = undefined
     this.needsRefresh = true
     super.attributeChangedCallback(name, oldValue, newValue)
   }
 
+  getEditor(): any {
+    return (document.querySelector('feaas-context') as FEAASBase)?.refs.editor
+  }
+
+  constructor() {
+    super()
+    this.addEventListener('click', () => {
+      if (this.props.editable) {
+        this.edit()
+      }
+    })
+  }
+
+  edit() {
+    const editor = this.getEditor()
+    if (editor?.setTarget(this)) {
+      editor.open()
+      return true
+    }
+  }
+
   /* Check if component is a repeated clone, and return the original */
   getOriginal() {
     const scope = this.getAttribute('data-path-scope')

package/src/components/FEAASElement.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement, JSXElementConstructor } from 'react'
+import { FEAASBase } from './FEAASBase.js'
+
+export default class FEAASElement<P> extends FEAASBase<
+  P,
+  {
+    React: typeof React
+    ReactDOM: typeof ReactDOM
+  }
+> {
+  load() {
+    return Promise.all([
+      // @ts-ignore
+      import('https://cdn.skypack.dev/react'),
+      // @ts-ignore
+      import('https://cdn.skypack.dev/react-dom')
+    ]).then(([React, ReactDOM]) => {
+      return { React, ReactDOM }
+    })
+  }
+}

package/src/components/{FEAASLoader.ts → FEAASLoader.tsx}

@@ -2,6 +2,7 @@ import { FEAASBase } from './FEAASBase.js'
 
 export function FEAASLoaderProps(element: HTMLElement = this) {
   return {
+    opacity: element?.getAttribute('opacity') ? parseFloat(element?.getAttribute('opacity')) : 1,
     hidden: element?.getAttribute('hidden') != null
   }
 }
@@ -11,9 +12,14 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
   stylesheet: HTMLStyleElement
   loader: HTMLDivElement
 
-  static observedAttributes = ['hidden']
+  getProps() {
+    return FEAASLoaderProps(this)
+  }
+
+  static observedAttributes = ['hidden', 'opacity']
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) return
     if (name == 'hidden') {
       this.style.setProperty('display', 'block', 'important')
       this.style.setProperty('transition', 'opacity 0.3s', 'important')
@@ -25,9 +31,12 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
         this.style.pointerEvents = 'all'
       }
     }
+    return super.attributeChangedCallback(name, oldValue, newValue)
   }
 
   connectedCallback() {
+    this.payload = null
+    super.connectedCallback()
     this.attributeChangedCallback('hidden', this.getAttribute('hidden'), this.getAttribute('hidden'))
     this.stylesheet = document.createElement('style')
     this.stylesheet.textContent = `
@@ -101,6 +110,10 @@ export class FEAASLoader extends FEAASBase<FEAASLoaderProps, string> {
     this.getRoot().appendChild(this.stylesheet)
     this.getRoot().appendChild(this.loader)
   }
+
+  render() {
+    this.loader.style.opacity = String(this.props.opacity)
+  }
 }
 
 declare global {

package/src/dom.ts

@@ -310,6 +310,11 @@ export function renderDOMContent(root: HTMLElement, template: string, data?: Dat
   const newTemplate = config?.processTemplate?.(root, template, data) || template
   root.innerHTML = newTemplate
   root.classList.add('-feaas')
+  // fixme, jss needs to assign theme classes to component instead
+  const anchor = root.closest('.component.feaas') || root
+  if (anchor.className.includes('-theme--')) {
+    for (const child of root.children) child.className = child.className.replace(/(\s|^)-theme--[^\s]+\s*/g, '$1')
+  }
   return renderDOMElement(root, data, config)
 }
 

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'
+  )
 }