feat: support multi style and style prop

package.json

@@ -19,7 +19,8 @@
     "postversion:ci": "pnpm run build:ci",
     "print-affected:ci": "nx print-affected --base=$(sh ./tools/scripts/latestTag.sh) --select=projects",
     "format": "nx format:write",
-    "format:ci": "nx format:check"
+    "format:ci": "nx format:check",
+    "postinstall": "pnpm update @descope/web-components-ui"
   },
   "private": true,
   "dependencies": {

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_FILENAME = 'theme.json';
+export const DEFAULT_STYLE_ID = 'theme';
 export const CONFIG_FILENAME = 'config.json';

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_FILENAME } 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;
 
@@ -46,12 +48,16 @@ export const themeMixin = createSingletonMixin(
         return theme || 'light';
       }
 
+      get styleId(): string {
+        return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
+      }
+
       #_themeResource: Promise<void | Record<string, any>>;
 
       async #fetchTheme() {
         try {
           const { body: fetchedTheme } = await this.fetchStaticResource(
-            THEME_FILENAME,
+            `${this.styleId}.json`,
             'json',
           );
 
@@ -116,11 +122,14 @@ 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.#globalStyleTag.id = 'global-style';
+          this.shadowRoot!.appendChild(this.#globalStyleTag);
+        }
 
-        this.shadowRoot!.appendChild(styleEle);
+        this.#globalStyleTag.innerText =
+          (theme?.light?.globals || '') + (theme?.dark?.globals || '');
       }
 
       async #loadComponentsStyle() {
@@ -136,17 +145,31 @@ export const themeMixin = createSingletonMixin(
         }
       }
 
-      async #loadFonts() {
-        const { projectConfig } = await this.config;
+      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 = await 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');
         }
       }
 
@@ -170,6 +193,13 @@ export const themeMixin = createSingletonMixin(
           this.#loadFonts();
           this.#applyTheme();
         });
+
+        this.observeAttributes(['style-id'], () => {
+          this.#_themeResource = null;
+          this.#loadFonts();
+          this.#loadGlobalStyle();
+          this.#loadComponentsStyle();
+        });
       }
     };
   },

packages/sdks/nextjs-sdk/CHANGELOG.md

@@ -37,24 +37,26 @@ This file was generated using [@jscutlery/semver](https://github.com/jscutlery/s
 
 ### Dependency Updates
 
-* `react-sdk` updated to version `2.0.63`
+- `react-sdk` updated to version `2.0.63`
+
 ## [0.0.20](https://github.com/descope/descope-js/compare/nextjs-sdk-0.0.19...nextjs-sdk-0.0.20) (2024-08-03)
 
 ### Dependency Updates
 
-* `react-sdk` updated to version `2.0.62`
-* `web-component` updated to version `3.22.0`
+- `react-sdk` updated to version `2.0.62`
+- `web-component` updated to version `3.22.0`
+
 ## [0.0.19](https://github.com/descope/descope-js/compare/nextjs-sdk-0.0.18...nextjs-sdk-0.0.19) (2024-08-01)
 
 ## [0.0.18](https://github.com/descope/descope-js/compare/nextjs-sdk-0.0.17...nextjs-sdk-0.0.18) (2024-07-31)
 
 ### Dependency Updates
 
-* `react-sdk` updated to version `2.0.61`
+- `react-sdk` updated to version `2.0.61`
 
 ### Bug Fixes
 
-* issue 7219 RELEASE ([#765](https://github.com/descope/descope-js/issues/765)) ([eec8843](https://github.com/descope/descope-js/commit/eec88439177d57dd19665c96bd57dc206ca3b4f4))
+- issue 7219 RELEASE ([#765](https://github.com/descope/descope-js/issues/765)) ([eec8843](https://github.com/descope/descope-js/commit/eec88439177d57dd19665c96bd57dc206ca3b4f4))
 
 ## [0.0.17](https://github.com/descope/descope-js/compare/nextjs-sdk-0.0.16...nextjs-sdk-0.0.17) (2024-07-28)
 

packages/sdks/web-component/jest.config.js

@@ -10,9 +10,9 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 81,
-      functions: 89,
-      lines: 93,
-      statements: 93,
+      functions: 87,
+      lines: 89,
+      statements: 89,
     },
   },
   globals: {

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:*",
     "@fingerprintjs/fingerprintjs-pro": "3.9.9"
   },

packages/sdks/web-component/src/lib/constants/content.ts

@@ -10,6 +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_FILENAME = 'theme.json';
 export const CONFIG_FILENAME = 'config.json';