slicejs-web-framework 3.3.6 → 3.3.8

package/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -1,78 +1,82 @@
-
-export default class StylesManager {
-   constructor() {
-      this.componentStyles = document.createElement('style');
-      this.componentStyles.id = 'slice-component-styles';
-      document.head.appendChild(this.componentStyles);
-
-   }
-
-   /**
-    * Load global styles and initialize ThemeManager if enabled.
-    * @returns {Promise<void>}
-   */
-   async init() {
-      const requestedStyles = Array.isArray(slice.stylesConfig.requestedStyles)
-         ? slice.stylesConfig.requestedStyles
-         : [];
-
-      const styleResults = await Promise.all(
-         requestedStyles.map(async (styleName) => {
-            const styles = await slice.controller.fetchText(styleName, 'styles');
-            return { styleName, styles };
-         })
-      );
-
-      for (const { styleName, styles } of styleResults) {
-         this.appendComponentStyles(styles);
-         slice.logger.logInfo('StylesManager', `${styleName} styles loaded`);
-      }
-
-       if (slice.themeConfig.enabled) {
-          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager
-             || await slice.getClass(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
-          if (!ThemeManagerClass) {
-             throw new Error('ThemeManager not available');
-          }
-
-          this.themeManager = new ThemeManagerClass();
-         let theme;
-
-         if (slice.themeConfig.saveThemeLocally) {
-            theme = localStorage.getItem('sliceTheme');
-         }
-
-         if (!theme) {
-            theme = slice.themeConfig.defaultTheme;
-         }
-
-         if (slice.themeConfig.useBrowserTheme) {
-            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
-            theme = browserTheme;
-         }
-
-         await this.themeManager.applyTheme(theme);
-      }
-   }
-
-   //add a method that will add css as text to the componentStyles element
-   /**
-    * Append raw CSS to the global component style tag.
-    * @param {string} cssText
-    * @returns {void}
-    */
-   appendComponentStyles(cssText) {
-      this.componentStyles.appendChild(document.createTextNode(cssText));
-   }
-
-   /**
-    * Register CSS for a component.
-    * @param {string} componentName
-    * @param {string} cssText
-    * @returns {void}
-    */
-   registerComponentStyles(componentName, cssText) {
-      slice.controller.requestedStyles.add(componentName);
-      this.appendComponentStyles(cssText);
-   }
-}
+
+export default class StylesManager {
+   constructor() {
+      this.componentStyles = document.createElement('style');
+      this.componentStyles.id = 'slice-component-styles';
+      document.head.appendChild(this.componentStyles);
+
+   }
+
+   /**
+    * Load global styles and initialize ThemeManager if enabled.
+    * @returns {Promise<void>}
+   */
+   async init() {
+      const requestedStyles = Array.isArray(slice.stylesConfig.requestedStyles)
+         ? slice.stylesConfig.requestedStyles
+         : [];
+
+      const styleResults = await Promise.all(
+         requestedStyles.map(async (styleName) => {
+            const styles = await slice.controller.fetchText(styleName, 'styles');
+            return { styleName, styles };
+         })
+      );
+
+      for (const { styleName, styles } of styleResults) {
+         this.appendComponentStyles(styles);
+         slice.logger.logInfo('StylesManager', `${styleName} styles loaded`);
+      }
+
+       if (slice.themeConfig.enabled) {
+          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager
+             || await slice.getClass(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
+          if (!ThemeManagerClass) {
+             throw new Error('ThemeManager not available');
+          }
+
+          this.themeManager = new ThemeManagerClass();
+         let theme;
+
+         if (slice.themeConfig.saveThemeLocally) {
+            theme = localStorage.getItem('sliceTheme');
+         }
+
+         if (!theme) {
+            theme = slice.themeConfig.defaultTheme;
+         }
+
+         if (slice.themeConfig.useBrowserTheme) {
+            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
+            theme = browserTheme;
+         }
+
+         await this.themeManager.applyTheme(theme);
+      }
+   }
+
+   //add a method that will add css as text to the componentStyles element
+   /**
+    * Append raw CSS to the global component style tag.
+    * @param {string} cssText
+    * @returns {void}
+    */
+   appendComponentStyles(cssText) {
+      this.componentStyles.appendChild(document.createTextNode(cssText));
+   }
+
+   /**
+    * Register CSS for a component.
+    * @param {string} componentName
+    * @param {string} cssText
+    * @returns {void}
+    */
+   registerComponentStyles(componentName, cssText) {
+      // Idempotent: a component's CSS is injected at most once, no matter how many
+      // times it is built or how a caller reaches here (Controller guards upstream,
+      // but the debuggers and the resource loader do not).
+      if (slice.controller.requestedStyles.has(componentName)) return;
+      slice.controller.requestedStyles.add(componentName);
+      this.appendComponentStyles(cssText);
+   }
+}

package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -1,84 +1,106 @@
-/**
- * Manages theme CSS loading and persistence.
- */
-export default class ThemeManager {
-   constructor() {
-      this.themeStyles = new Map();
-      this.currentTheme = null;
-      this.themeStyle = document.createElement('style');
-      document.head.appendChild(this.themeStyle);
-   }
-
-   /**
-    * Apply a theme by name.
-    * @param {string} themeName
-    * @returns {Promise<void>}
-    */
-   async applyTheme(themeName) {
-      if (!themeName) {
-         slice.logger.logError('ThemeManager', 'Invalid theme name');
-         return;
-      }
-
-      if (!this.themeStyles.has(themeName)) {
-         await this.loadThemeCSS(themeName);
-      } else {
-         this.setThemeStyle(themeName);
-         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
-      }
-   }
-
-   /**
-    * Load theme CSS and cache it.
-    * @param {string} themeName
-    * @returns {Promise<void>}
-    */
-   async loadThemeCSS(themeName) {
-      let themeContent =
-         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
-
-      if (!themeContent) {
-         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
-         return;
-      }
-
-      this.themeStyles.set(themeName, themeContent);
-      this.setThemeStyle(themeName);
-      this.saveThemeLocally(themeName, themeContent);
-   }
-
-   /**
-    * Persist a theme in localStorage when enabled.
-    * @param {string} themeName
-    * @param {string} themeContent
-    * @returns {void}
-    */
-   saveThemeLocally(themeName, themeContent) {
-      if (slice.themeConfig.saveThemeLocally) {
-         localStorage.setItem('sliceTheme', themeName);
-         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
-         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
-      }
-   }
-
-   /**
-    * Clear currently applied theme styles.
-    * @returns {void}
-    */
-   removeCurrentTheme() {
-      if (this.currentTheme) {
-         this.themeStyle.textContent = '';
-      }
-   }
-
-   /**
-    * Set theme style text and mark current theme.
-    * @param {string} themeName
-    * @returns {void}
-    */
-   setThemeStyle(themeName) {
-      this.themeStyle.textContent = this.themeStyles.get(themeName);
-      this.currentTheme = themeName;
-      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
-   }
-}
+/**
+ * Manages theme CSS loading and persistence.
+ */
+export default class ThemeManager {
+   constructor() {
+      this.themeStyles = new Map();
+      this.currentTheme = null;
+      // In-flight loads, keyed by theme name, so concurrent applyTheme() calls for
+      // the same theme share one fetch instead of racing and double-fetching.
+      this._loadingThemes = new Map();
+      this.themeStyle = document.createElement('style');
+      document.head.appendChild(this.themeStyle);
+   }
+
+   /**
+    * Apply a theme by name.
+    * @param {string} themeName
+    * @returns {Promise<void>}
+    */
+   async applyTheme(themeName) {
+      if (!themeName) {
+         slice.logger.logError('ThemeManager', 'Invalid theme name');
+         return;
+      }
+
+      // Already the active theme — nothing to re-inject.
+      if (themeName === this.currentTheme) {
+         return;
+      }
+
+      if (this.themeStyles.has(themeName)) {
+         this.setThemeStyle(themeName);
+         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
+         return;
+      }
+
+      // Coalesce concurrent loads of the same theme into a single fetch.
+      if (!this._loadingThemes.has(themeName)) {
+         this._loadingThemes.set(
+            themeName,
+            this.loadThemeCSS(themeName).finally(() => this._loadingThemes.delete(themeName))
+         );
+      }
+      await this._loadingThemes.get(themeName);
+   }
+
+   /**
+    * Load theme CSS and cache it.
+    * @param {string} themeName
+    * @returns {Promise<void>}
+    */
+   async loadThemeCSS(themeName) {
+      let themeContent =
+         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
+
+      if (!themeContent) {
+         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
+         return;
+      }
+
+      this.themeStyles.set(themeName, themeContent);
+      this.setThemeStyle(themeName);
+      this.saveThemeLocally(themeName, themeContent);
+   }
+
+   /**
+    * Persist a theme in localStorage when enabled.
+    * @param {string} themeName
+    * @param {string} themeContent
+    * @returns {void}
+    */
+   saveThemeLocally(themeName, themeContent) {
+      if (slice.themeConfig.saveThemeLocally) {
+         localStorage.setItem('sliceTheme', themeName);
+         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
+         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
+      }
+   }
+
+   /**
+    * Clear currently applied theme styles.
+    * @returns {void}
+    */
+   removeCurrentTheme() {
+      if (this.currentTheme) {
+         this.themeStyle.textContent = '';
+      }
+   }
+
+   /**
+    * Set theme style text and mark current theme.
+    * @param {string} themeName
+    * @returns {void}
+    */
+   setThemeStyle(themeName) {
+      this.themeStyle.textContent = this.themeStyles.get(themeName);
+      this.currentTheme = themeName;
+      // Expose the active theme on the root element so CSS can react per theme
+      // without any JS — e.g. [data-slice-theme="Dark"] .logo { filter: ... }.
+      // Non-breaking: apps opt in only if they reference the attribute.
+      if (typeof document !== 'undefined' && document.documentElement) {
+         document.documentElement.setAttribute('data-slice-theme', themeName);
+      }
+      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
+   }
+}