slicejs-web-framework 3.1.4 → 3.2.0

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

@@ -17,6 +17,7 @@ export default class Controller {
       this.bundleConfig = null;
       this.criticalBundleLoaded = false;
       this.bundleImportPromises = new Map();
+      this.bundleLoadPromises = new Map();
 
       this.idCounter = 0;
    }
@@ -88,51 +89,204 @@ export default class Controller {
     * 📦 Loads a bundle by name or category
     */
    async loadBundle(bundleName) {
-      if (this.loadedBundles.has(bundleName)) {
+      const resolvedBundleName = this.resolveBundleName(bundleName);
+      if (this.loadedBundles.has(resolvedBundleName)) {
          return; // Already loaded
+       }
+
+       return this.loadBundleWithDependencies(resolvedBundleName, new Set());
       }
 
-       let bundleInfo = null;
+   async loadBundleWithDependencies(bundleName, loadingStack = new Set()) {
+      const resolvedBundleName = this.resolveBundleName(bundleName);
 
-       if (bundleName === 'critical') {
-         bundleInfo = this.bundleConfig?.bundles?.critical;
-       } else {
-         bundleInfo = this.bundleConfig?.bundles?.routes?.[bundleName];
+      if (this.loadedBundles.has(resolvedBundleName)) {
+         return;
        }
 
-       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 (loadingStack.has(resolvedBundleName)) {
+         throw new Error(`Circular bundle dependency detected: ${Array.from(loadingStack).join(' -> ')} -> ${resolvedBundleName}`);
+       }
+
+      if (this.bundleLoadPromises.has(resolvedBundleName)) {
+         return this.bundleLoadPromises.get(resolvedBundleName);
+       }
+
+      const loadPromise = (async () => {
+         loadingStack.add(resolvedBundleName);
+         try {
+            const bundleInfo = this.getBundleInfo(resolvedBundleName);
+            if (!bundleInfo) {
+               console.warn(`Bundle ${resolvedBundleName} not found in configuration`);
+               return;
+             }
+
+            const dependencies = this.getBundleDependencies(bundleInfo);
+            for (const dependencyName of dependencies) {
+               await this.loadBundleWithDependencies(dependencyName, loadingStack);
+            }
+
+            const bundlePath = `/bundles/${bundleInfo.file}`;
+            const bundleModule = await this.importBundleOnce(bundlePath);
+            const { metadata, registerAll } = await this.validateBundleModule(bundleModule, resolvedBundleName);
+
+            const registerResult = await registerAll(this, slice.stylesManager);
+            this.registerVendorSharedDependencies(bundleModule, metadata, resolvedBundleName, registerResult);
+
+            this.loadedBundles.add(resolvedBundleName);
+            const loadedBundleKey = metadata.bundleKey;
+            if (loadedBundleKey && loadedBundleKey !== resolvedBundleName) {
+               this.loadedBundles.add(loadedBundleKey);
+             }
+
+            if (metadata.type === 'critical' || resolvedBundleName === 'critical') {
+               this.criticalBundleLoaded = true;
+             }
+         } finally {
+            loadingStack.delete(resolvedBundleName);
          }
+      })();
+
+      this.bundleLoadPromises.set(resolvedBundleName, loadPromise);
+      try {
+         return await loadPromise;
+      } finally {
+         this.bundleLoadPromises.delete(resolvedBundleName);
+      }
+   }
+
+   resolveBundleName(bundleName) {
+      if (typeof bundleName !== 'string' || bundleName.length === 0) {
+         return bundleName;
        }
 
-       if (!bundleInfo) {
-          console.warn(`Bundle ${bundleName} not found in configuration`);
-          return;
-        }
+       if (bundleName.toLowerCase() === 'critical') {
+          return 'critical';
+       }
 
-        const bundlePath = `/bundles/${bundleInfo.file}`;
+       if (this.isVendorSharedAlias(bundleName) && this.getVendorSharedBundleInfo()) {
+          return 'vendor-shared';
+       }
 
-        const bundleModule = await this.importBundleOnce(bundlePath);
-        const { metadata, registerAll } = await this.validateBundleModule(bundleModule, bundleName);
+      const routeBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.routes, bundleName);
+      if (routeBundleName) {
+         return routeBundleName;
+      }
 
-        await registerAll(this, slice.stylesManager);
+      const sharedBundleName = this.findBundleNameByAlias(this.bundleConfig?.bundles?.shared, bundleName);
+      if (sharedBundleName) {
+         return sharedBundleName;
+      }
 
-        this.loadedBundles.add(bundleName);
-        const loadedBundleKey = metadata.bundleKey;
-        if (loadedBundleKey && loadedBundleKey !== bundleName) {
-           this.loadedBundles.add(loadedBundleKey);
-        }
+      return bundleName;
+   }
 
-        if (metadata.type === 'critical' || bundleName === 'critical') {
-           this.criticalBundleLoaded = true;
-        }
+   findBundleNameByAlias(bundleRegistry, bundleName) {
+      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
+         return null;
+      }
+
+      if (bundleRegistry[bundleName]) {
+         return bundleName;
       }
 
+      const normalizedName = bundleName?.toLowerCase();
+      if (!normalizedName) {
+         return null;
+      }
+
+      return Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName) || null;
+   }
+
+   getBundleDependencies(bundleInfo) {
+      if (!bundleInfo || !Array.isArray(bundleInfo.dependencies)) {
+         return [];
+      }
+
+      return bundleInfo.dependencies.filter((dependency) => typeof dependency === 'string' && dependency.length > 0);
+   }
+
+   findBundleEntryByName(bundleRegistry, bundleName) {
+      if (!bundleRegistry || typeof bundleRegistry !== 'object') {
+         return null;
+      }
+
+      if (bundleRegistry[bundleName]) {
+         return bundleRegistry[bundleName];
+      }
+
+      const normalizedName = bundleName?.toLowerCase();
+      if (!normalizedName) {
+         return null;
+      }
+
+      const matchedKey = Object.keys(bundleRegistry).find((key) => key.toLowerCase() === normalizedName);
+      return matchedKey ? bundleRegistry[matchedKey] : null;
+   }
+
+   getBundleInfo(bundleName) {
+      if (bundleName === 'critical') {
+         return this.bundleConfig?.bundles?.critical || null;
+       }
+
+       if (this.isVendorSharedAlias(bundleName)) {
+          return this.getVendorSharedBundleInfo();
+       }
+
+      return (
+         this.findBundleEntryByName(this.bundleConfig?.bundles?.routes, bundleName)
+         || this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, bundleName)
+      );
+   }
+
+   getVendorSharedBundleInfo() {
+      if (this.bundleConfig?.bundles?.vendorShared && typeof this.bundleConfig.bundles.vendorShared === 'object') {
+         return this.bundleConfig.bundles.vendorShared;
+      }
+
+      return this.findBundleEntryByName(this.bundleConfig?.bundles?.shared, 'vendor-shared');
+   }
+
+   isVendorSharedAlias(bundleName) {
+      if (typeof bundleName !== 'string') {
+         return false;
+      }
+
+      const normalized = bundleName.toLowerCase();
+      return normalized === 'vendor-shared' || normalized === 'vendorshared';
+   }
+
+   registerVendorSharedDependencies(bundleModule, metadata, bundleName, registerResult) {
+      const isVendorShared = this.isVendorSharedBundleName(metadata?.bundleKey)
+         || this.isVendorSharedBundleName(bundleName)
+         || metadata?.registerVendorSharedDependencies === true;
+
+      if (!isVendorShared) {
+         return;
+       }
+
+       let sharedDeps = bundleModule?.SLICE_SHARED_DEPS;
+       if (!sharedDeps && registerResult && typeof registerResult === 'object') {
+          sharedDeps = registerResult.SLICE_SHARED_DEPS
+             || registerResult.SLICE_BUNDLE_DEPENDENCIES
+             || registerResult;
+       }
+
+       if (!sharedDeps || typeof sharedDeps !== 'object') {
+          return;
+       }
+
+      if (!window.__SLICE_SHARED_DEPS__ || typeof window.__SLICE_SHARED_DEPS__ !== 'object') {
+         window.__SLICE_SHARED_DEPS__ = {};
+      }
+
+      Object.assign(window.__SLICE_SHARED_DEPS__, sharedDeps);
+   }
+
+   isVendorSharedBundleName(bundleName) {
+      return typeof bundleName === 'string' && bundleName.toLowerCase() === 'vendor-shared';
+   }
+
    /**
     * 📦 Registers a bundle's components (called automatically by bundle files)
     */

