API Reference

Creates a reactive value. Call the accessor to read (and track); call .set() to write. Subscribers re-run automatically.

Full signal() reference in docs/api →

import { signal } from '@basenative/runtime';

const count = signal(0);

// Read the current value (tracks in effects)
count();          // → 0

// Write a new value
count.set(5);
count.set(count() + 1);

// Read without tracking
count.peek();     // → 6

Derives a new signal from others. Re-evaluates only when its dependencies change.

Full computed() reference in docs/api →

import { signal, computed } from '@basenative/runtime';

const width = signal(10);
const height = signal(5);
const area = computed(() => width() * height());

area();  // → 50
width.set(20);
area();  // → 100

Runs a function immediately and re-runs it whenever any signal read inside changes. The returned runner also exposes .dispose().

Full effect() reference in docs/api →

import { signal, effect } from '@basenative/runtime';

const name = signal('world');

effect(() => {
  document.title = `Hello, ${name()}`;
});

name.set('BaseNative');
// document.title is now "Hello, BaseNative"

Walks a DOM subtree, binding template directives (@if, @for, @switch) and expression interpolation ({{ }}) to the given context. Hydration diagnostics are available through optional callbacks.

Full hydrate() reference in docs/api →

import { signal, hydrate } from '@basenative/runtime';

const items = signal(['one', 'two']);

hydrate(document.querySelector('[data-app]'), {
  items,
});

Conditionally render content. The expression is re-evaluated reactively.

<template @if="isLoggedIn()">
  <p>Welcome back!</p>
</template>
<template @else>
  <p>Please sign in</p>
</template>

Iterate over arrays. Supports track for identity. Loop variables: $index, $first, $last, $even, $odd.

<template @for="item of items(); track item.id">
  <li>{{ item.name }}</li>
</template>
<template @empty>
  <li>No items found</li>
</template>

Pattern matching for template rendering. Renders the first matching @case or falls through to @default.

<template @switch="status()">
  <template @case="'active'">
    <mark data-status="active">Running</mark>
  </template>
  <template @default>
    <mark data-status="idle">Unknown</mark>
  </template>
</template>

Bind attributes reactively with : prefix. Attach events with @ prefix. Interpolate text with {{ }}. For complex event logic, call a named function from the template instead of embedding control flow in the attribute string.

<!-- Reactive attribute -->
<img :src="imageUrl()" />

<!-- Event handler -->
<button @click="incrementCount()">
  Clicked {{ count() }} times
</button>

<!-- Text interpolation -->
<p>Hello, {{ name() }}</p>

Parses an HTML string containing BaseNative directives and returns resolved HTML. Optional render diagnostics and hydratable markers are available through the third argument.

Full render() reference in docs/api →

import { render } from '@basenative/server';

const html = render(`
  <template @for="item of items; track item.id">
    <li>{{ item.name }}</li>
  </template>
`, {
  items: [
    { id: 1, name: 'Alpha' },
    { id: 2, name: 'Beta' },
  ]
});
// → "<li>Alpha</li><li>Beta</li>"