Skip to content

Hidden-class transition visualizer built on --trace-maps #30

Description

@pavlof01

Context

--trace-maps and --trace-maps-details are already in the shared flag catalog (packages/engine-runtime/src/flags.ts, category object-shapes), so the plumbing is done — a user can turn them on today and gets a wall of raw text.

Hidden classes are the most visual topic in V8 internals and nobody shows them interactively.

Proposal

  • Parse --trace-maps output into a transition graph: map addresses as nodes, property additions / element-kind changes / prototype transitions as edges.
  • Render the graph on its own page, replayed step by step in sync with the source, showing how {} grows into its final shape and where two objects diverge into different shapes.
  • Highlight the moment two objects that "look the same" end up on different maps — the payoff case.

Acceptance criteria

  • A snippet building the same object in two different property orders shows two divergent shape chains.
  • Parsing is unit-tested against recorded --trace-maps output; no engine spawn in tests.
  • No infrastructure change: the flags are already allowlisted.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendUI and visual featuresvisualizationGraphs, AST, IR visual tools

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions