npm - @1agh/maude - Versions diffs - 0.15.0 - Mend

@1agh/maude 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/plugins/design/dev-server/test/perf-harness.ts ADDED Viewed

@@ -0,0 +1,193 @@
+#!/usr/bin/env bun
+// Performance harness for Phase 3.4 budgets.
+//
+//   bun run plugins/design/dev-server/test/perf-harness.ts
+//
+// Boots the dev-server against a synthetic .design/ fixture, measures the
+// budget table from `.ai/plans/phase-3.4-architecture-refactor.md`, and writes
+// `test/perf-report.json` plus a one-line stdout summary.
+//
+// Budgets (relaxed per DDR-012):
+//   coldStartHttpMs        < 100   process spawn -> /_health 200
+//   bundleGzBytes          < 80 KB after Bun.build minify
+//   wsRoundTripP50         < 1
+//   wsRoundTripP99         < 5
+//
+// Non-blocking job — CI records the numbers and only fails on > 20 % regression
+// from the prior baseline. Locally `--strict` exits 1 on any budget miss.
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { gzipSync, spawn } from 'bun';
+const STRICT = process.argv.includes('--strict');
+const PORT = 4500 + Math.floor(Math.random() * 1000);
+const HERE = import.meta.dir;
+const REPO = join(HERE, '..');
+interface Report {
+  ts: string;
+  budgets: Record<string, { value: number; budget: number; unit: string; pass: boolean }>;
+  notes: string[];
+}
+function makeFixture(): string {
+  const root = mkdtempSync(join(tmpdir(), 'mdcc-perf-'));
+  mkdirSync(join(root, '.design', 'ui'), { recursive: true });
+  writeFileSync(join(root, '.design', 'config.json'), '{"name":"perf"}');
+  for (let i = 0; i < 10; i++) {
+    writeFileSync(
+      join(root, '.design', 'ui', `c${i}.html`),
+      `<!doctype html><html><body><div data-dc-screen="s${i}"><h1>${i}</h1></div></body></html>`
+    );
+  }
+  return root;
+}
+async function measureColdStart(root: string): Promise<number> {
+  const start = performance.now();
+  const proc = spawn({
+    cmd: ['bun', 'run', join(REPO, 'server.ts'), '--port', String(PORT), '--root', root],
+    cwd: REPO,
+    env: { ...process.env, NO_OPEN: '1', NODE_ENV: 'production' },
+    stdout: 'ignore',
+    stderr: 'ignore',
+  });
+  try {
+    while (performance.now() - start < 5000) {
+      try {
+        const r = await fetch(`http://localhost:${PORT}/_health`, {
+          signal: AbortSignal.timeout(50),
+        });
+        if (r.ok) return performance.now() - start;
+      } catch {
+        /* not up yet */
+      }
+      await Bun.sleep(5);
+    }
+    throw new Error('cold-start: server did not respond within 5 s');
+  } finally {
+    proc.kill();
+    await proc.exited;
+  }
+}
+async function measureBundleSize(): Promise<number> {
+  const buildResult = spawn({
+    cmd: [
+      'bun',
+      'run',
+      join(REPO, 'build.ts'),
+      '--release',
+      `--target=bun-${process.platform}-${process.arch}`,
+    ],
+    cwd: REPO,
+    stdout: 'ignore',
+    stderr: 'ignore',
+    env: { ...process.env, NODE_ENV: 'production' },
+  });
+  const code = await buildResult.exited;
+  if (code !== 0) throw new Error('build failed');
+  const bundle = await Bun.file(join(REPO, 'dist', 'client.bundle.js')).arrayBuffer();
+  const gz = gzipSync(new Uint8Array(bundle));
+  return gz.byteLength;
+}
+async function measureWsRoundTrip(root: string): Promise<{ p50: number; p99: number }> {
+  const proc = spawn({
+    cmd: ['bun', 'run', join(REPO, 'server.ts'), '--port', String(PORT + 1), '--root', root],
+    cwd: REPO,
+    env: { ...process.env, NO_OPEN: '1' },
+    stdout: 'ignore',
+    stderr: 'ignore',
+  });
+  try {
+    while (true) {
+      try {
+        const r = await fetch(`http://localhost:${PORT + 1}/_health`, {
+          signal: AbortSignal.timeout(50),
+        });
+        if (r.ok) break;
+      } catch {
+        /* */
+      }
+      await Bun.sleep(20);
+    }
+    const ws = new WebSocket(`ws://localhost:${PORT + 1}/_ws`);
+    await new Promise<void>((resolve, reject) => {
+      const t = setTimeout(() => reject(new Error('ws timeout')), 2000);
+      ws.addEventListener('open', () => {
+        clearTimeout(t);
+        resolve();
+      });
+      ws.addEventListener('error', reject);
+    });
+    const samples: number[] = [];
+    for (let i = 0; i < 500; i++) {
+      const t = performance.now();
+      ws.send(JSON.stringify({ type: 'active', file: `.design/ui/c${i % 10}.html` }));
+      // No round-trip echo for `active`; approximate by next-tick read.
+      await Bun.sleep(0);
+      samples.push(performance.now() - t);
+    }
+    ws.close();
+    samples.sort((a, b) => a - b);
+    return {
+      p50: samples[Math.floor(samples.length * 0.5)] ?? 0,
+      p99: samples[Math.floor(samples.length * 0.99)] ?? 0,
+    };
+  } finally {
+    proc.kill();
+    await proc.exited;
+  }
+}
+async function main() {
+  const root = makeFixture();
+  const report: Report = { ts: new Date().toISOString(), budgets: {}, notes: [] };
+  const cold = await measureColdStart(root);
+  report.budgets.coldStartHttpMs = {
+    value: Math.round(cold),
+    budget: 100,
+    unit: 'ms',
+    pass: cold < 100,
+  };
+  const gz = await measureBundleSize();
+  report.budgets.bundleGzBytes = {
+    value: gz,
+    budget: 80 * 1024,
+    unit: 'B',
+    pass: gz < 80 * 1024,
+  };
+  const ws = await measureWsRoundTrip(root);
+  report.budgets.wsRoundTripP50 = {
+    value: +ws.p50.toFixed(2),
+    budget: 1,
+    unit: 'ms',
+    pass: ws.p50 < 1,
+  };
+  report.budgets.wsRoundTripP99 = {
+    value: +ws.p99.toFixed(2),
+    budget: 5,
+    unit: 'ms',
+    pass: ws.p99 < 5,
+  };
+  writeFileSync(join(HERE, 'perf-report.json'), JSON.stringify(report, null, 2));
+  const summary = Object.entries(report.budgets)
+    .map(([k, v]) => `${v.pass ? '✓' : '✗'} ${k}=${v.value}${v.unit} (budget ${v.budget}${v.unit})`)
+    .join('  ');
+  console.log(summary);
+  const failed = Object.values(report.budgets).filter((b) => !b.pass).length;
+  if (STRICT && failed > 0) process.exit(1);
+}
+await main();

