slicejs-cli 2.9.5 → 3.0.0

package/commands/utils/bundling/BundleGenerator.js

@@ -5,12 +5,12 @@ import crypto from 'crypto';
 import { parse } from '@babel/parser';
 import traverse from '@babel/traverse';
 import { minify as terserMinify } from 'terser';
-import { getSrcPath, getComponentsJsPath, getDistPath } from '../PathHelper.js';
+import { getSrcPath, getComponentsJsPath, getDistPath, getConfigPath } from '../PathHelper.js';
 
 export default class BundleGenerator {
   constructor(moduleUrl, analysisData, options = {}) {
     this.moduleUrl = moduleUrl;
-    this.analysisData = analysisData;
+    this.analysisData = analysisData || { components: [], routes: [], metrics: {} };
     this.srcPath = getSrcPath(moduleUrl);
     this.distPath = getDistPath(moduleUrl);
     this.output = options.output || 'src';
@@ -22,12 +22,17 @@ export default class BundleGenerator {
       minify: !!options.minify,
       obfuscate: !!options.obfuscate
     };
+    this.format = 'v2';
+    this.sliceConfig = this.resolveSliceConfig();
+    this.loadingPolicy = this.resolveLoadingPolicy();
 
     // Configuration
     this.config = {
       maxCriticalSize: 50 * 1024, // 50KB
       maxCriticalComponents: 15,
       minSharedUsage: 3, // Minimum routes to be considered "shared"
+      maxRouteBundleSize: 120 * 1024,
+      maxRouteRequests: 12,
       strategy: 'hybrid' // 'global', 'hybrid', 'per-route'
     };
 
@@ -41,6 +46,27 @@ export default class BundleGenerator {
     };
   }
 
+  resolveSliceConfig() {
+    if (this.analysisData?.sliceConfig && typeof this.analysisData.sliceConfig === 'object') {
+      return this.analysisData.sliceConfig;
+    }
+
+    try {
+      const configPath = getConfigPath(this.moduleUrl);
+      if (fs.existsSync(configPath)) {
+        return fs.readJsonSync(configPath);
+      }
+    } catch (error) {
+      console.warn('Warning: Could not read sliceConfig.json for loading policy:', error.message);
+    }
+
+    return {};
+  }
+
+  resolveLoadingPolicy() {
+    return this.sliceConfig?.loading?.enabled ? 'enabled' : 'disabled';
+  }
+
   /**
    * Computes deterministic integrity hash for bundle metadata.
    * @param {Array} components
@@ -154,6 +180,7 @@ export default class BundleGenerator {
     // Filter critical candidates
     const candidates = components
       .filter(comp => {
+        if (!this.isComponentAllowedByLoadingPolicy(comp)) return false;
         // Shared components (used in 3+ routes)
         const isShared = comp.routes.size >= this.config.minSharedUsage;
 
@@ -173,8 +200,8 @@ export default class BundleGenerator {
         return priorityB - priorityA;
       });
 
-    const loadingComponent = components.find((comp) => comp.name === 'Loading');
-    if (loadingComponent && !candidates.includes(loadingComponent)) {
+    const loadingComponent = components.find((comp) => comp.name === 'Loading' && this.isComponentAllowedByLoadingPolicy(comp));
+    if (this.loadingPolicy === 'enabled' && loadingComponent && !candidates.includes(loadingComponent)) {
       candidates.unshift(loadingComponent);
     }
 
@@ -203,6 +230,11 @@ export default class BundleGenerator {
       }
     }
 
+    if (this.loadingPolicy === 'disabled') {
+      this.bundles.critical.components = this.bundles.critical.components.filter((comp) => comp.name !== 'Loading');
+      this.bundles.critical.size = this.bundles.critical.components.reduce((sum, comp) => sum + comp.size, 0);
+    }
+
     console.log(`✓ Critical bundle: ${this.bundles.critical.components.length} components, ${(this.bundles.critical.size / 1024).toFixed(1)} KB`);
   }
 
@@ -217,6 +249,12 @@ export default class BundleGenerator {
     } else {
       this.assignPerRouteBundles(criticalNames);
     }
+
+    this.extractSharedComponents(criticalNames);
+    this.rebalanceBundlesByBudget(this.bundles.routes, {
+      maxBundleSize: this.config.maxRouteBundleSize,
+      maxRequests: this.config.maxRouteRequests
+    });
   }
 
   /**
@@ -240,7 +278,7 @@ export default class BundleGenerator {
 
       // Filter those already in critical
       const uniqueComponents = Array.from(allComponents).filter(comp =>
-        !criticalNames.has(comp.name)
+        !criticalNames.has(comp.name) && this.isComponentAllowedByLoadingPolicy(comp)
       );
 
       if (uniqueComponents.length === 0) continue;
@@ -250,7 +288,7 @@ export default class BundleGenerator {
 
       this.bundles.routes[routeKey] = {
         path: routePath,
-        components: uniqueComponents,
+        components: this.sortComponentsByName(uniqueComponents),
         size: totalSize,
         file: `slice-bundle.${routeKey}.js`
       };
@@ -313,7 +351,7 @@ export default class BundleGenerator {
 
           // Filter those already in critical
           const uniqueComponents = Array.from(allComponents).filter(comp =>
-            !criticalNames.has(comp.name)
+            !criticalNames.has(comp.name) && this.isComponentAllowedByLoadingPolicy(comp)
           );
 
           if (uniqueComponents.length > 0) {
@@ -321,7 +359,7 @@ export default class BundleGenerator {
 
             this.bundles.routes[groupKey] = {
               paths: groupData.routes,
-              components: uniqueComponents,
+              components: this.sortComponentsByName(uniqueComponents),
               size: totalSize,
               file: `slice-bundle.${this.routeToFileName(groupKey)}.js`
             };
@@ -368,7 +406,7 @@ export default class BundleGenerator {
 
       // Filter those already in critical
       const uniqueComponents = Array.from(allComponents).filter(comp =>
-        !criticalNames.has(comp.name)
+        !criticalNames.has(comp.name) && this.isComponentAllowedByLoadingPolicy(comp)
       );
 
       if (uniqueComponents.length === 0) continue;
@@ -378,7 +416,7 @@ export default class BundleGenerator {
 
       this.bundles.routes[category] = {
         paths: routePaths,
-        components: uniqueComponents,
+        components: this.sortComponentsByName(uniqueComponents),
         size: totalSize,
         file: `slice-bundle.${this.routeToFileName(category)}.js`
       };
@@ -387,6 +425,225 @@ export default class BundleGenerator {
     }
   }
 
+  isComponentAllowedByLoadingPolicy(component) {
+    if (!component) return false;
+    if (this.loadingPolicy === 'disabled' && component.name === 'Loading') {
+      return false;
+    }
+    return true;
+  }
+
+  sortComponentsByName(components) {
+    return [...components].sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  dedupeComponentsByName(components = []) {
+    const byName = new Map();
+    for (const component of components) {
+      if (!component?.name) continue;
+      if (!byName.has(component.name)) {
+        byName.set(component.name, component);
+      }
+    }
+    return this.sortComponentsByName(Array.from(byName.values()));
+  }
+
+  getBundlePaths(bundle = {}) {
+    const raw = Array.isArray(bundle.paths)
+      ? bundle.paths
+      : Array.isArray(bundle.path)
+        ? bundle.path
+        : bundle.path
+          ? [bundle.path]
+          : [];
+
+    return Array.from(new Set(raw.filter(Boolean))).sort((a, b) => a.localeCompare(b));
+  }
+
+  setBundlePaths(bundle, paths = []) {
+    const mergedPaths = Array.from(new Set((paths || []).filter(Boolean))).sort((a, b) => a.localeCompare(b));
+    if (mergedPaths.length === 0) {
+      delete bundle.path;
+      delete bundle.paths;
+      return;
+    }
+    if (mergedPaths.length === 1) {
+      bundle.path = mergedPaths[0];
+      delete bundle.paths;
+      return;
+    }
+    bundle.paths = mergedPaths;
+    delete bundle.path;
+  }
+
+  mergeBundleDependencies(...dependencyLists) {
+    const merged = [];
+    const append = (dep) => {
+      if (!dep || merged.includes(dep)) return;
+      if (dep === 'critical') {
+        merged.unshift(dep);
+        return;
+      }
+      merged.push(dep);
+    };
+
+    dependencyLists
+      .flat()
+      .forEach(append);
+
+    if (!merged.includes('critical')) {
+      merged.unshift('critical');
+    }
+
+    const rest = merged
+      .filter((dep) => dep !== 'critical')
+      .sort((a, b) => a.localeCompare(b));
+    return ['critical', ...rest];
+  }
+
+  extractSharedComponents(criticalNames) {
+    const usage = new Map();
+
+    for (const bundle of Object.values(this.bundles.routes)) {
+      const seenInBundle = new Set();
+      for (const component of this.dedupeComponentsByName(bundle.components || [])) {
+        if (criticalNames.has(component.name)) continue;
+        if (!this.isComponentAllowedByLoadingPolicy(component)) continue;
+        if (seenInBundle.has(component.name)) continue;
+        seenInBundle.add(component.name);
+        if (!usage.has(component.name)) {
+          usage.set(component.name, { component, count: 0 });
+        }
+        usage.get(component.name).count += 1;
+      }
+    }
+
+    const sharedComponents = Array.from(usage.values())
+      .filter((entry) => entry.count >= this.config.minSharedUsage)
+      .map((entry) => entry.component);
+
+    if (sharedComponents.length === 0) {
+      return;
+    }
+
+    const sharedSet = new Set(sharedComponents.map((component) => component.name));
+    const orderedShared = this.sortComponentsByName(sharedComponents);
+
+    for (const bundle of Object.values(this.bundles.routes)) {
+      const original = this.dedupeComponentsByName(bundle.components || []);
+      const filtered = original.filter((component) => !sharedSet.has(component.name));
+      const removedShared = original.length - filtered.length;
+      bundle.components = this.sortComponentsByName(filtered);
+      bundle.size = bundle.components.reduce((sum, component) => sum + component.size, 0);
+      if (removedShared > 0) {
+        bundle.dependencies = this.mergeBundleDependencies(bundle.dependencies || [], ['shared-core']);
+      }
+    }
+
+    this.bundles.routes['shared-core'] = {
+      paths: [],
+      components: orderedShared,
+      size: orderedShared.reduce((sum, component) => sum + component.size, 0),
+      file: `slice-bundle.${this.routeToFileName('shared-core')}.js`
+    };
+
+    for (const [key, bundle] of Object.entries(this.bundles.routes)) {
+      if (key === 'shared-core') continue;
+      if ((bundle.components || []).length === 0) {
+        delete this.bundles.routes[key];
+      }
+    }
+  }
+
+  rebalanceBundlesByBudget(bundles, limits = {}) {
+    const maxBundleSize = limits.maxBundleSize || this.config.maxRouteBundleSize;
+    const maxRequests = limits.maxRequests || this.config.maxRouteRequests;
+    const orderedEntries = Object.entries(bundles)
+      .sort(([a], [b]) => a.localeCompare(b));
+    const rebalanced = {};
+
+    for (const [key, bundle] of orderedEntries) {
+      const sortedComponents = this.dedupeComponentsByName(bundle.components || []);
+      const totalSize = sortedComponents.reduce((sum, component) => sum + component.size, 0);
+      if (totalSize <= maxBundleSize || sortedComponents.length <= 1) {
+        rebalanced[key] = {
+          ...bundle,
+          components: sortedComponents,
+          size: totalSize,
+          file: `slice-bundle.${this.routeToFileName(key)}.js`
+        };
+        continue;
+      }
+
+      let partIndex = 1;
+      let currentChunk = [];
+      let currentSize = 0;
+
+      for (const component of sortedComponents) {
+        const nextSize = currentSize + component.size;
+        const shouldFlush = currentChunk.length > 0 && nextSize > maxBundleSize;
+
+        if (shouldFlush) {
+          const partKey = `${key}--p${partIndex}`;
+          rebalanced[partKey] = {
+            ...bundle,
+            components: currentChunk,
+            size: currentSize,
+            file: `slice-bundle.${this.routeToFileName(partKey)}.js`
+          };
+          partIndex += 1;
+          currentChunk = [];
+          currentSize = 0;
+        }
+
+        currentChunk.push(component);
+        currentSize += component.size;
+      }
+
+      if (currentChunk.length > 0) {
+        const partKey = `${key}--p${partIndex}`;
+        rebalanced[partKey] = {
+          ...bundle,
+          components: currentChunk,
+          size: currentSize,
+          file: `slice-bundle.${this.routeToFileName(partKey)}.js`
+        };
+      }
+    }
+
+    const keys = Object.keys(rebalanced).sort((a, b) => a.localeCompare(b));
+    while (keys.length > maxRequests) {
+      const lastKey = keys.pop();
+      const targetKey = keys[keys.length - 1];
+      if (!lastKey || !targetKey) break;
+      const mergedComponents = this.dedupeComponentsByName([
+        ...(rebalanced[targetKey].components || []),
+        ...(rebalanced[lastKey].components || [])
+      ]);
+      const mergedPaths = [
+        ...this.getBundlePaths(rebalanced[targetKey]),
+        ...this.getBundlePaths(rebalanced[lastKey])
+      ];
+      const mergedDependencies = this.mergeBundleDependencies(
+        rebalanced[targetKey].dependencies || [],
+        rebalanced[lastKey].dependencies || []
+      );
+
+      rebalanced[targetKey].components = mergedComponents;
+      rebalanced[targetKey].size = mergedComponents.reduce((sum, component) => sum + component.size, 0);
+      rebalanced[targetKey].dependencies = mergedDependencies;
+      this.setBundlePaths(rebalanced[targetKey], mergedPaths);
+      delete rebalanced[lastKey];
+    }
+
+    Object.keys(bundles).forEach((key) => delete bundles[key]);
+    for (const [key, bundle] of Object.entries(rebalanced).sort(([a], [b]) => a.localeCompare(b))) {
+      bundles[key] = bundle;
+    }
+
+    return bundles;
+  }
+
   /**
    * Categorizes a route path for grouping, considering MultiRoute context
    */
@@ -674,15 +931,14 @@ export default class BundleGenerator {
    * Generates the content of a bundle
    */
   async generateBundleContent(components, type, routePath, bundleKey, fileName) {
-    const componentsData = {};
+    const bundleComponents = [];
+    const uniqueComponents = this.dedupeComponentsByName(components || []);
 
-    for (const comp of components) {
+    for (const comp of uniqueComponents) {
       const fileBaseName = comp.fileName || comp.name;
       const jsPath = path.join(comp.path, `${fileBaseName}.js`);
       const jsContent = await fs.readFile(jsPath, 'utf-8');
 
-      const dependencyContents = await this.buildDependencyContents(jsContent, comp.path);
-
       let htmlContent = null;
       let cssContent = null;
 
@@ -697,36 +953,130 @@ export default class BundleGenerator {
         cssContent = await fs.readFile(cssPath, 'utf-8');
       }
 
-      const componentKey = comp.isFramework ? `Framework/Structural/${comp.name}` : comp.name;
-      componentsData[componentKey] = {
+      bundleComponents.push({
         name: comp.name,
         category: comp.category,
         categoryType: comp.categoryType,
-        isFramework: !!comp.isFramework,
         js: this.cleanJavaScript(jsContent, comp.name),
-        externalDependencies: dependencyContents, // Files imported with import statements
-        componentDependencies: Array.from(comp.dependencies), // Other components this one depends on
         html: htmlContent,
         css: cssContent,
+        externalDependencies: await this.buildDependencyContents(jsContent, comp.path),
         size: comp.size
-      };
+      });
     }
 
+    return this.generateBundleFileContent(fileName, type, this.sortComponentsByName(bundleComponents), routePath);
+  }
+
+  classFactoryName(componentName) {
+    return `SLICE_CLASS_FACTORY_${this.toSafeIdentifier(componentName)}`;
+  }
+
+  indentCodeBlock(code, spaces = 2) {
+    const indentation = ' '.repeat(spaces);
+    return String(code)
+      .split('\n')
+      .map((line) => `${indentation}${line}`)
+      .join('\n');
+  }
+
+  generateBundleFileContent(fileName, type, components, routePath = null) {
+    const uniqueComponents = this.dedupeComponentsByName(components || []);
+    const bundleKey = type === 'critical'
+      ? 'critical'
+      : type === 'framework'
+        ? 'framework'
+        : this.routeToFileName(routePath || fileName.replace('slice-bundle.', '').replace('.js', ''));
+
+    const dependencyModuleBlock = this.buildV2DependencyModuleBlock(uniqueComponents);
+
+    const classFactoryDefinitions = uniqueComponents
+      .map((component) => {
+        const factoryName = this.classFactoryName(component.name);
+        const dependencyBindings = this.buildDependencyBindings(component.externalDependencies || {});
+        const body = component.js && component.js.trim()
+          ? component.js
+          : `return window.${component.name};`;
+        const bodyWithBindings = dependencyBindings
+          ? `${dependencyBindings}\n${body}`
+          : body;
+        return `const ${factoryName} = () => {\n${this.indentCodeBlock(bodyWithBindings, 2)}\n};`;
+      })
+      .join('\n\n');
+
+    const templateDeclarations = uniqueComponents
+      .map((component) => {
+        const templateVarName = `__templateElement_${this.toSafeIdentifier(component.name)}`;
+        return `const ${templateVarName} = document.createElement('template');\n${templateVarName}.innerHTML = ${JSON.stringify(component.html || '')};`;
+      })
+      .join('\n');
+
+    const classRegistrations = uniqueComponents
+      .map((component) => {
+        const componentName = JSON.stringify(component.name);
+        return `  if (!controller.classes.has(${componentName})) {\n    controller.classes.set(${componentName}, ${this.classFactoryName(component.name)}());\n  }`;
+      })
+      .join('\n');
+
+    const templateRegistrations = uniqueComponents
+      .map((component) => {
+        const componentName = JSON.stringify(component.name);
+        const templateVarName = `__templateElement_${this.toSafeIdentifier(component.name)}`;
+        return `  if (!controller.templates.has(${componentName})) {\n    controller.templates.set(${componentName}, ${templateVarName});\n  }`;
+      })
+      .join('\n');
+
+    const cssRegistrationInit = uniqueComponents.length
+      ? `  if (!stylesManager.__sliceRegisteredComponentStyles) {\n    stylesManager.__sliceRegisteredComponentStyles = new Set();\n  }`
+      : '';
+
+    const cssRegistrations = uniqueComponents
+      .map((component) => {
+        const componentName = JSON.stringify(component.name);
+        return `  if (!stylesManager.__sliceRegisteredComponentStyles.has(${componentName})) {\n    stylesManager.registerComponentStyles(${componentName}, ${JSON.stringify(component.css || '')});\n    stylesManager.__sliceRegisteredComponentStyles.add(${componentName});\n  }`;
+      })
+      .join('\n');
+
+    const categoryRegistrations = uniqueComponents
+      .map((component) => {
+        const componentName = JSON.stringify(component.name);
+        return `  if (!controller.componentCategories.has(${componentName})) {\n    controller.componentCategories.set(${componentName}, ${JSON.stringify(component.category)});\n  }`;
+      })
+      .join('\n');
+
     const metadata = {
-      version: '2.0.0',
-      type,
-      route: routePath,
+      version: '2',
       bundleKey,
-      file: fileName,
-      generated: new Date().toISOString(),
-      totalSize: components.reduce((sum, c) => sum + c.size, 0),
-      componentCount: components.length,
-      strategy: this.config.strategy,
-      minified: this.options.minify,
-      obfuscated: this.options.obfuscate
+      type,
+      routes: routePath ? [routePath] : [],
+      componentCount: uniqueComponents.length
     };
 
-    return this.formatBundleFile(componentsData, metadata);
+    return `export const SLICE_BUNDLE_META = ${JSON.stringify(metadata, null, 2)};\n\n${dependencyModuleBlock}\n\n${classFactoryDefinitions}\n\n${templateDeclarations}\n\nexport async function registerAll(controller, stylesManager) {\n${classRegistrations}\n${templateRegistrations}\n${cssRegistrationInit}${cssRegistrationInit ? '\n' : ''}${cssRegistrations}\n${categoryRegistrations}\n}\n`;
+  }
+
+  buildV2DependencyModuleBlock(components) {
+    const modules = new Map();
+    for (const component of components || []) {
+      const externalDependencies = component.externalDependencies || {};
+      for (const [moduleName, entry] of Object.entries(externalDependencies)) {
+        if (modules.has(moduleName)) continue;
+        const content = typeof entry === 'string' ? entry : entry?.content;
+        if (!content) continue;
+        modules.set(moduleName, { name: moduleName, content });
+      }
+    }
+
+    const lines = ['const SLICE_BUNDLE_DEPENDENCIES = {};'];
+    Array.from(modules.values()).forEach((module, index) => {
+      const exportVar = `__sliceDepExports${index}`;
+      const transformedContent = this.transformDependencyContent(module.content, exportVar, module.name);
+      lines.push(`const ${exportVar} = {};`);
+      lines.push(transformedContent.trim());
+      lines.push(`SLICE_BUNDLE_DEPENDENCIES[${JSON.stringify(module.name)}] = ${exportVar};`);
+    });
+
+    return lines.join('\n');
   }
 
   async buildDependencyContents(jsContent, componentPath) {
@@ -979,8 +1329,11 @@ if (window.slice && window.slice.controller) {
    * Generates the bundle configuration
    */
   generateBundleConfig(frameworkBundle = null) {
+    const metrics = this.analysisData.metrics || {};
     const config = {
       version: '2.0.0',
+      format: this.format,
+      loadingPolicy: this.loadingPolicy,
       strategy: this.config.strategy,
       minified: this.options.minify,
       obfuscated: this.options.obfuscate,
@@ -988,11 +1341,11 @@ if (window.slice && window.slice.controller) {
       generated: new Date().toISOString(),
 
       stats: {
-        totalComponents: this.analysisData.metrics.totalComponents,
-        totalRoutes: this.analysisData.metrics.totalRoutes,
+        totalComponents: metrics.totalComponents || 0,
+        totalRoutes: metrics.totalRoutes || 0,
         sharedComponents: this.bundles.critical.components.length,
-        sharedPercentage: this.analysisData.metrics.sharedPercentage,
-        totalSize: this.analysisData.metrics.totalSize,
+        sharedPercentage: metrics.sharedPercentage || 0,
+        totalSize: metrics.totalSize || 0,
         criticalSize: this.bundles.critical.size
       },
 
@@ -1020,6 +1373,7 @@ if (window.slice && window.slice.controller) {
       const routeIdentifier = Array.isArray(bundle.path || bundle.paths)
         ? key
         : (bundle.path || bundle.paths || key);
+      const dependencies = this.mergeBundleDependencies(bundle.dependencies || []);
 
       config.bundles.routes[key] = {
         path: bundle.path || bundle.paths || key, // Support both single path and array of paths, fallback to key
@@ -1028,7 +1382,7 @@ if (window.slice && window.slice.controller) {
         hash: bundle.hash || null,
         integrity: bundle.integrity || null,
         components: bundle.components.map(c => c.name),
-        dependencies: ['critical']
+        dependencies
       };
 
       const paths = Array.isArray(config.bundles.routes[key].path)
@@ -1039,6 +1393,11 @@ if (window.slice && window.slice.controller) {
         if (!config.routeBundles[routePath]) {
           config.routeBundles[routePath] = ['critical'];
         }
+        for (const dependency of dependencies.filter((dep) => dep !== 'critical')) {
+          if (!config.routeBundles[routePath].includes(dependency)) {
+            config.routeBundles[routePath].push(dependency);
+          }
+        }
         if (!config.routeBundles[routePath].includes(key)) {
           config.routeBundles[routePath].push(key);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.9.5",
+  "version": "3.0.0",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "bin": {

package/tests/bundle-generator.test.js

@@ -1,5 +1,8 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
+import fs from 'fs-extra';
+import os from 'node:os';
+import path from 'node:path';
 import BundleGenerator from '../commands/utils/bundling/BundleGenerator.js';
 
 const createComponent = (name, deps = []) => ({
@@ -36,3 +39,168 @@ test('computeBundleIntegrity changes with component dependencies', () => {
   // Assert
   assert.notEqual(baseIntegrity, changedIntegrity);
 });
+
+test('generateBundleConfig outputs V2 manifest fields', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  });
+
+  const config = generator.generateBundleConfig(null);
+
+  assert.equal(config.format, 'v2');
+  assert.ok(config.generated);
+  assert.ok(config.bundles);
+  assert.ok(['enabled', 'disabled'].includes(config.loadingPolicy));
+});
+
+test('loading policy is enabled when sliceConfig loading.enabled is true', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    },
+    sliceConfig: { loading: { enabled: true } }
+  });
+
+  const config = generator.generateBundleConfig(null);
+  assert.equal(config.loadingPolicy, 'enabled');
+});
+
+test('loading policy falls back to project sliceConfig when analysisData lacks sliceConfig', async () => {
+  const tempRoot = await fs.mkdtemp(path.join(os.tmpdir(), 'slice-bundle-test-'));
+  const srcDir = path.join(tempRoot, 'src');
+  const previousInitCwd = process.env.INIT_CWD;
+
+  await fs.ensureDir(srcDir);
+  await fs.writeJson(path.join(srcDir, 'sliceConfig.json'), {
+    loading: { enabled: true }
+  });
+
+  process.env.INIT_CWD = tempRoot;
+
+  try {
+    const generator = new BundleGenerator(import.meta.url, {
+      components: [],
+      routes: [],
+      metrics: {
+        totalComponents: 0,
+        totalRoutes: 0,
+        sharedPercentage: 0,
+        totalSize: 0
+      }
+    });
+
+    const config = generator.generateBundleConfig(null);
+    assert.equal(config.loadingPolicy, 'enabled');
+  } finally {
+    if (previousInitCwd === undefined) {
+      delete process.env.INIT_CWD;
+    } else {
+      process.env.INIT_CWD = previousInitCwd;
+    }
+    await fs.remove(tempRoot);
+  }
+});
+
+test('loading enabled always includes Loading component in critical bundle', () => {
+  const loading = {
+    ...createComponent('Loading'),
+    routes: new Set(),
+    size: 100000
+  };
+  const home = {
+    ...createComponent('HomePage'),
+    routes: new Set(['/'])
+  };
+
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [loading, home],
+    routes: [{ path: '/', component: 'HomePage' }],
+    metrics: {
+      totalComponents: 2,
+      totalRoutes: 1,
+      sharedPercentage: 0,
+      totalSize: 100010
+    },
+    sliceConfig: { loading: { enabled: true } }
+  });
+
+  generator.identifyCriticalComponents();
+
+  assert.ok(generator.bundles.critical.components.some((component) => component.name === 'Loading'));
+  assert.equal(generator.generateBundleConfig().loadingPolicy, 'enabled');
+});
+
+test('shared-core is wired as dependency for affected route bundles', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  });
+
+  generator.config.minSharedUsage = 2;
+
+  generator.bundles.routes = {
+    alpha: {
+      path: '/alpha',
+      components: [createComponent('SharedWidget'), createComponent('AlphaOnly')],
+      size: 20,
+      file: 'slice-bundle.alpha.js'
+    },
+    beta: {
+      path: '/beta',
+      components: [createComponent('SharedWidget'), createComponent('BetaOnly')],
+      size: 20,
+      file: 'slice-bundle.beta.js'
+    }
+  };
+
+  generator.extractSharedComponents(new Set());
+  const config = generator.generateBundleConfig();
+
+  assert.ok(config.bundles.routes['shared-core']);
+  assert.deepEqual(config.bundles.routes.alpha.dependencies, ['critical', 'shared-core']);
+  assert.deepEqual(config.bundles.routes.beta.dependencies, ['critical', 'shared-core']);
+  assert.deepEqual(config.routeBundles['/alpha'], ['critical', 'shared-core', 'alpha']);
+  assert.deepEqual(config.routeBundles['/beta'], ['critical', 'shared-core', 'beta']);
+});
+
+test('rebalance merge preserves and merges route path metadata deterministically', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  });
+
+  const bundles = {
+    alpha: { path: '/alpha', components: [createComponent('Alpha')], size: 10, file: 'slice-bundle.alpha.js' },
+    beta: { paths: ['/beta', '/beta-alt'], components: [createComponent('Beta')], size: 10, file: 'slice-bundle.beta.js' },
+    gamma: { path: '/gamma', components: [createComponent('Gamma')], size: 10, file: 'slice-bundle.gamma.js' }
+  };
+
+  generator.rebalanceBundlesByBudget(bundles, { maxBundleSize: 99999, maxRequests: 2 });
+
+  assert.equal(Object.keys(bundles).length, 2);
+  assert.deepEqual(bundles.beta.paths, ['/beta', '/beta-alt', '/gamma']);
+});

