@isograph/react-disposable-state 0.5.2 → 0.5.5

package/src/useUpdatableDisposableClearableState.ts

@@ -0,0 +1,67 @@
+import type { ItemCleanupPair } from '@isograph/disposable-types';
+import { useCallback } from 'react';
+import {
+  UNASSIGNED_STATE,
+  type UnassignedState,
+  useUpdatableDisposableState,
+} from './useUpdatableDisposableState';
+
+type UseUpdatableDisposableClearableStateReturnValue<T> = {
+  state: T | UnassignedState;
+  setState: (pair: ItemCleanupPair<Exclude<T, UnassignedState>>) => void;
+  clearState: () => void;
+};
+
+/**
+ * The item that `clearState` puts in the underlying state. It is never returned
+ * from this hook; the hook reports UNASSIGNED_STATE while it is current.
+ */
+const CLEARED_STATE: unique symbol = Symbol();
+type ClearedState = typeof CLEARED_STATE;
+
+function noop() {}
+
+/**
+ * useUpdatableDisposableClearableState
+ * - useUpdatableDisposableState, plus clearState.
+ * - clearState returns the state to UNASSIGNED_STATE. The item that was in state
+ *   is disposed on the next commit, exactly as if it had been superseded by
+ *   setState.
+ * - Like setState, clearState throws if called before the initial commit.
+ *
+ * This is a wrapper around useUpdatableDisposableState: clearing sets a sentinel
+ * item with no cleanup, so the underlying hook's commit-time disposal of
+ * superseded items disposes the cleared item, and the sentinel is mapped back to
+ * UNASSIGNED_STATE on the way out.
+ */
+export function useUpdatableDisposableClearableState<
+  T = never,
+>(): UseUpdatableDisposableClearableStateReturnValue<T> {
+  const { state, setState } = useUpdatableDisposableState<T | ClearedState>();
+
+  const clearState = useCallback(() => {
+    setState([CLEARED_STATE, noop]);
+  }, [setState]);
+
+  return {
+    clearState,
+    setState,
+    state: state === CLEARED_STATE ? UNASSIGNED_STATE : state,
+  };
+}
+
+// @ts-ignore
+function tsTests() {
+  const a = useUpdatableDisposableClearableState();
+  // @ts-expect-error
+  a.setState([UNASSIGNED_STATE, () => {}]);
+  // @ts-expect-error
+  a.setState(['asdf', () => {}]);
+  const b = useUpdatableDisposableClearableState<string | UnassignedState>();
+  // @ts-expect-error
+  b.setState([UNASSIGNED_STATE, () => {}]);
+  b.setState(['asdf', () => {}]);
+  // The cleared sentinel is not part of T, so it cannot be set from outside.
+  // @ts-expect-error
+  b.setState([CLEARED_STATE, () => {}]);
+}

package/src/useUpdatableDisposableState.test.tsx

