bench: add mitata harness for @glimmer/syntax parse/normalize/precompile

Reproducible side-by-side benchmark of preprocess, normalize (ASTv1 → ASTv2),
and full precompile() against a control worktree. Run via:

  pnpm bench:syntax                             # standalone
  pnpm bench:syntax -- --control-dir /path/to/main-checkout

Size ladder matches the PR #21314 body (462 / 1494 / 4482 / 32868 chars,
the last sized to match Discourse's admin-user/index.gjs). Fixtures live
under bench/fixtures/; large and extra-large are medium × 3 / × 22.

Emits mitata's standard ms/iter + boxplot + summary output, plus a µs/char
summary table across the size ladder that makes the O(n²) → O(n) flattening
visible at a glance.

Author: johanrd

package.json

@@ -37,6 +37,7 @@
   "scripts": {
     "actions-up": "pnpm dlx actions-up",
     "bench": "node ./bin/benchmark.mjs",
+    "bench:syntax": "node --expose-gc --import @swc-node/register/esm-register packages/@glimmer/syntax/bench/syntax.bench.mjs",
     "build:js": "rollup --config",
     "build:types": "node types/publish.mjs",
     "build": "npm-run-all build:*",
@@ -122,6 +123,7 @@
     "glob": "^8.0.3",
     "globals": "^16.0.0",
     "kill-port-process": "^3.2.1",
+    "mitata": "^1.0.34",
     "mocha": "^11.0.0",
     "npm-run-all2": "^8.0.0",
     "prettier": "^3.5.3",

packages/@glimmer/syntax/bench/syntax.bench.mjs

@@ -0,0 +1,283 @@
+/* global process, console */
+/* eslint-disable no-console */
+
+/**
+ * Mitata benchmark for `@glimmer/syntax` parse (`preprocess`), normalize
+ * (ASTv1 → ASTv2 — where the loc-conversion hot path lives), and full
+ * `@glimmer/compiler` `precompile()`.
+ *
+ * Standalone (experiment only):
+ *   pnpm bench:syntax
+ *
+ * Side-by-side vs a control checkout (e.g. a git worktree on main):
+ *   pnpm bench:syntax -- --control-dir /tmp/ember-main
+ *
+ * The control dir must have its own `pnpm install` done (so its
+ * `@glimmer/syntax` has working workspace-dep resolution).
+ *
+ * Sizes:
+ *   small  — ~1.5k chars (route-template fragment)
+ *   medium — small × 3   (~4.5k chars)
+ *   large  — small × 22  (~33k chars, scale of the largest real route
+ *                         templates, e.g. Discourse's admin-user/index.gjs)
+ */
+
+import { resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { bench, boxplot, do_not_optimize as doNotOptimize, run, summary } from 'mitata';
+
+import {
+  normalize as experimentNormalize,
+  preprocess as experimentPreprocess,
+  src as experimentSrc,
+} from '../index.ts';
+import { precompile as experimentPrecompile } from '../../compiler/index.ts';
+
+// ---------------------------------------------------------------------------
+// CLI args — --control-dir <path> loads @glimmer/syntax from a sibling checkout
+// ---------------------------------------------------------------------------
+
+const argv = process.argv.slice(2);
+const ctrlIdx = argv.indexOf('--control-dir');
+const CONTROL_DIR = ctrlIdx !== -1 ? resolve(argv[ctrlIdx + 1]) : null;
+
+let controlPreprocess = null;
+let controlNormalize = null;
+let controlSrc = null;
+let controlPrecompile = null;
+if (CONTROL_DIR) {
+  const syntaxEntry = pathToFileURL(resolve(CONTROL_DIR, 'packages/@glimmer/syntax/index.ts')).href;
+  const syntax = await import(syntaxEntry);
+  controlPreprocess = syntax.preprocess;
+  controlNormalize = syntax.normalize;
+  controlSrc = syntax.src;
+
+  const compilerEntry = pathToFileURL(
+    resolve(CONTROL_DIR, 'packages/@glimmer/compiler/index.ts')
+  ).href;
+  const compiler = await import(compilerEntry);
+  controlPrecompile = compiler.precompile;
+}
+
+// ---------------------------------------------------------------------------
+// Fixtures (inline so the whole bench is one file)
+// ---------------------------------------------------------------------------
+
+const SMALL = `<div class='user-profile {{if this.isPremium "premium"}}'>
+  <header class='profile-header'>
+    <img src={{this.avatarUrl}} alt={{this.username}} class='avatar' />
+    <h2>{{this.displayName}}</h2>
+    <p class='bio'>{{this.bio}}</p>
+    {{#if this.isOwnProfile}}
+      <button {{on 'click' this.editProfile}}>Edit Profile</button>
+    {{/if}}
+  </header>
+  <nav class='profile-tabs'>
+    {{#each this.tabs as |tab|}}
+      <button
+        class='tab {{if (eq tab.id this.activeTab) "active"}}'
+        {{on 'click' (fn this.setTab tab.id)}}
+      >
+        {{tab.label}}{{#if tab.count}}<span class='count'>{{tab.count}}</span>{{/if}}
+      </button>
+    {{/each}}
+  </nav>
+  <section class='profile-content'>
+    {{#if (eq this.activeTab 'posts')}}
+      {{#each this.posts as |post|}}
+        <article class='post-card'>
+          <h3>{{post.title}}</h3><p>{{post.excerpt}}</p>
+          <footer><time>{{post.createdAt}}</time><span>{{post.views}} views</span></footer>
+        </article>
+      {{else}}
+        <p class='empty-state'>No posts yet.</p>
+      {{/each}}
+    {{else if (eq this.activeTab 'followers')}}
+      {{#each this.followers as |follower|}}
+        <div class='follower-card'>
+          <img src={{follower.avatar}} alt={{follower.name}} />
+          <span>{{follower.name}}</span>
+          <button {{on 'click' (fn this.followUser follower.id)}}>
+            {{if follower.isFollowing 'Unfollow' 'Follow'}}
+          </button>
+        </div>
+      {{/each}}
+    {{/if}}
+  </section>
+</div>
+`;
+
+const FIXTURES = {
+  small: SMALL,
+  medium: SMALL.repeat(3),
+  large: SMALL.repeat(22),
+};
+
+const SIZES = ['small', 'medium', 'large'];
+// Per-size iteration counts — each bench() body runs `iters` calls per sample.
+const ITERS = { small: 200, medium: 50, large: 10 };
+
+// ---------------------------------------------------------------------------
+// JIT warm-up
+// ---------------------------------------------------------------------------
+
+const WARMUP_ROUNDS = 5;
+for (const size of SIZES) {
+  const src = FIXTURES[size];
+  for (let i = 0; i < WARMUP_ROUNDS; i++) {
+    experimentPreprocess(src);
+    experimentNormalize(new experimentSrc.Source(src));
+    experimentPrecompile(src);
+    if (controlPreprocess) {
+      controlPreprocess(src);
+      controlNormalize(new controlSrc.Source(src));
+      controlPrecompile(src);
+    }
+  }
+}
+globalThis.gc?.();
+
+// ---------------------------------------------------------------------------
+// Register benchmarks. We also track metadata keyed by bench name so we can
+// compute a µs/char summary table after mitata is done.
+// ---------------------------------------------------------------------------
+
+const meta = new Map(); // name -> { phase, size, chars, iters, variant }
+
+function reg(name, phase, size, chars, iters, variant, fn) {
+  meta.set(name, { phase, size, chars, iters, variant });
+  bench(name, fn);
+}
+
+const PHASES = ['parse', 'normalize', 'precompile'];
+
+for (const size of SIZES) {
+  const src = FIXTURES[size];
+  const iters = ITERS[size];
+  const chars = src.length;
+
+  globalThis.gc?.();
+
+  for (const phase of PHASES) {
+    const expName = `${phase.padEnd(9)} ${size} (${chars}c)${controlPreprocess ? ' (experiment)' : ''}`;
+    const ctlName = `${phase.padEnd(9)} ${size} (${chars}c) (control)`;
+
+    const expFn = (() => {
+      switch (phase) {
+        case 'parse':
+          return () => {
+            for (let i = 0; i < iters; i++) doNotOptimize(experimentPreprocess(src));
+          };
+        case 'normalize':
+          return () => {
+            for (let i = 0; i < iters; i++)
+              doNotOptimize(experimentNormalize(new experimentSrc.Source(src)));
+          };
+        case 'precompile':
+          return () => {
+            for (let i = 0; i < iters; i++) doNotOptimize(experimentPrecompile(src));
+          };
+      }
+    })();
+
+    if (controlPreprocess) {
+      const ctlFn = (() => {
+        switch (phase) {
+          case 'parse':
+            return () => {
+              for (let i = 0; i < iters; i++) doNotOptimize(controlPreprocess(src));
+            };
+          case 'normalize':
+            return () => {
+              for (let i = 0; i < iters; i++)
+                doNotOptimize(controlNormalize(new controlSrc.Source(src)));
+            };
+          case 'precompile':
+            return () => {
+              for (let i = 0; i < iters; i++) doNotOptimize(controlPrecompile(src));
+            };
+        }
+      })();
+
+      boxplot(() => {
+        summary(() => {
+          reg(ctlName, phase, size, chars, iters, 'control', ctlFn);
+          reg(expName, phase, size, chars, iters, 'experiment', expFn);
+        });
+      });
+    } else {
+      reg(expName, phase, size, chars, iters, 'experiment', expFn);
+    }
+  }
+}
+
+const result = await run({ colors: false, throw: true });
+
+// ---------------------------------------------------------------------------
+// µs/char summary table — surfaces the O(n²) → O(n) flattening of per-char
+// cost across the size ladder. mitata stats.avg is in nanoseconds per sample
+// (where each sample runs `iters` inner calls).
+// ---------------------------------------------------------------------------
+
+const stats = {}; // phase -> size -> { control_us_per_char, experiment_us_per_char }
+for (const trial of result.benchmarks) {
+  const m = meta.get(trial.alias);
+  if (!m) continue;
+  const avgNs = trial.runs[0]?.stats?.avg;
+  if (!avgNs) continue;
+  const usPerCall = avgNs / 1000 / m.iters;
+  const usPerChar = usPerCall / m.chars;
+  stats[m.phase] ??= {};
+  stats[m.phase][m.size] ??= {};
+  stats[m.phase][m.size][m.variant] = usPerChar;
+}
+
+function fmt(n) {
+  if (n === undefined) return '   —   ';
+  return n.toFixed(3).padStart(7);
+}
+
+// Derive isolated `normalize-only` cost (ASTv1 → ASTv2 work alone) by
+// subtracting the parse cost — `normalize()` itself calls `preprocess()`
+// internally, so the direct measurement includes both phases. This is how
+// the PR #21314 body's "normalize phase alone" column is derived.
+stats['normalize-only'] = {};
+for (const size of SIZES) {
+  const n = stats.normalize?.[size];
+  const p = stats.parse?.[size];
+  if (!n || !p) continue;
+  stats['normalize-only'][size] = {};
+  for (const v of ['control', 'experiment']) {
+    if (n[v] !== undefined && p[v] !== undefined) {
+      stats['normalize-only'][size][v] = Math.max(0, n[v] - p[v]);
+    }
+  }
+}
+
+const REPORT_PHASES = ['parse', 'normalize', 'normalize-only', 'precompile'];
+
+console.log('\n' + '━'.repeat(72));
+console.log('PER-CHAR COST (µs/char) — flat = linear, rising = super-linear');
+console.log('━'.repeat(72));
+
+for (const phase of REPORT_PHASES) {
+  if (!stats[phase]) continue;
+  console.log(`\n${phase}:`);
+  const variants = controlPreprocess ? ['control', 'experiment'] : ['experiment'];
+  const header =
+    'size'.padEnd(14) +
+    variants.map((v) => v.padStart(12)).join('') +
+    (controlPreprocess ? 'speedup'.padStart(12) : '');
+  console.log(header);
+  console.log('─'.repeat(header.length));
+  for (const size of SIZES) {
+    const row = stats[phase][size];
+    if (!row) continue;
+    const cells = variants.map((v) => fmt(row[v])).join('     ');
+    let speedup = '';
+    if (controlPreprocess && row.control && row.experiment) {
+      speedup = `${(row.control / row.experiment).toFixed(2)}×`.padStart(12);
+    }
+    console.log(size.padEnd(14) + cells + speedup);
+  }
+}