Ripple Runtime: Mount & Block Tree

mount(Counter, { target: document.getElementById('root') });

// These global variables track the current execution context
active_component = null      // No component active yet
active_block = null          // No block executing
active_reaction = null       // No reactive computation running
tracking = false             // Dependency tracking disabled
clock = 0                    // Global clock for change detection
queued_root_blocks = []      // Empty update queue
old_values = new Map()       // Empty map for teardown values

let count = track(0, undefined, undefined, component_ctx);

FUNCTION track(0, undefined, undefined, component_ctx):
    // Step 1: Check if already tracked (idempotent)
    IF is_tracked_object(0):  // false - 0 is a primitive
        RETURN value

    // Step 2: Validate block exists
    IF component_ctx IS NULL:  // false
        THROW TypeError('track() requires a valid component context')

    // Step 3: Check if value is a function (derived value)
    IF typeof 0 === 'function':  // false
        RETURN derived(...)

    // Step 4: Create simple tracked value
    RETURN tracked(0, component_ctx, undefined, undefined)
END FUNCTION

FUNCTION tracked(0, component_ctx, undefined, undefined):
    RETURN {
        __v: 0,                    // Current value
        a: {                       // Accessors (get/set functions)
            get: undefined,
            set: undefined
        },
        b: component_ctx,          // Associated block (for scheduling updates)
        c: 0,                     // Clock value (incremented on change)
        f: TRACKED                // Flags (TRACKED = simple value, not derived)
    }
END FUNCTION

count = {
    __v: 0,                    // The actual value
    a: { get: undefined, set: undefined },
    b: component_ctx,          // Which block to update when this changes
    c: 0,                      // Clock value (starts at 0)
    f: TRACKED                 // Flag: this is a simple tracked value
}

showDouble = {
    __v: true,                 // The actual value
    a: { get: undefined, set: undefined },
    b: component_ctx,          // Same block association
    c: 0,                      // Clock value
    f: TRACKED                 // Simple tracked value
}

let double = track(() => _$_.get(count) * 2, undefined, undefined, component_ctx);

FUNCTION track(fn, undefined, undefined, component_ctx):
    // fn = () => _$_.get(count) * 2

    // Check if it's a function (derived value)
    IF typeof fn === 'function':  // true
        RETURN derived(fn, component_ctx, undefined, undefined)

    // Otherwise create simple tracked value
    RETURN tracked(fn, component_ctx, undefined, undefined)
END FUNCTION

FUNCTION derived(fn, component_ctx, undefined, undefined):
    RETURN {
        __v: UNINITIALIZED,      // Not computed yet! (lazy)
        a: { get: undefined, set: undefined },
        b: component_ctx,         // Associated block
        blocks: null,            // Child blocks (created during computation)
        c: 0,                    // Clock value
        co: active_component,     // Component context
        d: null,                 // Dependency chain (empty - will be populated)
        f: TRACKED | DERIVED,    // Flags: both TRACKED and DERIVED
        fn: fn                   // Computation function
    }
END FUNCTION

double = {
    __v: UNINITIALIZED,          // Not computed yet! (lazy evaluation)
    a: { get: undefined, set: undefined },
    b: component_ctx,
    blocks: null,                // Will hold child blocks created during computation
    c: 0,                        // Clock value
    co: null,                    // Component context
    d: null,                     // No dependencies yet (will track count)
    f: TRACKED | DERIVED,        // Both flags set
    fn: () => _$_.get(count) * 2 // The computation function
}

return _$_.root(() => { /* render function */ }, component_ctx);

FUNCTION root(fn, undefined, component_ctx):
    // Create a root block (top-level block for component)
    RETURN block(ROOT_BLOCK, fn, { compat: undefined }, component_ctx)
END FUNCTION

FUNCTION block(ROOT_BLOCK, fn, { compat }, component_ctx):
    block = {
        co: component_ctx,    // Component context
        d: null,              // Dependency chain (empty initially)
        first: null,          // First child block
        f: ROOT_BLOCK,        // Flags (ROOT_BLOCK = top-level)
        fn: fn,               // Function to execute
        last: null,           // Last child block
        next: null,           // Next sibling block
        p: null,              // Parent block (null for root)
        s: { compat },        // State (DOM nodes, etc.)
        t: null               // Teardown function
    }

    // Link to parent if one exists (none for root)
    IF active_block IS NOT NULL:
        push_block(block, active_block)

    RETURN block
