@sitecore-feaas/clientside 0.1.54 → 0.1.56

package/types/dom/thumbnail.d.ts

@@ -0,0 +1,82 @@
+import type { VersionModel, ComponentModel } from '@sitecore-feaas/sdk';
+export type Callback = (image: HTMLImageElement, isCached: boolean) => void;
+export declare const convertBase64toBlob: (base64: string) => Promise<Blob>;
+/** Parse fetch response as blob and turn it into HTMLImageElement off thread */
+export declare const responseToImage: (response: Response) => Promise<HTMLImageElement>;
+/**
+ * Retrieves the version of a given component that best fits a specific display width.
+ *
+ * The function ensures that the version data for the component is available and selects the one that is most suitable
+ * for a display width of 800 pixels.
+ *
+ * @param {ComponentModel} component - The component for which the version needs to be obtained.
+ * @returns {Promise<VersionModel>} - A promise that resolves to the most suitable version for a display width of 800
+ *   pixels.
+ */
+export declare function getVersionForThumbnail(component: ComponentModel): Promise<VersionModel>;
+/**
+ * Ensures an up-to-date thumbnail for a specific component and version.
+ *
+ * This operation initiates thumbnail load and, if that fails or if file is out of date, a new thumbnail is generated.
+ * It can work with a callback, which is designed to potentially fire twice for enhancing user experience. This dual
+ * firing allows for an immediate display of a possibly stale cached image while downloading or generating new version
+ * in the background.
+ *
+ * 1. The first call can happen with the stale cached or outdated image.
+ * 2. The second call occurs with the up-to-date loaded or freshly generated generated image.
+ *
+ * @param {ComponentModel} component - Relevant component.
+ * @param {VersionModel} [version] - Relevant version (optional, falls back to responsive).
+ * @param {Callback} [callback] - Callback to handle the loaded or generated image (optional).
+ * @returns {Promise<HTMLImageElement | null>} - The final thumbnail image (either loaded or freshly generated).
+ */
+export declare function get(component: ComponentModel, version?: VersionModel, callback?: Callback): Promise<HTMLImageElement>;
+/**
+ * Retrieves the thumbnail image for a given component/version combination, with a responsive default if version is not
+ * provided.
+ *
+ * The resulting HTML <img> element will have `width`, `height`, and `src` properties ready for use. Although it can
+ * operate as a regular promise that resolves when the thumbnail is loaded, it also supports a callback for an enhanced
+ * user experience. This callback may be invoked twice, depending on the state of the cache:
+ *
+ * 1. The first call occurs if the image was previously cached by the browser, but the cache is stale.
+ * 2. The second call happens when the image is updated from a fresh download. By this design, the user gets to see a
+ *    cached image immediately while the updated image is being downloaded in the background.
+ *
+ * If the version of a component is known to be newer than remote file, the function will throw `InvalidResponse` error.
+ * As a way to handle that error, the `generate` function may be used to produce new thumbnail (@see render).
+ *
+ * @param {ComponentModel} component - The component to load a thumbnail for.
+ * @param {VersionModel} [version] - The version of the component to load a thumbnail for. If not provided, a version
+ *   suitable for a responsive component is selected.
+ * @param {Callback} [callback] - A callback to handle the loaded image. This callback may be invoked twice for the
+ *   reasons described above.
+ * @returns {Promise<HTMLImageElement>} - The thumbnail image for the component/version combination.
+ */
+export declare function load(component: ComponentModel, version?: VersionModel, callback?: Callback): Promise<HTMLImageElement>;
+/**
+ * Creates a thumbnail image for a given component and version.
+ *
+ * First, it determines the appropriate version to use. If not provided, it attempts to fetch one suitable for
+ * thumbnail. It then leverages `render` to generate an image with provided parameters and finally, if the component
+ * isn't new, uploads the generated as a Blob onto cdn for future retrieval.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} [version] - Version instance.
+ * @returns {Promise<HTMLImageElement | null>} Thumbnail image or null if generation isn't possible.
+ */
+export declare function generate(component: ComponentModel, version?: VersionModel): Promise<HTMLImageElement>;
+/**
+ * Uploads a thumbnail Blob to a CDN, enabling it for future retrieval.
+ *
+ * It constructs a URL based on component and version information, if available. The thumbnail's blob is uploaded with
+ * several metadata points, including identifiers and timestamps. Upon successful upload, it sends a no-cache fetch
+ * request to the constructed URL to bust the cache.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} version - Version instance.
+ * @param {Blob} blob - Blob instance to upload.
+ * @returns {Promise<string>} URL of the uploaded Blob.
+ */
+export declare function upload(component: ComponentModel, version: VersionModel, blob: Blob): Promise<string>;
+//# sourceMappingURL=thumbnail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../src/dom/thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAInF,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;AAE3E,eAAO,MAAM,mBAAmB,WAAY,MAAM,kBAA4C,CAAA;AAE9F,gFAAgF;AAChF,eAAO,MAAM,eAAe,aAAc,QAAQ,KAAG,QAAQ,gBAAgB,CAUzE,CAAA;AAEJ;;;;;;;;;GASG;AACH,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,CAG7F;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,QAAQ,6BAqB/F;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CACxB,SAAS,EAAE,cAAc,EACzB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,CAAC,EAAE,QAAQ,GAClB,OAAO,CAAC,gBAAgB,CAAC,CAmC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,EAAE,YAAY,6BAkB/E;AAkFD;;;;;;;;;;;GAWG;AACH,wBAAsB,MAAM,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B1G"}

