slicejs-cli 3.4.1 → 3.5.1

package/tests/e2e/fixtures/components/Visual/MultiRoute/MultiRoute.js

@@ -0,0 +1,167 @@
+export default class MultiRoute extends HTMLElement {
+   constructor(props) {
+      super();
+      this.props = props;
+      this.renderedComponents = new Map(); // Cache para componentes renderizados
+   }
+
+   init() {
+      if (!this.props.routes || !Array.isArray(this.props.routes)) {
+         slice.logger.logError('MultiRoute', 'No valid routes array provided in props.');
+         return;
+      }
+      // NOTE: MultiRoute does NOT register its routes in the Router. `routes.js` is the single
+      // source of truth for what the Router knows. The Router resolves the URL on first load /
+      // refresh / deep-link BEFORE this component mounts, so a path that only lived inside a
+      // MultiRoute would 404 on a direct load — incoherent. Declare every section path in
+      // `routes.js` (pointing at the shell); MultiRoute just chooses which one to show.
+   }
+
+   /**
+    * Encuentra una ruta que coincida con el path actual
+    * Soporta rutas estáticas y dinámicas con parámetros ${param}
+    */
+   matchRoute(currentPath) {
+      // Normalize trailing slash so '/about/' behaves like '/about' (keep root '/').
+      currentPath = currentPath.length > 1 ? currentPath.replace(/\/+$/, '') : currentPath;
+
+      // 1. Match exacto, case-insensitive ('/About' coincide con '/about')
+      const lowerPath = currentPath.toLowerCase();
+      const exactMatch = this.props.routes.find(
+         (route) => (route.path.length > 1 ? route.path.replace(/\/+$/, '') : route.path).toLowerCase() === lowerPath
+      );
+      if (exactMatch) {
+         return { route: exactMatch, params: {} };
+      }
+
+      // 2. Si no hay match exacto, buscar rutas dinámicas
+      for (const route of this.props.routes) {
+         if (route.path.includes('${')) {
+            const { regex, paramNames } = this.compilePathPattern(route.path);
+            const match = currentPath.match(regex);
+            
+            if (match) {
+               // Extraer parámetros de la URL
+               const params = {};
+               paramNames.forEach((name, i) => {
+                  params[name] = match[i + 1];
+               });
+               
+               return { route, params };
+            }
+         }
+      }
+
+      // 3. No se encontró ninguna ruta
+      return { route: null, params: {} };
+   }
+
+   /**
+    * Convierte un patrón de ruta con ${param} en una expresión regular
+    * Ejemplo: "/user/${id}" -> /^\/user\/([^/]+)$/
+    */
+   compilePathPattern(pattern) {
+      const paramNames = [];
+      const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         paramNames.push(paramName);
+         return '([^/]+)'; // Captura cualquier caracter excepto /
+      }) + '$';
+
+      return {
+         // 'i': case-insensitive path matching. Captured param values keep their original case.
+         regex: new RegExp(regexPattern, 'i'),
+         paramNames
+      };
+   }
+
+   async render() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch, params } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         const { component, metadata } = routeMatch;
+
+         if (this.renderedComponents.has(component)) {
+            const cachedComponent = this.renderedComponents.get(component);
+            this.innerHTML = '';
+
+            // Actualizar props del componente cacheado
+            if (cachedComponent.props) {
+               cachedComponent.props = {
+                  ...cachedComponent.props,
+                  params: params,
+                  metadata: metadata || {} // ✅ Incluir metadata
+               };
+            }
+
+            // Si el componente en caché tiene un método update, lo ejecutamos
+            if (cachedComponent.update) {
+               await cachedComponent.update();
+            }
+
+            this.appendChild(cachedComponent);
+         } else {
+            if (!slice.controller.componentCategories.has(component)) {
+               slice.logger.logError(`${this.sliceId}`, `Component ${component} not found`);
+               return;
+            }
+
+            // Crear el componente con los parámetros y metadata de la ruta
+            const newComponent = await slice.build(component, {
+               params: params,
+               metadata: metadata || {}
+            });
+            
+            this.innerHTML = '';
+            this.appendChild(newComponent);
+            this.renderedComponents.set(component, newComponent);
+         }
+
+         // Emitir evento personalizado cuando el renderizado está completo
+         this.dispatchEvent(new CustomEvent('route-rendered', {
+            bubbles: true,
+            detail: { 
+               component, 
+               path: currentPath,
+               params: params,
+               metadata: metadata || {} // ✅ Incluir metadata en el evento
+            }
+         }));
+      } else {
+         // Limpiamos el contenido si no hay una coincidencia de ruta
+         this.innerHTML = '';
+      }
+   }
+
+   async renderIfCurrentRoute() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         await this.render();
+         return true;
+      }
+      return false;
+   }
+
+   removeComponent() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         const { component } = routeMatch;
+         this.renderedComponents.delete(component);
+         this.innerHTML = '';
+      }
+   }
+
+   /**
+    * Cleanup cuando el componente se destruye
+    */
+   destroy() {
+      this.renderedComponents.clear();
+      this.innerHTML = '';
+   }
+}
+
+customElements.define('slice-multi-route', MultiRoute);