END FUNCTION

root_block = {
    co: component_ctx,        // Which component owns this block
    d: null,                  // Dependency chain (will be populated)
    first: null,              // Will point to first child block
    f: ROOT_BLOCK,           // Flag: this is a root block
    fn: () => { /* render function */ },  // What to execute
    last: null,               // Will point to last child block
    next: null,               // No siblings
    p: null,                  // No parent (it's the root!)
    s: { compat: undefined }, // State storage
    t: null                   // Teardown function (set later)
}

run_block(root_block);

active_block = null
active_reaction = null
tracking = false
active_dependency = null
active_component = null

FUNCTION run_block(root_block):
    // Step 1: Save current context (for nested execution)
    previous_block = active_block          // null
    previous_reaction = active_reaction    // null
    previous_tracking = tracking           // false
    previous_dependency = active_dependency // null
    previous_component = active_component   // null

    TRY:
        // Step 2: Set active context
        active_block = root_block          // Now this block is active
        active_reaction = root_block       // This is the current reaction
        active_component = root_block.co   // Set component context

        // Step 3: Cleanup (none needed on first run)
        destroy_non_branch_children(root_block)  // No children yet
        run_teardown(root_block)                 // No teardown yet

        // Step 4: Enable tracking? NO - ROOT_BLOCK doesn't track!
        tracking = (root_block.f & (ROOT_BLOCK | BRANCH_BLOCK)) === 0
        // Since root_block.f has ROOT_BLOCK flag:
        // tracking = false  // Important: root blocks don't track dependencies

        active_dependency = null

        // Step 5: Execute the render function!
        result = root_block.fn(root_block.s)
        // This creates child blocks, renders DOM, etc.

        // Step 6: Store teardown function if returned
        IF typeof result === 'function':
            root_block.t = result  // Save for cleanup later

            // Mark parent blocks as containing teardown (none for root)
            current = root_block
            WHILE current IS NOT NULL AND (current.f & CONTAINS_TEARDOWN) === 0:
                current.f = current.f | CONTAINS_TEARDOWN
                current = current.p

        // Step 7: Store dependency chain
        root_block.d = active_dependency  // null (tracking was false)

    FINALLY:
        // Step 8: Restore previous context
        active_block = previous_block
        active_reaction = previous_reaction
        tracking = previous_tracking
        active_dependency = previous_dependency
        active_component = previous_component
END FUNCTION

active_block = null          // Restored
active_reaction = null       // Restored
tracking = false             // Restored
active_dependency = null     // Restored
active_component = null      // Restored

const __template0 = _$_.template('<div><p><!></p><!></div>');
const __fragment = __template0();

FUNCTION template('<div><p><!></p><!></div>', flags):
    node = undefined  // Cached template

    RETURN () => {
        IF node === undefined:
            // Create template element
            elem = document.createElement('template')
            elem.innerHTML = '<div><p><!></p><!></div>'
            node = elem.content  // Cache it

        // Clone template
        clone = node.cloneNode(true)

        // Assign start/end nodes
        assign_nodes(first_child(clone), clone.lastChild)

        RETURN clone
    }
END FUNCTION

_$_.render(() => {
    _$_.set_text(__text0.firstChild, 'Count: ' + _$_.get(count));
});

FUNCTION render(fn, null, 0):
    // Creates a RENDER_BLOCK (not ROOT_BLOCK!)
    RETURN block(RENDER_BLOCK, fn, null)
END FUNCTION

count_render_block = {
    co: component_ctx,
    d: null,              // Will be populated during execution!
    first: null,
    f: RENDER_BLOCK,      // ← Different flag from ROOT_BLOCK
    fn: () => {
        _$_.set_text(__text0.firstChild, 'Count: ' + _$_.get(count));
    },
    last: null,
    next: null,
    p: root_block,        // ← Parent is root block
    s: null,
    t: null
}

active_block = root_block
active_reaction = root_block
tracking = false          // Root block doesn't track
active_dependency = null

