slicejs-web-framework 2.4.7 → 3.0.0

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,53 @@ 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;
+   }
+
+   /**
+    * Validate Bundling V2 module contract.
+    * Requires named exports: SLICE_BUNDLE_META and registerAll.
+    * @param {any} bundleModule
+    * @param {string} [bundleName]
+    * @returns {{metadata: object, registerAll: Function}}
+    */
+   async validateBundleModule(bundleModule, bundleName = 'unknown') {
+      const metadata = bundleModule?.SLICE_BUNDLE_META;
+      const registerAll = bundleModule?.registerAll;
+
+      if (!metadata || typeof metadata !== 'object' || typeof registerAll !== 'function') {
+         throw new Error(
+            `Bundle "${bundleName}" missing Bundling V2 exports contract: requires SLICE_BUNDLE_META and registerAll`
+         );
+      }
+
+      return { metadata, registerAll };
+   }
+
    /**
     * 📦 Loads a bundle by name or category
     */
@@ -47,45 +92,46 @@ export default class Controller {
          return; // Already loaded
       }
 
-       try {
-         let bundleInfo = null;
+       let bundleInfo = null;
 
-         if (bundleName === 'critical') {
-           bundleInfo = this.bundleConfig?.bundles?.critical;
-         } else {
-           bundleInfo = this.bundleConfig?.bundles?.routes?.[bundleName];
-         }
+       if (bundleName === 'critical') {
+         bundleInfo = this.bundleConfig?.bundles?.critical;
+       } else {
+         bundleInfo = this.bundleConfig?.bundles?.routes?.[bundleName];
+       }
 
-         if (!bundleInfo && this.bundleConfig?.bundles?.routes && bundleName !== 'critical') {
-           const normalizedName = bundleName?.toLowerCase();
-           const matchedKey = Object.keys(this.bundleConfig.bundles.routes).find(
-              (key) => key.toLowerCase() === normalizedName
-           );
-           if (matchedKey) {
-              bundleInfo = this.bundleConfig.bundles.routes[matchedKey];
-           }
+       if (!bundleInfo && this.bundleConfig?.bundles?.routes && bundleName !== 'critical') {
+         const normalizedName = bundleName?.toLowerCase();
+         const matchedKey = Object.keys(this.bundleConfig.bundles.routes).find(
+            (key) => key.toLowerCase() === normalizedName
+         );
+         if (matchedKey) {
+            bundleInfo = this.bundleConfig.bundles.routes[matchedKey];
          }
+       }
 
-         if (!bundleInfo) {
-            console.warn(`Bundle ${bundleName} not found in configuration`);
-            return;
-         }
+       if (!bundleInfo) {
+          console.warn(`Bundle ${bundleName} not found in configuration`);
+          return;
+        }
 
-         const bundlePath = `/bundles/${bundleInfo.file}`;
+        const bundlePath = `/bundles/${bundleInfo.file}`;
 
-         // Dynamic import of the bundle
-         const bundleModule = await import(bundlePath);
+        const bundleModule = await this.importBundleOnce(bundlePath);
+        const { metadata, registerAll } = await this.validateBundleModule(bundleModule, bundleName);
 
-         // Manually register components from the imported bundle
-          if (bundleModule.SLICE_BUNDLE) {
-             await this.registerBundle(bundleModule.SLICE_BUNDLE);
-          }
+        await registerAll(this, slice.stylesManager);
 
-         this.loadedBundles.add(bundleName);
-      } catch (error) {
-         console.warn(`Failed to load bundle ${bundleName}:`, error);
+        this.loadedBundles.add(bundleName);
+        const loadedBundleKey = metadata.bundleKey;
+        if (loadedBundleKey && loadedBundleKey !== bundleName) {
+           this.loadedBundles.add(loadedBundleKey);
+        }
+
+        if (metadata.type === 'critical' || bundleName === 'critical') {
+           this.criticalBundleLoaded = true;
+        }
       }
-    }
 
    /**
     * 📦 Registers a bundle's components (called automatically by bundle files)

package/Slice/Components/Structural/Router/Router.js

@@ -419,34 +419,35 @@ export default class Router {
          slice.loading.start();
       }
 
-      if (existingComponent) {
-         targetElement.innerHTML = '';
-         if (existingComponent.update) {
-            existingComponent.props = { ...existingComponent.props, ...params };
-            await existingComponent.update();
-         }
-         targetElement.appendChild(existingComponent);
-         await this.renderRoutesInComponent(existingComponent);
-      } else {
-         const component = await slice.build(componentName, {
-            params,
-            sliceId: sliceId,
-         });
-
-         targetElement.innerHTML = '';
-         targetElement.appendChild(component);
+      try {
+         if (existingComponent) {
+            targetElement.innerHTML = '';
+            if (existingComponent.update) {
+               existingComponent.props = { ...existingComponent.props, ...params };
+               await existingComponent.update();
+            }
+            targetElement.appendChild(existingComponent);
+            await this.renderRoutesInComponent(existingComponent);
+         } else {
+            const component = await slice.build(componentName, {
+               params,
+               sliceId: sliceId,
+            });
 
-         await this.renderRoutesInComponent(component);
-      }
+            targetElement.innerHTML = '';
+            targetElement.appendChild(component);
 
-      // Invalidar caché después de cambios importantes en el DOM
-      this.invalidateCache();
+            await this.renderRoutesInComponent(component);
+         }
 
-      if (slice.loading) {
-         slice.loading.stop();
+         // Invalidar caché después de cambios importantes en el DOM
+         this.invalidateCache();
+         slice.router.activeRoute = route;
+      } finally {
+         if (slice.loading) {
+            slice.loading.stop();
+         }
       }
-
-      slice.router.activeRoute = route;
    }
 
    /**

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,28 +269,17 @@ 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';
      }
 
-     // 4. Load framework classes.
+      // 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
      // imports so the live /Slice/ source is served directly without bundles.
@@ -326,53 +315,60 @@ async function init() {
     window.slice = new Slice(sliceConfig, frameworkClasses);
     window.slice._mode = resolvedMode;
 
+     const createBundlingInitError = (step, error) => {
+        const detail = error instanceof Error ? error.message : String(error);
+        return new Error(`Bundling V2 initialization failed (${step}): ${detail}`, { cause: error });
+     };
+
      // Initialize bundles before building components.
      // Only in production — dev mode loads each component individually from source.
      // bundleConfigJson was already fetched above (step 2); reuse it.
-     try {
-        if (resolvedMode === 'production' && bundleConfigJson) {
-           window.slice.controller.bundleConfig = bundleConfigJson;
-        }
+     if (resolvedMode === 'production' && bundleConfigJson) {
+        window.slice.controller.bundleConfig = bundleConfigJson;
+     }
 
-       if (window.slice.controller.bundleConfig) {
-          const config = window.slice.controller.bundleConfig;
-
-           const criticalFile = config?.bundles?.critical?.file;
-            if (criticalFile) {
-               // 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 = [];
-              }
+     if (resolvedMode === 'production' && window.slice.controller.bundleConfig) {
+        const config = window.slice.controller.bundleConfig;
+        const criticalFile = config?.bundles?.critical?.file;
+        if (criticalFile) {
+           try {
+              await window.slice.controller.loadBundle('critical');
+           } catch (error) {
+              throw createBundlingInitError(`critical bundle "${criticalFile}"`, error);
            }
+        }
 
-          const routeBundles = config?.routeBundles || {};
-          const initialPath = window.location.pathname || '/';
-          const bundlesForRoute = routeBundles[initialPath] || [];
-
-          const loadRouteBundles = async () => {
-             for (const bundleName of bundlesForRoute) {
-                if (bundleName === 'critical') continue;
-                const bundleInfo = config?.bundles?.routes?.[bundleName];
-                if (!bundleInfo?.file) continue;
-                // Bundle auto-registers itself on import.
-                await import(`/bundles/${bundleInfo.file}`);
-             }
-          };
-
-          if (typeof requestIdleCallback === 'function') {
-             requestIdleCallback(() => loadRouteBundles());
-          } else {
-             setTimeout(() => loadRouteBundles(), 0);
-          }
-       }
-    } catch (error) {
-       console.log('📄 Using individual component loading (no bundles found)');
-    }
+        const routeBundles = config?.routeBundles || {};
+        const initialPath = window.location.pathname || '/';
+        const bundlesForRoute = routeBundles[initialPath] || [];
+
+        const loadRouteBundles = async () => {
+           for (const bundleName of bundlesForRoute) {
+              if (bundleName === 'critical') continue;
+              const bundleInfo = config?.bundles?.routes?.[bundleName];
+              if (!bundleInfo?.file) continue;
+              await window.slice.controller.loadBundle(bundleName);
+           }
+        };
+
+        const preloadRouteBundles = () => {
+           loadRouteBundles().catch((error) => {
+              const bundlingError = createBundlingInitError(
+                 `idle route preload "${initialPath}"`,
+                 error
+              );
+              queueMicrotask(() => {
+                 throw bundlingError;
+              });
+           });
+        };
+
+        if (typeof requestIdleCallback === 'function') {
+           requestIdleCallback(() => preloadRouteBundles());
+        } else {
+           setTimeout(() => preloadRouteBundles(), 0);
+        }
+     }
 
    slice.paths.structuralComponentFolderPath = '/Slice/Components/Structural';
 
@@ -466,7 +462,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 +493,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/Slice/tests/bundle-v2-runtime-contract.test.js

@@ -0,0 +1,268 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { register } from 'node:module';
+import { pathToFileURL } from 'node:url';
+
+test('validateBundleModule rejects module missing Bundling V2 exports contract', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-controller-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const controller = new Controller();
+   const originalWindow = globalThis.window;
+
+   try {
+      globalThis.window = {
+         __slicePendingRegistrations: [],
+      };
+
+      assert.equal(
+         typeof controller.validateBundleModule,
+         'function',
+         'Controller must expose validateBundleModule for Bundling V2 runtime contract checks'
+      );
+
+      if (typeof controller.validateBundleModule === 'function') {
+         await assert.rejects(
+            () => Promise.resolve(controller.validateBundleModule({ default: {} }, 'critical.js')),
+            /missing bundling v2 exports contract/i
+         );
+      }
+   } finally {
+      globalThis.window = originalWindow;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('loadBundle marks requested bundle key and metadata bundleKey as loaded', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-controller-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const controller = new Controller();
+   const originalSlice = globalThis.slice;
+
+   controller.bundleConfig = {
+      bundles: {
+         routes: {
+            dashboard: {
+               file: 'dashboard.js',
+            },
+         },
+      },
+   };
+
+   controller.importBundleOnce = async () => ({});
+   controller.validateBundleModule = async () => ({
+      metadata: {
+         bundleKey: 'routes.dashboard.v2',
+         type: 'route',
+      },
+      registerAll: async () => {},
+   });
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+
+      await controller.loadBundle('dashboard');
+
+      assert.equal(controller.loadedBundles.has('dashboard'), true);
+      assert.equal(controller.loadedBundles.has('routes.dashboard.v2'), true);
+      assert.equal(controller.criticalBundleLoaded, false);
+   } finally {
+      globalThis.slice = originalSlice;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('Slice init fails fast with contextual error on invalid Bundling V2 contract path', async () => {
+   const tempDir = await mkdtemp(path.join(tmpdir(), 'slice-init-loader-'));
+   const loaderPath = path.join(tempDir, 'components-alias-loader.mjs');
+   await writeFile(
+      loaderPath,
+      `export async function resolve(specifier, context, nextResolve) {
+   if (specifier === '/Components/components.js') {
+      return {
+         shortCircuit: true,
+         url: 'data:text/javascript,export default {};',
+      };
+   }
+   return nextResolve(specifier, context);
+}
+`,
+      'utf8'
+   );
+   register(pathToFileURL(loaderPath).href);
+
+   const originalWindow = globalThis.window;
+   const originalDocument = globalThis.document;
+   const originalFetch = globalThis.fetch;
+   const originalAlert = globalThis.alert;
+   const originalSliceDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'slice');
+   const originalConsoleLog = console.log;
+   const originalConsoleWarn = console.warn;
+   const controllerModuleUrl = new URL('../Components/Structural/Controller/Controller.js', import.meta.url).href;
+   const { default: Controller } = await import(controllerModuleUrl);
+   const originalLoadBundle = Controller.prototype.loadBundle;
+
+   const loggedMessages = [];
+
+   try {
+      globalThis.window = {
+         location: {
+            pathname: '/dashboard',
+            origin: 'http://localhost',
+         },
+      };
+
+      Object.defineProperty(globalThis, 'slice', {
+         configurable: true,
+         get() {
+            return globalThis.window?.slice;
+         },
+         set(value) {
+            if (!globalThis.window) {
+               globalThis.window = {};
+            }
+            globalThis.window.slice = value;
+         },
+      });
+
+      Controller.prototype.loadBundle = async () => {
+         throw new Error(
+            'Bundle "critical" missing Bundling V2 exports contract: requires SLICE_BUNDLE_META and registerAll'
+         );
+      };
+
+      globalThis.document = {
+         head: {
+            appendChild() {},
+         },
+         body: {
+            appendChild() {},
+         },
+         createElement() {
+            return {
+               appendChild() {},
+               innerHTML: '',
+               id: '',
+            };
+         },
+         createTextNode() {
+            return {};
+         },
+         addEventListener() {},
+      };
+
+      globalThis.alert = () => {};
+      console.log = (...args) => {
+         loggedMessages.push(args.map(String).join(' '));
+      };
+      console.warn = () => {};
+
+      globalThis.fetch = async (url) => {
+         if (url === '/sliceConfig.json') {
+            return {
+               ok: true,
+               json: async () => ({
+                  paths: {
+                     routesFile: '/routes.js',
+                     components: {},
+                  },
+                  themeManager: { enabled: false },
+                  stylesManager: { requestedStyles: [] },
+                  logger: { enabled: false },
+                  debugger: { enabled: false },
+                  loading: { enabled: false },
+                  events: { enabled: false },
+                  context: { enabled: false },
+               }),
+            };
+         }
+
+         if (url === '/slice-env.json') {
+            return {
+               ok: true,
+               json: async () => ({ mode: 'production' }),
+            };
+         }
+
+         if (url === '/bundles/bundle.config.json') {
+            return {
+               ok: true,
+               json: async () => ({
+                  production: true,
+                  bundles: {
+                     critical: { file: 'critical.js' },
+                     routes: {},
+                  },
+                  routeBundles: {},
+               }),
+            };
+         }
+
+         throw new Error(`Unexpected fetch URL: ${url}`);
+      };
+
+      const sliceModuleUrl = new URL(`../Slice.js?fail-fast-test=${Date.now()}`, import.meta.url).href;
+
+      await assert.rejects(() => import(sliceModuleUrl), /Bundling V2 initialization failed/i);
+
+      assert.equal(
+         loggedMessages.some((message) => message.includes('Using individual component loading (no bundles found)')),
+         false,
+         'init must not log fallback bundle message on Bundling V2 contract failure'
+      );
+   } finally {
+      Controller.prototype.loadBundle = originalLoadBundle;
+      globalThis.window = originalWindow;
+      globalThis.document = originalDocument;
+      globalThis.fetch = originalFetch;
+      globalThis.alert = originalAlert;
+      if (originalSliceDescriptor) {
+         Object.defineProperty(globalThis, 'slice', originalSliceDescriptor);
+      } else {
+         delete globalThis.slice;
+      }
+      console.log = originalConsoleLog;
+      console.warn = originalConsoleWarn;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});