feat(descope-ui-mixin): use descopecdn.com (#804)

Co-authored-by: nirgur <nirgur@users.noreply.github.com> Co-authored-by: Nir Gur Arie <nir@descope.com>
descope · Nov 6, 2024 · 82e2fa7 · 82e2fa7
1 parent 0573afd
commit 82e2fa7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 13 deletions.
diff --git a/packages/libs/sdk-mixins/src/mixins/descopeUiMixin/constants.ts b/packages/libs/sdk-mixins/src/mixins/descopeUiMixin/constants.ts
@@ -2,14 +2,20 @@ import { IS_LOCAL_STORAGE } from '../../constants';
 
 export const DESCOPE_UI_SCRIPT_ID = 'load-descope-ui';
 export const DESCOPE_UI_FALLBACK_SCRIPT_ID = 'load-descope-ui-fallback-script';
+export const DESCOPE_UI_FALLBACK_2_SCRIPT_ID =
+  'load-descope-ui-fallback-script-2';
 
 export const UI_COMPONENTS_URL_KEY = 'base.ui.components.url';
 
 export const UI_COMPONENTS_URL =
   (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
-  'https://static.descope.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+  'https://descopecdn.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
 
 export const UI_COMPONENTS_FALLBACK_URL =
+  (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
+  'https://static.descope.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+
+export const UI_COMPONENTS_FALLBACK_2_URL =
   (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
   'https://cdn.jsdelivr.net/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
 

diff --git a/packages/libs/sdk-mixins/src/mixins/descopeUiMixin/descopeUiMixin.ts b/packages/libs/sdk-mixins/src/mixins/descopeUiMixin/descopeUiMixin.ts
@@ -2,8 +2,10 @@ import { compose, createSingletonMixin } from '@descope/sdk-helpers';
 import { configMixin } from '../configMixin';
 import { loggerMixin } from '../loggerMixin';
 import {
+  DESCOPE_UI_FALLBACK_2_SCRIPT_ID,
   DESCOPE_UI_FALLBACK_SCRIPT_ID,
   DESCOPE_UI_SCRIPT_ID,
+  UI_COMPONENTS_FALLBACK_2_URL,
   UI_COMPONENTS_FALLBACK_URL,
   UI_COMPONENTS_URL,
 } from './constants';
@@ -64,9 +66,14 @@ export const descopeUiMixin = createSingletonMixin(
         });
       }
 
-      async #handleFallbackScript(errorCbs: ErrorCb[], loadCbs: LoadCb[]) {
+      async #handleFallbackScript(
+        errorCbs: ErrorCb[],
+        loadCbs: LoadCb[],
+        elemId: string,
+        scriptUrl: string,
+      ) {
         this.logger.debug('Trying to load DescopeUI from a fallback URL');
-        const fallbackScriptEle = setupScript(DESCOPE_UI_FALLBACK_SCRIPT_ID);
+        const fallbackScriptEle = setupScript(elemId);
         document.body.append(fallbackScriptEle);
 
         fallbackScriptEle.addEventListener('error', () => {
@@ -82,7 +89,7 @@ export const descopeUiMixin = createSingletonMixin(
         });
 
         fallbackScriptEle.src = generateScriptUrl(
-          UI_COMPONENTS_FALLBACK_URL,
+          scriptUrl,
           await this.#getComponentsVersion(),
         );
       }
@@ -97,8 +104,20 @@ export const descopeUiMixin = createSingletonMixin(
 
           // in case we could not load DescopeUI from the main URL, we are trying to load it from a fallback URL
           this.#handleFallbackScript(
-            scriptEle[this.#errorCbsSym],
+            [
+              // we are adding a second fallback
+              this.#handleFallbackScript.bind(
+                this,
+                scriptEle[this.#errorCbsSym],
+                scriptEle[this.#loadCbsSym],
+                DESCOPE_UI_FALLBACK_2_SCRIPT_ID,
+                UI_COMPONENTS_FALLBACK_2_URL,
+              ),
+              ...scriptEle[this.#errorCbsSym],
+            ],
             scriptEle[this.#loadCbsSym],
+            DESCOPE_UI_FALLBACK_SCRIPT_ID,
+            UI_COMPONENTS_FALLBACK_URL,
           );
         });
 

diff --git a/packages/sdks/web-component/src/lib/constants/uiComponents.ts b/packages/sdks/web-component/src/lib/constants/uiComponents.ts
@@ -4,10 +4,10 @@ export const UI_COMPONENTS_URL_KEY = 'base.ui.components.url';
 
 export const UI_COMPONENTS_URL =
   (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
-  'https://static.descope.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+  'https://descopecdn.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
 
 export const UI_COMPONENTS_FALLBACK_URL =
   (IS_LOCAL_STORAGE && localStorage.getItem(UI_COMPONENTS_URL_KEY)) ||
-  'https://cdn.jsdelivr.net/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
+  'https://static.descope.com/npm/@descope/web-components-ui@<version>/dist/umd/index.js';
 
 export const UI_COMPONENTS_URL_VERSION_PLACEHOLDER = '<version>';
diff --git a/packages/widgets/access-key-management-widget/README.md b/packages/widgets/access-key-management-widget/README.md
@@ -19,7 +19,7 @@ DESCOPE_WIDGET_ID=  # default: "access-key-management-widget"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/access-key-management-widget
-<script src="https://static.descope.com/npm/@descope/access-key-management-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/access-key-management-widget@x.x.x/dist/index.js"></script>
 <descope-access-key-management-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"

diff --git a/packages/widgets/applications-portal-widget/README.md b/packages/widgets/applications-portal-widget/README.md
@@ -18,7 +18,7 @@ DESCOPE_THEME=      # "light" / "dark" / "os", default: "light"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/applications-portal-widget
-<script src="https://static.descope.com/npm/@descope/applications-portal-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/applications-portal-widget@x.x.x/dist/index.js"></script>
 <descope-applications-portal-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"

diff --git a/packages/widgets/audit-management-widget/README.md b/packages/widgets/audit-management-widget/README.md
@@ -19,7 +19,7 @@ DESCOPE_WIDGET_ID=  # default: "audit-management-widget"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/audit-management-widget
-<script src="https://static.descope.com/npm/@descope/audit-management-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/audit-management-widget@x.x.x/dist/index.js"></script>
 <descope-audit-management-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"

diff --git a/packages/widgets/role-management-widget/README.md b/packages/widgets/role-management-widget/README.md
@@ -19,7 +19,7 @@ DESCOPE_WIDGET_ID=  # default: "role-management-widget"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/role-management-widget
-<script src="https://static.descope.com/npm/@descope/role-management-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/role-management-widget@x.x.x/dist/index.js"></script>
 <descope-role-management-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"

diff --git a/packages/widgets/user-management-widget/README.md b/packages/widgets/user-management-widget/README.md
@@ -19,7 +19,7 @@ DESCOPE_WIDGET_ID=  # default: "user-management-widget"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/user-management-widget
-<script src="https://static.descope.com/npm/@descope/user-management-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/user-management-widget@x.x.x/dist/index.js"></script>
 <descope-user-management-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"

diff --git a/packages/widgets/user-profile-widget/README.md b/packages/widgets/user-profile-widget/README.md
@@ -18,7 +18,7 @@ DESCOPE_THEME=      # "light" / "dark" / "os", default: "light"
 
 ```
 // replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/user-profile-widget
-<script src="https://static.descope.com/npm/@descope/user-profile-widget@x.x.x/dist/index.js"></script>
+<script src="https://descopecdn.com/npm/@descope/user-profile-widget@x.x.x/dist/index.js"></script>
 <descope-user-profile-widget
   base-url="<DESCOPE_BASE_URL>"
   project-id="<DESCOPE_PROJECT_ID>"