package/types/fetch.d.ts

@@ -12,12 +12,12 @@ import { ControlledPromise } from './utils/promise.js';
  * errors will not be caught. Function throws when unable to fetch valid response.
  */
 declare const phases: readonly ["initial", "check", "updated"];
-export type ValidatableRequestPhase = typeof phases[number];
+export type ValidatableRequestPhase = (typeof phases)[number];
 export type FetchCache = Record<string, FetchCacheRequest>;
 export interface ValidatableRequest {
     url: Parameters<typeof fetch>[0];
     options?: Parameters<typeof fetch>[1];
-    validator?: (resposne: Response) => boolean;
+    validator?: (resposne: Response, isCached: boolean) => boolean;
     callback?: (response: Response, status: ValidatableRequestPhase, isCached: boolean) => any;
     isCached?: boolean;
     response?: Response;
@@ -34,12 +34,14 @@ export declare var fetchCache: Record<string, FetchCacheRequest>;
 export declare function clearFetchCache(): void;
 export declare function fetchAndRevalidate(url: ValidatableRequest['url'], options?: ValidatableRequest['options'], validator?: ValidatableRequest['validator'], callback?: ValidatableRequest['callback'], cache?: FetchCache): Promise<Response>;
 export declare function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate?: boolean): FetchCacheRequest;
+export declare class InvalidResponse extends Error {
+}
 export declare function fetchWithCacheAwareness({ url, options, validator, callback, cache }: ValidatableRequest, phase?: ValidatableRequestPhase): Promise<{
     url: RequestInfo | URL;
     options: RequestInit;
     isCached: boolean;
     response: Response;
-    validator: (resposne: Response) => boolean;
+    validator: (resposne: Response, isCached: boolean) => boolean;
     callback: (response: Response, status: "initial" | "check" | "updated", isCached: boolean) => any;
     cache: FetchCache;
 }>;
@@ -49,7 +51,7 @@ export declare function fetchBypassingCache(request: ValidatableRequest): Promis
     options: RequestInit;
     isCached: boolean;
     response: Response;
-    validator: (resposne: Response) => boolean;
+    validator: (resposne: Response, isCached: boolean) => boolean;
     callback: (response: Response, status: "initial" | "check" | "updated", isCached: boolean) => any;
     cache: FetchCache;
 }>;

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;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM,0CAA2C,CAAA;AACvD,MAAM,MAAM,uBAAuB,GAAG,OAAO,MAAM,CAAC,MAAM,CAAC,CAAA;AAC3D,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,KAAK,OAAO,CAAA;IAC3C,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,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,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,UAAQ,qBAajF;AAED,wBAAsB,uBAAuB,CAC3C,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAChE,KAAK,GAAE,uBAAmC;;;;;;;;GAmC3C;AAED,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;;;;;;;;;;;GAWG;AACH,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,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,wBAAgB,aAAa,CAAC,GAAG,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,UAAQ,qBAajF;AAED,qBAAa,eAAgB,SAAQ,KAAK;CAAG;AAE7C,wBAAsB,uBAAuB,CAC3C,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,kBAAkB,EAChE,KAAK,GAAE,uBAAmC;;;;;;;;GAmC3C;AAED,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/headless.d.ts

@@ -16,6 +16,7 @@ export * from './components/FEAASComponent.js';
 export * from './components/FEAASLoader.js';
 export * from './components/FEAASStylesheet.js';
 export * from './utils/datapath.js';
+export * as Thumbnail from './dom/thumbnail.js';
 declare global {
     interface Window {
         FEAASLoading: Promise<any>;

package/types/headless.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}
+{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA;AACnC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAE/C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QAC1B,YAAY,EAAE,OAAO,YAAY,CAAA;KAClC;CACF"}