slicejs-web-framework 1.0.30 → 1.0.31

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

@@ -110,6 +110,14 @@ export default class Controller {
       return this.componentCategories.get(componentSliceId);
    }
 
+   /*
+      Fetches a text resource (HTML, CSS, theme, or styles) for a component.
+      @param {string} componentName - The name of the component.
+      @param {string} resourceType - The type of resource to fetch ('html', 'css', 'theme', or 'styles').
+      @param {string} [componentCategory] - Optional category of the component.
+      @param {string} [customPath] - Optional custom path to fetch the resource from.
+      @returns {Promise<string>} - A promise that resolves to the fetched text.
+   */
    async fetchText(componentName, resourceType, componentCategory, customPath) {
       try {
          const baseUrl = window.location.origin;
@@ -121,9 +129,20 @@ export default class Controller {
 
          let isVisual = resourceType === 'html' || resourceType === 'css';
 
-         if(isVisual) {
-            path = `${slice.paths.components[componentCategory].path}/${componentName}`; 
-            resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
+         if (isVisual) {
+            // ✅ CORREGIDO: Verificar que la categoría existe y agregar baseUrl
+            if (slice.paths.components[componentCategory]) {
+               path = `${baseUrl}${slice.paths.components[componentCategory].path}/${componentName}`;
+               resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
+            } else {
+               // ✅ FALLBACK: Para componentes Structural o categorías no configuradas
+               if (componentCategory === 'Structural') {
+                  path = `${baseUrl}/Slice/Components/Structural/${componentName}`;
+                  resourceType === 'html' ? path += `/${componentName}.html` : path += `/${componentName}.css`;
+               } else {
+                  throw new Error(`Component category '${componentCategory}' not found in paths configuration`);
+               }
+            }
          }
 
          if (resourceType === 'theme') {
@@ -134,35 +153,129 @@ export default class Controller {
             path = `${baseUrl}${slice.paths.styles}/${componentName}.css`;
          }
 
-         if(customPath){
+         if (customPath) {
             path = customPath;
          }
 
+         // ✅ MEJORADO: Logging para debugging
+         slice.logger.logInfo('Controller', `Fetching ${resourceType} from: ${path}`);
+
          const response = await fetch(path);
 
          if (!response.ok) {
             throw new Error(`Failed to fetch ${path}: ${response.statusText}`);
          }
 
-         const html = await response.text();
-         return html;
+         const content = await response.text();
+         slice.logger.logInfo('Controller', `Successfully fetched ${resourceType} for ${componentName}`);
+         return content;
       } catch (error) {
          slice.logger.logError('Controller', `Error fetching ${resourceType} for component ${componentName}:`, error);
-         // You can also re-throw the error if you want it to propagate
-         // throw error;
+         // ✅ CORREGIDO: Re-lanzar el error para que el debugger pueda manejarlo
+         throw error;
       }
    }
 
-  
-   
-
    setComponentProps(component, props) {
+      const ComponentClass = component.constructor;
+      const componentName = ComponentClass.name;
+
+      // ✅ Aplicar defaults si tiene static props
+      if (ComponentClass.props) {
+         this.applyDefaultProps(component, ComponentClass.props, props);
+      }
+
+      // ✅ Validar solo en desarrollo
+      if (ComponentClass.props && !slice.isProduction()) {
+         this.validatePropsInDevelopment(ComponentClass, props, componentName);
+      }
+
+      // ✅ CÓDIGO EXISTENTE: Aplicar props
       for (const prop in props) {
          component[`_${prop}`] = null;
          component[prop] = props[prop];
       }
    }
 
+   getComponentPropsForDebugger(component) {
+      const ComponentClass = component.constructor;
+      
+      if (ComponentClass.props) {
+         // Si tiene props estáticos, usar esos como referencia
+         return {
+            availableProps: Object.keys(ComponentClass.props),
+            propsConfig: ComponentClass.props,
+            usedProps: this.extractUsedProps(component, ComponentClass.props)
+         };
+      } else {
+         // Si no tiene props estáticos, usar modo legacy
+         return {
+            availableProps: this.extractUsedProps(component),
+            propsConfig: null,
+            usedProps: this.extractUsedProps(component)
+         };
+      }
+   }
+
+   applyDefaultProps(component, staticProps, providedProps) {
+      Object.entries(staticProps).forEach(([prop, config]) => {
+         if (config.default !== undefined && !(prop in (providedProps || {}))) {
+            component[`_${prop}`] = null;
+            component[prop] = config.default;
+         }
+      });
+   }
+
+   validatePropsInDevelopment(ComponentClass, providedProps, componentName) {
+      const staticProps = ComponentClass.props;
+      const usedProps = Object.keys(providedProps || {});
+      
+      const availableProps = Object.keys(staticProps);
+      const unknownProps = usedProps.filter(prop => !availableProps.includes(prop));
+      
+      if (unknownProps.length > 0) {
+         slice.logger.logWarning(
+            'PropsValidator', 
+            `${componentName}: Unknown props [${unknownProps.join(', ')}]. Available: [${availableProps.join(', ')}]`
+         );
+      }
+
+      const requiredProps = Object.entries(staticProps)
+         .filter(([_, config]) => config.required)
+         .map(([prop, _]) => prop);
+      
+      const missingRequired = requiredProps.filter(prop => !(prop in (providedProps || {})));
+      if (missingRequired.length > 0) {
+         slice.logger.logError(
+            componentName,
+            `Missing required props: [${missingRequired.join(', ')}]`
+         );
+      }
+   }
+
+   extractUsedProps(component, staticProps = null) {
+      const usedProps = {};
+      
+      if (staticProps) {
+         // Si tiene props estáticos, buscar solo esos
+         Object.keys(staticProps).forEach(prop => {
+            if (component[prop] !== undefined) {
+               usedProps[prop] = component[prop];
+            }
+         });
+      } else {
+         // Modo legacy: buscar cualquier prop que empiece con _
+         Object.getOwnPropertyNames(component).forEach(key => {
+            if (key.startsWith('_') && key !== '_isActive') {
+               const propName = key.substring(1);
+               usedProps[propName] = component[propName];
+            }
+         });
+      }
+      
+      return usedProps;
+   }
+
    destroyComponent(component) {
       const sliceId = component.sliceId;
       this.activeComponents.delete(sliceId);
@@ -172,4 +285,4 @@ export default class Controller {
 
 function getRelativePath(levels) {
    return '../'.repeat(levels);
-}
+}