slicejs-web-framework 3.4.4 → 3.5.0

package/slicejs-cli/tests/commands-doctor.test.js

@@ -1,152 +0,0 @@
-import { test, describe } from 'node:test';
-import assert from 'node:assert/strict';
-import fs from 'fs-extra';
-import path from 'node:path';
-import { withTestProject } from './helpers/setup.js';
-import os from 'node:os';
-import {
-  checkNodeVersion,
-  checkDirectoryStructure,
-  checkConfig,
-  checkComponents,
-  checkPackageManagerSetup,
-} from '../commands/doctor/doctor.js';
-
-describe('doctor checks', () => {
-  test('checkNodeVersion passes on the supported runtime', async () => {
-    const r = await checkNodeVersion();
-    assert.equal(r.pass, true);
-    assert.match(r.message, /Node\.js version/);
-  });
-
-  test('checkDirectoryStructure passes on the starter project', async () => {
-    await withTestProject(async () => {
-      const r = await checkDirectoryStructure();
-      assert.equal(r.pass, true);
-    });
-  });
-
-  test('checkDirectoryStructure fails when src/ is missing', async () => {
-    await withTestProject(async (root) => {
-      await fs.remove(path.join(root, 'src'));
-      const r = await checkDirectoryStructure();
-      assert.equal(r.pass, false);
-      assert.match(r.message, /Missing directories/);
-      assert.match(r.message, /src\//);
-    });
-  });
-
-  test('checkConfig passes for a valid sliceConfig.json', async () => {
-    await withTestProject(async () => {
-      const r = await checkConfig();
-      assert.equal(r.pass, true);
-    });
-  });
-
-  test('checkConfig fails on invalid JSON', async () => {
-    await withTestProject(async (root) => {
-      await fs.writeFile(path.join(root, 'src', 'sliceConfig.json'), '{ not valid json ');
-      const r = await checkConfig();
-      assert.equal(r.pass, false);
-      assert.match(r.message, /invalid JSON/);
-    });
-  });
-
-  test('checkConfig fails when paths.components is missing', async () => {
-    await withTestProject(async (root) => {
-      await fs.writeJson(path.join(root, 'src', 'sliceConfig.json'), { server: { port: 3000 } });
-      const r = await checkConfig();
-      assert.equal(r.pass, false);
-      assert.match(r.message, /missing paths\.components/);
-    });
-  });
-
-  test('checkComponents reports OK when every component folder has its .js', async () => {
-    await withTestProject(async () => {
-      const r = await checkComponents();
-      assert.equal(r.pass, true);
-      assert.match(r.message, /components checked/);
-    });
-  });
-
-  test('checkComponents warns when a component folder lacks its .js file', async () => {
-    await withTestProject(async (root) => {
-      // AppShell ships with AppShell.js; remove it to simulate a broken component.
-      const broken = path.join(root, 'src', 'Components', 'AppComponents', 'Broken');
-      await fs.ensureDir(broken); // directory with no Broken.js
-      const r = await checkComponents();
-      assert.equal(r.warn, true);
-      assert.match(r.message, /missing files/);
-    });
-  });
-});
-
-describe('checkPackageManagerSetup', () => {
-  async function makeProject({ pkg, files = [] } = {}) {
-    const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'slice-doctor-pm-'));
-    if (pkg) await fs.writeJson(path.join(dir, 'package.json'), pkg);
-    for (const f of files) await fs.outputFile(path.join(dir, f), '');
-    return dir;
-  }
-
-  test('passes on a consistent pnpm project with local CLI', async () => {
-    const dir = await makeProject({
-      pkg: { name: 'x', packageManager: 'pnpm@11.0.0' },
-      files: ['pnpm-lock.yaml', 'node_modules/slicejs-cli/package.json']
-    });
-    try {
-      const r = await checkPackageManagerSetup(dir);
-      assert.equal(r.pass, true);
-    } finally { await fs.remove(dir); }
-  });
-
-  test('warns on mixed lockfiles', async () => {
-    const dir = await makeProject({
-      pkg: { name: 'x', packageManager: 'pnpm@11.0.0' },
-      files: ['pnpm-lock.yaml', 'package-lock.json', 'node_modules/slicejs-cli/package.json']
-    });
-    try {
-      const r = await checkPackageManagerSetup(dir);
-      assert.equal(r.warn, true);
-      assert.match(r.message, /Mixed lockfiles/);
-      assert.match(r.suggestion, /pnpm-lock\.yaml/);
-    } finally { await fs.remove(dir); }
-  });
-
-  test('warns when packageManager field is missing', async () => {
-    const dir = await makeProject({
-      pkg: { name: 'x' },
-      files: ['pnpm-lock.yaml', 'node_modules/slicejs-cli/package.json']
-    });
-    try {
-      const r = await checkPackageManagerSetup(dir);
-      assert.equal(r.warn, true);
-      assert.match(r.message, /packageManager/);
-    } finally { await fs.remove(dir); }
-  });
-
-  test('warns when packageManager field disagrees with the lockfile', async () => {
-    const dir = await makeProject({
-      pkg: { name: 'x', packageManager: 'pnpm@11.0.0' },
-      files: ['package-lock.json', 'node_modules/slicejs-cli/package.json']
-    });
-    try {
-      const r = await checkPackageManagerSetup(dir);
-      assert.equal(r.warn, true);
-      assert.match(r.message, /packageManager is "pnpm" but the lockfile is package-lock\.json/);
-    } finally { await fs.remove(dir); }
-  });
-
-  test('warns when slicejs-cli is not installed locally', async () => {
-    const dir = await makeProject({
-      pkg: { name: 'x', packageManager: 'pnpm@11.0.0' },
-      files: ['pnpm-lock.yaml']
-    });
-    try {
-      const r = await checkPackageManagerSetup(dir);
-      assert.equal(r.warn, true);
-      assert.match(r.message, /not installed locally/);
-      assert.match(r.suggestion, /-D slicejs-cli/);
-    } finally { await fs.remove(dir); }
-  });
-});

