std-react-bindings 0.0.1

package/src/components/BindingsConsumer/__tests__/nested-rendering.test.tsx

@@ -0,0 +1,144 @@
+import { jest } from '@jest/globals';
+import { waitFor } from '@testing-library/react';
+import type { ComponentType } from 'react';
+import React from 'react';
+
+import { runInDom } from '../../../__test_dependency__';
+import type { Binding } from '../../../binding/types/binding';
+import { useBinding } from '../../../binding/use-binding';
+import { BindingsConsumer } from '..';
+
+describe('BindingsConsumer', () => {
+  it('nested initial render should work', () =>
+    runInDom(({ onMount }) => {
+      const MyComponent: ComponentType = jest.fn(() => {
+        const b1 = useBinding(() => 0, { id: 'test1' });
+        const b2 = useBinding(() => 0, { id: 'test2' });
+
+        return (
+          <BindingsConsumer bindings={{ b1 }}>
+            {({ b1 }) => (
+              <BindingsConsumer bindings={{ b2 }}>
+                {({ b2 }) => (
+                  <span>
+                    {b1}-{b2}
+                  </span>
+                )}
+              </BindingsConsumer>
+            )}
+          </BindingsConsumer>
+        );
+      });
+
+      onMount((rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+
+        expect(rootElement.innerHTML).toBe('<div><span>0-0</span></div>');
+      });
+
+      return <MyComponent />;
+    }));
+
+  it('updating inner binding should rerender just inner', () =>
+    runInDom(({ onMount }) => {
+      let b1: Binding<number>;
+      let b2: Binding<number>;
+
+      const consumer2Renderer = jest.fn(({ b2 }: { b2: number }) => <span>{b2}</span>);
+      const consumer1Renderer = jest.fn(({ b1: _b1 }: { b1: number }) => {
+        return <BindingsConsumer bindings={{ b2 }}>{consumer2Renderer}</BindingsConsumer>;
+      });
+
+      const MyComponent: ComponentType = jest.fn(() => {
+        b1 = useBinding(() => 0, { id: 'test1' });
+        b2 = useBinding(() => 0, { id: 'test2' });
+
+        return <BindingsConsumer bindings={{ b1 }}>{consumer1Renderer}</BindingsConsumer>;
+      });
+
+      onMount(async (rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer1Renderer).toHaveBeenCalledTimes(1);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(1);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+
+        b2.set(1);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>1</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer1Renderer).toHaveBeenCalledTimes(1);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(2);
+      });
+
+      return <MyComponent />;
+    }));
+
+  it('updating outer binding should rerender both outer and inner', () =>
+    runInDom(({ onMount }) => {
+      let b1: Binding<number>;
+      let b2: Binding<number>;
+
+      const consumer2Renderer = jest.fn(({ b2 }: { b2: number }) => <span>{b2}</span>);
+      const consumer1Renderer = jest.fn(({ b1: _b1 }: { b1: number }) => {
+        return <BindingsConsumer bindings={{ b2 }}>{consumer2Renderer}</BindingsConsumer>;
+      });
+
+      const MyComponent: ComponentType = jest.fn(() => {
+        b1 = useBinding(() => 0, { id: 'test1' });
+        b2 = useBinding(() => 0, { id: 'test2' });
+
+        return <BindingsConsumer bindings={{ b1 }}>{consumer1Renderer}</BindingsConsumer>;
+      });
+
+      onMount(async (rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer1Renderer).toHaveBeenCalledTimes(1);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(1);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+
+        b1.set(1);
+        await waitFor(() => expect(consumer1Renderer).toHaveBeenCalledTimes(2));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(2);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+      });
+
+      return <MyComponent />;
+    }));
+
+  it('quickly updating both inner and outer bindings should rerender both outer and inner, but just once', () =>
+    runInDom(({ onMount }) => {
+      let b1: Binding<number>;
+      let b2: Binding<number>;
+
+      const consumer2Renderer = jest.fn(({ b2 }: { b2: number }) => <span>{b2}</span>);
+      const consumer1Renderer = jest.fn(({ b1: _b1 }: { b1: number }) => {
+        return <BindingsConsumer bindings={{ b2 }}>{consumer2Renderer}</BindingsConsumer>;
+      });
+
+      const MyComponent: ComponentType = jest.fn(() => {
+        b1 = useBinding(() => 0, { id: 'test1' });
+        b2 = useBinding(() => 0, { id: 'test2' });
+
+        return <BindingsConsumer bindings={{ b1 }}>{consumer1Renderer}</BindingsConsumer>;
+      });
+
+      onMount(async (rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer1Renderer).toHaveBeenCalledTimes(1);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(1);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+
+        b1.set(1);
+        b2.set(2);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>2</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumer1Renderer).toHaveBeenCalledTimes(2);
+        expect(consumer2Renderer).toHaveBeenCalledTimes(2);
+      });
+
+      return <MyComponent />;
+    }));
+});

package/src/components/BindingsConsumer/__tests__/value-comparison.test.tsx

@@ -0,0 +1,97 @@
+import { jest } from '@jest/globals';
+import { waitFor } from '@testing-library/react';
+import type { ComponentType } from 'react';
+import React from 'react';
+
+import { runInDom } from '../../../__test_dependency__';
+import type { Binding } from '../../../binding/types/binding';
+import { useBinding } from '../../../binding/use-binding';
+import { BindingsConsumer } from '..';
+
+describe('BindingsConsumer', () => {
+  it('with detectInputChanges=true should only rerender if the binding value really changes', () =>
+    runInDom(({ onMount }) => {
+      let b: Binding<number>;
+
+      const consumerRenderer = jest.fn(({ b }: { b: number }) => <span>{b}</span>);
+
+      const MyComponent: ComponentType = jest.fn(() => {
+        b = useBinding(() => 0, { id: 'test' });
+
+        return (
+          <BindingsConsumer bindings={{ b }} detectInputChanges={true}>
+            {consumerRenderer}
+          </BindingsConsumer>
+        );
+      });
+
+      onMount(async (rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(1);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+
+        b.set(1);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>1</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(2);
+
+        b.set(1);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>1</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(2);
+
+        b.set(2);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>2</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(3);
+      });
+
+      return <MyComponent />;
+    }));
+
+  it("with detectInputChanges=true and makeComparableInputValue=evenness checker should only rerender if the binding value's evenness changes", () =>
+    runInDom(({ onMount }) => {
+      let b: Binding<number>;
+
+      const consumerRenderer = jest.fn(({ b }: { b: number }) => <span>{b}</span>);
+
+      const MyComponent: ComponentType = jest.fn(() => {
+        b = useBinding(() => 0, { id: 'test' });
+
+        return (
+          <BindingsConsumer bindings={{ b }} detectInputChanges={true} makeComparableInputValue={() => b.get() % 2 === 0}>
+            {consumerRenderer}
+          </BindingsConsumer>
+        );
+      });
+
+      onMount(async (rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(1);
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+
+        b.set(1);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>1</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(2);
+
+        b.set(3);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>1</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(2);
+
+        b.set(2);
+        await waitFor(() => expect(rootElement.innerHTML).toBe('<div><span>2</span></div>'));
+
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+        expect(consumerRenderer).toHaveBeenCalledTimes(3);
+      });
+
+      return <MyComponent />;
+    }));
+});

package/src/components/BindingsConsumer/__tests__/value-extraction.test.tsx

@@ -0,0 +1,56 @@
+import { jest } from '@jest/globals';
+import type { ComponentType } from 'react';
+import React from 'react';
+
+import { runInDom } from '../../../__test_dependency__';
+import { useBinding } from '../../../binding/use-binding';
+import { BindingsConsumer } from '..';
+
+describe('BindingsConsumer', () => {
+  it('named values should be extracted by name', () =>
+    runInDom(({ onMount }) => {
+      const MyComponent: ComponentType = jest.fn(() => {
+        const b = useBinding(() => 0, { id: 'test' });
+
+        return <BindingsConsumer bindings={{ b }}>{({ b }) => <span>{b}</span>}</BindingsConsumer>;
+      });
+
+      onMount((rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+      });
+
+      return <MyComponent />;
+    }));
+
+  it('single binding values should be extracted directly', () =>
+    runInDom(({ onMount }) => {
+      const MyComponent: ComponentType = jest.fn(() => {
+        const b = useBinding(() => 0, { id: 'test' });
+
+        return <BindingsConsumer bindings={b}>{(b) => <span>{b}</span>}</BindingsConsumer>;
+      });
+
+      onMount((rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+
+        expect(rootElement.innerHTML).toBe('<div><span>0</span></div>');
+      });
+
+      return <MyComponent />;
+    }));
+
+  it('undefined / no-bindings should work', () =>
+    runInDom(({ onMount }) => {
+      const MyComponent: ComponentType = jest.fn(() => <BindingsConsumer>{() => <span>working</span>}</BindingsConsumer>);
+
+      onMount((rootElement) => {
+        expect(MyComponent).toHaveBeenCalledTimes(1);
+
+        expect(rootElement.innerHTML).toBe('<div><span>working</span></div>');
+      });
+
+      return <MyComponent />;
+    }));
+});

package/src/components/BindingsConsumer/index.tsx

@@ -0,0 +1,77 @@
+import { UI_PRIORITY } from 'std-client-run-queue';
+import React, { useRef } from 'react';
+
+import type { BindingDependencies, NamedBindingDependencies } from '../../binding/types/binding-dependencies';
+import { isBinding } from '../../binding-utils/type-utils';
+import { extractBindingDependencyValues } from '../../internal-utils/extract-binding-dependency-values';
+import { getTypedKeys } from '../../internal-utils/get-typed-keys';
+import { pickLimiterOptions } from '../../limiter/pick-limiter-options';
+import { useBindingEffect } from '../../use-binding-effect/use-binding-effect';
+import { Refreshable } from './internal/Refreshable';
+import type { BindingsConsumerProps } from './types/props';
+import type { BindingsConsumerRenderCallback } from './types/render-callback';
+
+export * from './types/exports';
+
+/**
+ * A component that is rerendered based on input binding changes.
+ *
+ * A BindingsConsumer must have exactly one function child.
+ *
+ * The general usage pattern is something like:
+ *
+ * ```
+ * <BindingsConsumer bindings={{someBinding, anotherBinding}}>
+ *   {({someBinding, anotherBinding}) => <Typography>{someBinding} - {anotherBinding}</Typography>}
+ * <BindingsConsumer>
+ * ```
+ */
+export const BindingsConsumer = <DependenciesT extends BindingDependencies>(
+  props: BindingsConsumerProps<DependenciesT> & {
+    children: BindingsConsumerRenderCallback<DependenciesT>;
+  }
+) => {
+  const {
+    children,
+    // BindingsConsumerProps
+    bindings,
+    areInputValuesEqual,
+    detectInputChanges = false,
+    makeComparableInputValue
+  } = props;
+
+  const limiterOptions = pickLimiterOptions(props);
+  if (limiterOptions.priority === undefined) {
+    limiterOptions.priority = UI_PRIORITY;
+  }
+
+  const isNonNamedBindings = Array.isArray(bindings) || isBinding(bindings);
+  const namedBindings = isNonNamedBindings ? undefined : (bindings as NamedBindingDependencies);
+  const namedBindingsKeys = namedBindings !== undefined ? getTypedKeys(namedBindings) : undefined;
+
+  // Doesn't need to be stable since Refreshable will always get rendered with the latest anyway
+  const getDependencies = () => bindings as DependenciesT;
+
+  // Doesn't need to be stable since Refreshable will always get rendered with the latest anyway
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  const getDependencyValues = () => extractBindingDependencyValues<DependenciesT>({ bindings, namedBindingsKeys });
+
+  const refreshControls = useRef<{ refresh?: () => void }>({});
+
+  const cancelLastPendingRefresh = useBindingEffect(bindings, () => refreshControls.current.refresh?.(), {
+    areInputValuesEqual,
+    detectInputChanges,
+    makeComparableInputValue,
+    ...limiterOptions
+  });
+
+  return (
+    <Refreshable
+      cancelLastPendingRefresh={cancelLastPendingRefresh}
+      getDependencies={getDependencies}
+      getDependencyValues={getDependencyValues}
+      refreshControls={refreshControls}
+      render={children}
+    />
+  );
+};

