slicejs-web-framework 3.4.3 → 3.4.4

package/slicejs-cli/tests/build-command-integration.test.js

@@ -0,0 +1,87 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { parse } from '@babel/parser';
+import { withTestProject } from './helpers/setup.js';
+import build from '../commands/build/build.js';
+import { cleanBundles, bundleInfo } from '../commands/bundle/bundle.js';
+
+const MODULE_URL = import.meta.url;
+
+describe('slice build (full pipeline: buildProduction + bundle -> dist)', () => {
+  test('produces a dist/ with parseable bundles', async () => {
+    await withTestProject(async (root) => {
+      const ok = await build({ minify: false, obfuscate: false });
+      assert.equal(ok, true);
+
+      const dist = path.join(root, 'dist');
+      assert.ok(await fs.pathExists(path.join(dist, 'App', 'index.js')));
+
+      const bundlesDir = path.join(dist, 'bundles');
+      assert.ok(await fs.pathExists(bundlesDir), 'dist/bundles should exist');
+
+      const bundleFiles = (await fs.readdir(bundlesDir)).filter(
+        (f) => f.startsWith('slice-bundle.') && f.endsWith('.js')
+      );
+      assert.ok(bundleFiles.length > 0, 'at least one bundle in dist/bundles');
+
+      for (const f of bundleFiles) {
+        const code = await fs.readFile(path.join(bundlesDir, f), 'utf8');
+        assert.doesNotThrow(
+          () => parse(code, { sourceType: 'module', plugins: ['jsx'] }),
+          `dist bundle ${f} is not valid JS`
+        );
+      }
+    });
+  });
+});
+
+describe('bundle clean / info subcommands', () => {
+  test('cleanBundles removes slice-bundle.* files and the config', async () => {
+    await withTestProject(async (root) => {
+      const src = path.join(root, 'src');
+      await fs.writeFile(path.join(src, 'slice-bundle.critical.js'), '// x');
+      await fs.writeFile(path.join(src, 'slice-bundle.home.js'), '// x');
+      await fs.writeFile(path.join(src, 'bundle.config.json'), '{}');
+
+      await cleanBundles();
+
+      assert.equal(await fs.pathExists(path.join(src, 'slice-bundle.critical.js')), false);
+      assert.equal(await fs.pathExists(path.join(src, 'slice-bundle.home.js')), false);
+      assert.equal(await fs.pathExists(path.join(src, 'bundle.config.json')), false);
+    });
+  });
+
+  test('cleanBundles is a no-op (no throw) when there are no bundles', async () => {
+    await withTestProject(async () => {
+      await assert.doesNotReject(() => cleanBundles());
+    });
+  });
+
+  test('bundleInfo does not throw when a config exists', async () => {
+    await withTestProject(async (root) => {
+      const cfg = {
+        version: '2.0.0',
+        strategy: 'hybrid',
+        generated: '2025-01-01T00:00:00.000Z',
+        stats: {
+          totalComponents: 3,
+          totalRoutes: 2,
+          sharedComponents: 1,
+          sharedPercentage: 33,
+          totalSize: 2048,
+        },
+        bundles: { critical: { components: ['A'], size: 1024 }, routes: {} },
+      };
+      await fs.writeJson(path.join(root, 'src', 'bundle.config.json'), cfg);
+      await assert.doesNotReject(() => bundleInfo());
+    });
+  });
+
+  test('bundleInfo warns (no throw) when config is missing', async () => {
+    await withTestProject(async () => {
+      await assert.doesNotReject(() => bundleInfo());
+    });
+  });
+});

package/slicejs-cli/tests/build-mangling-e2e.test.js

