slicejs-cli 3.5.0 → 3.5.1

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

@@ -0,0 +1,12 @@
+{
+  "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

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

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

@@ -0,0 +1,34 @@
+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([]);
+  });
+});

package/tests/e2e/serve.mjs

@@ -0,0 +1,264 @@
+// E2E web server: assembles a complete App-Shell + MultiRoute starter
+// (framework src/api + the vendored starter components), runs the real
+// production build, and serves dist/ over the production serving contract.
+// Used as Playwright's `webServer`. Build artifacts live in an os.tmpdir,
+// so nothing is written into the repo.
+import http from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs from 'fs-extra';
+import { createTestProject } from '../helpers/setup.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const FIXTURES = path.join(__dirname, 'fixtures', 'components');
+const FRAMEWORK_SLICE_JS = path.resolve(
+  __dirname,
+  '../../node_modules/slicejs-web-framework/Slice/Slice.js'
+);
+const PORT = process.env.E2E_PORT ? Number(process.env.E2E_PORT) : 3210;
+
+const CONTENT_TYPES = {
+  '.js': 'application/javascript; charset=utf-8',
+  '.mjs': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.png': 'image/png',
+  '.woff2': 'font/woff2',
+};
+
+// A shared module imported by two route components that land in different route
+// bundles — this is what triggers the vendor-shared bundle. It must transform to
+// >2KB (minVendorSharedTransformedSize), so it embeds a data table that survives
+// minification.
+function buildSharedKitSource() {
+  const rows = [];
+  for (let i = 0; i < 60; i += 1) {
+    rows.push(
+      `  { id: ${i}, key: 'shared_item_${i}', label: 'Shared registry entry number ${i} reused across multiple routes', enabled: ${i % 2 === 0}, weight: ${i * 7} },`
+    );
+  }
+  return `// Shared kit deliberately imported by several routes.
+export const SHARED_TAG = 'shared-kit-v1';
+
+export const SHARED_TABLE = [
+${rows.join('\n')}
+];
+
+export const SHARED_PALETTE = { primary: '#4f46e5', secondary: '#06b6d4', surface: '#0b1020', text: '#e6e9f5' };
+
+export function sharedBadge(label) {
+  return '[' + SHARED_TAG + '] ' + String(label);
+}
+
+export function sharedLookup(id) {
+  return SHARED_TABLE.find((row) => row.id === id) || null;
+}
+
+export default { SHARED_TAG, SHARED_TABLE, SHARED_PALETTE, sharedBadge, sharedLookup };
+`;
+}
+
+const SHARED_KIT_SOURCE = buildSharedKitSource();
+
+// Shared modules for the extra dependency scenarios.
+const LEAF_SOURCE = `export const LEAF = 'leaf-value';
+export function leafTag() { return 'leaf:' + LEAF; }
+`;
+// mid.js imports leaf.js -> a transitive dependency of any component using mid.
+const MID_SOURCE = `import { LEAF, leafTag } from './leaf.js';
+export function midValue() { return 'mid(' + LEAF + ')[' + leafTag() + ']'; }
+`;
+const APP_CONFIG_SOURCE = `const TITLE = 'Configured';
+export const VERSION = 3;
+export default { title: TITLE, version: VERSION, tagline: 'default-export-works' };
+`;
+
+function componentJs(name, { imports = '', initBody = '' } = {}) {
+  return `${imports ? imports + '\n\n' : ''}export default class ${name} extends HTMLElement {
+  constructor(props) {
+    super();
+    slice.attachTemplate(this);
+    slice.controller.setComponentProps(this, props);
+  }
+
+  init() {
+${initBody}
+  }
+}
+
+customElements.define('slice-${name.toLowerCase()}', ${name});
+`;
+}
+
+async function scaffold(app, createComponent, name, { js, html, css } = {}) {
+  const ok = createComponent(name, 'Visual');
+  if (!ok) throw new Error(`[e2e] createComponent failed for ${name}`);
+  const dir = path.join(app, 'src', 'Components', 'Visual', name);
+  if (js != null) await fs.writeFile(path.join(dir, `${name}.js`), js, 'utf8');
+  if (html != null) await fs.writeFile(path.join(dir, `${name}.html`), html, 'utf8');
+  if (css != null) await fs.writeFile(path.join(dir, `${name}.css`), css, 'utf8');
+}
+
+async function addScenarios(app) {
+  const createComponent = (await import('../../commands/createComponent/createComponent.js')).default;
+  const sharedDir = path.join(app, 'src', 'shared');
+  await fs.ensureDir(sharedDir);
+  await fs.writeFile(path.join(sharedDir, 'sharedKit.js'), SHARED_KIT_SOURCE, 'utf8');
+  await fs.writeFile(path.join(sharedDir, 'leaf.js'), LEAF_SOURCE, 'utf8');
+  await fs.writeFile(path.join(sharedDir, 'mid.js'), MID_SOURCE, 'utf8');
+  await fs.writeFile(path.join(sharedDir, 'appConfig.js'), APP_CONFIG_SOURCE, 'utf8');
+
+  // (a) vendor-shared: two route components import the same (>2KB) module and
+  //     fall into different route bundles (services vs routing categories).
+  for (const name of ['ServicesPage', 'RoutingPage']) {
+    await scaffold(app, createComponent, name, {
+      js: componentJs(name, {
+        imports: "import { SHARED_TAG, sharedBadge } from '../../../shared/sharedKit.js';",
+        initBody:
+          `    this.dataset.sharedTag = SHARED_TAG;\n    this.dataset.sharedBadge = sharedBadge('${name}');`,
+      }),
+    });
+  }
+
+  // (b) transitive dependency: mid.js itself imports leaf.js.
+  await scaffold(app, createComponent, 'TransitivePage', {
+    js: componentJs('TransitivePage', {
+      imports: "import { midValue } from '../../../shared/mid.js';",
+      initBody: '    this.dataset.transitive = midValue();',
+    }),
+  });
+
+  // (c) default-export dependency.
+  await scaffold(app, createComponent, 'DefaultDepPage', {
+    js: componentJs('DefaultDepPage', {
+      imports: "import cfg from '../../../shared/appConfig.js';",
+      initBody: '    this.dataset.cfgTitle = cfg.title;\n    this.dataset.cfgTagline = cfg.tagline;',
+    }),
+  });
+
+  // (d) CSS application.
+  await scaffold(app, createComponent, 'CssProbePage', {
+    js: componentJs('CssProbePage'),
+    html: '<div class="css-probe-marker">styled by Slice</div>',
+    css: '.css-probe-marker { color: rgb(7, 113, 219); font-weight: 700; }',
+  });
+
+  // Wire all extra routes (keeping the 404 route last).
+  const entries = [
+    { path: '/services', component: 'ServicesPage', title: 'Services' },
+    { path: '/routing', component: 'RoutingPage', title: 'Routing' },
+    { path: '/transitive', component: 'TransitivePage', title: 'Transitive' },
+    { path: '/defaultdep', component: 'DefaultDepPage', title: 'DefaultDep' },
+    { path: '/cssprobe', component: 'CssProbePage', title: 'CssProbe' },
+  ];
+  const inserted = entries
+    .map((e) => `   { path: '${e.path}', component: '${e.component}', metadata: { title: '${e.title}' } },`)
+    .join('\n');
+
+  const routesPath = path.join(app, 'src', 'routes.js');
+  let routes = await fs.readFile(routesPath, 'utf8');
+  routes = routes.replace(/(\n)(\s*)\{ path: '\/404'/, `\n${inserted}\n$2{ path: '/404'`);
+  await fs.writeFile(routesPath, routes, 'utf8');
+}
+
+async function assembleAndBuild() {
+  process.env.NODE_ENV = 'production';
+
+  // Framework src + api copied into a throwaway project.
+  const app = await createTestProject();
+
+  // The bundler discovers the framework's structural components under
+  // node_modules/slicejs-web-framework — make the installed package resolvable
+  // from the assembled project so the framework bundle is generated.
+  const fwPkg = path.resolve(__dirname, '../../node_modules/slicejs-web-framework');
+  await fs.ensureDir(path.join(app, 'node_modules'));
+  await fs.ensureSymlink(fwPkg, path.join(app, 'node_modules', 'slicejs-web-framework'), 'dir')
+    .catch(() => fs.copy(fwPkg, path.join(app, 'node_modules', 'slicejs-web-framework')));
+
+  // Drop in the vendored starter Visual/Service components.
+  await fs.copy(path.join(FIXTURES, 'Visual'), path.join(app, 'src', 'Components', 'Visual'));
+  await fs.copy(path.join(FIXTURES, 'Service'), path.join(app, 'src', 'Components', 'Service'));
+
+  process.env.INIT_CWD = app;
+
+  // Add the dependency scenarios (vendor-shared, transitive, default-export, CSS)
+  // so those bundle paths are built and exercised by the browser specs.
+  await addScenarios(app);
+
+  // Regenerate components.js from disk (the real `slice component list`).
+  const listComponents = (await import('../../commands/listComponents/listComponents.js')).default;
+  listComponents();
+
+  // Real production build. E2E_MINIFY=false exercises the unminified bundle path.
+  const minify = process.env.E2E_MINIFY !== 'false';
+  const build = (await import('../../commands/build/build.js')).default;
+  const ok = await build({ minify, obfuscate: minify });
+  if (!ok) {
+    console.error('[e2e] build failed');
+    process.exit(1);
+  }
+
+  return path.join(app, 'dist');
+}
+
+function startServer(distDir) {
+  const server = http.createServer(async (req, res) => {
+    try {
+      const pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+
+      if (pathname === '/slice-env.json') {
+        res.setHeader('Content-Type', CONTENT_TYPES['.json']);
+        res.end(JSON.stringify({ mode: 'production', env: {} }));
+        return;
+      }
+      if (pathname === '/Slice/Slice.js') {
+        const body = await fs.readFile(FRAMEWORK_SLICE_JS).catch(() => null);
+        if (!body) { res.statusCode = 404; res.end('Slice.js not found'); return; }
+        res.setHeader('Content-Type', CONTENT_TYPES['.js']);
+        res.end(body);
+        return;
+      }
+
+      const filePath = path.join(distDir, pathname);
+      if (!filePath.startsWith(distDir)) { res.statusCode = 403; res.end('forbidden'); return; }
+
+      const stat = await fs.stat(filePath).catch(() => null);
+      if (stat && stat.isFile()) {
+        res.setHeader('Content-Type', CONTENT_TYPES[path.extname(filePath)] || 'application/octet-stream');
+        res.end(await fs.readFile(filePath));
+        return;
+      }
+
+      // A missing file WITH an extension is a genuine 404 (don't mask asset
+      // 404s as the SPA shell — that produces confusing MIME errors).
+      if (path.extname(pathname)) { res.statusCode = 404; res.end('not found'); return; }
+
+      // Extensionless paths are client routes -> SPA fallback.
+      const index = await fs.readFile(path.join(distDir, 'App', 'index.html')).catch(() => null);
+      if (index) { res.setHeader('Content-Type', CONTENT_TYPES['.html']); res.end(index); return; }
+      res.statusCode = 404;
+      res.end('not found');
+    } catch (error) {
+      res.statusCode = 500;
+      res.end(String(error));
+    }
+  });
+
+  server.listen(PORT, '127.0.0.1', () => {
+    console.log(`[e2e] app server ready at http://127.0.0.1:${PORT} (dist: ${distDir})`);
+  });
+
+  const shutdown = () => server.close(() => process.exit(0));
+  process.on('SIGTERM', shutdown);
+  process.on('SIGINT', shutdown);
+}
+
+assembleAndBuild()
+  .then(startServer)
+  .catch((err) => {
+    console.error('[e2e] fatal:', err);
+    process.exit(1);
+  });

package/tests/e2e/shared-deps.spec.js

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+import { parse } from '@babel/parser';
+
+// Two routes (/services, /routing) live in different bundles and import the same
+// module, so the build extracts it into a vendor-shared bundle. These specs
+// validate both the produced artifact and that the shared dependency resolves at
+// runtime (via window.__SLICE_SHARED_DEPS__) when the pages render.
+
+test.describe('vendor-shared bundle (shared dependency across routes)', () => {
+  test('the config advertises a real vendor-shared bundle wired into both routes', async ({ request }) => {
+    const cfg = await (await request.get('/bundles/bundle.config.json')).json();
+
+    expect(cfg.bundles.vendorShared, 'vendorShared present').toBeTruthy();
+    expect(cfg.bundles.vendorShared.file).toBe('slice-bundle.vendor-shared.js');
+    expect(cfg.bundles.vendorShared.dependencyCount).toBeGreaterThanOrEqual(1);
+
+    expect(cfg.routeBundles['/services']).toContain('vendor-shared');
+    expect(cfg.routeBundles['/routing']).toContain('vendor-shared');
+  });
+
+  test('the vendor-shared bundle is served as a valid, contract-compliant module', async ({ request }) => {
+    const res = await request.get('/bundles/slice-bundle.vendor-shared.js');
+    expect(res.status()).toBe(200);
+    expect(res.headers()['content-type'] || '').toMatch(/javascript/);
+
+    const code = await res.text();
+    expect(() => parse(code, { sourceType: 'module', plugins: ['jsx'] })).not.toThrow();
+    expect(code).toContain('SLICE_BUNDLE_META');
+    expect(code).toContain('registerAll');
+    expect(code).toContain('SLICE_BUNDLE_DEPENDENCIES');
+    // The shared module's own content lives here, not duplicated per route.
+    expect(code).toContain('shared-kit-v1');
+  });
+
+  test('/services renders and resolves the shared dependency at runtime', async ({ page }) => {
+    const errors = [];
+    page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
+    page.on('pageerror', (e) => errors.push(String(e)));
+
+    await page.goto('/services');
+    await expect(page.locator('slice-servicespage')).toBeAttached();
+    // The data attribute is set in init() from the shared module — its presence
+    // proves the vendor-shared dependency was registered and resolved.
+    await expect(page.locator('slice-servicespage')).toHaveAttribute('data-shared-tag', 'shared-kit-v1');
+    await expect(page.locator('slice-servicespage')).toHaveAttribute('data-shared-badge', /ServicesPage/);
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+
+  test('/routing renders and resolves the same shared dependency', async ({ page }) => {
+    const errors = [];
+    page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
+    page.on('pageerror', (e) => errors.push(String(e)));
+
+    await page.goto('/routing');
+    await expect(page.locator('slice-routingpage')).toBeAttached();
+    await expect(page.locator('slice-routingpage')).toHaveAttribute('data-shared-tag', 'shared-kit-v1');
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+});

package/tests/e2e/unminified.spec.js

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+// Runs against a second server built with E2E_MINIFY=false, so the raw
+// (un-minified, un-obfuscated) bundle output is exercised in the browser.
+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('unminified production build', () => {
+  test('boots and renders the home page', async ({ page }) => {
+    const errors = trackErrors(page);
+    await page.goto('/');
+
+    await expect(page.locator('slice-app-shell')).toBeAttached();
+    await expect(page.locator('slice-home-section h1.home__title')).toHaveText(
+      /Welcome to your Slice app/
+    );
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+
+  test('resolves the vendor-shared dependency with unminified bundles', async ({ page }) => {
+    const errors = trackErrors(page);
+    await page.goto('/services');
+
+    await expect(page.locator('slice-servicespage')).toHaveAttribute('data-shared-tag', 'shared-kit-v1');
+
+    expect(errors, `console errors:\n${errors.join('\n')}`).toEqual([]);
+  });
+});

package/tests/e2e-serve.test.js

@@ -0,0 +1,148 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import http from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs from 'fs-extra';
+import { parse } from '@babel/parser';
+import { withTestProject } from './helpers/setup.js';
+import build from '../commands/build/build.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const FRAMEWORK_SLICE_JS = path.resolve(
+  __dirname,
+  '../node_modules/slicejs-web-framework/Slice/Slice.js'
+);
+
+const CONTENT_TYPES = {
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+};
+
+// Minimal static server that mirrors the production serving contract the
+// framework's api/index.js implements (index/SPA fallback, /slice-env.json,
+// /Slice/Slice.js from the framework package, and dist static files), without
+// pulling in express. Enough to assert that a production build is servable.
+function startServer(distDir) {
+  const server = http.createServer(async (req, res) => {
+    try {
+      const pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+
+      if (pathname === '/slice-env.json') {
+        res.setHeader('Content-Type', CONTENT_TYPES['.json']);
+        res.end(JSON.stringify({ mode: 'production', env: {} }));
+        return;
+      }
+      if (pathname === '/Slice/Slice.js') {
+        const body = await fs.readFile(FRAMEWORK_SLICE_JS).catch(() => null);
+        if (!body) { res.statusCode = 404; res.end('Slice.js not found'); return; }
+        res.setHeader('Content-Type', CONTENT_TYPES['.js']);
+        res.end(body);
+        return;
+      }
+
+      const filePath = path.join(distDir, pathname);
+      if (!filePath.startsWith(distDir)) { res.statusCode = 403; res.end('forbidden'); return; }
+
+      const stat = await fs.stat(filePath).catch(() => null);
+      if (stat && stat.isFile()) {
+        res.setHeader('Content-Type', CONTENT_TYPES[path.extname(filePath)] || 'application/octet-stream');
+        res.end(await fs.readFile(filePath));
+        return;
+      }
+
+      // SPA fallback -> App/index.html
+      const index = await fs.readFile(path.join(distDir, 'App', 'index.html')).catch(() => null);
+      if (index) { res.setHeader('Content-Type', CONTENT_TYPES['.html']); res.end(index); return; }
+      res.statusCode = 404;
+      res.end('not found');
+    } catch (error) {
+      res.statusCode = 500;
+      res.end(String(error));
+    }
+  });
+
+  return new Promise((resolve) => {
+    server.listen(0, '127.0.0.1', () => {
+      resolve({ server, port: server.address().port });
+    });
+  });
+}
+
+function closeServer(server) {
+  return new Promise((resolve) => server.close(resolve));
+}
+
+describe('end-to-end: production build is correctly servable', () => {
+  test('build() output serves the app shell, framework runtime and valid bundles', async () => {
+    await withTestProject(async (root) => {
+      const ok = await build({ minify: false, obfuscate: false });
+      assert.equal(ok, true, 'build should succeed');
+
+      const distDir = path.join(root, 'dist');
+      const { server, port } = await startServer(distDir);
+      const base = `http://127.0.0.1:${port}`;
+
+      try {
+        // 1. The HTML shell is served and mounts the app + entry module.
+        const indexRes = await fetch(`${base}/`);
+        assert.equal(indexRes.status, 200);
+        const indexHtml = await indexRes.text();
+        assert.match(indexHtml, /id="app"/);
+        assert.match(indexHtml, /\/App\/index\.js/);
+
+        // 2. The entry module loads and bootstraps the framework runtime.
+        const entryRes = await fetch(`${base}/App/index.js`);
+        assert.equal(entryRes.status, 200);
+        assert.match(entryRes.headers.get('content-type') || '', /javascript/);
+        assert.match(await entryRes.text(), /\/Slice\/Slice\.js/);
+
+        // 3. The framework runtime itself is reachable.
+        const sliceRes = await fetch(`${base}/Slice/Slice.js`);
+        assert.equal(sliceRes.status, 200);
+
+        // 4. Config + runtime mode endpoints.
+        const cfgRes = await fetch(`${base}/sliceConfig.json`);
+        assert.equal(cfgRes.status, 200);
+        const cfg = await cfgRes.json();
+        assert.ok(cfg.paths?.components, 'sliceConfig exposes component paths');
+
+        const envRes = await fetch(`${base}/slice-env.json`);
+        assert.equal((await envRes.json()).mode, 'production');
+
+        // 5. The bundle manifest is served and well-formed.
+        const manifestRes = await fetch(`${base}/bundles/bundle.config.json`);
+        assert.equal(manifestRes.status, 200);
+        const manifest = await manifestRes.json();
+        assert.equal(manifest.production, true);
+        assert.equal(manifest.format, 'v2');
+
+        // 6. Every emitted bundle is served as JS and is syntactically valid.
+        const bundlesDir = path.join(distDir, 'bundles');
+        const bundleFiles = (await fs.readdir(bundlesDir)).filter(
+          (f) => f.startsWith('slice-bundle.') && f.endsWith('.js')
+        );
+        assert.ok(bundleFiles.length > 0, 'at least one bundle is produced');
+        for (const file of bundleFiles) {
+          const res = await fetch(`${base}/bundles/${file}`);
+          assert.equal(res.status, 200, `${file} should be served`);
+          assert.match(res.headers.get('content-type') || '', /javascript/);
+          const code = await res.text();
+          assert.doesNotThrow(
+            () => parse(code, { sourceType: 'module', plugins: ['jsx'] }),
+            `${file} is not valid JS`
+          );
+        }
+
+        // 7. Unknown client routes fall back to the SPA shell.
+        const spaRes = await fetch(`${base}/some/client/route`);
+        assert.equal(spaRes.status, 200);
+        assert.match(await spaRes.text(), /id="app"/);
+      } finally {
+        await closeServer(server);
+      }
+    });
+  });
+});