@descope/sdk-mixins 0.12.0 → 0.13.1

package/dist/esm/mixins/descopeUiMixin/descopeUiMixin.js

@@ -1,19 +1,18 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { createSingletonMixin, compose } from '@descope/sdk-helpers';
 import { configMixin } from '../configMixin/configMixin.js';
+import { injectNpmLibMixin } from '../injectNpmLibMixin/injectNpmLibMixin.js';
 import { loggerMixin } from '../loggerMixin/loggerMixin.js';
-import { DESCOPE_UI_SCRIPT_ID, UI_COMPONENTS_URL, DESCOPE_UI_FALLBACK_2_SCRIPT_ID, UI_COMPONENTS_FALLBACK_2_URL, DESCOPE_UI_FALLBACK_SCRIPT_ID, UI_COMPONENTS_FALLBACK_URL } from './constants.js';
-import { getDescopeUiComponentsList, setupScript, generateScriptUrl } from './helpers.js';
+import { getDescopeUiComponentsList } from './helpers.js';
+import { WEB_COMPONENTS_UI_LIB_NAME, JS_FILE_PATH, LOCAL_STORAGE_OVERRIDE } from './constants.js';
 
 const descopeUiMixin = createSingletonMixin((superclass) => {
-    var _DescopeUiMixinClass_instances, _DescopeUiMixinClass_errorCbsSym, _DescopeUiMixinClass_loadCbsSym, _DescopeUiMixinClass_getComponentsVersion, _DescopeUiMixinClass_exposeAlternateEvents, _DescopeUiMixinClass_handleFallbackScript, _DescopeUiMixinClass_registerEvents, _DescopeUiMixinClass_getDescopeUiLoadingScript, _DescopeUiMixinClass_descopeUi, _DescopeUiMixinClass_loadDescopeUiComponent, _DescopeUiMixinClass_getDescopeUi, _a;
-    const BaseClass = compose(loggerMixin, configMixin)(superclass);
+    var _DescopeUiMixinClass_instances, _DescopeUiMixinClass_getComponentsVersion, _DescopeUiMixinClass_descopeUi, _DescopeUiMixinClass_loadDescopeUiComponent, _DescopeUiMixinClass_getDescopeUi, _a;
+    const BaseClass = compose(loggerMixin, configMixin, injectNpmLibMixin)(superclass);
     return _a = class DescopeUiMixinClass extends BaseClass {
             constructor() {
                 super(...arguments);
                 _DescopeUiMixinClass_instances.add(this);
-                _DescopeUiMixinClass_errorCbsSym.set(this, Symbol('errorCbs'));
-                _DescopeUiMixinClass_loadCbsSym.set(this, Symbol('loadCbs'));
                 _DescopeUiMixinClass_descopeUi.set(this, void 0);
             }
             get descopeUi() {
@@ -28,12 +27,7 @@ const descopeUiMixin = createSingletonMixin((superclass) => {
                     : getDescopeUiComponentsList(templateOrComponentNames);
                 return Promise.all(descopeUiComponentsList.map((componentName) => __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_loadDescopeUiComponent).call(this, componentName)));
             }
-            get baseCdnUrl() {
-                return this.getAttribute('base-cdn-url');
-            }
         },
-        _DescopeUiMixinClass_errorCbsSym = new WeakMap(),
-        _DescopeUiMixinClass_loadCbsSym = new WeakMap(),
         _DescopeUiMixinClass_descopeUi = new WeakMap(),
         _DescopeUiMixinClass_instances = new WeakSet(),
         _DescopeUiMixinClass_getComponentsVersion = 
@@ -50,64 +44,6 @@ const descopeUiMixin = createSingletonMixin((superclass) => {
             }
             return componentsVersion;
         },
-        _DescopeUiMixinClass_exposeAlternateEvents = function _DescopeUiMixinClass_exposeAlternateEvents(scriptEle) {
-            const errorCbsSym = __classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f");
-            const loadCbsSym = __classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f");
-            // eslint-disable-next-line no-param-reassign
-            scriptEle[errorCbsSym] = [];
-            // eslint-disable-next-line no-param-reassign
-            scriptEle[loadCbsSym] = [];
-            Object.defineProperty(scriptEle, 'onerror', {
-                set(cb) {
-                    scriptEle[errorCbsSym].push(cb);
-                },
-            });
-            Object.defineProperty(scriptEle, 'onload', {
-                set(cb) {
-                    scriptEle[loadCbsSym].push(cb);
-                },
-            });
-        },
-        _DescopeUiMixinClass_handleFallbackScript = async function _DescopeUiMixinClass_handleFallbackScript(errorCbs, loadCbs, elemId, scriptUrl) {
-            this.logger.debug('Trying to load DescopeUI from a fallback URL');
-            const fallbackScriptEle = setupScript(elemId);
-            document.body.append(fallbackScriptEle);
-            fallbackScriptEle.addEventListener('error', () => {
-                errorCbs.forEach((cb) => cb(`Cannot load DescopeUI from fallback URL, Make sure this URL is valid and return the correct script: "${fallbackScriptEle.src}"`));
-            });
-            fallbackScriptEle.addEventListener('load', () => {
-                loadCbs.forEach((cb) => cb());
-            });
-            fallbackScriptEle.src = generateScriptUrl(scriptUrl, await __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getComponentsVersion).call(this));
-        },
-        _DescopeUiMixinClass_registerEvents = function _DescopeUiMixinClass_registerEvents(scriptEle) {
-            scriptEle.addEventListener('error', () => {
-                scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f")].forEach((cb) => cb(`Cannot load DescopeUI from main URL, Make sure this URL is valid and return the correct script: "${scriptEle.src}"`));
-                // in case we could not load DescopeUI from the main URL, we are trying to load it from a fallback URL
-                __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_handleFallbackScript).call(this, [
-                    // we are adding a second fallback
-                    __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_handleFallbackScript).bind(this, scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f")], scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f")], DESCOPE_UI_FALLBACK_2_SCRIPT_ID, UI_COMPONENTS_FALLBACK_2_URL),
-                    ...scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_errorCbsSym, "f")],
-                ], scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f")], DESCOPE_UI_FALLBACK_SCRIPT_ID, UI_COMPONENTS_FALLBACK_URL);
-            });
-            scriptEle.addEventListener('load', () => {
-                scriptEle[__classPrivateFieldGet(this, _DescopeUiMixinClass_loadCbsSym, "f")].forEach((cb) => cb());
-            });
-        },
-        _DescopeUiMixinClass_getDescopeUiLoadingScript = async function _DescopeUiMixinClass_getDescopeUiLoadingScript() {
-            if (!document.querySelector(`script#${DESCOPE_UI_SCRIPT_ID}`)) {
-                this.logger.debug('DescopeUI loading script does not exist, creating it', this);
-                const scriptEle = setupScript(DESCOPE_UI_SCRIPT_ID);
-                document.body.append(scriptEle);
-                __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_exposeAlternateEvents).call(this, scriptEle);
-                __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_registerEvents).call(this, scriptEle);
-                scriptEle.src = generateScriptUrl(this.baseCdnUrl || UI_COMPONENTS_URL, await __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getComponentsVersion).call(this));
-            }
-            else {
-                this.logger.debug('DescopeUI loading script already exists', this);
-            }
-            return document.getElementById(DESCOPE_UI_SCRIPT_ID);
-        },
         _DescopeUiMixinClass_loadDescopeUiComponent = async function _DescopeUiMixinClass_loadDescopeUiComponent(componentName) {
             const isComponentAlreadyDefined = !!customElements.get(componentName);
             if (isComponentAlreadyDefined) {
@@ -137,27 +73,19 @@ const descopeUiMixin = createSingletonMixin((superclass) => {
             }
             return undefined;
         },
-        _DescopeUiMixinClass_getDescopeUi = function _DescopeUiMixinClass_getDescopeUi() {
-            return new Promise((res) => {
-                if (globalThis.DescopeUI) {
-                    res(globalThis.DescopeUI);
-                }
-                __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getDescopeUiLoadingScript).call(this).then((scriptEle) => {
-                    // eslint-disable-next-line no-param-reassign
-                    scriptEle.onerror = this.logger.error;
-                    // eslint-disable-next-line no-param-reassign
-                    scriptEle.onload = () => {
-                        this.logger.debug('DescopeUI was loaded');
-                        res(globalThis.DescopeUI);
-                    };
-                    // in case the load event was dispatched before we registered, we have a fallback
-                    setTimeout(() => {
-                        if (globalThis.DescopeUI) {
-                            res(globalThis.DescopeUI);
-                        }
-                    });
-                });
-            });
+        _DescopeUiMixinClass_getDescopeUi = async function _DescopeUiMixinClass_getDescopeUi() {
+            if (globalThis.DescopeUI) {
+                return globalThis.DescopeUI;
+            }
+            try {
+                await this.injectNpmLib(WEB_COMPONENTS_UI_LIB_NAME, await __classPrivateFieldGet(this, _DescopeUiMixinClass_instances, "m", _DescopeUiMixinClass_getComponentsVersion).call(this), JS_FILE_PATH, [LOCAL_STORAGE_OVERRIDE]);
+                this.logger.debug('DescopeUI was loaded');
+                return globalThis.DescopeUI;
+            }
+            catch (error) {
+                this.logger.error(error);
+                throw new Error('DescopeUI was not loaded');
+            }
         },
         _a;
 });