@@ -0,0 +1,290 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { parse } from '@babel/parser';
+import { withTestProject } from './helpers/setup.js';
+import buildProduction from '../commands/buildProduction/buildProduction.js';
+
+const MODULE_URL = import.meta.url;
+
+async function writeSrc(root, rel, content) {
+  const p = path.join(root, 'src', rel);
+  await fs.ensureDir(path.dirname(p));
+  await fs.writeFile(p, content, 'utf8');
+  return p;
+}
+
+function collectBuiltFiles(distDir, pattern) {
+  const results = [];
+  function walk(dir) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const e of entries) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory()) walk(full);
+      else if (e.name.endsWith('.js') && (pattern ? e.name.match(pattern) : true)) results.push(full);
+    }
+  }
+  walk(distDir);
+  return results;
+}
+
+describe('e2e: property mangling with regex /^_/', () => {
+
+  describe('build succeeds and preserves public props', () => {
+
+    test('build completes successfully', async () => {
+      await withTestProject(async (root) => {
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+      });
+    });
+
+    test('onClick preserved across all built component files', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/Pagination/Pagination.js', `
+          import { Component } from '../../App/index.js';
+          class Pagination extends HTMLElement {
+            static props = {
+              currentPage: { type: 'number' },
+              totalPages: { type: 'number' },
+              onClick: { type: 'function' },
+              onChange: { type: 'function' }
+            }
+            handleClick() { this.onClick() }
+          }
+          customElements.define('slice-pagination', Pagination);
+          export { Pagination };
+        `);
+        await writeSrc(root, 'Components/Visual/Table/Table.js', `
+          import { Component } from '../../App/index.js';
+          class Table extends HTMLElement {
+            static props = {
+              items: { type: 'array' },
+              onClick: { type: 'function' },
+              onChange: { type: 'function' },
+              setPage: { type: 'function' },
+              sliceId: { type: 'string' }
+            }
+            handle(target) { target.onClick(); target.onChange(); target.setPage(1); }
+            getId() { return this.sliceId }
+          }
+          customElements.define('slice-table', Table);
+          export { Table };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const builtFiles = collectBuiltFiles(root + '/dist');
+        const allContent = builtFiles.map(f => fs.readFileSync(f, 'utf8')).join('\n');
+
+        assert.ok(allContent.includes('onClick'), '"onClick" must survive mangling');
+        assert.ok(allContent.includes('onChange'), '"onChange" must survive mangling');
+        assert.ok(allContent.includes('sliceId'), '"sliceId" must survive mangling');
+        assert.ok(allContent.includes('setPage'), '"setPage" must survive mangling');
+      });
+    });
+
+    test('_private properties ARE mangled', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/Toast/Toast.js', `
+          import { Component } from '../../App/index.js';
+          class Toast extends HTMLElement {
+            static props = { message: { type: 'string' }, type: { type: 'string' }, duration: { type: 'number' } }
+            set message(v) { this._message = v; this.render(); }
+            set type(v) { this._type = v; this.render(); }
+            set duration(v) { this._duration = v; this.initTimer(); }
+            get message() { return this._message }
+            get type() { return this._type }
+            get duration() { return this._duration }
+            render() { this.shadowRoot.innerHTML = this._message }
+            initTimer() { setTimeout(() => this.hide(), this._duration) }
+            hide() {}
+          }
+          customElements.define('slice-toast', Toast);
+          export { Toast };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const distJs = path.join(root, 'dist', 'Components', 'Visual', 'Toast', 'Toast.js');
+        const built = fs.readFileSync(distJs, 'utf8');
+
+        assert.doesNotMatch(built, /_message/, '_message backing field must be mangled');
+        assert.doesNotMatch(built, /_type/, '_type backing field must be mangled');
+        assert.doesNotMatch(built, /_duration/, '_duration backing field must be mangled');
+
+        assert.doesNotThrow(() => parse(built, { sourceType: 'module' }), 'output must be valid JS');
+      });
+    });
+
+  });
+
+  describe('cross-file access — public props preserved', () => {
+
+    test('Table calls Pagination.onClick — both preserve same name', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/Pagination/Pagination.js', `
+          class Pagination extends HTMLElement {
+            static props = { currentPage: { type: 'number' }, onClick: { type: 'function' } }
+            fire() { this.onClick(this.currentPage) }
+          }
+          customElements.define('slice-pagination', Pagination);
+          export { Pagination };
+        `);
+        await writeSrc(root, 'Components/Visual/Table/Table.js', `
+          class Table extends HTMLElement {
+            connect(pager) { pager.onClick(this.handlePageChange) }
+            handlePageChange(p) {}
+          }
+          customElements.define('slice-table', Table);
+          export { Table };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const distPagination = fs.readFileSync(path.join(root, 'dist', 'Components', 'Visual', 'Pagination', 'Pagination.js'), 'utf8');
+        const distTable = fs.readFileSync(path.join(root, 'dist', 'Components', 'Visual', 'Table', 'Table.js'), 'utf8');
+
+        assert.ok(distPagination.includes('onClick'), 'Pagination must preserve onClick');
+        assert.ok(distTable.includes('onClick'), 'Table must preserve onClick');
+      });
+    });
+
+    test('TreeView passes onClick to TreeItem — both preserve same name', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/TreeItem/TreeItem.js', `
+          class TreeItem extends HTMLElement {
+            static props = { value: { type: 'string' }, onClick: { type: 'function' } }
+            handle() { this.onClick() }
+          }
+          customElements.define('slice-tree-item', TreeItem);
+          export { TreeItem };
+        `);
+        await writeSrc(root, 'Components/Visual/TreeView/TreeView.js', `
+          import { TreeItem } from '../TreeItem/TreeItem.js';
+          class TreeView extends HTMLElement {
+            static props = { items: { type: 'array' }, onClick: { type: 'function' } }
+            makeItem() { const item = new TreeItem(); item.onClick = this.onClick; return item; }
+          }
+          customElements.define('slice-tree-view', TreeView);
+          export { TreeView };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const distItem = fs.readFileSync(path.join(root, 'dist', 'Components', 'Visual', 'TreeItem', 'TreeItem.js'), 'utf8');
+        const distView = fs.readFileSync(path.join(root, 'dist', 'Components', 'Visual', 'TreeView', 'TreeView.js'), 'utf8');
+
+        assert.ok(distItem.includes('onClick'), 'TreeItem must preserve onClick');
+        assert.ok(distView.includes('onClick'), 'TreeView must preserve onClick');
+
+        assert.doesNotThrow(() => parse(distItem, { sourceType: 'module' }));
+        assert.doesNotThrow(() => parse(distView, { sourceType: 'module' }));
+      });
+    });
+
+    test('MiniInspector accesses sliceId on target — preserved', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/MiniInspector/MiniInspector.js', `
+          class MiniInspector extends HTMLElement {
+            inspect(target) { return target.sliceId }
+          }
+          customElements.define('slice-inspector', MiniInspector);
+          export { MiniInspector };
+        `);
+        await writeSrc(root, 'Components/Visual/Button/Button.js', `
+          class Button extends HTMLElement {
+            static props = { value: { type: 'string' }, sliceId: { type: 'string' } }
+            get id() { return this.sliceId }
+          }
+          customElements.define('slice-button', Button);
+          export { Button };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const built = collectBuiltFiles(root + '/dist', /\.js$/);
+        const allContent = built.map(f => fs.readFileSync(f, 'utf8')).join('\n');
+        assert.ok(allContent.includes('sliceId'), 'sliceId must survive in all files');
+      });
+    });
+
+  });
+
+  describe('_private props are consistently mangled within each file', () => {
+
+    test('internal _ backing fields self-consistent within each component', async () => {
+      await withTestProject(async (root) => {
+        await writeSrc(root, 'Components/Visual/Counter/Counter.js', `
+          class Counter extends HTMLElement {
+            static props = { value: { type: 'number' } }
+            set value(v) { this._value = v; this.updateDisplay(); }
+            get value() { return this._value }
+            updateDisplay() { this.textContent = this._value }
+            increment() { this._value++; this.updateDisplay(); }
+          }
+          customElements.define('slice-counter', Counter);
+          export { Counter };
+        `);
+
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const distJs = path.join(root, 'dist', 'Components', 'Visual', 'Counter', 'Counter.js');
+        const built = fs.readFileSync(distJs, 'utf8');
+
+        assert.doesNotMatch(built, /_value/, '_value must be mangled');
+
+        const shortName = built.match(/this\.([a-zA-Z])\s*=/);
+        assert.ok(shortName, 'should have a mangled assignment like this.a =');
+        const name = shortName[1];
+
+        const reads = [...built.matchAll(new RegExp(`this\\.${name}(?!\\w)`, 'g'))];
+        const writes = [...built.matchAll(new RegExp(`this\\.${name}\\s*=`, 'g'))];
+        assert.ok(reads.length >= 2, `_value -> "${name}" must be read at least twice (getter + updateDisplay), got ${reads.length}`);
+        assert.ok(writes.length >= 1, `_value -> "${name}" must be written at least once (setter), got ${writes.length}`);
+
+        assert.doesNotThrow(() => parse(built, { sourceType: 'module' }));
+      });
+    });
+
+  });
+
+  describe('dist/ output integrity', () => {
+
+    test('all built JS files are valid ES modules', async () => {
+      await withTestProject(async (root) => {
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const builtFiles = collectBuiltFiles(root + '/dist', /\.js$/);
+        for (const f of builtFiles) {
+          const content = fs.readFileSync(f, 'utf8');
+          assert.doesNotThrow(
+            () => parse(content, { sourceType: 'module', ecmaVersion: 2022 }),
+            `${path.relative(root, f)} must be valid JS`
+          );
+        }
+      });
+    });
+
+    test('critical Slice files survive with expected content', async () => {
+      await withTestProject(async (root) => {
+        const ok = await buildProduction({ minify: true });
+        assert.equal(ok, true);
+
+        const componentsJs = fs.readFileSync(path.join(root, 'dist', 'Components', 'components.js'), 'utf8');
+        assert.match(componentsJs, /const components/);
+        assert.match(componentsJs, /export default/);
+      });
+    });
+
+  });
+
+});

