@dxos/react-async 2.28.2

package/README.md

@@ -0,0 +1,29 @@
+## React Async
+
+### Configuration
+
+Add the following to `package.json`.
+
+```json
+  "toolchain": {
+    "forceCloseTests": true,
+    "jsdom": true,
+    "testingFramework": "mocha"
+  }
+```
+
+The `react-dom/test-utils` requires the `raf` (React animation frame) polyfill to run headless.
+
+```ts
+import 'raf/polyfill';
+import { act } from 'react-dom/test-utils';
+```
+
+
+### Next
+
+Evaluate the following:
+
+- https://www.npmjs.com/package/react-async-hook (popular)
+- https://www.npmjs.com/package/use-enhanced-state
+- https://www.npmjs.com/package/react-hooks-lib

package/dist/src/index.d.ts

@@ -0,0 +1,8 @@
+export * from './useAsyncEffect';
+export * from './useControlledState';
+export * from './useDynamicRef';
+export * from './useMounted';
+export * from './useStateUpdater';
+export * from './useStateWithRef';
+export * from './useTimestamp';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,23 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useAsyncEffect"), exports);
+__exportStar(require("./useControlledState"), exports);
+__exportStar(require("./useDynamicRef"), exports);
+__exportStar(require("./useMounted"), exports);
+__exportStar(require("./useStateUpdater"), exports);
+__exportStar(require("./useStateWithRef"), exports);
+__exportStar(require("./useTimestamp"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;AAEF,mDAAiC;AACjC,uDAAqC;AACrC,kDAAgC;AAChC,+CAA6B;AAC7B,oDAAkC;AAClC,oDAAkC;AAClC,iDAA+B"}

package/dist/src/useAsyncEffect.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Process async event with optional non-async destructor.
+ * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js
+ *
+ * ```tsx
+ * useAsyncEffect(async () => {
+ *   await test();
+ * }, []);
+ * ```
+ *
+ * The callback may check of the component is still mounted before doing state updates.
+ *
+ * ```tsx
+ * const [value, setValue] = useState<string>();
+ * useAsyncEffect<string>(async (isMounted) => {
+ *   const value = await test();
+ *   if (!isMounted()) {
+ *     setValue(value);
+ *   }
+ * }, () => console.log('Unmounted'), []);
+ * ```
+ *
+ * @param callback Receives a getter function that determines if the componet is still mounted.
+ * @param destructor Receives the value retuned from the callback.
+ * @param deps
+ */
+export declare const useAsyncEffect: <T>(callback: (isMounted: () => boolean) => Promise<T>, destructor?: any[] | ((value?: T | undefined) => void) | undefined, deps?: any[] | undefined) => void;
+//# sourceMappingURL=useAsyncEffect.d.ts.map

package/dist/src/useAsyncEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncEffect.d.ts","sourceRoot":"","sources":["../../src/useAsyncEffect.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,eAAO,MAAM,cAAc,4BACH,MAAM,OAAO,kEACN,IAAI,gDAwBlC,CAAC"}

package/dist/src/useAsyncEffect.js

@@ -0,0 +1,53 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncEffect = void 0;
+const react_1 = require("react");
+/**
+ * Process async event with optional non-async destructor.
+ * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js
+ *
+ * ```tsx
+ * useAsyncEffect(async () => {
+ *   await test();
+ * }, []);
+ * ```
+ *
+ * The callback may check of the component is still mounted before doing state updates.
+ *
+ * ```tsx
+ * const [value, setValue] = useState<string>();
+ * useAsyncEffect<string>(async (isMounted) => {
+ *   const value = await test();
+ *   if (!isMounted()) {
+ *     setValue(value);
+ *   }
+ * }, () => console.log('Unmounted'), []);
+ * ```
+ *
+ * @param callback Receives a getter function that determines if the componet is still mounted.
+ * @param destructor Receives the value retuned from the callback.
+ * @param deps
+ */
+// TODO(burdon): Creade useAsyncMemo?
+// TODO(burdon): Replace setImmediate everywhere (approx 30 places).
+const useAsyncEffect = (callback, destructor, deps) => {
+    const [effectDestructor, effectDeps] = typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];
+    (0, react_1.useEffect)(() => {
+        let mounted = true;
+        let value;
+        const asyncResult = callback(() => mounted);
+        // TODO(burdon): Catch exception.
+        void Promise.resolve(asyncResult).then(result => {
+            value = result;
+        });
+        return () => {
+            mounted = false;
+            effectDestructor === null || effectDestructor === void 0 ? void 0 : effectDestructor(value);
+        };
+    }, effectDeps);
+};
+exports.useAsyncEffect = useAsyncEffect;
+//# sourceMappingURL=useAsyncEffect.js.map

package/dist/src/useAsyncEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncEffect.js","sourceRoot":"","sources":["../../src/useAsyncEffect.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAAkC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qCAAqC;AACrC,oEAAoE;AAC7D,MAAM,cAAc,GAAG,CAC5B,QAAkD,EAClD,UAA0C,EAC1C,IAAY,EACZ,EAAE;IACF,MAAM,CACJ,gBAAgB,EAChB,UAAU,CACX,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAEpF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,IAAI,KAAQ,CAAC;QACb,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC;QAE5C,iCAAiC;QACjC,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC9C,KAAK,GAAG,MAAM,CAAC;QACjB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;YAChB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,UAAU,CAAC,CAAC;AACjB,CAAC,CAAC;AA1BW,QAAA,cAAc,kBA0BzB"}

package/dist/src/useAsyncEffect.test.d.ts

@@ -0,0 +1,2 @@
+import 'raf/polyfill';
+//# sourceMappingURL=useAsyncEffect.test.d.ts.map

package/dist/src/useAsyncEffect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncEffect.test.d.ts","sourceRoot":"","sources":["../../src/useAsyncEffect.test.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC"}

package/dist/src/useAsyncEffect.test.js

@@ -0,0 +1,70 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const expect_1 = __importDefault(require("expect"));
+require("raf/polyfill");
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const test_utils_1 = require("react-dom/test-utils");
+const wait_for_expect_1 = __importDefault(require("wait-for-expect"));
+const useAsyncEffect_1 = require("./useAsyncEffect");
+const doAsync = async (value) => {
+    return await new Promise((resolve) => {
+        resolve(value);
+    });
+};
+const Test = () => {
+    const [value, setValue] = (0, react_1.useState)();
+    (0, useAsyncEffect_1.useAsyncEffect)(async (isMounted) => {
+        const value = await doAsync('DXOS');
+        if (isMounted()) {
+            setValue(value);
+        }
+    }, []);
+    return (react_1.default.createElement("h1", null, value));
+};
+let rootContainer;
+beforeEach(() => {
+    rootContainer = document.createElement('div');
+    document.body.appendChild(rootContainer);
+});
+afterEach(() => {
+    document.body.removeChild(rootContainer);
+    rootContainer = null;
+});
+describe('useAsyncEffect', () => {
+    it('gets async value.', async () => {
+        (0, test_utils_1.act)(() => {
+            react_dom_1.default.render(react_1.default.createElement(Test, null), rootContainer);
+        });
+        const h1 = rootContainer.querySelector('h1');
+        await (0, wait_for_expect_1.default)(() => {
+            (0, expect_1.default)(h1.textContent).toEqual('DXOS');
+        });
+    });
+});
+//# sourceMappingURL=useAsyncEffect.test.js.map

package/dist/src/useAsyncEffect.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAsyncEffect.test.js","sourceRoot":"","sources":["../../src/useAsyncEffect.test.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;AAEF,oDAA4B;AAC5B,wBAAsB;AACtB,+CAAwC;AACxC,0DAAiC;AACjC,qDAA2C;AAC3C,sEAA4C;AAE5C,qDAAkD;AAElD,MAAM,OAAO,GAAG,KAAK,EAAQ,KAAQ,EAAE,EAAE;IACvC,OAAO,MAAM,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,EAAE;QACtC,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IAC7C,IAAA,+BAAc,EAAC,KAAK,EAAE,SAAS,EAAE,EAAE;QACjC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,SAAS,EAAE,EAAE;YACf,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,0CAAK,KAAK,CAAM,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,aAAkB,CAAC;AAEvB,UAAU,CAAC,GAAG,EAAE;IACd,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,GAAG,EAAE;IACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,aAAa,GAAG,IAAI,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACjC,IAAA,gBAAG,EAAC,GAAG,EAAE;YACP,mBAAQ,CAAC,MAAM,CAAC,8BAAC,IAAI,OAAG,EAAE,aAAa,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,MAAM,EAAE,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,IAAA,yBAAa,EAAC,GAAG,EAAE;YACvB,IAAA,gBAAM,EAAC,EAAE,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/src/useControlledState.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * Hook that manages state and that can be updated by caller.
+ * The optional callback is triggered only if the state is updated internally.
+ *
+ * ```tsx
+ * const Component = ({ value: controlledValue, onChange }: { value: string, onChange: (value:string) => void }) => {
+ *   const [value, setValue] = useControlledState(controlledValue, onChange);
+ *   const handleUpdate = (value: string) => setValue(value);
+ * }
+ *
+ * @param controlledValue
+ * @param onChange
+ * @param deps other deps that may change the state
+ */
+export declare const useControlledState: <T>(controlledValue: T, onChange?: ((value: T) => void) | undefined, deps?: any[] | undefined) => [T, Dispatch<SetStateAction<T>>];
+//# sourceMappingURL=useControlledState.d.ts.map

package/dist/src/useControlledState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.d.ts","sourceRoot":"","sources":["../../src/useControlledState.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAEtE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,oDAEJ,IAAI,4EAgB9B,CAAC"}

package/dist/src/useControlledState.js

@@ -0,0 +1,37 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlledState = void 0;
+const react_1 = require("react");
+/**
+ * Hook that manages state and that can be updated by caller.
+ * The optional callback is triggered only if the state is updated internally.
+ *
+ * ```tsx
+ * const Component = ({ value: controlledValue, onChange }: { value: string, onChange: (value:string) => void }) => {
+ *   const [value, setValue] = useControlledState(controlledValue, onChange);
+ *   const handleUpdate = (value: string) => setValue(value);
+ * }
+ *
+ * @param controlledValue
+ * @param onChange
+ * @param deps other deps that may change the state
+ */
+const useControlledState = (controlledValue, onChange, deps) => {
+    const [value, setValue] = (0, react_1.useState)(controlledValue);
+    (0, react_1.useEffect)(() => {
+        setValue(controlledValue);
+    }, [controlledValue, ...(deps !== null && deps !== void 0 ? deps : [])]);
+    return [
+        value,
+        (callback) => {
+            const newValue = (typeof callback === 'function') ? callback(value) : callback;
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    ];
+};
+exports.useControlledState = useControlledState;
+//# sourceMappingURL=useControlledState.js.map

package/dist/src/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sourceRoot":"","sources":["../../src/useControlledState.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAAsE;AAEtE;;;;;;;;;;;;;GAaG;AACI,MAAM,kBAAkB,GAAG,CAChC,eAAkB,EAClB,QAA6B,EAC7B,IAAY,EACsB,EAAE;IACpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,eAAe,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IAEvC,OAAO;QACL,KAAK;QACL,CAAC,QAAkC,EAAE,EAAE;YACrC,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAE,QAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC7F,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACvB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,kBAAkB,sBAkB7B"}

package/dist/src/useDynamicRef.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+/**
+ * Extension of useRef that contains computed values based on dependencies.
+ * E.g., to use in callbacks where the state value is stale.
+ *
+ * ```tsx
+ * const valueRef = useDynamicRef<() => value>([value]);
+ * const handleAction = () => {
+ *   console.log(valueRef.current);
+ * }
+ * ```
+ *
+ * @param initialValue
+ * @param deps
+ */
+export declare const useDynamicRef: <V>(initialValue: () => V, deps: any[]) => RefObject<V>;
+//# sourceMappingURL=useDynamicRef.d.ts.map

package/dist/src/useDynamicRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicRef.d.ts","sourceRoot":"","sources":["../../src/useDynamicRef.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,mCAElB,GAAG,EAAE,iBAWZ,CAAC"}

package/dist/src/useDynamicRef.js

@@ -0,0 +1,33 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicRef = void 0;
+const react_1 = require("react");
+/**
+ * Extension of useRef that contains computed values based on dependencies.
+ * E.g., to use in callbacks where the state value is stale.
+ *
+ * ```tsx
+ * const valueRef = useDynamicRef<() => value>([value]);
+ * const handleAction = () => {
+ *   console.log(valueRef.current);
+ * }
+ * ```
+ *
+ * @param initialValue
+ * @param deps
+ */
+const useDynamicRef = (initialValue, deps) => {
+    const [, setValue] = (0, react_1.useState)(initialValue);
+    const ref = (0, react_1.useRef)(initialValue());
+    (0, react_1.useEffect)(() => {
+        ref.current = initialValue();
+        // Must update state to trigger render cycle.
+        setValue(ref.current);
+    }, deps);
+    return ref;
+};
+exports.useDynamicRef = useDynamicRef;
+//# sourceMappingURL=useDynamicRef.js.map

package/dist/src/useDynamicRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicRef.js","sourceRoot":"","sources":["../../src/useDynamicRef.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAA+D;AAE/D;;;;;;;;;;;;;GAaG;AACI,MAAM,aAAa,GAAG,CAC3B,YAAqB,EACrB,IAAW,EACG,EAAE;IAChB,MAAM,CAAC,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,YAAY,CAAC,CAAC;IAC/C,MAAM,GAAG,GAAG,IAAA,cAAM,EAAI,YAAY,EAAE,CAAC,CAAC;IACtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC;QAC7B,6CAA6C;QAC7C,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAbW,QAAA,aAAa,iBAaxB"}

package/dist/src/useMounted.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Provides a function to test if the component is still mounted.
+ * Avoids the following error:
+ * "Warning: Can't perform a React state update on an unmounted component."
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const isMounted = useMounted();
+ *   const [value, setValue] = useState('');
+ *   useEffect(() => {
+ *     setTimeout(() => {
+ *       if (isMounted()) {
+ *         setValue(value);
+ *       }
+ *     }, 1000);
+ *   }, []);
+ *
+ *   return (
+ *     <div>{value}</div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useMounted: () => () => boolean;
+//# sourceMappingURL=useMounted.d.ts.map

package/dist/src/useMounted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMounted.d.ts","sourceRoot":"","sources":["../../src/useMounted.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,qBAUtB,CAAC"}

package/dist/src/useMounted.js

@@ -0,0 +1,42 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMounted = void 0;
+const react_1 = require("react");
+/**
+ * Provides a function to test if the component is still mounted.
+ * Avoids the following error:
+ * "Warning: Can't perform a React state update on an unmounted component."
+ *
+ * ```tsx
+ * const Test = () => {
+ *   const isMounted = useMounted();
+ *   const [value, setValue] = useState('');
+ *   useEffect(() => {
+ *     setTimeout(() => {
+ *       if (isMounted()) {
+ *         setValue(value);
+ *       }
+ *     }, 1000);
+ *   }, []);
+ *
+ *   return (
+ *     <div>{value}</div>
+ *   );
+ * }
+ * ```
+ */
+const useMounted = () => {
+    const mounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    return () => mounted.current;
+};
+exports.useMounted = useMounted;
+//# sourceMappingURL=useMounted.js.map

package/dist/src/useMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMounted.js","sourceRoot":"","sources":["../../src/useMounted.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAA0C;AAE1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACI,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC9B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC;AAC/B,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB"}

package/dist/src/useStateUpdater.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * Partially updates state without copying complex (expensive) objects.
+ * https://github.com/kolodny/immutability-helper
+ *
+ * ```tsx
+ * const [value,, updateValue] = useStateMutator({ items: [], ... });
+ * useEffect(() => {
+ *   updateValue({
+ *     items: {
+ *       $push: [1, 2, 3] // Only update the items property.
+ *     }
+ *   })
+ * }, []);
+ * ```
+ *
+ * @param initialValue
+ */
+export declare const useStateUpdater: <T>(initialValue: T) => [T, Dispatch<SetStateAction<T>>, (spec: any) => T];
+//# sourceMappingURL=useStateUpdater.d.ts.map

package/dist/src/useStateUpdater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateUpdater.d.ts","sourceRoot":"","sources":["../../src/useStateUpdater.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,kEAEe,GAAG,OAa7C,CAAC"}

package/dist/src/useStateUpdater.js

@@ -0,0 +1,43 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStateUpdater = void 0;
+const immutability_helper_1 = __importDefault(require("immutability-helper"));
+const react_1 = require("react");
+/**
+ * Partially updates state without copying complex (expensive) objects.
+ * https://github.com/kolodny/immutability-helper
+ *
+ * ```tsx
+ * const [value,, updateValue] = useStateMutator({ items: [], ... });
+ * useEffect(() => {
+ *   updateValue({
+ *     items: {
+ *       $push: [1, 2, 3] // Only update the items property.
+ *     }
+ *   })
+ * }, []);
+ * ```
+ *
+ * @param initialValue
+ */
+const useStateUpdater = (initialValue) => {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const handleUpdate = (spec) => {
+        const newValue = (0, immutability_helper_1.default)(value, spec);
+        setValue(newValue);
+        return newValue;
+    };
+    return [
+        value,
+        setValue,
+        handleUpdate
+    ];
+};
+exports.useStateUpdater = useStateUpdater;
+//# sourceMappingURL=useStateUpdater.js.map

package/dist/src/useStateUpdater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateUpdater.js","sourceRoot":"","sources":["../../src/useStateUpdater.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,8EAAyC;AACzC,iCAA2D;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,eAAe,GAAG,CAC7B,YAAe,EACqC,EAAE;IACtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,YAAY,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,CAAC,IAAS,EAAE,EAAE;QACjC,MAAM,QAAQ,GAAG,IAAA,6BAAM,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACrC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,QAAQ;QACR,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,eAAe,mBAe1B"}

package/dist/src/useStateUpdater.test.d.ts

@@ -0,0 +1,2 @@
+import 'raf/polyfill';
+//# sourceMappingURL=useStateUpdater.test.d.ts.map

package/dist/src/useStateUpdater.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateUpdater.test.d.ts","sourceRoot":"","sources":["../../src/useStateUpdater.test.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC"}

package/dist/src/useStateUpdater.test.js

@@ -0,0 +1,69 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const expect_1 = __importDefault(require("expect"));
+require("raf/polyfill");
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const test_utils_1 = require("react-dom/test-utils");
+const wait_for_expect_1 = __importDefault(require("wait-for-expect"));
+const useStateUpdater_1 = require("./useStateUpdater");
+// Don't copy this.
+const complex = {};
+const Test = () => {
+    const [value, , updateValue] = (0, useStateUpdater_1.useStateUpdater)({ complex, items: [] });
+    (0, react_1.useEffect)(() => {
+        updateValue({
+            items: {
+                $push: [1, 2, 3]
+            }
+        });
+    }, []);
+    return (react_1.default.createElement("pre", null, JSON.stringify(value)));
+};
+let rootContainer;
+beforeEach(() => {
+    rootContainer = document.createElement('div');
+    document.body.appendChild(rootContainer);
+});
+afterEach(() => {
+    document.body.removeChild(rootContainer);
+    rootContainer = null;
+});
+describe('useStateMutator', () => {
+    it('udpates the value.', async () => {
+        (0, test_utils_1.act)(() => {
+            react_dom_1.default.render(react_1.default.createElement(Test, null), rootContainer);
+        });
+        const pre = rootContainer.querySelector('pre');
+        await (0, wait_for_expect_1.default)(() => {
+            const data = JSON.parse(pre.textContent);
+            (0, expect_1.default)(data).toEqual({ complex, items: [1, 2, 3] });
+        });
+    });
+});
+//# sourceMappingURL=useStateUpdater.test.js.map

package/dist/src/useStateUpdater.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateUpdater.test.js","sourceRoot":"","sources":["../../src/useStateUpdater.test.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;AAEF,oDAA4B;AAC5B,wBAAsB;AACtB,+CAAyC;AACzC,0DAAiC;AACjC,qDAA2C;AAC3C,sEAA4C;AAE5C,uDAAoD;AAEpD,mBAAmB;AACnB,MAAM,OAAO,GAAG,EAEf,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,EAAE;IAChB,MAAM,CAAC,KAAK,EAAC,EAAE,WAAW,CAAC,GAAG,IAAA,iCAAe,EAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC;YACV,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;aACjB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,2CAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAO,CACnC,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,aAAkB,CAAC;AAEvB,UAAU,CAAC,GAAG,EAAE;IACd,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;AAC3C,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,GAAG,EAAE;IACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,aAAa,GAAG,IAAI,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;QAClC,IAAA,gBAAG,EAAC,GAAG,EAAE;YACP,mBAAQ,CAAC,MAAM,CAAC,8BAAC,IAAI,OAAG,EAAE,aAAa,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;QAEH,MAAM,GAAG,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,IAAA,yBAAa,EAAC,GAAG,EAAE;YACvB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACzC,IAAA,gBAAM,EAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/src/useStateWithRef.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+/**
+ * Extension of useState to return an up-to-date reference.
+ * E.g., to use in callbacks where the state value is stale.
+ * https://css-tricks.com/dealing-with-stale-props-and-states-in-reacts-functional-components
+ *
+ * ```tsx
+ * const [value, setValue, valueRef] = useStateWithRef<string>();
+ * const handleAction = () => {
+ *   console.log(valueRef.current);
+ * }
+ * ```
+ *
+ * @param initialValue
+ */
+export declare const useStateWithRef: <V>(initialValue?: V | (() => V) | undefined) => [V | undefined, Dispatch<SetStateAction<V | undefined>>, RefObject<V | undefined>];
+//# sourceMappingURL=useStateWithRef.d.ts.map

package/dist/src/useStateWithRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateWithRef.d.ts","sourceRoot":"","sources":["../../src/useStateWithRef.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEzF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,qIAU3B,CAAC"}