slicejs-web-framework 1.0.5 → 1.0.7

package/node_modules/slicejs-web-framework/Slice/Components/Structural/Logger/Log.js

@@ -1,10 +0,0 @@
-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/node_modules/slicejs-web-framework/Slice/Components/Structural/Logger/Logger.js

@@ -1,104 +0,0 @@
-import Log from './Log.js';
-
-export default class Logger {
-   constructor() {
-      this.logs = [];
-      this.logEnabled = slice.loggerConfig.enabled;
-      this.showLogsConfig = slice.loggerConfig.showLogs;
-      console.log(slice.loggerConfig)
-
-      this.showLog = function showLog(log) {
-         if (!this.showLogsConfig) return;
-
-         const logType = log.logType;
-
-         Object.keys(this.showLogsConfig).forEach((logConfig) => {
-            if (this.showLogsConfig[logConfig][logType] === true) {
-               switch (logConfig) {
-                  case 'console':
-                     switch (logType) {
-                        case logTypes.ERROR:
-                           console.error(
-                              `\x1b[31mERROR\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message} - ${log.error}`
-                           );
-                           break;
-                        case logTypes.WARNING:
-                           console.warn(
-                              `\x1b[33m⚠ WARNING\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
-                           );
-                           break;
-                        case logTypes.INFO:
-                           console.log(
-                              `\x1b[32m✔ INFO\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
-                           );
-                           break;
-                        default:
-                           console.log(
-                              `\x1b[37mUNKNOWN\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
-                           );
-                     }
-                     break;
-               }
-            }
-         });
-      };
-   }
-
-   createLog(logType, componentSliceId, message, error = null) {
-      if (!this.logEnabled) return;
-      let componentName;
-
-      try {
-         componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name;
-      } catch (error) {
-         componentName = componentSliceId;
-      }
-
-      let componentCategory = slice.controller.getComponentCategory(componentName);
-      if (componentSliceId === 'Slice' || componentSliceId === 'ThemeManager') componentCategory = 'Structural';
-      const log = new Log(logType, componentCategory, componentSliceId, message, error);
-      this.logs.push(log);
-      this.showLog(log);
-   }
-
-   logError(componentSliceId, message, error) {
-      this.createLog(logTypes.ERROR, componentSliceId, message, error);
-   }
-
-   logWarning(componentSliceId, message) {
-      this.createLog(logTypes.WARNING, componentSliceId, message);
-   }
-
-   logInfo(componentSliceId, message) {
-      this.createLog(logTypes.INFO, componentSliceId, message);
-   }
-
-   getLogs() {
-      return this.logs;
-   }
-
-   clearLogs() {
-      this.logs = [];
-   }
-
-   getLogsByLogType(type) {
-      return this.logs.filter((log) => log.logType === type);
-   }
-
-   getLogsByComponentCategory(componentCategory) {
-      return this.logs.filter((log) => log.componentCategory === componentCategory);
-   }
-
-   getLogsByComponent(componentSliceId) {
-      return this.logs.filter((log) => log.componentSliceId === componentSliceId);
-   }
-}
-
-// En esta misma idea, se tiene que tomar en cuenta que el componente de ToastAlert será un toastProvider y que solo debe
-// haber un toastProvider en la página, por lo que se debe implementar un Singleton para el ToastProvider
-
-const logTypes = {
-   ERROR: 'error',
-   WARNING: 'warning',
-   INFO: 'info',
-};

package/node_modules/slicejs-web-framework/Slice/Components/Structural/Router/Router.js

@@ -1,152 +0,0 @@
-
-export default class Router {
-   constructor(routes) {
-      this.routes = routes;
-      this.activeRoute = null;
-      this.pathToRouteMap = this.createPathToRouteMap(routes);
-   }
-
-   async init() {
-      await this.loadInitialRoute();
-      window.addEventListener('popstate', this.onRouteChange.bind(this));
-   }
-
-   createPathToRouteMap(routes, basePath = '') {
-      const pathToRouteMap = new Map();
-  
-      for (const route of routes) {
-          const fullPath = `${basePath}${route.path}`.replace(/\/+/g, '/'); // Normaliza las barras diagonales
-          pathToRouteMap.set(fullPath, { ...route, fullPath });
-  
-          // Si tiene rutas secundarias, también agregarlas al mapa
-          if (route.children) {
-              const childPathToRouteMap = this.createPathToRouteMap(route.children, fullPath);
-              for (const [childPath, childRoute] of childPathToRouteMap.entries()) {
-                  pathToRouteMap.set(childPath, childRoute);
-              }
-          }
-      }
-  
-      return pathToRouteMap;
-  }
-
-   async renderRoutesComponentsInPage() {
-      const routeContainers = document.querySelectorAll('slice-route, slice-multi-route');
-      let routerContainersFlag = false;
-
-      for (const routeContainer of routeContainers) {
-         let response = await routeContainer.renderIfCurrentRoute();
-         if (response) {
-            this.activeRoute = routeContainer.props;
-            routerContainersFlag = true;
-         }
-      }
-
-      return routerContainersFlag;
-   }
-
-   async onRouteChange() {
-      const path = window.location.pathname;
-      const routeContainersFlag = await this.renderRoutesComponentsInPage();
-
-      if (routeContainersFlag) {
-         return;
-      }
-
-      const { route, params } = this.matchRoute(path);
-      if (route) {
-         await this.handleRoute(route, params);
-      }
-   }
-
-   async navigate(path) {
-      window.history.pushState({}, path, window.location.origin + path);
-      await this.onRouteChange();
-   }
-
-   async handleRoute(route, params) {
-      const targetElement = document.querySelector('#app');
-      const existingComponent = slice.controller.getComponent(`route-${route.component}`);
-
-      if (slice.loading) {
-         slice.loading.start();
-      }
-
-      if (existingComponent) {
-         targetElement.innerHTML = '';
-         if (existingComponent.update) {
-            existingComponent.props = { ...existingComponent.props, ...params };
-            await existingComponent.update();
-         }
-         targetElement.appendChild(existingComponent);
-      } else {
-         const component = await slice.build(route.component, {
-            params,
-            sliceId: `route-${route.component}`,
-         });
-         targetElement.innerHTML = '';
-         targetElement.appendChild(component);
-      }
-
-      if (slice.loading) {
-         slice.loading.stop();
-      }
-
-      slice.router.activeRoute = route;
-   }
-
-   async loadInitialRoute() {
-      const path = window.location.pathname;
-      const { route, params } = this.matchRoute(path);
-
-      await this.handleRoute(route, params);
-
-      await this.renderRoutesComponentsInPage();
-   }
-
-   matchRoute(path) {
-      // 1. Buscar coincidencia exacta en el mapa
-      const exactMatch = this.pathToRouteMap.get(path);
-      if (exactMatch) {
-         return { route: exactMatch, params: {} };
-      }
-   
-      // 2. Buscar coincidencias en rutas con parámetros (que contengan la sintaxis `${...}`)
-      for (const [routePattern, route] of this.pathToRouteMap.entries()) {
-         if (routePattern.includes('${')) {
-            const { regex, paramNames } = this.compilePathPattern(routePattern);
-            const match = path.match(regex);
-            if (match) {
-               const params = {};
-               paramNames.forEach((name, i) => {
-                  params[name] = match[i + 1]; // El grupo 0 es la coincidencia completa
-               });
-               return { route, params };
-            }
-         }
-      }
-   
-      // 3. Si no hay coincidencias, retornar la ruta 404 (suponiendo que exista)
-      const notFoundRoute = this.pathToRouteMap.get('/404');
-      return { route: notFoundRoute, params: {} };
-   }
-
-   /**
- * Convierte un patrón de ruta con parámetros en una expresión regular.
- * Por ejemplo, el patrón "/User/${id}" se convertirá en:
- *   - regex: /^\/User\/([^/]+)$/
- *   - paramNames: ['id']
- */
-compilePathPattern(pattern) {
-   const paramNames = [];
-   // Reemplaza cada aparición de ${param} por un grupo capturador que coincida con cualquier cosa
-   // que no sea una barra (para que solo capture hasta la siguiente barra)
-   const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
-      paramNames.push(paramName);
-      return '([^/]+)';
-   }) + '$';
-
-   return { regex: new RegExp(regexPattern), paramNames };
-}
-
-}

package/node_modules/slicejs-web-framework/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -1,49 +0,0 @@
-
-export default class StylesManager {
-   constructor() {
-      this.componentStyles = document.createElement('style');
-      this.componentStyles.id = 'slice-component-styles';
-      document.head.appendChild(this.componentStyles);
-
-   }
-
-   async init() {
-      for (let i = 0; i < slice.stylesConfig.requestedStyles.length; i++) {
-         const styles = await slice.controller.fetchText(slice.stylesConfig.requestedStyles[i], 'styles');
-         this.componentStyles.innerText += styles;
-         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`);
-
-         this.themeManager = new module.default();
-         let theme;
-
-         if (slice.themeConfig.saveThemeLocally) {
-            theme = localStorage.getItem('sliceTheme');
-         }
-
-         if (!theme) {
-            theme = slice.themeConfig.defaultTheme;
-         }
-
-         if (slice.themeConfig.useBrowserTheme) {
-            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
-            theme = browserTheme;
-         }
-
-         await this.themeManager.applyTheme(theme);
-      }
-   }
-
-   //add a method that will add css as text to the componentStyles element
-   appendComponentStyles(cssText) {
-      this.componentStyles.appendChild(document.createTextNode(cssText));
-   }
-
-   registerComponentStyles(componentName, cssText) {
-      slice.controller.requestedStyles.add(componentName);
-      this.appendComponentStyles(cssText);
-   }
-}

package/node_modules/slicejs-web-framework/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -1,56 +0,0 @@
-export default class ThemeManager {
-   constructor() {
-      this.themeStyles = new Map();
-      this.currentTheme = null;
-      this.themeStyle = document.createElement('style');
-      document.head.appendChild(this.themeStyle);
-   }
-
-   async applyTheme(themeName) {
-      if (!themeName) {
-         slice.logger.logError('ThemeManager', 'Invalid theme name');
-         return;
-      }
-
-      if (!this.themeStyles.has(themeName)) {
-         await this.loadThemeCSS(themeName);
-      } else {
-         this.setThemeStyle(themeName);
-         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
-      }
-   }
-
-   async loadThemeCSS(themeName) {
-      let themeContent =
-         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
-
-      if (!themeContent) {
-         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
-         return;
-      }
-
-      this.themeStyles.set(themeName, themeContent);
-      this.setThemeStyle(themeName);
-      this.saveThemeLocally(themeName, themeContent);
-   }
-
-   saveThemeLocally(themeName, themeContent) {
-      if (slice.themeConfig.saveThemeLocally) {
-         localStorage.setItem('sliceTheme', themeName);
-         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
-         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
-      }
-   }
-
-   removeCurrentTheme() {
-      if (this.currentTheme) {
-         this.themeStyle.textContent = '';
-      }
-   }
-
-   setThemeStyle(themeName) {
-      this.themeStyle.textContent = this.themeStyles.get(themeName);
-      this.currentTheme = themeName;
-      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
-   }
-}

package/node_modules/slicejs-web-framework/Slice/Slice.js

@@ -1,224 +0,0 @@
-import Controller from './Components/Structural/Controller/Controller.js';
-import StylesManager from './Components/Structural/StylesManager/StylesManager.js';
-
-export default class Slice {
-   constructor(sliceConfig) {
-      this.controller = new Controller();
-      this.stylesManager = new StylesManager();
-      this.paths = sliceConfig.paths;
-      this.themeConfig = sliceConfig.themeManager;
-      this.stylesConfig = sliceConfig.stylesManager;
-      this.loggerConfig = sliceConfig.logger;
-      this.debuggerConfig = sliceConfig.debugger;
-      this.loadingConfig = sliceConfig.loading;
-   }
-
-   async getClass(module) {
-      try {
-         const { default: myClass } = await import(module);
-         return await myClass;
-      } catch (error) {
-         this.logger.logError('Slice', `Error loading class ${module}`, error);
-      }
-   }
-
-   getComponent(componentSliceId) {
-      return this.controller.activeComponents.get(componentSliceId);
-   }
-
-   async build(componentName, props = {}) {
-      if (!componentName) {
-         this.logger.logError('Slice', null, `Component name is required to build a component`);
-         return null;
-      }
-
-      if (typeof componentName !== 'string') {
-         this.logger.logError('Slice', null, `Component name must be a string`);
-         return null;
-      }
-
-      if (!this.controller.componentCategories.has(componentName)) {
-         this.logger.logError('Slice', null, `Component ${componentName} not found in components.js file`);
-         return null;
-      }
-
-      let componentCategory = this.controller.componentCategories.get(componentName);
-
-      if (componentCategory === 'Structural') {
-         this.logger.logError(
-            'Slice',
-            null,
-            `Component ${componentName} is a Structural component and cannot be built`
-         );
-         return null;
-      }
-
-      let isVisual = slice.paths.components[componentCategory].type === "Visual";     
-      let modulePath = `${slice.paths.components[componentCategory].path}/${componentName}/${componentName}.js`;
-
-      // Load template, class, and CSS concurrently if needed
-      try {
-         const loadTemplate =
-            isVisual && !this.controller.templates.has(componentName)
-               ? this.controller.fetchText(componentName, 'html', componentCategory)
-               : Promise.resolve(null);
-
-         const loadClass = !this.controller.classes.has(componentName)
-            ? this.getClass(modulePath)
-            : Promise.resolve(null);
-
-         const loadCSS =
-            isVisual && !this.controller.requestedStyles.has(componentName)
-               ? this.controller.fetchText(componentName, 'css', componentCategory)
-               : Promise.resolve(null);
-
-         const [html, ComponentClass, css] = await Promise.all([loadTemplate, loadClass, loadCSS]);
-
-         if (html || html === '') {
-            const template = document.createElement('template');
-            template.innerHTML = html;
-            this.controller.templates.set(componentName, template);
-            this.logger.logInfo('Slice', `Template ${componentName} loaded`);
-         }
-
-         if (ComponentClass) {
-            this.controller.classes.set(componentName, ComponentClass);
-            this.logger.logInfo('Slice', `Class ${componentName} loaded`);
-         }
-
-         if (css) {
-            this.stylesManager.registerComponentStyles(componentName, css);
-            this.logger.logInfo('Slice', `CSS ${componentName} loaded`);
-         }
-      } catch (error) {
-         console.log(error);
-         this.logger.logError('Slice', `Error loading resources for ${componentName}`, error);
-         return null;
-      }
-
-      // Create instance
-      try {
-         let componentIds = {};
-         if (props.id) componentIds.id = props.id;
-         if (props.sliceId) componentIds.sliceId = props.sliceId;
-
-         delete props.id;
-         delete props.sliceId;
-
-         const ComponentClass = this.controller.classes.get(componentName);
-         const componentInstance = new ComponentClass(props);
-
-         if (componentIds.id && isVisual) componentInstance.id = componentIds.id;
-         if (componentIds.sliceId) componentInstance.sliceId = componentIds.sliceId;
-
-         if (!this.controller.verifyComponentIds(componentInstance)) {
-            this.logger.logError('Slice', `Error registering instance ${componentName} ${componentInstance.sliceId}`);
-            return null;
-         }
-
-         if (componentInstance.init) await componentInstance.init();
-
-         if (slice.debuggerConfig.enabled && isVisual) {
-            this.debugger.attachDebugMode(componentInstance);
-         }
-
-         this.controller.registerComponent(componentInstance);
-         this.controller.registerComponentsRecursively(componentInstance);
-
-         this.logger.logInfo('Slice', `Instance ${componentInstance.sliceId} created`);
-         return componentInstance;
-      } catch (error) {
-         console.log(error);
-         this.logger.logError('Slice', `Error creating instance ${componentName}`, error);
-         return null;
-      }
-   }
-
-   async setTheme(themeName) {
-      await this.stylesManager.themeManager.applyTheme(themeName);
-   }
-
-   get theme() {
-      return this.stylesManager.themeManager.currentTheme;
-   }
-
-   attachTemplate(componentInstance) {
-      this.controller.loadTemplateToComponent(componentInstance);
-   }
-
-   
-}
-
-
-async function loadConfig(){
-   try {
-      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}`);
-      return null;
-  }
-}
-
-async function init() {
-
-   const sliceConfig = await loadConfig();
-   if (!sliceConfig) {
-      //Display error message in console with colors and alert in english
-      console.error('%c⛔️ Error loading Slice configuration ⛔️', 'color: red; font-size: 20px;');
-      alert('Error loading Slice configuration');
-      return;
-   }
-   
-
-   window.slice = new Slice(sliceConfig);
-
-   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();
-   } else {
-      window.slice.logger = {
-         logError: () => {},
-         logWarning: () => {},
-         logInfo: () => {},
-      };
-   }
-
-   if (sliceConfig.debugger.enabled) {
-      const DebuggerModule = 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.loading.enabled) {
-      const loading = await window.slice.build('Loading', {});
-      window.slice.loading = loading;
-   }
-   await window.slice.stylesManager.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);
-   await window.slice.router.init();
-   
-
-   if (sliceConfig.translator.enabled) {
-      const translator = await window.slice.build('Translator');
-      window.slice.translator = translator;
-      window.slice.logger.logInfo('Slice', 'Translator succesfuly enabled');
-   }
-
-
-}
-
-await init();

package/node_modules/slicejs-web-framework/node_modules/.bin/mime

@@ -1,16 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../mime/cli.js" "$@"
-else 
-  exec node  "$basedir/../mime/cli.js" "$@"
-fi

package/node_modules/slicejs-web-framework/node_modules/.bin/mime.cmd

@@ -1,17 +0,0 @@
-@ECHO off
-GOTO start
-:find_dp0
-SET dp0=%~dp0
-EXIT /b
-:start
-SETLOCAL
-CALL :find_dp0
-
-IF EXIST "%dp0%\node.exe" (
-  SET "_prog=%dp0%\node.exe"
-) ELSE (
-  SET "_prog=node"
-  SET PATHEXT=%PATHEXT:;.JS;=;%
-)
-
-endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\mime\cli.js" %*

package/node_modules/slicejs-web-framework/node_modules/.bin/mime.ps1

@@ -1,28 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../mime/cli.js" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../mime/cli.js" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../mime/cli.js" $args
-  } else {
-    & "node$exe"  "$basedir/../mime/cli.js" $args
-  }
-  $ret=$LASTEXITCODE
-}
-exit $ret

package/node_modules/slicejs-web-framework/node_modules/.bin/prettier

@@ -1,16 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../prettier/bin/prettier.cjs" "$@"
-else 
-  exec node  "$basedir/../prettier/bin/prettier.cjs" "$@"
-fi