@descope/sdk-mixins - npm Package Compare versions

Comparing version 0.2.44 to 0.3.0

dist/cjs/index.cjs.js

@@ -161,3 +161,3 @@ 'use strict';
         get baseUrl() {
-            return this.getAttribute('base-url');
+            return this.getAttribute('base-url') || '';
         }
@@ -583,3 +583,3 @@ };
 // Those files are saved on a new folder to prevent breaking changes
-const THEME_FILENAME = 'theme.json';
+const DEFAULT_STYLE_ID = 'theme';
 
@@ -618,3 +618,3 @@ const loadFont = (url) => {
 const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
-    var _ThemeMixinClass_instances, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
+    var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyleTag, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
     const BaseClass = sdkHelpers.compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
@@ -625,2 +625,3 @@ return _a = class ThemeMixinClass extends BaseClass {
                 _ThemeMixinClass_instances.add(this);
+                _ThemeMixinClass_globalStyleTag.set(this, void 0);
                 _ThemeMixinClass__themeResource.set(this, void 0);
@@ -638,2 +639,5 @@ }
             }
+            get styleId() {
+                return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
+            }
             async init() {
@@ -650,4 +654,11 @@ var _b;
                 });
+                this.observeAttributes(['style-id'], () => {
+                    tslib.__classPrivateFieldSet(this, _ThemeMixinClass__themeResource, null, "f");
+                    tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
+                    tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
+                    tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
+                });
             }
         },
+        _ThemeMixinClass_globalStyleTag = new WeakMap(),
         _ThemeMixinClass__themeResource = new WeakMap(),
