update mixin for web components

descope · Jul 24, 2024 · 25316d9 · 25316d9
1 parent f6fba2f
commit 25316d9
Show file tree

Hide file tree

Showing 9 changed files with 1,840 additions and 358 deletions.
diff --git a/packages/libs/sdk-mixins/src/index.ts b/packages/libs/sdk-mixins/src/index.ts
@@ -1,11 +1,11 @@
 declare global {
   interface HTMLElement {
-    attributeChangedCallback(
+    attributeChangedCallback?(
       attrName: string,
       oldValue: string | null,
       newValue: string | null,
     ): void;
-    connectedCallback(): void;
+    connectedCallback?(): void;
   }
 }
 

diff --git a/packages/libs/sdk-mixins/src/mixins/themeMixin/themeMixin.ts b/packages/libs/sdk-mixins/src/mixins/themeMixin/themeMixin.ts
@@ -46,16 +46,16 @@ export const themeMixin = createSingletonMixin(
         return theme || 'light';
       }
 
-      get styleName(): string {
-        return this.getAttribute('style-name') || THEME_DEFAULT_NAME;
+      get styleId(): string {
+        return this.getAttribute('style-id') || THEME_DEFAULT_NAME;
       }
 
       #_themeResource: Promise<void | Record<string, any>>;
 
       async #fetchTheme() {
         try {
           const { body: fetchedTheme } = await this.fetchStaticResource(
-            `${this.styleName}.json`,
+            `${this.styleId}.json`,
             'json',
           );
 
@@ -174,6 +174,11 @@ export const themeMixin = createSingletonMixin(
           this.#loadFonts();
           this.#applyTheme();
         });
+
+        this.observeAttributes(['style-id'], () => {
+          this.#_themeResource = null;
+          this.#loadComponentsStyle();
+        });
       }
     };
   },

diff --git a/packages/sdks/web-component/package.json b/packages/sdks/web-component/package.json
@@ -74,6 +74,8 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
+    "@descope/sdk-helpers": "workspace:*",
+    "@descope/sdk-mixins": "workspace:*",
     "@descope/web-js-sdk": "workspace:*"
   },
   "overrides": {