slicejs-web-framework 2.4.6 → 2.4.8

package/Slice/Components/Structural/Controller/Controller.js

@@ -16,6 +16,7 @@ export default class Controller {
       this.loadedBundles = new Set();
       this.bundleConfig = null;
       this.criticalBundleLoaded = false;
+      this.bundleImportPromises = new Map();
 
       this.idCounter = 0;
    }
@@ -36,9 +37,33 @@ export default class Controller {
           // No bundles available, will use individual component loading
           this.bundleConfig = null;
           this.criticalBundleLoaded = false;
-       }
+      }
      }
 
+   /**
+    * Import a bundle URL once per page session.
+    * Reuses the same Promise for concurrent callers.
+    * @param {string} bundlePath
+    * @returns {Promise<any>}
+    */
+   importBundleOnce(bundlePath) {
+      if (!bundlePath) {
+         return Promise.reject(new Error('Bundle path is required'));
+      }
+
+      if (this.bundleImportPromises.has(bundlePath)) {
+         return this.bundleImportPromises.get(bundlePath);
+      }
+
+      const importPromise = import(bundlePath).catch((error) => {
+         this.bundleImportPromises.delete(bundlePath);
+         throw error;
+      });
+
+      this.bundleImportPromises.set(bundlePath, importPromise);
+      return importPromise;
+   }
+
    /**
     * 📦 Loads a bundle by name or category
     */
@@ -73,19 +98,12 @@ export default class Controller {
 
          const bundlePath = `/bundles/${bundleInfo.file}`;
 
-         const integrityOk = await this.verifyBundleIntegrity(bundlePath, bundleInfo.integrity);
-         if (!integrityOk) {
-            console.warn(`❌ Integrity check failed for bundle ${bundleName}`);
-            return;
-         }
-
-         // Dynamic import of the bundle
-         const bundleModule = await import(bundlePath);
+         await this.importBundleOnce(bundlePath);
 
-         // Manually register components from the imported bundle
-          if (bundleModule.SLICE_BUNDLE) {
-             await this.registerBundle(bundleModule.SLICE_BUNDLE);
-          }
+         if (window.__slicePendingRegistrations?.length) {
+            await Promise.all(window.__slicePendingRegistrations);
+            window.__slicePendingRegistrations = [];
+         }
 
          this.loadedBundles.add(bundleName);
       } catch (error) {
@@ -93,47 +111,6 @@ export default class Controller {
       }
     }
 
-    /**
-     * Verifies bundle integrity by comparing sha256 hash.
-     * @param {string} bundlePath
-     * @param {string|null} expectedIntegrity
-     * @returns {Promise<boolean>}
-     */
-    async verifyBundleIntegrity(bundlePath, expectedIntegrity) {
-       if (!expectedIntegrity) {
-          return true;
-       }
-
-       try {
-          const response = await fetch(bundlePath, { cache: 'no-store' });
-          if (!response.ok) {
-             console.warn(`Failed to fetch bundle for integrity check: ${response.status}`);
-             return false;
-          }
-
-          const content = await response.text();
-          const actualIntegrity = await this.hashSha256(content);
-          return actualIntegrity === expectedIntegrity;
-       } catch (error) {
-          console.warn(`Integrity check error for ${bundlePath}:`, error);
-          return false;
-       }
-    }
-
-    /**
-     * Calculates sha256 digest for a string.
-     * @param {string} content
-     * @returns {Promise<string>}
-     */
-    async hashSha256(content) {
-       const encoder = new TextEncoder();
-       const data = encoder.encode(content);
-       const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-       const hashArray = Array.from(new Uint8Array(hashBuffer));
-       const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-       return `sha256:${hashHex}`;
-    }
-
    /**
     * 📦 Registers a bundle's components (called automatically by bundle files)
     */

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

