Global

Members

(constant) css

Creates scoped CSS with automatic class name generation and injection. Supports nested selectors with & and automatic prefixing.
Source:
Example
const buttonClass = css`
  padding: 10px;
  &:hover { background: blue; }
  .icon { margin-right: 5px; }
`;

(constant) html

Tagged template literal for creating safe HTML content with automatic escaping. Values are automatically escaped unless they are SafeHTML objects.
Source:
Example
const userInput = "<script>alert('xss')</script>";
const safe = html`<div>${userInput}</div>`;
// Results in: <div>&lt;script&gt;alert('xss')&lt;/script&gt;</div>

(constant) join

Joins multiple items (strings or SafeHTML) with a separator.
Source:
Example
const list = join([html`<li>A</li>`, html`<li>B</li>`], "\n");

(constant) setDebugMode

Enable or disable debug mode for reactive system logging. When enabled, logs signal updates, computed recalculations, and async state changes.
Source:
Example
setDebugMode(true); // Enable debug logging

(constant) trusted

Marks content as trusted HTML that should not be escaped. Use with caution - only for content you control.
Source:
Example
const icon = trusted("<svg>...</svg>");

Methods

appendTo(containerId) → {HTMLElement|null}

Appends the component to a container without clearing it. Calls lifecycle: state() → init() → render() → mount()
Parameters:
Name Type Description
containerId string ID of the container element or "body"
Source:
Returns:
Rendered element or null if container not found
Type
HTMLElement | null

batch(fn) → {*}

Batches multiple signal updates together.
Parameters:
Name Type Description
fn function Function containing updates
Source:
Returns:
Return value of the function
Type
*

cleanup()

Cleans up the component by calling onCleanup() hook and disposing all reactive bindings. Automatically called when component is destroyed.
Source:

computed(fn, nameopt) → {ComputedSignal}

Creates a computed signal within the component. Automatically disposed when component is cleaned up.
Parameters:
Name Type Attributes Description
fn function Computation function
name string <optional>
 Optional name for debugging
Source:
Returns:
Computed signal
Type
ComputedSignal

computedAsync(fn, nameopt) → {ComputedSignal.<AsyncState>}

Creates an async computed signal within the component. Automatically disposed when component is cleaned up.
Parameters:
Name Type Attributes Description
fn function Async computation function
name string <optional>
 Optional name for debugging
Source:
Returns:
Async computed signal
Type
ComputedSignal.<AsyncState>

effect(fn) → {ComputedSignal}

Creates a side effect that runs when dependencies change.
Parameters:
Name Type Description
fn function Effect function
Source:
Returns:
Computed signal (for cleanup)
Type
ComputedSignal

initState()

Initializes component state by processing the state() method. Called automatically before rendering. Can be overridden. Calls init() hook if defined.
Source:

on(target, event, handler, optionsopt) → {function}

Attaches an event listener that's automatically cleaned up. Handler is wrapped in a batch for efficient updates.
Parameters:
Name Type Attributes Description
target EventTarget Element to attach listener to
event string Event name
handler function Event handler
options Object <optional>
 Event listener options
Source:
Returns:
Bound handler function
Type
function

render() → {HTMLElement}

Renders the component by calling template() and applying styles(). Override template() and optionally styles() in your component.
Source:
Throws:
If template doesn't return valid HTML
Type
Error
Returns:
Rendered DOM element
Type
HTMLElement

scan(r) → {function}

Scans a DOM tree for data attributes and collects refs. Updates this.refs with elements marked with data-ref.
Parameters:
Name Type Description
r HTMLElement Root element to scan
Source:
Returns:
Cleanup function
Type
function

signal(v, nameopt) → {Signal}

Creates a signal within the component.
Parameters:
Name Type Attributes Description
v * Initial value
name string <optional>
 Optional name for debugging
Source:
Returns:
Signal object
Type
Signal

Type Definitions

AsyncState

Type:
  • Object
Properties:
Name Type Description
status "pending" | "resolved" | "error" Current status of the async operation
data * The resolved data (undefined until resolved)
error Error | null Error object if status is "error"
loading boolean True when status is "pending"
Source:

CancelToken

Type:
  • Object
Properties:
Name Type Description
cancelled boolean True if the operation was cancelled
Source:

ComputedSignal

Type:
  • Object
Properties:
Name Type Description
dispose function Clean up subscriptions and dependencies
Source:

SafeHTML

Type:
  • Object
Properties:
Name Type Description
__safe boolean Indicates the content is safe HTML
content string The HTML content
Source:

Signal

Type:
  • Object
Properties:
Name Type Description
get function Get the current value and track dependency
peek function Get the current value without tracking
set function Set a new value
subscribe function Subscribe to changes
subscribeInternal function Internal subscription without immediate call
once function Subscribe and automatically unsubscribe after first call
update function Update value using a function
value * Getter/setter property for the signal value
Source: