std-react-bindings 0.0.1

package/src/limiter/use-limiter.ts

@@ -0,0 +1,52 @@
+import { DEFAULT_PRIORITY } from 'std-client-run-queue';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { useDefaultQueue } from '../default-queue/default-queue-context';
+import { LimiterImpl } from './internal/LimiterImpl';
+import type { Limiter } from './types/Limiter';
+import type { LimiterOptions } from './types/LimiterOptions';
+
+const noOp = () => {};
+
+/** Creates a limiter which can be used to debounce or throttle a function call. */
+export const useLimiter = ({
+  id,
+  cancelOnUnmount = false,
+  limitType = 'debounce',
+  limitMode = 'trailing',
+  limitMSec = 0,
+  priority = DEFAULT_PRIORITY,
+  queue
+}: LimiterOptions & {
+  /** A technical, but human-readable ID, which isn't guaranteed to be unique */
+  id: string;
+  /**
+   * If `true`, any previously scheduled functions are automatically canceled on unmount
+   *
+   * @defaultValue `false`
+   */
+  cancelOnUnmount?: boolean;
+}) => {
+  const defaultQueue = useDefaultQueue();
+
+  queue = queue ?? defaultQueue;
+
+  const previousLimiter = useRef<Limiter | undefined>();
+  const limiter = useMemo<Limiter>(
+    () => new LimiterImpl(id, { limitMSec, limitMode, limitType, priority, queue: queue! }),
+    [id, limitMSec, limitMode, limitType, priority, queue]
+  );
+
+  // If the limiter changed, cancel the previous one since it's no longer managed by this hook
+  if (previousLimiter.current !== undefined && previousLimiter.current !== limiter) {
+    previousLimiter.current.cancel();
+  }
+  previousLimiter.current = limiter;
+
+  const unmountCleanup = useRef(noOp);
+  unmountCleanup.current = cancelOnUnmount ? () => limiter.cancel() : noOp;
+
+  useEffect(() => (cancelOnUnmount ? () => unmountCleanup.current() : undefined));
+
+  return limiter;
+};

package/src/make-bindable-component/__tests__/make-bindable-component.test.tsx

@@ -0,0 +1,30 @@
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { runInDom } from '../../__test_dependency__';
+import { useBinding } from '../../binding/use-binding';
+import { makeBindableComponent } from '../make-bindable-component';
+
+describe('makeBindableComponent', () => {
+  it('should work', () =>
+    runInDom(({ onMount }) => {
+      const MyComponent = makeBindableComponent(({ value }: { value: string }) => <span>{value}</span>);
+
+      const two = useBinding(() => 'two', { id: 'two', detectChanges: true });
+
+      onMount(async (rootElement) => {
+        expect(rootElement.innerHTML).toBe('<div><span>one</span><span>two</span></div>');
+
+        two.set('three');
+
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>one</span><span>three</span></div>'));
+      });
+
+      return (
+        <>
+          <MyComponent value="one" />
+          <MyComponent value={two} />
+        </>
+      );
+    }));
+});

package/src/make-bindable-component/exports.ts

@@ -0,0 +1,2 @@
+export * from './make-bindable-component';
+export * from './types/exports';

