@isograph/react-disposable-state 0.0.4 → 0.1.0

package/src/useCachedPrecommitValue.test.tsx

@@ -1,13 +1,13 @@
-import { describe, test, vi, expect, assert } from "vitest";
-import { ParentCache } from "./ParentCache";
-import { ItemCleanupPair } from "@isograph/disposable-types";
-import { useCachedPrecommitValue } from "./useCachedPrecommitValue";
-import React from "react";
-import { create } from "react-test-renderer";
-import { CacheItem, CacheItemState } from "./CacheItem";
+import { describe, test, vi, expect, assert } from 'vitest';
+import { ParentCache } from './ParentCache';
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import { useCachedPrecommitValue } from './useCachedPrecommitValue';
+import React from 'react';
+import { create } from 'react-test-renderer';
+import { CacheItem, CacheItemState } from './CacheItem';
 
 function getItem<T>(cache: ParentCache<T>): CacheItem<T> | null {
-  return (cache as any).__item;
+  return (cache as any).__cacheItem;
 }
 
 function getState<T>(cacheItem: CacheItem<T>): CacheItemState<T> {
@@ -54,14 +54,14 @@ function promiseAndResolver() {
 async function awaitableCreate(Component, isConcurrent) {
   const element = create(
     Component,
-    isConcurrent ? { unstable_isConcurrent: true } : undefined
+    isConcurrent ? { unstable_isConcurrent: true } : undefined,
   );
   await shortPromise();
   return element;
 }
 
-describe("useCachedPrecommitValue", () => {
-  test("on initial render, it should call getOrPopulateAndTemporaryRetain", async () => {
+describe('useCachedPrecommitValue', () => {
+  test('on initial render, it should call getOrPopulateAndTemporaryRetain', async () => {
     const disposeItem = vi.fn();
     const factory = vi.fn(() => {
       const pair: ItemCleanupPair<number> = [1, disposeItem];
@@ -70,7 +70,7 @@ describe("useCachedPrecommitValue", () => {
     const cache = new ParentCache(factory);
     const getOrPopulateAndTemporaryRetain = vi.spyOn(
       cache,
-      "getOrPopulateAndTemporaryRetain"
+      'getOrPopulateAndTemporaryRetain',
     );
 
     const componentCommits = vi.fn();
@@ -103,7 +103,7 @@ describe("useCachedPrecommitValue", () => {
     expect(render).toHaveBeenCalledTimes(1);
   });
 
-  test("on commit, it should call the provided callback and empty the parent cache", async () => {
+  test('on commit, it should call the provided callback and empty the parent cache', async () => {
     const disposeItem = vi.fn();
     const factory = vi.fn(() => {
       const pair: ItemCleanupPair<number> = [1, disposeItem];
@@ -124,7 +124,7 @@ describe("useCachedPrecommitValue", () => {
         expect(componentCommits).toHaveBeenCalledTimes(1);
         expect(hookOnCommit).toBeCalledTimes(1);
         expect(hookOnCommit.mock.calls[0][0][0]).toBe(1);
-        expect(typeof hookOnCommit.mock.calls[0][0][1]).toBe("function");
+        expect(typeof hookOnCommit.mock.calls[0][0][1]).toBe('function');
         expect(factory).toBeCalledTimes(1);
         expect(disposeItem).not.toBeCalled();
         expect(cache.isEmpty()).toBe(true);
@@ -140,7 +140,7 @@ describe("useCachedPrecommitValue", () => {
     expect(render).toHaveBeenCalledTimes(1);
   });
 
-  test("after commit, on subsequent renders it should return null", async () => {
+  test('after commit, on subsequent renders it should return null', async () => {
     const disposeItem = vi.fn();
     const factory = vi.fn(() => {
       const pair: ItemCleanupPair<number> = [1, disposeItem];
@@ -186,8 +186,8 @@ describe("useCachedPrecommitValue", () => {
   });
 
   test(
-    "on repeated pre-commit renders, if the temporary retain is not disposed, " +
-      "it should re-call getOrPopulateAndTemporaryRetain but not call factory again",
+    'on repeated pre-commit renders, if the temporary retain is not disposed, ' +
+      'it should re-call getOrPopulateAndTemporaryRetain but not call factory again',
     async () => {
       const disposeItem = vi.fn();
       const factory = vi.fn(() => {
@@ -197,7 +197,7 @@ describe("useCachedPrecommitValue", () => {
       const cache = new ParentCache(factory);
       const getOrPopulateAndTemporaryRetain = vi.spyOn(
         cache,
-        "getOrPopulateAndTemporaryRetain"
+        'getOrPopulateAndTemporaryRetain',
       );
 
       const componentCommits = vi.fn();
@@ -213,7 +213,7 @@ describe("useCachedPrecommitValue", () => {
 
         renderCount++;
         expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(
-          renderCount
+          renderCount,
         );
 
         React.useEffect(() => {
@@ -233,7 +233,7 @@ describe("useCachedPrecommitValue", () => {
           <TestComponent />
           <Suspender promise={promise} isResolvedRef={isResolvedRef} />
         </React.Suspense>,
-        true
+        true,
       );
 
       expect(componentCommits).toHaveBeenCalledTimes(0);
@@ -244,12 +244,12 @@ describe("useCachedPrecommitValue", () => {
 
       expect(componentCommits).toHaveBeenCalledTimes(1);
       expect(render).toHaveBeenCalledTimes(2);
-    }
+    },
   );
 
   test(
-    "on repeated pre-commit renders, if the temporary retain is disposed, " +
-      "it should re-call getOrPopulateAndTemporaryRetain and factory",
+    'on repeated pre-commit renders, if the temporary retain is disposed, ' +
+      'it should re-call getOrPopulateAndTemporaryRetain and factory',
     async () => {
       const disposeItem = vi.fn();
       let factoryValue = 0;
@@ -262,7 +262,7 @@ describe("useCachedPrecommitValue", () => {
 
       const getOrPopulateAndTemporaryRetain = vi.spyOn(
         cache,
-        "getOrPopulateAndTemporaryRetain"
+        'getOrPopulateAndTemporaryRetain',
       );
 
       const componentCommits = vi.fn();
@@ -305,7 +305,7 @@ describe("useCachedPrecommitValue", () => {
           <TestComponent />
           <Suspender promise={promise} isResolvedRef={isResolvedRef} />
         </React.Suspense>,
-        true
+        true,
       );
 
       expect(componentCommits).toHaveBeenCalledTimes(0);
@@ -316,13 +316,13 @@ describe("useCachedPrecommitValue", () => {
 
       expect(componentCommits).toHaveBeenCalledTimes(1);
       expect(render).toHaveBeenCalledTimes(2);
-    }
+    },
   );
 
   test(
-    "if the item has been disposed between the render and the commit, " +
-      "and the parent cache is empty, it will call factory again, re-render an " +
-      "additional time and called onCommit with the newly generated item",
+    'if the item has been disposed between the render and the commit, ' +
+      'and the parent cache is empty, it will call factory again, re-render an ' +
+      'additional time and called onCommit with the newly generated item',
     async () => {
       const disposeItem = vi.fn();
       let factoryCount = 0;
@@ -334,11 +334,11 @@ describe("useCachedPrecommitValue", () => {
       const cache = new ParentCache(factory);
       const getOrPopulateAndTemporaryRetain = vi.spyOn(
         cache,
-        "getOrPopulateAndTemporaryRetain"
+        'getOrPopulateAndTemporaryRetain',
       );
       const getAndPermanentRetainIfPresent = vi.spyOn(
         cache,
-        "getAndPermanentRetainIfPresent"
+        'getAndPermanentRetainIfPresent',
       );
 
       const componentCommits = vi.fn();
@@ -354,7 +354,7 @@ describe("useCachedPrecommitValue", () => {
           expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(1);
           expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
           expect(getAndPermanentRetainIfPresent.mock.results[0].value).toBe(
-            null
+            null,
           );
           expect(factory).toHaveBeenCalledTimes(2);
           expect(cache.isEmpty()).toBe(true);
@@ -402,20 +402,20 @@ describe("useCachedPrecommitValue", () => {
           <TestComponent />
           <CodeExecutor />
         </>,
-        false
+        false,
       );
 
       // This code executes after the commit and re-render of TestComponent.
       // The commit triggers a re-render, because the item was disposed.
       expect(render).toHaveBeenCalledTimes(2);
       expect(factory).toBeCalledTimes(2);
-    }
+    },
   );
 
   test(
-    "if, between the render and the commit, the item has been disposed, " +
-      "and the parent cache is not empty, it will not call factory again, will re-render " +
-      "an additional time and will call onCommit with the value in the parent cache",
+    'if, between the render and the commit, the item has been disposed, ' +
+      'and the parent cache is not empty, it will not call factory again, will re-render ' +
+      'an additional time and will call onCommit with the value in the parent cache',
     async () => {
       const disposeItem = vi.fn();
       let factoryCount = 0;
@@ -427,7 +427,7 @@ describe("useCachedPrecommitValue", () => {
       const cache = new ParentCache(factory);
       const getAndPermanentRetainIfPresent = vi.spyOn(
         cache,
-        "getAndPermanentRetainIfPresent"
+        'getAndPermanentRetainIfPresent',
       );
 
       const componentCommits = vi.fn();
@@ -443,7 +443,7 @@ describe("useCachedPrecommitValue", () => {
           expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(2);
           expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
           expect(getAndPermanentRetainIfPresent.mock.results[0].value[0]).toBe(
-            2
+            2,
           );
           expect(factory).toHaveBeenCalledTimes(2);
           expect(hookOnCommit).toHaveBeenCalledTimes(1);
@@ -455,7 +455,7 @@ describe("useCachedPrecommitValue", () => {
 
       const getOrPopulateAndTemporaryRetain = vi.spyOn(
         cache,
-        "getOrPopulateAndTemporaryRetain"
+        'getOrPopulateAndTemporaryRetain',
       );
 
       // wat is going on?
@@ -499,7 +499,7 @@ describe("useCachedPrecommitValue", () => {
           <TestComponent />
           <CodeExecutor />
         </React.Suspense>,
-        false
+        false,
       );
 
       // This code executes after the commit and re-render of TestComponent.
@@ -508,13 +508,12 @@ describe("useCachedPrecommitValue", () => {
       // Note that this is the same number of calls as inside of CodeExecutor,
       // implying that the factory function was not called again.
       expect(factory).toBeCalledTimes(2);
-    }
+    },
   );
 
   test(
-    "If the component unmounts before committing, " +
-      "the item will remain in the parent cache, " +
-      "temporarily retained",
+    'After render but before commit, the item will ' +
+      'be in the parent cache, temporarily retained',
     async () => {
       const disposeItem = vi.fn();
       const factory = vi.fn(() => {
@@ -541,36 +540,21 @@ describe("useCachedPrecommitValue", () => {
       // wat is going on?
       //
       // We want to test a scenario where the component unmounts before committing.
+      // However, we cannot distinguish between an unmount before commit and a
+      // render and a commit that hasn't happened yet.
       //
-      // The subcomponents are rendered in order: TestComponent followed by CodeExecutor.
-      // So, during CodeExecutor, we trigger a state update that causes the ParentComponent
-      // to not render the children.
-      function CodeExecutor() {
-        setShowChildren(false);
-        return null;
-      }
-
-      let setShowChildren;
-      function ParentComponent({ children }) {
-        const [showChildren, _setShowChildren] = React.useState(true);
-        setShowChildren = _setShowChildren;
-
-        if (showChildren) {
-          return children;
-        } else {
-          return null;
-        }
-      }
+      // This can be simulated with suspense.
+      //
+      // This test and 'on initial render, it should call getOrPopulateAndTemporaryRetain'
+      // can be merged
 
+      const { promise, isResolvedRef } = promiseAndResolver();
       const element = await awaitableCreate(
-        <ParentComponent>
+        <React.Suspense fallback={null}>
           <TestComponent />
-          <CodeExecutor />
-        </ParentComponent>,
-        // If we're not in concurrent mode, TestComponent will mount before
-        // unmounting. This perhaps is a bug in react-test-renderer. Regardless,
-        // we're not interested in that scenario.
-        true
+          <Suspender promise={promise} isResolvedRef={isResolvedRef} />
+        </React.Suspense>,
+        true,
       );
 
       // This code executes after the commit and re-render of TestComponent.
@@ -579,9 +563,9 @@ describe("useCachedPrecommitValue", () => {
       expect(componentCommits).toHaveBeenCalledTimes(0);
       const item = getItem(cache)!;
       const state = getState(item);
-      assert(state.kind === "InParentCacheAndNotDisposed");
+      assert(state.kind === 'InParentCacheAndNotDisposed');
       expect(state.permanentRetainCount).toBe(0);
       expect(state.temporaryRetainCount).toBe(1);
-    }
+    },
   );
 });

package/src/useCachedPrecommitValue.ts

@@ -1,9 +1,9 @@
-"use strict";
+'use strict';
 
-import { useEffect, useState } from "react";
-import { ParentCache } from "./ParentCache";
-import { useHasCommittedRef } from "./useHasCommittedRef";
-import { ItemCleanupPair } from "@isograph/isograph-disposable-types/dist";
+import { useEffect, useState } from 'react';
+import { ParentCache } from './ParentCache';
+import { useHasCommittedRef } from './useHasCommittedRef';
+import { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
 
 /**
  * usePrecommitValue<T>
@@ -38,7 +38,7 @@ import { ItemCleanupPair } from "@isograph/isograph-disposable-types/dist";
  */
 export function useCachedPrecommitValue<T>(
   parentCache: ParentCache<T>,
-  onCommit: (pair: ItemCleanupPair<T>) => void
+  onCommit: (pair: ItemCleanupPair<T>) => void,
 ): { state: T } | null {
   // TODO: there should be two APIs. One in which we always re-render if the
   // committed item was not returned during the last render, and one in which
@@ -66,7 +66,7 @@ export function useCachedPrecommitValue<T>(
     // After the above, we have a non-disposed item and a cleanup function, which we
     // can pass to onCommit.
     const undisposedPair = cacheItem.permanentRetainIfNotDisposed(
-      disposeOfTemporaryRetain
+      disposeOfTemporaryRetain,
     );
     if (undisposedPair !== null) {
       onCommit(undisposedPair);

package/src/useDisposableState.ts

@@ -1,12 +1,12 @@
-import { useEffect, useRef } from "react";
-import { ParentCache } from "./ParentCache";
-import { ItemCleanupPair } from "@isograph/disposable-types";
-import { useCachedPrecommitValue } from "./useCachedPrecommitValue";
+import { useEffect, useRef } from 'react';
+import { ParentCache } from './ParentCache';
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import { useCachedPrecommitValue } from './useCachedPrecommitValue';
 import {
   UNASSIGNED_STATE,
   UnassignedState,
   useUpdatableDisposableState,
-} from "./useUpdatableDisposableState";
+} from './useUpdatableDisposableState';
 
 type UseUpdatableDisposableStateReturnValue<T> = {
   state: T;
@@ -14,7 +14,7 @@ type UseUpdatableDisposableStateReturnValue<T> = {
 };
 
 export function useDisposableState<T = never>(
-  parentCache: ParentCache<T>
+  parentCache: ParentCache<T>,
 ): UseUpdatableDisposableStateReturnValue<T> {
   const itemCleanupPairRef = useRef<ItemCleanupPair<T> | null>(null);
 
@@ -33,13 +33,13 @@ export function useDisposableState<T = never>(
           itemCleanupPairRef.current = null;
         } else {
           throw new Error(
-            "itemCleanupPairRef.current is unexpectedly null. " +
-              "This indicates a bug in react-disposable-state."
+            'itemCleanupPairRef.current is unexpectedly null. ' +
+              'This indicates a bug in react-disposable-state.',
           );
         }
       }
     },
-    [stateFromDisposableStateHook]
+    [stateFromDisposableStateHook],
   );
 
   useEffect(function cleanupItemCleanupPairRefIfSetStateNotCalled() {
@@ -81,12 +81,14 @@ export function useDisposableState<T = never>(
 function tsTests() {
   let x: any;
   const a = useDisposableState(x);
+  // This should be a compiler error, because the generic is inferred to be of
+  // type never. TODO determine why this doesn't break the build!
   // @ts-expect-error
-  a.setState(["asdf", () => {}]);
+  a.setState(['asdf', () => {}]);
   // @ts-expect-error
   a.setState([UNASSIGNED_STATE, () => {}]);
   const b = useDisposableState<string | UnassignedState>(x);
   // @ts-expect-error
   b.setState([UNASSIGNED_STATE, () => {}]);
-  b.setState(["asdf", () => {}]);
+  b.setState(['asdf', () => {}]);
 }

package/src/useHasCommittedRef.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useRef } from 'react';
 
 /**
  * Returns true if the component has committed, false otherwise.

package/src/useLazyDisposableState.ts

@@ -1,9 +1,9 @@
-"use strict";
+'use strict';
 
-import { useEffect, useRef } from "react";
-import type { ItemCleanupPair } from "@isograph/disposable-types";
-import { ParentCache } from "./ParentCache";
-import { useCachedPrecommitValue } from "./useCachedPrecommitValue";
+import { useEffect, useRef } from 'react';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
+import { ParentCache } from './ParentCache';
+import { useCachedPrecommitValue } from './useCachedPrecommitValue';
 
 /**
  * useLazyDisposableState<T>
@@ -28,7 +28,7 @@ export function useLazyDisposableState<T>(parentCache: ParentCache<T>): {
     // TODO confirm useEffect is called in order.
     if (cleanupFn == null) {
       throw new Error(
-        "cleanupFn unexpectedly null. This indicates a bug in react-disposable-state."
+        'cleanupFn unexpectedly null. This indicates a bug in react-disposable-state.',
       );
     }
     return cleanupFn;
@@ -43,6 +43,6 @@ export function useLazyDisposableState<T>(parentCache: ParentCache<T>): {
   // is non-null. During the initial commit, we assign itemCleanupPairRef.current,
   // so during subsequent renders, itemCleanupPairRef.current is non-null.
   throw new Error(
-    "returnedItem was unexpectedly null. This indicates a bug in react-disposable-state."
+    'returnedItem was unexpectedly null. This indicates a bug in react-disposable-state.',
   );
 }