import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"🔀 Reactive Branching: $.if( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/if.md","filePath":"api/if.md"}'),n={name:"api/if.md"};function l(h,s,p,r,o,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`

🔀 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

typescript

$.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.

javascript

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.

javascript

$.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:

javascript

$.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

`,24)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};

🔀 Reactive Branching: $.if( ) ​

🛠️ Function Signature ​

📖 Usage Patterns ​

1. Simple Toggle ​

2. Lazy Component Loading ​

🧹 Automatic Cleanup ​

💡 Best Practices ​

🏗️ Technical Comparison ​

🔀 Reactive Branching: `$.if( )`

🛠️ Function Signature

📖 Usage Patterns

1. Simple Toggle

2. Lazy Component Loading

🧹 Automatic Cleanup

💡 Best Practices

🏗️ Technical Comparison