seithr

The fine-grained reactive web engineering framework. Public umbrella facade re-exporting all Seithr modular packages.

Overview

seithr is the unified, high-performance facade for the Seithr framework. It provides a cohesive, single-import developer experience re-exporting the reactive core, state management, router, kinetic motion, accessibility directives, and schema validation systems with zero additional runtime overhead.

Quickstart & Scaffolding

Scaffold a production-ready Seithr application in seconds with create-seithr:

# Using bun
bun create seithr my-app

# Using npm
npm create seithr@latest my-app

# Using pnpm
pnpm create seithr my-app

# Using yarn
yarn create seithr my-app

Manual Installation

To install seithr into an existing project:

bun add seithr
# or using npm
npm install seithr

Tooling Configuration

1. Vite Plugin Setup

Configure the Seithr JSX transformer in your vite.config.ts:

// vite.config.ts
import { defineConfig } from "vite"
import { seithrPlugin } from "seithr/compiler/vite"

export default defineConfig({
  plugins: [seithrPlugin()],
})

2. TypeScript Configuration

Ensure fine-grained JSX types and reactivity primitives resolve properly by configuring "jsxImportSource": "seithr" in your tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "seithr",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Features

• All-in-One Developer Facade: Single package import providing unified access to the complete Seithr ecosystem without configuring multiple granular workspace packages.
• Fine-Grained Reactivity: Push-pull topological signal graph with zero-allocation steady-state rendering powered by @seithr/core.
• Inversion of Control & State Management: Decoupled state slices and atomic transactions from @seithr/store.
• First-Class Platform Accessibility: Native Top Layer <dialog>, popover directives, and roving tabindex from @seithr/a11y.
• Analytical Physics & Motion: Smooth spring dynamics and gesture trackers from @seithr/motion.
• Standard Schema v1: Type-safe data validation from @seithr/schema.
• Nested Layout Routing: Declarative URL routing and W3C View Transitions from @seithr/router.

Usage

import {
  createSignal,
  createEffect,
  For,
  Show,
  render,
  StoreProvider,
  createStore,
} from "seithr"

function App() {
  const [activeTab, setActiveTab] = createSignal("home")

  return (
    <main>
      <h1>Seithr v6 Application</h1>
      <nav>
        <button onClick={() => setActiveTab("home")}>Home</button>
        <button onClick={() => setActiveTab("dashboard")}>Dashboard</button>
      </nav>

      <Show when={activeTab() === "home"} fallback={<p>Dashboard View</p>}>
        <p>Welcome to the home page!</p>
      </Show>
    </main>
  )
}

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