package/src/components/BindingsConsumer/internal/Refreshable.tsx

@@ -0,0 +1,38 @@
+import type { MutableRefObject } from 'react';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import type { BindingDependencies } from '../../../binding/types/binding-dependencies';
+import type { InferBindingValueTypes } from '../../../binding/types/infer-binding-value-types';
+import { useIsMountedRef } from '../../../internal-hooks/use-is-mounted-ref';
+import type { BindingsConsumerRenderCallback } from '../types/render-callback';
+
+/** A component that returns a refresh method that can be used to manually rerender */
+export const Refreshable = <DependenciesT extends BindingDependencies>({
+  cancelLastPendingRefresh,
+  getDependencies,
+  getDependencyValues,
+  refreshControls,
+  render
+}: {
+  cancelLastPendingRefresh: () => void;
+  getDependencies: () => DependenciesT;
+  getDependencyValues: () => InferBindingValueTypes<DependenciesT>;
+  refreshControls: MutableRefObject<{ refresh?: () => void }>;
+  render: BindingsConsumerRenderCallback<DependenciesT>;
+}) => {
+  const isMounted = useIsMountedRef();
+
+  const [refreshId, setRefreshId] = useState(0);
+
+  // Immediately refreshes (using ReactDOM.unstable_batchedUpdates) if mounted
+  refreshControls.current.refresh = () => {
+    if (isMounted.current ?? false) {
+      ReactDOM.unstable_batchedUpdates(() => setRefreshId(refreshId + 1));
+    }
+  };
+
+  cancelLastPendingRefresh();
+
+  return <>{render(getDependencyValues(), getDependencies())}</>;
+};

package/src/components/BindingsConsumer/types/exports.ts

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './render-callback';

package/src/components/BindingsConsumer/types/props.ts

@@ -0,0 +1,30 @@
+import type { BindingDependencies } from '../../../binding/types/binding-dependencies';
+import type { LimiterOptions } from '../../../limiter/types/LimiterOptions';
+
+export type BindingsConsumerProps<DependenciesT extends BindingDependencies> = LimiterOptions & {
+  /** Bindings that cause the consumer to rerender.  Undefined values are ignored */
+  bindings?: DependenciesT;
+
+  /**
+   * If specified, overrides the function used to compare input values
+   *
+   * @defaultValue `_.isEqual`, which can be globally overridden using `setAreEqual`
+   */
+  areInputValuesEqual?: (a: any, b: any) => boolean;
+  /**
+   * - If `true` – `areInputValuesEqual` is used to compare the old and new results of `makeComparableInputValue` when any of the input
+   * bindings are changed.  If the values are equal, the transformer won't be run.  If they're unequal, the transformer will be run.
+   * - If `false` – old and new values aren't compared and the transformer will always be run any time the bindings change.
+   *
+   * @defaultValue `false`
+   */
+  detectInputChanges?: boolean;
+  /**
+   * By default, when `detectInputChanges` is `true`, the input is compared using all specified bindings.  This behavior can be overridden
+   * by providing this function to generate a value that can be compared instead.  The generated value will be remembered until the next
+   * comparison is needed.  Comparisons are performed using `areInputValuesEqual`
+   *
+   * @defaultValue A function that returns the values of all input bindings
+   */
+  makeComparableInputValue?: () => any;
+};

package/src/components/BindingsConsumer/types/render-callback.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+import type { BindingDependencies } from '../../../binding/types/binding-dependencies';
+import type { InferBindingValueTypes } from '../../../binding/types/infer-binding-value-types';
+
+/**
+ * Called to render the contents of a BindingsConsumer on the initial render and when the associated bindings changes.
+ *
+ * @param bindingValues - The extracted values of the associated bindings.
+ * @param bindings - The original dependencies.
+ */
+export type BindingsConsumerRenderCallback<DependenciesT extends BindingDependencies> = (
+  bindingValues: InferBindingValueTypes<DependenciesT>,
+  bindings: DependenciesT
+) => ReactNode;