@@ -1,4 +1,11 @@
-import React, { type MutableRefObject } from 'react';
+import type { ItemCleanupPair } from '@isograph/disposable-types';
+import { render, screen } from '@testing-library/react';
+import React, {
+  type MutableRefObject,
+  StrictMode,
+  useEffect,
+  useLayoutEffect,
+} from 'react';
 import { create } from 'react-test-renderer';
 import { describe, expect, test, vi } from 'vitest';
 import {
@@ -51,15 +58,59 @@ function promiseAndResolver() {
 // not is a bit worrisome.
 async function awaitableCreate(Component, isConcurrent: boolean) {
   const element = create(
-    Component,
+    <StrictMode>{Component}</StrictMode>,
+
     isConcurrent ? { unstable_isConcurrent: true } : undefined,
   );
   await shortPromise();
   return element;
 }
 
-describe('nothing', () => {
-  test('it should pass', () => {});
+describe('useUpdatableDisposableState during its first commit', () => {
+  // A child's effects run before its parent's effects of the same kind, and every layout effect runs before any
+  // passive effect, so a child effect runs after the parent's DOM is committed and before the parent's own effects.
+  // DOM event handlers of the parent can also run in that window.
+  test.each([
+    ['useLayoutEffect', useLayoutEffect],
+    ['useEffect', useEffect],
+  ])(
+    'setState called from a child %s puts the item in state, and the item is disposed on unmount',
+    (_effectName, useChildEffect) => {
+      const dispose = vi.fn();
+      let setStateError: unknown = null;
+      function Child({
+        setState,
+      }: {
+        setState: (pair: ItemCleanupPair<number>) => void;
+      }) {
+        useChildEffect(() => {
+          try {
+            setState([1, dispose]);
+          } catch (error) {
+            setStateError = error;
+          }
+        }, []);
+        return null;
+      }
+      function Owner() {
+        const { state, setState } = useUpdatableDisposableState<number>();
+        return (
+          <>
+            {state === UNASSIGNED_STATE ? 'unassigned' : `item ${state}`}
+            <Child setState={setState} />
+          </>
+        );
+      }
+
+      const { unmount } = render(<Owner />);
+
+      expect(setStateError).toBeNull();
+      expect(screen.getByText('item 1')).toBeTruthy();
+      expect(dispose).not.toHaveBeenCalled();
+      unmount();
+      expect(dispose).toHaveBeenCalledTimes(1);
+    },
+  );
 });
 
 // Temporarily disable unit tests until flakiness is investigated

package/src/useUpdatableDisposableState.ts

@@ -109,8 +109,10 @@ export function useUpdatableDisposableState<
   useEffect(() => {
     return function disposeAllRemainingItems() {
       for (const undisposedICI of undisposedICIs.current) {
+        undisposedICIs.current.delete(undisposedICI);
         undisposedICI.cleanup();
       }
+      setStateICI(UNASSIGNED_STATE);
     };
   }, []);
 

package/tsconfig.json

@@ -1,6 +1,4 @@
 {
-  "extends": "./tsconfig.pkg.json",
-  "compilerOptions": {
-    "noEmit": true
-  }
+  "extends": "../../tsconfig.build.json",
+  "include": ["./**/*.ts"]
 }

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineProject } from 'vitest/config';
+
+export default defineProject({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+  },
+});

package/dist/CacheItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CacheItem.d.ts","names":[],"sources":["../src/CacheItem.ts"],"sourcesContent":[],"mappings":";;;KAQY,2BAAA;;AAAZ,CAAA;AAGY,KAAA,8BAA8B,CAAA,CAAA,CAAA,GAAA;EAQ9B,IAAA,EAAA,gCAA2B;EAa3B,KAAA,EAnBH,CAmBG;EACoB,YAAA,EAAA,GAAA,GAAA,IAAA;EAA5B,oBAAA,EAAA,MAAA;CAC+B;AAA/B,KAfQ,2BAeR,CAAA,CAAA,CAAA,GAAA;EACA,IAAA,EAAA,6BAAA;EAA2B,KAAA,EAdtB,CAcsB;EAEnB,YAAA,EAAA,GAAA,GAAgB,IAAA;EA+Bf,qBAAS,EAAA,GAAA,GAAA,IAAA;EAUD,oBAAA,EAAA,MAAA;EAAR,oBAAA,EAAA,MAAA;CACc;AACd,KAhDD,cAgDC,CAAA,CAAA,CAAA,GA/CT,2BA+CS,CA/CmB,CA+CnB,CAAA,GA9CT,8BA8CS,CA9CsB,CA8CtB,CAAA,GA7CT,2BA6CS;AAgBC,KA3DF,gBAAA,GA2DE;EAkBgB,mBAAA,EAAA,MAAA;CACT;;;;;AAyPrB;;;;;;;;;;;;;;;;;;;;cAxSa;;;uBAUA,QAAQ,2BACM,oBACd;cAgBC;yDAkBgB,YACzB,gBAAgB;qBA+EA;qBAqEA;;;;iBAqGL,+CACL,QAAQ,2BACM,oBACd,2BACP,UAAU,IAAI"}

package/dist/ParentCache.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ParentCache.d.ts","names":[],"sources":["../src/ParentCache.ts"],"sourcesContent":[],"mappings":";;;;;;;AA2BA;;;;;;;;;;;;;;cAAa;;;uBAMU,QAAQ;;;;;;;;;;;oCAcK,gBAAgB;sCAMd,UAAU,IAAI,GAAG;;;iBAsCtC,QAAQ"}

package/dist/_virtual/rolldown_runtime.js

@@ -1,25 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-
-exports.__toESM = __toESM;

package/dist/useCachedResponsivePrecommitValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCachedResponsivePrecommitValue.d.ts","names":[],"sources":["../src/useCachedResponsivePrecommitValue.ts"],"sourcesContent":[],"mappings":";;;;;;;AAsCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,kDACD,YAAY,qBACR,gBAAgB;SACvB"}

package/dist/useDisposableState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDisposableState.d.ts","names":[],"sources":["../src/useDisposableState.ts"],"sourcesContent":[],"mappings":";;;;;KAUK;SACI;EADJ,QAAA,EAAA,CAAA,IAAA,EAEc,eAFd,CAE8B,OAF9B,CAEsC,CAFA,EAEG,eAFH,CAAA,CAAA,EAAA,GAAA,IAAA;CAClC;AACkC,iBAG3B,kBAH2B,CAAA,IAAA,KAAA,CAAA,CAAA,WAAA,EAI5B,WAJ4B,CAIhB,CAJgB,CAAA,CAAA,EAKxC,sCALwC,CAKD,CALC,CAAA"}

package/dist/useHasCommittedRef.d.ts

@@ -1,11 +0,0 @@
-import { MutableRefObject } from "react";
-
-//#region src/useHasCommittedRef.d.ts
-
-/**
- * Returns true if the component has committed, false otherwise.
- */
-declare function useHasCommittedRef(): MutableRefObject<boolean>;
-//#endregion
-export { useHasCommittedRef };
-//# sourceMappingURL=useHasCommittedRef.d.ts.map

package/dist/useHasCommittedRef.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useHasCommittedRef.d.ts","names":[],"sources":["../src/useHasCommittedRef.ts"],"sourcesContent":[],"mappings":";;;;;;AAKA;iBAAgB,kBAAA,CAAA,GAAsB"}

package/dist/useHasCommittedRef.js

@@ -1,18 +0,0 @@
-const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-
-//#region src/useHasCommittedRef.ts
-/**
-* Returns true if the component has committed, false otherwise.
-*/
-function useHasCommittedRef() {
-	const hasCommittedRef = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		hasCommittedRef.current = true;
-	}, []);
-	return hasCommittedRef;
-}
-
-//#endregion
-exports.useHasCommittedRef = useHasCommittedRef;

package/dist/useLazyDisposableState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLazyDisposableState.d.ts","names":[],"sources":["../src/useLazyDisposableState.ts"],"sourcesContent":[],"mappings":";;;;;;;AAiBA;;;;;;;iBAAgB,uCACD,YAAY,QAAQ,GAAG;SAE7B"}

package/dist/useUpdatableDisposableState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useUpdatableDisposableState.d.ts","names":[],"sources":["../src/useUpdatableDisposableState.ts"],"sourcesContent":[],"mappings":";;;cAIa;KACD,eAAA,UAAyB;AADrC,KAGK,sCAHkD,CAAA,CAAA,CAAA,GAAA;EAC3C,KAAA,EAGH,CAHG,GAGC,eAHc;EAEtB,QAAA,EAAA,CAAA,IAAA,EAEc,eAFd,CAE8B,OAF9B,CAEsC,CAFA,EAEG,eAFH,CAAA,CAAA,EAAA,GAAA,IAAA;CAClC;;;;;;;AAoDT;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,0CAEX,uCAAuC"}

package/tsconfig.pkg.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "rootDir": "./src/",
-    "declaration": true
-  },
-  "include": ["./**/*.ts"]
-}