Directives & Public API

A complete reference of special HTML attributes and the global pp methods available in PulsePoint.

HTML Directives

5 Available
Directive Description Example
pp-component Defines a component boundary. State and effects inside are isolated from the parent scope. <div pp-component="card">
pp-for Iterates over an array or object. The element is duplicated for each item. <template pp-for="item in list">
pp-ref Binds the DOM element to a pp.ref() variable for direct manipulation. <input pp-ref="inputRef" />
pp-spread Spreads an object of key/value pairs as attributes onto the element. <div pp-spread="{...props}">
pp-ignore
Prevents compilation for this element and all descendants. Mustache templates, pp-for loops and component boundaries inside are ignored — nested components will not be initialized while an ancestor has pp-ignore.
Warning — use sparingly
  • Effect: Stops reactive setup, loops and component initialization for the entire subtree.
  • When to use: Only for intentional static markup or temporary debugging.
  • Do not use: On parent containers that need their children to initialize.
 <div pp-ignore>

Core Reactivity

Global `pp` Instance

pp.state()

Core

Creates reactive state variables.

state<T>(initial: T): [Getter, Setter]

pp.effect()

Core

Runs side effects when dependencies change.

effect(cb: () => void, deps?: any[]): Function

System & Lifecycle

Method Description Signature
ref() Creates a mutable object { value: T } that does not trigger re-renders. ref(val?): Ref
createPortal() Renders content into a DOM node outside the current hierarchy. createPortal(html, target): string
removePortal() Destroys a portal by its ID. removePortal(id): boolean
hydrated() Promise that resolves when initial hydration completes. hydrated(): Promise
onHydrated() Registers a callback to run after hydration. onHydrated(cb): void
destroy() Tears down the instance and disconnects observers. destroy(): void
Installation Next: State