@momentum-design/components 0.25.1 → 0.25.3

package/dist/components/icon/icon.component.js

@@ -101,28 +101,29 @@ class Icon extends Component {
      */
     async getIconData() {
         if (this.iconProviderContext.value) {
-            const { fileExtension, url, iconsCache, shouldCache } = this.iconProviderContext.value;
+            const { fileExtension, url, cacheName, cacheStrategy } = this.iconProviderContext.value;
             if (url && fileExtension && this.name) {
-                // abort the previous fetch request if it is still pending
-                // before retreiving from cache
-                this.abortController.abort();
-                // check if icon is already fetched and stored in the iconsCache map
-                if (iconsCache.has(this.name)) {
-                    const iconElement = this.prepareIconElement(iconsCache.get(this.name));
-                    this.handleIconLoadedSuccess(iconElement);
-                    return;
-                }
-                this.abortController = new AbortController();
+                // function to abort the fetch request and create a new signal
+                // (directly passing the abortcontroller to the fetch request per reference
+                // will not work due to JS call-by-sharing behavior)
+                const renewSignal = () => {
+                    this.abortController.abort();
+                    this.abortController = new AbortController();
+                    return this.abortController.signal;
+                };
                 try {
-                    // fetch icon from backend
-                    const iconData = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
+                    // fetch icon data (including caching logic)
+                    const iconData = await dynamicSVGImport({
+                        url,
+                        name: this.name,
+                        fileExtension,
+                        cacheName,
+                        cacheStrategy,
+                        renewSignal,
+                    });
                     // parse the fetched icon string to an html element and set the attributes
                     const iconElement = this.prepareIconElement(iconData);
                     this.handleIconLoadedSuccess(iconElement);
-                    if (shouldCache) {
-                        // store the fetched icon string in the iconsCache map
-                        iconsCache.set(this.name, iconData);
-                    }
                 }
                 catch (error) {
                     this.handleIconLoadedFailure(error);

package/dist/components/icon/icon.utils.d.ts

@@ -1,5 +1,20 @@
+import type { CacheStrategy } from '../../utils/icon-cache';
+interface Args {
+    url: string;
+    name: string;
+    fileExtension: string;
+    cacheStrategy?: CacheStrategy;
+    cacheName?: string;
+    renewSignal: () => AbortSignal;
+}
 /**
  * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched icon using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched icon will be cached using the respective cache.
+ *
  * It will throw an error if the response is not ok.
  *
  * @param url - The base url of the icon
@@ -7,8 +22,11 @@
  * @param fileExtension - The file extension of the icon
  * @param signal - The signal to abort the fetch.
  * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ *
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<string>;
+declare const dynamicSVGImport: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
 export { dynamicSVGImport };

package/dist/components/icon/icon.utils.js

@@ -1,6 +1,25 @@
-/* eslint-disable implicit-arrow-linebreak */
+import { iconsCache } from '../../utils/icon-cache';
+/**
+ * Utility function for fetching the icon from the provided `request`.
+ * It will throw an error if the response is not ok.
+ * @param request - The request object to fetch the icon
+ * @returns Promise<Response> - The response from the fetch
+ * @throws Error if the response is not ok
+ */
+const fetchIcon = async (request) => fetch(request).then((response) => {
+    if (!response.ok) {
+        throw new Error('There was a problem while fetching the icon!');
+    }
+    return response;
+});
 /**
  * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched icon using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched icon will be cached using the respective cache.
+ *
  * It will throw an error if the response is not ok.
  *
  * @param url - The base url of the icon
@@ -8,14 +27,53 @@
  * @param fileExtension - The file extension of the icon
  * @param signal - The signal to abort the fetch.
  * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ *
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-const dynamicSVGImport = async (url, name, fileExtension, signal) => {
-    const response = await fetch(`${url}/${name}.${fileExtension}`, { signal });
-    if (!response.ok) {
-        throw new Error('There was a problem while fetching the icon!');
+const dynamicSVGImport = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
+    // abort the previous fetch request if it is still pending
+    // and create a new signal
+    const signal = renewSignal();
+    const request = new Request(`${url}/${name}.${fileExtension}`, {
+        signal,
+    });
+    // if there is no cache defined (cacheName and cacheStrategy properly set),
+    // fetch the icon and return the response
+    if (!cacheName || !cacheStrategy || !['in-memory-cache', 'web-cache-api'].includes(cacheStrategy)) {
+        return fetchIcon(request).then((response) => response.text());
     }
-    return response.text();
+    return iconsCache(cacheName, cacheStrategy).then((iconsCache) => iconsCache
+        .get(request)
+        .then((responseFromCache) => {
+        // **If entry in cache, return**
+        if (responseFromCache) {
+            return responseFromCache;
+        }
+        // **Otherwise, fetch and cache if successful**
+        // Both fetchIcon() and iconsCache.set() "consume" the request,
+        // so we need to make a copy.
+        // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
+        return fetchIcon(request.clone()).then((response) => {
+            var _a;
+            // This avoids caching responses that we know are errors
+            // (i.e. HTTP status code of 4xx or 5xx).
+            if (response.status < 400 && response.headers.has('content-type')) {
+                // Call .clone() on the response to save copy to cache.
+                // https://developer.mozilla.org/en-US/docs/Web/API/Request/clone
+                return (_a = iconsCache.set) === null || _a === void 0 ? void 0 : _a.call(iconsCache, request, response.clone()).then(() => response.text());
+            }
+            return response.text();
+        });
+    })
+        .catch((error) => {
+        // Note that a HTTP error response (e.g. 404) will NOT trigger
+        // an exception.
+        // It will return a normal response object that has the appropriate
+        // error code set.
+        throw new Error(`Error in caching the Icon ${name}, ${error}`);
+    }));
 };
 export { dynamicSVGImport };

package/dist/components/iconprovider/iconprovider.component.d.ts

@@ -8,11 +8,15 @@ import IconProviderContext from './iconprovider.context';
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
- * If `shouldCache` is set to true, the IconProvider will cache the icons
- * in a Map to avoid fetching the same icon multiple times over the network.
+ * If `cacheStrategy` is provided, the IconProvider will cache the icons
+ * in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
- * Keep in mind that this cache is not persisted and will be lost when the
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
  * IconProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
  *
  * @tagname mdc-iconprovider
  *
@@ -32,11 +36,15 @@ declare class IconProvider extends Provider<IconProviderContext> {
          * that only a url has to be passed in from which the icons will be
          * fetched.
          *
-         * If `shouldCache` is set to true, the IconProvider will cache the icons
-         * in a Map to avoid fetching the same icon multiple times over the network.
+         * If `cacheStrategy` is provided, the IconProvider will cache the icons
+         * in the selected cache (either web-api-cache or in-memory-cache),
+         * to avoid fetching the same icon multiple times over the network.
          * This is useful when the same icon is used multiple times in the application.
-         * Keep in mind that this cache is not persisted and will be lost when the
+         * To consider:
+         * - The `in-memory-cache` is not persisted and will be lost when the
          * IconProvider is removed from the DOM.
+         * - The `web-api-cache` is persisted, but only works in https environments
+         * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
          *
          * @tagname mdc-iconprovider
          *
@@ -65,12 +73,29 @@ declare class IconProvider extends Provider<IconProviderContext> {
      */
     size?: number;
     /**
-     * If the IconProvider should cache the icons
-     * in a Map to avoid fetching the same icon multiple times
+     * Icons Cache Strategy to use
      *
-     * @default false
+     * Choose `in-memory-cache` to cache icons in a JS cache (in-memory cache).
+     * Choose `web-cache-api` to cache icons using the Web Cache API.
+     *
+     * NOTE: `cache-name` must be provided if `cache-strategy` is provided.
+     *
+     * If not provided or invalid value provided, the icons will not be cached.
+     * @default undefined
+     */
+    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
+    /**
+     * Icons Cache Name to use
+     *
+     * If provided, Icons inside the provider will be cached in the
+     * cache (determined by `cache-strategy`) with the provided name.
+     *
+     * NOTE: `cache-name` requires `cache-strategy` to be set.
+     *
+     * If not provided, the icons will not be cached.
+     * @default undefined
      */
-    shouldCache?: boolean;
+    cacheName?: string;
     private updateValuesInContext;
     protected updateContext(): void;
 }

package/dist/components/iconprovider/iconprovider.component.js

@@ -19,11 +19,15 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
- * If `shouldCache` is set to true, the IconProvider will cache the icons
- * in a Map to avoid fetching the same icon multiple times over the network.
+ * If `cacheStrategy` is provided, the IconProvider will cache the icons
+ * in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
- * Keep in mind that this cache is not persisted and will be lost when the
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
  * IconProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
  *
  * @tagname mdc-iconprovider
  *
@@ -52,13 +56,6 @@ class IconProvider extends Provider {
          * @default 1
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * If the IconProvider should cache the icons
-         * in a Map to avoid fetching the same icon multiple times
-         *
-         * @default false
-         */
-        this.shouldCache = DEFAULTS.SHOULD_CACHE;
     }
     /**
      * Context object of the IconProvider, to be consumed by child components
@@ -78,7 +75,8 @@ class IconProvider extends Provider {
         }
         this.context.value.url = this.url;
         this.context.value.size = this.size;
-        this.context.value.shouldCache = this.shouldCache;
+        this.context.value.cacheName = this.cacheName;
+        this.context.value.cacheStrategy = this.cacheStrategy;
         if (this.lengthUnit && ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
             this.context.value.lengthUnit = this.lengthUnit;
         }
@@ -93,7 +91,8 @@ class IconProvider extends Provider {
             || this.context.value.url !== this.url
             || this.context.value.lengthUnit !== this.lengthUnit
             || this.context.value.size !== this.size
-            || this.context.value.shouldCache !== this.shouldCache) {
+            || this.context.value.cacheName !== this.cacheName
+            || this.context.value.cacheStrategy !== this.cacheStrategy) {
             this.updateValuesInContext();
             this.context.updateObservers();
         }
@@ -116,7 +115,11 @@ __decorate([
     __metadata("design:type", Number)
 ], IconProvider.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'should-cache', reflect: true }),
-    __metadata("design:type", Boolean)
-], IconProvider.prototype, "shouldCache", void 0);
+    property({ type: String, attribute: 'cache-strategy' }),
+    __metadata("design:type", String)
+], IconProvider.prototype, "cacheStrategy", void 0);
+__decorate([
+    property({ type: String, attribute: 'cache-name' }),
+    __metadata("design:type", String)
+], IconProvider.prototype, "cacheName", void 0);
 export default IconProvider;

package/dist/components/iconprovider/iconprovider.context.d.ts

@@ -3,8 +3,8 @@ declare class IconProviderContext {
     url?: string;
     lengthUnit?: string;
     size?: number;
-    iconsCache: Map<string, string>;
-    shouldCache?: boolean;
+    cacheName?: string;
+    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
     static readonly context: {
         __context__: IconProviderContext;
     };

package/dist/components/iconprovider/iconprovider.context.js

@@ -1,9 +1,6 @@
 import { createContext } from '@lit/context';
 import { TAG_NAME } from './iconprovider.constants';
 class IconProviderContext {
-    constructor() {
-        this.iconsCache = new Map();
-    }
 }
 // create typed lit context as part of the IconProviderContext
 IconProviderContext.context = createContext(TAG_NAME);

package/dist/custom-elements.json

@@ -3533,7 +3533,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `shouldCache` is set to true, the IconProvider will cache the icons\nin a Map to avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nKeep in mind that this cache is not persisted and will be lost when the\nIconProvider is removed from the DOM.",
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nBundling icons will be up to the consumer of this component, such\nthat only a url has to be passed in from which the icons will be\nfetched.\n\nIf `cacheStrategy` is provided, the IconProvider will cache the icons\nin the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
           "name": "IconProvider",
           "slots": [
             {
@@ -3594,14 +3594,23 @@
             },
             {
               "kind": "field",
-              "name": "shouldCache",
+              "name": "cacheStrategy",
               "type": {
-                "text": "boolean | undefined"
+                "text": "'in-memory-cache' | 'web-cache-api' | undefined"
               },
-              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
-              "default": "false",
-              "attribute": "should-cache",
-              "reflects": true
+              "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
             },
             {
               "kind": "method",
@@ -3656,13 +3665,22 @@
               "fieldName": "size"
             },
             {
-              "name": "should-cache",
+              "name": "cache-strategy",
               "type": {
-                "text": "boolean | undefined"
+                "text": "'in-memory-cache' | 'web-cache-api' | undefined"
               },
-              "description": "If the IconProvider should cache the icons\nin a Map to avoid fetching the same icon multiple times",
-              "default": "false",
-              "fieldName": "shouldCache"
+              "description": "Icons Cache Strategy to use\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheStrategy"
+            },
+            {
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
             }
           ],
           "superclass": {
@@ -3670,7 +3688,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `shouldCache` is set to true, the IconProvider will cache the icons\n * in a Map to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * Keep in mind that this cache is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Bundling icons will be up to the consumer of this component, such\n * that only a url has to be passed in from which the icons will be\n * fetched.\n *\n * If `cacheStrategy` is provided, the IconProvider will cache the icons\n * in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
           "customElement": true
         }
       ],

package/dist/index.d.ts

@@ -18,6 +18,8 @@ import Radio from './components/radio';
 import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
 import FormfieldGroup from './components/formfieldgroup';
+import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import type { TextType } from './components/text/text.types';
 export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
 export type { TextType, };
+export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -18,4 +18,6 @@ import Radio from './components/radio';
 import VirtualizedList from './components/virtualizedlist';
 import Tab from './components/tab';
 import FormfieldGroup from './components/formfieldgroup';
+import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, };
+export { inMemoryCache, webAPIIconsCache };

package/dist/react/iconprovider/index.d.ts

@@ -7,11 +7,15 @@ import Component from '../../components/iconprovider';
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
- * If `shouldCache` is set to true, the IconProvider will cache the icons
- * in a Map to avoid fetching the same icon multiple times over the network.
+ * If `cacheStrategy` is provided, the IconProvider will cache the icons
+ * in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
- * Keep in mind that this cache is not persisted and will be lost when the
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
  * IconProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
  *
  * @tagname mdc-iconprovider
  *

package/dist/react/iconprovider/index.js

@@ -10,11 +10,15 @@ import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
- * If `shouldCache` is set to true, the IconProvider will cache the icons
- * in a Map to avoid fetching the same icon multiple times over the network.
+ * If `cacheStrategy` is provided, the IconProvider will cache the icons
+ * in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same icon multiple times over the network.
  * This is useful when the same icon is used multiple times in the application.
- * Keep in mind that this cache is not persisted and will be lost when the
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
  * IconProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
  *
  * @tagname mdc-iconprovider
  *

package/dist/utils/icon-cache/index.d.ts

@@ -0,0 +1,32 @@
+export type CacheStrategy = 'in-memory-cache' | 'web-cache-api';
+/**
+ * Cache, using In-Memory Cache (Map)
+ * @param name - name of the cache (used as an identifier)
+ * @returns Object with set, get and delete methods
+ */
+export declare const inMemoryCache: (name: string) => Promise<{
+    set(request: Request, response: Response): Promise<void>;
+    get(request: Request): Promise<string | undefined>;
+    delete(request: Request): Promise<void>;
+}>;
+/**
+ * Cache, using Web API Cache
+ * @param name - name of the cache (used as an identifier)
+ * @returns Object with set, get and delete methods
+ */
+export declare const webAPIIconsCache: (name: string) => Promise<{
+    set: (request: Request, response: Response) => Promise<void>;
+    get: (request: Request) => Promise<string | undefined>;
+    delete: (request: Request) => Promise<void>;
+}>;
+/**
+ * Function to return the cache based on the cache strategy
+ * @param cacheName - name of the cache to be used
+ * @param cacheStrategy - strategy to be used for caching
+ * @returns the cache based on the strategy
+ */
+export declare const iconsCache: (cacheName: string, cacheStrategy: CacheStrategy) => Promise<{
+    set(request: Request, response: Response): Promise<void>;
+    get(request: Request): Promise<string | undefined>;
+    delete(request: Request): Promise<void>;
+}>;

package/dist/utils/icon-cache/index.js

@@ -0,0 +1,54 @@
+const registry = {};
+/**
+ * Cache, using In-Memory Cache (Map)
+ * @param name - name of the cache (used as an identifier)
+ * @returns Object with set, get and delete methods
+ */
+export const inMemoryCache = async (name) => {
+    if (registry[name] === undefined) {
+        registry[name] = new Map();
+    }
+    return {
+        async set(request, response) {
+            registry[name].set(request.url, await response.text());
+        },
+        async get(request) {
+            return registry[name].get(request.url);
+        },
+        async delete(request) {
+            registry[name].delete(request.url);
+        },
+    };
+};
+/**
+ * Cache, using Web API Cache
+ * @param name - name of the cache (used as an identifier)
+ * @returns Object with set, get and delete methods
+ */
+export const webAPIIconsCache = async (name) => {
+    const cache = await caches.open(name);
+    return {
+        set: async (request, response) => {
+            await cache.put(request, response);
+        },
+        get: async (request) => {
+            const response = await cache.match(request);
+            return response === null || response === void 0 ? void 0 : response.text();
+        },
+        delete: async (request) => {
+            await cache.delete(request);
+        },
+    };
+};
+/**
+ * Function to return the cache based on the cache strategy
+ * @param cacheName - name of the cache to be used
+ * @param cacheStrategy - strategy to be used for caching
+ * @returns the cache based on the strategy
+ */
+export const iconsCache = async (cacheName, cacheStrategy) => {
+    if (cacheStrategy === 'in-memory-cache') {
+        return inMemoryCache(cacheName);
+    }
+    return webAPIIconsCache(cacheName);
+};

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.25.1"
+  "version": "0.25.3"
 }