/// /** * Test Pattern: ifElse Evaluates BOTH Branches * * CLAIM TO VERIFY (from blessed/reactivity.md): * "ifElse evaluates BOTH branches, not just the 'true' one." * * HOW THIS TEST WORKS: * Each branch contains a computed() that increments a counter every time it runs. * If the claim is TRUE: Both counters increment on every re-render, regardless of condition. * If the claim is FALSE: Only the visible branch's counter would increment. * * MANUAL TESTING: * 1. Note initial values of "True Branch Eval Count" and "False Branch Eval Count" * 2. Click "Toggle Condition" button * 3. Observe BOTH counters - do they BOTH increment, or just the newly-visible one? * 4. Toggle several more times * * EXPECTED IF CLAIM IS TRUE: * - Both eval counts increment together on each toggle * - The hidden branch's counter still goes up even though it's not displayed * * EXPECTED IF CLAIM IS FALSE: * - Only the visible branch's counter increments * - The hidden branch's counter stays frozen until it becomes visible */ import { Cell, computed, Default, handler, ifElse, NAME, pattern, UI, } from "commontools"; interface Input { condition: Default; toggleCount: Default; } interface Output { condition: boolean; trueBranchEvalCount: number; falseBranchEvalCount: number; toggleCount: number; } const toggle = handler< unknown, { condition: Cell; toggleCount: Cell } >((_event, { condition, toggleCount }) => { condition.set(!condition.get()); toggleCount.set(toggleCount.get() + 1); }); export default pattern(({ condition, toggleCount }) => { // Internal cells for tracking eval counts - NOT pattern inputs const trueBranchEvalCount = Cell.of(0); const falseBranchEvalCount = Cell.of(0); // TRUE BRANCH: Increment internal counter each time this computed runs // Close over condition to create reactive dependency const trueBranchContent = computed(() => ( void condition, trueBranchEvalCount.set(trueBranchEvalCount.get() + 1), (

TRUE Branch (Currently Visible)

This branch is shown when condition = true

True Branch Eval Count: {trueBranchEvalCount}

) )); // FALSE BRANCH: Increment internal counter each time this computed runs // Close over condition to create reactive dependency const falseBranchContent = computed(() => ( void condition, falseBranchEvalCount.set(falseBranchEvalCount.get() + 1), (

FALSE Branch (Currently Visible)

This branch is shown when condition = false

False Branch Eval Count: {falseBranchEvalCount}

) )); return { [NAME]: "Test: ifElse Both Branches", [UI]: (

ifElse Both Branches Test

Condition: {condition ? "TRUE" : "FALSE"}

Toggle Count: {toggleCount}

Toggle Condition
{/* The ifElse - if BOTH branches are evaluated, both counters increment */} {ifElse(condition, trueBranchContent, falseBranchContent)} {/* Always-visible summary showing BOTH counters */}

Evaluation Summary

Branch Eval Count Currently Visible?
True Branch {trueBranchEvalCount} {condition ? "YES" : "no"}
False Branch {falseBranchEvalCount} {condition ? "no" : "YES"}
How to interpret:
  • If BOTH eval counts increment together → Claim VERIFIED (both branches evaluated)
  • If only visible branch increments → Claim REFUTED (lazy evaluation)
), condition, trueBranchEvalCount, falseBranchEvalCount, toggleCount, }; });