slicejs-web-framework 2.4.1 → 2.4.3

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

@@ -83,9 +83,9 @@ export default class Controller {
          const bundleModule = await import(bundlePath);
 
          // Manually register components from the imported bundle
-         if (bundleModule.SLICE_BUNDLE) {
-            this.registerBundle(bundleModule.SLICE_BUNDLE);
-         }
+          if (bundleModule.SLICE_BUNDLE) {
+             await this.registerBundle(bundleModule.SLICE_BUNDLE);
+          }
 
          this.loadedBundles.add(bundleName);
       } catch (error) {
@@ -288,11 +288,11 @@ export default class Controller {
    /**
     * 📦 New bundle registration method (simplified and robust)
     */
-    registerBundle(bundle) {
+     registerBundle(bundle) {
        const validation = this.validateBundle(bundle);
        if (!validation.isValid) {
           console.warn(`❌ Bundle validation failed: ${validation.error}`);
-          return;
+          return Promise.resolve(false);
        }
 
        const { components, metadata } = bundle;
@@ -303,8 +303,9 @@ export default class Controller {
       const chunkSize = 50;
       let index = 0;
 
-      const processChunk = () => {
-         const sliceEntries = entries.slice(index, index + chunkSize);
+       return new Promise((resolve) => {
+         const processChunk = () => {
+          const sliceEntries = entries.slice(index, index + chunkSize);
 
          for (const [componentName, componentData] of sliceEntries) {
             try {
@@ -321,31 +322,48 @@ export default class Controller {
                   }
                }
 
-               if (componentData.class && !this.classes.has(componentName)) {
-                  const registeredName = componentData.isFramework
-                     ? `Framework/Structural/${componentName}`
-                     : componentName;
-                  this.classes.set(registeredName, componentData.class);
-               }
+                if (componentData.class && !this.classes.has(componentName)) {
+                   const registeredName = componentData.isFramework
+                      ? `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,
+                         type: typeof componentData.class,
+                         isFunction: typeof componentData.class === 'function'
+                      });
+                   }
+                }
             } catch (error) {
                console.warn(`❌ Failed to register component ${componentName}:`, error);
             }
          }
 
          index += chunkSize;
-         if (index < entries.length) {
-            if (typeof requestIdleCallback === 'function') {
-               requestIdleCallback(processChunk);
-            } else {
-               setTimeout(processChunk, 0);
-            }
-         }
-      };
+          if (index < entries.length) {
+             if (typeof requestIdleCallback === 'function') {
+                requestIdleCallback(processChunk);
+             } else {
+                setTimeout(processChunk, 0);
+             }
+             return;
+          }
 
-      processChunk();
+          console.log(`✅ Bundle registration completed: ${metadata.componentCount} components processed`);
+          resolve(true);
+        };
 
-       console.log(`✅ Bundle registration completed: ${metadata.componentCount} components processed`);
-    }
+        processChunk();
+       });
+     }
 
     /**
      * Validates bundle structure before registering.

package/Slice/Slice.js

@@ -156,8 +156,22 @@ export default class Slice {
          delete props.id;
          delete props.sliceId;
 
-         const ComponentClass = this.controller.classes.get(componentName);
-         const componentInstance = new ComponentClass(props);
+       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,
+             isFunction: typeof ComponentClass === 'function',
+             classValue: ComponentClass
+          });
+       }
+       const componentInstance = new ComponentClass(props);
 
          if (componentIds.id && isVisual) componentInstance.id = componentIds.id;
          if (componentIds.sliceId) componentInstance.sliceId = componentIds.sliceId;
@@ -252,9 +266,9 @@ async function init() {
         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');
-    }
+     } catch (error) {
+       console.warn('Framework bundle not available, falling back to dynamic imports', error);
+     }
 
     if (!frameworkClasses) {
       const imports = await Promise.all([
@@ -283,11 +297,11 @@ async function init() {
           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;
-             }
+              if (criticalModule.SLICE_BUNDLE) {
+                 await window.slice.controller.registerBundle(criticalModule.SLICE_BUNDLE);
+                 window.slice.controller.loadedBundles.add('critical');
+                 window.slice.controller.criticalBundleLoaded = true;
+              }
           }
 
           const routeBundles = config?.routeBundles || {};
@@ -300,12 +314,12 @@ async function init() {
                 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 (routeModule.SLICE_BUNDLE) {
+                    await window.slice.controller.registerBundle(routeModule.SLICE_BUNDLE);
+                    window.slice.controller.loadedBundles.add(bundleName);
+                 }
+              }
+            };
 
           if (typeof requestIdleCallback === 'function') {
              requestIdleCallback(() => loadRouteBundles());

package/package.json

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