@nectary/assets 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/assets",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -38,6 +38,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.11.0"
+    "@nectary/theme-base": "1.11.2"
   }
 }

package/utils/shared/cdn-loader.d.ts

@@ -6,4 +6,5 @@ interface LoadModuleOptions {
     logPrefix?: string;
 }
 export declare const loadModuleWithFallback: <TModule = Record<string, any>>(options: LoadModuleOptions) => Promise<TModule>;
+export declare const loadCSSModuleWithFallback: <TModule = Record<string, any>>(options: LoadModuleOptions) => Promise<TModule>;
 export {};

package/utils/shared/cdn-loader.js

@@ -14,6 +14,22 @@ const getImportPath = (cdnUrl, version, modulePath) => {
   }
   return `${cdnUrl}/latest/${modulePath}.js`;
 };
+const getCssImportPath = (cdnUrl, version, modulePath) => {
+  if (cdnUrl.length === 0) {
+    return null;
+  }
+  const host = new URL(cdnUrl).host;
+  if (host === "esm.sh") {
+    if (version.length !== 0) {
+      return `${cdnUrl}@${version}/es2022/${modulePath}.css`;
+    }
+    return `${cdnUrl}/${modulePath}`;
+  }
+  if (version.length !== 0) {
+    return `${cdnUrl}/${version}/${modulePath}.css`;
+  }
+  return `${cdnUrl}/latest/${modulePath}.css`;
+};
 const FALLBACK_DELAY_MS = 2e3;
 const loadModuleWithFallback = async (options) => {
   const { cdnUrl, fallbackCdnUrl, version, modulePath, logPrefix = "CDN" } = options;
@@ -54,6 +70,57 @@ const loadModuleWithFallback = async (options) => {
     throw error;
   }
 };
+const fetchCSS = async (url) => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`CSS fetch failed: ${res.status} ${url}`);
+  }
+  const css = await res.text();
+  return { default: css };
+};
+const loadCSSFromUrl = (url) => {
+  if (url.endsWith(".css")) {
+    return fetchCSS(url);
+  }
+  return import(
+    /* webpackIgnore: true */
+    url
+  );
+};
+const loadCSSModuleWithFallback = async (options) => {
+  const { cdnUrl, fallbackCdnUrl, version, modulePath, logPrefix = "CDN" } = options;
+  const importPath = getCssImportPath(cdnUrl, version, modulePath);
+  const fallbackImportPath = getCssImportPath(fallbackCdnUrl, version, modulePath);
+  const promises = [
+    loadCSSFromUrl(importPath)
+  ];
+  let timeoutId = null;
+  if (fallbackImportPath !== null) {
+    promises.push(
+      new Promise((resolve) => {
+        timeoutId = setTimeout(() => resolve(loadCSSFromUrl(fallbackImportPath)), FALLBACK_DELAY_MS);
+      })
+    );
+  }
+  try {
+    const module = await Promise.any(promises);
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    return module;
+  } catch (error) {
+    if (error instanceof AggregateError) {
+      console.error(`${logPrefix} primary load failed: ${importPath}`, error.errors[0]);
+      if (fallbackImportPath !== null) {
+        console.error(`${logPrefix} fallback load failed: ${fallbackImportPath}`, error.errors[1]);
+      }
+    } else {
+      console.error(`${logPrefix} failed to load module: ${importPath}`, error);
+    }
+    throw error;
+  }
+};
 export {
+  loadCSSModuleWithFallback,
   loadModuleWithFallback
 };

package/utils/shared/index.d.js

@@ -1,6 +1,6 @@
 import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
 import { createDeferredPromise } from "./deferred-promise.js";
-import { loadModuleWithFallback } from "./cdn-loader.js";
+import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
 import { getConstructor, getStore } from "./global-elements-store.js";
 import { GlobalElementsManager } from "./global-elements-manager.js";
 export {
@@ -10,6 +10,7 @@ export {
   getConstructor,
   getStore,
   isSinchElementName,
+  loadCSSModuleWithFallback,
   loadModuleWithFallback,
   sinchElementNameToBase
 };

package/utils/shared/index.js

@@ -1,6 +1,6 @@
 import { NectaryElementBase, isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
 import { createDeferredPromise } from "./deferred-promise.js";
-import { loadModuleWithFallback } from "./cdn-loader.js";
+import { loadCSSModuleWithFallback, loadModuleWithFallback } from "./cdn-loader.js";
 import { getConstructor, getStore } from "./global-elements-store.js";
 import { GlobalElementsManager } from "./global-elements-manager.js";
 export {
@@ -10,6 +10,7 @@ export {
   getConstructor,
   getStore,
   isSinchElementName,
+  loadCSSModuleWithFallback,
   loadModuleWithFallback,
   sinchElementNameToBase
 };