@ydant/reactive 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 cwd-k2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# @ydant/reactive
+
+Signal-based reactivity system for Ydant.
+
+## Installation
+
+```bash
+pnpm add @ydant/reactive
+```
+
+## Usage
+
+### Basic Signals
+
+```typescript
+import { signal, computed, effect } from "@ydant/reactive";
+
+// Create a signal
+const count = signal(0);
+
+// Read value
+console.log(count()); // 0
+
+// Update value
+count.set(5);
+count.update((n) => n + 1);
+
+// Create computed value
+const doubled = computed(() => count() * 2);
+console.log(doubled()); // 12
+
+// Run effects
+const dispose = effect(() => {
+  console.log(`Count: ${count()}`);
+});
+
+count.set(10); // Logs: "Count: 10"
+dispose(); // Stop tracking
+```
+
+### With DOM (reactive primitive)
+
+```typescript
+import { div, button, text, on, type Component } from "@ydant/core";
+import { mount } from "@ydant/dom";
+import { signal, reactive, createReactivePlugin } from "@ydant/reactive";
+
+const count = signal(0);
+
+const Counter: Component = () =>
+  div(function* () {
+    // Auto-update on signal change
+    yield* reactive(() => [text(`Count: ${count()}`)]);
+
+    yield* button(() => [on("click", () => count.update((n) => n + 1)), text("Increment")]);
+  });
+
+mount(Counter, document.getElementById("app")!, {
+  plugins: [createReactivePlugin()],
+});
+```
+
+## API
+
+### signal
+
+```typescript
+function signal<T>(initialValue: T): Signal<T>;
+
+interface Signal<T> {
+  (): T; // Read
+  set(value: T): void; // Write
+  update(fn: (v: T) => T): void; // Update with function
+}
+```
+
+### computed
+
+```typescript
+function computed<T>(fn: () => T): Computed<T>;
+
+interface Computed<T> {
+  (): T; // Read (automatically tracks dependencies)
+}
+```
+
+### effect
+
+```typescript
+function effect(fn: () => void | (() => void)): () => void;
+```
+
+Runs `fn` immediately and re-runs when dependencies change. Returns a dispose function. If `fn` returns a cleanup function, it will be called before each re-run and on dispose.
+
+### reactive
+
+```typescript
+function reactive(fn: () => Render): Reactive;
+```
+
+Creates a reactive block that auto-updates DOM when signals change. Use with `yield*` in generator syntax.
+
+### batch
+
+```typescript
+function batch(fn: () => void): void;
+```
+
+Batches multiple signal updates to trigger effects only once:
+
+```typescript
+const firstName = signal("John");
+const lastName = signal("Doe");
+
+effect(() => {
+  console.log(`${firstName()} ${lastName()}`);
+});
+// Logs: "John Doe"
+
+batch(() => {
+  firstName.set("Jane");
+  lastName.set("Smith");
+});
+// Logs only once: "Jane Smith"
+```
+
+Without `batch`, each `set()` call would trigger the effect immediately. With `batch`, updates are collected and the effect runs only once at the end with the final values.
+
+### createReactivePlugin
+
+```typescript
+function createReactivePlugin(): DomPlugin;
+```
+
+Creates a DOM plugin that handles `reactive` blocks. Must be passed to `mount()`.
+
+## Module Structure
+
+- `types.ts` - Subscriber type
+- `signal.ts` - Signal implementation
+- `computed.ts` - Computed implementation
+- `effect.ts` - Effect implementation
+- `batch.ts` - Batch functionality
+- `reactive.ts` - reactive primitive
+- `plugin.ts` - DOM plugin
+- `tracking.ts` - Subscription tracking (internal)

package/dist/batch.d.ts

