slicejs-web-framework 2.4.2 → 2.4.4

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

@@ -295,9 +295,18 @@ export default class Controller {
           return Promise.resolve(false);
        }
 
-       const { components, metadata } = bundle;
+     // Set tracking flags synchronously before any async work, so callers that
+     // await import() see the flags set immediately when the Promise resolves.
+     const { components, metadata } = bundle;
+     const bundleKey = metadata?.bundleKey;
+     if (bundleKey) {
+        this.loadedBundles.add(bundleKey);
+        if (metadata?.type === 'critical') {
+           this.criticalBundleLoaded = true;
+        }
+     }
 
-      console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
+    console.log(`📦 Registering bundle: ${metadata.type} (${metadata.componentCount} components)`);
 
       const entries = Object.entries(components);
       const chunkSize = 50;
@@ -327,6 +336,13 @@ export default class Controller {
                       ? `Framework/Structural/${componentName}`
                       : componentName;
                    this.classes.set(registeredName, componentData.class);
+                   if (componentName === 'Loading') {
+                      console.log('🔎 Bundle class registered: Loading', {
+                         registeredName,
+                         type: typeof componentData.class,
+                         isFunction: typeof componentData.class === 'function'
+                      });
+                   }
                    if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
                       console.log(`🔎 Bundle class registered: ${componentName}`, {
                          registeredName,

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

@@ -19,7 +19,8 @@ export default class StylesManager {
       }
 
        if (slice.themeConfig.enabled) {
-          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager;
+          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager
+             || await slice.getClass(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
           if (!ThemeManagerClass) {
              throw new Error('ThemeManager not available');
           }

package/Slice/Slice.js

@@ -21,6 +21,10 @@ export default class Slice {
       this.loadingConfig = sliceConfig.loading;
       this.eventsConfig = sliceConfig.events;
 
+      // Default to production until init() resolves the actual mode.
+      // Safe to call isProduction() before init() completes.
+      this._mode = 'production';
+
       // 📦 Bundle system is initialized automatically via import in index.js
    }
 
@@ -39,11 +43,12 @@ export default class Slice {
    }
 
    /**
-    * Flag for production behavior (override in builds).
+    * Returns true when running in production mode.
+    * Reliable after init() has completed.
     * @returns {boolean}
     */
    isProduction() {
-      return true;
+      return this._mode === 'production';
    }
 
    /**
@@ -157,6 +162,13 @@ export default class Slice {
          delete props.sliceId;
 
        const ComponentClass = this.controller.classes.get(componentName);
+       if (componentName === 'Loading') {
+          console.log('🔎 Build component: Loading', {
+             classType: typeof ComponentClass,
+             isFunction: typeof ComponentClass === 'function',
+             classValue: ComponentClass
+          });
+       }
        if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
           console.log(`🔎 Build component: ${componentName}`, {
              classType: typeof ComponentClass,
@@ -226,7 +238,6 @@ async function loadConfig() {
       const response = await fetch('/sliceConfig.json'); // 🔹 Express lo sirve desde `src/`
       if (!response.ok) throw new Error('Error loading sliceConfig.json');
       const json = await response.json();
-      console.log(json);
       return json;
    } catch (error) {
       console.error(`Error loading config file: ${error.message}`);
@@ -243,6 +254,20 @@ async function init() {
       return;
    }
 
+    // 1. Resolve runtime mode via dev server endpoint.
+    // In production the endpoint returns 404 (not registered), so catch/non-ok is expected.
+    let envMode = null;
+    try {
+      const envRes = await fetch('/slice-env.json', { cache: 'no-store' });
+      if (envRes.ok) {
+        const env = await envRes.json();
+        envMode = env.mode; // 'development' | 'production'
+      }
+    } catch (error) {
+      // Endpoint not available — normal in production
+    }
+
+    // 2. Fetch bundle config (existing logic, unchanged)
     let frameworkClasses = null;
     let bundleConfigJson = null;
     try {
@@ -254,47 +279,68 @@ async function init() {
       // ignore
     }
 
-    try {
-      if (bundleConfigJson?.production) {
-        await import('/bundles/slice-bundle.framework.js');
-        frameworkClasses = window.SLICE_FRAMEWORK_CLASSES || null;
-      }
-    } catch (error) {
-      console.warn('Framework bundle not available, falling back to dynamic imports');
+    // 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';
     }
 
-    if (!frameworkClasses) {
-      const imports = await Promise.all([
-        import('./Components/Structural/Controller/Controller.js'),
-        import('./Components/Structural/StylesManager/StylesManager.js')
-      ]);
-      frameworkClasses = {
-        Controller: imports[0].default,
-        StylesManager: imports[1].default
-      };
-    }
+     // 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.
+     if (resolvedMode === 'production' && bundleConfigJson?.bundles?.framework?.file) {
+       try {
+         await import(`/bundles/${bundleConfigJson.bundles.framework.file}`);
+         if (window.SLICE_FRAMEWORK_CLASSES) {
+           frameworkClasses = window.SLICE_FRAMEWORK_CLASSES;
+         }
+        } catch (e) {
+          // framework bundle failed — fall through to individual imports
+          console.error('[Slice.js] framework bundle import failed:', e?.message || e);
+        }
+     }
+
+     if (!frameworkClasses) {
+       try {
+         const imports = await Promise.all([
+           import('./Components/Structural/Controller/Controller.js'),
+           import('./Components/Structural/StylesManager/StylesManager.js')
+         ]);
+         frameworkClasses = {
+           Controller: imports[0].default,
+           StylesManager: imports[1].default
+         };
+       } catch (e) {
+         console.error('[Slice.js] individual imports fallback failed:', e?.message || e);
+         throw e;
+       }
+     }
 
+    // 5. Create Slice instance and set resolved mode
     window.slice = new Slice(sliceConfig, frameworkClasses);
+    window.slice._mode = resolvedMode;
 
-    // Initialize bundles before building components
-    try {
-       const configResponse = await fetch('/bundles/bundle.config.json', { cache: 'no-store' });
-       if (configResponse.ok) {
-          const config = await configResponse.json();
-          window.slice.controller.bundleConfig = config;
-       }
+     // 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 (window.slice.controller.bundleConfig) {
           const config = window.slice.controller.bundleConfig;
 
           const criticalFile = config?.bundles?.critical?.file;
           if (criticalFile) {
-             const criticalModule = await import(`/bundles/${criticalFile}`);
-             if (criticalModule.SLICE_BUNDLE) {
-                window.slice.controller.registerBundle(criticalModule.SLICE_BUNDLE);
-                window.slice.controller.loadedBundles.add('critical');
-                window.slice.controller.criticalBundleLoaded = true;
-             }
+             // Bundle auto-registers itself on import via its own registration block.
+             // No explicit registerBundle() call needed — flags are set inside registerBundle().
+             await import(`/bundles/${criticalFile}`);
           }
 
           const routeBundles = config?.routeBundles || {};
@@ -306,11 +352,8 @@ async function init() {
                 if (bundleName === 'critical') continue;
                 const bundleInfo = config?.bundles?.routes?.[bundleName];
                 if (!bundleInfo?.file) continue;
-                const routeModule = await import(`/bundles/${bundleInfo.file}`);
-                if (routeModule.SLICE_BUNDLE) {
-                   window.slice.controller.registerBundle(routeModule.SLICE_BUNDLE);
-                   window.slice.controller.loadedBundles.add(bundleName);
-                }
+                // Bundle auto-registers itself on import.
+                await import(`/bundles/${bundleInfo.file}`);
              }
           };
 

package/api/index.js

@@ -86,6 +86,23 @@ app.use((req, res, next) => {
   }
 });
 
+// ==============================================
+// RUNTIME MODE ENDPOINT
+// ==============================================
+
+// Expone el modo actual al framework Slice.js en runtime.
+// Solo se registra en development — 404 en production indica modo producción.
+if (runMode === 'development') {
+  app.get('/slice-env.json', (req, res) => {
+    res.json({ mode: 'development' });
+  });
+} else {
+  // Explicit 404 so the SPA fallback doesn't return 200 for this dev-only endpoint.
+  app.get('/slice-env.json', (req, res) => {
+    res.status(404).json({ error: 'Not found' });
+  });
+}
+
 // ==============================================
 // ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
 // ==============================================

package/package.json

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