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

Описание и применение

DSA View View позволяет визуализировать выполнение алгоритмов, записывая промежуточные состояния кода и воспроизводя их в пользовательском интерфейсе, что облегчает понимание циклов, рекурсии и изменений переменных.

Задача

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.

Источник