package/src/make-bindable-component/make-bindable-component.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import type { ReadonlyBinding } from '../binding/types/readonly-binding';
+import { isBinding } from '../binding-utils/type-utils';
+import { BindingsConsumer } from '../components/BindingsConsumer';
+import { resolveTypeOrBindingType } from '../resolveable/utils';
+import type { MakeBindableComponentOptions } from './types/make-bindable-component-options';
+import type { UpgradeToBindingsProps } from './types/upgrade-to-binding-props';
+
+/**
+ * Take a functional component and creates a new functional component that takes binding props.  The non-bound types are also still
+ * accepted.
+ *
+ * The component will be re-rendered any time binding props change.
+ *
+ * The bindings are resolved before calling the original component.
+ *
+ * Bindings can also be passed through by specifying key names in the `passThru` option.
+ */
+export function makeBindableComponent<PropsT extends Record<string, any>, PassThruKeyT extends keyof PropsT & string = never>(
+  functionalComponent: (props: PropsT) => JSX.Element
+): (props: UpgradeToBindingsProps<PropsT, PassThruKeyT>) => JSX.Element;
+export function makeBindableComponent<PropsT extends Record<string, any>, PassThruKeyT extends keyof PropsT & string = never>(
+  options: MakeBindableComponentOptions<PropsT, PassThruKeyT>,
+  functionalComponent: (props: PropsT) => JSX.Element
+): (props: UpgradeToBindingsProps<PropsT, PassThruKeyT>) => JSX.Element;
+export function makeBindableComponent<PropsT extends Record<string, any>, PassThruKeyT extends keyof PropsT & string = never>(
+  optionsOrFunctionalComponent: MakeBindableComponentOptions<PropsT, PassThruKeyT> | ((props: PropsT) => JSX.Element),
+  theFunctionalComponent?: (props: PropsT) => JSX.Element
+): (props: UpgradeToBindingsProps<PropsT, PassThruKeyT>) => JSX.Element {
+  const { passThru, bindingsConsumerProps } =
+    typeof optionsOrFunctionalComponent === 'function'
+      ? ({} satisfies MakeBindableComponentOptions<PropsT, PassThruKeyT>)
+      : optionsOrFunctionalComponent;
+  const functionalComponent = (typeof optionsOrFunctionalComponent === 'function' ? optionsOrFunctionalComponent : theFunctionalComponent)!;
+
+  const passThruSet = new Set(passThru ?? []);
+
+  return (props: UpgradeToBindingsProps<PropsT, PassThruKeyT>) => {
+    const bindings = getAllBindings(props, passThruSet);
+    return bindings.length > 0 ? (
+      <BindingsConsumer {...bindingsConsumerProps} bindings={bindings}>
+        {() => functionalComponent(resolveBindings(props, passThruSet) as PropsT)}
+      </BindingsConsumer>
+    ) : (
+      functionalComponent(props as PropsT)
+    );
+  };
+}
+
+// Helpers
+
+const getAllBindings = (obj: Record<string, any>, passThru: Set<string>) => {
+  const output: ReadonlyBinding[] = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (!passThru.has(key) && isBinding(value)) {
+      output.push(value);
+    }
+  }
+
+  return output;
+};
+
+const resolveBindings = <PropsT extends Record<string, any>>(props: PropsT, passThru: Set<string>): PropsT =>
+  Object.entries(props).reduce((out, [key, value]) => {
+    if (passThru.has(key)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      out[key as keyof PropsT] = value;
+
+      return out;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    out[key as keyof PropsT] = resolveTypeOrBindingType(value);
+
+    return out;
+  }, {} as Partial<PropsT>) as PropsT;

package/src/make-bindable-component/types/exports.ts

@@ -0,0 +1,2 @@
+export * from './make-bindable-component-options';
+export * from './upgrade-to-binding-props';

package/src/make-bindable-component/types/make-bindable-component-options.ts

@@ -0,0 +1,6 @@
+import type { BindingsConsumerProps } from '../../components/BindingsConsumer';
+
+export interface MakeBindableComponentOptions<PropsT extends Record<string, any>, PassThruKeyT extends keyof PropsT & string = never> {
+  passThru?: PassThruKeyT[];
+  bindingsConsumerProps?: Omit<BindingsConsumerProps<any>, 'bindings'>;
+}

package/src/make-bindable-component/types/upgrade-to-binding-props.tsx

@@ -0,0 +1,11 @@
+import type { ReadonlyBinding } from '../../binding/types/readonly-binding';
+
+export type UpgradeToBindingsProps<PropsT extends Record<string, any>, PassThruKeyT extends keyof PropsT & string = never> = {
+  [KeyT in keyof PropsT]: KeyT extends PassThruKeyT
+    ? PropsT[KeyT]
+    : ReadonlyBinding extends PropsT[KeyT]
+    ? never
+    : undefined extends PropsT[KeyT]
+    ? PropsT[KeyT] | ReadonlyBinding<PropsT[KeyT] | undefined>
+    : PropsT[KeyT] | ReadonlyBinding<PropsT[KeyT]>;
+};

package/src/resolveable/__tests__/resolve-type-or-binding-type.test.ts

@@ -0,0 +1,22 @@
+import { makeBinding } from '../../binding/make-binding';
+import { resolveTypeOrBindingType } from '../utils';
+
+describe('resolveTypeOrBindingType', () => {
+  it('number should return number', () => {
+    expect(resolveTypeOrBindingType(5)).toBe(5);
+  });
+
+  it('string should return string', () => {
+    expect(resolveTypeOrBindingType('hello')).toBe('hello');
+  });
+
+  it('array should return array', () => {
+    expect(resolveTypeOrBindingType(['hello', 'world'])).toMatchObject(['hello', 'world']);
+  });
+
+  it('binding should return binding value', () => {
+    const b = makeBinding(() => 10, { id: 'b' });
+
+    expect(resolveTypeOrBindingType(b)).toBe(10);
+  });
+});

package/src/resolveable/__tests__/resolve-type-or-deferred-type-or-binding-type.test.ts

@@ -0,0 +1,26 @@
+import { makeBinding } from '../../binding/make-binding';
+import { resolveTypeOrDeferredTypeOrBindingType } from '../utils';
+
+describe('resolveTypeOrDeferredTypeOrBindingType', () => {
+  it('number should return number', () => {
+    expect(resolveTypeOrDeferredTypeOrBindingType(5)).toBe(5);
+  });
+
+  it('string should return string', () => {
+    expect(resolveTypeOrDeferredTypeOrBindingType('hello')).toBe('hello');
+  });
+
+  it('array should return array', () => {
+    expect(resolveTypeOrDeferredTypeOrBindingType(['hello', 'world'])).toMatchObject(['hello', 'world']);
+  });
+
+  it('binding should return binding value', () => {
+    const b = makeBinding(() => 10, { id: 'b' });
+
+    expect(resolveTypeOrDeferredTypeOrBindingType(b)).toBe(10);
+  });
+
+  it('function should function result', () => {
+    expect(resolveTypeOrDeferredTypeOrBindingType(() => 20)).toBe(20);
+  });
+});

package/src/resolveable/__tests__/resolve-type-or-deferred-type-with-args.test.ts

@@ -0,0 +1,19 @@
+import { resolveTypeOrDeferredTypeWithArgs } from '../utils';
+
+describe('resolveTypeOrDeferredTypeWithArgs', () => {
+  it('number should return number', () => {
+    expect(resolveTypeOrDeferredTypeWithArgs(5, [3, 11])).toBe(5);
+  });
+
+  it('string should return string', () => {
+    expect(resolveTypeOrDeferredTypeWithArgs('hello', [3, 11])).toBe('hello');
+  });
+
+  it('array should return array', () => {
+    expect(resolveTypeOrDeferredTypeWithArgs(['hello', 'world'], [3, 11])).toMatchObject(['hello', 'world']);
+  });
+
+  it('function should function result', () => {
+    expect(resolveTypeOrDeferredTypeWithArgs((a: number, b: number) => a + b, [3, 11])).toBe(14);
+  });
+});

package/src/resolveable/__tests__/resolve-type-or-deferred-type.test.ts

@@ -0,0 +1,19 @@
+import { resolveTypeOrDeferredType } from '../utils';
+
+describe('resolveTypeOrDeferredType', () => {
+  it('number should return number', () => {
+    expect(resolveTypeOrDeferredType(5)).toBe(5);
+  });
+
+  it('string should return string', () => {
+    expect(resolveTypeOrDeferredType('hello')).toBe('hello');
+  });
+
+  it('array should return array', () => {
+    expect(resolveTypeOrDeferredType(['hello', 'world'])).toMatchObject(['hello', 'world']);
+  });
+
+  it('function should function result', () => {
+    expect(resolveTypeOrDeferredType(() => 10)).toBe(10);
+  });
+});

package/src/resolveable/exports.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/src/resolveable/types.ts

@@ -0,0 +1,13 @@
+import type { ReadonlyBinding } from '../binding/types/readonly-binding';
+
+/** Either an immediate value or a value that can be retrieved by calling a function */
+export type TypeOrDeferredType<T> = T | (() => T);
+
+/** Either an immediate value or a value that can be retrieved by calling a function with args */
+export type TypeOrDeferredTypeWithArgs<T, ArgsT extends any[]> = T | ((...args: ArgsT) => T);
+
+/** Either an immediate value or a binding that stores a value */
+export type TypeOrBindingType<T> = T | ReadonlyBinding<T>;
+
+/** Either an immediate value or a value that can be retrieved by calling a function or a binding that stores a value */
+export type TypeOrDeferredTypeOrBindingType<T> = T | (() => T) | ReadonlyBinding<T>;

package/src/resolveable/utils.ts

@@ -0,0 +1,17 @@
+import { isBinding } from '../binding-utils/type-utils';
+import type { TypeOrBindingType, TypeOrDeferredType, TypeOrDeferredTypeOrBindingType, TypeOrDeferredTypeWithArgs } from './types';
+
+/** Resolves the value out of a TypeOrBindingType */
+export const resolveTypeOrBindingType = <T>(value: TypeOrBindingType<T>) => (isBinding(value) ? value.get() : value);
+
+/** Resolves the value out of a TypeOrDeferredType */
+export const resolveTypeOrDeferredType = <T>(value: TypeOrDeferredType<T>): T =>
+  typeof value === 'function' ? (value as () => T)() : (value as T);
+
+/** Resolves the value out of a TypeOrDeferredTypeOrBindingType */
+export const resolveTypeOrDeferredTypeOrBindingType = <T>(value: TypeOrDeferredTypeOrBindingType<T>) =>
+  isBinding(value) ? value.get() : typeof value === 'function' ? (value as () => T)() : (value as T);
+
+/** Resolves the value out of a TypeOrDeferredType */
+export const resolveTypeOrDeferredTypeWithArgs = <T, ArgsT extends any[]>(value: TypeOrDeferredTypeWithArgs<T, ArgsT>, args: ArgsT): T =>
+  typeof value === 'function' ? (value as (...args: ArgsT) => T)(...args) : (value as T);

package/src/specialized-bindings/__tests__/const-binding.test.tsx

@@ -0,0 +1,43 @@
+import { waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { runInDom } from '../../__test_dependency__';
+import type { ReadonlyBinding } from '../../binding/types/readonly-binding';
+import { useBinding } from '../../binding/use-binding';
+import { BindingsConsumer } from '../../components/BindingsConsumer';
+import { useConstBinding } from '../const-binding';
+
+describe('useConstBinding', () => {
+  it('initial value should work', () =>
+    runInDom(({ onMount }) => {
+      const a = useConstBinding(3, { id: 'a' });
+
+      onMount(() => {
+        expect(a.get()).toBe(3);
+      });
+    }));
+
+  it("if rerendered with a new value, the binding's value should change", () =>
+    runInDom(({ onMount }) => {
+      const value = useBinding(() => 0, { id: 'value' });
+      let constBinding: ReadonlyBinding<number> | undefined;
+
+      const MyComponent = ({ value }: { value: number }) => {
+        constBinding = useConstBinding(value, { id: 'a' });
+
+        return <span>{constBinding.get()}</span>;
+      };
+
+      onMount(async () => {
+        const constBindingUid = constBinding?.uid;
+        expect(constBinding?.get()).toBe(0);
+
+        value.set(1);
+        await waitFor(() => expect(constBinding?.get()).toBe(1));
+
+        expect(constBinding?.uid).toBe(constBindingUid);
+      });
+
+      return <BindingsConsumer bindings={{ value }}>{({ value }) => <MyComponent value={value} />}</BindingsConsumer>;
+    }));
+});

package/src/specialized-bindings/__tests__/flattened-binding.test.ts

@@ -0,0 +1,45 @@
+import { runInDom, sleep } from '../../__test_dependency__';
+import { useBinding } from '../../binding/use-binding';
+import { useFlattenedBinding } from '../flattened-binding';
+
+describe('useFlattenedBinding', () => {
+  it('initial value should work', () =>
+    runInDom(() => {
+      const a = useBinding(() => 0, { id: 'test1' });
+      const b = useBinding(() => ({ myBinding: a, somethingElse: 3 }), { id: 'test2' });
+      const c = useFlattenedBinding({ b }, ({ b }) => b.myBinding, { id: 'test3' });
+
+      expect(c.get()).toBe(0);
+    }));
+
+  it('updating root binding should propagate synchronously', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'test1' });
+      const b = useBinding(() => ({ myBinding: a, somethingElse: 3 }), { id: 'test2' });
+      const c = useFlattenedBinding({ b }, ({ b }) => b.myBinding, { id: 'test3' });
+
+      onMount(() => {
+        a.set(1);
+        expect(b.get()).toMatchObject({ myBinding: a, somethingElse: 3 });
+        expect(c.get()).toBe(1);
+      });
+    }));
+
+  it('switching root bindings should propagate asynchronously', () =>
+    runInDom(({ onMount }) => {
+      const a1 = useBinding(() => 0, { id: 'test1' });
+      const a2 = useBinding(() => 10, { id: 'test2' });
+      const b = useBinding(() => ({ myBinding: a1, somethingElse: 3 }), { id: 'test3' });
+      const c = useFlattenedBinding({ b }, ({ b }) => b.myBinding, { id: 'test4' });
+
+      onMount(async () => {
+        b.set({ myBinding: a2, somethingElse: 6 });
+        expect(b.get()).toMatchObject({ myBinding: a2, somethingElse: 6 });
+        expect(c.get()).toBe(0);
+
+        await sleep(50); // giving time to propagate
+
+        expect(c.get()).toBe(10);
+      });
+    }));
+});