package/Slice/Slice.js

@@ -364,6 +364,9 @@ async function init() {
 
      if (resolvedMode === 'production' && window.slice.controller.bundleConfig) {
         const config = window.slice.controller.bundleConfig;
+        if (!window.__SLICE_SHARED_DEPS__ || typeof window.__SLICE_SHARED_DEPS__ !== 'object') {
+           window.__SLICE_SHARED_DEPS__ = {};
+        }
         const criticalFile = config?.bundles?.critical?.file;
         if (criticalFile) {
            try {

package/Slice/tests/bundle-v2-runtime-contract.test.js

@@ -112,6 +112,406 @@ test('loadBundle marks requested bundle key and metadata bundleKey as loaded', a
    }
 });
 
+test('loadBundle resolves dependencies first and registers vendor-shared exports once', 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;
+   const originalWindow = globalThis.window;
+
+   controller.bundleConfig = {
+      bundles: {
+         shared: {
+            'vendor-shared': {
+               file: 'slice-bundle.vendor-shared.js',
+            },
+         },
+         routes: {
+            dashboard: {
+               file: 'slice-bundle.dashboard.js',
+               dependencies: ['vendor-shared'],
+            },
+         },
+      },
+   };
+
+   const importOrder = [];
+   const registerOrder = [];
+   const importsByPath = {
+      '/bundles/slice-bundle.vendor-shared.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'vendor-shared',
+            type: 'shared',
+         },
+         SLICE_SHARED_DEPS: {
+            'vendors/dompurify': {
+               sanitize: () => 'ok',
+            },
+         },
+         registerAll: async () => {
+            registerOrder.push('vendor-shared');
+         },
+      },
+      '/bundles/slice-bundle.dashboard.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'dashboard',
+            type: 'route',
+         },
+         registerAll: async () => {
+            registerOrder.push('dashboard');
+         },
+      },
+   };
+
+   controller.importBundleOnce = async (bundlePath) => {
+      importOrder.push(bundlePath);
+      return importsByPath[bundlePath];
+   };
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+      globalThis.window = {
+         __SLICE_SHARED_DEPS__: {},
+      };
+
+      await controller.loadBundle('dashboard');
+      await controller.loadBundle('dashboard');
+
+      assert.deepEqual(importOrder, ['/bundles/slice-bundle.vendor-shared.js', '/bundles/slice-bundle.dashboard.js']);
+      assert.deepEqual(registerOrder, ['vendor-shared', 'dashboard']);
+      assert.equal(typeof globalThis.window.__SLICE_SHARED_DEPS__['vendors/dompurify']?.sanitize, 'function');
+   } finally {
+      globalThis.slice = originalSlice;
+      globalThis.window = originalWindow;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('loadBundle resolves vendor-shared dependency from bundles.vendorShared config shape', 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;
+   const originalWindow = globalThis.window;
+
+   controller.bundleConfig = {
+      bundles: {
+         vendorShared: {
+            file: 'slice-bundle.vendor-shared.js',
+         },
+         routes: {
+            dashboard: {
+               file: 'slice-bundle.dashboard.js',
+               dependencies: ['vendor-shared'],
+            },
+         },
+      },
+   };
+
+   const importOrder = [];
+   const registerOrder = [];
+   const importsByPath = {
+      '/bundles/slice-bundle.vendor-shared.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'vendor-shared',
+            type: 'shared',
+         },
+         SLICE_SHARED_DEPS: {
+            'vendors/dompurify': {
+               sanitize: () => 'ok',
+            },
+         },
+         registerAll: async () => {
+            registerOrder.push('vendor-shared');
+         },
+      },
+      '/bundles/slice-bundle.dashboard.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'dashboard',
+            type: 'route',
+         },
+         registerAll: async () => {
+            registerOrder.push('dashboard');
+         },
+      },
+   };
+
+   controller.importBundleOnce = async (bundlePath) => {
+      importOrder.push(bundlePath);
+      return importsByPath[bundlePath];
+   };
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+      globalThis.window = {
+         __SLICE_SHARED_DEPS__: {},
+      };
+
+      await controller.loadBundle('dashboard');
+
+      assert.deepEqual(importOrder, ['/bundles/slice-bundle.vendor-shared.js', '/bundles/slice-bundle.dashboard.js']);
+      assert.deepEqual(registerOrder, ['vendor-shared', 'dashboard']);
+      assert.equal(typeof globalThis.window.__SLICE_SHARED_DEPS__['vendors/dompurify']?.sanitize, 'function');
+   } finally {
+      globalThis.slice = originalSlice;
+      globalThis.window = originalWindow;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('loadBundle registers vendor-shared dependencies from registerAll return when SLICE_SHARED_DEPS export is absent', 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;
+   const originalWindow = globalThis.window;
+
+   controller.bundleConfig = {
+      bundles: {
+         vendorShared: {
+            file: 'slice-bundle.vendor-shared.js',
+         },
+         routes: {
+            dashboard: {
+               file: 'slice-bundle.dashboard.js',
+               dependencies: ['vendor-shared'],
+            },
+         },
+      },
+   };
+
+   const importsByPath = {
+      '/bundles/slice-bundle.vendor-shared.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'vendor-shared',
+            type: 'shared',
+         },
+         registerAll: async () => ({
+            'vendors/dompurify': {
+               sanitize: () => 'ok',
+            },
+         }),
+      },
+      '/bundles/slice-bundle.dashboard.js': {
+         SLICE_BUNDLE_META: {
+            bundleKey: 'dashboard',
+            type: 'route',
+         },
+         registerAll: async () => {},
+      },
+   };
+
+   controller.importBundleOnce = async (bundlePath) => importsByPath[bundlePath];
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+      globalThis.window = {
+         __SLICE_SHARED_DEPS__: {},
+      };
+
+      await controller.loadBundle('dashboard');
+
+      assert.equal(typeof globalThis.window.__SLICE_SHARED_DEPS__['vendors/dompurify']?.sanitize, 'function');
+   } finally {
+      globalThis.slice = originalSlice;
+      globalThis.window = originalWindow;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('loadBundle dedupes concurrent and repeated alias/case requests using canonical bundle key', 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: 'slice-bundle.dashboard.js',
+            },
+         },
+      },
+   };
+
+   let registerCallCount = 0;
+   controller.importBundleOnce = async () => ({
+      SLICE_BUNDLE_META: {
+         bundleKey: 'routes.dashboard.v2',
+         type: 'route',
+      },
+      registerAll: async () => {
+         registerCallCount += 1;
+         await new Promise((resolve) => setTimeout(resolve, 10));
+      },
+   });
+
+   try {
+      globalThis.slice = {
+         stylesManager: {},
+      };
+
+      await Promise.all([
+         controller.loadBundle('dashboard'),
+         controller.loadBundle('DASHBOARD'),
+      ]);
+
+      await controller.loadBundle('Dashboard');
+
+      assert.equal(registerCallCount, 1);
+      assert.equal(controller.loadedBundles.has('dashboard'), true);
+      assert.equal(controller.loadedBundles.has('routes.dashboard.v2'), true);
+      assert.equal(controller.bundleLoadPromises.size, 0);
+   } finally {
+      globalThis.slice = originalSlice;
+      await rm(tempDir, { recursive: true, force: true });
+   }
+});
+
+test('registerVendorSharedDependencies only runs for vendor-shared canonical bundle or explicit metadata flag', 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 = {
+         __SLICE_SHARED_DEPS__: {},
+      };
+
+      controller.registerVendorSharedDependencies(
+         {
+            SLICE_SHARED_DEPS: {
+               shouldNotLoad: true,
+            },
+         },
+         {
+            type: 'shared',
+            bundleKey: 'app-shared',
+         },
+         'app-shared'
+      );
+
+      assert.equal(globalThis.window.__SLICE_SHARED_DEPS__.shouldNotLoad, undefined);
+
+      controller.registerVendorSharedDependencies(
+         {
+            SLICE_SHARED_DEPS: {
+               explicitFlagDependency: true,
+            },
+         },
+         {
+            type: 'shared',
+            bundleKey: 'app-shared',
+            registerVendorSharedDependencies: true,
+         },
+         'app-shared'
+      );
+
+      assert.equal(globalThis.window.__SLICE_SHARED_DEPS__.explicitFlagDependency, true);
+   } finally {
+      globalThis.window = originalWindow;
+      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');

package/package.json

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