@nectary/components 5.42.4 → 5.42.5-rc.0

package/utils/shared/cdn-loader.js

@@ -1,136 +0,0 @@
-const getNonEsmShModuleFile = (modulePath) => {
-  if (modulePath === "bundle") {
-    return "bundle.js";
-  }
-  return `${modulePath}/index.js`;
-};
-const getImportPath = (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}.mjs`;
-    }
-    return `${cdnUrl}/${modulePath}`;
-  }
-  const moduleFile = getNonEsmShModuleFile(modulePath);
-  if (version.length !== 0) {
-    return `${cdnUrl}/${version}/${moduleFile}`;
-  }
-  return `${cdnUrl}/latest/${moduleFile}`;
-};
-const getCssImportPath = (cdnUrl, version, modulePath) => {
-  if (cdnUrl.length === 0) {
-    return null;
-  }
-  const host = new URL(cdnUrl).host;
-  if (host === "esm.sh") {
-    if (cdnUrl.includes("theme-base")) {
-      modulePath = `dist/${modulePath}`;
-    }
-    if (version.length !== 0) {
-      return `${cdnUrl}@${version}/es2022/${modulePath}.css`;
-    }
-    return `${cdnUrl}/${modulePath}`;
-  }
-  if (version.length !== 0) {
-    return `${cdnUrl}/${version}/${modulePath}.js`;
-  }
-  return `${cdnUrl}/latest/${modulePath}.js`;
-};
-const FALLBACK_DELAY_MS = 2e3;
-const loadModuleWithFallback = async (options) => {
-  const { cdnUrl, fallbackCdnUrl, version, modulePath, logPrefix = "CDN" } = options;
-  const importPath = getImportPath(cdnUrl, version, modulePath);
-  const fallbackImportPath = getImportPath(fallbackCdnUrl, version, modulePath);
-  const promises = [
-    import(
-      /* webpackIgnore: true */
-      importPath
-    )
-  ];
-  let timeoutId = null;
-  if (fallbackImportPath !== null) {
-    promises.push(
-      new Promise((resolve) => {
-        timeoutId = setTimeout(() => resolve(import(
-          /* webpackIgnore: true */
-          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;
-  }
-};
-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/deferred-promise.js

@@ -1,10 +0,0 @@
-const createDeferredPromise = () => {
-  let resolve;
-  const promise = new Promise((r) => {
-    resolve = r;
-  });
-  return { promise, resolve };
-};
-export {
-  createDeferredPromise
-};

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

@@ -1,150 +0,0 @@
-import { isSinchElementName, sinchElementNameToBase } from "./nectary-element-base.js";
-import "./deferred-promise.js";
-import { loadModuleWithFallback } from "./cdn-loader.js";
-import { getConstructor, getStore } from "./global-elements-store.js";
-class GlobalElementsManager {
-  config;
-  constructor(config) {
-    this.config = config;
-  }
-  getConstructor(name) {
-    return getConstructor(this.config.storeKey, name);
-  }
-  // This patch is made so that older Nectary versions automatically gets opted in to global components
-  patchCustomElements() {
-    const originalDefine = window.customElements.define.bind(window.customElements);
-    window.customElements.define = (name, constructor, options) => {
-      if (isSinchElementName(name) && this.config.baseElementNames.has(sinchElementNameToBase(name))) {
-        const nectaryConstructor = constructor;
-        if (nectaryConstructor.isGlobal) {
-          return originalDefine(name, constructor, options);
-        }
-        (async () => {
-          try {
-            const globalConstructor = await this.getConstructor(name);
-            if (globalConstructor !== null) {
-              originalDefine(name, globalConstructor, options);
-            } else {
-              console.error(`Nectary element ${name} not found, falling back to local constructor`);
-              originalDefine(name, constructor, options);
-            }
-          } catch (error) {
-            console.error(`Failed to get global constructor for ${name}:`, error);
-            originalDefine(name, constructor, options);
-          }
-        })();
-      } else {
-        return originalDefine(name, constructor, options);
-      }
-    };
-  }
-  toClassName(itemName) {
-    return itemName.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
-  }
-  loadModule(modulePath) {
-    const store = getStore(this.config.storeKey);
-    return loadModuleWithFallback({
-      cdnUrl: store.cdnUrl,
-      fallbackCdnUrl: store.fallbackCdnUrl,
-      version: store.targetlibVersion,
-      modulePath,
-      logPrefix: "Nectary"
-    });
-  }
-  createLoader(modulePath, itemName) {
-    return async () => {
-      const module = await this.loadModule(modulePath);
-      const className = this.toClassName(itemName);
-      const globalConstructor = module[className];
-      if (globalConstructor == null) {
-        throw new Error(`Nectary element ${className} not found in module`);
-      }
-      globalConstructor.isGlobal = true;
-      return globalConstructor;
-    };
-  }
-  async preloadBundle() {
-    const store = getStore(this.config.storeKey);
-    const module = await this.loadModule("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`);
-        continue;
-      }
-      globalConstructor.isGlobal = true;
-      const sinchName = `sinch-${itemName}`;
-      store.definitions.set(sinchName, () => Promise.resolve(globalConstructor));
-      try {
-        window.customElements.define(sinchName, globalConstructor);
-      } catch (error) {
-        console.warn(error);
-      }
-    }
-  }
-  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;
-    try {
-      if (store.preload) {
-        await this.preloadBundle();
-      } 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();
-        const host = new URL(store.cdnUrl).host;
-        if (host === "esm.sh" && store.targetlibVersion.length === 0 && store.preload === false) {
-          const registry = await fetch(`${this.config.registryUrl}/latest`);
-          const registryData = await registry.json();
-          store.targetlibVersion = registryData.version;
-          setDefinitions();
-        }
-      }
-    } finally {
-      store.loadPromise.resolve();
-    }
-  }
-  whenLoaded() {
-    const store = getStore(this.config.storeKey);
-    return store.loadPromise.promise;
-  }
-  getModulePath(name) {
-    for (const [key, value] of this.config.nameToPathMap ?? []) {
-      const splittedName = name.startsWith(key) ? name.split(key) : [name];
-      if (splittedName.length > 1) {
-        const restOfName = splittedName.slice(1).join(key);
-        return value + restOfName;
-      }
-    }
-    return name;
-  }
-  async preload(name) {
-    const store = getStore(this.config.storeKey);
-    if (name === "all") {
-      await Promise.all(Array.from(store.definitions.keys()).map((n) => store.definitions.get(n)?.()));
-      return;
-    }
-    if (Array.isArray(name)) {
-      await Promise.all(name.map((n) => store.definitions.get(n)?.()));
-      return;
-    }
-    await store.definitions.get(name)?.();
-  }
-}
-export {
-  GlobalElementsManager
-};

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

