Reactive Branching: `$if( )`

The $if function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.

Function Signature

$if(
  condition: Signal<boolean> | Function, 
  thenVal: Component | Node, 
  otherwiseVal?: Component | Node
): HTMLElement

Parameter	Type	Required	Description
`condition`	`Signal`	Yes	A reactive source that determines which branch to render.
`thenVal`	`any`	Yes	The content to show when the condition is truthy.
`otherwiseVal`	`any`	No	The content to show when the condition is falsy (defaults to null).

Returns: A div element with display: contents that acts as a reactive portal for the branches.

Usage Patterns

1. Simple Toggle

The most common use case is showing or hiding a single element based on a state.

const isVisible = $(false);

Div([
  Button({ onclick: () => isVisible(!isVisible()) }, "Toggle Message"),
  
  $if(isVisible, 
    P("Now you see me!"), 
    P("Now you don't...")
  )
]);

2. Lazy Component Loading

Unlike using a hidden class (CSS display: none), $if is lazy. The branch that isn't active is never created. This saves memory and initial processing time.

$if(() => user.isLogged(), 
  () => Dashboard(), // Only executed if logged in
  () => LoginGate()  // Only executed if guest
)

Automatic Cleanup

One of the core strengths of $if is its integrated Cleanup logic. SigPro ensures that when a branch is swapped out, it is completely purged.

Stop Watchers: All $.watch calls inside the inactive branch are permanently stopped.
Unbind Events: Event listeners attached via $.html are removed.
Recursive Sweep: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active.

Best Practices

Function Wrappers: If your branches are heavy (e.g., they contain complex components), wrap them in a function () => MyComponent(). This prevents the component from being initialized until the condition actually meets its requirement.

Logical Expressions: You can pass a complex computed function as the condition:

$if(() => count() > 10 && status() === 'ready', 
  Span("Threshold reached!")
)

Technical Comparison

Feature	Standard CSS `hidden`	SigPro `$if`
DOM Presence	Always present	Only if active
Reactivity	Still processing in background	Paused/Destroyed
Memory usage	Higher	Optimized
Cleanup	Manual	Automatic

2.7 KiB Raw Blame History

Reactive Branching: $if( )