Document React failure and Vue/Vue Vapor PSP benchmarks

[doodlewind]

Do not merge yet

This is still an experimental renderer migration PR and is intentionally kept as a draft with the dont merge label.

The highest-priority finding is still React: original/off-the-shelf React does not have a valid runnable PSP/PPSSPP renderer path in this investigation. The local --engine=react path is a project-local React-shaped JSX compatibility shim and must not be counted as original React performance.

Refs #5.

Correction: the earlier Vue Vapor benchmark was invalid

A PPSSPP capture showed the earlier Vue Vapor output was not a usable UI: it rendered a black screen with text collapsed at the top. That old Vapor chart/benchmark must not be used as evidence because it did not have feature parity.

This PR now includes the fix and a corrected benchmark run from the fixed state.

What changed

• Demo labels now show the active framework name, including Vue, Vue Vapor, or Solid.
• The Vue Vapor adapter now reads JSX attrs from ctx.attrs, which is where Vapor places undeclared props.
• Callback/ref props are preserved instead of being accidentally invoked during prop cleanup.
• Vapor class/style arrays and object class values are normalized into PocketJS host props.
• createFor(...) usage now matches the Vapor runtime: render receives refs, key extraction receives raw item/key/index values.
• Null/false/undefined slot children are filtered before calling Vapor insert(...), fixing launcher/list crashes such as cannot read property 'anchor' of undefined.
• Vue Vapor PPSSPP goldens were added for byte-exact visual regression coverage.
• The benchmark chart was regenerated from the corrected feature-parity run.

Validation

bunx tsc --noEmit

PSP_SDK=/Users/evan/code/dreamcart/mipsel-sony-psp \
  E2E_PPSSPP_TIMEOUT=60 \
  UPDATE=1 \
  bun test/e2e-ppsspp.ts --engine=vue-vapor

PSP_SDK=/Users/evan/code/dreamcart/mipsel-sony-psp \
  E2E_PPSSPP_TIMEOUT=60 \
  bun test/e2e-ppsspp.ts --engine=vue-vapor

Result: E2E OK; hero, cards, stats, library, settings, notifications, and music all produced complete PPSSPP capture windows and passed byte-exact comparison against the new Vue Vapor goldens.

Launcher was validated separately because it is not in the E2E spec table:

• launcher --engine=vue-vapor --capture produced 40/40 frames;
• trace reached JS_Eval ok and the frame loop;
• captured image showed the launcher modal with the Vue Vapor framework label.

All 8 Vue Vapor PSP memory-stick builds completed:

PSP_SDK=/Users/evan/code/dreamcart/mipsel-sony-psp \
  bun scripts/psp-all.ts --engine=vue-vapor

The resulting psp-ui-* demos were copied to /Volumes/NO NAME/PSP/GAME, and source/destination EBOOT.PBP SHA-256 hashes matched for all 8 demos.

Corrected benchmark

PSP_SDK=/Users/evan/code/dreamcart/mipsel-sony-psp \
  BENCH_PPSSPP_TIMEOUT=60 \
  bun scripts/bench-ppsspp.ts \
    --engines=vue-vapor,vue,solid \
    --samples=7 \
    --timeout=60 \
    --bootstrap=5000

Local report paths from the corrected run:

• Markdown: dist/bench/ppsspp-bench-2026-07-04T13-16-19-386Z.md
• JSON summary: dist/bench/ppsspp-bench-2026-07-04T13-16-19-386Z.json
• Raw samples: dist/bench/ppsspp-bench-2026-07-04T13-16-19-386Z.raw.jsonl

Metadata:

• Generated: 2026-07-04T13:17:55.024Z
• Samples per app/engine: 7
• PPSSPP revision: 676724ee5e02
• Git revision at measurement: e824ea858673 (dirty)

Matrix chart files: PNG · SVG

Benchmark headline

Lower is better for every metric.

metric	Vue Vapor/Solid geometric mean	non-Vapor Vue/Solid geometric mean	Vue Vapor/non-Vapor Vue geometric mean
eval_us	3.488x	2.467x	1.414x
boot_to_frame0_us	3.140x	2.314x	1.357x
avg_work_us	1.467x	3.732x	0.393x
host_wall_ms	1.480x	2.159x	0.686x
bundle_bytes	3.651x	2.442x	1.495x

After the feature-parity fix, Vue Vapor is no longer below Solid on average frame work. It is about 1.47x heavier than Solid across demos, but still much better than non-Vapor Vue: about 0.39x the frame work of non-Vapor Vue.

Frame-work result by demo

app	Vue Vapor avg work	non-Vapor Vue avg work	Solid avg work
hero	16.74 ms	90.75 ms	15.15 ms
cards	19.44 ms	20.31 ms	18.60 ms
stats	43.87 ms	143.56 ms	20.16 ms
library	14.41 ms	32.80 ms	7.47 ms
settings	24.70 ms	27.82 ms	22.77 ms
notifications	18.39 ms	93.13 ms	15.86 ms
music	41.39 ms	118.36 ms	17.23 ms

Current conclusion

Original React remains not viable and must not receive credit through the local React-compatible shim.

Non-Vapor Vue runs, but misses the PSP smoothness bar in most demos and remains a negative result.

Vue Vapor now has a valid JSX + Tailwind feature-parity path, but the corrected numbers are mixed: it substantially improves over non-Vapor Vue frame work, yet it has worse startup/bundle size than Solid and higher cross-demo average frame work than Solid.