@@ -1,33 +0,0 @@
-import { createDeferredPromise } from "./deferred-promise.js";
-const getStore = (storeKey) => {
-  if (window[storeKey] != null) {
-    return window[storeKey];
-  }
-  const store = {
-    definitions: /* @__PURE__ */ new Map(),
-    hasInitialized: false,
-    targetlibVersion: "",
-    cdnUrl: "",
-    fallbackCdnUrl: "",
-    preload: false,
-    loadPromise: createDeferredPromise()
-  };
-  Object.defineProperty(window, storeKey, {
-    value: store,
-    enumerable: false,
-    writable: false,
-    configurable: false
-  });
-  return store;
-};
-const getConstructor = (storeKey, name) => {
-  const definitionLoader = getStore(storeKey).definitions.get(name);
-  if (definitionLoader == null) {
-    return null;
-  }
-  return definitionLoader();
-};
-export {
-  getConstructor,
-  getStore
-};

package/utils/shared/index.d.js

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

package/utils/shared/index.js

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

package/utils/shared/nectary-element-base.js

@@ -1,25 +0,0 @@
-const isSinchElementName = (value) => {
-  return value.startsWith("sinch-");
-};
-const sinchElementNameToBase = (value) => {
-  return value.split("sinch-")[1];
-};
-class NectaryElementBase extends HTMLElement {
-  static _isGlobal = false;
-  static get elementName() {
-    throw new Error(
-      `Class ${this.name} must implement static getter 'elementName'`
-    );
-  }
-  static get isGlobal() {
-    return this._isGlobal;
-  }
-  static set isGlobal(value) {
-    this._isGlobal = value;
-  }
-}
-export {
-  NectaryElementBase,
-  isSinchElementName,
-  sinchElementNameToBase
-};