slicejs-web-framework 2.3.5 → 2.4.0

package/Slice/Components/Structural/Debugger/Debugger.html

@@ -1,73 +1,73 @@
-<div id="debugger-container">
-   <div class="debugger-header">
-      <div class="header-content">
-         <div class="component-info">
-            <div class="component-icon">🔍</div>
-            <div class="component-details">
-               <div class="component-name">Component Inspector</div>
-               <div class="component-id">Ready to debug</div>
-            </div>
-         </div>
-         <div class="header-actions">
-            <button class="minimize-btn" title="Minimize">−</button>
-            <button id="close-debugger" title="Close">×</button>
-         </div>
-      </div>
-   </div>
-   
-   <div class="debugger-content">
-      <div class="tabs-container">
-         <div class="tab-nav">
-            <button class="tab-btn active" data-tab="props">📋 Props</button>
-            <button class="tab-btn" data-tab="info">ℹ️ Info</button>
-         </div>
-      </div>
-      
-      <div class="tab-content">
-         <div class="tab-pane active" id="props-tab">
-            <div class="props-container"></div>
-            <div class="props-actions">
-               <div class="action-buttons">
-                  <button class="action-btn primary" id="apply-changes">✅ Apply Changes</button>
-                  <button class="action-btn secondary" id="reset-values">🔄 Reset Values</button>
-               </div>
-               <div class="actions-note">
-                  <small>💡 Press Enter on any input to apply changes automatically</small>
-               </div>
-            </div>
-         </div>
-         
-         <div class="tab-pane" id="info-tab">
-            <div class="info-container">
-               <div class="info-list"></div>
-            </div>
-         </div>
-      </div>
-   </div>
-   
-   <!-- Modal para editar objetos/funciones -->
-   <div class="editor-modal" id="editor-modal">
-      <div class="modal-content">
-         <div class="modal-header">
-            <h3 id="modal-title">Edit Property</h3>
-            <button class="modal-close" id="modal-close">×</button>
-         </div>
-         <div class="modal-body">
-            <div class="editor-type-selector">
-               <button class="type-btn active" data-type="json">📋 JSON</button>
-               <button class="type-btn" data-type="function">⚡ Function</button>
-            </div>
-            <div class="editor-container">
-               <textarea id="property-editor" spellcheck="false"></textarea>
-            </div>
-            <div class="editor-footer">
-               <div class="validation-message"></div>
-            </div>
-         </div>
-         <div class="modal-actions">
-            <button class="modal-btn cancel" id="modal-cancel">Cancel</button>
-            <button class="modal-btn save" id="modal-save">Save Changes</button>
-         </div>
-      </div>
-   </div>
+<div id="debugger-container">
+   <div class="debugger-header">
+      <div class="header-content">
+         <div class="component-info">
+            <div class="component-icon">🔍</div>
+            <div class="component-details">
+               <div class="component-name">Component Inspector</div>
+               <div class="component-id">Ready to debug</div>
+            </div>
+         </div>
+         <div class="header-actions">
+            <button class="minimize-btn" title="Minimize">−</button>
+            <button id="close-debugger" title="Close">×</button>
+         </div>
+      </div>
+   </div>
+   
+   <div class="debugger-content">
+      <div class="tabs-container">
+         <div class="tab-nav">
+            <button class="tab-btn active" data-tab="props">📋 Props</button>
+            <button class="tab-btn" data-tab="info">ℹ️ Info</button>
+         </div>
+      </div>
+      
+      <div class="tab-content">
+         <div class="tab-pane active" id="props-tab">
+            <div class="props-container"></div>
+            <div class="props-actions">
+               <div class="action-buttons">
+                  <button class="action-btn primary" id="apply-changes">✅ Apply Changes</button>
+                  <button class="action-btn secondary" id="reset-values">🔄 Reset Values</button>
+               </div>
+               <div class="actions-note">
+                  <small>💡 Press Enter on any input to apply changes automatically</small>
+               </div>
+            </div>
+         </div>
+         
+         <div class="tab-pane" id="info-tab">
+            <div class="info-container">
+               <div class="info-list"></div>
+            </div>
+         </div>
+      </div>
+   </div>
+   
+   <!-- Modal para editar objetos/funciones -->
+   <div class="editor-modal" id="editor-modal">
+      <div class="modal-content">
+         <div class="modal-header">
+            <h3 id="modal-title">Edit Property</h3>
+            <button class="modal-close" id="modal-close">×</button>
+         </div>
+         <div class="modal-body">
+            <div class="editor-type-selector">
+               <button class="type-btn active" data-type="json">📋 JSON</button>
+               <button class="type-btn" data-type="function">⚡ Function</button>
+            </div>
+            <div class="editor-container">
+               <textarea id="property-editor" spellcheck="false"></textarea>
+            </div>
+            <div class="editor-footer">
+               <div class="validation-message"></div>
+            </div>
+         </div>
+         <div class="modal-actions">
+            <button class="modal-btn cancel" id="modal-cancel">Cancel</button>
+            <button class="modal-btn save" id="modal-save">Save Changes</button>
+         </div>
+      </div>
+   </div>
 </div>

