@isograph/react-disposable-state 0.1.1 → 0.3.0

package/src/useLazyDisposableState.test.tsx

@@ -0,0 +1,70 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import React, { useEffect, useState } from 'react';
+import { create } from 'react-test-renderer';
+import { describe, expect, test, vi } from 'vitest';
+import { ParentCache } from './ParentCache';
+import { useLazyDisposableState } from './useLazyDisposableState';
+function createCache<T>(value: T) {
+  const disposeItem = vi.fn();
+  const factory = vi.fn(() => {
+    const pair: ItemCleanupPair<T> = [value, disposeItem];
+    return pair;
+  });
+  const cache = new ParentCache(factory);
+  return { cache, disposeItem };
+}
+
+function promiseWithResolvers() {
+  let resolve;
+  let reject;
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  return { resolve, reject, promise };
+}
+
+describe('useLazyDisposableState', async () => {
+  test('on cache change, it should dispose previous cache', async () => {
+    const cache1 = createCache(1);
+    const cache2 = createCache(2);
+    const renders = vi.fn();
+
+    let unmounted = promiseWithResolvers();
+    let committed = promiseWithResolvers();
+
+    function TestComponent() {
+      const [cache, setCache] = useState(cache1.cache);
+      const { state } = useLazyDisposableState(cache);
+
+      useEffect(() => {
+        setCache(cache2.cache);
+
+        return () => {
+          unmounted.resolve();
+        };
+      }, []);
+
+      useEffect(() => {
+        if (state == 1) return;
+        committed.resolve();
+      }, [state]);
+
+      renders(state);
+
+      return null;
+    }
+
+    const root = create(<TestComponent />, { unstable_isConcurrent: true });
+    await committed.promise;
+    expect(cache1.disposeItem).toHaveBeenCalled();
+    expect(cache1.cache.factory).toHaveBeenCalledOnce();
+    root.unmount();
+    await unmounted.promise;
+    expect(cache2.disposeItem).toHaveBeenCalled();
+    expect(cache2.cache.factory).toHaveBeenCalledOnce();
+    expect(renders).toHaveBeenNthCalledWith(1, 1);
+    expect(renders).toHaveBeenNthCalledWith(2, 2);
+    expect(renders).toHaveBeenCalledTimes(2);
+  });
+});

package/src/useLazyDisposableState.ts

@@ -1,40 +1,52 @@
 'use strict';
 
 import { useEffect, useRef } from 'react';
-import type { ItemCleanupPair } from '@isograph/disposable-types';
+
+import type { ItemCleanupPair } from '@isograph/isograph-disposable-types';
 import { ParentCache } from './ParentCache';
-import { useCachedPrecommitValue } from './useCachedPrecommitValue';
+
+import { type UnassignedState } from './useUpdatableDisposableState';
+import { useCachedResponsivePrecommitValue } from './useCachedResponsivePrecommitValue';
 
 /**
  * useLazyDisposableState<T>
  * - Takes a mutable parent cache and a factory function
  * - Returns { state: T }
  *
- * This lazily loads the disposable item using useCachedPrecommitValue, then
+ * This lazily loads the disposable item using useCachedResponsivePrecommitValue, then
  * (on commit) sets it in state. The item continues to be returned after
  * commit and is disposed when the hook unmounts.
  */
-export function useLazyDisposableState<T>(parentCache: ParentCache<T>): {
+export function useLazyDisposableState<T>(
+  parentCache: ParentCache<Exclude<T, UnassignedState>>,
+): {
   state: T;
 } {
   const itemCleanupPairRef = useRef<ItemCleanupPair<T> | null>(null);
 
-  const preCommitItem = useCachedPrecommitValue(parentCache, (pair) => {
-    itemCleanupPairRef.current = pair;
-  });
+  const preCommitItem = useCachedResponsivePrecommitValue(
+    parentCache,
+    (pair) => {
+      itemCleanupPairRef.current?.[1]();
+      itemCleanupPairRef.current = pair;
+    },
+  );
 
   useEffect(() => {
-    const cleanupFn = itemCleanupPairRef.current?.[1];
-    // TODO confirm useEffect is called in order.
-    if (cleanupFn == null) {
-      throw new Error(
-        'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
-      );
-    }
-    return cleanupFn;
+    return () => {
+      const cleanupFn = itemCleanupPairRef.current?.[1];
+      // TODO confirm useEffect is called in order.
+      if (cleanupFn == null) {
+        throw new Error(
+          'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
+        );
+      }
+      return cleanupFn();
+    };
   }, []);
 
   const returnedItem = preCommitItem?.state ?? itemCleanupPairRef.current?.[0];
+
   if (returnedItem != null) {
     return { state: returnedItem };
   }

package/src/useUpdatableDisposableState.ts

@@ -2,7 +2,7 @@ import { ItemCleanupPair } from '@isograph/disposable-types';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHasCommittedRef } from './useHasCommittedRef';
 
-export const UNASSIGNED_STATE = Symbol();
+export const UNASSIGNED_STATE: unique symbol = Symbol();
 export type UnassignedState = typeof UNASSIGNED_STATE;
 
 type UseUpdatableDisposableStateReturnValue<T> = {

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.pkg.json",
+  "compilerOptions": {
+    "noEmit": true
+  }
+}