@nectary/assets 3.1.2 → 3.2.0

package/bundle.ts

@@ -1,5 +1,4 @@
 // Reminder: Keep this list updated as we add new assets
-
 // Icons Branded
 export { IconBranded5gReadiness } from './icons-branded/5g-readiness'
 export { IconBrandedAbcd } from './icons-branded/abcd'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/assets",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/utils/global-assets-constants.d.ts

@@ -1,3 +1,2 @@
 export declare const ASSETS_STORE_KEY: unique symbol;
 export declare const ASSETS_REGISTRY_URL = "https://registry.npmjs.org/@nectary/assets";
-export declare const ASSETS_CDN_URL = "https://esm.sh/@nectary/assets";

package/utils/global-assets-constants.js

@@ -1,8 +1,6 @@
 const ASSETS_STORE_KEY = Symbol.for("NectaryAssetsStore");
 const ASSETS_REGISTRY_URL = "https://registry.npmjs.org/@nectary/assets";
-const ASSETS_CDN_URL = "https://esm.sh/@nectary/assets";
 export {
-  ASSETS_CDN_URL,
   ASSETS_REGISTRY_URL,
   ASSETS_STORE_KEY
 };

package/utils/global-assets-manager.d.ts

@@ -4,49 +4,28 @@ export type SinchElementName = `sinch-${string}`;
 export interface GlobalManagerConfig {
 	storeKey: symbol;
 	registryUrl: string;
-	cdnUrl: string;
 	baseElementNames: Set<string>;
 	nameToPathMap?: Map<string, string>;
 }
 export interface GlobalManagerInitOptions {
 	/**
-	 * If components should be preloaded from the bundle module (nectary/components/bundle) (Not supported for nectary/assets).
-	 *
-	 * When preload is true:
-	 *
-	 * targetlibVersion will only work since v5 of nectary/components and v3 of nectary/assets.
-	 *
-	 * parchPreviousVersions will have no effect since its not needed.
-	 *
-	 * fallbackLoaderBundle will be used instead of fallbackLoader
-	 */
-	preload?: boolean;
-	/**
-	 * Target version of the library to resolve the constructor from the CDN.
-	 *
-	 * If left unspecified, it will resolve to the latest version.
+	 * URL to resolve the modules from
 	 */
-	targetlibVersion?: string;
+	cdnUrl: string;
 	/**
-	 * If previous versions of Nectary should opt in to using Global Components.
-	 *
-	 * @default true
+	 * Fallback URL to resolve the modules from if `cdnUrl` fails
 	 */
-	patchPerviousVersions?: boolean;
+	fallbackCdnUrl?: string;
 	/**
-	 * Fallback loader if the CDN fails.
+	 * Preloads all components from the bundle.js module
 	 */
-	fallbackLoader?: (name: string) => Promise<any>;
+	preload?: boolean;
 	/**
-	 * Should be used like this:
+	 * Target version of the library to resolve
 	 *
-	 * fallbackLoaderBundle: () => import("@nectary/components/bundle")
-	 */
-	fallbackLoaderBundle?: () => Promise<any>;
-	/**
-	 * Constructors will be resolved from fallback directly and CDN will not be used.
+	 * If left unspecified, it will resolve to the latest version
 	 */
-	useFallbackExclusively?: boolean;
+	targetlibVersion?: string;
 }
 declare abstract class GlobalElementsManager {
 	private config;
@@ -57,9 +36,10 @@ declare abstract class GlobalElementsManager {
 	private loadModuleWithFallback;
 	private createLoader;
 	private preloadBundle;
-	init(options?: GlobalManagerInitOptions): Promise<void>;
+	init(options: GlobalManagerInitOptions): Promise<void>;
 	whenLoaded(): Promise<void>;
-	private getImportPathFromName;
+	private getImportPath;
+	private getModulePath;
 	preload(name: SinchElementName | SinchElementName[] | "all"): Promise<void>;
 }
 declare class GlobalAssetsManagerImpl extends GlobalElementsManager {

package/utils/global-assets-manager.js

@@ -1,13 +1,12 @@
 import { GlobalElementsManager } from "./shared/global-elements-manager.js";
 import { NAME_TO_PATH_MAP, BASE_ASSET_NAMES } from "./asset-names.js";
-import { ASSETS_CDN_URL, ASSETS_REGISTRY_URL, ASSETS_STORE_KEY } from "./global-assets-constants.js";
+import { ASSETS_REGISTRY_URL, ASSETS_STORE_KEY } from "./global-assets-constants.js";
 class GlobalAssetsManagerImpl extends GlobalElementsManager {
   static instance = null;
   constructor() {
     super({
       storeKey: ASSETS_STORE_KEY,
       registryUrl: ASSETS_REGISTRY_URL,
-      cdnUrl: ASSETS_CDN_URL,
       baseElementNames: BASE_ASSET_NAMES,
       nameToPathMap: NAME_TO_PATH_MAP
     });

package/utils/shared/global-elements-manager.d.ts

@@ -2,49 +2,28 @@ import type { SinchElementName } from './nectary-element-base';
 interface GlobalManagerConfig {
     storeKey: symbol;
     registryUrl: string;
-    cdnUrl: string;
     baseElementNames: Set<string>;
     nameToPathMap?: Map<string, string>;
 }
 interface GlobalManagerInitOptions {
     /**
-     * If components should be preloaded from the bundle module (nectary/components/bundle) (Not supported for nectary/assets).
-     *
-     * When preload is true:
-     *
-     * targetlibVersion will only work since v5 of nectary/components and v3 of nectary/assets.
-     *
-     * parchPreviousVersions will have no effect since its not needed.
-     *
-     * fallbackLoaderBundle will be used instead of fallbackLoader
-     */
-    preload?: boolean;
-    /**
-     * Target version of the library to resolve the constructor from the CDN.
-     *
-     * If left unspecified, it will resolve to the latest version.
+     * URL to resolve the modules from
      */
-    targetlibVersion?: string;
+    cdnUrl: string;
     /**
-     * If previous versions of Nectary should opt in to using Global Components.
-     *
-     * @default true
+     * Fallback URL to resolve the modules from if `cdnUrl` fails
      */
-    patchPerviousVersions?: boolean;
+    fallbackCdnUrl?: string;
     /**
-     * Fallback loader if the CDN fails.
+     * Preloads all components from the bundle.js module
      */
-    fallbackLoader?: (name: string) => Promise<any>;
+    preload?: boolean;
     /**
-     * Should be used like this:
+     * Target version of the library to resolve
      *
-     * fallbackLoaderBundle: () => import("@nectary/components/bundle")
-     */
-    fallbackLoaderBundle?: () => Promise<any>;
-    /**
-     * Constructors will be resolved from fallback directly and CDN will not be used.
+     * If left unspecified, it will resolve to the latest version
      */
-    useFallbackExclusively?: boolean;
+    targetlibVersion?: string;
 }
 export declare abstract class GlobalElementsManager {
     private config;
@@ -55,9 +34,10 @@ export declare abstract class GlobalElementsManager {
     private loadModuleWithFallback;
     private createLoader;
     private preloadBundle;
-    init(options?: GlobalManagerInitOptions): Promise<void>;
+    init(options: GlobalManagerInitOptions): Promise<void>;
     whenLoaded(): Promise<void>;
-    private getImportPathFromName;
+    private getImportPath;
+    private getModulePath;
     preload(name: SinchElementName | SinchElementName[] | 'all'): Promise<void>;
 }
 export {};

package/utils/shared/global-elements-manager.js

@@ -39,10 +39,10 @@ class GlobalElementsManager {
   toClassName(itemName) {
     return itemName.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
   }
-  async loadModuleWithFallback(importPath, fallbackThunk, useFallbackExclusively = false) {
-    if (useFallbackExclusively && fallbackThunk != null) {
-      return fallbackThunk();
-    }
+  async loadModuleWithFallback(modulePath) {
+    const store = getStore(this.config.storeKey);
+    const importPath = this.getImportPath(store.cdnUrl, modulePath);
+    const fallbackImportPath = this.getImportPath(store.fallbackCdnUrl, modulePath);
     try {
       const module = await import(
         /* webpackIgnore: true */
@@ -50,12 +50,16 @@ class GlobalElementsManager {
       );
       return module;
     } catch (error) {
-      if (fallbackThunk != null) {
+      if (fallbackImportPath !== null) {
         try {
-          return fallbackThunk();
+          const fallbackModule = await import(
+            /* webpackIgnore: true */
+            fallbackImportPath
+          );
+          return fallbackModule;
         } catch (fallbackError) {
           console.error(`Nectary Primary load failed: ${importPath}`, error);
-          console.error(`Nectary fallback load failed:`, fallbackError);
+          console.error(`Nectary fallback load failed: ${fallbackImportPath}`, fallbackError);
           throw fallbackError;
         }
       }
@@ -63,34 +67,26 @@ class GlobalElementsManager {
       throw error;
     }
   }
-  createLoader(importPath, itemName, fallbackLoader, useFallbackExclusively = false) {
+  createLoader(modulePath, itemName) {
     return async () => {
-      const module = await this.loadModuleWithFallback(
-        importPath,
-        fallbackLoader != null ? () => fallbackLoader(itemName) : null,
-        useFallbackExclusively
-      );
+      const module = await this.loadModuleWithFallback(modulePath);
       const className = this.toClassName(itemName);
       const globalConstructor = module[className];
       if (globalConstructor == null) {
-        throw new Error(`Nectary element ${className} not found in module: ${importPath}`);
+        throw new Error(`Nectary element ${className} not found in module`);
       }
       globalConstructor.isGlobal = true;
       return globalConstructor;
     };
   }
-  async preloadBundle(importPath, fallbackLoaderBundle, useFallbackExclusively = false) {
+  async preloadBundle() {
     const store = getStore(this.config.storeKey);
-    const module = await this.loadModuleWithFallback(
-      importPath,
-      fallbackLoaderBundle,
-      useFallbackExclusively
-    );
+    const module = await this.loadModuleWithFallback("bundle");
     for (const itemName of this.config.baseElementNames) {
       const className = this.toClassName(itemName);
       const globalConstructor = module[className];
       if (globalConstructor == null) {
-        console.error(`Nectary element ${className} not found in module: ${importPath}`);
+        console.error(`Nectary element ${className} not found in module`);
         continue;
       }
       globalConstructor.isGlobal = true;
@@ -99,41 +95,35 @@ class GlobalElementsManager {
       window.customElements.define(sinchName, globalConstructor);
     }
   }
-  async init(options = {}) {
+  async init(options) {
     const store = getStore(this.config.storeKey);
     if (store.hasInitialized) {
       console.warn(`${this.constructor.name} has already been initialized`);
       return;
     }
     store.hasInitialized = true;
+    store.cdnUrl = options.cdnUrl;
+    store.fallbackCdnUrl = options.fallbackCdnUrl ?? "";
+    store.targetlibVersion = options.targetlibVersion ?? "";
     store.preload = options.preload ?? false;
-    store.patchPerviousVersions = options.patchPerviousVersions ?? true;
-    store.useFallbackExclusively = options.useFallbackExclusively ?? false;
     try {
       if (store.preload) {
-        const version = options.targetlibVersion;
-        store.targetlibVersion = version ?? store.targetlibVersion;
-        const importPath = version != null ? `${this.config.cdnUrl}@${version}/es2022/bundle.mjs` : `${this.config.cdnUrl}/bundle`;
-        await this.preloadBundle(importPath, options.fallbackLoaderBundle, store.useFallbackExclusively);
+        await this.preloadBundle();
       } else {
-        if (store.patchPerviousVersions) {
-          this.patchCustomElements();
-        }
-        this.config.baseElementNames.forEach((name) => {
-          const importPath = `${this.config.cdnUrl}/${this.getImportPathFromName(name)}`;
-          store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
-        });
-        if (options.targetlibVersion != null) {
-          store.targetlibVersion = options.targetlibVersion;
-        } else {
+        this.patchCustomElements();
+        const setDefinitions = () => {
+          this.config.baseElementNames.forEach((name) => {
+            const modulePath = this.getModulePath(name);
+            store.definitions.set(`sinch-${name}`, this.createLoader(modulePath, name));
+          });
+        };
+        setDefinitions();
+        if (store.targetlibVersion.length === 0) {
           const registry = await fetch(`${this.config.registryUrl}/latest`);
           const registryData = await registry.json();
           store.targetlibVersion = registryData.version;
         }
-        this.config.baseElementNames.forEach((name) => {
-          const importPath = `${this.config.cdnUrl}@${store.targetlibVersion}/es2022/${this.getImportPathFromName(name)}.mjs`;
-          store.definitions.set(`sinch-${name}`, this.createLoader(importPath, name, options.fallbackLoader, store.useFallbackExclusively));
-        });
+        setDefinitions();
       }
     } finally {
       store.loadPromise.resolve();
@@ -143,7 +133,24 @@ class GlobalElementsManager {
     const store = getStore(this.config.storeKey);
     return store.loadPromise.promise;
   }
-  getImportPathFromName(name) {
+  getImportPath(cdnUrl, modulePath) {
+    if (cdnUrl.length === 0) {
+      return null;
+    }
+    const store = getStore(this.config.storeKey);
+    const host = new URL(cdnUrl).host;
+    if (host === "esm.sh") {
+      if (store.targetlibVersion.length !== 0) {
+        return `${cdnUrl}@${store.targetlibVersion}/es2022/${modulePath}.mjs`;
+      }
+      return `${cdnUrl}/${modulePath}`;
+    }
+    if (store.targetlibVersion.length !== 0) {
+      return `${cdnUrl}/${store.targetlibVersion}/${modulePath}.js`;
+    }
+    return `${cdnUrl}/latest/${modulePath}.js`;
+  }
+  getModulePath(name) {
     for (const [key, value] of this.config.nameToPathMap ?? []) {
       const splittedName = name.startsWith(key) ? name.split(key) : [name];
       if (splittedName.length > 1) {

package/utils/shared/global-elements-store.d.ts

@@ -3,9 +3,9 @@ interface GlobalStore {
     definitions: Map<SinchElementName, () => Promise<any>>;
     hasInitialized: boolean;
     targetlibVersion: string;
-    patchPerviousVersions: boolean;
-    useFallbackExclusively: boolean;
     preload: boolean;
+    cdnUrl: string;
+    fallbackCdnUrl: string;
     loadPromise: {
         promise: Promise<void>;
         resolve: (value: void) => void;

package/utils/shared/global-elements-store.js

@@ -13,8 +13,8 @@ const getStore = (storeKey) => {
     definitions: /* @__PURE__ */ new Map(),
     hasInitialized: false,
     targetlibVersion: "",
-    patchPerviousVersions: false,
-    useFallbackExclusively: false,
+    cdnUrl: "",
+    fallbackCdnUrl: "",
     preload: false,
     loadPromise: createDeferredPromise()
   };