package/tests/e2e/fixtures/components/Visual/Navbar/Navbar.css

@@ -0,0 +1,116 @@
+.slice_nav_header {
+  font-family: var(--font-family);
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0px 0px 10px #00000050;
+  background-color: var(--primary-color);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+.nav_bar_fixed {
+  z-index: 100;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: fixed;
+}
+.slice_nav_bar {
+  transition: transform 0.3s ease;
+  width: 100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  left: 0;
+  top: 0;
+}
+.nav_bar_menu {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+}
+.slice_nav_header .item {
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+}
+.anim-item {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 0%;
+  height: 2.5px;
+  border-radius: 5px;
+  background-color: var(--primary-color-contrast);
+  transition: width 0.3s ease, left 0.3s ease;
+}
+.slice_nav_header li {
+  margin: 25px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.slice_nav_header li:hover .anim-item {
+  width: 100%;
+  left: 0;
+}
+.slice_nav_header .logo_container {
+  padding: 10px;
+}
+.logo_container img {
+  pointer-events: none;
+  user-select: none;
+  max-height: 50px;
+  max-width: 200px;
+}
+.nav_bar_buttons {
+  justify-content: flex-end;
+  display: flex;
+}
+
+.mobile_menu_button,
+.mobile_close_menu {
+  visibility: hidden;
+  position: absolute;
+  right: 0px;
+  margin-right: 25px;
+}
+.mobile_close_menu {
+  top: 25px;
+}
+@media only screen and (max-width: 1020px) {
+  .slice_nav_bar {
+    z-index: 1;
+    list-style: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--primary-color);
+    transform: translateX(100%);
+  }
+  .nav_bar_menu,
+  .nav_bar_buttons {
+    flex-direction: column;
+  }
+  .mobile_menu_button,
+  .mobile_close_menu {
+    visibility: visible;
+  }
+}

package/tests/e2e/fixtures/components/Visual/Navbar/Navbar.html

@@ -0,0 +1,44 @@
+<header class="slice_nav_header">
+  <a class="logo_container"></a>
+  <nav class="slice_nav_bar">
+    <div class="nav_bar_menu"></div>
+    <div class="nav_bar_buttons"></div>
+    <div class="mobile_close_menu">
+      <svg
+        class="w-6 h-6 text-gray-800 dark:text-white"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="var(--primary-color-contrast)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18 17.94 6M18 18 6.06 6"
+        />
+      </svg>
+    </div>
+  </nav>
+  <div class="mobile_menu_button">
+    <svg
+      class="w-6 h-6 text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="var(--primary-color-contrast)"
+        stroke-linecap="round"
+        stroke-width="3"
+        d="M12 6h.01M12 12h.01M12 18h.01"
+      />
+    </svg>
+  </div>
+</header>

package/tests/e2e/fixtures/components/Visual/Navbar/Navbar.js

@@ -0,0 +1,180 @@
+export default class Navbar extends HTMLElement {
+
+   static props = {
+      logo: { 
+         type: 'object', 
+         default: null, 
+         required: false 
+      },
+      items: { 
+         type: 'array', 
+         default: [], 
+         required: false 
+      },
+      buttons: { 
+         type: 'array', 
+         default: [], 
+         required: false 
+      },
+      position: { 
+         type: 'string', 
+         default: 'static', 
+         required: false 
+      },
+      direction: { 
+         type: 'string', 
+         default: 'normal', 
+         required: false 
+      }
+   };
+
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$header = this.querySelector('.slice_nav_header');
+      this.$navBar = this.querySelector('.slice_nav_bar');
+      this.$menu = this.querySelector('.nav_bar_menu');
+      this.$buttonsContainer = this.querySelector('.nav_bar_buttons');
+      this.$logoContainer = this.querySelector('.logo_container');
+      this.$mobileMenu = this.querySelector('.slice_mobile_menu');
+      this.$mobileButton = this.querySelector('.mobile_menu_button');
+      this.$closeMenu = this.querySelector('.mobile_close_menu');
+
+      this.$mobileButton.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(0%)';
+      });
+
+      this.$closeMenu.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(100%)';
+      });
+
+      slice.controller.setComponentProps(this, props);
+   }
+
+   async init() {
+      if (this.items && this.items.length > 0) {
+         await this.addItems(this.items);
+      }
+      if (this.buttons && this.buttons.length > 0) {
+         this.buttons.forEach(async (item) => {
+            await this.addButton(item, this.$buttonsContainer);
+         });
+      }
+
+      if (window.screen.width >= 1020 && this.items && this.logo && this.buttons) {
+         this.$menu.style.maxWidth = '60%';
+      }
+   }
+
+   async addItems(items) {
+      for (let i = 0; i < items.length; i++) {
+         await this.addItem(items[i], this.$menu);
+      }
+   }
+
+   get position() {
+      return this._position;
+   }
+
+   set position(value) {
+      this._position = value;
+      if (value === 'fixed') {
+         this.classList.add('nav_bar_fixed');
+      }
+   }
+
+   get logo() {
+      return this._logo;
+   }
+
+   set logo(value) {
+      this._logo = value;
+      // ✅ CORREGIDO: Validar que value no sea null antes de usarlo
+      if (!value) return;
+      
+      const img = document.createElement('img');
+      img.src = value.src;
+      this.$logoContainer.appendChild(img);
+      this.$logoContainer.href = value.path;
+   }
+
+   get items() {
+      return this._items;
+   }
+
+   set items(values) {
+      this._items = values;
+   }
+
+   get buttons() {
+      return this._buttons;
+   }
+
+   set buttons(values) {
+      this._buttons = values;
+   }
+
+   get direction() {
+      return this._direction;
+   }
+
+   set direction(value) {
+      this._direction = value;
+      // ✅ MEJORADO: Validar valor antes de aplicar clase
+      if (value === 'reverse') {
+         this.$header.classList.add('direction-row-reverse');
+      }
+   }
+
+   async addItem(value, addTo) {
+      const item = document.createElement('li');
+      const hover = document.createElement('div');
+      hover.classList.add('anim-item');
+      
+      if (!value.type) {
+         value.type = 'text';
+      }
+      
+      if (value.type === 'text') {
+         const link = await slice.build('Link', {
+            text: value.text,
+            path: value.path,
+            classes: 'item',
+         });
+         item.appendChild(link);
+      }
+      
+      if (value.type === 'dropdown') {
+         const d = await slice.build('DropDown', {
+            label: value.text,
+            options: value.options,
+         });
+         d.classList.add('item');
+         item.appendChild(d);
+      }
+      
+      item.appendChild(hover);
+      addTo.appendChild(item);
+   }
+
+   async addButton(value, addTo) {
+      if (!value.color) {
+         value.color = {
+            text: 'var(--primary-color-rgb)',
+            background: 'var(--primary-background-color)',
+         };
+      }
+      
+      const button = await slice.build('Button', {
+         value: value.value,
+         customColor: value.color,
+         icon: value.icon,
+         onClick: value.onClick ?? value.onClickCallback,
+      });
+      
+      addTo.appendChild(button);
+   }
+}
+
+window.customElements.define('slice-nav-bar', Navbar);

