How I Made JavaScript Execution Visual and Rewindable (DSA View View 👀👀)

说明与用途

DSA View View 通过插桩记录代码执行的中间状态，支持在 UI 中逐步回放，帮助学习者更好地理解循环、指针和递归等概念。

问题

Frontend developers studying data structures and algorithms need to see the intermediate state of their code, not just the final result, to understand loops, pointers, recursion, and variable changes.

结果

DSA View View enables developers to visualize the execution of their algorithms, providing a rewindable timeline of variable states and function calls without affecting the original program logic.

工作流

• Parse user TypeScript with Babel parser
• AST visitors inject recordStep calls into relevant nodes
• Transform TypeScript to JavaScript with Babel
• Run instrumented code inside a Web Worker using new Function
• Collect ExecutionStep objects during execution
• Send ExecutionState (steps array, totalSteps, etc.) to main thread via postMessage
• React UI updates currentStep and renders corresponding snapshot
• User can pause, step forward/backward, or jump to a variable change point

证据

Before execution, DSA View View rewrites the code into a version that can record its intermediate state, then runs it until it completes or reaches a configured limit.

来源

The Runtime runs inside a dedicated Web Worker instead of the main thread.

来源