slicejs-web-framework 3.4.2 → 3.4.4

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

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

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

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

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

@@ -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/slicejs-cli/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/slicejs-cli/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/slicejs-cli/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}`));
+         };
+      });
+   }
+}