package/src/components/exports.ts

@@ -0,0 +1 @@
+export * from './BindingsConsumer';

package/src/config/are-equal.ts

@@ -0,0 +1,16 @@
+/* istanbul ignore file */
+
+import _ from 'lodash';
+
+let globalAreEqual = (a: any, b: any) => _.isEqual(a, b);
+
+/** Uses the function registered with `setAreEqual` to determine if two values are equal */
+export const areEqual = (a: any, b: any) => globalAreEqual(a, b);
+
+/** Returns the current `areEqual` function, which can be used when overriding using `setAreEqual` to compose comparison checks */
+export const getAreEqual = () => globalAreEqual;
+
+/** Call to override the default `areEqual` function, which uses `_.isEqual` from Lodash */
+export const setAreEqual = (newAreEqual: (a: any, b: any) => boolean) => {
+  globalAreEqual = newAreEqual;
+};

package/src/config/exports.ts

@@ -0,0 +1,5 @@
+/* istanbul ignore file */
+
+export * from './are-equal';
+export * from './logging';
+export * from './stats-handler';

package/src/config/logging.ts

@@ -0,0 +1,31 @@
+/* istanbul ignore file */
+
+let globalLogger: Logger = {};
+
+const globalSpecialLoggingEnabledFor: Partial<Record<SpecialLoggingType, boolean | undefined>> = {
+  'binding-lock-duration-warnings': false
+};
+
+export interface Logger {
+  debug?: (message?: any, ...optionalParams: any[]) => void;
+  error?: (message?: any, ...optionalParams: any[]) => void;
+  info?: (message?: any, ...optionalParams: any[]) => void;
+  log?: (message?: any, ...optionalParams: any[]) => void;
+  warn?: (message?: any, ...optionalParams: any[]) => void;
+}
+
+/** Gets the logger registered using `setLogger` */
+export const getLogger = () => globalLogger;
+
+/** Sets the logger to be used.  It's not recommended to set a logger in production environments */
+export const setLogger = (logger: Logger) => {
+  globalLogger = logger;
+};
+
+export type SpecialLoggingType = 'binding-lock-duration-warnings';
+
+/** Checks if logging is enabled for the specified type */
+export const isSpecialLoggingEnabledFor = (type: SpecialLoggingType) => globalSpecialLoggingEnabledFor[type] ?? false;
+
+/** Enables or disables logging for the specified type */
+export const setSpecialLoggingEnabledFor = (type: SpecialLoggingType, enabled: boolean) => (globalSpecialLoggingEnabledFor[type] = enabled);

package/src/config/stats-handler.ts

@@ -0,0 +1,21 @@
+/* istanbul ignore file */
+
+import type { ReadonlyBinding } from '../binding/types/readonly-binding';
+
+let globalStatsHandler: StatsHandler = {};
+
+export interface StatsHandler {
+  trackDidMakeBinding?: (args: { binding: ReadonlyBinding }) => void;
+  trackBindingDidAddChangeListener?: (args: { binding: ReadonlyBinding }) => void;
+  trackBindingDidRemoveChangeListener?: (args: { binding: ReadonlyBinding }) => void;
+  trackBindingDidSetRaw?: (args: { binding: ReadonlyBinding; durationMSec: number; numListeners: number }) => void;
+  trackDerivedBindingTransformerDidRun?: (args: { id: string; durationMSec: number }) => void;
+}
+
+/** Gets the stats handler registered using `setStatsHandler` */
+export const getStatsHandler = () => globalStatsHandler;
+
+/** Sets a stats handler that can be used for debugging or analyzing use.  Not recommended for production environments */
+export const setStatsHandler = (statsHandler: StatsHandler) => {
+  globalStatsHandler = statsHandler;
+};

package/src/default-queue/__tests__/default-queue.test.tsx