package/Slice/Components/Structural/Logger/Log.js

@@ -1,10 +1,10 @@
-export default class Log {
-   constructor(logType, componentCategory, componentSliceId, message, error = null) {
-      this.logType = logType;
-      this.componentCategory = componentCategory;
-      this.componentSliceId = componentSliceId;
-      this.message = message;
-      this.error = error;
-      this.timestamp = new Date();
-   }
-}
+export default class Log {
+   constructor(logType, componentCategory, componentSliceId, message, error = null) {
+      this.logType = logType;
+      this.componentCategory = componentCategory;
+      this.componentSliceId = componentSliceId;
+      this.message = message;
+      this.error = error;
+      this.timestamp = new Date();
+   }
+}

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

@@ -18,10 +18,13 @@ export default class StylesManager {
          slice.logger.logInfo('StylesManager', `${slice.stylesConfig.requestedStyles[i]} styles loaded`);
       }
 
-      if (slice.themeConfig.enabled) {
-         const module = await import(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
+       if (slice.themeConfig.enabled) {
+          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager;
+          if (!ThemeManagerClass) {
+             throw new Error('ThemeManager not available');
+          }
 
-         this.themeManager = new module.default();
+          this.themeManager = new ThemeManagerClass();
          let theme;
 
          if (slice.themeConfig.saveThemeLocally) {

package/Slice/Slice.js

@@ -1,5 +1,3 @@
-import Controller from './Components/Structural/Controller/Controller.js';
-import StylesManager from './Components/Structural/StylesManager/StylesManager.js';
 
 /**
  * Main Slice.js runtime.
@@ -8,9 +6,13 @@ export default class Slice {
    /**
     * @param {Object} sliceConfig
     */
-   constructor(sliceConfig) {
-      this.controller = new Controller();
-      this.stylesManager = new StylesManager();
+    constructor(sliceConfig, frameworkClasses = null) {
+      this.frameworkClasses = frameworkClasses;
+      const ControllerClass = frameworkClasses?.Controller;
+      const StylesManagerClass = frameworkClasses?.StylesManager;
+
+      this.controller = ControllerClass ? new ControllerClass() : null;
+      this.stylesManager = StylesManagerClass ? new StylesManagerClass() : null;
       this.paths = sliceConfig.paths;
       this.themeConfig = sliceConfig.themeManager;
       this.stylesConfig = sliceConfig.stylesManager;
@@ -234,13 +236,86 @@ async function init() {
       return;
    }
 
-   window.slice = new Slice(sliceConfig);
+    let frameworkClasses = null;
+    try {
+      const bundleConfig = await import('/bundles/bundle.config.js');
+      const isProduction = bundleConfig?.SLICE_BUNDLE_CONFIG?.production;
+
+      if (isProduction) {
+        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');
+    }
+
+    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
+      };
+    }
+
+    window.slice = new Slice(sliceConfig, frameworkClasses);
+
+    // 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;
+       }
+
+       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;
+             }
+          }
+
+          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;
+                const routeModule = await import(`/bundles/${bundleInfo.file}`);
+                if (routeModule.SLICE_BUNDLE) {
+                   window.slice.controller.registerBundle(routeModule.SLICE_BUNDLE);
+                   window.slice.controller.loadedBundles.add(bundleName);
+                }
+             }
+          };
+
+          if (typeof requestIdleCallback === 'function') {
+             requestIdleCallback(() => loadRouteBundles());
+          } else {
+             setTimeout(() => loadRouteBundles(), 0);
+          }
+       }
+    } catch (error) {
+       console.log('📄 Using individual component loading (no bundles found)');
+    }
 
    slice.paths.structuralComponentFolderPath = '/Slice/Components/Structural';
 
