CR fixes

descope · Jul 24, 2024 · fe503b8 · fe503b8
1 parent 172b478
commit fe503b8
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/packages/libs/sdk-mixins/src/mixins/themeMixin/constants.ts b/packages/libs/sdk-mixins/src/mixins/themeMixin/constants.ts
@@ -1,3 +1,3 @@
 // Those files are saved on a new folder to prevent breaking changes
-export const THEME_DEFAULT_NAME = 'theme';
+export const DEFAULT_STYLE_ID = 'theme';
 export const CONFIG_FILENAME = 'config.json';
diff --git a/packages/libs/sdk-mixins/src/mixins/themeMixin/themeMixin.ts b/packages/libs/sdk-mixins/src/mixins/themeMixin/themeMixin.ts
@@ -6,7 +6,7 @@ import { descopeUiMixin } from '../descopeUiMixin';
 import { initElementMixin } from '../initElementMixin';
 import { initLifecycleMixin } from '../initLifecycleMixin';
 import { staticResourcesMixin } from '../staticResourcesMixin';
-import { THEME_DEFAULT_NAME } from './constants';
+import { DEFAULT_STYLE_ID } from './constants';
 import { loadDevTheme, loadFont } from './helpers';
 import { observeAttributesMixin } from '../observeAttributesMixin';
 import { UI_COMPONENTS_URL_KEY } from '../descopeUiMixin/constants';
@@ -32,6 +32,8 @@ export const themeMixin = createSingletonMixin(
     )(superclass);
 
     return class ThemeMixinClass extends BaseClass {
+      #globalStyleTag: HTMLStyleElement;
+
       get theme(): ThemeOptions {
         const theme = this.getAttribute('theme') as ThemeOptions | null;
 
@@ -47,7 +49,7 @@ export const themeMixin = createSingletonMixin(
       }
 
       get styleId(): string {
-        return this.getAttribute('style-id') || THEME_DEFAULT_NAME;
+        return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
       }
 
       #_themeResource: Promise<void | Record<string, any>>;
@@ -120,11 +122,13 @@ export const themeMixin = createSingletonMixin(
         const theme = await this.#themeResource;
         if (!theme) return;
 
-        const styleEle = document.createElement('style');
-        styleEle.innerText =
-          (theme?.light?.globals || '') + (theme?.dark?.globals || '');
+        if (!this.#globalStyleTag) {
+          this.#globalStyleTag = document.createElement('style');
+          this.shadowRoot!.appendChild(this.#globalStyleTag);
+        }
 
-        this.shadowRoot!.appendChild(styleEle);
+        this.#globalStyleTag.innerText =
+          (theme?.light?.globals || '') + (theme?.dark?.globals || '');
       }
 
       async #loadComponentsStyle() {
@@ -140,17 +144,31 @@ export const themeMixin = createSingletonMixin(
         }
       }
 
-      async #loadFonts() {
+      async #getFontsConfig() {
         const { projectConfig } = await this.config;
+
+        const newConfig = projectConfig?.styles?.[this.styleId]
+        const oldConfig = projectConfig?.cssTemplate
+
+        const config = newConfig || oldConfig;
+
         const fonts: Record<string, { url?: string }> | undefined =
-          projectConfig?.cssTemplate?.[this.theme]?.fonts;
+          config?.[this.theme]?.fonts;
+
+        return fonts;
+      }
+
+      async #loadFonts() {
+        const fonts = this.#getFontsConfig();
         if (fonts) {
           Object.values(fonts).forEach((font) => {
             if (font.url) {
               this.logger.debug(`Loading font from URL "${font.url}"`);
               loadFont(font.url);
             }
           });
+        } else {
+          this.logger.debug('No fonts to load');
         }
       }
 
@@ -177,6 +195,8 @@ export const themeMixin = createSingletonMixin(
 
         this.observeAttributes(['style-id'], () => {
           this.#_themeResource = null;
+          this.#loadFonts();
+          this.#loadGlobalStyle();
           this.#loadComponentsStyle();
         });
       }

diff --git a/packages/sdks/web-component/src/lib/constants/content.ts b/packages/sdks/web-component/src/lib/constants/content.ts
@@ -10,7 +10,4 @@ export const BASE_CONTENT_URL = 'https://static.descope.com/pages';
 export const ASSETS_FOLDER = 'v2-beta';
 export const PREV_VER_ASSETS_FOLDER = 'v2-alpha';
 
-// Those files are saved on a new folder to prevent breaking changes
-export const THEME_DEFAULT_NAME = 'theme';
-
 export const CONFIG_FILENAME = 'config.json';
diff --git a/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts b/packages/sdks/web-component/src/lib/descope-wc/BaseDescopeWc.ts
@@ -125,7 +125,6 @@ class BaseDescopeWc extends BaseClass {
   }
 
   #initShadowDom() {
-    //this.attachShadow({ mode: 'open' });
     this.shadowRoot.appendChild(initTemplate.content.cloneNode(true));
 
     this.rootElement =

diff --git a/packages/sdks/web-component/test/descope-wc.test.ts b/packages/sdks/web-component/test/descope-wc.test.ts
@@ -11,7 +11,6 @@ import {
   DESCOPE_LAST_AUTH_LOCAL_STORAGE_KEY,
   ELEMENT_TYPE_ATTRIBUTE,
   RESPONSE_ACTIONS,
-  THEME_DEFAULT_NAME,
   URL_CODE_PARAM_NAME,
   URL_ERR_PARAM_NAME,
   URL_RUN_IDS_PARAM_NAME,
@@ -51,7 +50,7 @@ jest.mock('@descope/web-js-sdk', () => ({
 }));
 
 const WAIT_TIMEOUT = 10000;
-const THEME_DEFAULT_FILENAME = `${THEME_DEFAULT_NAME}.json`;
+const THEME_DEFAULT_FILENAME = `theme.json`;
 
 const abTestingKey = getABTestingKey();