@@ -10,12 +10,22 @@ export default class StylesManager {
    /**
     * Load global styles and initialize ThemeManager if enabled.
     * @returns {Promise<void>}
-    */
+   */
    async init() {
-      for (let i = 0; i < slice.stylesConfig.requestedStyles.length; i++) {
-         const styles = await slice.controller.fetchText(slice.stylesConfig.requestedStyles[i], 'styles');
-         this.componentStyles.innerText += styles;
-         slice.logger.logInfo('StylesManager', `${slice.stylesConfig.requestedStyles[i]} styles loaded`);
+      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) {

package/Slice/Slice.js

@@ -269,27 +269,20 @@ async function init() {
     const envMode = envResult?.mode ?? null;
     const bundleConfigJson = configResult;
 
-    // 3. Determine canonical mode: env endpoint takes precedence, then bundle config
-    let resolvedMode;
-    if (envMode) {
-      resolvedMode = envMode;
-    } else if (bundleConfigJson?.production) {
-      resolvedMode = 'production';
-    } else {
-      resolvedMode = 'development';
-    }
-
-     // Pre-fetch critical bundle to warm the browser HTTP cache while the framework
-     // bundle is downloading and executing. fetch() downloads bytes without evaluating
-     // the module, so the auto-registration block runs safely later when window.slice
-     // already exists. Errors are silently ignored — import() will retry if needed.
-     const criticalBundleUrl = (resolvedMode === 'production' && bundleConfigJson?.bundles?.critical?.file)
-       ? `/bundles/${bundleConfigJson.bundles.critical.file}`
-       : null;
-     if (criticalBundleUrl) {
-       fetch(criticalBundleUrl).catch(() => {});
+     // 3. Determine canonical mode: env endpoint takes precedence, then bundle config
+     let resolvedMode;
+     if (envMode) {
+       resolvedMode = envMode;
+     } else if (bundleConfigJson?.production) {
+       resolvedMode = 'production';
+     } else {
+       resolvedMode = 'development';
      }
 
+      const criticalBundleUrl = (resolvedMode === 'production' && bundleConfigJson?.bundles?.critical?.file)
+        ? `/bundles/${bundleConfigJson.bundles.critical.file}`
+        : null;
+
      // 4. Load framework classes.
      // In production the bundler generates slice-bundle.framework.js which
      // sets window.SLICE_FRAMEWORK_CLASSES. In dev mode always use individual
@@ -337,18 +330,17 @@ async function init() {
        if (window.slice.controller.bundleConfig) {
           const config = window.slice.controller.bundleConfig;
 
-           const criticalFile = config?.bundles?.critical?.file;
-            if (criticalFile) {
+            const criticalFile = config?.bundles?.critical?.file;
+             if (criticalFile && criticalBundleUrl) {
                // Bundle auto-registers itself on import via its own registration block.
                // The block pushes its registerBundle() Promise to window.__slicePendingRegistrations
                // so we can await full chunk processing before continuing to build('Loading').
-               // criticalBundleUrl was pre-fetched above — import() reuses the cached bytes.
-               await import(criticalBundleUrl);
-              if (window.__slicePendingRegistrations?.length) {
-                 await Promise.all(window.__slicePendingRegistrations);
-                 window.__slicePendingRegistrations = [];
-              }
-           }
+               await window.slice.controller.importBundleOnce(criticalBundleUrl);
+               if (window.__slicePendingRegistrations?.length) {
+                  await Promise.all(window.__slicePendingRegistrations);
+                  window.__slicePendingRegistrations = [];
+               }
+            }
 
           const routeBundles = config?.routeBundles || {};
           const initialPath = window.location.pathname || '/';
@@ -360,9 +352,9 @@ async function init() {
                 const bundleInfo = config?.bundles?.routes?.[bundleName];
                 if (!bundleInfo?.file) continue;
                 // Bundle auto-registers itself on import.
-                await import(`/bundles/${bundleInfo.file}`);
+                await window.slice.controller.importBundleOnce(`/bundles/${bundleInfo.file}`);
              }
-          };
+           };
 
           if (typeof requestIdleCallback === 'function') {
              requestIdleCallback(() => loadRouteBundles());
@@ -466,7 +458,8 @@ async function init() {
       }
     }
 
-   await window.slice.stylesManager.init();
+   const stylesInitPromise = window.slice.stylesManager.init();
+   const routesModulePromise = import(slice.paths.routesFile);
 
    if (sliceConfig.events?.ui?.shortcut || sliceConfig.context?.ui?.shortcut) {
       const normalize = (value) => (typeof value === 'string' ? value.toLowerCase() : '');
@@ -496,7 +489,7 @@ async function init() {
       });
    }
 
-   const routesModule = await import(slice.paths.routesFile);
+   const [, routesModule] = await Promise.all([stylesInitPromise, routesModulePromise]);
    const routes = routesModule.default;
     const RouterModule = window.slice.frameworkClasses?.Router
        || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Router/Router.js`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.4.6",
+  "version": "2.4.8",
   "description": "",
   "engines": {
     "node": ">=20"