@@ -0,0 +1,43 @@
+/**
+ * バッチ更新: 複数の Signal 更新を一度にまとめて通知する
+ *
+ * NOTE: batchDepth と pendingEffects はモジュールレベルのグローバル状態。
+ * テスト間での分離には __resetForTesting__() を使用。
+ *
+ * @example
+ * ```typescript
+ * const firstName = signal("John");
+ * const lastName = signal("Doe");
+ *
+ * effect(() => {
+ *   console.log(`${firstName()} ${lastName()}`);
+ * });
+ * // 出力: "John Doe"
+ *
+ * batch(() => {
+ *   firstName.set("Jane");
+ *   lastName.set("Smith");
+ * });
+ * // 出力: "Jane Smith" (1回だけ)
+ * ```
+ */
+/**
+ * テスト用: 状態をリセット
+ * @internal
+ */
+export declare function __resetForTesting__(): void;
+/**
+ * バッチ更新を実行する
+ *
+ * バッチ内で行われた複数の Signal 更新は、バッチ終了時に
+ * まとめて1回だけ effect を実行する。
+ *
+ * @param fn - バッチ内で実行する関数
+ */
+export declare function batch(fn: () => void): void;
+/**
+ * 内部用: バッチ中かどうかを確認し、effect を遅延実行キューに追加
+ *
+ * @returns バッチ中で遅延された場合は true
+ */
+export declare function scheduleEffect(effect: () => void): boolean;

package/dist/computed.d.ts

@@ -0,0 +1,23 @@
+import { Readable } from './types';
+/** Computed インターフェース（読み取り専用） */
+export interface Computed<T> extends Readable<T> {
+}
+/**
+ * Computed を作成する
+ *
+ * @param fn - 派生値を計算する関数
+ * @returns Computed オブジェクト
+ *
+ * @example
+ * ```typescript
+ * const firstName = signal("John");
+ * const lastName = signal("Doe");
+ * const fullName = computed(() => `${firstName()} ${lastName()}`);
+ *
+ * console.log(fullName());  // "John Doe"
+ *
+ * firstName.set("Jane");
+ * console.log(fullName());  // "Jane Doe"
+ * ```
+ */
+export declare function computed<T>(fn: () => T): Computed<T>;

package/dist/effect.d.ts

@@ -0,0 +1,29 @@
+import { CleanupFn } from '@ydant/core';
+/**
+ * Effect を作成する
+ *
+ * @param fn - 副作用を実行する関数。クリーンアップ関数を返すことができる。
+ * @returns Effect を破棄するための関数
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0);
+ *
+ * // 基本的な使い方
+ * const dispose = effect(() => {
+ *   console.log(`Count changed to: ${count()}`);
+ * });
+ *
+ * // クリーンアップ付き
+ * const disposeTimer = effect(() => {
+ *   const value = count();
+ *   const timer = setTimeout(() => {
+ *     console.log(`Delayed log: ${value}`);
+ *   }, 1000);
+ *
+ *   // クリーンアップ: 次の実行前、または dispose 時に呼ばれる
+ *   return () => clearTimeout(timer);
+ * });
+ * ```
+ */
+export declare function effect(fn: () => void | CleanupFn): CleanupFn;

package/dist/global.d.ts