package/dist/esm/mixins/descopeUiMixin/descopeUiMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"descopeUiMixin.js","sources":["../../../../src/mixins/descopeUiMixin/descopeUiMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { configMixin } from '../configMixin';\nimport { loggerMixin } from '../loggerMixin';\nimport {\n  DESCOPE_UI_FALLBACK_2_SCRIPT_ID,\n  DESCOPE_UI_FALLBACK_SCRIPT_ID,\n  DESCOPE_UI_SCRIPT_ID,\n  UI_COMPONENTS_FALLBACK_2_URL,\n  UI_COMPONENTS_FALLBACK_URL,\n  UI_COMPONENTS_URL,\n} from './constants';\nimport {\n  generateScriptUrl,\n  getDescopeUiComponentsList,\n  setupScript,\n} from './helpers';\n\ntype ErrorCb = (error: string) => void;\ntype LoadCb = () => void;\n\nexport const descopeUiMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(loggerMixin, configMixin)(superclass);\n\n    return class DescopeUiMixinClass extends BaseClass {\n      #errorCbsSym = Symbol('errorCbs');\n\n      #loadCbsSym = Symbol('loadCbs');\n\n      // eslint-disable-next-line class-methods-use-this\n      async #getComponentsVersion() {\n        const config = await this.config;\n        const componentsVersion = config?.projectConfig?.componentsVersion;\n\n        if (!componentsVersion) {\n          this.logger.error('Could not get components version');\n        } else {\n          this.logger.debug(`Got component version \"${componentsVersion}\"`);\n        }\n\n        return componentsVersion;\n      }\n\n      // in order to allow only single load of DescopeUI across different instances,\n      // and also allow fallback in case the components cannot be loaded from descope domain\n      // we are managing an alternative way to register to the script events\n      #exposeAlternateEvents(scriptEle: HTMLScriptElement) {\n        const errorCbsSym = this.#errorCbsSym;\n        const loadCbsSym = this.#loadCbsSym;\n\n        // eslint-disable-next-line no-param-reassign\n        scriptEle[errorCbsSym] = [];\n        // eslint-disable-next-line no-param-reassign\n        scriptEle[loadCbsSym] = [];\n\n        Object.defineProperty(scriptEle, 'onerror', {\n          set(cb: ErrorCb) {\n            scriptEle[errorCbsSym].push(cb);\n          },\n        });\n\n        Object.defineProperty(scriptEle, 'onload', {\n          set(cb: LoadCb) {\n            scriptEle[loadCbsSym].push(cb);\n          },\n        });\n      }\n\n      async #handleFallbackScript(\n        errorCbs: ErrorCb[],\n        loadCbs: LoadCb[],\n        elemId: string,\n        scriptUrl: string,\n      ) {\n        this.logger.debug('Trying to load DescopeUI from a fallback URL');\n        const fallbackScriptEle = setupScript(elemId);\n        document.body.append(fallbackScriptEle);\n\n        fallbackScriptEle.addEventListener('error', () => {\n          errorCbs.forEach((cb: ErrorCb) =>\n            cb(\n              `Cannot load DescopeUI from fallback URL, Make sure this URL is valid and return the correct script: \"${fallbackScriptEle.src}\"`,\n            ),\n          );\n        });\n\n        fallbackScriptEle.addEventListener('load', () => {\n          loadCbs.forEach((cb: LoadCb) => cb());\n        });\n\n        fallbackScriptEle.src = generateScriptUrl(\n          scriptUrl,\n          await this.#getComponentsVersion(),\n        );\n      }\n\n      #registerEvents(scriptEle: HTMLScriptElement) {\n        scriptEle.addEventListener('error', () => {\n          scriptEle[this.#errorCbsSym].forEach((cb: ErrorCb) =>\n            cb(\n              `Cannot load DescopeUI from main URL, Make sure this URL is valid and return the correct script: \"${scriptEle.src}\"`,\n            ),\n          );\n\n          // in case we could not load DescopeUI from the main URL, we are trying to load it from a fallback URL\n          this.#handleFallbackScript(\n            [\n              // we are adding a second fallback\n              this.#handleFallbackScript.bind(\n                this,\n                scriptEle[this.#errorCbsSym],\n                scriptEle[this.#loadCbsSym],\n                DESCOPE_UI_FALLBACK_2_SCRIPT_ID,\n                UI_COMPONENTS_FALLBACK_2_URL,\n              ),\n              ...scriptEle[this.#errorCbsSym],\n            ],\n            scriptEle[this.#loadCbsSym],\n            DESCOPE_UI_FALLBACK_SCRIPT_ID,\n            UI_COMPONENTS_FALLBACK_URL,\n          );\n        });\n\n        scriptEle.addEventListener('load', () => {\n          scriptEle[this.#loadCbsSym].forEach((cb: LoadCb) => cb());\n        });\n      }\n\n      async #getDescopeUiLoadingScript() {\n        if (!document.querySelector(`script#${DESCOPE_UI_SCRIPT_ID}`)) {\n          this.logger.debug(\n            'DescopeUI loading script does not exist, creating it',\n            this,\n          );\n\n          const scriptEle = setupScript(DESCOPE_UI_SCRIPT_ID);\n\n          document.body.append(scriptEle);\n\n          this.#exposeAlternateEvents(scriptEle);\n          this.#registerEvents(scriptEle);\n\n          scriptEle.src = generateScriptUrl(\n            this.baseCdnUrl || UI_COMPONENTS_URL,\n            await this.#getComponentsVersion(),\n          );\n        } else {\n          this.logger.debug('DescopeUI loading script already exists', this);\n        }\n\n        return document.getElementById(DESCOPE_UI_SCRIPT_ID);\n      }\n\n      #descopeUi: Promise<any>;\n\n      get descopeUi() {\n        if (!this.#descopeUi) {\n          this.#descopeUi = this.#getDescopeUi();\n        }\n\n        return this.#descopeUi;\n      }\n\n      async #loadDescopeUiComponent(componentName: string) {\n        const isComponentAlreadyDefined = !!customElements.get(componentName);\n\n        if (isComponentAlreadyDefined) {\n          this.logger.debug(\n            `Loading component \"${componentName}\" is skipped as it is already defined`,\n          );\n          return undefined;\n        }\n\n        const descopeUI = await this.descopeUi;\n\n        if (!descopeUI[componentName]) {\n          this.logger.error(\n            `Cannot load UI component \"${componentName}\"`,\n            `Descope UI does not have a component named \"${componentName}\", available components are: \"${Object.keys(\n              descopeUI,\n            ).join(', ')}\"`,\n          );\n          return undefined;\n        }\n\n        try {\n          // eslint-disable-next-line @typescript-eslint/return-await\n          return await descopeUI[componentName]();\n        } catch (e) {\n          // this error is thrown when trying to register a component which is already registered\n          // when running 2 flows on the same page, it might happen that the register fn is called twice\n          // in case it happens, we are silently ignore the error\n          if (e.name === 'NotSupportedError') {\n            // eslint-disable-next-line no-console\n            console.debug(\n              `Encountered an error while attempting to define the \"${componentName}\" component, it is likely that this component is already defined`,\n            );\n          } else {\n            throw e;\n          }\n        }\n\n        return undefined;\n      }\n\n      async loadDescopeUiComponents(\n        templateOrComponentNames: HTMLTemplateElement | string[],\n      ) {\n        const descopeUiComponentsList = Array.isArray(templateOrComponentNames)\n          ? templateOrComponentNames\n          : getDescopeUiComponentsList(templateOrComponentNames);\n\n        return Promise.all(\n          descopeUiComponentsList.map((componentName: string) =>\n            this.#loadDescopeUiComponent(componentName),\n          ),\n        );\n      }\n\n      #getDescopeUi() {\n        return new Promise((res) => {\n          if (globalThis.DescopeUI) {\n            res(globalThis.DescopeUI);\n          }\n\n          this.#getDescopeUiLoadingScript().then((scriptEle) => {\n            // eslint-disable-next-line no-param-reassign\n            scriptEle!.onerror = this.logger.error;\n            // eslint-disable-next-line no-param-reassign\n            scriptEle!.onload = () => {\n              this.logger.debug('DescopeUI was loaded');\n              res(globalThis.DescopeUI);\n            };\n\n            // in case the load event was dispatched before we registered, we have a fallback\n            setTimeout(() => {\n              if (globalThis.DescopeUI) {\n                res(globalThis.DescopeUI);\n              }\n            });\n          });\n        });\n      }\n\n      get baseCdnUrl() {\n        return this.getAttribute('base-cdn-url');\n      }\n    };\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"descopeUiMixin.js","sources":["../../../../src/mixins/descopeUiMixin/descopeUiMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { configMixin } from '../configMixin';\nimport { injectNpmLibMixin } from '../injectNpmLibMixin';\nimport { loggerMixin } from '../loggerMixin';\nimport { getDescopeUiComponentsList } from './helpers';\nimport {\n  JS_FILE_PATH,\n  LOCAL_STORAGE_OVERRIDE,\n  WEB_COMPONENTS_UI_LIB_NAME,\n} from './constants';\n\nexport const descopeUiMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(\n      loggerMixin,\n      configMixin,\n      injectNpmLibMixin,\n    )(superclass);\n\n    return class DescopeUiMixinClass extends BaseClass {\n      // eslint-disable-next-line class-methods-use-this\n      async #getComponentsVersion() {\n        const config = await this.config;\n        const componentsVersion = config?.projectConfig?.componentsVersion;\n\n        if (!componentsVersion) {\n          this.logger.error('Could not get components version');\n        } else {\n          this.logger.debug(`Got component version \"${componentsVersion}\"`);\n        }\n\n        return componentsVersion;\n      }\n\n      #descopeUi: Promise<any>;\n\n      get descopeUi() {\n        if (!this.#descopeUi) {\n          this.#descopeUi = this.#getDescopeUi();\n        }\n\n        return this.#descopeUi;\n      }\n\n      async #loadDescopeUiComponent(componentName: string) {\n        const isComponentAlreadyDefined = !!customElements.get(componentName);\n\n        if (isComponentAlreadyDefined) {\n          this.logger.debug(\n            `Loading component \"${componentName}\" is skipped as it is already defined`,\n          );\n          return undefined;\n        }\n\n        const descopeUI = await this.descopeUi;\n\n        if (!descopeUI[componentName]) {\n          this.logger.error(\n            `Cannot load UI component \"${componentName}\"`,\n            `Descope UI does not have a component named \"${componentName}\", available components are: \"${Object.keys(\n              descopeUI,\n            ).join(', ')}\"`,\n          );\n          return undefined;\n        }\n\n        try {\n          // eslint-disable-next-line @typescript-eslint/return-await\n          return await descopeUI[componentName]();\n        } catch (e) {\n          // this error is thrown when trying to register a component which is already registered\n          // when running 2 flows on the same page, it might happen that the register fn is called twice\n          // in case it happens, we are silently ignore the error\n          if (e.name === 'NotSupportedError') {\n            // eslint-disable-next-line no-console\n            console.debug(\n              `Encountered an error while attempting to define the \"${componentName}\" component, it is likely that this component is already defined`,\n            );\n          } else {\n            throw e;\n          }\n        }\n\n        return undefined;\n      }\n\n      async #getDescopeUi() {\n        if (globalThis.DescopeUI) {\n          return globalThis.DescopeUI;\n        }\n\n        try {\n          await this.injectNpmLib(\n            WEB_COMPONENTS_UI_LIB_NAME,\n            await this.#getComponentsVersion(),\n            JS_FILE_PATH,\n            [LOCAL_STORAGE_OVERRIDE],\n          );\n          this.logger.debug('DescopeUI was loaded');\n          return globalThis.DescopeUI;\n        } catch (error) {\n          this.logger.error(error);\n          throw new Error('DescopeUI was not loaded');\n        }\n      }\n\n      async loadDescopeUiComponents(\n        templateOrComponentNames: HTMLTemplateElement | string[],\n      ) {\n        const descopeUiComponentsList = Array.isArray(templateOrComponentNames)\n          ? templateOrComponentNames\n          : getDescopeUiComponentsList(templateOrComponentNames);\n\n        return Promise.all(\n          descopeUiComponentsList.map((componentName: string) =>\n            this.#loadDescopeUiComponent(componentName),\n          ),\n        );\n      }\n    };\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/mixins/descopeUiMixin/helpers.js

@@ -1,14 +1,6 @@
-import { UI_COMPONENTS_URL_VERSION_PLACEHOLDER } from './constants.js';
-
-const setupScript = (id) => {
-    const scriptEle = document.createElement('script');
-    scriptEle.id = id;
-    return scriptEle;
-};
-const generateScriptUrl = (urlTemplate, componentsVersion) => urlTemplate.replace(UI_COMPONENTS_URL_VERSION_PLACEHOLDER, componentsVersion);
 const getDescopeUiComponentsList = (template) => [
     ...Array.from(template.content.querySelectorAll('*')).reduce((acc, el) => el.localName.startsWith('descope-') ? acc.add(el.localName) : acc, new Set()),
 ];
 
-export { generateScriptUrl, getDescopeUiComponentsList, setupScript };
+export { getDescopeUiComponentsList };
 //# sourceMappingURL=helpers.js.map

package/dist/esm/mixins/descopeUiMixin/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../../src/mixins/descopeUiMixin/helpers.ts"],"sourcesContent":["import { UI_COMPONENTS_URL_VERSION_PLACEHOLDER } from './constants';\n\nexport const setupScript = (id: string) => {\n  const scriptEle = document.createElement('script');\n  scriptEle.id = id;\n\n  return scriptEle;\n};\n\nexport const generateScriptUrl = (\n  urlTemplate: string,\n  componentsVersion: string,\n) =>\n  urlTemplate.replace(UI_COMPONENTS_URL_VERSION_PLACEHOLDER, componentsVersion);\n\nexport const getDescopeUiComponentsList = (template: HTMLTemplateElement) => [\n  ...Array.from(template.content.querySelectorAll('*')).reduce<Set<string>>(\n    (acc, el: Element) =>\n      el.localName.startsWith('descope-') ? acc.add(el.localName) : acc,\n    new Set(),\n  ),\n];\n"],"names":[],"mappings":";;AAEa,MAAA,WAAW,GAAG,CAAC,EAAU,KAAI;IACxC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACnD,IAAA,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;AAElB,IAAA,OAAO,SAAS,CAAC;AACnB,EAAE;AAEW,MAAA,iBAAiB,GAAG,CAC/B,WAAmB,EACnB,iBAAyB,KAEzB,WAAW,CAAC,OAAO,CAAC,qCAAqC,EAAE,iBAAiB,EAAE;MAEnE,0BAA0B,GAAG,CAAC,QAA6B,KAAK;IAC3E,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAC1D,CAAC,GAAG,EAAE,EAAW,KACf,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,GAAG,EACnE,IAAI,GAAG,EAAE,CACV;;;;;"}
+{"version":3,"file":"helpers.js","sources":["../../../../src/mixins/descopeUiMixin/helpers.ts"],"sourcesContent":["export const setupScript = (id: string) => {\n  const scriptEle = document.createElement('script');\n  scriptEle.id = id;\n\n  return scriptEle;\n};\n\nexport const getDescopeUiComponentsList = (template: HTMLTemplateElement) => [\n  ...Array.from(template.content.querySelectorAll('*')).reduce<Set<string>>(\n    (acc, el: Element) =>\n      el.localName.startsWith('descope-') ? acc.add(el.localName) : acc,\n    new Set(),\n  ),\n];\n"],"names":[],"mappings":"MAOa,0BAA0B,GAAG,CAAC,QAA6B,KAAK;IAC3E,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAC1D,CAAC,GAAG,EAAE,EAAW,KACf,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,GAAG,EACnE,IAAI,GAAG,EAAE,CACV;;;;;"}

package/dist/esm/mixins/initElementMixin.js

@@ -1,19 +1,21 @@
 import { createSingletonMixin } from '@descope/sdk-helpers';
+import { injectStyleMixin } from './injectStyleMixin.js';
+import { compose } from 'redux';
 
 const CONTENT_ROOT_ID = 'content-root';
 const ROOT_ID = 'root';
-const initElementMixin = createSingletonMixin((superclass) => class InitElementMixinClass extends superclass {
-    constructor(...rest) {
-        var _a, _b, _c;
-        var _d;
-        super(...rest);
-        this.attachShadow({ mode: 'open' }).innerHTML = `
+const initElementMixin = createSingletonMixin((superclass) => {
+    const BaseClass = compose(injectStyleMixin)(superclass);
+    return class InitElementMixinClass extends BaseClass {
+        constructor(...rest) {
+            var _a, _b;
+            super(...rest);
+            this.attachShadow({ mode: 'open' }).innerHTML = `
           <div id="${ROOT_ID}">
             <div id="${CONTENT_ROOT_ID}"></div>
           </div>
           `;
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(`
+            this.injectStyle(`
             #${ROOT_ID}, #${CONTENT_ROOT_ID} {
               height: 100%;
             }
@@ -22,15 +24,11 @@ const initElementMixin = createSingletonMixin((superclass) => class InitElementM
               height: fit-content;
             }
           `);
-        (_a = (_d = this.shadowRoot).adoptedStyleSheets) !== null && _a !== void 0 ? _a : (_d.adoptedStyleSheets = []);
-        this.shadowRoot.adoptedStyleSheets = [
-            ...this.shadowRoot.adoptedStyleSheets,
-            sheet,
-        ];
-        this.contentRootElement =
-            (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(CONTENT_ROOT_ID);
-        this.rootElement = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById(ROOT_ID);
-    }
+            this.contentRootElement =
+                (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(CONTENT_ROOT_ID);
+            this.rootElement = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(ROOT_ID);
+        }
+    };
 });
 
 export { initElementMixin };

package/dist/esm/mixins/initElementMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"initElementMixin.js","sources":["../../../src/mixins/initElementMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\n\nconst CONTENT_ROOT_ID = 'content-root';\nconst ROOT_ID = 'root';\n\nexport const initElementMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) =>\n    class InitElementMixinClass extends superclass {\n      // the content of contentRootElement is being replaced dynamically\n      // do not place content which is not dynamic inside\n      contentRootElement: HTMLElement;\n\n      rootElement: HTMLElement;\n\n      constructor(...rest) {\n        super(...rest);\n\n        this.attachShadow({ mode: 'open' }).innerHTML = `\n          <div id=\"${ROOT_ID}\">\n            <div id=\"${CONTENT_ROOT_ID}\"></div>\n          </div>\n          `;\n\n        const sheet = new CSSStyleSheet();\n        sheet.replaceSync(`\n            #${ROOT_ID}, #${CONTENT_ROOT_ID} {\n              height: 100%;\n            }\n            #${ROOT_ID} {\n              position: relative;\n              height: fit-content;\n            }\n          `);\n\n        this.shadowRoot.adoptedStyleSheets ??= [];\n        this.shadowRoot.adoptedStyleSheets = [\n          ...this.shadowRoot.adoptedStyleSheets,\n          sheet,\n        ];\n\n        this.contentRootElement =\n          this.shadowRoot?.getElementById(CONTENT_ROOT_ID)!;\n        this.rootElement = this.shadowRoot?.getElementById(ROOT_ID)!;\n      }\n    },\n);\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe,GAAG,cAAc,CAAC;AACvC,MAAM,OAAO,GAAG,MAAM,CAAC;AAEhB,MAAM,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAChD,MAAM,qBAAsB,SAAQ,UAAU,CAAA;AAO5C,IAAA,WAAA,CAAY,GAAG,IAAI,EAAA;;;AACjB,QAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAEf,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG,CAAA;qBACnC,OAAO,CAAA;uBACL,eAAe,CAAA;;WAE3B,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,CAAA;AACX,aAAA,EAAA,OAAO,MAAM,eAAe,CAAA;;;eAG5B,OAAO,CAAA;;;;AAIX,UAAA,CAAA,CAAC,CAAC;QAEL,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,EAAC,kBAAkB,MAAlB,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAAA,EAAA,CAAA,kBAAkB,GAAK,EAAE,CAAC,CAAA;AAC1C,QAAA,IAAI,CAAC,UAAU,CAAC,kBAAkB,GAAG;AACnC,YAAA,GAAG,IAAI,CAAC,UAAU,CAAC,kBAAkB;YACrC,KAAK;SACN,CAAC;AAEF,QAAA,IAAI,CAAC,kBAAkB;YACrB,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,eAAe,CAAE,CAAC;AACpD,QAAA,IAAI,CAAC,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,OAAO,CAAE,CAAC;KAC9D;AACF,CAAA;;;;"}
+{"version":3,"file":"initElementMixin.js","sources":["../../../src/mixins/initElementMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\nimport { injectStyleMixin } from './injectStyleMixin';\nimport { compose } from 'redux';\n\nconst CONTENT_ROOT_ID = 'content-root';\nconst ROOT_ID = 'root';\n\nexport const initElementMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(injectStyleMixin)(superclass);\n    return class InitElementMixinClass extends BaseClass {\n      // the content of contentRootElement is being replaced dynamically\n      // do not place content which is not dynamic inside\n      contentRootElement: HTMLElement;\n\n      rootElement: HTMLElement;\n\n      constructor(...rest) {\n        super(...rest);\n\n        this.attachShadow({ mode: 'open' }).innerHTML = `\n          <div id=\"${ROOT_ID}\">\n            <div id=\"${CONTENT_ROOT_ID}\"></div>\n          </div>\n          `;\n\n        this.injectStyle(`\n            #${ROOT_ID}, #${CONTENT_ROOT_ID} {\n              height: 100%;\n            }\n            #${ROOT_ID} {\n              position: relative;\n              height: fit-content;\n            }\n          `);\n\n        this.contentRootElement =\n          this.shadowRoot?.getElementById(CONTENT_ROOT_ID)!;\n        this.rootElement = this.shadowRoot?.getElementById(ROOT_ID)!;\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;;AAIA,MAAM,eAAe,GAAG,cAAc,CAAC;AACvC,MAAM,OAAO,GAAG,MAAM,CAAC;MAEV,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;IACxD,OAAO,MAAM,qBAAsB,SAAQ,SAAS,CAAA;AAOlD,QAAA,WAAA,CAAY,GAAG,IAAI,EAAA;;AACjB,YAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAEf,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG,CAAA;qBACnC,OAAO,CAAA;uBACL,eAAe,CAAA;;WAE3B,CAAC;YAEJ,IAAI,CAAC,WAAW,CAAC,CAAA;AACV,aAAA,EAAA,OAAO,MAAM,eAAe,CAAA;;;eAG5B,OAAO,CAAA;;;;AAIX,UAAA,CAAA,CAAC,CAAC;AAEL,YAAA,IAAI,CAAC,kBAAkB;gBACrB,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,eAAe,CAAE,CAAC;AACpD,YAAA,IAAI,CAAC,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC,OAAO,CAAE,CAAC;SAC9D;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/injectNpmLibMixin/constants.js

@@ -0,0 +1,8 @@
+const BASE_URLS = [
+    'https://descopecdn.com',
+    'https://static.descope.com',
+    'https://cdn.jsdelivr.net',
+];
+
+export { BASE_URLS };
+//# sourceMappingURL=constants.js.map

package/dist/esm/mixins/injectNpmLibMixin/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/mixins/injectNpmLibMixin/constants.ts"],"sourcesContent":["export const BASE_URLS = [\n  'https://descopecdn.com',\n  'https://static.descope.com',\n  'https://cdn.jsdelivr.net',\n];\n"],"names":[],"mappings":"AAAa,MAAA,SAAS,GAAG;IACvB,wBAAwB;IACxB,4BAA4B;IAC5B,0BAA0B;;;;;"}

package/dist/esm/mixins/injectNpmLibMixin/helpers.js

@@ -0,0 +1,109 @@
+const getExistingScript = (scriptId) => {
+    return document.querySelector(`script#${scriptId}`);
+};
+const isScriptLoaded = (script) => {
+    return script.getAttribute('status') === 'loaded';
+};
+const isScriptError = (script) => {
+    return script.getAttribute('status') === 'error';
+};
+const hashUrl = (url) => {
+    let hash = 0;
+    const urlStr = url.toString();
+    for (let i = 0; i < urlStr.length; i++) {
+        const char = urlStr.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32-bit integer
+    }
+    return `${Math.abs(hash).toString()}`;
+};
+const setupScript = (id) => {
+    const scriptEle = document.createElement('script');
+    scriptEle.id = id;
+    return scriptEle;
+};
+const injectScript = (scriptId, url) => {
+    return new Promise((res, rej) => {
+        const scriptEle = setupScript(scriptId);
+        scriptEle.onerror = (error) => {
+            scriptEle.setAttribute('status', 'error');
+            rej(error);
+        };
+        scriptEle.onload = () => {
+            scriptEle.setAttribute('status', 'loaded');
+            res(scriptEle);
+        };
+        scriptEle.src = url.toString();
+        document.body.appendChild(scriptEle);
+    });
+};
+const handleExistingScript = (existingScript) => {
+    if (isScriptLoaded(existingScript)) {
+        return Promise.resolve(existingScript);
+    }
+    if (isScriptError(existingScript)) {
+        return Promise.reject();
+    }
+    return new Promise((res, rej) => {
+        existingScript.addEventListener('load', () => {
+            res(existingScript);
+        });
+        existingScript.addEventListener('error', (error) => {
+            rej(error);
+        });
+    });
+};
+const injectScriptWithFallbacks = async (scriptsData, onError) => {
+    for (const scriptData of scriptsData) {
+        const { id, url } = scriptData;
+        const existingScript = getExistingScript(id);
+        if (existingScript) {
+            try {
+                await handleExistingScript(existingScript);
+                return scriptData;
+            }
+            catch (e) {
+                onError(scriptData, true);
+            }
+        }
+        else {
+            try {
+                await injectScript(id, url);
+                return scriptData;
+            }
+            catch (e) {
+                onError(scriptData, false);
+            }
+        }
+    }
+    throw new Error('All scripts failed to load');
+};
+const generateLibUrls = (baseUrls, libName, version, path = '') => baseUrls.reduce((prev, curr) => {
+    const baseUrl = curr;
+    if (!baseUrl) {
+        return prev;
+    }
+    let url;
+    try {
+        url = new URL(baseUrl);
+    }
+    catch (e) {
+        throw new Error(`Invalid URL: ${baseUrl}`);
+    }
+    const isUrlIncludesPath = url.pathname !== '/';
+    if (!isUrlIncludesPath) {
+        url.pathname = `/npm/${libName}@${version}/${path}`;
+    }
+    return [
+        ...prev,
+        {
+            url: url,
+            id: `npmlib-${libName
+                .replaceAll('@', '')
+                .replaceAll('/', '_')}-${hashUrl(url)}`,
+        },
+    ];
+}, []);
+
+export { generateLibUrls, injectScriptWithFallbacks };
+//# sourceMappingURL=helpers.js.map

package/dist/esm/mixins/injectNpmLibMixin/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../src/mixins/injectNpmLibMixin/helpers.ts"],"sourcesContent":["const getExistingScript = (scriptId: string): HTMLScriptElement => {\n  return document.querySelector(`script#${scriptId}`);\n};\n\nconst isScriptLoaded = (script: HTMLScriptElement) => {\n  return script.getAttribute('status') === 'loaded';\n};\n\nconst isScriptError = (script: HTMLScriptElement) => {\n  return script.getAttribute('status') === 'error';\n};\n\nconst hashUrl = (url: URL) => {\n  let hash = 0;\n  const urlStr = url.toString();\n\n  for (let i = 0; i < urlStr.length; i++) {\n    const char = urlStr.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash = hash & hash; // Convert to 32-bit integer\n  }\n\n  return `${Math.abs(hash).toString()}`;\n};\n\nconst setupScript = (id: string) => {\n  const scriptEle = document.createElement('script');\n  scriptEle.id = id;\n\n  return scriptEle;\n};\n\ntype ScriptData = {\n  id: string;\n  url: URL;\n};\n\nconst injectScript = (scriptId: string, url: URL) => {\n  return new Promise((res, rej) => {\n    const scriptEle = setupScript(scriptId);\n\n    scriptEle.onerror = (error) => {\n      scriptEle.setAttribute('status', 'error');\n      rej(error);\n    };\n    scriptEle.onload = () => {\n      scriptEle.setAttribute('status', 'loaded');\n      res(scriptEle);\n    };\n\n    scriptEle.src = url.toString();\n\n    document.body.appendChild(scriptEle);\n  });\n};\n\nconst handleExistingScript = (existingScript: HTMLScriptElement) => {\n  if (isScriptLoaded(existingScript)) {\n    return Promise.resolve(existingScript);\n  }\n\n  if (isScriptError(existingScript)) {\n    return Promise.reject();\n  }\n\n  return new Promise((res, rej) => {\n    existingScript.addEventListener('load', () => {\n      res(existingScript);\n    });\n\n    existingScript.addEventListener('error', (error) => {\n      rej(error);\n    });\n  });\n};\n\nexport const injectScriptWithFallbacks = async (\n  scriptsData: ScriptData[],\n  onError: (scriptData: ScriptData, existingScript: boolean) => void,\n) => {\n  for (const scriptData of scriptsData) {\n    const { id, url } = scriptData;\n    const existingScript = getExistingScript(id);\n    if (existingScript) {\n      try {\n        await handleExistingScript(existingScript);\n        return scriptData;\n      } catch (e) {\n        onError(scriptData, true);\n      }\n    } else {\n      try {\n        await injectScript(id, url);\n        return scriptData;\n      } catch (e) {\n        onError(scriptData, false);\n      }\n    }\n  }\n  throw new Error('All scripts failed to load');\n};\n\nexport const generateLibUrls = (\n  baseUrls: string[],\n  libName: string,\n  version: string,\n  path = '',\n) =>\n  baseUrls.reduce((prev, curr) => {\n    const baseUrl = curr;\n    if (!baseUrl) {\n      return prev;\n    }\n\n    let url: URL;\n    try {\n      url = new URL(baseUrl);\n    } catch (e) {\n      throw new Error(`Invalid URL: ${baseUrl}`);\n    }\n\n    const isUrlIncludesPath = url.pathname !== '/';\n\n    if (!isUrlIncludesPath) {\n      url.pathname = `/npm/${libName}@${version}/${path}`;\n    }\n\n    return [\n      ...prev,\n      {\n        url: url,\n        id: `npmlib-${libName\n          .replaceAll('@', '')\n          .replaceAll('/', '_')}-${hashUrl(url)}`,\n      },\n    ];\n  }, []);\n"],"names":[],"mappings":"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"}

package/dist/esm/mixins/injectNpmLibMixin/injectNpmLibMixin.js

@@ -0,0 +1,26 @@
+import { createSingletonMixin, compose } from '@descope/sdk-helpers';
+import { loggerMixin } from '../loggerMixin/loggerMixin.js';
+import { BASE_URLS } from './constants.js';
+import { injectScriptWithFallbacks, generateLibUrls } from './helpers.js';
+
+const injectNpmLibMixin = createSingletonMixin((superclass) => {
+    const BaseClass = compose(loggerMixin)(superclass);
+    return class InjectNpmLibMixinClass extends BaseClass {
+        get baseCdnUrl() {
+            return this.getAttribute('base-cdn-url');
+        }
+        injectNpmLib(libName, version, filePath = '', overrides = []) {
+            this.logger.debug(`Injecting npm lib: "${libName}" with version: "${version}"`);
+            return injectScriptWithFallbacks(generateLibUrls([...overrides, this.baseCdnUrl, ...BASE_URLS], libName, version, filePath), (scriptData, existingScript) => {
+                if (existingScript) {
+                    this.logger.error(`Existing script cannot be loaded: "${scriptData.url}"`);
+                    return;
+                }
+                this.logger.error(`Cannot load script from URL, Make sure this URL is valid and return the correct script: "${scriptData.url}"`);
+            });
+        }
+    };
+});
+
+export { injectNpmLibMixin };
+//# sourceMappingURL=injectNpmLibMixin.js.map

package/dist/esm/mixins/injectNpmLibMixin/injectNpmLibMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectNpmLibMixin.js","sources":["../../../../src/mixins/injectNpmLibMixin/injectNpmLibMixin.ts"],"sourcesContent":["import { compose, createSingletonMixin } from '@descope/sdk-helpers';\nimport { loggerMixin } from '../loggerMixin';\nimport { BASE_URLS } from './constants';\nimport { generateLibUrls, injectScriptWithFallbacks } from './helpers';\n\n// scripts load to window under descope object\ndeclare global {\n  var descope: any;\n}\n\nexport const injectNpmLibMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(loggerMixin)(superclass);\n\n    return class InjectNpmLibMixinClass extends BaseClass {\n      get baseCdnUrl() {\n        return this.getAttribute('base-cdn-url');\n      }\n\n      injectNpmLib(\n        libName: string,\n        version: string,\n        filePath = '',\n        overrides: string[] = [],\n      ) {\n        this.logger.debug(\n          `Injecting npm lib: \"${libName}\" with version: \"${version}\"`,\n        );\n        return injectScriptWithFallbacks(\n          generateLibUrls(\n            [...overrides, this.baseCdnUrl, ...BASE_URLS],\n            libName,\n            version,\n            filePath,\n          ),\n          (scriptData, existingScript) => {\n            if (existingScript) {\n              this.logger.error(\n                `Existing script cannot be loaded: \"${scriptData.url}\"`,\n              );\n              return;\n            }\n            this.logger.error(\n              `Cannot load script from URL, Make sure this URL is valid and return the correct script: \"${scriptData.url}\"`,\n            );\n          },\n        );\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;;;MAUa,iBAAiB,GAAG,oBAAoB,CACnD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IAEnD,OAAO,MAAM,sBAAuB,SAAQ,SAAS,CAAA;AACnD,QAAA,IAAI,UAAU,GAAA;AACZ,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;SAC1C;QAED,YAAY,CACV,OAAe,EACf,OAAe,EACf,QAAQ,GAAG,EAAE,EACb,SAAA,GAAsB,EAAE,EAAA;YAExB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAuB,oBAAA,EAAA,OAAO,CAAoB,iBAAA,EAAA,OAAO,CAAG,CAAA,CAAA,CAC7D,CAAC;AACF,YAAA,OAAO,yBAAyB,CAC9B,eAAe,CACb,CAAC,GAAG,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,SAAS,CAAC,EAC7C,OAAO,EACP,OAAO,EACP,QAAQ,CACT,EACD,CAAC,UAAU,EAAE,cAAc,KAAI;gBAC7B,IAAI,cAAc,EAAE;oBAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAAsC,mCAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CACxD,CAAC;oBACF,OAAO;iBACR;gBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,CAA4F,yFAAA,EAAA,UAAU,CAAC,GAAG,CAAG,CAAA,CAAA,CAC9G,CAAC;AACJ,aAAC,CACF,CAAC;SACH;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/injectStyleMixin.js

@@ -0,0 +1,60 @@
+import { createSingletonMixin } from '@descope/sdk-helpers';
+import { cspNonceMixin } from './cspNonceMixin.js';
+import { compose } from 'redux';
+
+// we should mimic the CSSStyleSheet API for the fns we are using
+class CSSStyleSheetMock {
+    constructor(ref, nonce, { prepend = false } = {}) {
+        this.styleEle = document.createElement('style');
+        this.styleEle.setAttribute('nonce', nonce);
+        this.ref = ref;
+        if (!this.ref) {
+            return;
+        }
+        if (prepend) {
+            this.ref.prepend(this.styleEle);
+        }
+        else {
+            this.ref.append(this.styleEle);
+        }
+    }
+    replaceSync(cssString) {
+        this.styleEle.textContent = cssString;
+    }
+    get cssRules() {
+        var _a;
+        return (_a = this.styleEle.sheet) === null || _a === void 0 ? void 0 : _a.cssRules;
+    }
+}
+const injectStyleMixin = createSingletonMixin((superclass) => {
+    const BaseClass = compose(cspNonceMixin)(superclass);
+    return class InjectStyleMixinClass extends BaseClass {
+        injectStyle(cssString, { prepend = false } = {}) {
+            let style;
+            try {
+                style = new CSSStyleSheet();
+            }
+            catch (e) {
+                // fallback for browsers that don't support CSSStyleSheet
+                style = new CSSStyleSheetMock(this.shadowRoot, this.nonce, {
+                    prepend,
+                });
+            }
+            if (cssString) {
+                style.replaceSync(cssString);
+            }
+            if (style instanceof CSSStyleSheet) {
+                const ref = this.shadowRoot;
+                if (ref && 'adoptedStyleSheets' in ref) {
+                    const adoptedStyleSheets = [...(ref.adoptedStyleSheets || [])];
+                    adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);
+                    ref.adoptedStyleSheets = adoptedStyleSheets;
+                }
+            }
+            return style;
+        }
+    };
+});
+
+export { injectStyleMixin };
+//# sourceMappingURL=injectStyleMixin.js.map

package/dist/esm/mixins/injectStyleMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectStyleMixin.js","sources":["../../../src/mixins/injectStyleMixin.ts"],"sourcesContent":["import { createSingletonMixin } from '@descope/sdk-helpers';\nimport { cspNonceMixin } from './cspNonceMixin';\nimport { compose } from 'redux';\n\n// we should mimic the CSSStyleSheet API for the fns we are using\nclass CSSStyleSheetMock {\n  styleEle: HTMLStyleElement;\n  ref: ShadowRoot | HTMLElement | null;\n  constructor(ref: ShadowRoot, nonce: string, { prepend = false } = {}) {\n    this.styleEle = document.createElement('style');\n    this.styleEle.setAttribute('nonce', nonce);\n    this.ref = ref;\n\n    if (!this.ref) {\n      return;\n    }\n\n    if (prepend) {\n      this.ref.prepend(this.styleEle);\n    } else {\n      this.ref.append(this.styleEle);\n    }\n  }\n\n  replaceSync(cssString: string) {\n    this.styleEle.textContent = cssString;\n  }\n\n  get cssRules() {\n    return this.styleEle.sheet?.cssRules;\n  }\n}\n\nexport const injectStyleMixin = createSingletonMixin(\n  <T extends CustomElementConstructor>(superclass: T) => {\n    const BaseClass = compose(cspNonceMixin)(superclass);\n    return class InjectStyleMixinClass extends BaseClass {\n      injectStyle(cssString: string, { prepend = false } = {}) {\n        let style: CSSStyleSheet | CSSStyleSheetMock;\n        try {\n          style = new CSSStyleSheet();\n        } catch (e) {\n          // fallback for browsers that don't support CSSStyleSheet\n          style = new CSSStyleSheetMock(this.shadowRoot, this.nonce, {\n            prepend,\n          });\n        }\n\n        if (cssString) {\n          style.replaceSync(cssString);\n        }\n\n        if (style instanceof CSSStyleSheet) {\n          const ref = this.shadowRoot;\n\n          if (ref && 'adoptedStyleSheets' in ref) {\n            const adoptedStyleSheets = [...(ref.adoptedStyleSheets || [])];\n            adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);\n\n            ref.adoptedStyleSheets = adoptedStyleSheets;\n          }\n        }\n\n        return style;\n      }\n    };\n  },\n);\n"],"names":[],"mappings":";;;;AAIA;AACA,MAAM,iBAAiB,CAAA;IAGrB,WAAY,CAAA,GAAe,EAAE,KAAa,EAAE,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,EAAA;QAClE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3C,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AAEf,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,OAAO;SACR;QAED,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAChC;KACF;AAED,IAAA,WAAW,CAAC,SAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC;KACvC;AAED,IAAA,IAAI,QAAQ,GAAA;;QACV,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,QAAQ,CAAC;KACtC;AACF,CAAA;MAEY,gBAAgB,GAAG,oBAAoB,CAClD,CAAqC,UAAa,KAAI;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IACrD,OAAO,MAAM,qBAAsB,SAAQ,SAAS,CAAA;QAClD,WAAW,CAAC,SAAiB,EAAE,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,EAAE,EAAA;AACrD,YAAA,IAAI,KAAwC,CAAC;AAC7C,YAAA,IAAI;AACF,gBAAA,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;aAC7B;YAAC,OAAO,CAAC,EAAE;;gBAEV,KAAK,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE;oBACzD,OAAO;AACR,iBAAA,CAAC,CAAC;aACJ;YAED,IAAI,SAAS,EAAE;AACb,gBAAA,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;aAC9B;AAED,YAAA,IAAI,KAAK,YAAY,aAAa,EAAE;AAClC,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC;AAE5B,gBAAA,IAAI,GAAG,IAAI,oBAAoB,IAAI,GAAG,EAAE;AACtC,oBAAA,MAAM,kBAAkB,GAAG,CAAC,IAAI,GAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC,CAAC;AAC/D,oBAAA,kBAAkB,CAAC,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AAExD,oBAAA,GAAG,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;iBAC7C;aACF;AAED,YAAA,OAAO,KAAK,CAAC;SACd;KACF,CAAC;AACJ,CAAC;;;;"}

package/dist/esm/mixins/themeMixin/themeMixin.js

@@ -10,6 +10,7 @@ import { DEFAULT_STYLE_ID } from './constants.js';
 import { loadFont, loadDevTheme } from './helpers.js';
 import { observeAttributesMixin } from '../observeAttributesMixin/observeAttributesMixin.js';
 import { UI_COMPONENTS_URL_KEY } from '../descopeUiMixin/constants.js';
+import { injectStyleMixin } from '../injectStyleMixin.js';
 
 const themeValidation = (_, theme) => (theme || false) &&
     theme !== 'light' &&
@@ -17,7 +18,7 @@ const themeValidation = (_, theme) => (theme || false) &&
     'Supported theme values are "light", "dark", or leave empty for using the OS theme';
 const themeMixin = createSingletonMixin((superclass) => {
     var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyle, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _ThemeMixinClass_onThemeChange, _ThemeMixinClass_loadTheme, _ThemeMixinClass_toggleOsThemeChangeListener, _a;
-    const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
+    const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin, injectStyleMixin)(superclass);
     return _a = class ThemeMixinClass extends BaseClass {
             constructor() {
                 super(...arguments);
@@ -108,20 +109,14 @@ const themeMixin = createSingletonMixin((superclass) => {
             return __classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f");
         },
         _ThemeMixinClass_loadGlobalStyle = async function _ThemeMixinClass_loadGlobalStyle() {
-            var _b, _c, _d;
-            var _e;
+            var _b, _c;
             const theme = await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get);
             if (!theme)
                 return;
             if (!__classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f")) {
-                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyle, new CSSStyleSheet(), "f");
-                (_b = (_e = this.shadowRoot).adoptedStyleSheets) !== null && _b !== void 0 ? _b : (_e.adoptedStyleSheets = []);
-                this.shadowRoot.adoptedStyleSheets = [
-                    ...this.shadowRoot.adoptedStyleSheets,
-                    __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f"),
-                ];
+                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyle, this.injectStyle(''), "f");
             }
-            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f").replaceSync((((_c = theme === null || theme === void 0 ? void 0 : theme.light) === null || _c === void 0 ? void 0 : _c.globals) || '') + (((_d = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _d === void 0 ? void 0 : _d.globals) || ''));
+            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyle, "f").replaceSync((((_b = theme === null || theme === void 0 ? void 0 : theme.light) === null || _b === void 0 ? void 0 : _b.globals) || '') + (((_c = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _c === void 0 ? void 0 : _c.globals) || ''));
         },
         _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
             var _b, _c;