package/slicejs-cli/tests/commands-version-checker.test.js

@@ -1,37 +0,0 @@
-import { test, describe } from 'node:test';
-import assert from 'node:assert/strict';
-import versionChecker from '../commands/utils/VersionChecker.js';
-
-describe('VersionChecker.compareVersions', () => {
-  test('detects an outdated version', () => {
-    assert.equal(versionChecker.compareVersions('1.0.0', '1.0.1'), 'outdated');
-    assert.equal(versionChecker.compareVersions('1.2.0', '2.0.0'), 'outdated');
-  });
-
-  test('detects a newer (local) version', () => {
-    assert.equal(versionChecker.compareVersions('2.0.0', '1.9.9'), 'newer');
-  });
-
-  test('detects an up-to-date version', () => {
-    assert.equal(versionChecker.compareVersions('3.5.0', '3.5.0'), 'current');
-  });
-
-  test('handles version strings of differing length', () => {
-    assert.equal(versionChecker.compareVersions('1.0', '1.0.0'), 'current');
-    assert.equal(versionChecker.compareVersions('1.0.0', '1.0.0.1'), 'outdated');
-    assert.equal(versionChecker.compareVersions('1.0.1', '1.0'), 'newer');
-  });
-
-  test('returns null when a version is missing', () => {
-    assert.equal(versionChecker.compareVersions(null, '1.0.0'), null);
-    assert.equal(versionChecker.compareVersions('1.0.0', undefined), null);
-  });
-});
-
-describe('VersionChecker.getCurrentVersions', () => {
-  test('reads the CLI version from the package.json (no network)', async () => {
-    const current = await versionChecker.getCurrentVersions();
-    assert.ok(current, 'should resolve current versions');
-    assert.match(current.cli, /^\d+\.\d+\.\d+/);
-  });
-});

package/slicejs-cli/tests/component-registry-parse.test.js

@@ -1,34 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import fs from 'node:fs';
-import path from 'node:path';
-import { createTestProject, cleanupTestProject, withTestProject } from './helpers/setup.js';
-
-test('generateTypesFile parses JSON from components.js (no eval)', async () => {
-  const tmpRoot = await createTestProject({ visualComponents: ['Button'] });
-
-  try {
-    const srcDir = path.join(tmpRoot, 'src');
-    const { generateTypesFile } = await import('../commands/types/types.js');
-    const result = await generateTypesFile({
-      projectRoot: tmpRoot,
-      outputPath: path.join(srcDir, 'slice-build.generated.d.ts')
-    });
-
-    assert.ok(result.componentsProcessed > 0);
-    assert.equal(fs.existsSync(result.outputPath), true);
-
-    const declaration = fs.readFileSync(result.outputPath, 'utf8');
-    assert.match(declaration, /export interface ButtonProps/);
-  } finally {
-    await cleanupTestProject(tmpRoot);
-  }
-});
-
-test('Validations componentExists with JSON.parse (no eval)', async () => {
-  await withTestProject(async (tmpDir) => {
-    const validations = (await import('../commands/Validations.js')).default;
-    assert.equal(validations.componentExists('Button'), true);
-    assert.equal(validations.componentExists('NonExistent'), false);
-  }, { visualComponents: ['Button'] });
-});

package/slicejs-cli/tests/dependency-analyzer.test.js

@@ -1,24 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import DependencyAnalyzer from '../commands/utils/bundling/DependencyAnalyzer.js';
-
-test('parseComponentsConfig returns components map', () => {
-  // Arrange
-  const analyzer = new DependencyAnalyzer(import.meta.url);
-  const content = `const components = {"Button": "Visual", "FetchManager": "Service"};\nexport default components;`;
-
-  // Act
-  const result = analyzer.parseComponentsConfig(content);
-
-  // Assert
-  assert.deepEqual(result, { Button: 'Visual', FetchManager: 'Service' });
-});
-
-test('parseComponentsConfig throws for invalid config', () => {
-  // Arrange
-  const analyzer = new DependencyAnalyzer(import.meta.url);
-  const content = `const notComponents = {"Button": "Visual"};`;
-
-  // Act / Assert
-  assert.throws(() => analyzer.parseComponentsConfig(content), /components object not found/);
-});

package/slicejs-cli/tests/e2e/bundles.spec.js

@@ -1,91 +0,0 @@
-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/slicejs-cli/tests/e2e/dependency-scenarios.spec.js

@@ -1,56 +0,0 @@
-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/slicejs-cli/tests/e2e/fixtures/components/Service/FetchManager/FetchManager.js

@@ -1,136 +0,0 @@
-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/slicejs-cli/tests/e2e/fixtures/components/Service/IndexedDbManager/IndexedDbManager.js

@@ -1,149 +0,0 @@
-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}`));
-         };
-      });
-   }
-}