package/plugins/design/dev-server/test/phase-3.6-smoke.test.ts ADDED Viewed

@@ -0,0 +1,77 @@
+// Phase 3.6 Task 11 — end-to-end smoke. Runs the full TSX pipeline against
+// the migrated canvases sitting in this repo's .design/ui/ folder, verifying:
+//
+//   - oxc-parser + magic-string two-pass transform produces parseable JS
+//   - locator map is non-trivially populated (every JSX element gets an entry)
+//   - Bun.build wraps the post-pass-1 source into a browser-loadable ESM
+//     (proves the codemod's output cooperates with canvas-build.ts)
+//   - handoff.emitRegistryItem produces a schema-valid registry-item.json
+//     with `data-cd-id` stripped + react/react-dom in the dep floor
+//
+// Skips itself cleanly when the canvases haven't been migrated (CI / fresh
+// checkout). The bun-only-locally guard keeps the suite portable.
+import { describe, expect, test } from 'bun:test';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { buildCanvasModule } from '../canvas-build.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+import { emitRegistryItem } from '../handoff.ts';
+const REPO_ROOT = path.resolve(import.meta.dir, '../../../..');
+const DESIGN_ROOT = path.join(REPO_ROOT, '.design');
+const DOCS_SITE = path.join(DESIGN_ROOT, 'ui/Docs Site.tsx');
+const CANVAS_VIEWPORT = path.join(DESIGN_ROOT, 'ui/Canvas Viewport.tsx');
+const skipReason = (() => {
+  if (!existsSync(DOCS_SITE)) return `${DOCS_SITE} missing — run scripts/migrate-canvases.ts`;
+  if (!existsSync(CANVAS_VIEWPORT))
+    return `${CANVAS_VIEWPORT} missing — run scripts/migrate-canvases.ts`;
+  return null;
+})();
+const describeOrSkip = skipReason ? describe.skip : describe;
+describeOrSkip('Phase 3.6 smoke — migrated canvases through the full pipeline', () => {
+  test('canvas-pipeline transpiles Docs Site.tsx + emits a non-trivial locator', async () => {
+    const src = await Bun.file(DOCS_SITE).text();
+    const r = transpileCanvasSource(DOCS_SITE, src);
+    expect(r.js.length).toBeGreaterThan(0);
+    // Docs Site has 5 artboards × ~tens of elements each — well above the 100 floor.
+    expect(Object.keys(r.locator).length).toBeGreaterThan(100);
+    // ETag is deterministic across runs on identical source.
+    const again = transpileCanvasSource(DOCS_SITE, src);
+    expect(again.etag).toBe(r.etag);
+  });
+  test('canvas-pipeline transpiles Canvas Viewport.tsx', async () => {
+    const src = await Bun.file(CANVAS_VIEWPORT).text();
+    const r = transpileCanvasSource(CANVAS_VIEWPORT, src);
+    expect(r.js.length).toBeGreaterThan(0);
+    expect(Object.keys(r.locator).length).toBeGreaterThan(100);
+  });
+  test('canvas-build produces browser-loadable ESM for Docs Site.tsx', async () => {
+    const src = await Bun.file(DOCS_SITE).text();
+    const r = await buildCanvasModule(DOCS_SITE, src);
+    expect(r.js).toContain('export');
+    // React + jsx-runtime stay external (resolved via importmap in shell).
+    expect(r.js).toContain('react');
+  });
+  test('handoff.emitRegistryItem strips data-cd-id + floors react/react-dom', async () => {
+    const item = await emitRegistryItem({
+      canvasAbsPath: DOCS_SITE,
+      title: 'Docs Site',
+      description: 'Smoke regression target',
+    });
+    expect(item.$schema).toBe('https://ui.shadcn.com/schema/registry-item.json');
+    expect(item.type).toBe('registry:block');
+    expect(item.name).toBe('docs-site');
+    expect(item.dependencies).toContain('react');
+    expect(item.dependencies).toContain('react-dom');
+    expect(item.files[0]?.path).toBe('components/docs-site.tsx');
+    expect(item.files[0]?.content).not.toContain('data-cd-id');
+  });
+});

