slicejs-cli 3.4.1 → 3.5.1

package/tests/e2e/bundles.spec.js

@@ -0,0 +1,91 @@
+import { test, expect } from '@playwright/test';
+import { parse } from '@babel/parser';
+
+// Recursively collect every emitted bundle file referenced by the config.
+// Only real bundle artifacts (slice-bundle.*.js) — not dependency identifiers
+// that happen to end in `.js` (e.g. vendorShared.dependencies).
+function collectBundleFiles(node, acc = new Set()) {
+  if (typeof node === 'string') {
+    if (node.startsWith('slice-bundle.') && node.endsWith('.js')) acc.add(node);
+    return acc;
+  }
+  if (Array.isArray(node)) {
+    for (const n of node) collectBundleFiles(n, acc);
+    return acc;
+  }
+  if (node && typeof node === 'object') {
+    for (const v of Object.values(node)) collectBundleFiles(v, acc);
+    return acc;
+  }
+  return acc;
+}
+
+async function getConfig(request) {
+  const res = await request.get('/bundles/bundle.config.json');
+  expect(res.status()).toBe(200);
+  return res.json();
+}
+
+test.describe('bundle quality & content (served production artifacts)', () => {
+  test('bundle.config.json is well-formed and maps every route', async ({ request }) => {
+    const cfg = await getConfig(request);
+    expect(cfg.production).toBe(true);
+    expect(cfg.format).toBe('v2');
+    expect(cfg.minified).toBe(true);
+    expect(cfg.obfuscated).toBe(true);
+    expect(cfg.bundles.framework, 'framework bundle present').toBeTruthy();
+    expect(cfg.bundles.critical, 'critical bundle present').toBeTruthy();
+
+    for (const route of ['/', '/about', '/404']) {
+      expect(Array.isArray(cfg.routeBundles[route]), `route ${route} is mapped`).toBe(true);
+      expect(cfg.routeBundles[route].length).toBeGreaterThan(0);
+    }
+  });
+
+  test('every referenced bundle is served as valid, contract-compliant JS', async ({ request }) => {
+    const cfg = await getConfig(request);
+    const files = [...collectBundleFiles(cfg.bundles)];
+    expect(files.length).toBeGreaterThan(0);
+
+    for (const file of files) {
+      const res = await request.get(`/bundles/${file}`);
+      expect(res.status(), `${file} is served`).toBe(200);
+      expect(res.headers()['content-type'] || '').toMatch(/javascript/);
+
+      const code = await res.text();
+      expect(() => parse(code, { sourceType: 'module', plugins: ['jsx'] }), `${file} is valid JS`).not.toThrow();
+      // v2 runtime contract.
+      expect(code, `${file} exports SLICE_BUNDLE_META`).toContain('SLICE_BUNDLE_META');
+      expect(code, `${file} exports registerAll`).toContain('registerAll');
+      // No unresolved relative import may leak into a production bundle.
+      expect(/\bfrom\s+['"]\.\.?\//.test(code), `${file} leaks a relative import`).toBe(false);
+    }
+  });
+
+  test('the framework bundle carries the structural runtime', async ({ request }) => {
+    const code = await (await request.get('/bundles/slice-bundle.framework.js')).text();
+    expect(code).toContain('Controller');
+    expect(code).toContain('registerAll');
+  });
+
+  test('all starter component classes are registered across the bundles', async ({ request }) => {
+    const cfg = await getConfig(request);
+    const files = [...collectBundleFiles(cfg.bundles)];
+    let combined = '';
+    for (const file of files) {
+      combined += await (await request.get(`/bundles/${file}`)).text();
+    }
+    // Component names are emitted as string literals in the register* calls and
+    // survive minification (mangle.properties is off, strings are untouched).
+    for (const comp of ['AppShell', 'Navbar', 'MultiRoute', 'HomeSection', 'Button', 'AboutSection', 'NotFound']) {
+      expect(combined.includes(`"${comp}"`), `${comp} is registered in a bundle`).toBe(true);
+    }
+  });
+
+  test('bundles are genuinely minified', async ({ request }) => {
+    const code = await (await request.get('/bundles/slice-bundle.framework.js')).text();
+    const longestLine = Math.max(...code.split('\n').map((l) => l.length));
+    expect(longestLine, 'minified output has long lines').toBeGreaterThan(300);
+    expect(code, 'comments are stripped').not.toContain('/**');
+  });
+});

package/tests/e2e/dependency-scenarios.spec.js

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+function trackErrors(page) {
+  const errors = [];
+  page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
+  page.on('pageerror', (e) => errors.push(String(e)));
+  return errors;
+}
+
+test.describe('default-export shared dependency', () => {
+  test('/defaultdep resolves a default export at runtime', async ({ page }) => {
+    const errors = trackErrors(page);
+    await page.goto('/defaultdep');
+
+    await expect(page.locator('slice-defaultdeppage')).toBeAttached();
+    await expect(page.locator('slice-defaultdeppage')).toHaveAttribute('data-cfg-title', 'Configured');
+    await expect(page.locator('slice-defaultdeppage')).toHaveAttribute(
+      'data-cfg-tagline',
+      'default-export-works'
+    );
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+});
+
+test.describe('component CSS application', () => {
+  test('/cssprobe applies the bundled component stylesheet', async ({ page }) => {
+    const errors = trackErrors(page);
+    await page.goto('/cssprobe');
+
+    const marker = page.locator('slice-cssprobepage .css-probe-marker');
+    await expect(marker).toBeVisible();
+    await expect(marker).toHaveCSS('color', 'rgb(7, 113, 219)');
+    await expect(marker).toHaveCSS('font-weight', '700');
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+});
+
+test.describe('transitive dependency of a shared module', () => {
+  // mid.js (imported by the component) itself imports leaf.js. The bundler must
+  // recursively inline leaf.js and bind its exports inside mid's scope, or the
+  // page breaks at runtime.
+  test('/transitive renders and the transitively-imported helper works', async ({ page }) => {
+    const errors = trackErrors(page);
+    await page.goto('/transitive');
+
+    await expect(page.locator('slice-transitivepage')).toBeAttached();
+    await expect(page.locator('slice-transitivepage')).toHaveAttribute(
+      'data-transitive',
+      'mid(leaf-value)[leaf:leaf-value]'
+    );
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+});

package/tests/e2e/fixtures/components/Service/FetchManager/FetchManager.js

@@ -0,0 +1,136 @@
+export default class FetchManager {
+   constructor(props) {
+      const { baseUrl, timeout } = props;
+      if (baseUrl !== undefined) {
+         this.baseUrl = baseUrl;
+      }
+      this.methods = ['GET', 'POST', 'PUT', 'DELETE'];
+      this.lastRequest = null;
+      this.cacheEnabled = false;
+      this.defaultHeaders = {};
+      timeout ? (this.timeout = timeout) : (this.timeout = 10000);
+   }
+
+   async request(
+      method,
+      data,
+      endpoint,
+      onRequestSuccess,
+      onRequestError,
+      refetchOnError = false,
+      requestOptions = {}
+   ) {
+      if (!this.methods.includes(method)) throw new Error('Invalid method');
+      if (data && typeof data !== 'object') throw new Error('Invalid data, not JSON');
+      const controller = new AbortController();
+
+      let options;
+      if (method !== 'GET') {
+         options = {
+            method: method,
+            headers: {
+               'Content-Type': 'application/json',
+               ...this.defaultHeaders,
+               ...requestOptions.headers,
+            },
+            signal: controller.signal,
+         };
+      } else {
+         options = {
+            method: method,
+            headers: {
+               ...this.defaultHeaders,
+               ...requestOptions.headers,
+            },
+            signal: controller.signal,
+         };
+      }
+
+      if (data) {
+         options.body = JSON.stringify(data);
+      }
+
+      let loading;
+      if (!slice.controller.getComponent('Loading')) {
+         loading = await slice.build('Loading', { sliceId: 'Loading' });
+      } else {
+         loading = slice.controller.getComponent('Loading');
+      }
+      loading.start();
+      const timeoutId = setTimeout(() => controller.abort(), this.timeout || 10000);
+
+      try {
+         let response;
+
+         // Check if cache is enabled and a cached response exists
+         if (this.cacheEnabled && this.lastRequest && this.lastRequest.endpoint === endpoint) {
+            loading.stop();
+            return this.lastRequest.output;
+         }
+
+         if (this.baseUrl !== undefined) {
+            response = await fetch(this.baseUrl + endpoint, options);
+         } else {
+            response = await fetch(endpoint, options);
+         }
+
+         if (response.ok) {
+            if (typeof onRequestSuccess === 'function') {
+               onRequestSuccess(data, response);
+            }
+         } else {
+            if (typeof onRequestError === 'function') {
+               onRequestError(data, response);
+            }
+            if (refetchOnError) {
+               // Retry once on error; pass false to avoid infinite recursion when
+               // the endpoint keeps failing.
+               return await this.request(
+                  method,
+                  data,
+                  endpoint,
+                  onRequestSuccess,
+                  onRequestError,
+                  false,
+                  requestOptions
+               );
+            }
+         }
+
+         let output = await response.json();
+         loading.stop();
+
+         // Cache the parsed response if cache is enabled
+         if (this.cacheEnabled) {
+            this.lastRequest = { data, output, endpoint };
+         }
+
+         return output;
+      } catch (error) {
+         // slice.logger.logError signature is (componentSliceId, message, error).
+         if (error.message === 'Failed to fetch') {
+            slice.logger.logError('FetchManager', 'Lost internet connection', error);
+         } else {
+            slice.logger.logError('FetchManager', 'Request failed', error);
+         }
+         loading.stop();
+         throw error;
+      } finally {
+         clearTimeout(timeoutId);
+      }
+   }
+
+   // Enable or disable caching of responses
+   enableCache() {
+      this.cacheEnabled = true;
+   }
+
+   disableCache() {
+      this.cacheEnabled = false;
+   }
+
+   // Set default headers for all requests
+   setDefaultHeaders(headers) {
+      this.defaultHeaders = headers;
+   }
+}

package/tests/e2e/fixtures/components/Service/IndexedDbManager/IndexedDbManager.js

@@ -0,0 +1,149 @@
+export default class IndexedDbManager {
+   constructor(props = {}) {
+      // Slice builds services with a single props object, e.g.
+      // slice.build('IndexedDbManager', { databaseName, storeName }). The legacy
+      // positional form `new IndexedDbManager(dbName, storeName)` still works.
+      if (typeof props === 'string') {
+         this.databaseName = props;
+         this.storeName = arguments[1];
+      } else {
+         this.databaseName = props.databaseName;
+         this.storeName = props.storeName;
+      }
+      this.db = null;
+   }
+
+   async openDatabase() {
+      return new Promise((resolve, reject) => {
+         const request = indexedDB.open(this.databaseName);
+
+         request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            if (!db.objectStoreNames.contains(this.storeName)) {
+               db.createObjectStore(this.storeName, {
+                  keyPath: 'id',
+                  autoIncrement: true,
+               });
+            }
+         };
+
+         request.onsuccess = (event) => {
+            this.db = event.target.result;
+            resolve(this.db);
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error opening IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   closeDatabase() {
+      if (this.db) {
+         this.db.close();
+         this.db = null;
+      }
+   }
+
+   async addItem(item) {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readwrite');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.add(item);
+
+         request.onsuccess = () => {
+            resolve(request.result);
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error adding item to IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   async updateItem(item) {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readwrite');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.put(item);
+
+         request.onsuccess = () => {
+            resolve(request.result);
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error updating item in IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   async getItem(id) {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readonly');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.get(id);
+
+         request.onsuccess = () => {
+            resolve(request.result);
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error getting item from IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   async deleteItem(id) {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readwrite');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.delete(id);
+
+         request.onsuccess = () => {
+            resolve();
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error deleting item from IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   async getAllItems() {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readonly');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.getAll();
+
+         request.onsuccess = () => {
+            resolve(request.result);
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error getting items from IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+
+   async clearItems() {
+      const db = await this.openDatabase();
+      return new Promise((resolve, reject) => {
+         const transaction = db.transaction([this.storeName], 'readwrite');
+         const store = transaction.objectStore(this.storeName);
+         const request = store.clear();
+
+         request.onsuccess = () => {
+            resolve();
+         };
+
+         request.onerror = (event) => {
+            reject(new Error(`Error clearing items in IndexedDB: ${event.target.error}`));
+         };
+      });
+   }
+}

package/tests/e2e/fixtures/components/Service/LocalStorageManager/LocalStorageManager.js

@@ -0,0 +1,45 @@
+export default class LocalStorageManager {
+   constructor() {
+      // No se necesitan propiedades en este caso
+   }
+
+   getItem(key) {
+      try {
+         const item = localStorage.getItem(key);
+         return item ? JSON.parse(item) : null;
+      } catch (error) {
+         console.error(`Error getting item from localStorage: ${error.message}`);
+         return null;
+      }
+   }
+
+   setItem(key, value) {
+      try {
+         localStorage.setItem(key, JSON.stringify(value));
+         return true;
+      } catch (error) {
+         console.error(`Error setting item in localStorage: ${error.message}`);
+         return false;
+      }
+   }
+
+   removeItem(key) {
+      try {
+         localStorage.removeItem(key);
+         return true;
+      } catch (error) {
+         console.error(`Error removing item from localStorage: ${error.message}`);
+         return false;
+      }
+   }
+
+   clear() {
+      try {
+         localStorage.clear();
+         return true;
+      } catch (error) {
+         console.error(`Error clearing localStorage: ${error.message}`);
+         return false;
+      }
+   }
+}

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

@@ -0,0 +1,106 @@
+/* Encapsulated under the custom element so the button styles never leak. */
+
+slice-button .slice_button_container {
+  padding: 10px;
+}
+
+slice-button .slice_button_value {
+  user-select: none;
+  cursor: pointer;
+}
+
+slice-button .slice_button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  max-width: fit-content;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  font-weight: 800;
+  min-width: 100%;
+  padding: 10px;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+}
+
+slice-button .slice_button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 45%, transparent);
+}
+
+slice-button .slice_button:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: color-mix(in srgb, var(--primary-color-contrast) 32%, transparent);
+  position: absolute;
+  display: block;
+  opacity: 0;
+  scale: 10;
+  transition: all 1s;
+}
+
+slice-button .slice_button:active {
+  transform: translateY(5px);
+}
+
+slice-button .slice_button:active:after {
+  scale: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s;
+}
+
+/* ----------------------------------------------------------------- variants
+   Every variant derives from the theme tokens — they automatically follow the
+   active theme. `filled` is the original solid look; the modifiers are declared
+   after the base rule so they win on equal specificity. */
+
+slice-button .slice_button--filled {
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border-color: var(--primary-color);
+}
+
+slice-button .slice_button--outlined {
+  background-color: transparent;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+slice-button .slice_button--ghost {
+  background-color: transparent;
+  color: var(--primary-color);
+  border-color: transparent;
+}
+
+slice-button .slice_button--soft {
+  background-color: color-mix(in srgb, var(--primary-color) 16%, transparent);
+  color: var(--primary-color);
+  border-color: transparent;
+}
+
+/* Hover tint for the non-filled variants */
+slice-button .slice_button--outlined:hover,
+slice-button .slice_button--ghost:hover {
+  background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+}
+
+slice-button .slice_button--soft:hover {
+  background-color: color-mix(in srgb, var(--primary-color) 26%, transparent);
+}
+
+/* The ripple flash uses a primary-color tint on the light/transparent variants
+   (the base contrast flash would be invisible on them). */
+slice-button .slice_button--outlined:after,
+slice-button .slice_button--ghost:after,
+slice-button .slice_button--soft:after {
+  background: color-mix(in srgb, var(--primary-color) 22%, transparent);
+}

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

@@ -0,0 +1,5 @@
+<div class="slice_button_container">
+  <button class="slice_button">
+    <label class="slice_button_value"></label>
+  </button>
+</div>