@isograph/react-disposable-state 0.1.1 → 0.2.0

package/dist/ParentCache.js

@@ -21,6 +21,8 @@ const CacheItem_1 = require("./CacheItem");
  *   be called
  */
 class ParentCache {
+    // TODO pass an onEmpty function, which can e.g. remove this ParentCache
+    // from some parent object.
     constructor(factory) {
         this.__cacheItem = null;
         this.__factory = factory;

package/dist/useCachedPrecommitValue.d.ts

@@ -1,5 +1,5 @@
 import { ParentCache } from './ParentCache';
-import { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
+import { ItemCleanupPair } from '@isograph/disposable-types';
 /**
  * usePrecommitValue<T>
  * - Takes a mutable parent cache, a factory function, and an onCommit callback.
@@ -9,7 +9,7 @@ import { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
  * - If the T returned during the last render is not the same as the one that
- *   is passed to onCommit, during the commit phase, will schedule another render.
+ *   is passed to onCommit, during the commit phase, it will schedule another render.
  *
  * Invariant: the returned T has not been disposed during the tick of the render.
  * The T passed to the onCommit callback has not been disposed when the onCommit

package/dist/useCachedPrecommitValue.js

@@ -12,7 +12,7 @@ const useHasCommittedRef_1 = require("./useHasCommittedRef");
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
  * - If the T returned during the last render is not the same as the one that
- *   is passed to onCommit, during the commit phase, will schedule another render.
+ *   is passed to onCommit, during the commit phase, it will schedule another render.
  *
  * Invariant: the returned T has not been disposed during the tick of the render.
  * The T passed to the onCommit callback has not been disposed when the onCommit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react-disposable-state",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Primitives for managing disposable state in React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -14,11 +14,14 @@
     "test-watch": "vitest watch",
     "coverage": "vitest run --coverage",
     "note": "WE SHOULD ALSO TEST HERE",
-    "prepack": "yarn run compile"
+    "prepack": "yarn run compile",
+    "tsc": "tsc"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.1.1",
-    "react": "^18.2.0"
+    "@isograph/disposable-types": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.31",
@@ -30,5 +33,6 @@
     "type": "git",
     "url": "git+https://github.com/isographlabs/isograph.git",
     "directory": "libs/isograph-react-disposable-state"
-  }
+  },
+  "sideEffects": false
 }

package/src/ParentCache.ts

@@ -28,6 +28,8 @@ export class ParentCache<T> {
   private __cacheItem: CacheItem<T> | null = null;
   private readonly __factory: Factory<T>;
 
+  // TODO pass an onEmpty function, which can e.g. remove this ParentCache
+  // from some parent object.
   constructor(factory: Factory<T>) {
     this.__factory = factory;
   }

package/src/useCachedPrecommitValue.test.tsx

@@ -60,13 +60,135 @@ async function awaitableCreate(Component, isConcurrent) {
   return element;
 }
 
-describe('fake describe block to make test pass', () => {
-  test('foo', () => {});
-});
+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];
+      return pair;
+    });
+    const cache = new ParentCache(factory);
+    const getOrPopulateAndTemporaryRetain = vi.spyOn(
+      cache,
+      'getOrPopulateAndTemporaryRetain',
+    );
+
+    const componentCommits = vi.fn();
+    const hookOnCommit = vi.fn();
+    const render = vi.fn();
+    function TestComponent() {
+      render();
+      React.useEffect(componentCommits);
+
+      const data = useCachedPrecommitValue(cache, hookOnCommit);
+
+      expect(render).toBeCalledTimes(1);
+      expect(componentCommits).not.toBeCalled();
+      expect(hookOnCommit).not.toBeCalled();
+      expect(data).toEqual({ state: 1 });
+      expect(factory).toBeCalledTimes(1);
+      expect(disposeItem).not.toBeCalled();
+      expect(getOrPopulateAndTemporaryRetain).toBeCalledTimes(1);
+
+      // TODO we should assert that permanentRetainIfNotDisposed was called
+      // on the cache item.
+
+      return <div />;
+    }
+
+    await awaitableCreate(<TestComponent />, false);
+
+    expect(componentCommits).toBeCalledTimes(1);
+    expect(hookOnCommit).toBeCalledTimes(1);
+    expect(render).toHaveBeenCalledTimes(1);
+  });
+
+  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];
+      return pair;
+    });
+    const cache = new ParentCache(factory);
+
+    const componentCommits = vi.fn();
+    const hookOnCommit = vi.fn();
+    const render = vi.fn();
+    function TestComponent() {
+      render();
+      expect(render).toHaveBeenCalledTimes(1);
+      const data = useCachedPrecommitValue(cache, hookOnCommit);
+
+      React.useEffect(() => {
+        componentCommits();
+        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(factory).toBeCalledTimes(1);
+        expect(disposeItem).not.toBeCalled();
+        expect(cache.isEmpty()).toBe(true);
+      }, []);
+
+      expect(factory).toBeCalledTimes(1);
+      expect(disposeItem).not.toBeCalled();
+      return <div />;
+    }
+
+    await awaitableCreate(<TestComponent />, false);
+    expect(componentCommits).toBeCalledTimes(1);
+    expect(render).toHaveBeenCalledTimes(1);
+  });
+
+  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];
+      return pair;
+    });
+    const cache = new ParentCache(factory);
+
+    const componentCommits = vi.fn();
+    const hookOnCommit = vi.fn();
+    let setState;
+    let initialRender = true;
+    function TestComponent() {
+      const [, _setState] = React.useState(null);
+      setState = _setState;
+      const value = useCachedPrecommitValue(cache, hookOnCommit);
+
+      if (initialRender && value !== null) {
+        initialRender = false;
+        expect(value).toEqual({ state: 1 });
+      } else {
+        expect(value).toEqual(null);
+      }
 
-if (false) {
-  describe('useCachedPrecommitValue', () => {
-    test('on initial render, it should call getOrPopulateAndTemporaryRetain', async () => {
+      React.useEffect(() => {
+        componentCommits();
+        expect(componentCommits).toHaveBeenCalledTimes(1);
+        expect(hookOnCommit).toBeCalledTimes(1);
+        expect(factory).toBeCalledTimes(1);
+        expect(disposeItem).not.toBeCalled();
+      }, []);
+
+      return <div />;
+    }
+
+    await awaitableCreate(<TestComponent />, false);
+
+    expect(componentCommits).toHaveBeenCalledTimes(1);
+
+    // Trigger a re-render
+    setState({});
+    await shortPromise();
+    expect(initialRender).toBe(false);
+  });
+
+  test(
+    '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(() => {
         const pair: ItemCleanupPair<number> = [1, disposeItem];
@@ -81,497 +203,369 @@ if (false) {
       const componentCommits = vi.fn();
       const hookOnCommit = vi.fn();
       const render = vi.fn();
+      let renderCount = 0;
       function TestComponent() {
         render();
-        React.useEffect(componentCommits);
+        const value = useCachedPrecommitValue(cache, hookOnCommit);
 
-        const data = useCachedPrecommitValue(cache, hookOnCommit);
+        expect(value).toEqual({ state: 1 });
+        expect(factory).toHaveBeenCalledTimes(1);
 
-        expect(render).toBeCalledTimes(1);
-        expect(componentCommits).not.toBeCalled();
-        expect(hookOnCommit).not.toBeCalled();
-        expect(data).toEqual({ state: 1 });
-        expect(factory).toBeCalledTimes(1);
-        expect(disposeItem).not.toBeCalled();
-        expect(getOrPopulateAndTemporaryRetain).toBeCalledTimes(1);
+        renderCount++;
+        expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(
+          renderCount,
+        );
 
-        // TODO we should assert that permanentRetainIfNotDisposed was called
-        // on the cache item.
+        React.useEffect(() => {
+          componentCommits();
+          expect(componentCommits).toHaveBeenCalledTimes(1);
+          expect(hookOnCommit).toBeCalledTimes(1);
+          expect(factory).toBeCalledTimes(1);
+          expect(disposeItem).not.toBeCalled();
+        }, []);
 
         return <div />;
       }
 
-      await awaitableCreate(<TestComponent />, false);
+      const { promise, isResolvedRef, resolve } = promiseAndResolver();
+      await awaitableCreate(
+        <React.Suspense fallback={<div />}>
+          <TestComponent />
+          <Suspender promise={promise} isResolvedRef={isResolvedRef} />
+        </React.Suspense>,
+        true,
+      );
 
-      expect(componentCommits).toBeCalledTimes(1);
-      expect(hookOnCommit).toBeCalledTimes(1);
+      expect(componentCommits).toHaveBeenCalledTimes(0);
       expect(render).toHaveBeenCalledTimes(1);
-    });
 
-    test('on commit, it should call the provided callback and empty the parent cache', async () => {
+      resolve();
+      await shortPromise();
+
+      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',
+    async () => {
       const disposeItem = vi.fn();
+      let factoryValue = 0;
       const factory = vi.fn(() => {
-        const pair: ItemCleanupPair<number> = [1, disposeItem];
+        factoryValue++;
+        const pair: ItemCleanupPair<number> = [factoryValue, disposeItem];
         return pair;
       });
       const cache = new ParentCache(factory);
 
+      const getOrPopulateAndTemporaryRetain = vi.spyOn(
+        cache,
+        'getOrPopulateAndTemporaryRetain',
+      );
+
       const componentCommits = vi.fn();
       const hookOnCommit = vi.fn();
       const render = vi.fn();
       function TestComponent() {
         render();
-        expect(render).toHaveBeenCalledTimes(1);
-        const data = useCachedPrecommitValue(cache, hookOnCommit);
+        const value = useCachedPrecommitValue(cache, hookOnCommit);
+
+        expect(value).toEqual({ state: factoryValue });
 
         React.useEffect(() => {
           componentCommits();
+          expect(cache.isEmpty()).toBe(true);
           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(factory).toBeCalledTimes(1);
-          expect(disposeItem).not.toBeCalled();
-          expect(cache.isEmpty()).toBe(true);
+          expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
+          expect(factory).toBeCalledTimes(2);
+          expect(disposeItem).toBeCalledTimes(1);
         }, []);
 
-        expect(factory).toBeCalledTimes(1);
-        expect(disposeItem).not.toBeCalled();
+        if (render.mock.calls.length === 1) {
+          expect(factory).toHaveBeenCalledTimes(1);
+          // First render, dispose the temporary retain
+          expect(disposeItem).toBeCalledTimes(0);
+          getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
+          expect(disposeItem).toBeCalledTimes(1);
+          expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(1);
+        } else {
+          expect(factory).toHaveBeenCalledTimes(2);
+          expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(2);
+        }
+
         return <div />;
       }
 
-      await awaitableCreate(<TestComponent />, false);
-      expect(componentCommits).toBeCalledTimes(1);
+      const { promise, isResolvedRef, resolve } = promiseAndResolver();
+      await awaitableCreate(
+        <React.Suspense fallback={<div />}>
+          <TestComponent />
+          <Suspender promise={promise} isResolvedRef={isResolvedRef} />
+        </React.Suspense>,
+        true,
+      );
+
+      expect(componentCommits).toHaveBeenCalledTimes(0);
       expect(render).toHaveBeenCalledTimes(1);
-    });
 
-    test('after commit, on subsequent renders it should return null', async () => {
+      resolve();
+      await shortPromise();
+
+      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',
+    async () => {
       const disposeItem = vi.fn();
+      let factoryCount = 0;
       const factory = vi.fn(() => {
-        const pair: ItemCleanupPair<number> = [1, disposeItem];
+        factoryCount++;
+        const pair: ItemCleanupPair<number> = [factoryCount, disposeItem];
         return pair;
       });
       const cache = new ParentCache(factory);
+      const getOrPopulateAndTemporaryRetain = vi.spyOn(
+        cache,
+        'getOrPopulateAndTemporaryRetain',
+      );
+      const getAndPermanentRetainIfPresent = vi.spyOn(
+        cache,
+        'getAndPermanentRetainIfPresent',
+      );
 
       const componentCommits = vi.fn();
       const hookOnCommit = vi.fn();
-      let setState;
-      let initialRender = true;
+      const render = vi.fn();
       function TestComponent() {
-        const [, _setState] = React.useState(null);
-        setState = _setState;
-        const value = useCachedPrecommitValue(cache, hookOnCommit);
+        render();
 
-        if (initialRender && value !== null) {
-          initialRender = false;
-          expect(value).toEqual({ state: 1 });
-        } else {
-          expect(value).toEqual(null);
-        }
+        useCachedPrecommitValue(cache, hookOnCommit);
 
         React.useEffect(() => {
           componentCommits();
-          expect(componentCommits).toHaveBeenCalledTimes(1);
-          expect(hookOnCommit).toBeCalledTimes(1);
-          expect(factory).toBeCalledTimes(1);
-          expect(disposeItem).not.toBeCalled();
+          expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(1);
+          expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
+          expect(getAndPermanentRetainIfPresent.mock.results[0].value).toBe(
+            null,
+          );
+          expect(factory).toHaveBeenCalledTimes(2);
+          expect(cache.isEmpty()).toBe(true);
+          expect(hookOnCommit).toHaveBeenCalledTimes(1);
+          expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
         }, []);
 
         return <div />;
       }
 
-      await awaitableCreate(<TestComponent />, false);
-
-      expect(componentCommits).toHaveBeenCalledTimes(1);
-
-      // Trigger a re-render
-      setState({});
-      await shortPromise();
-      expect(initialRender).toBe(false);
-    });
-
-    test(
-      '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(() => {
-          const pair: ItemCleanupPair<number> = [1, disposeItem];
-          return pair;
-        });
-        const cache = new ParentCache(factory);
-        const getOrPopulateAndTemporaryRetain = vi.spyOn(
-          cache,
-          'getOrPopulateAndTemporaryRetain',
-        );
-
-        const componentCommits = vi.fn();
-        const hookOnCommit = vi.fn();
-        const render = vi.fn();
-        let renderCount = 0;
-        function TestComponent() {
-          render();
-          const value = useCachedPrecommitValue(cache, hookOnCommit);
+      // wat is going on?
+      //
+      // We want to test a scenario where the item is disposed between the render and
+      // the commit.
+      //
+      // The subcomponents are rendered in order: TestComponent followed by CodeExecutor.
+      //
+      // - During TestComponent's render, it will populate the cache.
+      // - Then, CodeExecutor will render, and dispose the temporary retain,
+      //   disposing the cache item. The parent cache will be empty as well.
+      // - Then, TestComponent commits.
+      let initialRender = true;
+      function CodeExecutor() {
+        if (initialRender) {
+          // This code executes after the initial render of TestComponent, but before
+          // it commits.
+          expect(disposeItem).not.toHaveBeenCalled();
+          getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
+          expect(disposeItem).toHaveBeenCalledTimes(1);
+          expect(cache.isEmpty()).toBe(true);
 
-          expect(value).toEqual({ state: 1 });
+          expect(render).toHaveBeenCalledTimes(1);
+          expect(hookOnCommit).toBeCalledTimes(0);
+          expect(componentCommits).toBeCalledTimes(0);
           expect(factory).toHaveBeenCalledTimes(1);
 
-          renderCount++;
-          expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(
-            renderCount,
-          );
-
-          React.useEffect(() => {
-            componentCommits();
-            expect(componentCommits).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit).toBeCalledTimes(1);
-            expect(factory).toBeCalledTimes(1);
-            expect(disposeItem).not.toBeCalled();
-          }, []);
-
-          return <div />;
+          initialRender = false;
         }
 
-        const { promise, isResolvedRef, resolve } = promiseAndResolver();
-        await awaitableCreate(
-          <React.Suspense fallback={<div />}>
-            <TestComponent />
-            <Suspender promise={promise} isResolvedRef={isResolvedRef} />
-          </React.Suspense>,
-          true,
-        );
-
-        expect(componentCommits).toHaveBeenCalledTimes(0);
-        expect(render).toHaveBeenCalledTimes(1);
+        return null;
+      }
 
-        resolve();
-        await shortPromise();
+      const element = await awaitableCreate(
+        <>
+          <TestComponent />
+          <CodeExecutor />
+        </>,
+        false,
+      );
 
-        expect(componentCommits).toHaveBeenCalledTimes(1);
-        expect(render).toHaveBeenCalledTimes(2);
-      },
-    );
+      // 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(
-      '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;
-        const factory = vi.fn(() => {
-          factoryValue++;
-          const pair: ItemCleanupPair<number> = [factoryValue, disposeItem];
-          return pair;
-        });
-        const cache = new ParentCache(factory);
-
-        const getOrPopulateAndTemporaryRetain = vi.spyOn(
-          cache,
-          'getOrPopulateAndTemporaryRetain',
-        );
+  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',
+    async () => {
+      const disposeItem = vi.fn();
+      let factoryCount = 0;
+      const factory = vi.fn(() => {
+        factoryCount++;
+        const pair: ItemCleanupPair<number> = [factoryCount, disposeItem];
+        return pair;
+      });
+      const cache = new ParentCache(factory);
+      const getAndPermanentRetainIfPresent = vi.spyOn(
+        cache,
+        'getAndPermanentRetainIfPresent',
+      );
 
-        const componentCommits = vi.fn();
-        const hookOnCommit = vi.fn();
-        const render = vi.fn();
-        function TestComponent() {
-          render();
-          const value = useCachedPrecommitValue(cache, hookOnCommit);
-
-          expect(value).toEqual({ state: factoryValue });
-
-          React.useEffect(() => {
-            componentCommits();
-            expect(cache.isEmpty()).toBe(true);
-            expect(componentCommits).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit).toBeCalledTimes(1);
-            expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
-            expect(factory).toBeCalledTimes(2);
-            expect(disposeItem).toBeCalledTimes(1);
-          }, []);
-
-          if (render.mock.calls.length === 1) {
-            expect(factory).toHaveBeenCalledTimes(1);
-            // First render, dispose the temporary retain
-            expect(disposeItem).toBeCalledTimes(0);
-            getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
-            expect(disposeItem).toBeCalledTimes(1);
-            expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(1);
-          } else {
-            expect(factory).toHaveBeenCalledTimes(2);
-            expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(2);
-          }
-
-          return <div />;
-        }
+      const componentCommits = vi.fn();
+      const hookOnCommit = vi.fn();
+      const render = vi.fn();
+      function TestComponent() {
+        render();
+        useCachedPrecommitValue(cache, hookOnCommit);
 
-        const { promise, isResolvedRef, resolve } = promiseAndResolver();
-        await awaitableCreate(
-          <React.Suspense fallback={<div />}>
-            <TestComponent />
-            <Suspender promise={promise} isResolvedRef={isResolvedRef} />
-          </React.Suspense>,
-          true,
-        );
+        React.useEffect(() => {
+          componentCommits();
+          // Note that we called getOrPopulateAndTemporaryRetain during CodeExecutor, hence 2
+          expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(2);
+          expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
+          expect(getAndPermanentRetainIfPresent.mock.results[0].value[0]).toBe(
+            2,
+          );
+          expect(factory).toHaveBeenCalledTimes(2);
+          expect(hookOnCommit).toHaveBeenCalledTimes(1);
+          expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
+        }, []);
 
-        expect(componentCommits).toHaveBeenCalledTimes(0);
-        expect(render).toHaveBeenCalledTimes(1);
+        return <div />;
+      }
 
-        resolve();
-        await shortPromise();
+      const getOrPopulateAndTemporaryRetain = vi.spyOn(
+        cache,
+        'getOrPopulateAndTemporaryRetain',
+      );
 
-        expect(componentCommits).toHaveBeenCalledTimes(1);
-        expect(render).toHaveBeenCalledTimes(2);
-      },
-    );
+      // wat is going on?
+      //
+      // We want to test a scenario where the item is disposed between the render and
+      // the commit.
+      //
+      // The subcomponents are rendered in order: TestComponent followed by CodeExecutor.
+      //
+      // - During TestComponent's render, it will populate the cache.
+      // - Then, CodeExecutor will render, and dispose the temporary retain,
+      //   disposing the cache item. It will then repopulate the parent cache.
+      // - Then, TestComponent commits.
+      let initialRender = true;
+      function CodeExecutor() {
+        if (initialRender) {
+          // This code executes after the initial render of TestComponent, but before
+          // it commits.
+          expect(disposeItem).not.toHaveBeenCalled();
+          getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
+          expect(disposeItem).toHaveBeenCalledTimes(1);
+          expect(cache.isEmpty()).toBe(true);
 
-    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',
-      async () => {
-        const disposeItem = vi.fn();
-        let factoryCount = 0;
-        const factory = vi.fn(() => {
-          factoryCount++;
-          const pair: ItemCleanupPair<number> = [factoryCount, disposeItem];
-          return pair;
-        });
-        const cache = new ParentCache(factory);
-        const getOrPopulateAndTemporaryRetain = vi.spyOn(
-          cache,
-          'getOrPopulateAndTemporaryRetain',
-        );
-        const getAndPermanentRetainIfPresent = vi.spyOn(
-          cache,
-          'getAndPermanentRetainIfPresent',
-        );
+          cache.getOrPopulateAndTemporaryRetain();
+          expect(cache.isEmpty()).toBe(false);
+          // The factory function was called when we called getOrPopulateAndTemporaryRetain
+          expect(factory).toHaveBeenCalledTimes(2);
 
-        const componentCommits = vi.fn();
-        const hookOnCommit = vi.fn();
-        const render = vi.fn();
-        function TestComponent() {
-          render();
-
-          useCachedPrecommitValue(cache, hookOnCommit);
-
-          React.useEffect(() => {
-            componentCommits();
-            expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(1);
-            expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
-            expect(getAndPermanentRetainIfPresent.mock.results[0].value).toBe(
-              null,
-            );
-            expect(factory).toHaveBeenCalledTimes(2);
-            expect(cache.isEmpty()).toBe(true);
-            expect(hookOnCommit).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
-          }, []);
-
-          return <div />;
-        }
+          expect(render).toHaveBeenCalledTimes(1);
+          expect(hookOnCommit).toBeCalledTimes(0);
+          expect(componentCommits).toBeCalledTimes(0);
 
-        // wat is going on?
-        //
-        // We want to test a scenario where the item is disposed between the render and
-        // the commit.
-        //
-        // The subcomponents are rendered in order: TestComponent followed by CodeExecutor.
-        //
-        // - During TestComponent's render, it will populate the cache.
-        // - Then, CodeExecutor will render, and dispose the temporary retain,
-        //   disposing the cache item. The parent cache will be empty as well.
-        // - Then, TestComponent commits.
-        let initialRender = true;
-        function CodeExecutor() {
-          if (initialRender) {
-            // This code executes after the initial render of TestComponent, but before
-            // it commits.
-            expect(disposeItem).not.toHaveBeenCalled();
-            getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
-            expect(disposeItem).toHaveBeenCalledTimes(1);
-            expect(cache.isEmpty()).toBe(true);
-
-            expect(render).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit).toBeCalledTimes(0);
-            expect(componentCommits).toBeCalledTimes(0);
-            expect(factory).toHaveBeenCalledTimes(1);
-
-            initialRender = false;
-          }
-
-          return null;
+          initialRender = false;
         }
 
-        const element = await awaitableCreate(
-          <>
-            <TestComponent />
-            <CodeExecutor />
-          </>,
-          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);
-      },
-    );
+        return null;
+      }
 
-    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',
-      async () => {
-        const disposeItem = vi.fn();
-        let factoryCount = 0;
-        const factory = vi.fn(() => {
-          factoryCount++;
-          const pair: ItemCleanupPair<number> = [factoryCount, disposeItem];
-          return pair;
-        });
-        const cache = new ParentCache(factory);
-        const getAndPermanentRetainIfPresent = vi.spyOn(
-          cache,
-          'getAndPermanentRetainIfPresent',
-        );
+      const element = await awaitableCreate(
+        <React.Suspense fallback="fallback">
+          <TestComponent />
+          <CodeExecutor />
+        </React.Suspense>,
+        false,
+      );
 
-        const componentCommits = vi.fn();
-        const hookOnCommit = vi.fn();
-        const render = vi.fn();
-        function TestComponent() {
-          render();
-          useCachedPrecommitValue(cache, hookOnCommit);
-
-          React.useEffect(() => {
-            componentCommits();
-            // Note that we called getOrPopulateAndTemporaryRetain during CodeExecutor, hence 2
-            expect(getOrPopulateAndTemporaryRetain).toHaveBeenCalledTimes(2);
-            expect(getAndPermanentRetainIfPresent).toHaveBeenCalledTimes(1);
-            expect(
-              getAndPermanentRetainIfPresent.mock.results[0].value[0],
-            ).toBe(2);
-            expect(factory).toHaveBeenCalledTimes(2);
-            expect(hookOnCommit).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit.mock.calls[0][0][0]).toBe(2);
-          }, []);
-
-          return <div />;
-        }
+      // 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);
+      // 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);
+    },
+  );
 
-        const getOrPopulateAndTemporaryRetain = vi.spyOn(
-          cache,
-          'getOrPopulateAndTemporaryRetain',
-        );
+  test(
+    'After render but before commit, the item will ' +
+      'be in the parent cache, temporarily retained',
+    async () => {
+      const disposeItem = vi.fn();
+      const factory = vi.fn(() => {
+        const pair: ItemCleanupPair<number> = [1, disposeItem];
+        return pair;
+      });
+      const cache = new ParentCache(factory);
 
-        // wat is going on?
-        //
-        // We want to test a scenario where the item is disposed between the render and
-        // the commit.
-        //
-        // The subcomponents are rendered in order: TestComponent followed by CodeExecutor.
-        //
-        // - During TestComponent's render, it will populate the cache.
-        // - Then, CodeExecutor will render, and dispose the temporary retain,
-        //   disposing the cache item. It will then repopulate the parent cache.
-        // - Then, TestComponent commits.
-        let initialRender = true;
-        function CodeExecutor() {
-          if (initialRender) {
-            // This code executes after the initial render of TestComponent, but before
-            // it commits.
-            expect(disposeItem).not.toHaveBeenCalled();
-            getOrPopulateAndTemporaryRetain.mock.results[0].value[2]();
-            expect(disposeItem).toHaveBeenCalledTimes(1);
-            expect(cache.isEmpty()).toBe(true);
-
-            cache.getOrPopulateAndTemporaryRetain();
-            expect(cache.isEmpty()).toBe(false);
-            // The factory function was called when we called getOrPopulateAndTemporaryRetain
-            expect(factory).toHaveBeenCalledTimes(2);
-
-            expect(render).toHaveBeenCalledTimes(1);
-            expect(hookOnCommit).toBeCalledTimes(0);
-            expect(componentCommits).toBeCalledTimes(0);
-
-            initialRender = false;
-          }
-
-          return null;
-        }
+      const componentCommits = vi.fn();
+      const hookOnCommit = vi.fn();
+      const render = vi.fn();
+      function TestComponent() {
+        render();
 
-        const element = await awaitableCreate(
-          <React.Suspense fallback="fallback">
-            <TestComponent />
-            <CodeExecutor />
-          </React.Suspense>,
-          false,
-        );
+        useCachedPrecommitValue(cache, hookOnCommit);
 
-        // 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);
-        // 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);
-      },
-    );
+        React.useEffect(() => {
+          componentCommits();
+        }, []);
 
-    test(
-      'After render but before commit, the item will ' +
-        'be in the parent cache, temporarily retained',
-      async () => {
-        const disposeItem = vi.fn();
-        const factory = vi.fn(() => {
-          const pair: ItemCleanupPair<number> = [1, disposeItem];
-          return pair;
-        });
-        const cache = new ParentCache(factory);
-
-        const componentCommits = vi.fn();
-        const hookOnCommit = vi.fn();
-        const render = vi.fn();
-        function TestComponent() {
-          render();
-
-          useCachedPrecommitValue(cache, hookOnCommit);
-
-          React.useEffect(() => {
-            componentCommits();
-          }, []);
-
-          return <div />;
-        }
+        return <div />;
+      }
 
-        // 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.
-        //
-        // 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(
-          <React.Suspense fallback={null}>
-            <TestComponent />
-            <Suspender promise={promise} isResolvedRef={isResolvedRef} />
-          </React.Suspense>,
-          true,
-        );
+      // 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.
+      //
+      // 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(
+        <React.Suspense fallback={null}>
+          <TestComponent />
+          <Suspender promise={promise} isResolvedRef={isResolvedRef} />
+        </React.Suspense>,
+        true,
+      );
 
-        // 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(1);
-        expect(componentCommits).toHaveBeenCalledTimes(0);
-        const item = getItem(cache)!;
-        const state = getState(item);
-        assert(state.kind === 'InParentCacheAndNotDisposed');
-        expect(state.permanentRetainCount).toBe(0);
-        expect(state.temporaryRetainCount).toBe(1);
-      },
-    );
-  });
-}
+      // 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(1);
+      expect(componentCommits).toHaveBeenCalledTimes(0);
+      const item = getItem(cache)!;
+      const state = getState(item);
+      assert(state.kind === 'InParentCacheAndNotDisposed');
+      expect(state.permanentRetainCount).toBe(0);
+      expect(state.temporaryRetainCount).toBe(1);
+    },
+  );
+});

package/src/useCachedPrecommitValue.ts

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { ParentCache } from './ParentCache';
 import { useHasCommittedRef } from './useHasCommittedRef';
-import { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
+import { ItemCleanupPair } from '@isograph/disposable-types';
 
 /**
  * usePrecommitValue<T>
@@ -14,7 +14,7 @@ import { ItemCleanupPair } from '@isograph/isograph-disposable-types/dist';
  *   disposed by the time of the commit. If so, this hook checks the parent cache
  *   for another T or creates one, and passes this T to onCommit.
  * - If the T returned during the last render is not the same as the one that
- *   is passed to onCommit, during the commit phase, will schedule another render.
+ *   is passed to onCommit, during the commit phase, it will schedule another render.
  *
  * Invariant: the returned T has not been disposed during the tick of the render.
  * The T passed to the onCommit callback has not been disposed when the onCommit

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,
+  },
+}