package/src/specialized-bindings/const-binding.ts

@@ -0,0 +1,19 @@
+import { makeBinding } from '../binding/make-binding';
+import type { ReadonlyBinding } from '../binding/types/readonly-binding';
+import { useBinding } from '../binding/use-binding';
+
+export interface ConstBindingArgs {
+  /** A technical, but human-readable ID, which isn't guaranteed to be unique */
+  id: string;
+}
+
+/** Makes a const binding without using any React contexts. */
+export const makeConstBinding = <GetT>(value: GetT, { id }: ConstBindingArgs): ReadonlyBinding<GetT> => makeBinding(() => value, { id });
+
+/** Use for cases where a binding is required in an interface but the underlying value is constant with respect to a single render */
+export const useConstBinding = <GetT>(value: GetT, { id }: ConstBindingArgs): ReadonlyBinding<GetT> => {
+  const internalBinding = useBinding(() => value, { id, detectChanges: true });
+  internalBinding.setRaw(value);
+
+  return internalBinding;
+};

package/src/specialized-bindings/derived-binding/__tests__/basic.test.ts

@@ -0,0 +1,94 @@
+import { jest } from '@jest/globals';
+
+import { runInDom, sleep } from '../../../__test_dependency__';
+import { useBinding } from '../../../binding/use-binding';
+import { useDerivedBinding } from '../use-derived-binding';
+
+describe('useDerivedBinding', () => {
+  it('should work with undefined bindings', () =>
+    runInDom(({ onMount }) => {
+      const derived = useDerivedBinding(
+        undefined,
+        (values) => {
+          expect(values).toBeUndefined();
+          return 1;
+        },
+        { id: 'a' }
+      );
+
+      onMount(() => {
+        expect(derived.get()).toBe(1);
+      });
+    }));
+
+  it('initial value should work with named bindings', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+
+      const bTransformer = jest.fn(({ a }: { a: number }) => a + 1);
+      const b = useDerivedBinding({ a }, bTransformer, { id: 'a' });
+
+      onMount(() => {
+        expect(b.get()).toBe(1);
+        expect(bTransformer).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+  it('initial value should work with single unnamed bindings', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+
+      const bTransformer = jest.fn(() => a.get() + 1);
+      const b = useDerivedBinding(a, bTransformer, { id: 'a' });
+
+      onMount(() => {
+        expect(b.get()).toBe(1);
+        expect(bTransformer).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+  it('initial value should work with array of unnamed bindings', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+
+      const bTransformer = jest.fn(() => a.get() + 1);
+      const b = useDerivedBinding([a], bTransformer, { id: 'a' });
+
+      onMount(() => {
+        expect(b.get()).toBe(1);
+        expect(bTransformer).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+  it('updates to dependencies should be propagated asynchronously', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+
+      const bTransformer = jest.fn(({ a }: { a: number }) => a + 1);
+      const b = useDerivedBinding({ a }, bTransformer, { id: 'b' });
+
+      onMount(async () => {
+        a.set(1);
+        expect(b.get()).toBe(1);
+
+        await sleep(50); // giving time to propagate
+
+        expect(b.get()).toBe(2);
+        expect(bTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+
+  it('updates to dependencies should be propagated immediately when limitType=none', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+
+      const bTransformer = jest.fn(({ a }: { a: number }) => a + 1);
+      const b = useDerivedBinding({ a }, bTransformer, { id: 'a', limitType: 'none' });
+
+      onMount(() => {
+        a.set(1);
+        expect(b.get()).toBe(2);
+        expect(bTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+});

package/src/specialized-bindings/derived-binding/__tests__/derivations-of-derivations.test.ts

@@ -0,0 +1,71 @@
+import { jest } from '@jest/globals';
+
+import { runInDom, sleep } from '../../../__test_dependency__';
+import { useBinding } from '../../../binding/use-binding';
+import { useDerivedBinding } from '../use-derived-binding';
+
+describe('useDerivedBinding', () => {
+  it('initial value should work with derivations of derivations', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useDerivedBinding({ a }, ({ a }) => a + 1, { id: 'b' });
+      const c = useDerivedBinding({ b }, ({ b }) => b + 1, { id: 'c' });
+
+      const dTransformer = jest.fn(({ c }: { c: number }) => c + 1);
+      const d = useDerivedBinding({ c }, dTransformer, { id: 'd' });
+
+      onMount(() => {
+        expect(d.get()).toBe(3);
+        expect(dTransformer).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+  it('updates to deepest dependency should be propagated asynchronously', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useDerivedBinding({ a }, ({ a }) => a + 1, { id: 'b' });
+      const c = useDerivedBinding({ b }, ({ b }) => b + 1, { id: 'c' });
+
+      const dTransformer = jest.fn(({ c }: { c: number }) => c + 1);
+      const d = useDerivedBinding({ c }, dTransformer, { id: 'd' });
+
+      onMount(async () => {
+        a.set(1);
+        expect(b.get()).toBe(1);
+        expect(c.get()).toBe(2);
+        expect(d.get()).toBe(3);
+
+        await sleep(50); // giving time to propagate
+
+        expect(b.get()).toBe(2);
+        expect(c.get()).toBe(3);
+        expect(d.get()).toBe(4);
+        expect(dTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+
+  it('multiple quick updates to deepest dependency should be propagated asynchronously, but only running the transformer once', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useDerivedBinding({ a }, ({ a }) => a + 1, { id: 'b' });
+      const c = useDerivedBinding({ b }, ({ b }) => b + 1, { id: 'c' });
+
+      const dTransformer = jest.fn(({ c }: { c: number }) => c + 1);
+      const d = useDerivedBinding({ c }, dTransformer, { id: 'd' });
+
+      onMount(async () => {
+        a.set(1);
+        a.set(2);
+        expect(b.get()).toBe(1);
+        expect(c.get()).toBe(2);
+        expect(d.get()).toBe(3);
+
+        await sleep(50); // giving time to propagate
+
+        expect(b.get()).toBe(3);
+        expect(c.get()).toBe(4);
+        expect(d.get()).toBe(5);
+        expect(dTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+});

package/src/specialized-bindings/derived-binding/__tests__/multiple-dependencies.test.ts

@@ -0,0 +1,60 @@
+import { jest } from '@jest/globals';
+
+import { runInDom, sleep } from '../../../__test_dependency__';
+import { useBinding } from '../../../binding/use-binding';
+import { useDerivedBinding } from '../use-derived-binding';
+
+describe('useDerivedBinding', () => {
+  it('initial value should work with multiple dependencies', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useBinding(() => 1, { id: 'b' });
+
+      const cTransformer = jest.fn(({ a, b }: { a: number; b: number }) => a + b + 1);
+      const c = useDerivedBinding({ a, b }, cTransformer, { id: 'c' });
+
+      onMount(() => {
+        expect(c.get()).toBe(2);
+        expect(cTransformer).toHaveBeenCalledTimes(1);
+      });
+    }));
+
+  it('updates to one dependency should be propagated asynchronously', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useBinding(() => 1, { id: 'b' });
+
+      const cTransformer = jest.fn(({ a, b }: { a: number; b: number }) => a + b + 1);
+      const c = useDerivedBinding({ a, b }, cTransformer, { id: 'c' });
+
+      onMount(async () => {
+        a.set(2);
+        expect(c.get()).toBe(2);
+
+        await sleep(50); // giving time to propagate
+
+        expect(c.get()).toBe(4);
+        expect(cTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+
+  it('quick updates to multiple dependencies should be propagated asynchronously, but only running the transformer once', () =>
+    runInDom(({ onMount }) => {
+      const a = useBinding(() => 0, { id: 'a' });
+      const b = useBinding(() => 1, { id: 'b' });
+
+      const cTransformer = jest.fn(({ a, b }: { a: number; b: number }) => a + b + 1);
+      const c = useDerivedBinding({ a, b }, cTransformer, { id: 'c' });
+
+      onMount(async () => {
+        a.set(2);
+        b.set(3);
+        expect(c.get()).toBe(2);
+
+        await sleep(50); // giving time to propagate
+
+        expect(c.get()).toBe(6);
+        expect(cTransformer).toHaveBeenCalledTimes(2);
+      });
+    }));
+});

package/src/specialized-bindings/derived-binding/exports.ts

@@ -0,0 +1,2 @@
+export * from './options';
+export * from './use-derived-binding';