@sitecore-feaas/clientside 0.2.0 → 0.2.2

package/test/FEAASComponent2.test.tsx

@@ -0,0 +1,215 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { FEAASComponent } from '../src/components/FEAASComponent.js'
+import { clearFetchCache } from '../src/fetch.js'
+
+const earliest = new Date(2000, 1, 1, 0, 0, 0)
+const earlier = new Date(2000, 1, 2, 0, 0, 0)
+const now = new Date(2000, 1, 2, 12, 0, 0)
+
+describe('FEAAS component data', () => {
+  beforeAll(() => {
+    vi.setSystemTime(now)
+    FEAASComponent.register('feaas-component')
+  })
+
+  beforeEach(() => {
+    document.write()
+    clearFetchCache()
+  })
+
+  const checkRaceCondition = async (promises: { promise: Promise<any>; name: string }[]) => {
+    const resolved: { promise: Promise<any>; name: string }[] = []
+    await Promise.all(
+      promises.map(async (p) => {
+        await p.promise
+        resolved.push(p)
+      })
+    )
+    expect(resolved.map(({ name }) => name)).to.eql(promises.map(({ name }) => name))
+  }
+
+  const staleCacheSpy = (dataDelay = 100, htmlDelay = 100, stylesDelay = 100) => {
+    return vi
+      .spyOn(global, 'fetch')
+      .mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+        if (url.includes('.css')) {
+          await new Promise((resolve) => setTimeout(resolve, stylesDelay))
+          return new Response('YESTERDAY {}', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earliest.toUTCString()
+            }
+          })
+        }
+
+        if (url.includes('CDN')) {
+          await new Promise((resolve) => setTimeout(resolve, htmlDelay))
+          return new Response('C', {
+            headers: {
+              date: now.toUTCString(),
+              'last-modified': earlier.toUTCString()
+            }
+          })
+        }
+
+        if (url === 'http://my-url') {
+          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          return new Response(JSON.stringify({ text: 'My new text' }), {})
+        }
+
+        if (url === 'http://my-url2') {
+          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          return new Response(JSON.stringify({ text: 'My new text2' }), {})
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, htmlDelay))
+        return new Response('C', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+      })
+  }
+
+  describe('Should render component using stale cache, no data initially, then data as object', async () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({})
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({})
+      expect(component.innerHTML).toEqual('C')
+      expect(spy).toHaveBeenCalledTimes(2)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+      component.setAttribute('data', '{"text": "this is text"}')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'this is text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(updateCall).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toEqual('this is text')
+      expect(component.readyData).toEqual({ text: 'this is text' })
+      expect(spy).toHaveBeenCalledTimes(2)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as object first, then settings', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{"text": "this is text"}' data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'this is text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ text: 'this is text' })
+      expect(component.innerHTML).toEqual('this is text')
+      expect(spy).toHaveBeenCalledTimes(2)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+      component.setAttribute('data', '{"jsonpath": "$", "url": "http://my-url"}')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'My new text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(updateCall).toHaveBeenCalledTimes(2)
+      expect(component.innerHTML).toEqual('My new text')
+      expect(component.readyData).toEqual({ text: 'My new text' })
+      expect(spy).toHaveBeenCalledTimes(3)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as settings', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{ "jsonpath": "$", "url": "http://my-url" }' data-path="text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'My new text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ text: 'My new text' })
+      expect(component.innerHTML).toEqual('My new text')
+      expect(spy).toHaveBeenCalledTimes(3)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  describe('Should render component using stale cache and data as mapping', () => {
+    const runWithDelay = async (delays: number[]) => {
+      const spy = staleCacheSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{ "datasource-1": {"jsonpath": "$", "url": "http://my-url"}, "datasource-2": {"jsonpath": "$", "url": "http://my-url2"} }' data-path="datasource-2.text" library="L" cdn="CDN" component="C" version="V" revision="R"></feaas-component>`
+      const component = document.body.firstElementChild as FEAASComponent
+      const updateCall = vi.spyOn(component, 'update')
+      await expect(component.whenDataReady).resolves.toEqual({ 'datasource-1': { text: 'My new text' }, 'datasource-2': { text: 'My new text2' } })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      await expect(component.whenLoaded).resolves.toBeTruthy()
+      expect(component.readyData).toEqual({ 'datasource-1': { text: 'My new text' }, 'datasource-2': { text: 'My new text2' } })
+      expect(component.innerHTML).toEqual('My new text2')
+      expect(spy).toHaveBeenCalledTimes(4)
+      await checkRaceCondition([
+        { promise: component.whenDataReady, name: 'when data ready' },
+        { promise: component.whenRendered, name: 'when rendered' },
+        { promise: component.whenLoaded, name: 'when loaded' }
+      ])
+      expect(updateCall).toHaveBeenCalledTimes(1)
+    }
+
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([100, 200, 300]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([100, 300, 200]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([200, 100, 300]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([200, 300, 100]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([300, 100, 200]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([300, 200, 100]))
+  })
+
+  // TODO
+  it.skip('Should render component using non-stale cache and data as settings', async () => {})
+})

package/test/FEAASContext.test.tsx

@@ -1,13 +1,16 @@
 import { beforeEach, describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { FEAASContextProps, FEAASContext } from '../src/ui/FEAASContext.js'
 import { JSDOM } from 'jsdom'
 import { vi } from 'vitest'
+import { ReactNode, ReactElement, JSXElementConstructor } from 'react'
 
 describe('React', function () {
   describe('FEAASContext', () => {
     beforeEach(() => {
-      document.write()
+      document.open()
+      document.write('<html><head></head><body></body></html>')
+      document.close()
     })
     it('should initiate loading with isolation', async () => {
       // @ts-ignore
@@ -37,40 +40,214 @@ describe('React', function () {
       expect(spyLoad).toHaveBeenCalledTimes(1)
 
       expect(component.outerHTML).toBe(
-        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"><div><p>Context abc</p></div></feaas-context>'
+        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net" feaas-role="ui"><div><p>Context abc</p></div></feaas-context>'
       )
     })
-  })
-  it('should initiate loading without isolation', async () => {
-    // @ts-ignore
-    const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
-    // @ts-ignore
-    spyLoad.mockImplementation(async (url: string) => {
-      if (url.match('test.js')) {
-        return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
-          ([React, ReactDOM, ReactDOMClient]) => {
-            return {
-              React,
-              ReactDOM,
-              ReactDOMClient,
-              Chakra: { Tooltip: {} },
-              AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+    it('should initiate loading without isolation', async () => {
+      // @ts-ignore
+      const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
+      // @ts-ignore
+      spyLoad.mockImplementation(async (url: string) => {
+        if (url.match('test.js')) {
+          return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+            ([React, ReactDOM, ReactDOMClient]) => {
+              return {
+                React,
+                ReactDOM,
+                ReactDOMClient,
+                Chakra: { Tooltip: {} },
+                AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+              }
             }
-          }
-        )
+          )
+        }
+      })
+      // Fixme change to production component
+      document.body.innerHTML = '<feaas-context src="test.js" library="abc" isolate="false"></feaas-context>'
+
+      const component = document.body.firstElementChild as FEAASContext
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spyLoad).toHaveBeenCalledTimes(1)
+
+      expect(component.outerHTML).toBe(
+        '<feaas-context src="test.js" library="abc" isolate="false" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net" feaas-role="ui"><div><p>Context abc</p></div></feaas-context>'
+      )
+    })
+    it('should initiate loading with isolation', async () => {
+      // @ts-ignore
+      const spyLoad = vi.spyOn(FEAASContext.prototype, 'import')
+      // @ts-ignore
+      spyLoad.mockImplementation(async (url: string) => {
+        if (url.match('test.js')) {
+          return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+            ([React, ReactDOM, ReactDOMClient]) => {
+              return {
+                React,
+                ReactDOM,
+                ReactDOMClient,
+                Chakra: { Tooltip: {} },
+                AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+              }
+            }
+          )
+        }
+      })
+      // Fixme change to production component
+      document.body.innerHTML = '<feaas-context src="test.js" library="abc"></feaas-context>'
+
+      const component = document.body.firstElementChild as FEAASContext
+
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(spyLoad).toHaveBeenCalledTimes(1)
+
+      expect(component.outerHTML).toBe(
+        '<feaas-context src="test.js" library="abc" frontend="https://components.sitecorecloud.io" backend="https://components.sitecorecloud.io/api" cdn="https://feaas.blob.core.windows.net" feaas-role="ui"></feaas-context>'
+      )
+      expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
+    })
+    it('should nest components and render them in order', async () => {
+      const renders = [] as FEAASElement[]
+      class FEAASElementTestRenderOrder extends FEAASElement {
+        update() {
+          renders.push(this)
+        }
       }
+      FEAASElementTestRenderOrder.register('feaas-element-test-order')
+
+      const top = document.createElement('feaas-element-test-order') as FEAASElement
+      top.innerHTML = `
+      <feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+      </feaas-element-test-order>
+      <feaas-element-test-order></feaas-element-test-order>
+      <feaas-element-test-order>
+        <feaas-element-test-order></feaas-element-test-order>
+      </feaas-element-test-order>
+    `
+      document.body.appendChild(top)
+      await expect(top.whenRendered).resolves.toEqual(top)
+      expect(top.descendants).toEqual([
+        top.children[0],
+        top.children[0].children[0],
+
+        top.children[0].children[1],
+
+        top.children[1],
+
+        top.children[2],
+
+        top.children[2].children[0]
+      ])
+      expect(renders).toEqual([
+        top.children[0].children[0],
+        top.children[0].children[1],
+        top.children[0],
+        top.children[1],
+        top.children[2].children[0],
+        top.children[2],
+        top
+      ])
     })
-    // Fixme change to production component
-    document.body.innerHTML = '<feaas-context src="test.js" library="abc"></feaas-context>'
 
-    const component = document.body.firstElementChild as FEAASContext
+    it('should nest components into context', async () => {
+      const renders = [] as FEAASElement[]
+      class FEAASElementTestRenderOrder extends FEAASElement {
+        render(props: any, payload: any): ReactNode | ReactElement<any, string | JSXElementConstructor<any>> {
+          return null
+        }
+        load() {
+          return this.import('context.js')
+        }
+      }
+      ;[FEAASElementTestRenderOrder, FEAASContext].forEach((klass) => {
+        // @ts-ignore
+        const spyLoad = vi.spyOn(klass.prototype, 'import')
+        // @ts-ignore
+        spyLoad.mockImplementation(async (url: string) => {
+          if (url.match('context.js')) {
+            return Promise.all([import('react'), import('react-dom'), import('react-dom/client')]).then(
+              ([React, ReactDOM, ReactDOMClient]) => {
+                return {
+                  React,
+                  ReactDOM,
+                  ReactDOMClient,
+                  Chakra: { Tooltip: {} },
+                  AppContext: ({ libraryId }: any) => <p>Context {libraryId}</p>
+                }
+              }
+            )
+          }
+        })
+        const spyRender = vi.spyOn(klass.prototype, 'render')
+        spyRender.mockImplementation(function (this: FEAASContext, { children }, { React }) {
+          renders.push(this)
+          return <>{children}</>
+        })
+      })
+
+      FEAASElementTestRenderOrder.register('feaas-element-test-nesting')
+
+      const context = document.createElement('feaas-context') as FEAASElement
+      context.setAttribute('library', 'library1')
+      const top = document.createElement('feaas-element-test-nesting') as FEAASElement
+      top.innerHTML = `
+      <feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+      </feaas-element-test-nesting>
+      <feaas-element-test-nesting></feaas-element-test-nesting>
+      <feaas-element-test-nesting>
+        <feaas-element-test-nesting></feaas-element-test-nesting>
+      </feaas-element-test-nesting>
+    `
+      document.body.appendChild(context)
+      context.render = function () {
+        renders.push(this)
+        return FEAASContext.prototype.render.apply(this, arguments)
+      }
+      document.body.appendChild(top)
+      await expect(top.whenRendered).resolves.toEqual(top)
+      await expect(context.whenRendered).resolves.toEqual(context)
+      expect(top.refs.top).toEqual(context)
+      expect(top.refs.topReact).toEqual(context)
+      expect(top.refs.parentReact).toEqual(context)
+      expect(context.descendants).toEqual([
+        top,
+        top.children[0],
+        top.children[0].children[0],
 
-    await expect(component.whenRendered).resolves.toEqual(component)
-    expect(spyLoad).toHaveBeenCalledTimes(1)
+        top.children[0].children[1],
 
-    expect(component.outerHTML).toBe(
-      '<feaas-context src="test.js" library="abc" frontend="https://components.sitecoreclud.io" backend="https://components.sitecoreclud.io/api" cdn="https://feaas.blob.core.windows.net"></feaas-context>'
-    )
-    expect(component.shadowRoot.innerHTML).toBe('<div><p>Context abc</p></div>')
+        top.children[1],
+
+        top.children[2],
+
+        top.children[2].children[0]
+      ])
+      // FIXME: Currently re-renders happen on each element addition
+      //expect(renders).toEqual([
+      //  context,
+      //  top.children[0].children[0],
+      //  top.children[0].children[1],
+      //  top.children[0],
+      //  top.children[1],
+      //  top.children[2].children[0],
+      //  top.children[2],
+      //  top
+      //])
+
+      const els = [
+        context,
+        top.children[0].children[0],
+        top.children[0].children[1],
+        top.children[0],
+        top.children[1],
+        top.children[2].children[0],
+        top.children[2],
+        top
+      ].forEach((el) => expect(renders).toContain(el))
+    })
   })
 })

package/test/FEAASExternal.test.tsx

@@ -37,6 +37,7 @@ describe('External', () => {
     )
   }
   const typesComponentSchema = {
+    name: 'TypesComponent',
     properties: {
       stringProp: {
         type: 'string'
@@ -66,14 +67,6 @@ describe('External', () => {
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(component.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
   })
-  it('can take functional component name as id', async () => {
-    Clientside.External.registerComponent(Hello)
-    document.body.innerHTML =
-      '<feaas-external id="external-component" class="-component" data-attributes-keys="first-name,telephone" first-name="Chuck" telephone="45657890875643" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="Hello" contenteditable="false"></feaas-external>'
-    const component = document.getElementById('external-component') as FEAASExternal
-    await expect(component.whenRendered).resolves.toEqual(component)
-    expect(component.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
-  })
   it('should return empty if component is not registered', async () => {
     document.body.innerHTML =
       '<feaas-external id="external-component" class="-component" data-external-id="NotRegisteredComponent" contenteditable="false"></feaas-external>'

package/test/FEAASPicker.test.tsx

@@ -1,5 +1,5 @@
 import { beforeEach, describe, it, assert, beforeAll, expect } from 'vitest'
-import { FEAASBase, ReactPayload } from '../src/headless.js'
+import { FEAASElement, ReactPayload } from '../src/headless.js'
 import { FEAASPickerProps, FEAASPicker } from '../src/ui/FEAASPicker.js'
 import { JSDOM } from 'jsdom'
 import { vi } from 'vitest'
@@ -7,7 +7,9 @@ import { vi } from 'vitest'
 describe('React', function () {
   describe('FEAASPicker', () => {
     beforeEach(() => {
-      document.write()
+      document.open()
+      document.write('<html><head></head><body></body></html>')
+      document.close()
     })
     it('should initiate loading', async () => {
       // @ts-ignore

package/test/fetch-data.ts

@@ -0,0 +1,55 @@
+import { vi, describe, it, expect } from 'vitest'
+import { fetchData } from '../src/utils/fetch.js'
+
+describe('Fetches data', () => {
+  it('fetches when passed data object', async () => {
+    const result = await fetchData({ hello: 'world' })
+
+    expect(result).toEqual({ hello: 'world' })
+  })
+
+  it('fetches when passed settings object', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(
+      async (url: string, options?: Parameters<typeof fetch>[1]) =>
+        new Response(JSON.stringify({ data: 'My data' }), {})
+    )
+
+    const result = await fetchData({ jsonpath: '$', url: 'http://my-url' })
+
+    expect(result).toEqual({ data: 'My data' })
+
+    expect(spy).toHaveBeenCalledOnce()
+  })
+
+  it('fetches when passed mapping object', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options?: Parameters<typeof fetch>[1]) => {
+      if (url === 'http://my-url1') return new Response(JSON.stringify({ data: 'My data1' }), {})
+      if (url === 'http://my-url2') return new Response(JSON.stringify({ data: 'My data2' }), {})
+    })
+
+    const inputData = {
+      datasourceId1: { jsonpath: '$', url: 'http://my-url1' },
+      datasourceId2: { data: 'This is plain data' },
+      datasourceId3: { jsonpath: '$', url: 'http://my-url2' },
+      datasourceId4: { jsonpath: '$', url: 'http://bad-url' }
+    }
+
+    const result = await fetchData(inputData)
+
+    expect(result).to.have.property('datasourceId1')
+    expect((result as Record<keyof typeof inputData, any>).datasourceId1).toEqual({ data: 'My data1' })
+
+    expect(result).to.have.property('datasourceId2')
+    expect((result as Record<keyof typeof inputData, any>).datasourceId2).toEqual({ data: 'This is plain data' })
+
+    expect(result).to.have.property('datasourceId3')
+    expect((result as Record<keyof typeof inputData, any>).datasourceId3).toEqual({ data: 'My data2' })
+
+    expect(result).to.have.property('datasourceId4')
+    expect((result as Record<keyof typeof inputData, any>).datasourceId4).toEqual({})
+
+    expect(spy).toHaveBeenCalledTimes(3)
+  })
+})

package/types/components/FEAASComponent.d.ts

@@ -1,5 +1,6 @@
-import { FEAASBase } from './FEAASBase.js';
-export declare function FEAASComponentsProps(element: FEAASBase): {
+import { ControlledPromise } from '../utils/promise.js';
+import { FEAASElement } from './FEAASElement.js';
+export declare function FEAASComponentsProps(element: FEAASElement): {
     data: any;
     cdn: string;
     library: string;
@@ -15,7 +16,33 @@ export declare function FEAASComponentsProps(element: FEAASBase): {
     withStylesheet: boolean;
 };
 export type FEAASComponentsProps = ReturnType<typeof FEAASComponentsProps>;
-export declare 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 declare class FEAASComponent extends FEAASElement<FEAASComponentsProps, string> {
+    readyData: any;
+    whenDataReady: ControlledPromise<any>;
     static observedAttributes: string[];
     defaultProps: Partial<{
         data: any;
@@ -50,6 +77,7 @@ export declare class FEAASComponent extends FEAASBase<FEAASComponentsProps, stri
         withStylesheet: boolean;
     };
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    fetchData(): Promise<void>;
     getEditor(): any;
     constructor();
     edit(): boolean;
@@ -57,6 +85,8 @@ export declare class FEAASComponent extends FEAASBase<FEAASComponentsProps, stri
     isReadyToLoad(): boolean;
     onLoad: (html: string) => void;
     load(): Promise<string>;
+    alreadyRendered: boolean;
+    flush(): void;
     update(): void;
 }
 declare global {

package/types/components/FEAASComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,SAAS;;;;;;;;;;;;;;EA6BtD;AACD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAC1E,qBAAa,cAAe,SAAQ,SAAS,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACzE,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAUhF,SAAS,IAAI,GAAG;;IAahB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAsBV,MAAM;CAYP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"FEAASComponent.d.ts","sourceRoot":"","sources":["../../src/components/FEAASComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY;;;;;;;;;;;;;;EA6BzD;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,cAAe,SAAQ,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC;IAC5E,SAAS,EAAE,GAAG,CAAK;IACnB,aAAa,yBAGZ;IAED,MAAM,CAAC,kBAAkB,WAYxB;IAED,YAAY;;;;;;;;;;;;;;OAOsB;IAElC,YAAY,EAAE,OAAO,CAAA;IAErB,OAAO,CAAC,IAAI,EAAE,GAAG;IAIjB,QAAQ;;;;;;;;;;;;;;;IAIR,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAkB1E,SAAS;IAcf,SAAS,IAAI,GAAG;;IAkBhB,IAAI;IASJ,WAAW;IAaX,aAAa;IAMb,MAAM,SAAU,MAAM,UAGrB;IAEK,IAAI;IAkCV,eAAe,EAAE,OAAO,CAAA;IAExB,KAAK;IAML,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,iBAAiB,EAAE;gBACjB,IAAI,CAAC,EAAE,GAAG,CAAA;gBACV,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;gBAClB,QAAQ,CAAC,EAAE,GAAG,CAAA;gBACd,uBAAuB,CAAC,EAAE;oBAAE,MAAM,EAAE,MAAM,CAAA;iBAAE,CAAA;gBAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;gBACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,EAAE,CAAA;aAC1C,GAAG,CACA;gBACE,kCAAkC;gBAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;gBACjB,GAAG,CAAC,EAAE,MAAM,CAAA;gBACZ,OAAO,EAAE,MAAM,CAAA;gBACf,SAAS,EAAE,MAAM,CAAA;gBACjB,OAAO,CAAC,EAAE,MAAM,CAAA;gBAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAA;aAC5C,GACD;gBAAE,GAAG,EAAE,MAAM,CAAA;aAAE,GACf;gBAAE,QAAQ,EAAE,MAAM,CAAA;aAAE,CACvB,CAAA;SACF;KACF;CACF;AAGD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,oBAAoB,IAAI,cAAc,EAAE,CAAA"}