package/plugins/design/dev-server/test/runtime-bundle.test.ts ADDED Viewed

@@ -0,0 +1,69 @@
+// runtime-bundle.ts — Phase 3.6 Task 6. Each runtime sub-bundle should:
+//   1. be self-contained for its own package (no `import "react"` left dangling
+//      in the react bundle itself, for instance);
+//   2. externalise the OTHER three runtime packages — so the four bundles
+//      stitched together via the importmap don't ship two React copies;
+//   3. expose its package's well-known named exports as real ESM bindings
+//      (not the silent-empty-export shape `export * from <cjs>` produces).
+import { describe, expect, test } from 'bun:test';
+import { RUNTIME_PACKAGES, getRuntimeBundle, packageForSlug, slugFor } from '../runtime-bundle.ts';
+describe('runtime-bundle', () => {
+  test('builds all four sub-bundles successfully', async () => {
+    for (const p of RUNTIME_PACKAGES) {
+      const b = await getRuntimeBundle(p);
+      expect(b.js.length).toBeGreaterThan(0);
+      expect(b.etag).toMatch(/^[0-9a-f]+$/);
+    }
+  });
+  test('react/jsx-runtime stays small (no React/ReactDOM inlined)', async () => {
+    const b = await getRuntimeBundle('react/jsx-runtime');
+    // Production jsx-runtime is self-contained (~3 KB) and doesn't require an
+    // explicit React import — the bundle should NOT carry a transitive copy
+    // of React's hooks or ReactDOM internals. Size cap is a coarse proxy.
+    expect(b.js.length).toBeLessThan(8 * 1024);
+    expect(b.js).not.toContain('createRoot(');
+    expect(b.js).not.toContain('useState');
+  });
+  test('react/jsx-runtime exposes jsx + jsxs + Fragment as ESM exports', async () => {
+    const b = await getRuntimeBundle('react/jsx-runtime');
+    expect(b.js).toMatch(/export\s*\{[\s\S]*\bjsx\b[\s\S]*\}/);
+    expect(b.js).toMatch(/export\s*\{[\s\S]*\bjsxs\b[\s\S]*\}/);
+    expect(b.js).toMatch(/export\s*\{[\s\S]*\bFragment\b[\s\S]*\}/);
+  });
+  test('react/jsx-dev-runtime bundle still builds (used in dev tooling)', async () => {
+    const b = await getRuntimeBundle('react/jsx-dev-runtime');
+    // Production-mode define(): the dev runtime still bundles (we list it in
+    // the importmap as a fallback), but its source path inside the bundle
+    // may be the production jsx-runtime depending on the package's own
+    // env switch. Either way it should produce a non-empty ESM module.
+    expect(b.js.length).toBeGreaterThan(0);
+    expect(b.js).toMatch(/export\s*\{/);
+  });
+  test('react-dom/client exposes createRoot + hydrateRoot', async () => {
+    const b = await getRuntimeBundle('react-dom/client');
+    expect(b.js).toMatch(/export\s*\{[\s\S]*\bcreateRoot\b[\s\S]*\}/);
+    expect(b.js).toMatch(/export\s*\{[\s\S]*\bhydrateRoot\b[\s\S]*\}/);
+  });
+  test('cache: second call returns same instance (no re-build)', async () => {
+    const a = await getRuntimeBundle('react');
+    const b = await getRuntimeBundle('react');
+    expect(b).toBe(a);
+  });
+  test('slug ⇄ package round-trip', () => {
+    for (const p of RUNTIME_PACKAGES) {
+      const s = slugFor(p);
+      expect(packageForSlug(s)).toBe(p);
+      expect(packageForSlug(`${s}.js`)).toBe(p);
+    }
+    expect(packageForSlug('nope.js')).toBeNull();
+  });
+});

package/plugins/design/dev-server/test/server-lifecycle.test.ts ADDED Viewed

@@ -0,0 +1,28 @@
+// Smoke: boot → /_health 200 → _server.json written → shutdown.
+import { describe, expect, test } from 'bun:test';
+import { join } from 'node:path';
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+describe('server lifecycle', () => {
+  test('boots, writes _server.json, responds to /_health', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const h = await fetch(`http://localhost:${port}/_health`);
+      expect(h.status).toBe(200);
+      const body = (await h.json()) as { ok: boolean; app: string };
+      expect(body.ok).toBe(true);
+      expect(body.app).toBe('design');
+      const info = await Bun.file(join(designRoot, '_server.json')).json();
+      expect(info.port).toBe(port);
+      expect(info.pid).toBeGreaterThan(0);
+      expect(info.url).toBe(`http://localhost:${port}`);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

package/plugins/design/dev-server/test/tool-palette.test.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+// tool-palette — Phase 5.1 centered icon toolbar.
+//
+// The palette pulls live state via three context hooks (tool mode, viewport
+// controller, annotations visibility) and the icon set is dependency-free, so
+// the SSR render path is the cleanest unit-test surface. We confirm:
+//   - one icon button per default tool registered in ToolProvider
+//   - the active tool gets aria-pressed=true
+//   - the zoom display shows the live percentage
+//   - the icon module exports a glyph for every default tool id
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { TOOL_ICONS } from '../canvas-icons.tsx';
+import { ToolPalette } from '../tool-palette.tsx';
+import { AnnotationsVisibilityProvider } from '../use-annotations-visibility.tsx';
+import { DEFAULT_TOOLS, ToolProvider } from '../use-tool-mode.tsx';
+describe('canvas-icons / TOOL_ICONS', () => {
+  test('exposes a component for every default tool id', () => {
+    for (const t of DEFAULT_TOOLS) {
+      expect(TOOL_ICONS[t.id]).toBeDefined();
+    }
+  });
+  test('icons render as <svg> elements with currentColor stroke', () => {
+    for (const t of DEFAULT_TOOLS) {
+      const Icon = TOOL_ICONS[t.id];
+      if (!Icon) continue;
+      const html = renderToStaticMarkup(<Icon />);
+      expect(html).toContain('<svg');
+      expect(html).toContain('stroke="currentColor"');
+    }
+  });
+});
+describe('tool-palette / SSR render contract', () => {
+  // First render under SSR returns null (the `mounted` gate is intentional —
+  // avoids hydration drift). We assert the empty mount + then re-render
+  // hydrated by passing a different initial setup, but bun's SSR only runs
+  // the first render. Adequate to confirm the import + provider stack don't
+  // throw, which catches typo/cycle regressions in the new chrome modules.
+  test('mounts inside ToolProvider + visibility provider without throwing', () => {
+    expect(() =>
+      renderToStaticMarkup(
+        <AnnotationsVisibilityProvider>
+          <ToolProvider>
+            <ToolPalette />
+          </ToolProvider>
+        </AnnotationsVisibilityProvider>
+      )
+    ).not.toThrow();
+  });
+});

package/plugins/design/dev-server/test/use-annotation-selection.test.tsx ADDED Viewed

@@ -0,0 +1,77 @@
+// use-annotation-selection — Phase 5.1. Pure provider contract.
+import { describe, expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+import {
+  AnnotationSelectionProvider,
+  useAnnotationSelection,
+  useAnnotationSelectionOptional,
+} from '../use-annotation-selection.tsx';
+describe('use-annotation-selection / outside provider', () => {
+  test('useAnnotationSelectionOptional() returns null outside provider', () => {
+    // Type-level + presence assertion — hook calls can't run standalone, but
+    // the export shape documents the contract.
+    expect(typeof useAnnotationSelectionOptional).toBe('function');
+  });
+  test('useAnnotationSelection() throws outside provider', () => {
+    function Bare() {
+      useAnnotationSelection();
+      return null;
+    }
+    expect(() => renderToStaticMarkup(<Bare />)).toThrow(
+      /useAnnotationSelection must be used inside <AnnotationSelectionProvider>/
+    );
+  });
+});
+describe('use-annotation-selection / store contract', () => {
+  // bun:test runs in a node env without a renderer, but the provider's
+  // useState updates run synchronously during render. We exercise the API by
+  // capturing the value object via a render-prop child and asserting on
+  // post-update state.
+  //
+  // Since hooks can't be driven directly without a renderer, we instead
+  // verify the store via direct module exports we already know are pure
+  // (rid, dedupe semantics through the provider). For dynamic state, we
+  // assert via a smoke-renders-without-throwing pattern, then unit-test the
+  // dedupe + selection key logic via a captured handle.
+  test('AnnotationSelectionProvider renders children with empty initial selection', () => {
+    function Consumer() {
+      const sel = useAnnotationSelection();
+      return <span data-len={sel.selectedIds.length}>{sel.selectedIds.length}</span>;
+    }
+    const html = renderToStaticMarkup(
+      <AnnotationSelectionProvider>
+        <Consumer />
+      </AnnotationSelectionProvider>
+    );
+    expect(html).toContain('data-len="0"');
+  });
+  test('AnnotationSelectionProvider exposes the action set', () => {
+    let captured: ReturnType<typeof useAnnotationSelection> | null = null;
+    function Capture() {
+      captured = useAnnotationSelection();
+      return null;
+    }
+    renderToStaticMarkup(
+      <AnnotationSelectionProvider>
+        <Capture />
+      </AnnotationSelectionProvider>
+    );
+    expect(captured).not.toBeNull();
+    if (!captured) throw new Error('unreachable: asserted above');
+    const c = captured;
+    expect(typeof c.replace).toBe('function');
+    expect(typeof c.add).toBe('function');
+    expect(typeof c.toggle).toBe('function');
+    expect(typeof c.clear).toBe('function');
+    expect(typeof c.contains).toBe('function');
+    expect(c.selectedIds).toEqual([]);
+    expect(c.contains('any')).toBe(false);
+  });
+});