package/slicejs-cli/tests/build-production-e2e.test.js

@@ -0,0 +1,140 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { parse } from '@babel/parser';
+import { withTestProject } from './helpers/setup.js';
+import buildProduction from '../commands/buildProduction/buildProduction.js';
+
+const MODULE_URL = import.meta.url;
+
+async function writeSrc(root, rel, content) {
+  const p = path.join(root, 'src', rel);
+  await fs.ensureDir(path.dirname(p));
+  await fs.writeFile(p, content, 'utf8');
+  return p;
+}
+
+describe('buildProduction end-to-end', () => {
+  test('produces a dist/ that preserves the Slice.js critical files', async () => {
+    await withTestProject(async (root) => {
+      const ok = await buildProduction({ minify: false });
+      assert.equal(ok, true, 'build should succeed on the starter project');
+
+      const dist = path.join(root, 'dist');
+      assert.ok(await fs.pathExists(path.join(dist, 'sliceConfig.json')));
+      assert.ok(await fs.pathExists(path.join(dist, 'Components', 'components.js')));
+      assert.ok(await fs.pathExists(path.join(dist, 'App', 'index.js')));
+    });
+  });
+
+  test('sliceConfig.json is copied verbatim (never minified)', async () => {
+    await withTestProject(async (root) => {
+      await buildProduction({ minify: true });
+      const srcCfg = await fs.readFile(path.join(root, 'src', 'sliceConfig.json'), 'utf8');
+      const distCfg = await fs.readFile(path.join(root, 'dist', 'sliceConfig.json'), 'utf8');
+      assert.equal(distCfg, srcCfg);
+    });
+  });
+
+  test('components.js keeps its registry structure after minification', async () => {
+    await withTestProject(async (root) => {
+      await buildProduction({ minify: true });
+      const built = await fs.readFile(path.join(root, 'dist', 'Components', 'components.js'), 'utf8');
+      assert.match(built, /const components/);
+      assert.match(built, /export default/);
+      assert.doesNotThrow(() => parse(built, { sourceType: 'module' }));
+    });
+  });
+
+  test('--no-minify copies JS byte-for-byte', async () => {
+    await withTestProject(async (root) => {
+      const original = 'export function probe() {\n  return 1 + 1;\n}\n';
+      await writeSrc(root, 'App/probe.js', original);
+      await buildProduction({ minify: false });
+      const built = await fs.readFile(path.join(root, 'dist', 'App', 'probe.js'), 'utf8');
+      assert.equal(built, original);
+    });
+  });
+
+  test('minification preserves reserved Slice identifiers', async () => {
+    await withTestProject(async (root) => {
+      await writeSrc(
+        root,
+        'App/probe.js',
+        `export function probe() {\n` +
+          `  const aVeryLongLocalNameThatShouldBeMangled = slice.build('Foo');\n` +
+          `  return aVeryLongLocalNameThatShouldBeMangled;\n` +
+          `}\nclass Controller {}\n`
+      );
+      await buildProduction({ minify: true });
+      const built = await fs.readFile(path.join(root, 'dist', 'App', 'probe.js'), 'utf8');
+      assert.match(built, /slice\.build/, 'reserved global "slice" must survive minification');
+      assert.match(built, /Controller/, 'reserved class name "Controller" must survive');
+      assert.doesNotThrow(() => parse(built, { sourceType: 'module' }));
+    });
+  });
+
+  test('CSS is minified (whitespace collapsed)', async () => {
+    await withTestProject(async (root) => {
+      await writeSrc(root, 'Styles/probe.css', '.a {\n   color:  red;\n   margin: 0;\n}\n');
+      await buildProduction({ minify: true });
+      const built = await fs.readFile(path.join(root, 'dist', 'Styles', 'probe.css'), 'utf8');
+      assert.ok(built.length < 30, `expected minified css, got: ${JSON.stringify(built)}`);
+      assert.match(built, /\.a\{/);
+    });
+  });
+
+  test('HTML minification preserves slice-* attributes', async () => {
+    await withTestProject(async (root) => {
+      await writeSrc(
+        root,
+        'App/probe.html',
+        '<!DOCTYPE html>\n<html>\n  <body>\n    <div   slice-id="my-component"  >hi</div>\n  </body>\n</html>\n'
+      );
+      await buildProduction({ minify: true });
+      const built = await fs.readFile(path.join(root, 'dist', 'App', 'probe.html'), 'utf8');
+      assert.match(built, /slice-id="my-component"/, 'slice-* attribute must be preserved');
+    });
+  });
+
+  describe('clean / skip-clean semantics', () => {
+    test('a stale dist file is removed by default', async () => {
+      await withTestProject(async (root) => {
+        const stale = path.join(root, 'dist', 'STALE_ARTIFACT.txt');
+        await fs.ensureDir(path.dirname(stale));
+        await fs.writeFile(stale, 'old');
+        await buildProduction({ minify: false });
+        assert.equal(await fs.pathExists(stale), false, 'stale dist file should be cleaned');
+      });
+    });
+
+    test('--skip-clean keeps a stale dist file', async () => {
+      await withTestProject(async (root) => {
+        const stale = path.join(root, 'dist', 'STALE_ARTIFACT.txt');
+        await fs.ensureDir(path.dirname(stale));
+        await fs.writeFile(stale, 'old');
+        await buildProduction({ minify: false, skipClean: true });
+        assert.equal(await fs.pathExists(stale), true, 'stale dist file should survive --skip-clean');
+      });
+    });
+  });
+
+  test('build fails (returns false) when a critical file is missing', async () => {
+    await withTestProject(async (root) => {
+      await fs.remove(path.join(root, 'src', 'App', 'index.js'));
+      const ok = await buildProduction({ minify: false });
+      assert.equal(ok, false, 'missing App/index.js must abort the build');
+    });
+  });
+
+  test('bundle.config inside a bundles/ folder is renamed to bundle.build.config', async () => {
+    await withTestProject(async (root) => {
+      await writeSrc(root, 'bundles/bundle.config.json', '{"production":true}');
+      await buildProduction({ minify: false });
+      const dist = path.join(root, 'dist', 'bundles');
+      assert.equal(await fs.pathExists(path.join(dist, 'bundle.build.config.json')), true);
+      assert.equal(await fs.pathExists(path.join(dist, 'bundle.config.json')), false);
+    });
+  });
+});