@sylphx/zen-router-preact

---

Overview

Rapid is a revolutionary reactive state management library that combines extreme minimalism with magical auto-tracking. Built for modern applications, Rapid provides the smallest bundle size without sacrificing performance or developer experience.

The Problem:

Traditional state libraries:
- Large bundle sizes ❌
- Manual dependency tracking ❌
- Verbose APIs ❌
- Poor performance ❌

The Solution:

Rapid:
- 2.49 KB gzipped ✅
- Automatic dependency tracking ✅
- Clean, unified API ✅
- Blazing fast performance ✅

Result: Minimal footprint, maximum performance, zero configuration.

---

Key Features

Performance & Size

Feature	Description	Benefit
Ultra-tiny	Only 2.49 KB gzipped (v3.8)	Minimal bundle impact
Lightning fast	2.97x slower vs Solid.js	Competitive performance
Zero overhead	Auto-tracking with minimal runtime cost	Optimal performance

Developer Experience

• Auto-tracking - Dependencies tracked automatically, no manual lists
• Clean API - Unified .value everywhere, no get()/set()
• Framework agnostic - Use with React, Vue, Svelte, Solid, or vanilla JS
• Extensible - Modular utilities for persistence, routing, and more
• TypeScript-first - Full type safety out of the box

---

Packages

Core Packages

@rapid/signal

• Core reactive primitives (signal, computed, effect)
• Auto-tracking dependency system
• Ultra-tiny bundle (1.75 KB)
• Foundation for Rapid ecosystem

@rapid/web

• Web renderer with fine-grained reactivity
• No virtual DOM - direct DOM updates
• Component render once, signals auto-update
• JSX with automatic signal unwrapping
• SSR and hydration support

@rapid/tui

• Terminal UI renderer for CLI applications
• Build beautiful terminal dashboards
• Same reactive primitives as web
• Box, Text components for layout

@rapid/native (Coming Soon)

• Native renderer for iOS/Android
• React Native-compatible components
• Platform-specific optimizations

# For web applications
npm install @rapid/web

# For terminal/CLI applications
npm install @rapid/tui

# For core reactivity only
npm install @rapid/signal

---

Framework Integrations

@rapid/signal-react

• React hooks integration
• Automatic re-renders
• Concurrent mode compatible

@rapid/signal-vue

• Vue 3 composition API
• Seamless integration

@rapid/signal-svelte

• Svelte stores compatibility
• Reactive bindings

@rapid/signal-preact

• Preact signals integration
• Lightweight alternative to React

@rapid/signal-solid

• SolidJS primitives
• Fine-grained reactivity

# Install framework integration
npm install @rapid/signal-react
# or
npm install @rapid/signal-vue
# or
npm install @rapid/signal-svelte

---

Utilities

@rapid/signal-patterns - NEW v2.0

• Useful patterns built on zen core APIs
• Store pattern (Zustand-style)
• Async state management
• Map pattern (key-level reactivity)
• DeepMap pattern (path-level reactivity)
• Only 936 B gzipped

@rapid/signal-craft

• Immutable state updates
• 1.4-35x faster than immer
• Type-safe mutations

@rapid/signal-persistent

• LocalStorage/SessionStorage persistence
• Automatic synchronization
• Debounced writes

@rapid/router & @rapid/router-react & @rapid/router-preact

• Type-safe routing
• Nested routes support
• Framework-specific bindings

# Install utilities
npm install @rapid/signal-patterns  # NEW! Useful patterns
npm install @rapid/signal-craft
npm install @rapid/signal-persistent
npm install @rapid/router-react

---

Quick Start

Basic Usage

import { signal, computed } from '@rapid/signal';

// Create reactive state
const count = signal(0);

// Auto-tracked computed value (no manual dependencies!)
const double = computed(() => count.value * 2);

// Update state
count.value++;
console.log(double.value); // 2

With React

import { useZen } from '@rapid/signal-react';
import { signal } from '@rapid/signal';

const counter = signal(0);

function Counter() {
  const count = useZen(counter);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => counter.value++}>Increment</button>
    </div>
  );
}

With Patterns

import { store, computedAsync, map } from '@rapid/signal-patterns';
import { signal } from '@rapid/signal';

// Zustand-style store pattern
const counter = store(() => {
  const count = signal(0);
  return {
    count,
    increase: () => count.value++,
    decrease: () => count.value--
  };
});

// Async state management
const user = computedAsync(async () => {
  const res = await fetch('/api/user');
  return res.json();
});

// Key-level reactivity for objects
const form = map({
  name: '',
  email: '',
  age: 0
});

With Persistence

import { persistent } from '@rapid/signal-persistent';

// Automatically synced with localStorage
const settings = persistent('user-settings', {
  theme: 'dark',
  language: 'en'
});

// Changes are automatically persisted
settings.value.theme = 'light';

---

Comparison

Bundle Size