-   if (sliceConfig.logger.enabled) {
-      const LoggerModule = await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Logger/Logger.js`);
-      window.slice.logger = new LoggerModule();
+    if (sliceConfig.logger.enabled) {
+       const LoggerModule = window.slice.frameworkClasses?.Logger
+         || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Logger/Logger.js`);
+       window.slice.logger = new LoggerModule();
    } else {
       window.slice.logger = {
          logError: () => {},
@@ -249,42 +324,37 @@ async function init() {
       };
    }
 
-   if (sliceConfig.debugger.enabled) {
-       const DebuggerModule = await window.slice.getClass(
-          `${slice.paths.structuralComponentFolderPath}/Debugger/Debugger.js`
-       );
-       window.slice.debugger = new DebuggerModule();
+    if (sliceConfig.debugger.enabled) {
+        const DebuggerModule = window.slice.frameworkClasses?.Debugger
+           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Debugger/Debugger.js`);
+        window.slice.debugger = new DebuggerModule();
        await window.slice.debugger.enableDebugMode();
        document.body.appendChild(window.slice.debugger);
    }
 
-    if (sliceConfig.events?.ui?.enabled) {
-       const EventsDebuggerModule = await window.slice.getClass(
-          `${slice.paths.structuralComponentFolderPath}/EventManager/EventManagerDebugger.js`
-       );
-       window.slice.eventsDebugger = new EventsDebuggerModule();
+     if (sliceConfig.events?.ui?.enabled) {
+        const EventsDebuggerModule = window.slice.frameworkClasses?.EventManagerDebugger
+           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManagerDebugger.js`);
+        window.slice.eventsDebugger = new EventsDebuggerModule();
        await window.slice.eventsDebugger.init();
        document.body.appendChild(window.slice.eventsDebugger);
     }
 
-    if (sliceConfig.context?.ui?.enabled) {
-       const ContextDebuggerModule = await window.slice.getClass(
-          `${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManagerDebugger.js`
-       );
-       window.slice.contextDebugger = new ContextDebuggerModule();
+     if (sliceConfig.context?.ui?.enabled) {
+        const ContextDebuggerModule = window.slice.frameworkClasses?.ContextManagerDebugger
+           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManagerDebugger.js`);
+        window.slice.contextDebugger = new ContextDebuggerModule();
        await window.slice.contextDebugger.init();
        document.body.appendChild(window.slice.contextDebugger);
     }
 
-   if (sliceConfig.events?.enabled) {
-      const EventManagerModule = await window.slice.getClass(
-         `${slice.paths.structuralComponentFolderPath}/EventManager/EventManager.js`
-      );
+    if (sliceConfig.events?.enabled) {
+       const EventManagerModule = window.slice.frameworkClasses?.EventManager
+          || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManager.js`);
       window.slice.events = new EventManagerModule();
       if (typeof window.slice.events.init === 'function') {
          await window.slice.events.init();
       }
-      window.slice.logger.logError('Slice', 'EventManager enabled');
    } else {
       window.slice.events = {
          subscribe: () => null,
@@ -304,15 +374,13 @@ async function init() {
       window.slice.logger.logError('Slice', 'EventManager disabled');
    }
 
-   if (sliceConfig.context?.enabled) {
-      const ContextManagerModule = await window.slice.getClass(
-         `${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManager.js`
-      );
+    if (sliceConfig.context?.enabled) {
+       const ContextManagerModule = window.slice.frameworkClasses?.ContextManager
+          || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManager.js`);
       window.slice.context = new ContextManagerModule();
       if (typeof window.slice.context.init === 'function') {
          await window.slice.context.init();
       }
-      window.slice.logger.logError('Slice', 'ContextManager enabled');
    } else {
       window.slice.context = {
          create: () => false,
@@ -326,10 +394,13 @@ async function init() {
       window.slice.logger.logError('Slice', 'ContextManager disabled');
    }
 
-   if (sliceConfig.loading.enabled) {
+    if (sliceConfig.loading.enabled) {
       const loading = await window.slice.build('Loading', {});
       window.slice.loading = loading;
-   }
+      if (typeof loading?.start === 'function') {
+         loading.start();
+      }
+    }
 
    await window.slice.stylesManager.init();
 
@@ -363,21 +434,10 @@ async function init() {
 
    const routesModule = await import(slice.paths.routesFile);
    const routes = routesModule.default;
-   const RouterModule = await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Router/Router.js`);
-   window.slice.router = new RouterModule(routes);
+    const RouterModule = window.slice.frameworkClasses?.Router
+       || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Router/Router.js`);
+    window.slice.router = new RouterModule(routes);
    await window.slice.router.init();
 }
 
-await init();
-
-// Initialize bundles if available
-try {
-   const { initializeBundles } = await import('/bundles/bundle.config.js');
-   if (initializeBundles) {
-      await initializeBundles(window.slice);
-      console.log('📦 Bundles initialized automatically');
-   }
-} catch (error) {
-   // Bundles not available, continue with individual component loading
-   console.log('📄 Using individual component loading (no bundles found)');
-}
+ await init();