jrx 0.2.1 → 0.3.0-alpha.1

package/README.md

@@ -1,6 +1,12 @@
 # jrx
 
-A lightweight TypeScript library for managing side effects, subscriptions, and animations with automatic cleanup. Built on top of [jdisposer](https://github.com/tranvansang/jdisposer) for safe resource management.
+A lightweight TypeScript library for managing side effects, subscriptions, and animations with automatic cleanup using the [Explicit Resource Management](https://github.com/tc39/proposal-explicit-resource-management) API.
+
+## Prerequisites
+
+This library requires the [Explicit Resource Management](https://github.com/tc39/proposal-explicit-resource-management) globals (`DisposableStack`, `AsyncDisposableStack`, `Symbol.dispose`, `Symbol.asyncDispose`). If your environment does not support them natively, you must load a polyfill before importing jrx (e.g. [`core-js`](https://github.com/nicolo-ribaudo/tc39-proposal-explicit-resource-management-polyfill)).
+
+The `using` keyword is **not** required — this library only uses the API objects directly, so no transpiler support for `using` declarations is needed.
 
 ## Installation
 
@@ -11,37 +17,64 @@ npm i jrx
 ## Features
 
 - Automatic cleanup for all effects and subscriptions
-- Type-safe disposer pattern
+- Built on the native `DisposableStack` / `AsyncDisposableStack` API
 - Retry logic with exponential backoff and cancellation
-- Single dependency (jdisposer)
+- Zero dependencies
 - Composable reactive utilities
 - Browser and Node.js compatible
 
 ## API Overview
 
+- [`makeReset()`](#makereset) - Create a resettable `DisposableStack`
+- [`makeAsyncReset()`](#makeasyncreset) - Create a resettable `AsyncDisposableStack`
 - [`makeRenderLoop()`](#makerenderloop) - Render loops with automatic cleanup
-- [`addEvtListener(target, event, handler, option?)`](#addevtlistenertarget-event-handler-option) - Event listeners with cleanup
 - [`addInterval(cb, ms)`](#addintervalcb-ms) - Repeating intervals with cleanup
 - [`addIntervalAsync(cb, ms)`](#addintervalasynccb-ms) - Async intervals with cancellation
 - [`addRequestAnimationFrame(cb)`](#addrequestanimationframecb) - Single animation frame with cleanup
 - [`addRequestAnimationFrameLoop(cb)`](#addrequestanimationframeloopcb) - Animation frame loops
-- [`addSubs(subs, cb, options?)`](#addsubssubs-cb-options) - Multiple subscription management
 - [`addTimeout(cb, ms)`](#addtimeoutcb-ms) - Timeouts with cleanup
 - [`addTransition(cb, durationMs)`](#addtransitioncb-durationms) - Progress-based animations
 - [`computed(fn, getDeps?)`](#computedfn-getdeps) - Memoized computed values
-- [`retry(cb, options?)`](#retrycb-options) - Async retry with exponential backoff
-- [`addRetry(cb, options?)`](#addretrycb-options) - Fire-and-forget retry with disposal
+- [`retry(cb, backoffSec?)`](#retrycb-backoffsec) - Retry with exponential backoff
 
 ## API
 
+### `makeReset()`
+
+Creates a resettable `DisposableStack`. Each call disposes the previous stack and returns a new one.
+
+```typescript
+import {makeReset} from 'jrx'
+
+const reset = makeReset()
+const stack = reset() // Get a fresh DisposableStack
+
+// Add disposables
+stack.use(someDisposable)
+
+// Reset - disposes previous stack, returns new one
+const newStack = reset()
+```
+
+### `makeAsyncReset()`
+
+Async version of `makeReset` using `AsyncDisposableStack`.
+
+```typescript
+import {makeAsyncReset} from 'jrx'
+
+const reset = makeAsyncReset()
+const stack = await reset() // Get a fresh AsyncDisposableStack
+```
+
 ### `makeRenderLoop()`
 
 Creates a render loop with automatic cleanup management.
 
 ```typescript
-import { makeRenderLoop } from 'jrx'
+import {makeRenderLoop} from 'jrx'
 
-const { loop, setLoop } = makeRenderLoop()
+const {loop, setLoop} = makeRenderLoop()
 
 // Set the loop function
 const dispose = setLoop((time) => {
@@ -60,28 +93,6 @@ requestAnimationFrame(loop)
 dispose()
 ```
 
-### `addEvtListener(target, event, handler, option?)`
-
-Adds an event listener to a target and returns a disposer that removes it. Works with any object that implements `addEventListener`/`removeEventListener` (DOM elements, `window`, `document`, etc.).
-
-```typescript
-import { addEvtListener } from 'jrx'
-
-// Basic usage
-const dispose = addEvtListener(window, 'resize', (e) => {
-  console.log('Window resized', e)
-})
-
-// With options
-const dispose2 = addEvtListener(element, 'click', (e) => {
-  console.log('Clicked', e)
-}, { capture: true })
-
-// Cleanup
-dispose()
-dispose2()
-```
-
 ### `addInterval(cb, ms)`
 
 Creates a repeating interval with cleanup. The callback can optionally return a cleanup function that runs before the next invocation.
@@ -113,13 +124,9 @@ Async version of `addInterval`. Waits for the callback to complete before schedu
 ```typescript
 import { addIntervalAsync } from 'jrx'
 
-const dispose = addIntervalAsync(async (disposer) => {
+const dispose = addIntervalAsync(async () => {
   // Called immediately, then 5000ms after each completion
   await fetchData()
-
-  // Check if disposed during async operation
-  if (disposer.signal.aborted) return
-
   processData()
 }, 5000)
 
@@ -166,35 +173,6 @@ const dispose = addRequestAnimationFrameLoop((now) => {
 dispose()
 ```
 
-### `addSubs(subs, cb, options?)`
-
-Manages multiple subscriptions with a single callback.
-
-```typescript
-import { addSubs } from 'jrx'
-
-const sub1 = (listener) => {
-  eventEmitter.on('event1', listener)
-  return () => eventEmitter.off('event1', listener)
-}
-
-const sub2 = (listener) => {
-  eventEmitter.on('event2', listener)
-  return () => eventEmitter.off('event2', listener)
-}
-
-const dispose = addSubs([sub1, sub2], () => {
-  console.log('Any event fired')
-
-  // Optional: return cleanup function
-  return () => {
-    console.log('Cleanup')
-  }
-}, { now: true }) // Call immediately with now: true
-
-dispose()
-```
-
 ### `addTimeout(cb, ms)`
 
 Creates a timeout with cleanup.
@@ -255,9 +233,9 @@ a = 10
 console.log(value2.value) // Recomputed: 12
 ```
 
-### `retry(cb, options?)`
+### `retry(cb, backoffSec?)`
 
-Retries an async operation with exponential backoff on failure.
+Retries an operation with exponential backoff on failure. Returns `Disposable & Promise<T>`.
 
 **Default backoff:** `[5, 5, 10, 10, 20, 20, 40, 40, 60, -1]` seconds (where `-1` means retry forever with 60s delay)
 
@@ -265,123 +243,61 @@ Retries an async operation with exponential backoff on failure.
 import {retry} from 'jrx'
 
 // Basic usage - retries with default backoff
-const result = await retry(async (disposer, { resetBackoff }) => {
-  const response = await fetch('/api/data')
-  if (!response.ok) throw new Error('Failed to fetch')
-  return response.json()
+const result = await retry(({resetBackoff}) => {
+  const promise = fetch('/api/data').then((r) => r.json())
+  return Object.assign(promise, {[Symbol.dispose]() {}})
 })
 
 // Custom backoff schedule (in seconds)
 await retry(
-  async (disposer, { resetBackoff }) => {
-    return await fetchData()
+  () => {
+    const promise = fetchData()
+    return Object.assign(promise, {[Symbol.dispose]() {}})
   },
-  {
-    backoffSec: [1, 2, 5, 10, -1] // -1 means retry forever with last delay
-  }
+  [1, 2, 5, 10, -1], // -1 means retry forever with last delay
 )
 
-// With disposer for cancellation
-import { makeDisposer } from 'jdisposer'
-
-const disposer = makeDisposer()
-
-const data = await retry(
-  async (loopDisposer, { resetBackoff }) => {
-    // Check if aborted
-    if (loopDisposer.signal.aborted) return
-
-    const result = await fetchData()
-
-    // Reset backoff on successful partial progress
-    if (result.isPartialSuccess) {
-      resetBackoff()
-    }
-
-    return result
+// Cancellation via Disposable
+const r = retry(
+  ({resetBackoff}) => {
+    const promise = fetchData()
+    return Object.assign(promise, {[Symbol.dispose]() { /* cancel */ }})
   },
-  {
-    disposer,
-    backoffSec: [5, 10, 20, 40, -1]
-  }
+  [5, 10, 20, 40, -1],
 )
 
 // Cancel the retry loop
-disposer.dispose()
+r[Symbol.dispose]()
 
 // Returns undefined when disposed
-console.log(data) // T | undefined
-```
-
-**Options:**
-- `backoffSec`: Array of retry delays in seconds. Use `-1` for infinite retries with the last delay.
-  - Default: `[5, 5, 10, 10, 20, 20, 40, 40, 60, -1]`
-- `disposer`: Optional disposer for cancellation. When provided, the return type is `T | undefined`. Otherwise, the return type is `T`.
-
-**Callback parameters:**
-- `disposer`: A disposer for the current retry attempt. Check `disposer.signal.aborted` to handle cancellation
-- `info.resetBackoff()`: Call this to reset the backoff counter to the beginning (useful when making partial progress)
-
-### `addRetry(cb, options?)`
-
-Fire-and-forget version of `retry`. Starts the retry loop in the background and returns a dispose function to cancel it.
-
-```typescript
-import {addRetry} from 'jrx'
-
-// Start a retry loop in the background
-const dispose = addRetry(async (disposer, { resetBackoff }) => {
-  const response = await fetch('/api/data')
-  if (!response.ok) throw new Error('Failed')
-  processData(await response.json())
-})
-
-// Cancel the retry loop
-dispose()
-
-// With custom backoff
-const dispose2 = addRetry(
-  async (disposer) => {
-    await connectWebSocket()
-  },
-  { backoffSec: [1, 2, 5, -1] }
-)
-
-dispose2()
+const data = await r // undefined
 ```
 
-**Options:**
-- `backoffSec`: Array of retry delays in seconds (same as `retry`)
+**Parameters:**
+- `cb`: Callback that returns `Disposable & (T | Promise<T>)`. Receives `{ resetBackoff() }` to reset the backoff counter.
+- `backoffSec`: Array of retry delays in seconds. Use `-1` for infinite retries with the last delay. Default: `[5, 5, 10, 10, 20, 20, 40, 40, 60, -1]`
 
 ## Cleanup Pattern
 
-All functions return disposer functions that clean up resources:
+All effect functions return a dispose function that stops the effect and runs any pending cleanup:
 
 ```typescript
 import {addInterval, addTimeout, addRequestAnimationFrame} from 'jrx'
-import {makeDisposer} from 'jdisposer'
-
-const disposer = makeDisposer()
 
-// Collect disposers
-disposer.add(addInterval(() => console.log('tick'), 1000))
-disposer.add(addTimeout(() => console.log('timeout'), 5000))
-disposer.add(addRequestAnimationFrameLoop((now) => render(now)))
+// Each function returns a dispose function
+const disposeInterval = addInterval(() => console.log('tick'), 1000)
+const disposeTimeout = addTimeout(() => console.log('timeout'), 5000)
+const disposeRaf = addRequestAnimationFrame((now) => render(now))
 
-// Cleanup all at once
-disposer.dispose()
+// Call the dispose function to stop the effect
+disposeInterval()
+disposeTimeout()
+disposeRaf()
 ```
 
 ## TypeScript
 
-This library is written in TypeScript and includes type definitions.
-
-```typescript
-import type { Disposer } from 'jdisposer'
-
-// All disposer functions follow this pattern
-type DisposerFunction = () => void
-```
+This library is written in TypeScript and uses the [Explicit Resource Management](https://github.com/tc39/proposal-explicit-resource-management) types (`Disposable`, `DisposableStack`, `AsyncDisposableStack`).
 
 ## License
 

package/index.d.ts

@@ -1,18 +1,15 @@
-import { type Disposer } from 'jdisposer';
-import retry, { addRetry } from './retry.js';
+import retry from './retry.js';
 import computed from './computed.js';
-import addEvtListener from './addEvtListener.js';
-export { retry, computed, addEvtListener, addRetry };
+export { retry, computed };
+export declare function makeReset(): () => DisposableStack;
+export declare function makeAsyncReset(): () => Promise<AsyncDisposableStack>;
 export declare function makeRenderLoop(): {
     loop(this: void, time: DOMHighResTimeStamp): void;
-    setLoop(this: void, loop: (time: DOMHighResTimeStamp) => void | (() => void)): () => void;
+    setLoop(this: void, loop: (time: DOMHighResTimeStamp) => undefined | (() => void)): () => void;
 };
-export declare function addInterval(cb: () => void | (() => any), ms: number): () => void;
-export declare function addIntervalAsync(cb: (disposer: Disposer) => void | (() => any) | Promise<void> | Promise<() => any>, ms: number): () => void;
-export declare function addRequestAnimationFrame(cb: (now: DOMHighResTimeStamp) => void | (() => any)): () => void;
-export declare function addRequestAnimationFrameLoop(cb: (now: DOMHighResTimeStamp) => void | (() => any)): () => void;
-export declare function addSubs<Subs extends any[]>(subs: Subs, cb: () => void | (() => void), { now }?: {
-    now?: boolean;
-}): (this: void) => void;
+export declare function addInterval(cb: () => undefined | (() => any), ms: number): () => void;
+export declare function addIntervalAsync(cb: () => (void | Disposable) & (void | (() => any) | Promise<void> | Promise<() => any>), ms: number): () => void;
+export declare function addRequestAnimationFrame(cb: (now: DOMHighResTimeStamp) => undefined | (() => any)): () => void;
+export declare function addRequestAnimationFrameLoop(cb: (now: DOMHighResTimeStamp) => undefined | (() => any)): () => void;
 export declare function addTimeout(cb: () => void, ms: number): () => void;
-export declare function addTransition(cb: (progress: number) => void | (() => void), durationMs: number): () => void;
+export declare function addTransition(cb: (progress: number) => undefined | (() => void), durationMs: number): () => void;

package/index.js

@@ -1,14 +1,26 @@
-import { makeDisposer, makeReset } from 'jdisposer';
-import retry, { addRetry } from './retry.js';
+import retry from './retry.js';
 import computed from './computed.js';
-import addEvtListener from './addEvtListener.js';
-export { retry, computed, addEvtListener, addRetry };
+export { retry, computed };
+export function makeReset() {
+    let stack = new DisposableStack();
+    return () => {
+        stack.dispose();
+        return (stack = new DisposableStack());
+    };
+}
+export function makeAsyncReset() {
+    let stack = new AsyncDisposableStack();
+    return async () => {
+        await stack.disposeAsync();
+        return (stack = new AsyncDisposableStack());
+    };
+}
 export function makeRenderLoop() {
     let loop_;
     const reset = makeReset();
     return {
         loop(time) {
-            reset().add(loop_?.(time));
+            reset().adopt(loop_?.(time), v => v?.());
         },
         setLoop(loop) {
             loop_ = loop;
@@ -28,7 +40,7 @@ export function addInterval(cb, ms) {
         clearTimeout(timeout);
     };
     function wrapper() {
-        reset().add(cb());
+        reset().adopt(cb(), v => v?.());
         timeout = setTimeout(wrapper, ms);
     }
 }
@@ -41,17 +53,21 @@ export function addIntervalAsync(cb, ms) {
         clearTimeout(timeout);
     };
     async function wrapper() {
-        const disposer = reset();
-        await cb(disposer);
-        if (!disposer.signal.aborted)
+        const stack = reset();
+        await stack.adopt(cb(), v => v?.[Symbol.dispose]?.());
+        if (!stack.disposed)
             timeout = setTimeout(wrapper, ms);
     }
 }
 export function addRequestAnimationFrame(cb) {
-    const disposer = makeDisposer();
-    const raf = requestAnimationFrame(now => disposer.add(cb(now)));
+    const stack = new DisposableStack();
+    const raf = requestAnimationFrame(now => {
+        if (stack.disposed)
+            return;
+        stack.adopt(cb(now), v => v?.());
+    });
     return () => {
-        disposer.dispose();
+        stack.dispose();
         cancelAnimationFrame(raf);
     };
 }
@@ -63,20 +79,10 @@ export function addRequestAnimationFrameLoop(cb) {
         cancelAnimationFrame(raf);
     };
     function wrapper(now) {
-        reset().add(cb(now));
+        reset().adopt(cb(now), v => v?.());
         raf = requestAnimationFrame(wrapper);
     }
 }
-export function addSubs(subs, cb, { now } = {}) {
-    const disposer = makeDisposer();
-    const reset = makeReset();
-    disposer.add(reset);
-    for (const sub of subs)
-        disposer.add(sub(() => reset().add(cb())));
-    if (now)
-        reset().add(cb());
-    return disposer.dispose;
-}
 export function addTimeout(cb, ms) {
     const timeout = setTimeout(cb, ms);
     return () => clearTimeout(timeout);
@@ -92,15 +98,15 @@ export function addTransition(cb, durationMs) {
     function wrapper(now) {
         if (start === undefined) {
             start = now;
-            reset().add(cb(0));
+            reset().adopt(cb(0), v => v?.());
             raf = requestAnimationFrame(wrapper);
         }
         else {
             const progress = (now - start) / durationMs;
             if (progress >= 1)
-                reset().add(cb(1));
+                reset().adopt(cb(1), v => v?.());
             else {
-                reset().add(cb(progress));
+                reset().adopt(cb(progress), v => v?.());
                 raf = requestAnimationFrame(wrapper);
             }
         }

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "jrx",
-	"version": "0.2.1",
+	"version": "0.3.0-alpha.1",
 	"type": "module",
 	"scripts": {
 		"prepublishOnly": "npx tsc",
-		"test": "node --test tests/*.test.ts",
-		"test:coverage": "node --test --experimental-test-coverage tests/*.test.ts"
+		"test": "npm run prepublishOnly && node --test tests/*.test.ts",
+		"test:coverage": "npm run prepublishOnly && node --test --experimental-test-coverage tests/*.test.ts"
 	},
 	"exports": {
 		".": {
@@ -23,15 +23,10 @@
 		"retry.js",
 		"retry.d.ts",
 		"computed.js",
-		"computed.d.ts",
-		"addEvtListener.js",
-		"addEvtListener.d.ts"
+		"computed.d.ts"
 	],
 	"devDependencies": {
 		"@types/node": "^25.2.1",
-		"typescript": "^5.9.3"
-	},
-	"dependencies": {
-		"jdisposer": "^0.0.1"
+		"typescript": "^6.0.2"
 	}
 }

package/retry.d.ts

@@ -1,17 +1,3 @@
-import { type Disposer } from 'jdisposer';
-export default function retry<T>(cb: (disposer: Disposer, info: {
+export default function retry<T>(cb: (info: {
     resetBackoff(): void;
-}) => T | Promise<T>, options?: {
-    backoffSec?: number[];
-}): Promise<T>;
-export default function retry<T>(cb: (disposer: Disposer, info: {
-    resetBackoff(): void;
-}) => T | Promise<T>, options?: {
-    backoffSec?: number[];
-    disposer: Disposer;
-}): Promise<T | undefined>;
-export declare function addRetry<T>(cb: (disposer: Disposer, info: {
-    resetBackoff(): void;
-}) => T | Promise<T>, options?: {
-    backoffSec?: number[];
-}): (this: void) => void;
+}) => (Disposable | undefined) & (T | Promise<T>), backoffSec?: number[]): Disposable & Promise<T | undefined>;

package/retry.js

@@ -1,37 +1,35 @@
-import { makeDisposer, makeReset } from 'jdisposer';
-export default async function retry(cb, { backoffSec = [5, 5, 10, 10, 20, 20, 40, 40, 60, -1], // -1: retry forever with the last backoff . first element must not be -1
-disposer, } = {}) {
+import { makeReset } from './index.js';
+export default function retry(cb, backoffSec = [5, 5, 10, 10, 20, 20, 40, 40, 60, -1]) {
+    const stack = new DisposableStack();
     const reset = makeReset();
-    disposer?.add(reset);
+    stack.defer(reset);
     let count = 0;
-    let loopDisposer = reset();
-    while (true) {
-        if (backoffSec[count] !== -1)
-            count++;
-        try {
-            if (loopDisposer?.signal.aborted)
-                return; // only happen if disposer?.signal.aborted
-            return await cb(loopDisposer, {
-                resetBackoff() {
-                    count = 1;
-                },
-            });
-        }
-        catch (e) {
-            if (disposer?.signal.aborted)
-                return;
-            if (count > backoffSec.length) {
-                console.error('max retries reached:', e);
-                throw e;
+    let loopStack = reset();
+    return Object.assign((async () => {
+        while (true) {
+            if (backoffSec[count] !== -1)
+                count++;
+            try {
+                if (loopStack.disposed)
+                    return;
+                const value = cb({
+                    resetBackoff() {
+                        count = 1;
+                    },
+                });
+                return value?.[Symbol.dispose] ? loopStack.use(value) : value;
+            }
+            catch (e) {
+                if (stack.disposed)
+                    return;
+                if (count > backoffSec.length) {
+                    console.error('max retries reached:', e);
+                    throw e;
+                }
+                console.warn('Retrying due to error:', e);
+                loopStack = reset();
+                await new Promise(resolve => setTimeout(resolve, backoffSec[count - 1] * 1000));
             }
-            console.warn('Retrying due to error:', e);
-            loopDisposer = reset();
-            await new Promise(resolve => setTimeout(resolve, backoffSec[count - 1] * 1000));
         }
-    }
-}
-export function addRetry(cb, options) {
-    const disposer = makeDisposer();
-    void retry(cb, { ...options, disposer });
-    return disposer.dispose;
+    })(), { [Symbol.dispose]: stack[Symbol.dispose].bind(stack) });
 }

package/addEvtListener.d.ts

@@ -1,15 +0,0 @@
-type IEventHandler<Target extends {
-    addEventListener(event: string, handler: any, option?: any): any;
-}, EventName> = Target['addEventListener'] extends (event: EventName, handler: infer Handler, ...args: any[]) => any ? Handler extends (...params: any[]) => any ? Handler : never : never;
-type IEventOption<Target extends {
-    addEventListener(event: string, handler: any, option?: any): any;
-}, EventName, Handler> = Target['addEventListener'] extends (event: EventName, handler: Handler, option: infer Option) => any ? Option : never;
-export default function addEvtListener<Target extends {
-    addEventListener(event: string, handler: any, option?: any): any;
-    removeEventListener(event: string, handler: any, option?: any): any;
-}, EventName extends Parameters<Target['addEventListener']>[0], Handler extends IEventHandler<Target, EventName>>(target: Target, event: EventName, handler: Handler, option?: IEventOption<Target, EventName, Handler>): () => void;
-export default function addEvtListener<Target extends {
-    addEventListener(event: string, handler: any, option?: any): any;
-    removeEventListener(event: string, handler: any, option?: any): any;
-}, EventName extends Parameters<Target['addEventListener']>[0]>(target: Target, event: EventName, handler: (...args: any[]) => any, option?: IEventOption<Target, EventName, IEventHandler<Target, EventName>>): () => void;
-export {};

package/addEvtListener.js

@@ -1,6 +0,0 @@
-export default function addEvtListener(target, event, handler, option) {
-    target.addEventListener(event, handler, option);
-    return function removeEvtListener() {
-        return target.removeEventListener(event, handler, option);
-    };
-}