@tachui/core 0.7.0-alpha1

package/src/reactive/scheduler.ts

@@ -0,0 +1,300 @@
+/**
+ * Reactive scheduler for managing update batching and timing
+ *
+ * Provides utilities for controlling when reactive updates are executed,
+ * batching updates for performance, and scheduling priorities.
+ */
+
+import type { Scheduler } from './types'
+
+/**
+ * Default scheduler implementation using microtasks
+ */
+class MicrotaskScheduler implements Scheduler {
+  private pending = new Set<() => void>()
+  private isFlushScheduled = false
+
+  schedule(fn: () => void): void {
+    this.pending.add(fn)
+
+    if (!this.isFlushScheduled) {
+      this.isFlushScheduled = true
+      queueMicrotask(() => this.flush())
+    }
+  }
+
+  flush(): void {
+    if (this.pending.size === 0) {
+      this.isFlushScheduled = false
+      return
+    }
+
+    const tasks = Array.from(this.pending)
+    this.pending.clear()
+    this.isFlushScheduled = false
+
+    for (const task of tasks) {
+      try {
+        task()
+      } catch (error) {
+        console.error('Error in scheduled task:', error)
+      }
+    }
+
+    // If new tasks were scheduled during execution, flush again
+    if (this.pending.size > 0) {
+      this.isFlushScheduled = true
+      queueMicrotask(() => this.flush())
+    }
+  }
+}
+
+/**
+ * Synchronous scheduler for immediate execution
+ */
+class SyncScheduler implements Scheduler {
+  schedule(fn: () => void): void {
+    try {
+      fn()
+    } catch (error) {
+      console.error('Error in sync scheduled task:', error)
+    }
+  }
+
+  flush(): void {
+    // No-op for sync scheduler
+  }
+}
+
+/**
+ * RAF scheduler for animation-friendly updates
+ */
+class RAFScheduler implements Scheduler {
+  private pending = new Set<() => void>()
+  private rafId: number | null = null
+
+  schedule(fn: () => void): void {
+    this.pending.add(fn)
+
+    if (this.rafId === null) {
+      this.rafId = requestAnimationFrame(() => this.flush())
+    }
+  }
+
+  flush(): void {
+    if (this.pending.size === 0) {
+      this.rafId = null
+      return
+    }
+
+    const tasks = Array.from(this.pending)
+    this.pending.clear()
+    this.rafId = null
+
+    for (const task of tasks) {
+      try {
+        task()
+      } catch (error) {
+        console.error('Error in RAF scheduled task:', error)
+      }
+    }
+
+    // If new tasks were scheduled during execution, schedule another RAF
+    if (this.pending.size > 0) {
+      this.rafId = requestAnimationFrame(() => this.flush())
+    }
+  }
+}
+
+/**
+ * Priority-based scheduler
+ */
+enum TaskPriority {
+  Immediate = 0,
+  High = 1,
+  Normal = 2,
+  Low = 3,
+  Idle = 4,
+}
+
+interface PriorityTask {
+  fn: () => void
+  priority: TaskPriority
+  id: number
+}
+
+class PriorityScheduler implements Scheduler {
+  private queues = new Map<TaskPriority, Set<PriorityTask>>()
+  private taskIdCounter = 0
+  private isFlushScheduled = false
+
+  constructor() {
+    // Initialize priority queues
+    for (const priority of Object.values(TaskPriority)) {
+      if (typeof priority === 'number') {
+        this.queues.set(priority, new Set())
+      }
+    }
+  }
+
+  schedule(fn: () => void, priority: TaskPriority = TaskPriority.Normal): void {
+    const task: PriorityTask = {
+      fn,
+      priority,
+      id: ++this.taskIdCounter,
+    }
+
+    const queue = this.queues.get(priority)
+    if (queue) {
+      queue.add(task)
+    }
+
+    if (!this.isFlushScheduled) {
+      this.isFlushScheduled = true
+
+      if (priority === TaskPriority.Immediate) {
+        this.flush()
+      } else {
+        queueMicrotask(() => this.flush())
+      }
+    }
+  }
+
+  flush(): void {
+    this.isFlushScheduled = false
+
+    // Process queues by priority
+    for (const priority of [
+      TaskPriority.Immediate,
+      TaskPriority.High,
+      TaskPriority.Normal,
+      TaskPriority.Low,
+      TaskPriority.Idle,
+    ]) {
+      const queue = this.queues.get(priority)
+      if (!queue || queue.size === 0) continue
+
+      const tasks = Array.from(queue).sort((a, b) => a.id - b.id)
+      queue.clear()
+
+      for (const task of tasks) {
+        try {
+          task.fn()
+        } catch (error) {
+          console.error(`Error in priority ${priority} task:`, error)
+        }
+      }
+
+      // Yield to browser after processing each priority level
+      if (queue.size === 0 && this.hasMoreTasks()) {
+        queueMicrotask(() => this.flush())
+        return
+      }
+    }
+  }
+
+  private hasMoreTasks(): boolean {
+    for (const queue of this.queues.values()) {
+      if (queue.size > 0) return true
+    }
+    return false
+  }
+}
+
+// Global scheduler instance
+let currentScheduler: Scheduler = new MicrotaskScheduler()
+
+/**
+ * Get the current scheduler
+ */
+export function getScheduler(): Scheduler {
+  return currentScheduler
+}
+
+/**
+ * Set a custom scheduler
+ */
+export function setScheduler(scheduler: Scheduler): void {
+  currentScheduler = scheduler
+}
+
+/**
+ * Enable/disable scheduling (for testing)
+ */
+export function enableScheduling(enabled: boolean = true): void {
+  if (enabled) {
+    currentScheduler = new MicrotaskScheduler()
+  } else {
+    currentScheduler = new SyncScheduler()
+  }
+}
+
+/**
+ * Flush all pending updates synchronously
+ */
+export function flushSync(): void {
+  currentScheduler.flush()
+}
+
+/**
+ * Schedule a function to run in the next update cycle
+ */
+export function scheduleUpdate(fn: () => void): void {
+  currentScheduler.schedule(fn)
+}
+
+/**
+ * Create a scheduler with specific behavior
+ */
+export function createScheduler(type: 'microtask' | 'sync' | 'raf' | 'priority'): Scheduler {
+  switch (type) {
+    case 'microtask':
+      return new MicrotaskScheduler()
+    case 'sync':
+      return new SyncScheduler()
+    case 'raf':
+      return new RAFScheduler()
+    case 'priority':
+      return new PriorityScheduler()
+    default:
+      return new MicrotaskScheduler()
+  }
+}
+
+/**
+ * Schedule with priority (if using priority scheduler)
+ */
+export function scheduleWithPriority(fn: () => void, priority: TaskPriority): void {
+  if (currentScheduler instanceof PriorityScheduler) {
+    ;(currentScheduler as any).schedule(fn, priority)
+  } else {
+    currentScheduler.schedule(fn)
+  }
+}
+
+/**
+ * Defer execution to idle time
+ */
+export function scheduleIdle(fn: () => void): void {
+  if (typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(fn)
+  } else {
+    setTimeout(fn, 0)
+  }
+}
+
+/**
+ * Cancel all pending updates
+ */
+export function cancelPendingUpdates(): void {
+  if (
+    currentScheduler instanceof MicrotaskScheduler ||
+    currentScheduler instanceof PriorityScheduler
+  ) {
+    ;(currentScheduler as any).pending?.clear()
+  }
+}
+
+// Export scheduler types
+export { TaskPriority }
+export type { Scheduler }

