@sitecore-feaas/clientside 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "scripts": {
     "start": "webpack serve --open",
     "build": "rm -rf dist;npm run types; npm run build:esbuild; npm run build:sourcemaps",

package/scripts/build.js

@@ -22,7 +22,8 @@ function compile({ input, output, ...step }) {
       '_MAGIC_IMPORT_COMMENTS_ESBUILD_WORKAROUND__',
       'linkedom',
       'react',
-      'react-dom'
+      'react-dom',
+      'vm'
     ],
 
     ...step,
@@ -74,13 +75,13 @@ function compile({ input, output, ...step }) {
   { input: 'build/ui/index.js', output: 'dist/node/index.js', platform: 'node', format: 'cjs' },
   { input: 'build/ui/index.js', output: 'dist/node/index.esm.js', platform: 'node', format: 'esm' },
   { input: 'build/ui/react.js', output: 'dist/node/react.js', platform: 'node', format: 'cjs' },
-  { input: 'build/ui/react.js', output: 'dist/node/index.esm.js', platform: 'node', format: 'esm' },
+  { input: 'build/ui/react.js', output: 'dist/node/react.esm.js', platform: 'node', format: 'esm' },
   { input: 'build/headless.js', output: 'dist/node/headless.js', platform: 'node', format: 'cjs' },
   { input: 'build/headless.js', output: 'dist/node/headless.esm.js', platform: 'node', format: 'esm' },
   { input: 'build/ui/index.js', output: 'dist/browser/index.js', platform: 'browser', format: 'cjs' },
   { input: 'build/ui/index.js', output: 'dist/browser/index.esm.js', platform: 'browser', format: 'esm' },
-  { input: 'build/ui/react.js', output: 'dist/browser/react.js', platform: 'node', format: 'cjs' },
-  { input: 'build/ui/react.js', output: 'dist/browser/index.esm.js', platform: 'node', format: 'esm' },
+  { input: 'build/ui/react.js', output: 'dist/browser/react.js', platform: 'browser', format: 'cjs' },
+  { input: 'build/ui/react.js', output: 'dist/browser/react.esm.js', platform: 'browser', format: 'esm' },
   { input: 'build/headless.js', output: 'dist/browser/headless.js', platform: 'browser', format: 'cjs' },
   { input: 'build/headless.js', output: 'dist/browser/headless.esm.js', platform: 'browser', format: 'esm' }
 ].map((step) => {

package/src/cdn.ts

@@ -38,7 +38,7 @@ export interface FEAASCDNStylesheetParams {
 export type FEAASCDNStylesheetSource = {
   src: string
 }
-export type FEAASCDNStylesheetProps = FEAASCDNStylesheetParams | FEAASCDNStylesheetSource
+export type FEAASCDNStylesheetProps = FEAASCDNStylesheetParams | FEAASCDNStylesheetSource | string
 
 export function parseComponentSource(source: string): FEAASCDNComponentParams {
   const match = source.match(/^(?:(.*?)\/components)?\/?([^\/]+)\/([^\/]+)(?:\/([^\/]+)(?:\/([^\/]+?)(?:\.html?)?)?)?$/)
@@ -87,6 +87,9 @@ export function getComponentURL(props: FEAASCDNComponentProps) {
 }
 
 export function getStylesheetURL(props: FEAASCDNStylesheetProps) {
+  if (typeof props == 'string') {
+    props = { src: props }
+  }
   if ('src' in props) {
     props = {
       ...parseComponentSource(props.src)
@@ -164,7 +167,7 @@ export async function fetchComponent(props: FEAASCDNComponentProps | string) {
 
 export type ValidatableStylesheetCallback = (css: string, phase: ValidatableRequestPhase) => void
 export async function fetchAndRevalidateStylesheet(
-  props: FEAASCDNStylesheetProps | string,
+  props: FEAASCDNStylesheetProps,
   callback: ValidatableStylesheetCallback
 ) {
   if (typeof props == 'string') props = { src: props }

package/src/components/FEAASComponent.tsx

@@ -127,7 +127,7 @@ export class FEAASComponent extends FEAASBase<FEAASComponentsProps, string> {
       return
     }
     if (this.props.withStylesheet) {
-      var stylesheetPromise = loadStylesheetAllowStale(this.props).then(() => {
+      var stylesheetPromise = loadStylesheetAllowStale({ ...this.props, revision: 'published' }).then(() => {
         stylesheetPromise = null
         if (this.payload) {
           this.onLoad(this.payload)

package/src/dom/stylesheet.ts

@@ -1,22 +1,23 @@
 import {
-  FEAASCDNStylesheetParams,
+  FEAASCDNStylesheetProps,
   fetchAndRevalidateStylesheet,
   getStylesheetURL,
   ValidatableStylesheetCallback
 } from '../cdn.js'
-export function renderStylesheet(props: FEAASCDNStylesheetParams, style?: HTMLStyleElement) {
+
+export function renderStylesheet(props: FEAASCDNStylesheetProps, style?: HTMLStyleElement) {
   renderStylesheetPromise(props, (style ||= document.createElement('style')))
   return style
 }
 
-export function renderStylesheetPromise(props: FEAASCDNStylesheetParams, stylesheet?: HTMLStyleElement) {
+export function renderStylesheetPromise(props: FEAASCDNStylesheetProps, stylesheet?: HTMLStyleElement) {
   stylesheet ||= document.createElement('style')
   return fetchAndRevalidateStylesheet(props, (cssText, phase) => {
     stylesheet.textContent = cssText
   }).then(() => stylesheet)
 }
 
-export function loadStylesheet(props: FEAASCDNStylesheetParams, callback?: ValidatableStylesheetCallback) {
+export function loadStylesheet(props: FEAASCDNStylesheetProps, callback?: ValidatableStylesheetCallback) {
   var foundStylesheet = findStylesheet(props) as HTMLStyleElement
   if (!foundStylesheet) {
     var createdStylesheet = createStylesheet(props)
@@ -29,17 +30,17 @@ export function loadStylesheet(props: FEAASCDNStylesheetParams, callback?: Valid
   }).then(() => foundStylesheet || createdStylesheet)
 }
 
-export function loadStylesheetAllowStale(props: FEAASCDNStylesheetParams) {
+export function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps) {
   return new Promise((resolve, reject) => {
     loadStylesheet(props, resolve).catch(reject)
   })
 }
 
-export function findStylesheet(props: FEAASCDNStylesheetParams) {
+export function findStylesheet(props: FEAASCDNStylesheetProps) {
   return document.head.querySelector(`style[data-href="${getStylesheetURL(props)}"]`)
 }
 
-export function createStylesheet(props: FEAASCDNStylesheetParams) {
+export function createStylesheet(props: FEAASCDNStylesheetProps) {
   const url = getStylesheetURL(props)
   const stylesheet = document.createElement('style')
   stylesheet.setAttribute('data-href', url)

package/src/ui/react.tsx

@@ -1,6 +1,5 @@
-import { FEAASComponentProps } from '../headless.js'
-
 export * from './index.js'
+import { FEAASComponentProps } from './index.js'
 import React from 'react'
 
 export function FEAASEmbed({ data, ...props }: FEAASComponentProps & { src: string }) {

package/test/FEAASStylesheet.test.tsx

@@ -1,7 +1,7 @@
 import { afterAll, beforeEach, beforeAll, describe, expect, it, vi } from 'vitest'
 import { FEAASStylesheet } from '../src/components/FEAASStylesheet.js'
 import { renderDOMContent } from '../src/dom/rendering.js'
-import { clearFetchCache, loadStylesheet } from '../src/headless.js'
+import { clearFetchCache, DEFAULT_CDN_URL, loadStylesheet } from '../src/headless.js'
 
 const earliest = new Date(2000, 1, 1, 0, 0, 0)
 const earlier = new Date(2000, 1, 2, 0, 0, 0)
@@ -46,6 +46,27 @@ describe('Stylesheet', () => {
 
     expect(document.head.querySelector('style').textContent).toContain('TODAY')
   })
+  it('should load stylesheet with minimum parameters(cold cache)', async () => {
+    const spy = vi.spyOn(global, 'fetch')
+    spy.mockImplementation(async (url: string, options: Parameters<typeof fetch>[1] = {}) => {
+      if (url.match(DEFAULT_CDN_URL + '/styles/L/published.css'))
+        return new Response('TODAY {}', {
+          headers: {
+            date: now.toUTCString(),
+            'last-modified': earlier.toUTCString()
+          }
+        })
+    })
+
+    document.body.innerHTML = '<feaas-stylesheet library="L"></feaas-stylesheet>'
+
+    const stylesheet = document.body.firstElementChild as FEAASStylesheet
+
+    await expect(stylesheet.whenRendered).resolves.toEqual(stylesheet)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    expect(document.head.querySelector('style').textContent).toContain('TODAY')
+  })
 
   it('should invalidate stylesheet cache', async () => {
     const spy = vi.spyOn(global, 'fetch')
@@ -155,5 +176,6 @@ describe('Stylesheet', () => {
         revision: 'published'
       }).then((r) => r.textContent)
     ).resolves.toEqual('TODAY {}')
+    await expect(loadStylesheet(`http://CDN/L/published.css`).then((r) => r.textContent)).resolves.toEqual('TODAY {}')
   })
 })

package/types/cdn.d.ts

@@ -26,7 +26,7 @@ export interface FEAASCDNStylesheetParams {
 export type FEAASCDNStylesheetSource = {
     src: string;
 };
-export type FEAASCDNStylesheetProps = FEAASCDNStylesheetParams | FEAASCDNStylesheetSource;
+export type FEAASCDNStylesheetProps = FEAASCDNStylesheetParams | FEAASCDNStylesheetSource | string;
 export declare function parseComponentSource(source: string): FEAASCDNComponentParams;
 export declare function getComponentSource(props: FEAASCDNComponentParams): string;
 export declare function getStylesheetSource(props: FEAASCDNStylesheetParams): string;
@@ -53,5 +53,5 @@ export declare function fetchComponent(props: FEAASCDNComponentProps | string):
     instance?: string;
 }>;
 export type ValidatableStylesheetCallback = (css: string, phase: ValidatableRequestPhase) => void;
-export declare function fetchAndRevalidateStylesheet(props: FEAASCDNStylesheetProps | string, callback: ValidatableStylesheetCallback): Promise<Response>;
+export declare function fetchAndRevalidateStylesheet(props: FEAASCDNStylesheetProps, callback: ValidatableStylesheetCallback): Promise<Response>;
 //# sourceMappingURL=cdn.d.ts.map

package/types/cdn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,uBAAuB,EACxB,MAAM,YAAY,CAAA;AAEnB,eAAO,MAAM,eAAe,wDAAwD,CAAA;AACpF,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IAEf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,sBAAsB,GAAG,CAAC,uBAAuB,GAAG,uBAAuB,CAAC,GACtF,qCAAqC,CAAA;AAEvC,MAAM,WAAW,wBAAwB;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAErD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,wBAAwB,CAAA;AAEzF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,uBAAuB,CAM5E;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,UAahE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,UAIlE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,wBAAwB,CAM9E;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,UAS5D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,UAS9D;AAED,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EACjC,cAAc,UAAQ,0HA8CvB;AAED,mCAAmC;AACnC,wBAAsB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM;;;;;;;;IAvIzE,oCAAoC;;;;;;;;GAkJrC;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;AACjG,wBAAsB,4BAA4B,CAChD,KAAK,EAAE,uBAAuB,GAAG,MAAM,EACvC,QAAQ,EAAE,6BAA6B,qBAoBxC"}
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,uBAAuB,EACxB,MAAM,YAAY,CAAA;AAEnB,eAAO,MAAM,eAAe,wDAAwD,CAAA;AACpF,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IAEf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,MAAM,MAAM,sBAAsB,GAAG,CAAC,uBAAuB,GAAG,uBAAuB,CAAC,GACtF,qCAAqC,CAAA;AAEvC,MAAM,WAAW,wBAAwB;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAErD,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AACD,MAAM,MAAM,uBAAuB,GAAG,wBAAwB,GAAG,wBAAwB,GAAG,MAAM,CAAA;AAElG,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,uBAAuB,CAM5E;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,UAahE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,UAIlE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,wBAAwB,CAM9E;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,sBAAsB,UAS5D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,UAY9D;AAED,wBAAsB,2BAA2B,CAC/C,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EACjC,cAAc,UAAQ,0HA8CvB;AAED,mCAAmC;AACnC,wBAAsB,cAAc,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM;;;;;;;;IA1IzE,oCAAoC;;;;;;;;GAqJrC;AAED,MAAM,MAAM,6BAA6B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;AACjG,wBAAsB,4BAA4B,CAChD,KAAK,EAAE,uBAAuB,EAC9B,QAAQ,EAAE,6BAA6B,qBAoBxC"}

package/types/dom/stylesheet.d.ts

@@ -1,8 +1,8 @@
-import { FEAASCDNStylesheetParams, ValidatableStylesheetCallback } from '../cdn.js';
-export declare function renderStylesheet(props: FEAASCDNStylesheetParams, style?: HTMLStyleElement): HTMLStyleElement;
-export declare function renderStylesheetPromise(props: FEAASCDNStylesheetParams, stylesheet?: HTMLStyleElement): Promise<HTMLStyleElement>;
-export declare function loadStylesheet(props: FEAASCDNStylesheetParams, callback?: ValidatableStylesheetCallback): Promise<HTMLStyleElement>;
-export declare function loadStylesheetAllowStale(props: FEAASCDNStylesheetParams): Promise<unknown>;
-export declare function findStylesheet(props: FEAASCDNStylesheetParams): Element;
-export declare function createStylesheet(props: FEAASCDNStylesheetParams): HTMLStyleElement;
+import { FEAASCDNStylesheetProps, ValidatableStylesheetCallback } from '../cdn.js';
+export declare function renderStylesheet(props: FEAASCDNStylesheetProps, style?: HTMLStyleElement): HTMLStyleElement;
+export declare function renderStylesheetPromise(props: FEAASCDNStylesheetProps, stylesheet?: HTMLStyleElement): Promise<HTMLStyleElement>;
+export declare function loadStylesheet(props: FEAASCDNStylesheetProps, callback?: ValidatableStylesheetCallback): Promise<HTMLStyleElement>;
+export declare function loadStylesheetAllowStale(props: FEAASCDNStylesheetProps): Promise<unknown>;
+export declare function findStylesheet(props: FEAASCDNStylesheetProps): Element;
+export declare function createStylesheet(props: FEAASCDNStylesheetProps): HTMLStyleElement;
 //# sourceMappingURL=stylesheet.d.ts.map

package/types/dom/stylesheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/dom/stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EAGxB,6BAA6B,EAC9B,MAAM,WAAW,CAAA;AAClB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,CAAC,EAAE,gBAAgB,oBAGzF;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,wBAAwB,EAAE,UAAU,CAAC,EAAE,gBAAgB,6BAKrG;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,wBAAwB,EAAE,QAAQ,CAAC,EAAE,6BAA6B,6BAWvG;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,wBAAwB,oBAIvE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,wBAAwB,WAE7D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,oBAM/D"}
+{"version":3,"file":"stylesheet.d.ts","sourceRoot":"","sources":["../../src/dom/stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EAGvB,6BAA6B,EAC9B,MAAM,WAAW,CAAA;AAElB,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,EAAE,KAAK,CAAC,EAAE,gBAAgB,oBAGxF;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,uBAAuB,EAAE,UAAU,CAAC,EAAE,gBAAgB,6BAKpG;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,EAAE,QAAQ,CAAC,EAAE,6BAA6B,6BAWtG;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,uBAAuB,oBAItE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,uBAAuB,WAE5D;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,uBAAuB,oBAM9D"}