Praveen Kumar
← articlesripple internals

Ripple Runtime: Quick Reference

Part 5 of the Ripple internals deep dive series.

ripplereactivityinternals

Quick Reference: Algorithms & Data Structures

Core Functions

track(value, get?, set?, block?)

  • Creates tracked value or derived value
  • Returns Tracked or Derived object
  • Requires active component context

get(tracked)

  • Reads tracked value
  • Registers dependency if tracking === true
  • Returns current value

set(tracked, value)

  • Updates tracked value
  • Increments clock (tracked.c++)
  • Schedules update to associated block
  • Early exit if value === old_value

is_block_dirty(block)

  • Checks if block needs re-execution
  • Compares tracked.c > dependency.c for each dependency
  • Returns true if any dependency is dirty

schedule_update(block)

  • Marks block tree with CONTAINS_UPDATE flag
  • Queues root block for update
  • Schedules microtask flush

flush_updates(root_block)

  • Depth-first traversal of block tree
  • Executes dirty blocks
  • Skips clean blocks

Data Structure Fields

Tracked Object:

{
    __v: any,        // Current value
    c: number,      // Clock (increments on change)
    b: Block,        // Associated block
    f: number,       // Flags (TRACKED, DERIVED)
    a: {             // Accessors
        get?: Function,
        set?: Function
    }
}

Derived Object (extends Tracked):

{
    // ... all Tracked fields ...
    fn: Function,    // Computation function
    d: Dependency,   // Dependency chain
    blocks: Block[], // Child blocks
    co: Component    // Component context
}

Dependency Node:

{
    c: number,       // Clock value when registered
    t: Tracked,      // Reference to tracked value
    n: Dependency    // Next dependency (linked list)
}

Block:

{
    d: Dependency,   // Dependency chain
    f: number,       // Flags (ROOT_BLOCK, RENDER_BLOCK, etc.)
    fn: Function,    // Function to execute
    p: Block,        // Parent block
    first: Block,    // First child
    last: Block,     // Last child
    next: Block,     // Next sibling
    s: any,          // State (DOM nodes, etc.)
    t: Function,     // Teardown function
    co: Component    // Component context
}

Global State Variables

active_block: Block | null           // Current executing block
active_reaction: Block | Derived     // Current reactive computation
active_component: Component | null   // Current component
tracking: boolean                    // Enable dependency tracking
active_dependency: Dependency | null // Current dependency chain being built
clock: number                         // Global clock counter
queued_root_blocks: Block[]          // Blocks queued for update
old_values: Map<Tracked, any>        // Old values for teardown

Flag Constants

ROOT_BLOCK = 1 << 0      // Top-level component block
RENDER_BLOCK = 1 << 1    // DOM rendering block
BRANCH_BLOCK = 1 << 2    // Conditional/loop block
EFFECT_BLOCK = 1 << 3    // Side effect block
TRY_BLOCK = 1 << 4       // Error boundary block
TRACKED = 1 << 5         // Simple tracked value
DERIVED = 1 << 6         // Derived/computed value
BLOCK_HAS_RUN = 1 << 7   // Block has executed at least once
CONTAINS_UPDATE = 1 << 8 // Block contains updates
PAUSED = 1 << 9          // Block is paused
DESTROYED = 1 << 10      // Block is destroyed

Common Patterns

Reading a tracked value:

// Compiler transforms:
@count

// Into:
_$_.get(count)

// Which:
// 1. Returns count.__v
// 2. Registers dependency if tracking === true
// 3. Stores clock value in dependency.c

Writing a tracked value:

// Compiler transforms:
@count = 5

// Into:
_$_.set(count, 5)

// Which:
// 1. Updates count.__v = 5
// 2. Increments count.c++
// 3. Schedules update to count.b

Checking if value changed:

// Compare clocks:
if (tracked.c > dependency.c) {
    // Value changed!
}

Further Reading