Bench Workflow

Bench Workflow

When to Use

• Adding a new framework implementation under frameworks/
• Wiring a framework into the shared Vite setup
• Adding or updating manual UI tests in src/pages
• Running or validating benchmark results

Steps

1. Add or update a framework implementation

   • Create frameworks/<id>/index.html that imports ../../src/styles.css and uses the .bench-shell body class.
   • Add index.ts and app.<suffix> with the framework-specific entry.
   • Keep initial DOM aligned to the blueprint markup.

2. Wire up configuration

   • Register the framework in package.json under benchmarks.frameworks.
   • Add the framework to plugins/vite-plugin-multi-framework.ts and the frameworks list in vite.config.ts.
   • Add a tsconfigs/tsconfig.<id>.json and include it in tsconfig.json references.

3. Apply design system rules

   • Prefer src/design-system.css classes for UI.
   • Use at most 3 classes per element; add a new component class if you need more.

4. Add or update manual UI tests

   • Create a new directory under src/pages/manual-tests/<test>/.
   • Add the test to the homepage list in src/pages/index.ts.

5. Run and verify

   • pnpm run dev for local UI checks.
   • pnpm run bench to run the benchmark runner.

Output

Provide:

• The files created or updated
• Any new framework IDs or view names
• Commands to run for verification

Present Results to User

Give a concise bullet list of changes, then a short test plan.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.