Library	Size (gzipped)	Difference
Zustand	1.2 KB	Baseline
Rapid v3.8	2.49 KB	+108%
Jotai	3.0 KB	+150%
Valtio	5.5 KB	+358%
Redux Toolkit	12+ KB	+900%

Performance (vs Solid.js)

Library	Performance	Auto-tracking	Computed
Solid.js	1x (baseline)	Yes	Yes
Rapid v3.8	2.97x slower	Yes	Yes
Zustand	Manual tracking	No	No
Valtio	Auto (Proxy)	Proxy	No
Redux	Manual tracking	No	No

---

Monorepo Structure

zen/
├── packages/
│   ├── zen-signal/             # @rapid/signal - Reactive primitives
│   ├── zen-web/                # @rapid/web - Web renderer
│   ├── zen-tui/                # @rapid/tui - Terminal UI renderer
│   ├── zen-native/             # @rapid/native - Native renderer (coming soon)
│   ├── zen-runtime/            # @rapid/runtime - Platform-agnostic components
│   ├── zen-signal-react/       # @rapid/signal-react - React integration
│   ├── zen-signal-vue/         # @rapid/signal-vue - Vue integration
│   ├── zen-signal-svelte/      # @rapid/signal-svelte - Svelte integration
│   ├── zen-signal-preact/      # @rapid/signal-preact - Preact integration
│   ├── zen-signal-solid/       # @rapid/signal-solid - SolidJS integration
│   ├── zen-signal-craft/       # @rapid/signal-craft - Immutable utilities
│   ├── zen-signal-patterns/    # @rapid/signal-patterns - Useful patterns
│   ├── zen-signal-persistent/  # @rapid/signal-persistent - Persistence
│   ├── zen-router/             # @rapid/router - Core routing
│   ├── zen-router-react/       # @rapid/router-react - React router
│   └── zen-router-preact/      # @rapid/router-preact - Preact router
├── docs/                       # Documentation site
├── package.json
└── README.md

---

Development

Setup

# Install dependencies
bun install

# Build all packages
bun run build

# Run tests
bun test

# Watch mode
bun test:watch

# Linting
bun run lint
bun run lint:fix

Workspace Commands

# Build specific package
bun run build --filter @rapid/signal

# Test specific package
bun test --filter @rapid/signal

# Dev mode for all packages
bun run dev

---

Documentation

Core Concepts

• State - Reactive values that trigger updates
• Computed - Auto-tracked derived values
• Effects - Side effects that run on changes
• Persistence - Automatic storage synchronization

Framework Integration

Each framework package provides idiomatic bindings:

• React: useZen() hook
• Vue: Composition API compatible
• Svelte: Store-compatible
• Solid: Signal-compatible

See individual package READMEs for detailed documentation.

---

Use Cases

Application State

import { state, computed } from '@rapid/signal';

const user = state({ name: 'Alice', age: 30 });
const isAdult = computed(() => user.value.age >= 18);

Form Management

const form = state({
  email: '',
  password: ''
});

const isValid = computed(() =>
  form.value.email.includes('@') &&
  form.value.password.length >= 8
);

UI State

const theme = persistent('theme', 'dark');
const sidebar = state({ open: false });
const modal = state({ show: false, content: null });

---

Technology Stack

Component	Technology
Language	TypeScript 5.9
Package Manager	pnpm
Monorepo	pnpm workspaces + Turbo
Testing	Vitest
Bundling	tsup
Linting	Biome
Documentation	VitePress

---

Roadmap

Completed

• Core reactive state library
• Auto-tracking computed values
• React integration
• Vue integration
• Svelte integration
• Preact integration
• SolidJS integration
• Immutable utilities (zen-craft)
• Persistence utilities
• Routing (zen-router)

Planned

• DevTools integration
• Time-travel debugging
• Performance profiler
• React Native support
• SSR optimizations
• More utility packages

---

Contributing

Contributions are welcome! Please follow these guidelines:

1. Open an issue - Discuss changes before implementing
2. Fork the repository
3. Create a feature branch - git checkout -b feature/my-feature
4. Follow code standards - Run pnpm lint
5. Write tests - Maintain high coverage
6. Submit a pull request

Development Workflow

# 1. Install dependencies
pnpm install

# 2. Make changes to packages

# 3. Build and test
pnpm build
pnpm test

# 4. Lint and format
pnpm lint:fix
pnpm format

# 5. Create changeset
pnpm changeset

# 6. Commit and push
git commit -m "feat: add new feature"
git push

---

License

MIT Sylphx

---

Credits

Built with:

• TypeScript - Language
• pnpm - Package manager
• Turbo - Monorepo tool
• Vitest - Testing framework
• Biome - Linting & formatting

---

Star History

Powered by Sylphx

• Semantic versioning tool
• @sylphx/biome-config - Shared Biome configuration
• @sylphx/tsconfig - Shared TypeScript configuration

---