@@ -0,0 +1,32 @@
+import type { RunQueue } from 'std-client-run-queue';
+import React from 'react';
+
+import { runInDom } from '../../__test_dependency__';
+import { DefaultQueueProvider, useDefaultQueue } from '../default-queue-context';
+
+describe('useDefaultQueue', () => {
+  it('default should work', () =>
+    runInDom(() => {
+      expect(useDefaultQueue().id).toBe('default');
+    }));
+
+  it('override should work', () =>
+    runInDom(({ onMount }) => {
+      let defaultQueue: RunQueue | undefined;
+      const MyComponent = () => {
+        defaultQueue = useDefaultQueue();
+
+        return <></>;
+      };
+
+      onMount(() => {
+        expect(defaultQueue?.id).toBe('override:default');
+      });
+
+      return (
+        <DefaultQueueProvider idPrefix="override">
+          <MyComponent />
+        </DefaultQueueProvider>
+      );
+    }));
+});

package/src/default-queue/default-queue-context.tsx

@@ -0,0 +1,48 @@
+import type { RunQueueOptions } from 'std-client-run-queue';
+import { RunQueue } from 'std-client-run-queue';
+import type { PropsWithChildren } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+
+import { useStableValue } from '../utility-hooks/use-stable-value';
+
+const DefaultQueueContext = React.createContext<RunQueue>(new RunQueue('default'));
+
+export const useDefaultQueue = () => useContext(DefaultQueueContext);
+
+export interface DefaultQueueProviderProps extends RunQueueOptions {
+  /** A technical, but human-readable ID prefix, which isn't guaranteed to be unique.  This will be suffixed by `':default'` */
+  idPrefix: string;
+
+  /**
+   * If `true`, `cancelAll` is called on the associated queue whenever this component is unmounted or whenever the idPrefix or other
+   * options change.
+   *
+   * @defaultValue `false`
+   */
+  cancelAllOnUnmount?: boolean;
+}
+
+/** Provides a new default queue, which can be used in children using `useDefaultQueue` */
+export const DefaultQueueProvider = ({
+  children,
+  idPrefix,
+  cancelAllOnUnmount = false,
+  ...options
+}: PropsWithChildren<DefaultQueueProviderProps>) => {
+  const stableOptions = useStableValue(options);
+  const queue = useMemo(() => new RunQueue(`${idPrefix}:default`, stableOptions), [idPrefix, stableOptions]);
+  const previousQueue = useRef<RunQueue>(queue);
+
+  useEffect(() => {
+    if (previousQueue.current !== queue) {
+      if (cancelAllOnUnmount) {
+        previousQueue.current?.cancelAll();
+      }
+      previousQueue.current = queue;
+    }
+
+    return cancelAllOnUnmount ? queue.cancelAll : undefined;
+  }, [cancelAllOnUnmount, queue]);
+
+  return <DefaultQueueContext.Provider value={queue}>{children}</DefaultQueueContext.Provider>;
+};

package/src/default-queue/exports.ts

@@ -0,0 +1 @@
+export * from './default-queue-context';

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from './bc/exports';
+export * from './binding/exports';
+export * from './binding-utils/exports';
+export * from './components/exports';
+export * from './config/exports';
+export * from './default-queue/exports';
+export * from './limiter/exports';
+export * from './make-bindable-component/exports';
+export * from './resolveable/exports';
+export * from './specialized-bindings/exports';
+export * from './synchronization/exports';
+export * from './types/exports';
+export * from './use-binding-effect/exports';
+export * from './utility-hooks/exports';

package/src/internal-hooks/__tests__/use-is-mounted.test.ts

@@ -0,0 +1,18 @@
+import { runInDom } from '../../__test_dependency__';
+import { useIsMountedRef } from '../use-is-mounted-ref';
+
+describe('useIsMounted', () => {
+  it('value should change when mounted and unmounted', () =>
+    runInDom(({ onMount, onUnmount }) => {
+      const isMounted = useIsMountedRef();
+      expect(isMounted.current).toBeFalsy();
+
+      onMount(() => {
+        expect(isMounted.current).toBeTruthy();
+      });
+
+      onUnmount(() => {
+        expect(isMounted.current).toBeFalsy();
+      });
+    }));
+});