@sitecore-feaas/clientside 0.6.4 → 0.6.5

package/src/fetch.ts

@@ -21,9 +21,14 @@ export type FetchCacheRequest = {
   final: ControlledPromise<Response>
 }
 
-export var fetchCache: Record<string, FetchCacheRequest> = {}
+/** Prototype-free map so dynamic URL keys like "__proto__" cannot pollute Object.prototype. */
+function createFetchCache(): FetchCache {
+  return Object.create(null) as FetchCache
+}
+
+export var fetchCache: FetchCache = createFetchCache()
 export function clearFetchCache() {
-  fetchCache = {}
+  fetchCache = createFetchCache()
 }
 
 /**

package/test/FEAASBase.test.tsx

@@ -89,8 +89,8 @@ describe('React', function () {
 
         // Initialization promise is rejected
         await Promise.all([
-          expect(() => component.whenRendered).rejects.toEqual(new Error(errorType)),
-          expect(() => component.whenLoaded).rejects.toEqual(new Error(errorType))
+          expect(component.whenRendered).rejects.toEqual(new Error(errorType)),
+          expect(component.whenLoaded).rejects.toEqual(new Error(errorType))
         ])
 
         // feaasEvent is dispatched and bubbled to dom
@@ -122,7 +122,7 @@ describe('React', function () {
 
         // Initialization promise is rejected
         await Promise.all([
-          expect(() => component.whenRendered).rejects.toEqual(new Error(errorType)),
+          expect(component.whenRendered).rejects.toEqual(new Error(errorType)),
           expect(component.whenLoaded).resolves.toBeTruthy()
         ])
 
@@ -166,7 +166,7 @@ describe('React', function () {
 
         // Execute logic after initialization
         callback(component)
-        await expect(() => component.whenRendered).rejects.toEqual(new Error(errorType))
+        await expect(component.whenRendered).rejects.toEqual(new Error(errorType))
 
         // feaasEvent is dispatched and bubbled to dom
         expect(errors.splice(0)).toEqual([new Error(errorType)])

package/test/FEAASComponent.react.test.tsx

@@ -1,7 +1,7 @@
 import { createRoot, hydrateRoot } from 'react-dom/client'
 import React, { useContext } from 'react'
 import { flushSync } from 'react-dom'
-import { describe, expect, it, beforeEach, vi, afterEach } from 'vitest'
+import { describe, expect, it, beforeEach, vi } from 'vitest'
 import {
   Component,
   ExternalComponent,

package/test/FEAASComponent.test.tsx

@@ -448,7 +448,7 @@ describe('Components', () => {
     // Renders cached version initially
     await expect(component.whenRendered).resolves.toEqual(component)
     expect(component.innerHTML).toContain('<p>YESTERDAY</p>')
-    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledTimes(3)
 
     // whenLoaded only fires when ensures that up-to-date version is loaded
     await expect(component.whenLoaded).resolves.toBeTruthy()

package/test/FEAASExternal.test.tsx

@@ -1,15 +1,33 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import React from 'react'
+import ReactDOM from 'react-dom'
 import * as Clientside from '../src/ui/react.js'
 import FEAASExternal from '../src/ui/FEAASExternal.js'
-import { vi } from 'vitest'
 import ReactDOMClient from 'react-dom/client'
 
-vi.mock('https://cdn.skypack.dev/react-dom/client', () => {
-  return ReactDOMClient
-})
+const reactModules = { React, ReactDOM, ReactDOMClient }
 
 describe('External', () => {
+  beforeEach(() => {
+    document.open()
+    document.write('<html><head></head><body></body></html>')
+    document.close()
+    vi.spyOn(FEAASExternal.prototype, 'load').mockResolvedValue(reactModules)
+  })
+
+  afterEach(async () => {
+    document.querySelectorAll('feaas-external').forEach((element) => element.remove())
+    document.body.innerHTML = ''
+    vi.restoreAllMocks()
+    await new Promise((resolve) => setImmediate(resolve))
+  })
+
+  async function expectRendered(component: FEAASExternal) {
+    await expect(component.whenLoaded).resolves.toBeTruthy()
+    await expect(component.whenRendered).resolves.toEqual(component)
+    await new Promise((resolve) => setImmediate(resolve))
+  }
+
   function Hello(props: { firstName: string; telephone: string }) {
     return React.createElement('div', {}, `Hello my name is ${props.firstName} and my tel is ${props.telephone}`)
   }
@@ -69,17 +87,16 @@ describe('External', () => {
     Clientside.External.registerComponent(Hello, helloSchema)
     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="MyTestComponent" contenteditable="false"></feaas-external>'
-    debugger
 
     const component = document.getElementById('external-component') as FEAASExternal
-    await expect(component.whenRendered).resolves.toEqual(component)
+    await expectRendered(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>'
     const component = document.getElementById('external-component') as FEAASExternal
-    await expect(component.whenRendered).resolves.toEqual(component)
+    await expectRendered(component)
     expect(component.innerHTML).toEqual('')
   })
   it('can register and render multiple components', async () => {
@@ -89,17 +106,17 @@ describe('External', () => {
       '<feaas-external id="external-component1" 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="MyTestComponent1" contenteditable="false"></feaas-external>' +
       '<feaas-external id="external-component2" class="-component" data-attributes-keys="first-name,address" first-name="George" address="Test street 12" data-attributes="{&quot;first-name&quot;:&quot;George&quot;,&quot;address&quot;:&quot;Test street 12&quot;}" data-external-id="MyTestComponent2" contenteditable="false"></feaas-external>'
     const component1 = document.getElementById('external-component1') as FEAASExternal
-    await expect(component1.whenRendered).resolves.toEqual(component1)
+    await expectRendered(component1)
     expect(component1.innerHTML).toEqual('<div>Hello my name is Chuck and my tel is 45657890875643</div>')
     const component2 = document.getElementById('external-component2') as FEAASExternal
-    await expect(component2.whenRendered).resolves.toEqual(component2)
+    await expectRendered(component2)
     expect(component2.innerHTML).toEqual('<div>Hello my name is George and my address is Test street 12</div>')
   })
   it('can successfully parse component props', async () => {
     Clientside.External.registerComponent(TypesComponent, typesComponentSchema)
     document.body.innerHTML = `<feaas-external id="types-component" class="-component" data-attributes-keys="string-prop,number-prop,boolean-prop,array-prop,object-prop" string-prop="this is a string" number-prop="5" boolean-prop="true" array-prop="[1,2,3,4,5]" object-prop="{&quot;value&quot;:&quot;object value&quot;}" data-attributes="{&quot;first-name&quot;:&quot;Chuck&quot;,&quot;telephone&quot;:&quot;45657890875643&quot;}" data-external-id="TypesComponent" contenteditable="false"></feaas-external>`
     const typesComponent = document.getElementById('types-component') as FEAASExternal
-    await expect(typesComponent.whenRendered).resolves.toEqual(typesComponent)
+    await expectRendered(typesComponent)
     expect(typesComponent.innerHTML).toEqual(
       '<div>Text: this is a string, Number + 1: 6, Boolean: it is true, Array (joined): 1, 2, 3, 4, 5, Object: object value</div>'
     )
@@ -109,7 +126,7 @@ describe('External', () => {
     document.body.innerHTML = `<feaas-external id="types-component" class="-component" datasources='{"my": {"arrayProp": [1,2,3], "objectProp": {"value": 333}, "numberProp": 1, "booleanProp": false, "stringProp": "Hey"}}' data-external-id="TypesComponent" contenteditable="false"></feaas-external>`
     const typesComponent = document.getElementById('types-component') as FEAASExternal
 
-    await expect(typesComponent.whenRendered).resolves.toEqual(typesComponent)
+    await expectRendered(typesComponent)
     expect(typesComponent.innerHTML).toEqual(
       '<div>Text: Hey, Number + 1: 2, Boolean: error, Array (joined): 1, 2, 3, Object: 333</div>'
     )

package/test/FEAASStylesheet.test.tsx

@@ -131,7 +131,7 @@ describe('Stylesheet', () => {
     const stylesheet = document.body.firstElementChild as FEAASStylesheet
 
     await expect(stylesheet.whenRendered).resolves.toEqual(stylesheet)
-    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledTimes(3)
     expect(document.head.querySelector('style').textContent).toContain('YESTERDAY {}')
 
     // whenLoaded only fires when ensures that up-to-date version is loaded

package/test/fetch.ts

@@ -84,20 +84,20 @@ describe('Fetch', () => {
           status: 400
         })
     )
-    expect(() =>
+    await expect(
       fetchAndRevalidate('a', undefined, undefined, callback1).then((r) => r.clone().text())
     ).rejects.toEqual(new Error('Fetch failed'))
-    expect(() =>
+    await expect(
       fetchAndRevalidate('a', undefined, undefined, callback2).then((r) => r.clone().text())
     ).rejects.toEqual(new Error('Fetch failed'))
     expect(spy).toHaveBeenCalledTimes(1)
     expect(phases1).toEqual([])
     expect(phases2).toEqual([])
-    expect(() => fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
+    await expect(fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
     clearFetchCache()
-    expect(() => fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
+    await expect(fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
     expect(spy).toHaveBeenCalledTimes(2)
-    expect(() => fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
+    await expect(fetchAndRevalidate('a').then((r) => r.clone().text())).rejects.toEqual(new Error('Fetch failed'))
     expect(spy).toHaveBeenCalledTimes(2)
     expect(phases1).toEqual([])
     expect(phases2).toEqual([])
@@ -251,4 +251,20 @@ describe('Fetch', () => {
     ])
     expect(spy).toHaveBeenCalledTimes(6)
   })
+  it('should not pollute Object.prototype when cache key is __proto__', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(
+      async () =>
+        new Response('A', {
+          headers: {
+            date: todayNoon.toUTCString()
+          }
+        })
+    )
+
+    await fetchAndRevalidate('__proto__', undefined, undefined, callback1)
+
+    expect(Object.prototype.hasOwnProperty('phase')).toBe(false)
+    expect(({} as Record<string, unknown>).phase).toBeUndefined()
+  })
 })

package/types/fetch.d.ts

@@ -18,7 +18,7 @@ export type FetchCacheRequest = {
     updated: ControlledPromise<Response>;
     final: ControlledPromise<Response>;
 };
-export declare var fetchCache: Record<string, FetchCacheRequest>;
+export declare var fetchCache: FetchCache;
 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

package/types/fetch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetch.d.ts","sourceRoot":"","sources":["../src/fetch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAEtD,QAAA,MAAM,MAAM,0CAA2C,CAAA;AACvD,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAC1D,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAA;IAC9D,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAA;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,uBAAuB,CAAA;IAC9B,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IAClC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CACnC,CAAA;AAED,eAAO,IAAI,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAM,CAAA;AAC7D,wBAAgB,eAAe,SAE9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,kBAAkB,CACtC,GAAG,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAC9B,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAC3C,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,EACzC,KAAK,GAAE,UAAuB,qBAM/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,uBAAuB,CAC3C,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAChE,KAAK,GAAE,uBAAmC;;;;;;;;GAmC3C;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,UAAQ,qBAajF;AAED,qBAAa,eAAgB,SAAQ,KAAK;CAAG;AAE7C;;;;;;;GAOG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,gFA0B7E;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB;;;;;;;;GAWpE"}
+{"version":3,"file":"fetch.d.ts","sourceRoot":"","sources":["../src/fetch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAEtD,QAAA,MAAM,MAAM,0CAA2C,CAAA;AACvD,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAC1D,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAA;IAC9D,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAA;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,uBAAuB,CAAA;IAC9B,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IAClC,OAAO,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;CACnC,CAAA;AAOD,eAAO,IAAI,UAAU,EAAE,UAA+B,CAAA;AACtD,wBAAgB,eAAe,SAE9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,kBAAkB,CACtC,GAAG,EAAE,kBAAkB,CAAC,KAAK,CAAC,EAC9B,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,EAC3C,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,EACzC,KAAK,GAAE,UAAuB,qBAM/B;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,uBAAuB,CAC3C,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAChE,KAAK,GAAE,uBAAmC;;;;;;;;GAmC3C;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,UAAQ,qBAajF;AAED,qBAAa,eAAgB,SAAQ,KAAK;CAAG;AAE7C;;;;;;;GAOG;AACH,wBAAsB,oBAAoB,CACxC,OAAO,EAAE,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,gFA0B7E;AAED,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB;;;;;;;;GAWpE"}

package/types/utils/settings.d.ts

@@ -15,7 +15,7 @@ export declare function clean(settings: any): Partial<{
     params: Record<string, any>;
     headers: Record<string, string>;
     jsonpath: string;
-    method: "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE" | "HEAD";
+    method: "HEAD" | "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE";
     body: Record<string, any>;
     url: string;
 }>;
@@ -29,7 +29,7 @@ export declare const isDataSettings: (data: any) => data is {
     params: Record<string, any>;
     headers: Record<string, string>;
     jsonpath: string;
-    method: "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE" | "HEAD";
+    method: "HEAD" | "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE";
     body: Record<string, any>;
     url: string;
 };
@@ -51,7 +51,7 @@ export declare function DataSettings(settings: any): {
     params: Record<string, any>;
     headers: Record<string, string>;
     jsonpath: string;
-    method: "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE" | "HEAD";
+    method: "HEAD" | "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE";
     body: Record<string, any>;
     url: string;
 };
@@ -62,7 +62,7 @@ export declare namespace DataSettings {
         params: Record<string, any>;
         headers: Record<string, string>;
         jsonpath: string;
-        method: "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE" | "HEAD";
+        method: "HEAD" | "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE";
         body: Record<string, any>;
         url: string;
     }, datasourceId?: string) => Promise<Data>;
@@ -71,7 +71,7 @@ export declare namespace DataSettings {
         params: Record<string, any>;
         headers: Record<string, string>;
         jsonpath: string;
-        method: "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE" | "HEAD";
+        method: "HEAD" | "GET" | "POST" | "OPTIONS" | "PUT" | "DELETE" | "UPDATE";
         body: Record<string, any>;
         url: string;
     };