@@ -657,3 +668,3 @@ _ThemeMixinClass_instances = new WeakSet(),
             try {
-                const { body: fetchedTheme } = await this.fetchStaticResource(THEME_FILENAME, 'json');
+                const { body: fetchedTheme } = await this.fetchStaticResource(`${this.styleId}.json`, 'json');
                 // In development mode, we sometimes want to override the UI components URL
@@ -699,6 +710,9 @@ // The override components might have a different theme, so we need to merge it with the project theme in order to see the components correctly
                 return;
-            const styleEle = document.createElement('style');
-            styleEle.innerText =
+            if (!tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f")) {
+                tslib.__classPrivateFieldSet(this, _ThemeMixinClass_globalStyleTag, document.createElement('style'), "f");
+                tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").id = 'global-style';
+                this.shadowRoot.appendChild(tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f"));
+            }
+            tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").innerText =
                 (((_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) || '');
-            this.shadowRoot.appendChild(styleEle);
         },
@@ -718,6 +732,13 @@ _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
         },
+        _ThemeMixinClass_getFontsConfig = async function _ThemeMixinClass_getFontsConfig() {
+            var _b, _c;
+            const { projectConfig } = (await this.config) || {};
+            const newConfig = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.styles) === null || _b === void 0 ? void 0 : _b[this.styleId];
+            const oldConfig = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate;
+            const config = newConfig || oldConfig;
+            const fonts = (_c = config === null || config === void 0 ? void 0 : config[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
+            return fonts;
+        },
         _ThemeMixinClass_loadFonts = async function _ThemeMixinClass_loadFonts() {
-            var _b, _c;
-            const { projectConfig } = await this.config;
-            const fonts = (_c = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate) === null || _b === void 0 ? void 0 : _b[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
+            const fonts = await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_getFontsConfig).call(this);
             if (fonts) {
@@ -731,2 +752,5 @@ Object.values(fonts).forEach((font) => {
             }
+            else {
+                this.logger.debug('No fonts to load');
+            }
         },
@@ -835,3 +859,3 @@ _ThemeMixinClass_applyTheme = async function _ThemeMixinClass_applyTheme() {
         get baseStaticUrl() {
-            return this.getAttribute('base-static-url');
+            return this.getAttribute('base-static-url') || '';
         }
@@ -838,0 +862,0 @@ };

dist/index.esm.js

@@ -159,3 +159,3 @@ import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
         get baseUrl() {
-            return this.getAttribute('base-url');
+            return this.getAttribute('base-url') || '';
         }
@@ -581,3 +581,3 @@ };
 // Those files are saved on a new folder to prevent breaking changes
-const THEME_FILENAME = 'theme.json';
+const DEFAULT_STYLE_ID = 'theme';
 
@@ -616,3 +616,3 @@ const loadFont = (url) => {
 const themeMixin = createSingletonMixin((superclass) => {
-    var _ThemeMixinClass_instances, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
+    var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyleTag, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
     const BaseClass = compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
@@ -623,2 +623,3 @@ return _a = class ThemeMixinClass extends BaseClass {
                 _ThemeMixinClass_instances.add(this);
+                _ThemeMixinClass_globalStyleTag.set(this, void 0);
                 _ThemeMixinClass__themeResource.set(this, void 0);
@@ -636,2 +637,5 @@ }
             }
+            get styleId() {
+                return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
+            }
             async init() {
@@ -648,4 +652,11 @@ var _b;
                 });
+                this.observeAttributes(['style-id'], () => {
+                    __classPrivateFieldSet(this, _ThemeMixinClass__themeResource, null, "f");
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
+                    __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
+                });
             }
         },
+        _ThemeMixinClass_globalStyleTag = new WeakMap(),
         _ThemeMixinClass__themeResource = new WeakMap(),
@@ -655,3 +666,3 @@ _ThemeMixinClass_instances = new WeakSet(),
             try {
-                const { body: fetchedTheme } = await this.fetchStaticResource(THEME_FILENAME, 'json');
+                const { body: fetchedTheme } = await this.fetchStaticResource(`${this.styleId}.json`, 'json');
                 // In development mode, we sometimes want to override the UI components URL
@@ -697,6 +708,9 @@ // The override components might have a different theme, so we need to merge it with the project theme in order to see the components correctly
                 return;
-            const styleEle = document.createElement('style');
-            styleEle.innerText =
+            if (!__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f")) {
+                __classPrivateFieldSet(this, _ThemeMixinClass_globalStyleTag, document.createElement('style'), "f");
+                __classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").id = 'global-style';
+                this.shadowRoot.appendChild(__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f"));
+            }
+            __classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").innerText =
                 (((_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) || '');
-            this.shadowRoot.appendChild(styleEle);
         },
@@ -716,6 +730,13 @@ _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
         },
+        _ThemeMixinClass_getFontsConfig = async function _ThemeMixinClass_getFontsConfig() {
+            var _b, _c;
+            const { projectConfig } = (await this.config) || {};
+            const newConfig = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.styles) === null || _b === void 0 ? void 0 : _b[this.styleId];
+            const oldConfig = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate;
+            const config = newConfig || oldConfig;
+            const fonts = (_c = config === null || config === void 0 ? void 0 : config[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
+            return fonts;
+        },
         _ThemeMixinClass_loadFonts = async function _ThemeMixinClass_loadFonts() {
-            var _b, _c;
-            const { projectConfig } = await this.config;
-            const fonts = (_c = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate) === null || _b === void 0 ? void 0 : _b[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
+            const fonts = await __classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_getFontsConfig).call(this);
             if (fonts) {
@@ -729,2 +750,5 @@ Object.values(fonts).forEach((font) => {
             }
+            else {
+                this.logger.debug('No fonts to load');
+            }
         },
@@ -833,3 +857,3 @@ _ThemeMixinClass_applyTheme = async function _ThemeMixinClass_applyTheme() {
         get baseStaticUrl() {
-            return this.getAttribute('base-static-url');
+            return this.getAttribute('base-static-url') || '';
         }
@@ -836,0 +860,0 @@ };

package.json

 {
   "name": "@descope/sdk-mixins",
-  "version": "0.2.44",
+  "version": "0.3.0",
   "author": "Descope Team <[e-mail]>",
@@ -85,4 +85,4 @@ "homepage": "https://github.com/descope/sdk-mixins",
     "tslib": "2.6.3",
-    "@descope/sdk-component-drivers": "0.2.40",
-    "@descope/sdk-helpers": "0.1.59"
+    "@descope/sdk-helpers": "0.1.60",
+    "@descope/sdk-component-drivers": "0.2.41"
   },
@@ -89,0 +89,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

660775

increased by1.33%

Lines of code

8317

increased by0.67%

Dependency changes

• + Added@descope/sdk-component-drivers@0.2.41(transitive)

• + Added@descope/sdk-helpers@0.1.60(transitive)

• - Removed@descope/sdk-component-drivers@0.2.40(transitive)

• - Removed@descope/sdk-helpers@0.1.59(transitive)

• Updated@descope/sdk-component-drivers@0.2.41

• Updated@descope/sdk-helpers@0.1.60