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

Rendering Engine: $.html ​

The $.html function is the architect of your UI. It creates standard HTML elements and wires them directly to your signals without the need for a Virtual DOM.

1. Syntax: $.html(tag, [props], [content]) ​

ParameterTypeRequiredDescription
tagstringYesAny valid HTML5 tag (e.g., 'div', 'button', 'input').
propsObjectNoAttributes, event listeners, and reactive bindings.
contentanyNoText, Nodes, Arrays, or Reactive Functions.

Example: ​

javascript
const myButton = $.html('button', { class: 'btn-primary' }, 'Click me');

2. Global Tag Helpers ​

To avoid repetitive $.html calls, SigPro automatically exposes common tags to the global window object. This allows for a clean, declarative syntax.

javascript
// Instead of $.html('div', ...), just use:
div({ id: 'wrapper' }, [
  h1("Welcome"),
  p("This is SigPro.")
]);

3. Handling Properties & Attributes ​

SigPro distinguishes between static attributes and reactive bindings using the $ prefix.

Static vs. Reactive Attributes ​

PropertySyntaxResult
Attribute{ id: 'main' }id="main"
Event{ onclick: fn }Adds an event listener.
Reactive Attr{ $class: $theme }Updates class whenever $theme() changes.
Boolean Attr{ $disabled: $isBusy }Toggles the disabled attribute automatically.

4. Two-Way Data Binding ​

For form inputs, SigPro provides a powerful shortcut using $value or $checked. It automatically handles the event listening and the value synchronization.

javascript
const $text = $("Type here...");

input({ 
  type: 'text', 
  $value: $text // Syncs input -> signal and signal -> input
});

p(["You typed: ", $text]);

5. Reactive Content (Dynamic Children) ​

The content argument is incredibly flexible. If you pass a function, SigPro treats it as a reactive "portal" that re-renders only that specific part of the DOM.

Text & Nodes ​

javascript
const $count = $(0);

// Text node updates surgically
div(["Count: ", $count]); 

// Conditional rendering with a function
div(() => {
  return $count() > 10 
    ? h1("High Score!") 
    : p("Keep going...");
});

The "Guillotine" (Performance Tip) ​

When a reactive function in the content returns a new Node, SigPro uses replaceWith() to swap the old node for the new one. This ensures that:

  1. The update is nearly instantaneous.
  2. The old node is correctly garbage-collected.

6. Summary: Content Types ​

InputBehavior
String / NumberAppended as a TextNode.
HTMLElementAppended directly to the parent.
ArrayEach item is processed and appended in order.
Function () => ...Creates a live reactive zone that updates automatically.
`,31)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};