@usenagi/core 0.2.0 → 0.4.0

package/README.ja.md

@@ -32,9 +32,9 @@ GSAP、Lenis、IntersectionObserver などを `setup()` で初期化し、`useUn
 // counter.ts
 import { create, signal, useWatch, useDomRef } from "@usenagi/core";
 
-const { component } = create();
+const app = create();
 
-component({
+app.component({
   name: "counter",
   setup() {
     const { refs } = useDomRef<{
@@ -71,13 +71,14 @@ npm i @usenagi/core
 ### First component
 
 ```ts
-import { create, defineComponent, signal, useWatch, useDomRef } from "@usenagi/core";
+import { create, defineComponent, propTypes, signal, useWatch, useDomRef } from "@usenagi/core";
 
 const Greeting = defineComponent({
   name: "greeting",
+  props: propTypes<{ name: string }>(),
   setup(el, props) {
     const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
-    const text = signal((props.name as string) ?? "world");
+    const text = signal(props.name ?? "world");
 
     useWatch(text, (v) => {
       refs.message.textContent = `Hello, ${v}!`;
@@ -95,10 +96,10 @@ create().component(Greeting)(document.querySelector("#app")!);
 
 ```ts
 import { create } from "@usenagi/core";
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle } from "@usenagi/core/addons/cue";
 
-const app = create({ scheduler: createScheduler() });
+const app = create().install(schedulerAddon());
 
 // mount when the element enters the viewport
 app.component(HeavyWidget, { when: visible() })(el);
@@ -107,7 +108,7 @@ app.component(HeavyWidget, { when: visible() })(el);
 app.component(Analytics, { when: idle() })(el);
 ```
 
-`when` は `setup()` の前に待機する条件、`priority` は `setup()` を含む mount task の実行タイミングを決める。
+`schedulerAddon()` を使うと、`when` は `setup()` の前に待機する条件、`priority` は `setup()` を含む mount task の実行タイミングを決める。
 
 ### BYO mounter recipe
 
@@ -118,14 +119,21 @@ app.component(Analytics, { when: idle() })(el);
 
 ## API
 
+### Component Definition
+
+| API                    | 説明                                                             |
+| ---------------------- | ---------------------------------------------------------------- |
+| `defineComponent(opts)` | 型安全な `ComponentSetup` 定義ヘルパー                          |
+| `propTypes<T>()`       | コンポーネント props の型マーカー（ランタイムコストゼロ）         |
+
 ### Reactivity
 
-| API                    | 説明                                                                 |
-| ---------------------- | -------------------------------------------------------------------- |
-| `signal(value)`        | `.value` を持つリアクティブな値コンテナを作成する                      |
-| `readonly(signal)`     | 書き込み可能な `signal` の読み取り専用ラッパー                         |
-| `useComputed(fn)`      | `signal` の依存を自動追跡する派生値                                   |
-| `useWatch(target, cb)` | 値変更時に `cb` を呼ぶ。unmount 時に自動で購読解除する                 |
+| API                    | 説明                                                   |
+| ---------------------- | ------------------------------------------------------ |
+| `signal(value)`        | `.value` を持つリアクティブな値コンテナを作成する      |
+| `readonly(signal)`     | 書き込み可能な `signal` の読み取り専用ラッパー         |
+| `useComputed(fn)`      | `signal` の依存を自動追跡する派生値                    |
+| `useWatch(target, cb)` | 値変更時に `cb` を呼ぶ。unmount 時に自動で購読解除する |
 
 ```ts
 const width = signal(10);
@@ -139,10 +147,10 @@ useWatch(area, (v) => {
 
 ### Lifecycle
 
-| API              | 説明                                                   |
-| ---------------- | ------------------------------------------------------ |
-| `useMount(fn)`   | コンポーネントのマウント完了後に1回実行する            |
-| `useUnmount(fn)` | unmount 時に実行する。クリーンアップに使う             |
+| API              | 説明                                        |
+| ---------------- | ------------------------------------------- |
+| `useMount(fn)`   | コンポーネントのマウント完了後に1回実行する |
+| `useUnmount(fn)` | unmount 時に実行する。クリーンアップに使う  |
 
 ```ts
 import gsap from 'gsap';
@@ -157,11 +165,11 @@ setup(el) {
 
 ルート要素には **`setup(el)`** を、**`[data-ref]`** の子要素には **`useDomRef()`** を使う。
 
-| API                            | 説明                                                       |
-| ------------------------------ | ---------------------------------------------------------- |
-| `useDomRef<T>()`               | `[data-ref]` 要素への型付きアクセス                        |
-| `useEvent(el, event, handler)` | イベントリスナーを追加する。unmount 時に自動で除去する     |
-| `useSlot()`                    | 子コンポーネントをマウントする。親の unmount に連動する    |
+| API                            | 説明                                                    |
+| ------------------------------ | ------------------------------------------------------- |
+| `useDomRef<T>()`               | `[data-ref]` 要素への型付きアクセス                     |
+| `useEvent(el, event, handler)` | イベントリスナーを追加する。unmount 時に自動で除去する  |
+| `useSlot()`                    | 子コンポーネントをマウントする。親の unmount に連動する |
 
 ### Parent / child
 
@@ -171,39 +179,59 @@ setup(el) {
 
 ### Observers
 
-| API                               | 説明                                                              |
-| --------------------------------- | ----------------------------------------------------------------- |
-| `useIntersectionWatch(cb, opts?)` | IntersectionObserver のラッパー。unmount 時に自動で切断する         |
-| `useMediaQuery(query)`            | `matchMedia` の結果を `ReadonlySignal<boolean>` で返す            |
+| API                               | 説明                                                        |
+| --------------------------------- | ----------------------------------------------------------- |
+| `useIntersectionWatch(cb, opts?)` | IntersectionObserver のラッパー。unmount 時に自動で切断する |
+| `useMediaQuery(query, cb)` | query 一致時に callback を実行し、`matchesQuery` を `ReadonlySignal<boolean>` で返す |
 
 ### Addons
 
 ```ts
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { create, defineAddon } from "@usenagi/core";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+
+const app = create().install(schedulerAddon(), myAddon());
+```
+
+| API | 説明 |
+| --- | --- |
+| `defineAddon({ name, install(ctx) })` | addon を定義する（`ctx` は `AddonContext`） |
+| `app.install(...addons)` | app に addon を登録する（複数可） |
+| `ctx.addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` | mount / unmount / ComponentSetup の middleware を追加する |
+| `ctx.installedAddons` | この app に install 済みの addon 名 |
+
+`addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` は **後から install した addon ほど外側**に適用される（`install(a, b)` なら実行順は `b → a → コア`）。
+
+遅延 mount には `schedulerAddon()` が必要。`when` や `priority` を使う場合も同様で、これらの mount option は scheduler addon が解釈する。addon の状態（scheduler / pending）は **各 app の `install` ごと**に作られる。
+
+#### Scheduler + cue
+
+```ts
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
 ```
 
-| API                      | 説明                                                                                  |
-| ------------------------ | ------------------------------------------------------------------------------------- |
-| `createScheduler(opts?)` | `schedule(task, { priority, signal })` を実装した Scheduler を返す                      |
-| `visible(opts?)`         | 要素が viewport に入ったときに解決する Cue                                            |
-| `idle(timeout?)`         | `requestIdleCallback` で解決する Cue                                                  |
-| `interaction(events?)`   | 最初のユーザー操作で解決する Cue                                                      |
-| `media(query)`           | media query が一致したときに解決する Cue                                              |
+| API | 説明 |
+| --- | --- |
+| `schedulerAddon(opts?)` | 遅延 mount 用 addon |
+| `visible(opts?)` | 要素が viewport に入ったときに解決する Cue |
+| `idle(timeout?)` | `requestIdleCallback` で解決する Cue |
+| `interaction(events?)` | 最初のユーザー操作で解決する Cue |
+| `media(query)` | media query が一致したときに解決する Cue |
 
 ---
 
 ## Comparison
 
-|                         | **nagi**    | Alpine.js | Stimulus | petite-vue |
-| ----------------------- | ----------- | --------- | -------- | ---------- |
-| Inline JS in HTML       | ✗           | ◯         | ✗        | ◯          |
-| Composition-style setup | ◯           | △         | ✗        | ◯          |
-| BYO mounter             | ◯           | △         | △        | △          |
-| Async mount cue         | ◯           | ✗         | ✗        | ✗          |
-| Lifecycle cleanup       | ◯           | △         | ◯        | △          |
-| `useComputed` (derived signals) | ◯           | ◯         | ✗        | ◯          |
-| Core gzip               | ~2.5 kB     | ~16 kB    | ~8 kB    | ~6 kB      |
+|                            | **nagi** | Alpine.js | Stimulus | petite-vue |
+| -------------------------- | -------- | --------- | -------- | ---------- |
+| Inline JS in HTML          | ✗        | ◯         | ✗        | ◯          |
+| Composition-style setup    | ◯        | △         | ✗        | ◯          |
+| BYO mounter                | ◯        | △         | △        | △          |
+| Async mount cue            | ◯        | ✗         | ✗        | ✗          |
+| Lifecycle cleanup          | ◯        | △         | ◯        | △          |
+| computed (derived signals) | ◯        | ◯         | ✗        | ◯          |
+| Core gzip                  | ~2.5 kB  | ~16 kB    | ~8 kB    | ~6 kB      |
 
 (◯ = 組み込み、△ = 利用側の実装・規約で対応可能、✗ = 主な機能ではない)
 
@@ -233,13 +261,13 @@ import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
 
 ## Examples
 
-| Example                                               | 説明                                                              |
-| ----------------------------------------------------- | ----------------------------------------------------------------- |
-| [basic-counter](./examples/basic-counter/)            | 最小の `signal` + `useWatch` 例                                   |
-| [computed](./examples/computed/)                      | `useComputed` による派生値（width × height = area）               |
-| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`                       |
-| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Lenis + `useComputed` によるスクロール進捗連動                    |
-| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` スキャン + manifest + cue                      |
+| Example                                               | 説明                                                |
+| ----------------------------------------------------- | --------------------------------------------------- |
+| [basic-counter](./examples/basic-counter/)            | 最小の `signal` + `useWatch` 例                     |
+| [computed](./examples/computed/)                      | `useComputed` による派生値（width × height = area） |
+| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`         |
+| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Lenis + `useComputed` によるスクロール進捗連動      |
+| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` スキャン + manifest + cue        |
 
 ---
 

package/README.md

@@ -32,9 +32,9 @@ You are free to implement `[data-component]` scanning, manifests, lazy imports,
 // counter.ts
 import { create, signal, useWatch, useDomRef } from "@usenagi/core";
 
-const { component } = create();
+const app = create();
 
-component({
+app.component({
   name: "counter",
   setup() {
     const { refs } = useDomRef<{
@@ -71,13 +71,14 @@ npm i @usenagi/core
 ### First component
 
 ```ts
-import { create, defineComponent, signal, useWatch, useDomRef } from "@usenagi/core";
+import { create, defineComponent, propTypes, signal, useWatch, useDomRef } from "@usenagi/core";
 
 const Greeting = defineComponent({
   name: "greeting",
+  props: propTypes<{ name: string }>(),
   setup(el, props) {
     const { refs } = useDomRef<{ message: HTMLParagraphElement }>();
-    const text = signal((props.name as string) ?? "world");
+    const text = signal(props.name ?? "world");
 
     useWatch(text, (v) => {
       refs.message.textContent = `Hello, ${v}!`;
@@ -95,10 +96,10 @@ If delayed mounting is required, add the scheduler / cue addons.
 
 ```ts
 import { create } from "@usenagi/core";
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle } from "@usenagi/core/addons/cue";
 
-const app = create({ scheduler: createScheduler() });
+const app = create().install(schedulerAddon());
 
 // mount when the element enters the viewport
 app.component(HeavyWidget, { when: visible() })(el);
@@ -107,7 +108,7 @@ app.component(HeavyWidget, { when: visible() })(el);
 app.component(Analytics, { when: idle() })(el);
 ```
 
-`when` is a condition to wait for before `setup()`, and `priority` determines the execution timing of the mount task that includes `setup()`.
+With `schedulerAddon()`, `when` is a condition to wait for before `setup()`, and `priority` determines the execution timing of the mount task that includes `setup()`.
 
 ### BYO mounter recipe
 
@@ -118,12 +119,19 @@ An example of automatic mounting by combining `[data-component]` scanning, manif
 
 ## API
 
+### Component Definition
+
+| API                    | Description                                                                 |
+| ---------------------- | --------------------------------------------------------------------------- |
+| `defineComponent(opts)` | Type-safe helper to define a `ComponentSetup` object                       |
+| `propTypes<T>()`       | Type-only marker for declaring component props shape (zero runtime cost)    |
+
 ### Reactivity
 
-| API                    | Description                                                    |
-| ---------------------- | -------------------------------------------------------------- |
-| `signal(value)`        | Creates a reactive value container (`.value`)                    |
-| `readonly(signal)`     | Read-only wrapper around a writable `signal`                    |
+| API                    | Description                                                       |
+| ---------------------- | ----------------------------------------------------------------- |
+| `signal(value)`        | Creates a reactive value container (`.value`)                     |
+| `readonly(signal)`     | Read-only wrapper around a writable `signal`                      |
 | `useComputed(fn)`      | Derived value that auto-tracks `signal` dependencies              |
 | `useWatch(target, cb)` | Calls `cb` on value change; automatically unsubscribes on unmount |
 
@@ -139,10 +147,10 @@ useWatch(area, (v) => {
 
 ### Lifecycle
 
-| API              | Description                               |
-| ---------------- | ----------------------------------------- |
-| `useMount(fn)`   | Runs once after the component mounts      |
-| `useUnmount(fn)` | Runs on unmount; use for cleanup          |
+| API              | Description                          |
+| ---------------- | ------------------------------------ |
+| `useMount(fn)`   | Runs once after the component mounts |
+| `useUnmount(fn)` | Runs on unmount; use for cleanup     |
 
 ```ts
 import gsap from 'gsap';
@@ -157,11 +165,11 @@ setup(el) {
 
 Use **`setup(el)`** for the root element and **`useDomRef()`** for `[data-ref]` descendants.
 
-| API                            | Description                                                  |
-| ------------------------------ | ------------------------------------------------------------ |
-| `useDomRef<T>()`               | Typed access to `[data-ref]` elements                        |
-| `useEvent(el, event, handler)` | Adds an event listener; automatically removed on unmount     |
-| `useSlot()`                    | Mounts child components; tied to the parent's unmount        |
+| API                            | Description                                              |
+| ------------------------------ | -------------------------------------------------------- |
+| `useDomRef<T>()`               | Typed access to `[data-ref]` elements                    |
+| `useEvent(el, event, handler)` | Adds an event listener; automatically removed on unmount |
+| `useSlot()`                    | Mounts child components; tied to the parent's unmount    |
 
 ### Parent / child
 
@@ -174,36 +182,56 @@ You can mount child components with `useSlot()`. You can pass values from parent
 | API                               | Description                                                         |
 | --------------------------------- | ------------------------------------------------------------------- |
 | `useIntersectionWatch(cb, opts?)` | IntersectionObserver wrapper; automatically disconnected on unmount |
-| `useMediaQuery(query)`            | Returns `matchMedia` result as a `ReadonlySignal<boolean>`           |
+| `useMediaQuery(query, cb)` | Runs `callback` when the query matches; returns `matchesQuery` as `ReadonlySignal<boolean>` |
 
 ### Addons
 
 ```ts
-import { createScheduler } from "@usenagi/core/addons/scheduler";
+import { create, defineAddon } from "@usenagi/core";
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
+
+const app = create().install(schedulerAddon(), myAddon());
+```
+
+| API | Description |
+| --- | --- |
+| `defineAddon({ name, install(ctx) })` | Defines an addon (`ctx` is `AddonContext`) |
+| `app.install(...addons)` | Registers one or more addons on the app |
+| `ctx.addMountMiddleware` / `addUnmountMiddleware` / `addComponentMiddleware` | Add mount / unmount / ComponentSetup middleware |
+| `ctx.installedAddons` | Addon names already installed on this app |
+
+`addMountMiddleware`, `addUnmountMiddleware`, and `addComponentMiddleware` apply **outermost for addons installed later** (`install(a, b)` runs as `b → a → core`).
+
+Deferred mounting requires `schedulerAddon()`. The same applies when using `when` or `priority`; these mount options are interpreted by the scheduler addon. Addon state (scheduler / pending) is created **per app `install`**, not per addon instance.
+
+#### Scheduler + cue
+
+```ts
+import { schedulerAddon } from "@usenagi/core/addons/scheduler";
 import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
 ```
 
-| API                      | Description                                                           |
-| ------------------------ | --------------------------------------------------------------------- |
-| `createScheduler(opts?)` | Returns a Scheduler implementing `schedule(task, { priority, signal })` |
-| `visible(opts?)`         | A Cue that resolves when the element enters the viewport              |
-| `idle(timeout?)`         | A Cue that resolves via `requestIdleCallback`                         |
-| `interaction(events?)`   | A Cue that resolves on the first user interaction                     |
-| `media(query)`           | A Cue that resolves when the media query matches                      |
+| API | Description |
+| --- | --- |
+| `schedulerAddon(opts?)` | Addon for deferred mount |
+| `visible(opts?)` | A Cue that resolves when the element enters the viewport |
+| `idle(timeout?)` | A Cue that resolves via `requestIdleCallback` |
+| `interaction(events?)` | A Cue that resolves on the first user interaction |
+| `media(query)` | A Cue that resolves when the media query matches |
 
 ---
 
 ## Comparison
 
-|                         | **nagi**    | Alpine.js | Stimulus | petite-vue |
-| ----------------------- | ----------- | --------- | -------- | ---------- |
-| Inline JS in HTML       | ✗           | ◯         | ✗        | ◯          |
-| Composition-style setup | ◯           | △         | ✗        | ◯          |
-| BYO mounter             | ◯           | △         | △        | △          |
-| Async mount cue         | ◯           | ✗         | ✗        | ✗          |
-| Lifecycle cleanup       | ◯           | △         | ◯        | △          |
-| `useComputed` (derived signals) | ◯           | ◯         | ✗        | ◯          |
-| Core gzip               | ~2.5 kB     | ~16 kB    | ~8 kB    | ~6 kB      |
+|                            | **nagi** | Alpine.js | Stimulus | petite-vue |
+| -------------------------- | -------- | --------- | -------- | ---------- |
+| Inline JS in HTML          | ✗        | ◯         | ✗        | ◯          |
+| Composition-style setup    | ◯        | △         | ✗        | ◯          |
+| BYO mounter                | ◯        | △         | △        | △          |
+| Async mount cue            | ◯        | ✗         | ✗        | ✗          |
+| Lifecycle cleanup          | ◯        | △         | ◯        | △          |
+| computed (derived signals) | ◯        | ◯         | ✗        | ◯          |
+| Core gzip                  | ~2.5 kB  | ~16 kB    | ~8 kB    | ~6 kB      |
 
 (◯ = built-in, △ = handled via userland/convention, ✗ = not a primary feature)
 
@@ -233,13 +261,13 @@ import { visible, idle, interaction, media } from "@usenagi/core/addons/cue";
 
 ## Examples
 
-| Example                                               | Description                                            |
-| ----------------------------------------------------- | ------------------------------------------------------ |
-| [basic-counter](./examples/basic-counter/)            | Minimal `signal` + `useWatch` example                          |
-| [computed](./examples/computed/)                     | Derived value with `useComputed` (width × height = area)        |
-| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`            |
-| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Scroll-progress animation with Lenis + `useComputed`          |
-| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` scanning + manifest + cue           |
+| Example                                               | Description                                              |
+| ----------------------------------------------------- | -------------------------------------------------------- |
+| [basic-counter](./examples/basic-counter/)            | Minimal `signal` + `useWatch` example                    |
+| [computed](./examples/computed/)                      | Derived value with `useComputed` (width × height = area) |
+| [parent-child](./examples/parent-child/)              | `createContext` + `withContext` + `useSlot`              |
+| [lenis-scroll-scene](./examples/lenis-scroll-scene/)  | Scroll-progress animation with Lenis + `useComputed`     |
+| [byo-mounter recipe](./examples/recipes/byo-mounter/) | `[data-component]` scanning + manifest + cue             |
 
 ---
 

package/dist/addons/scheduler.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function t(t,r,i){if(i?.aborted)return;let{scheduler:a}=globalThis;if(typeof a?.postTask==`function`){a.postTask(t,{priority:r,signal:i}).catch(t=>{e(t)||queueMicrotask(()=>{throw t})});return}n(t,r,i)}function n(e,t,n){function r(){n?.aborted||e()}function i(e,t){let r=e();n?.addEventListener(`abort`,()=>t(r),{once:!0})}switch(t){case`user-blocking`:queueMicrotask(r);break;case`user-visible`:i(()=>requestAnimationFrame(r),cancelAnimationFrame);break;case`background`:typeof requestIdleCallback==`function`?i(()=>requestIdleCallback(r),cancelIdleCallback):i(()=>setTimeout(r,0),clearTimeout);break}}function r(e={}){let n=e.priority??`user-visible`;return{schedule(e,r={}){t(e,r.priority??n,r.signal)}}}exports.createScheduler=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){return e}function t(){let e=new Map;return{add(t){let n=e.get(t);n&&n.abort();let r=new AbortController;return e.set(t,r),{signal:r.signal,complete(){return e.get(t)!==r||r.signal.aborted?!1:(e.delete(t),!0)},abort(){e.get(t)===r&&(r.abort(),e.delete(t))}}},abort(t){let n=e.get(t);n&&(n.abort(),e.delete(t))}}}function n(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function r(e,t,r){if(r?.aborted)return;let{scheduler:a}=globalThis;if(typeof a?.postTask==`function`){a.postTask(e,{priority:t,signal:r}).catch(e=>{n(e)||queueMicrotask(()=>{throw e})});return}i(e,t,r)}function i(e,t,n){function r(){n?.aborted||e()}function i(e,t){let r=e();n?.addEventListener(`abort`,()=>t(r),{once:!0})}switch(t){case`user-blocking`:queueMicrotask(r);break;case`user-visible`:i(()=>requestAnimationFrame(r),cancelAnimationFrame);break;case`background`:typeof requestIdleCallback==`function`?i(()=>requestIdleCallback(r),cancelIdleCallback):i(()=>setTimeout(r,0),clearTimeout);break}}function a(e={}){let t=e.priority??`user-visible`;return{schedule(e,n={}){r(e,n.priority??t,n.signal)}}}function o(e){return(e instanceof DOMException||e instanceof Error)&&e.name===`AbortError`}function s(n){return e({name:`@usenagi/scheduler`,install(e){let r=a(n),i=t();e.addMountMiddleware((e,t,n)=>(t,a)=>{let s=i.add(t),c=()=>{r.schedule(()=>{s.complete()&&e(t,a)},{priority:n.priority,signal:s.signal})},{when:l}=n;l?l(t,s.signal).then(()=>{s.signal.aborted||c()},e=>{o(e)||(s.abort(),queueMicrotask(()=>{throw e}))}):c()}),e.addUnmountMiddleware(e=>t=>{t.forEach(i.abort),e(t)})}})}exports.schedulerAddon=s;

package/dist/addons/scheduler.es.js

@@ -1,26 +1,54 @@
-//#region lib/utils/isAbortError.ts
+//#region lib/core/addon.ts
 function e(e) {
-	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
+	return e;
+}
+//#endregion
+//#region lib/addons/scheduler/_internal/pending.ts
+function t() {
+	let e = /* @__PURE__ */ new Map();
+	return {
+		add(t) {
+			let n = e.get(t);
+			n && n.abort();
+			let r = new AbortController();
+			return e.set(t, r), {
+				signal: r.signal,
+				complete() {
+					return e.get(t) !== r || r.signal.aborted ? !1 : (e.delete(t), !0);
+				},
+				abort() {
+					e.get(t) === r && (r.abort(), e.delete(t));
+				}
+			};
+		},
+		abort(t) {
+			let n = e.get(t);
+			n && (n.abort(), e.delete(t));
+		}
+	};
 }
 //#endregion
-//#region lib/addons/scheduler/task.ts
-function t(t, r, i) {
-	if (i?.aborted) return;
+//#region lib/addons/scheduler/_internal/schedule.ts
+function n(e) {
+	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
+}
+function r(e, t, r) {
+	if (r?.aborted) return;
 	let { scheduler: a } = globalThis;
 	if (typeof a?.postTask == "function") {
-		a.postTask(t, {
-			priority: r,
-			signal: i
-		}).catch((t) => {
-			e(t) || queueMicrotask(() => {
-				throw t;
+		a.postTask(e, {
+			priority: t,
+			signal: r
+		}).catch((e) => {
+			n(e) || queueMicrotask(() => {
+				throw e;
 			});
 		});
 		return;
 	}
-	n(t, r, i);
+	i(e, t, r);
 }
-function n(e, t, n) {
+function i(e, t, n) {
 	function r() {
 		n?.aborted || e();
 	}
@@ -40,13 +68,43 @@ function n(e, t, n) {
 			break;
 	}
 }
+function a(e = {}) {
+	let t = e.priority ?? "user-visible";
+	return { schedule(e, n = {}) {
+		r(e, n.priority ?? t, n.signal);
+	} };
+}
 //#endregion
 //#region lib/addons/scheduler/index.ts
-function r(e = {}) {
-	let n = e.priority ?? "user-visible";
-	return { schedule(e, r = {}) {
-		t(e, r.priority ?? n, r.signal);
-	} };
+function o(e) {
+	return (e instanceof DOMException || e instanceof Error) && e.name === "AbortError";
+}
+function s(n) {
+	return e({
+		name: "@usenagi/scheduler",
+		install(e) {
+			let r = a(n), i = t();
+			e.addMountMiddleware((e, t, n) => (t, a) => {
+				let s = i.add(t), c = () => {
+					r.schedule(() => {
+						s.complete() && e(t, a);
+					}, {
+						priority: n.priority,
+						signal: s.signal
+					});
+				}, { when: l } = n;
+				l ? l(t, s.signal).then(() => {
+					s.signal.aborted || c();
+				}, (e) => {
+					o(e) || (s.abort(), queueMicrotask(() => {
+						throw e;
+					}));
+				}) : c();
+			}), e.addUnmountMiddleware((e) => (t) => {
+				t.forEach(i.abort), e(t);
+			});
+		}
+	});
 }
 //#endregion
-export { r as createScheduler };
+export { s as schedulerAddon };