package/tests/e2e/fixtures/components/Visual/NotFound/NotFound.js

@@ -0,0 +1,20 @@
+export default class NotFound extends HTMLElement {
+
+   static props = {
+      // No props needed for this component
+   };
+
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+   }
+
+   init() {
+      //change title of the page
+      document.title = '404 - Not Found';
+   }
+}
+
+customElements.define('slice-notfound', NotFound);

package/tests/e2e/fixtures/components/Visual/Route/Route.js

@@ -0,0 +1,181 @@
+export default class Route extends HTMLElement {
+   constructor(props) {
+      super();
+      this.props = props;
+      this.rendered = false;
+   }
+
+   init() {
+      if (!this.props.path) {
+         this.props.path = ' ';
+      }
+
+      // If no component is given, derive it from routes.js (the Router's pathToRouteMap).
+      if (!this.props.component) {
+         this.props.component = slice.router.pathToRouteMap.get(this.props.path)?.component || ' ';
+      }
+      // NOTE: Route does NOT register itself in the Router. `routes.js` is the single source of
+      // truth for what the Router knows. The Router resolves the URL on first load / refresh /
+      // deep-link BEFORE this component mounts, so a path that only lived in a Route would 404
+      // on a direct load. Declare every path in `routes.js`.
+   }
+
+   get path() {
+      return this.props.path;
+   }
+
+   set path(value) {
+      this.props.path = value;
+   }
+
+   get component() {
+      return this.props.component;
+   }
+
+   set component(value) {
+      this.props.component = value;
+   }
+
+   /**
+    * Verifica si el path actual coincide con el path del Route
+    * Soporta rutas estáticas y dinámicas con parámetros ${param}
+    */
+   matchesCurrentPath() {
+      // Normalize trailing slash so '/about/' behaves like '/about' (keep root '/').
+      const raw = window.location.pathname;
+      const currentPath = raw.length > 1 ? raw.replace(/\/+$/, '') : raw;
+      const routePath = this.props.path.length > 1 ? this.props.path.replace(/\/+$/, '') : this.props.path;
+
+      // 1. Match exacto, case-insensitive ('/About' coincide con '/about')
+      if (routePath.toLowerCase() === currentPath.toLowerCase()) {
+         return { matches: true, params: {} };
+      }
+
+      // 2. Si la ruta tiene parámetros dinámicos ${param}
+      if (this.props.path.includes('${')) {
+         const { regex, paramNames } = this.compilePathPattern(this.props.path);
+         const match = currentPath.match(regex);
+         
+         if (match) {
+            // Extraer parámetros de la URL
+            const params = {};
+            paramNames.forEach((name, i) => {
+               params[name] = match[i + 1];
+            });
+            
+            return { matches: true, params };
+         }
+      }
+
+      return { matches: false, params: {} };
+   }
+
+   /**
+    * Convierte un patrón de ruta con ${param} en una expresión regular
+    * Ejemplo: "/user/${id}" -> /^\/user\/([^/]+)$/
+    */
+   compilePathPattern(pattern) {
+      const paramNames = [];
+      const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         paramNames.push(paramName);
+         return '([^/]+)'; // Captura cualquier caracter excepto /
+      }) + '$';
+
+      return {
+         // 'i': case-insensitive path matching. Captured param values keep their original case.
+         regex: new RegExp(regexPattern, 'i'),
+         paramNames
+      };
+   }
+
+   async render(params = {}) {
+      const metadata = this.props.metadata || {};
+
+      if (Route.componentCache[this.props.component]) {
+         const cachedComponent = Route.componentCache[this.props.component];
+         this.innerHTML = '';
+
+         // Actualizar props del componente cacheado
+         if (cachedComponent.props) {
+            cachedComponent.props = {
+               ...cachedComponent.props,
+               params: params,
+               metadata: metadata // ✅ Incluir metadata
+            };
+         }
+
+         if (cachedComponent.update) {
+            await cachedComponent.update();
+         }
+
+         this.appendChild(cachedComponent);
+      } else {
+         if (!this.props.component) {
+            return;
+         }
+
+         if (!slice.controller.componentCategories.has(this.props.component)) {
+            slice.logger.logError(`${this.sliceId}`, `Component ${this.props.component} not found`);
+            return;
+         }
+
+         // Crear el componente con los parámetros y metadata de la ruta
+         const component = await slice.build(this.props.component, {
+            sliceId: this.props.component,
+            params: params, // ✅ Pasar los parámetros al componente
+            metadata: metadata // ✅ Pasar metadata al componente
+         });
+
+         this.innerHTML = '';
+         this.appendChild(component);
+         Route.componentCache[this.props.component] = component;
+      }
+      this.rendered = true;
+   }
+
+   async renderIfCurrentRoute() {
+      const { matches, params } = this.matchesCurrentPath();
+      
+      if (matches) {
+         if (this.rendered) {
+            if (Route.componentCache[this.props.component]) {
+               const cachedComponent = Route.componentCache[this.props.component];
+               
+               // Actualizar params y metadata en el componente cacheado
+               if (cachedComponent.props) {
+                  cachedComponent.props = {
+                     ...cachedComponent.props,
+                     params: params,
+                     metadata: this.props.metadata || {}
+                  };
+               }
+
+               if (cachedComponent.update) {
+                  await cachedComponent.update();
+               }
+               return true;
+            }
+         }
+         await this.render(params);
+         return true;
+      }
+      return false;
+   }
+
+   removeComponent() {
+      delete Route.componentCache[this.props.component];
+      this.innerHTML = '';
+      this.rendered = false;
+   }
+
+   /**
+    * Cleanup cuando el componente se destruye
+    */
+   destroy() {
+      this.removeComponent();
+   }
+}
+
+Route.componentCache = {};
+
+customElements.define('slice-route', Route);