package/src/reactive/signal.ts

@@ -0,0 +1,201 @@
+/**
+ * Signal implementation - core reactive primitive
+ *
+ * Signals are the foundation of TachUI's reactive system, providing
+ * fine-grained reactivity similar to SolidJS signals.
+ */
+
+import { getCurrentComputation, isBatchingUpdates, setFlushFunction } from './context'
+import type { Computation, SignalImpl as ISignal } from './types'
+import { ComputationState } from './types'
+
+let signalIdCounter = 0
+
+/**
+ * Signal setter function type
+ */
+export type SignalSetter<T> = (value: T | ((prev: T) => T)) => T
+
+/**
+ * Internal signal implementation (keeping original behavior)
+ */
+class SignalImpl<T> implements ISignal<T> {
+  readonly id: number
+  readonly observers = new Set<Computation>()
+  private _value: T
+
+  constructor(initialValue: T) {
+    this.id = ++signalIdCounter
+    this._value = initialValue
+  }
+
+  /**
+   * Get the current value and track dependency
+   */
+  getValue(): T {
+    const computation = getCurrentComputation()
+    if (computation && computation.state !== ComputationState.Disposed) {
+      // Track this signal as a dependency
+      this.observers.add(computation)
+      computation.sources.add(this)
+    }
+    return this._value
+  }
+
+  /**
+   * Get the current value without tracking dependency
+   */
+  peek(): T {
+    return this._value
+  }
+
+  /**
+   * Set a new value and notify observers
+   */
+  set(newValue: T | ((prev: T) => T)): T {
+    const value =
+      typeof newValue === 'function' ? (newValue as (prev: T) => T)(this._value) : newValue
+
+    if (value !== this._value) {
+      this._value = value
+      this.notify()
+    }
+
+    return value
+  }
+
+  /**
+   * Notify all observers that this signal has changed
+   */
+  private notify(): void {
+    for (const observer of this.observers) {
+      if (observer.state !== ComputationState.Disposed) {
+        observer.state = ComputationState.Dirty
+        scheduleUpdate(observer)
+      }
+    }
+  }
+
+  /**
+   * Remove an observer (cleanup)
+   */
+  removeObserver(computation: Computation): void {
+    this.observers.delete(computation)
+  }
+
+  /**
+   * Get debug information about this signal
+   */
+  [Symbol.for('tachui.debug')](): object {
+    return {
+      id: this.id,
+      value: this._value,
+      observerCount: this.observers.size,
+      type: 'Signal',
+    }
+  }
+}
+
+/**
+ * Update queue for batching reactive updates
+ */
+const updateQueue = new Set<Computation>()
+let isFlushingUpdates = false
+
+/**
+ * Schedule a computation for update
+ */
+function scheduleUpdate(computation: Computation): void {
+  updateQueue.add(computation)
+
+  if (!isFlushingUpdates && !isBatchingUpdates()) {
+    queueMicrotask(flushUpdates)
+  }
+}
+
+/**
+ * Flush all pending updates
+ */
+function flushUpdates(): void {
+  if (isFlushingUpdates) return
+
+  isFlushingUpdates = true
+
+  try {
+    // Keep processing until no more computations are added
+    while (updateQueue.size > 0) {
+      // Process updates in order of computation ID for deterministic execution
+      const computations = Array.from(updateQueue).sort((a, b) => a.id - b.id)
+      updateQueue.clear()
+
+      for (const computation of computations) {
+        if (computation.state === ComputationState.Dirty) {
+          computation.execute()
+        }
+      }
+    }
+  } finally {
+    isFlushingUpdates = false
+  }
+}
+
+/**
+ * Create a new reactive signal
+ *
+ * @param initialValue The initial value of the signal
+ * @returns A tuple of [getter, setter] functions
+ *
+ * @example
+ * ```typescript
+ * const [count, setCount] = createSignal(0)
+ *
+ * console.log(count()) // 0
+ * setCount(5)
+ * console.log(count()) // 5
+ *
+ * // Functional update
+ * setCount(prev => prev + 1)
+ * console.log(count()) // 6
+ * ```
+ */
+export function createSignal<T>(initialValue: T): [() => T, SignalSetter<T>] {
+  const signal = new SignalImpl(initialValue)
+
+  const getter = signal.getValue.bind(signal) as (() => T) & { peek: () => T }
+  getter.peek = signal.peek.bind(signal)
+
+  const setter: SignalSetter<T> = signal.set.bind(signal)
+
+  // Add debug information
+  Object.defineProperty(getter, Symbol.for('tachui.signal'), {
+    value: signal,
+    enumerable: false,
+  })
+
+  return [getter, setter]
+}
+
+/**
+ * Type guard to check if a value is a signal
+ */
+export function isSignal<T = any>(value: any): value is (() => T) & { peek: () => T } {
+  return typeof value === 'function' && Symbol.for('tachui.signal') in value
+}
+
+/**
+ * Get the underlying signal implementation for debugging
+ */
+export function getSignalImpl<T>(signal: (() => T) & { peek: () => T }): SignalImpl<T> | null {
+  return (signal as any)[Symbol.for('tachui.signal')] || null
+}
+
+/**
+ * Public Signal type export (callable getter)
+ */
+export type { Signal } from './types'
+
+// Export flush function for testing and manual control
+export { flushUpdates as flushSync }
+
+// Register flush function with context module
+setFlushFunction(flushUpdates)

