@momentum-design/components 0.25.2 → 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);