@sitecore-feaas/clientside 0.2.0 → 0.2.2

package/scripts/build.js

@@ -3,6 +3,7 @@ import * as esbuild from 'esbuild'
 import replace from 'esbuild-plugin-replace-regex'
 import * as url from 'url'
 import fs from 'fs'
+
 const __filename = url.fileURLToPath(import.meta.url)
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
@@ -17,7 +18,6 @@ function compile({ input, output, ...step }) {
     bundle: true,
     write: false,
     external: ['node:crypto', 'node-fetch', '_MAGIC_IMPORT_COMMENTS_ESBUILD_WORKAROUND__', 'react', 'react-dom', 'vm'],
-
     ...step,
 
     minify: true,

package/scripts/test-setup.ts

@@ -1 +1,2 @@
+process.env.TESTING = 'true'
 export default function () {}

package/src/components/FEAASComponent.tsx

@@ -1,9 +1,11 @@
 import { DEFAULT_CDN_URL, FEAASCDNComponentParams, fetchAndRevalidateComponent, parseComponentSource } from '../cdn.js'
 import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
 import { loadStylesheetAllowStale } from '../headless.js'
-import { FEAASBase } from './FEAASBase.js'
+import { ControlledPromise } from '../utils/promise.js'
+import { fetchData } from '../utils/fetch.js'
+import { FEAASElement } from './FEAASElement.js'
 
-export function FEAASComponentsProps(element: FEAASBase) {
+export function FEAASComponentsProps(element: FEAASElement) {
   let data: any
   const src = element.getAttribute('src')
   if (src) {
@@ -33,8 +35,40 @@ export function FEAASComponentsProps(element: FEAASBase) {
     withStylesheet: element.getAttribute('with-stylesheet') != 'false'
   }
 }
+
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>
-export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
+
+/**
+ * - Initialization lifecycle:
+ * - - `set(props)`
+ * - - `scheduleRender()` - any attribute change causes render to schedule to next frame
+ * - - `whenRendered.restart()` - rendering promise is reset and will resolve after render
+ * - - `advance()` - called on next frame
+ * - - `if (isReadyToLoad()) => boolean` - check if component has all necessary properties to load
+ * - - `load() => payload` => component is loaded
+ * - - `onLoad?(payload)` => invoke loaded callback for cached version of a component
+ * - - `advance()` => going further in state machine
+ * - - `flush()` => flushes all react changes if needed
+ * - - `update()` => component-specific method (or react) to render changes to dom
+ * - - `render(payload, props)` => render means react
+ * - - `whenRendered.resolve()` - rendering promise is resolved after rendering
+ * - - IF CACHE WAS STALE - FETCH AND RENDER AGAIN
+ * - - `fetchByPassingCache()` - load up-to-date version of a component
+ * - - `onLoad(newPayload) `
+ * - - `advance()` => going further in state machine
+ * - - `flush()` => flushes all react changes if needed
+ * - - `update()` => component-specific method (or react) to render changes to dom
+ * - - `render(payload, props)` => render means react
+ * - - `whenRendered.resolve()` - rendering promise is resolved after rendering
+ * - - `whenLoaded.resolved()` - resolved after loading of up to date component
+ */
+export class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
+  readyData: any = {}
+  whenDataReady = ControlledPromise<any>(
+    (data) => (this.readyData = data),
+    (e) => this.onError(e)
+  )
+
   static observedAttributes = [
     'library',
     'component',
@@ -59,6 +93,7 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
   } as Partial<FEAASComponentsProps>
 
   needsRefresh: boolean
+
   setData(data: any) {
     this.set({ data })
   }
@@ -69,20 +104,47 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) return
+
     // force component to be refreshed
     if (name == 'library' || name == 'component' || name == 'revision' || name == 'version') {
       this.payload = undefined
     }
+
     this.needsRefresh = true
+
     super.attributeChangedCallback(name, oldValue, newValue)
+
+    if (name === 'data') {
+      this.fetchData()
+    }
+  }
+
+  // Reset readyData and perform a new fetch.
+  async fetchData() {
+    this.readyData = undefined
+
+    this.whenDataReady = this.whenDataReady.restart()
+
+    const data = await fetchData(this.props.data)
+    const alreadyRendered = this.alreadyRendered
+
+    await this.whenDataReady.resolve(data)
+    if (alreadyRendered) {
+      this.advance()
+    }
   }
 
   getEditor(): any {
-    return (document.querySelector('feaas-context') as FEAASBase)?.refs.editor
+    return (document.querySelector('feaas-context') as FEAASElement)?.refs.editor
   }
 
   constructor() {
     super()
+
+    if (!this.getAttribute('data')) {
+      this.whenDataReady.resolve({})
+    }
+
     this.addEventListener('click', () => {
       if (this.props.editable) {
         this.edit()
@@ -125,36 +187,58 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
 
   async load() {
     // defer loading to original element
-    if (this.getOriginal()) {
-      return
+    if (this.getOriginal()) return
+
+    const advanceIfEverythingIsReady = () => {
+      // html is not loaded
+      if (!this.payload) return
+
+      // shared stylesheet is still being loaded
+      if (stylesheetPromise) return
+
+      // data is still loading
+      if (!this.readyData) return
+
+      this.onLoad(this.payload)
     }
+
     if (this.props.withStylesheet) {
       var stylesheetPromise = loadStylesheetAllowStale({ ...this.props, revision: 'published' }).then(() => {
         stylesheetPromise = null
-        if (this.payload) {
-          this.onLoad(this.payload)
-        }
+        advanceIfEverythingIsReady()
       })
     }
+
     return Promise.all([
       stylesheetPromise,
+      this.whenDataReady.then(() => advanceIfEverythingIsReady()),
       fetchAndRevalidateComponent(this.props, (html) => {
         this.payload = html
-        if (!stylesheetPromise) this.onLoad(html)
+        advanceIfEverythingIsReady()
       })
     ]).then(() => this.payload)
   }
 
+  alreadyRendered: boolean
+
+  flush() {
+    if (!this.readyData) return
+
+    super.flush()
+  }
+
   update() {
+    this.alreadyRendered = true
+
     if (Array.from(this.children).filter((c) => c.tagName != 'BR').length > 0 && !this.needsRefresh) {
-      renderDOMElement(this, this.props.data)
+      renderDOMElement(this, this.readyData)
     } else {
       this.needsRefresh = true
       // defer rendering to original element
       if (this.getOriginal()) {
         return
       }
-      renderDOMContent(this, this.payload, this.props.data)
+      renderDOMContent(this, this.payload, this.readyData)
     }
   }
 }