Export Code

VizHub Runtime State Machine Diagram

Curran Kelleher

Last edited Apr 22, 2025
Created on Apr 14, 2025
Forked from Mermaid Starter

VizHub Runtime State Machine Diagram

This project visualizes the state machine for the VizHub Runtime Environment. The diagram shows how the runtime handles code changes and manages the build process.

State Machine Description

The VizHub runtime can be in one of four states:

  1. IDLE - The runtime is not processing any code changes
  2. ENQUEUED - A code change has been received and is waiting to be processed
  3. PENDING_CLEAN - The runtime is building code with no additional changes detected
  4. PENDING_DIRTY - The runtime is building code, but additional changes have been detected

State Transitions

  • From IDLE to ENQUEUED: When handleCodeChange() is called and the state is IDLE
  • From ENQUEUED to PENDING_CLEAN: When update() begins processing the code
  • From PENDING_CLEAN to PENDING_DIRTY: When handleCodeChange() is called during a build
  • From PENDING_CLEAN to IDLE: When a build completes with no changes during the build
  • From PENDING_DIRTY to ENQUEUED: When a build completes and a new update is scheduled via requestAnimationFrame()
  • From ENQUEUED back to PENDING_CLEAN: When the next update begins

This state machine ensures that code changes are properly handled, preventing race conditions and ensuring that the latest changes are always reflected in the final build.

MIT Licensed