FUNCTION run_block(count_render_block):
    // Save context
    previous_block = active_block          // root_block
    previous_reaction = active_reaction    // root_block
    previous_tracking = tracking           // false
    previous_dependency = active_dependency // null

    TRY:
        // Set new context
        active_block = count_render_block      // Now this block is active
        active_reaction = count_render_block   // This is the reaction
        active_component = component_ctx

        // Enable tracking! (RENDER_BLOCK is not ROOT_BLOCK)
        tracking = (count_render_block.f & (ROOT_BLOCK | BRANCH_BLOCK)) === 0
        // RENDER_BLOCK doesn't have ROOT_BLOCK or BRANCH_BLOCK flags
        // tracking = true  // Now dependencies will be tracked!

        active_dependency = null  // Will be built during execution

        // Execute the function - this is where dependency registration happens
        result = count_render_block.fn()
        // Inside: _$_.get(count) is called

        // Store the dependency chain
        count_render_block.d = active_dependency  // Now has count dependency!

    FINALLY:
        // Restore context
        active_block = previous_block
        active_reaction = previous_reaction
        tracking = previous_tracking
        active_dependency = previous_dependency
END FUNCTION

active_block = count_render_block    // Changed!
active_reaction = count_render_block // Changed!
tracking = true                      // Enabled!
active_dependency = null             // Will be built

FUNCTION get(count):
    // Check if it's a tracked object
    IF NOT is_tracked_object(count):  // false - count IS tracked
        RETURN count

    // Check if it's derived
    IF (count.f & DERIVED) !== 0:  // false - count.f = TRACKED, not DERIVED
        RETURN get_derived(count)

    // It's a simple tracked value
    RETURN get_tracked(count)  // ← Go here!
END FUNCTION

FUNCTION get_tracked(count):
    // Step 1: Get the value
    value = count.__v  // 0

    // Step 2: Register dependency (THIS IS THE KEY!)
    IF tracking:  // true (enabled by RENDER_BLOCK)
        register_dependency(count)  // ← This creates the link!

    // Step 3: Handle teardown (not applicable here)
    IF teardown AND old_values.has(count):  // false
        value = old_values.get(count)

    // Step 4: Apply custom getter (none)
    IF count.a.get IS NOT undefined:  // false
        value = trigger_track_get(count.a.get, value)

    RETURN value  // 0
END FUNCTION

FUNCTION register_dependency(count):
    // active_reaction = count_render_block (set by run_block)
    // active_dependency = null (initial state)

    dependency = active_dependency  // null

    // Create first dependency
    IF dependency IS NULL:  // true
        dependency = create_dependency(count)
        active_dependency = dependency  // ← Store in global
        RETURN
END FUNCTION

FUNCTION create_dependency(count):
    reaction = active_reaction  // count_render_block
    existing = reaction.d       // null (no dependencies yet)

    // Try to recycle (none available)
    IF existing IS NOT NULL:  // false
        // Recycle logic...
        RETURN existing

    // Create new dependency node
    RETURN {
        c: count.c,      // 0 ← Clock value when registered
        t: count,        // ← Reference to tracked value
        n: null          // ← Next dependency (none yet)
    }
END FUNCTION

// Global state updated
active_dependency = {
    c: 0,        // count's clock value (0)
    t: count,     // Reference to count object
    n: null       // No next dependency
}

// Block's dependency chain stored
count_render_block.d = {
    c: 0,
    t: count,
    n: null
}

active_block = root_block          // Restored
active_reaction = root_block       // Restored
tracking = false                   // Restored
active_dependency = null          // Restored

// The block now knows it depends on count!
count_render_block = {
    // ...
    d: {                    // Dependency chain!
        c: 0,               // Clock value when registered
        t: count,            // Which value it depends on
        n: null              // No other dependencies
    }
}

// DOM updated
// Text node now shows: "Count: 0"

_$_.if(__anchor1, (set_branch) => {
    if (_$_.get(showDouble)) {
        set_branch((anchor) => { /* render double */ });
    }
});

