API Reference

BaseNative currently exposes a small runtime/server surface and an intentionally constrained expression model. The goal in `v0.x` is correctness and trust, not arbitrary template execution.

signal(initialValue)

core

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

import { signal } from 'basenative';

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

computed(fn)

core

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

import { signal, computed } from 'basenative';

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

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

effect(fn)

core

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

import { signal, effect } from 'basenative';

const name = signal('world');

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

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

hydrate(root, context)

dom

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

import { signal, hydrate } from 'basenative';

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

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

Template Directives

Control flow lives in native <template> elements. Expressions use a safe subset that favors property access, function calls, and simple operators over arbitrary in-template program bodies.

@if / @else

directive

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>

@for / @empty

directive

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

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

@switch / @case / @default

directive

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>

Expression binding

binding

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  times
</button>

<!-- Text interpolation -->
<p>Hello, </p>

Server Rendering

The SSR module evaluates all directives at request time. It can also emit hydratable markers for diagnostics and future SSR hydration work.

render(html, context, options?)

server

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

import { render } from 'basenative/server';

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