package/src/reactive/theme.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme Management System for TachUI
+ *
+ * Provides reactive theme management with light/dark mode support.
+ */
+
+import { createSignal } from './signal'
+import { createComputed, type Computed } from './computed'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+// Global theme signal
+const [currentTheme, setCurrentTheme] = createSignal<Theme>('light')
+
+// Function to get the current theme
+export function getCurrentTheme(): Theme {
+  const theme = currentTheme()
+  if (theme === 'system') {
+    return detectSystemTheme()
+  }
+  return theme
+}
+
+// Function to set the theme
+export function setTheme(theme: Theme): void {
+  setCurrentTheme(theme)
+}
+
+// Create a single shared computed theme signal
+const themeComputed = createComputed(() => {
+  const theme = currentTheme()
+  if (theme === 'system') {
+    return detectSystemTheme()
+  }
+  return theme
+})
+
+// Function to get the reactive theme signal for use in reactive effects
+export function getThemeSignal(): Computed<'light' | 'dark'> {
+  return themeComputed
+}
+
+// Auto-detect system theme
+export function detectSystemTheme(): 'light' | 'dark' {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+  return 'light'
+}

package/src/reactive/types.ts

@@ -0,0 +1,103 @@
+/**
+ * Core reactive system types
+ */
+
+/**
+ * A reactive accessor function that returns the current value
+ */
+export type Accessor<T = any> = () => T
+
+/**
+ * A setter function that updates a reactive value
+ */
+export type Setter<T> = (value: T | ((prev: T) => T)) => T
+
+/**
+ * Extract the value type from an Accessor
+ */
+export type AccessorValue<T> = T extends Accessor<infer U> ? U : never
+
+/**
+ * Owner context for reactive computations and cleanup
+ */
+export interface Owner {
+  readonly id: number
+  readonly parent: Owner | null
+  readonly context: Map<symbol, any>
+  readonly cleanups: CleanupFunction[]
+  readonly sources: Set<Computation>
+  disposed: boolean
+}
+
+/**
+ * Base computation interface
+ */
+export interface Computation {
+  readonly id: number
+  readonly owner: Owner | null
+  readonly fn: () => any
+  readonly sources: Set<any>
+  readonly observers: Set<Computation>
+  state: ComputationState
+  value?: any
+  execute(): any
+  dispose(): void
+}
+
+/**
+ * Computation state enum
+ */
+export enum ComputationState {
+  Clean = 0, // Up to date
+  Check = 1, // Potentially stale, needs checking
+  Dirty = 2, // Definitely stale, needs recomputation
+  Disposed = 3, // Disposed, should not be used
+}
+
+/**
+ * Signal interface (internal)
+ */
+export interface SignalImpl<T> {
+  readonly id: number
+  readonly observers: Set<Computation>
+  getValue(): T
+  peek(): T
+}
+
+/**
+ * Signal getter function type (what createSignal returns)
+ */
+export type Signal<T> = (() => T) & { peek(): T }
+
+/**
+ * Effect function type
+ */
+export type EffectFunction<T = any> = (prev?: T) => T
+
+/**
+ * Effect options
+ */
+export interface EffectOptions {
+  name?: string
+}
+
+/**
+ * Cleanup function type
+ */
+export type CleanupFunction = () => void
+
+/**
+ * Reactive context for tracking dependencies
+ */
+export interface ReactiveContext {
+  readonly computation: Computation | null
+  readonly batch: boolean
+}
+
+/**
+ * Scheduler interface for managing updates
+ */
+export interface Scheduler {
+  schedule(fn: () => void): void
+  flush(): void
+}