@@ -0,0 +1,6 @@
+import { Reactive } from './reactive';
+declare module "@ydant/core" {
+  interface PluginChildExtensions {
+    Reactive: Reactive;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference path="./global.d.ts" />
+export type { Subscriber, Readable } from './types';
+export type { Signal } from './signal';
+export type { Computed } from './computed';
+export type { Reactive } from './reactive';
+export { signal } from './signal';
+export { computed } from './computed';
+export { effect } from './effect';
+export { batch, scheduleEffect } from './batch';
+export { reactive } from './reactive';
+export { createReactivePlugin } from './plugin';

package/dist/index.es.js

@@ -0,0 +1,121 @@
+import { isTagged as d } from "@ydant/core";
+let u = null;
+function l() {
+  return u;
+}
+function a(r, e) {
+  const t = u;
+  u = r;
+  try {
+    return e();
+  } finally {
+    u = t;
+  }
+}
+let i = 0, f = /* @__PURE__ */ new Set();
+function h(r) {
+  i++;
+  try {
+    r();
+  } finally {
+    if (i--, i === 0) {
+      const e = f;
+      f = /* @__PURE__ */ new Set();
+      for (const t of e)
+        t();
+    }
+  }
+}
+function b(r) {
+  return i > 0 ? (f.add(r), !0) : !1;
+}
+function y(r) {
+  let e = r;
+  const t = /* @__PURE__ */ new Set(), c = (() => {
+    const n = l();
+    return n && t.add(n), e;
+  });
+  return c.set = (n) => {
+    if (!Object.is(e, n)) {
+      e = n;
+      for (const s of t)
+        b(s) || s();
+    }
+  }, c.update = (n) => {
+    c.set(n(e));
+  }, c.peek = () => e, c;
+}
+function v(r) {
+  let e, t = !0;
+  const c = /* @__PURE__ */ new Set(), n = () => {
+    t = !0;
+    for (const o of c)
+      o();
+  }, s = (() => {
+    const o = l();
+    return o && c.add(o), t && (e = a(n, r), t = !1), e;
+  });
+  return s.peek = () => (t && (e = r(), t = !1), e), s;
+}
+function m(r) {
+  let e, t = !1;
+  const c = () => {
+    if (!t) {
+      if (e) {
+        try {
+          e();
+        } catch (n) {
+          console.error("[ydant] Effect cleanup threw an error:", n);
+        }
+        e = void 0;
+      }
+      e = a(c, r);
+    }
+  };
+  return c(), () => {
+    if (!t && (t = !0, e)) {
+      try {
+        e();
+      } catch (n) {
+        console.error("[ydant] Effect cleanup threw an error:", n);
+      }
+      e = void 0;
+    }
+  };
+}
+function* S(r) {
+  yield { type: "reactive", builder: r };
+}
+function g() {
+  return {
+    name: "reactive",
+    types: ["reactive"],
+    dependencies: ["base"],
+    process(r, e) {
+      if (!d(r, "reactive")) return {};
+      const t = r.builder, c = document.createElement("span");
+      c.setAttribute("data-reactive", ""), e.appendChild(c);
+      let n = [];
+      const s = () => {
+        for (const o of n)
+          o();
+        n = [], c.innerHTML = "", a(s, () => {
+          e.processChildren(t, { parent: c });
+        });
+      };
+      return s(), e.onUnmount(() => {
+        for (const o of n)
+          o();
+      }), {};
+    }
+  };
+}
+export {
+  h as batch,
+  v as computed,
+  g as createReactivePlugin,
+  m as effect,
+  S as reactive,
+  b as scheduleEffect,
+  y as signal
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(i,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("@ydant/core")):typeof define=="function"&&define.amd?define(["exports","@ydant/core"],f):(i=typeof globalThis<"u"?globalThis:i||self,f(i.YdantReactive={},i.YdantCore))})(this,(function(i,f){"use strict";let s=null;function b(){return s}function d(n,e){const t=s;s=n;try{return e()}finally{s=t}}let a=0,l=new Set;function h(n){a++;try{n()}finally{if(a--,a===0){const e=l;l=new Set;for(const t of e)t()}}}function p(n){return a>0?(l.add(n),!0):!1}function y(n){let e=n;const t=new Set,c=(()=>{const r=b();return r&&t.add(r),e});return c.set=r=>{if(!Object.is(e,r)){e=r;for(const o of t)p(o)||o()}},c.update=r=>{c.set(r(e))},c.peek=()=>e,c}function v(n){let e,t=!0;const c=new Set,r=()=>{t=!0;for(const u of c)u()},o=(()=>{const u=b();return u&&c.add(u),t&&(e=d(r,n),t=!1),e});return o.peek=()=>(t&&(e=n(),t=!1),e),o}function m(n){let e,t=!1;const c=()=>{if(!t){if(e){try{e()}catch(r){console.error("[ydant] Effect cleanup threw an error:",r)}e=void 0}e=d(c,n)}};return c(),()=>{if(!t&&(t=!0,e)){try{e()}catch(r){console.error("[ydant] Effect cleanup threw an error:",r)}e=void 0}}}function*g(n){yield{type:"reactive",builder:n}}function S(){return{name:"reactive",types:["reactive"],dependencies:["base"],process(n,e){if(!f.isTagged(n,"reactive"))return{};const t=n.builder,c=document.createElement("span");c.setAttribute("data-reactive",""),e.appendChild(c);let r=[];const o=()=>{for(const u of r)u();r=[],c.innerHTML="",d(o,()=>{e.processChildren(t,{parent:c})})};return o(),e.onUnmount(()=>{for(const u of r)u()}),{}}}}i.batch=h,i.computed=v,i.createReactivePlugin=S,i.effect=m,i.reactive=g,i.scheduleEffect=p,i.signal=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/dist/plugin.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from '@ydant/core';
+/**
+ * Reactive プラグインを作成する
+ */
+export declare function createReactivePlugin(): Plugin;

package/dist/reactive.d.ts

@@ -0,0 +1,21 @@
+import { Tagged, Builder, Primitive } from '@ydant/core';
+/** リアクティブブロック - Signal の変更を追跡して自動更新 */
+export type Reactive = Tagged<"reactive", {
+    builder: Builder;
+}>;
+/**
+ * Signal を追跡して自動的に再レンダリングするリアクティブブロックを作成
+ *
+ * @param builder - 子要素を生成する関数
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0);
+ * const doubled = computed(() => count() * 2);
+ *
+ * yield* reactive(() => [
+ *   text(`Count: ${count()}, Doubled: ${doubled()}`),
+ * ]);
+ * ```
+ */
+export declare function reactive(builder: Builder): Primitive<Reactive>;

package/dist/signal.d.ts

@@ -0,0 +1,30 @@
+import { Readable } from './types';
+/** Signal インターフェース */
+export interface Signal<T> extends Readable<T> {
+    /** 値を設定する */
+    set(value: T): void;
+    /** 関数で値を更新する */
+    update(fn: (prev: T) => T): void;
+}
+/**
+ * Signal を作成する
+ *
+ * @param initialValue - 初期値
+ * @returns Signal オブジェクト
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0);
+ *
+ * // 読み取り
+ * console.log(count());  // 0
+ *
+ * // 書き込み
+ * count.set(5);
+ * count.update(n => n * 2);  // 10
+ *
+ * // 購読なしで読み取り
+ * console.log(count.peek());  // 10
+ * ```
+ */
+export declare function signal<T>(initialValue: T): Signal<T>;

package/dist/tracking.d.ts

@@ -0,0 +1,10 @@
+import { Subscriber } from './types';
+/**
+ * テスト用: 状態をリセット
+ * @internal
+ */
+export declare function __resetForTesting__(): void;
+/** 現在の購読者を取得 */
+export declare function getCurrentSubscriber(): Subscriber | null;
+/** 購読者を設定して関数を実行（終了後に元に戻す） */
+export declare function runWithSubscriber<T>(subscriber: Subscriber, fn: () => T): T;

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Reactive パッケージの型定義
+ */
+/** Signal/Effect の購読者（変更通知を受け取るコールバック） */
+export type Subscriber = () => void;
+/**
+ * 読み取り可能なリアクティブ値の共通インターフェース
+ *
+ * Signal, Computed など、値の読み取りと peek をサポートする型の基底インターフェース。
+ */
+export interface Readable<T> {
+    /** 値を読み取る（依存関係を追跡） */
+    (): T;
+    /** 現在の値を取得（購読なし、依存関係を追跡しない） */
+    peek(): T;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ydant/reactive",
+  "version": "0.1.0",
+  "description": "Reactivity system for Ydant",
+  "keywords": [
+    "reactive",
+    "signal",
+    "state",
+    "ydant"
+  ],
+  "homepage": "https://github.com/cwd-k2/ydant#readme",
+  "bugs": {
+    "url": "https://github.com/cwd-k2/ydant/issues"
+  },
+  "license": "MIT",
+  "author": "cwd-k2",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cwd-k2/ydant.git",
+    "directory": "packages/reactive"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "@ydant/dev": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "@ydant/base": "0.1.0",
+    "@ydant/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}