Global

Members

(constant) createEffect

Creates a reactive computation that automatically tracks its dependencies and re-runs whenever any of those dependencies change.
Source:
Example
const count = createSignal(0);
createEffect(() => {
  console.log('The count is:', count());
});
// This will log "The count is: 0" initially, and then re-log whenever count changes.

(constant) createMemo

Creates a cached, computed value that is derived from other reactive signals or memos. The memo's value is only recomputed when its dependencies change.
Source:
Example
const firstName = createSignal('John');
const lastName = createSignal('Doe');
const fullName = createMemo(() => `${firstName()} ${lastName()}`);
console.log(fullName()); // "John Doe"

(constant) createRoot

Creates a reactive context that manages the lifecycle of nested effects and memos. When the root is disposed, all computations within it are also cleaned up. This is useful for mounting and unmounting components.
Source:

(constant) createSignal

Creates a reactive value store (a "signal") and returns a single function to get and set its value. When the signal's value changes, any effects or memos that depend on it are automatically re-run.
Source:
Example
const count = createSignal(0); // Create a signal with initial value 0
count(); // Returns 0
count(5); // Sets the value to 5

(constant) onCleanup

Registers a cleanup function to be called just before the current effect or root is re-run or disposed. This is useful for clearing intervals, removing event listeners, or any other teardown logic.
Source:

(constant) scheduleUpdate

Schedules an update for a given effect, using `queueMicrotask` for efficient batching. This prevents unnecessary re-renders by collecting all changes within a single event loop tick and executing them together.
Source:

Methods

A component that creates a hyperlink for client-side navigation. It renders an `` tag with an `href` attribute that points to a URL hash.
Parameters:
Name Type Description
props object The properties for the Link component.
Properties
Name Type Description
to string The destination path (e.g., '/home', '/settings').
children Array.<(HTMLElement|string)> The content of the link.
Source:
Returns:
An `` element.
Type
HTMLElement
Example
Link({ to: '/dashboard', children: ['Go to Dashboard'] })

createRouter(routes) → {Object}

Creates a router instance that reactively updates the displayed component based on the URL hash.
Parameters:
Name Type Description
routes object.<string, function(): HTMLElement> An object where keys are URL paths (e.g., '/', '/about') and values are component functions to render for those paths. A '/404' route is recommended for handling unknown paths.
Source:
Returns:
An object containing: - `activeComponent`: A memoized signal that returns the component function for the current route. - `navigate`: A function to programmatically change the route.
Type
Object
Example
const routes = {
  '/': () => h('h1', {}, 'Home'),
  '/about': () => h('h1', {}, 'About'),
  '/404': () => h('h1', {}, 'Not Found')
};
const { activeComponent, navigate } = createRouter(routes);

// In your main component:
h('div', {},
  h('nav', {},
    Link({ to: '/', children: ['Home'] }),
    Link({ to: '/about', children: ['About'] })
  ),
  activeComponent // This will render the correct component
);

h(tag, propsopt, …children) → {HTMLElement}

A hyperscript-style function for creating DOM elements and components. It handles static and reactive (signal/memo) props and children.
Parameters:
Name Type Attributes Description
tag string | function The HTML tag name (e.g., 'div') or a component function.
props object <optional>
 An object of attributes and event listeners.
children HTMLElement | string | number | function <repeatable>
 The children to append to the element.
Source:
Returns:
The created DOM element.
Type
HTMLElement
Example
// Static element
h('h1', { class: 'title' }, 'Hello, World!');

// Reactive element
const count = createSignal(0);
h('p', {}, 'Count: ', count);

// Component
const MyComponent = ({ greeting }) => h('p', {}, greeting);
h(MyComponent, { greeting: 'Welcome' });

mount(selector, component) → {function}

Mounts a component to a DOM element specified by a selector.
Parameters:
Name Type Description
selector string The CSS selector of the target element.
component function The root component function to render.
Source:
Throws:
If no element is found for the given selector.
Type
Error
Returns:
A dispose function to unmount the component and clean up reactivity.
Type
function
Example
const App = () => h('div', {}, 'My App');
const dispose = mount('#app', App);

// To unmount
dispose();