@seithr/core

Fine-grained reactive push-pull DAG, computation scope hierarchy, and zero-allocation DOM reconciler for Seithr.

Overview

@seithr/core is the foundational engine of the Seithr framework. It implements a topological push-pull reactive dependency graph where dirty state notifications are pushed downward synchronously, and evaluated values are pulled on demand. Combined with surgical DOM morphing, steady-state rendering achieves near-zero memory allocations.

Installation

bun add @seithr/core
# or using npm
npm install @seithr/core

Features

• Push-Pull Reactive DAG:
  • createSignal: Primitive atomic state cells with custom equality comparators.
  • createMemo: Pure derived computations with memoization and glitch-freedom.
  • createEffect: Side-effect scheduler running in response to upstream reactive changes.
  • batch: Synchronously combines multiple state updates into a single atomic propagation cycle.
  • untrack: Reads reactive signals without registering downstream subscriptions.
• Hierarchical Scopes:
  • ComputationScope tree guarantees automated disposal of child computeds and effects upon scope unmounting (onCleanup).
• Zero-Allocation DOM Reconciler:
  • Direct surgical DOM node updates mutating .nodeValue in place without recreating nodes.
  • Structural primitives: <Show>, <For>, <Index>, <Switch>, <Match>, <Suspense>, <Portal>, and <ErrorBoundary>.

Usage

import { createSignal, createEffect, For, render } from "@seithr/core"

interface Todo {
  id: number
  text: string
}

function TodoApp() {
  const [todos, setTodos] = createSignal<Todo[]>([
    { id: 1, text: "Learn Seithr" },
    { id: 2, text: "Build Reactive App" },
  ])
  const [newTodo, setNewTodo] = createSignal("")

  const addTodo = (e: Event) => {
    e.preventDefault()
    const text = newTodo().trim()
    if (!text) return
    setTodos((items) => [...items, { id: Date.now(), text }])
    setNewTodo("")
  }

  return (
    <div>
      <form onSubmit={addTodo}>
        <input
          value={newTodo()}
          onInput={(e) => setNewTodo((e.target as HTMLInputElement).value)}
          placeholder="New item..."
        />
        <button type="submit">Add</button>
      </form>

      <ul>
        <For each={todos()} by={(item) => item.id}>
          {(item) => <li>{item().text}</li>}
        </For>
      </ul>
    </div>
  )
}

render(() => <TodoApp />, document.getElementById("root")!)