@sitecore-feaas/clientside 0.2.2 → 0.3.1

package/src/utils/settings.ts

@@ -0,0 +1,200 @@
+import { queryObject } from './data.js'
+
+export type DataSourceId = string
+
+// Fully resolved data - object or array
+export type Data = Record<string, any> | any[]
+
+// Data keyed by datasource id
+export type DataScopes = Data | Record<DataSourceId, Data>
+
+// Data settings is json object representing fetch call
+export type DataSettings = ReturnType<typeof DataSettings>
+
+// Data options/samples indexed by id
+export type DataOptionsById = Record<DataSourceId, DataSettings | Data>
+
+// Data options combines of the above: data, settings, plain or keyed by datasource id
+export type DataOptions = Data | DataSettings | DataOptionsById
+
+/**
+ * Cleans the provided settings object by removing unnecessary properties that match the defaults that will be re-added
+ * back through normalizations. This method is used for code generated for the user, neant to make it look neater.
+ *
+ * @param {any} settings  - The settings object to be cleaned.
+ * @returns {Object} - The cleaned settings object.
+ */
+export function clean(settings: any) {
+  const { params, method, headers, body, url } = DataSettings(settings)
+  var cleanSettings = { url } as Partial<DataSettings>
+  var cleanHeaders = { ...headers }
+  if (headers['Content-Type'] === 'application/json') delete cleanHeaders['Content-Type']
+  if (headers['Accept'] === 'application/json') delete cleanHeaders['Accept']
+  if (Object.keys(cleanHeaders).length > 0) {
+    cleanSettings.headers = cleanHeaders
+  }
+  if (method !== 'GET') {
+    cleanSettings.method = method
+  }
+  if (!(method === 'GET' || method === 'HEAD' || Object.keys(body).length === 0)) {
+    cleanSettings.body = body
+  }
+  if (Object.keys(params).length > 0) {
+    cleanSettings = { ...cleanSettings, params }
+  }
+  return cleanSettings
+}
+
+/**
+ * Checks if the provided data is of type DataSettings by checking if all keys are recognized as settings keys.
+ *
+ * @param {any} data  - The data to be checked.
+ * @returns {boolean} - True if the data is of type DataSettings, false otherwise.
+ */
+export const isDataSettings = (data: any): data is DataSettings => {
+  if (typeof data.url != 'string') return false
+
+  for (var property in data) {
+    if (
+      property == 'body' ||
+      property == 'params' ||
+      property == 'headers' ||
+      property == 'url' ||
+      property === 'method' ||
+      (property == 'jsonpath' && typeof data[property] == 'string')
+    ) {
+      continue
+    }
+
+    return false
+  }
+
+  return true
+}
+
+/**
+ * Converts settings object into fetch function arguments.
+ *
+ * @param {any} settings  - The settings object.
+ * @returns {Array} - An array containing URL and options objects as fetch function arguments.
+ */
+export function toFetchArguments(settings?: any): Parameters<typeof fetch> {
+  const { url, headers, params, method, body: payload } = DataSettings(settings)
+
+  let body = undefined
+
+  const contentType = headers['Content-Type']
+
+  if (method != 'GET' && method != 'HEAD') {
+    if (contentType === 'application/json') body = JSON.stringify(payload)
+    if (contentType === 'multipart/form-data')
+      body = Object.keys(payload).reduce((form, key) => {
+        form.append(key, (payload as any)[key])
+        return form
+      }, new FormData())
+    if (contentType === 'application/x-www-form-urlencoded') body = new URLSearchParams(payload)
+  }
+
+  const query = Object.keys(params).length ? `?${new URLSearchParams(params)}` : ''
+
+  return [
+    `${url}${query}`,
+    {
+      headers,
+      body,
+      method
+    }
+  ]
+}
+
+/**
+ * Creates a DataSettings object based on the provided settings. These settings are used later to fetch data for the
+ * component. It's essentially fetch options with url.
+ *
+ * @param {any} settings  - The settings object.
+ * @returns {DataSettings} - The DataSettings object.
+ */
+export function DataSettings(settings: any) {
+  const headers = {} as any
+  for (const key in settings?.headers || {}) {
+    if (settings.headers.hasOwnProperty(key)) {
+      const headerCase = key.replace(/^[a-z]|\-[a-z]/g, (m) => m.toUpperCase())
+      headers[headerCase] = settings.headers[key]
+    }
+  }
+  if (!headers.Accept) headers['Accept'] = 'application/json'
+  return {
+    params: (settings?.params || {}) as Record<string, any>,
+    headers: headers as Record<string, string>,
+    jsonpath: String(settings?.jsonpath || '$'),
+    method: (settings?.method || 'GET').toUpperCase() as
+      | 'GET'
+      | 'POST'
+      | 'OPTIONS'
+      | 'PUT'
+      | 'DELETE'
+      | 'UPDATE'
+      | 'HEAD',
+    body: (settings?.body || {}) as Record<string, any>,
+    url: String(settings?.url || '')
+  }
+}
+/**
+ * Fetches data based on the provided settings. It is expected that reesponse is json (forced by Accept header)
+ *
+ * @param {DataSettings} settings  - The data settings.
+ * @returns {Promise<Data>} - A promise that resolves to the fetched data.
+ */
+const fetchDataSettings = async (settings: DataSettings): Promise<Data> => {
+  try {
+    const [url, options] = toFetchArguments(settings)
+    const response = await DataSettings.fetchImplementation(url, {
+      ...options,
+      // next.js only allows lowercase method
+      method: options.method.toLowerCase()
+    })
+    const json = await response.json()
+    if (settings.jsonpath && settings.jsonpath != '$') {
+      return queryObject(json, settings.jsonpath)
+    }
+    return json
+  } catch (e) {
+    return {}
+  }
+}
+/**
+ * Fetches data based on the provided data options. Options is a union of different types, settngs, data or
+ * datasource-id keyed settings/data. If the function doesnt find settings in the object, it returns it as is. It
+ * supports mixing of static and fetched data. If multiple data settings are found, requests are made in parallel.
+ *
+ * @param {DataOptions} data  - The data options.
+ * @returns {Promise<DataScopes>} - A promise that resolves to the fetched data.
+ */
+export async function fetchData(data: DataOptions): Promise<DataScopes> {
+  if (!data) return data
+
+  if (isDataSettings(data)) return fetchDataSettings(data)
+
+  const keys = Object.keys(data)
+
+  const allRequests = await Promise.all(
+    keys
+      .map((key: keyof typeof data) => (isDataSettings(data[key]) ? fetchDataSettings(data[key]) : null))
+      .filter(Boolean)
+  )
+
+  return keys.reduce(
+    (obj, key: keyof typeof data) => ({
+      ...obj,
+      [key]: isDataSettings(data[key]) ? allRequests.shift() : data[key]
+    }),
+    {}
+  )
+}
+
+DataSettings.clean = clean
+DataSettings.toFetchArguments = toFetchArguments
+DataSettings.fetchOne = fetchDataSettings
+DataSettings.fetch = fetchData
+DataSettings.isDataSettings = isDataSettings
+DataSettings.fetchImplementation = (...args: Parameters<typeof fetch>) => fetch(...args)