package/tests/bundle-v2-register-output.test.js

@@ -0,0 +1,141 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import BundleGenerator from '../commands/utils/bundling/BundleGenerator.js';
+
+test('generated V2 bundle includes meta and registerAll exports', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  }, { output: 'src' });
+
+  const source = generator.generateBundleFileContent(
+    'slice-bundle.test.js',
+    'route',
+    [{ name: 'Button', category: 'Visual', categoryType: 'Visual', dependencies: new Set(), size: 100, js: '', html: '', css: '' }],
+    '/test'
+  );
+
+  assert.match(source, /export const SLICE_BUNDLE_META/);
+  assert.match(source, /export async function registerAll\(/);
+});
+
+test('generateBundleFileContent deduplicates components by name', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  }, { output: 'src' });
+
+  const source = generator.generateBundleFileContent(
+    'slice-bundle.test.js',
+    'route',
+    [
+      { name: 'Button', category: 'Visual', categoryType: 'Visual', dependencies: new Set(), size: 100, js: '', html: '', css: '' },
+      { name: 'Button', category: 'Visual', categoryType: 'Visual', dependencies: new Set(), size: 100, js: '', html: '', css: '' }
+    ],
+    '/test'
+  );
+
+  assert.equal((source.match(/const SLICE_CLASS_FACTORY_SliceComponent_Button/g) || []).length, 1);
+  assert.equal((source.match(/if \(!controller\.classes\.has\("Button"\)\) \{\s*controller\.classes\.set\("Button", SLICE_CLASS_FACTORY_SliceComponent_Button\(\)\);\s*\}/g) || []).length, 1);
+});
+
+test('registerAll guards class, template, style, and category writes', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  }, { output: 'src' });
+
+  const source = generator.generateBundleFileContent(
+    'slice-bundle.test.js',
+    'route',
+    [{ name: 'Button', category: 'Visual', categoryType: 'Visual', dependencies: new Set(), size: 100, js: '', html: '<button>ok</button>', css: '.btn{}' }],
+    '/test'
+  );
+
+  assert.match(source, /if \(!controller\.classes\.has\("Button"\)\) \{\s*controller\.classes\.set\("Button", SLICE_CLASS_FACTORY_SliceComponent_Button\(\)\);\s*\}/);
+  assert.match(source, /if \(!controller\.templates\.has\("Button"\)\) \{\s*controller\.templates\.set\("Button", __templateElement_SliceComponent_Button\);\s*\}/);
+  assert.match(source, /if \(!stylesManager\.__sliceRegisteredComponentStyles\) \{\s*stylesManager\.__sliceRegisteredComponentStyles = new Set\(\);\s*\}/);
+  assert.match(source, /if \(!stylesManager\.__sliceRegisteredComponentStyles\.has\("Button"\)\) \{\s*stylesManager\.registerComponentStyles\("Button", ".*"\);\s*stylesManager\.__sliceRegisteredComponentStyles\.add\("Button"\);\s*\}/);
+  assert.match(source, /if \(!controller\.componentCategories\.has\("Button"\)\) \{\s*controller\.componentCategories\.set\("Button", "Visual"\);\s*\}/);
+});
+
+test('registerAll stores templates as template elements', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  }, { output: 'src' });
+
+  const source = generator.generateBundleFileContent(
+    'slice-bundle.test.js',
+    'route',
+    [{ name: 'DocumentationPage', category: 'AppComponents', categoryType: 'Visual', dependencies: new Set(), size: 100, js: '', html: '<div>docs</div>', css: '' }],
+    '/docs'
+  );
+
+  assert.match(source, /const __templateElement_SliceComponent_DocumentationPage = document\.createElement\('template'\);/);
+  assert.match(source, /__templateElement_SliceComponent_DocumentationPage\.innerHTML = "<div>docs<\/div>";/);
+  assert.match(source, /controller\.templates\.set\("DocumentationPage", __templateElement_SliceComponent_DocumentationPage\);/);
+});
+
+test('bundle output inlines dependency modules and binds imported symbols in class factories', () => {
+  const generator = new BundleGenerator(import.meta.url, {
+    components: [],
+    routes: [],
+    metrics: {
+      totalComponents: 0,
+      totalRoutes: 0,
+      sharedPercentage: 0,
+      totalSize: 0
+    }
+  }, { output: 'src' });
+
+  const source = generator.generateBundleFileContent(
+    'slice-bundle.test.js',
+    'route',
+    [{
+      name: 'DocumentationPage',
+      category: 'AppComponents',
+      categoryType: 'Visual',
+      dependencies: new Set(),
+      size: 100,
+      js: 'class DocumentationPage extends HTMLElement { connectedCallback(){ return documentationRoutes.length; } }\nwindow.DocumentationPage = DocumentationPage;\nreturn DocumentationPage;',
+      html: '',
+      css: '',
+      externalDependencies: {
+        'App/documentationRoutes.js': {
+          content: 'export const documentationRoutes = ["/docs"];',
+          bindings: [{ type: 'named', importedName: 'documentationRoutes', localName: 'documentationRoutes' }]
+        }
+      }
+    }],
+    '/docs'
+  );
+
+  assert.match(source, /const SLICE_BUNDLE_DEPENDENCIES = \{\};/);
+  assert.match(source, /SLICE_BUNDLE_DEPENDENCIES\["App\/documentationRoutes\.js"\] = __sliceDepExports0;/);
+  assert.match(source, /const documentationRoutes = SLICE_BUNDLE_DEPENDENCIES\["App\/documentationRoutes\.js"\]\.documentationRoutes;/);
+});