slicejs-cli 3.5.1 → 3.6.0

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

@@ -1,44 +0,0 @@
-<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

@@ -1,180 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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);

package/tests/e2e/fixtures/components/registry.json

@@ -1,12 +0,0 @@
-{
-  "Button": "Visual",
-  "Link": "Visual",
-  "Loading": "Visual",
-  "MultiRoute": "Visual",
-  "Navbar": "Visual",
-  "NotFound": "Visual",
-  "Route": "Visual",
-  "FetchManager": "Service",
-  "IndexedDbManager": "Service",
-  "LocalStorageManager": "Service"
-}

package/tests/e2e/fixtures/vendor-components.mjs

@@ -1,65 +0,0 @@
-// One-time dev utility: downloads the starter Visual/Service components from the
-// official Slice.js visual library and persists them under ./components so the
-// browser E2E can assemble a complete, renderable starter app hermetically
-// (no network at test time). Re-run with `node tests/e2e/fixtures/vendor-components.mjs`
-// to refresh the fixture.
-import fs from 'fs-extra';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const OUT = path.join(__dirname, 'components');
-const BASE = 'https://raw.githubusercontent.com/VKneider/slice.js_visual_library/master/src/Components';
-
-// Mirrors the starter set installed by `slice init`.
-const VISUAL = ['Button', 'Link', 'Loading', 'MultiRoute', 'Navbar', 'NotFound', 'Route'];
-const SERVICE = ['FetchManager', 'IndexedDbManager', 'LocalStorageManager'];
-// Logical routing components ship JS-only (mirrors getAvailableComponents()).
-const JS_ONLY = new Set(['Route', 'MultiRoute', 'Link']);
-
-function filesFor(name, category) {
-  if (category === 'Service' || JS_ONLY.has(name)) return [`${name}.js`];
-  return [`${name}.js`, `${name}.html`, `${name}.css`];
-}
-
-async function fetchText(url) {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`HTTP ${res.status} for ${url}`);
-  return res.text();
-}
-
-async function vendor(name, category) {
-  const dir = path.join(OUT, category, name);
-  await fs.ensureDir(dir);
-  for (const file of filesFor(name, category)) {
-    const required = file.endsWith('.js');
-    try {
-      const content = await fetchText(`${BASE}/${category}/${name}/${file}`);
-      await fs.writeFile(path.join(dir, file), content, 'utf8');
-      process.stdout.write(`  ✓ ${category}/${name}/${file} (${content.length}b)\n`);
-    } catch (err) {
-      if (required) throw err;
-      // Optional html/css may not exist for simple components (e.g. NotFound).
-      process.stdout.write(`  - ${category}/${name}/${file} (skipped: ${err.message.split(' for ')[0]})\n`);
-    }
-  }
-}
-
-async function main() {
-  await fs.emptyDir(OUT);
-  for (const name of VISUAL) await vendor(name, 'Visual');
-  for (const name of SERVICE) await vendor(name, 'Service');
-
-  // Persist a registry manifest so the harness can register them in components.js.
-  const registry = {};
-  for (const name of VISUAL) registry[name] = 'Visual';
-  for (const name of SERVICE) registry[name] = 'Service';
-  await fs.writeJson(path.join(OUT, 'registry.json'), registry, { spaces: 2 });
-
-  console.log(`\nVendored ${VISUAL.length} Visual + ${SERVICE.length} Service components into ${OUT}`);
-}
-
-main().catch((err) => {
-  console.error(err.message);
-  process.exit(1);
-});

package/tests/e2e/navigation.spec.js

@@ -1,44 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('navigation (App Shell + MultiRoute)', () => {
-  test('navigates Home -> About via the in-page Button', async ({ page }) => {
-    await page.goto('/');
-    await expect(page.locator('slice-home-section h1.home__title')).toBeVisible();
-
-    await page.locator('slice-home-section slice-button button').click();
-
-    await expect(page).toHaveURL(/\/about$/);
-    await expect(page.locator('slice-about-section h1')).toHaveText('About');
-    // The shell (navbar) persists across the content swap.
-    await expect(page.locator('slice-nav-bar')).toBeAttached();
-  });
-
-  test('deep-links directly to /about', async ({ page }) => {
-    await page.goto('/about');
-    await expect(page.locator('slice-app-shell')).toBeAttached();
-    await expect(page.locator('slice-about-section h1')).toHaveText('About');
-  });
-
-  test('renders the NotFound page for the /404 route', async ({ page }) => {
-    await page.goto('/404');
-    await expect(page.locator('slice-notfound')).toBeAttached();
-  });
-
-  test('navbar links swap sections while keeping the shell mounted', async ({ page }) => {
-    await page.goto('/about');
-    await expect(page.locator('slice-about-section')).toBeAttached();
-
-    await page.locator('slice-nav-bar').getByText('Home', { exact: true }).click();
-
-    await expect(page).toHaveURL(/127\.0\.0\.1:\d+\/$/);
-    await expect(page.locator('slice-home-section')).toBeAttached();
-    await expect(page.locator('slice-nav-bar')).toBeAttached();
-  });
-
-  test('survives a full reload on a deep route', async ({ page }) => {
-    await page.goto('/about');
-    await expect(page.locator('slice-about-section')).toBeAttached();
-    await page.reload();
-    await expect(page.locator('slice-about-section h1')).toHaveText('About');
-  });
-});

package/tests/e2e/render.spec.js

@@ -1,34 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-// Collect console errors / uncaught page errors for the whole test.
-function trackErrors(page) {
-  const errors = [];
-  page.on('console', (msg) => {
-    if (msg.type() === 'error') errors.push(msg.text());
-  });
-  page.on('pageerror', (err) => errors.push(String(err)));
-  return errors;
-}
-
-test.describe('initial app render (production build)', () => {
-  test('boots the framework and renders the home page with no console errors', async ({ page }) => {
-    const errors = trackErrors(page);
-
-    await page.goto('/');
-
-    // The App Shell mounts, with its persistent navbar.
-    await expect(page.locator('slice-app-shell')).toBeAttached();
-    await expect(page.locator('slice-nav-bar')).toBeAttached();
-
-    // The Home section renders its real content...
-    await expect(page.locator('slice-home-section h1.home__title')).toHaveText(
-      /Welcome to your Slice app/
-    );
-    // ...including a child Button built via slice.build with its label.
-    await expect(
-      page.locator('slice-home-section slice-button .slice_button_value')
-    ).toHaveText(/Go to About/);
-
-    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
-  });
-});