package/test/FEAASComponent.react.test.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import { describe, expect, it } from 'vitest'
 import { Component } from '../src/ui/react.js'
 
-async function test(react: any, html: string) {
+export async function test(react: any, html: string) {
   const div = document.createElement('div')
   document.body.appendChild(div)
   const root = ReactDOM.render(react, div)

package/test/{FEAASComponent2.test.tsx → FEAASComponentData.test.tsx}

@@ -6,6 +6,7 @@ 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)
 
+var delayLength = 16
 describe('FEAAS component data', () => {
   beforeAll(() => {
     vi.setSystemTime(now)
@@ -28,12 +29,12 @@ describe('FEAAS component data', () => {
     expect(resolved.map(({ name }) => name)).to.eql(promises.map(({ name }) => name))
   }
 
-  const staleCacheSpy = (dataDelay = 100, htmlDelay = 100, stylesDelay = 100) => {
+  const freshRequestSpy = (dataDelay = 1, htmlDelay = 1, stylesDelay = 1) => {
     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))
+          await new Promise((resolve) => setTimeout(resolve, stylesDelay * delayLength))
           return new Response('YESTERDAY {}', {
             headers: {
               date: now.toUTCString(),
@@ -43,8 +44,8 @@ describe('FEAAS component data', () => {
         }
 
         if (url.includes('CDN')) {
-          await new Promise((resolve) => setTimeout(resolve, htmlDelay))
-          return new Response('C', {
+          await new Promise((resolve) => setTimeout(resolve, htmlDelay * delayLength))
+          return new Response('<var data-path="text">Default</var>', {
             headers: {
               date: now.toUTCString(),
               'last-modified': earlier.toUTCString()
@@ -53,36 +54,28 @@ describe('FEAAS component data', () => {
         }
 
         if (url === 'http://my-url') {
-          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          await new Promise((resolve) => setTimeout(resolve, dataDelay * delayLength))
           return new Response(JSON.stringify({ text: 'My new text' }), {})
         }
 
         if (url === 'http://my-url2') {
-          await new Promise((resolve) => setTimeout(resolve, dataDelay))
+          await new Promise((resolve) => setTimeout(resolve, dataDelay * delayLength))
           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 spy = freshRequestSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component 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(component.innerHTML).toEqual('<var data-path="text">Default</var>')
       expect(spy).toHaveBeenCalledTimes(2)
       await checkRaceCondition([
         { promise: component.whenDataReady, name: 'when data ready' },
@@ -94,7 +87,7 @@ describe('FEAAS component data', () => {
       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.innerHTML).toEqual('<var data-path="text">this is text</var>')
       expect(component.readyData).toEqual({ text: 'this is text' })
       expect(spy).toHaveBeenCalledTimes(2)
       await expect(component.whenLoaded).resolves.toBeTruthy()
@@ -103,27 +96,32 @@ describe('FEAAS component data', () => {
         { promise: component.whenRendered, name: 'when rendered' },
         { promise: component.whenLoaded, name: 'when loaded' }
       ])
+      component.set({ data: { text: 'this is updated text' } })
+      await expect(component.whenDataReady).resolves.toEqual({ text: 'this is updated text' })
+      await expect(component.whenRendered).resolves.toEqual(component)
+      expect(updateCall).toHaveBeenCalledTimes(3)
+      expect(component.innerHTML).toEqual('<var data-path="text">this is updated text</var>')
     }
 
-    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]))
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([1, 2, 3]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([1, 3, 2]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([2, 1, 3]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([2, 3, 1]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([3, 1, 2]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([3, 2, 1]))
   })
 
   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 spy = freshRequestSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{"text": "this is 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(component.innerHTML).toEqual('<var data-path="text">this is text</var>')
       expect(spy).toHaveBeenCalledTimes(2)
       await checkRaceCondition([
         { promise: component.whenDataReady, name: 'when data ready' },
@@ -135,7 +133,7 @@ describe('FEAAS component data', () => {
       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.innerHTML).toEqual('<var data-path="text">My new text</var>')
       expect(component.readyData).toEqual({ text: 'My new text' })
       expect(spy).toHaveBeenCalledTimes(3)
       await expect(component.whenLoaded).resolves.toBeTruthy()
@@ -146,25 +144,25 @@ describe('FEAAS component data', () => {
       ])
     }
 
-    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]))
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([1, 2, 3]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([1, 3, 2]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([2, 1, 3]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([2, 3, 1]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([3, 1, 2]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([3, 2, 1]))
   })
 
   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 spy = freshRequestSpy(delays[0], delays[1], delays[2])
+      document.body.innerHTML = `<feaas-component data='{ "jsonpath": "$", "url": "http://my-url" }' 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(component.innerHTML).toEqual('<var data-path="text">My new text</var>')
       expect(spy).toHaveBeenCalledTimes(3)
       await checkRaceCondition([
         { promise: component.whenDataReady, name: 'when data ready' },
@@ -174,24 +172,30 @@ describe('FEAAS component data', () => {
       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]))
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([1, 2, 3]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([1, 3, 2]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([2, 1, 3]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([2, 3, 1]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([3, 1, 2]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([3, 2, 1]))
   })
 
   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])
+      const spy = freshRequestSpy(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.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.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([
@@ -202,12 +206,12 @@ describe('FEAAS component data', () => {
       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]))
+    it('DATA -> HTML -> STYLESHEET', async () => await runWithDelay([1, 2, 3]))
+    it('DATA -> STYLESHEET -> HTML', async () => await runWithDelay([1, 3, 2]))
+    it('HTML -> DATA -> STYLESHEET', async () => await runWithDelay([2, 1, 3]))
+    it('STYLESHEET -> DATA -> HTML', async () => await runWithDelay([2, 3, 1]))
+    it('HTML -> STYLESHEET -> DATA', async () => await runWithDelay([3, 1, 2]))
+    it('STYLESHEET -> HTML -> DATA', async () => await runWithDelay([3, 2, 1]))
   })
 
   // TODO

package/test/ServerComponent.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ServerComponent } from '../src/ui/react.js'
+import { FEAASComponent } from '../src/components/FEAASComponent.js'
+import { test } from './FEAASComponent.react.test.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('React Server', () => {
+  beforeAll(() => {
+    vi.setSystemTime(now)
+    FEAASComponent.register('feaas-component')
+  })
+
+  beforeEach(() => {
+    document.write()
+  })
+
+  it('render server component', async () => {
+    vi.spyOn(global, 'fetch').mockImplementation(
+      async (url: string, options: Parameters<typeof fetch>[1] = {}) => new Response('{"data": "1"}')
+    )
+
+    const Component = await ServerComponent({ src: 'library/test', data: { url: 'http://127.0.0.1:4000/api/data' } })
+
+    await test(
+      <>{Component}</>,
+      `<feaas-component library="library" component="test" src="library/test" data="{&quot;data&quot;:&quot;1&quot;}">{"data": "1"}</feaas-component>`
+    )
+  })
+})

package/test/cdn.ts

@@ -7,7 +7,7 @@ import {
   parseStylesheetSource,
   getStylesheetURL
 } from '../src/cdn.js'
-import { CH1Node, serializeCH1RichText } from '../src/dom/data.js'
+import { CH1Node, serializeCH1RichText } from '../src/utils/data.js'
 describe('CDN', function () {
   it('should parse and serialize component src', function () {
     ;[