FUNCTION if_block(__anchor1, fn):
    anchor = __anchor1
    has_branch = false
    condition = UNINITIALIZED
    b = null  // Branch block

    set_branch = (fn, flag = true) => {
        has_branch = true
        update_branch(flag, fn)
    }

    update_branch = (new_condition, fn) => {
        IF condition === new_condition:  // Skip if unchanged
            RETURN

        // Destroy old branch
        IF b !== null:
            destroy_block(b)
            b = null

        // Create new branch if condition is truthy
        IF fn !== null:
            b = branch(() => fn(anchor))
    }

    // Render block that evaluates condition
    render(() => {
        has_branch = false
        fn(set_branch)  // Calls our function with set_branch
        IF NOT has_branch:
            update_branch(null, null)
    }, null, IF_BLOCK)
END FUNCTION

FUNCTION get(showDouble):
    RETURN get_tracked(showDouble)
END FUNCTION

FUNCTION get_tracked(showDouble):
    value = showDouble.__v  // true

    // Register dependency
    IF tracking:  // true
        register_dependency(showDouble)

    RETURN value  // true
END FUNCTION

if_block.d = {
    c: 0,
    t: showDouble,
    n: null
}

branch_block = {
    co: component_ctx,
    d: null,
    f: BRANCH_BLOCK,
    fn: (anchor) => {
        const __template1 = _$_.template('<p><!></p>');
        const __fragment1 = __template1();
        anchor.before(__fragment1);

        _$_.render(() => {
            _$_.set_text(__fragment1.firstChild, 'Double: ' + _$_.get(double));
        });
    },
    p: if_block,
    // ...
}

FUNCTION get(double):
    // double is derived
    IF (double.f & DERIVED) !== 0:  // true
        RETURN get_derived(double)
END FUNCTION

FUNCTION get_derived(double):
    // Update derived value
    update_derived(double)

    // Register dependency
    IF tracking:  // true
        register_dependency(double)

    // No custom getter
    IF double.a.get IS NOT undefined:  // false
        double.__v = trigger_track_get(double.a.get, double.__v)

    RETURN double.__v
END FUNCTION

FUNCTION update_derived(double):
    value = double.__v  // UNINITIALIZED

    // Recompute (uninitialized)
    IF value === UNINITIALIZED OR is_tracking_dirty(double.d):  // true
        value = run_derived(double)

        // Update if changed
        IF value !== double.__v:  // true
            double.__v = value      // 0
            double.c = increment_clock()  // 1
END FUNCTION

FUNCTION run_derived(double):
    // Save context
    previous_block = active_block          // branch_block
    previous_reaction = active_reaction    // branch_block
    previous_tracking = tracking           // true
    previous_dependency = active_dependency // null
    previous_component = active_component   // component_ctx
    previous_is_mutating_allowed = is_mutating_allowed  // true

    TRY:
        // Set context for computation
        active_block = null
        active_reaction = double  // Derived value is the reaction!
        active_component = component_ctx
        tracking = true           // Enable dependency tracking
        active_dependency = null
        is_mutating_allowed = false  // Prevent mutations

        // Destroy old child blocks (none yet)
        destroy_computed_children(double)

        // Run computation: () => _$_.get(count) * 2
        value = double.fn()

        // Inside fn(): _$_.get(count)
        // This registers count as a dependency of double!

        // No custom getter
        IF double.a.get IS NOT undefined:  // false
            value = trigger_track_get(double.a.get, value)

        RETURN value  // 0
END FUNCTION

FUNCTION get_tracked(count):
    value = count.__v  // 0

    // Register dependency (tracking === true, active_reaction === double)
    IF tracking:  // true
        register_dependency(count)  // Registers to double, not branch_block!

    RETURN value  // 0
END FUNCTION

double.d = {
    c: 0,  // count's clock value
    t: count,
    n: null
}

double = {
    __v: 0,  // Computed value
    c: 1,    // Clock incremented
    d: {
        c: 0,
        t: count,
        n: null
    }
    // ...
}

// Register double as dependency of branch_block
branch_block.d = {
    c: 1,  // double's clock value
    t: double,
    n: null
}

count = { __v: 0, c: 0, d: null, ... }
showDouble = { __v: true, c: 0, d: null, ... }
double = { __v: 0, c: 1, d: { c: 0, t: count, n: null }, ... }

count_render_block.d = { c: 0, t: count, n: null }
if_block.d = { c: 0, t: showDouble, n: null }
branch_block.d = { c: 1, t: double, n: null }
double.d = { c: 0, t: count, n: null }