@dxos/react-async 0.6.4 → 0.6.5-staging.097cf0c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useMulticastObservable.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the componet is still mounted.\n * @param destructor Receives the value retuned from the callback.\n * @param deps\n */\n// TODO(burdon):
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the componet is still mounted.\n * @param destructor Receives the value retuned from the callback.\n * @param deps\n */\n// TODO(burdon): Create useAsyncMemo?\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n // TODO(burdon): Catch exception.\n void Promise.resolve(asyncResult).then((result) => {\n value = result;\n });\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo, useSyncExternalStore } from 'react';\n\nimport { type MulticastObservable } from '@dxos/async';\n\n/**\n * Subscribe to a MulticastObservable and return the latest value.\n * @param observable the observable to subscribe to. Will resubscribe if the observable changes.\n */\nexport const useMulticastObservable = <T>(observable: MulticastObservable<T>): T => {\n // Make sure useSyncExternalStore is stable in respect to the observable.\n const subscribeFn = useMemo(\n () => (listener: () => void) => {\n const subscription = observable.subscribe(listener);\n return () => subscription.unsubscribe();\n },\n [observable],\n );\n\n // useSyncExternalStore will resubscribe to the observable and update the value if the subscribeFn changes.\n return useSyncExternalStore(subscribeFn, () => observable.get());\n};\n"],
|
|
5
5
|
"mappings": ";AAIA,SAASA,iBAAiB;AA6BnB,IAAMC,iBAAiB,CAC5BC,UACAC,YACAC,SAAAA;AAEA,QAAM,CAACC,kBAAkBC,UAAAA,IACvB,OAAOH,eAAe,aAAa;IAACA;IAAYC;MAAQ;IAACG;IAAWJ;;AAEtEK,YAAU,MAAA;AACR,QAAIC,UAAU;AACd,QAAIC;AACJ,UAAMC,cAAcT,SAAS,MAAMO,OAAAA;AAGnC,SAAKG,QAAQC,QAAQF,WAAAA,EAAaG,KAAK,CAACC,WAAAA;AACtCL,cAAQK;IACV,CAAA;AAEA,WAAO,MAAA;AACLN,gBAAU;AACVJ,yBAAmBK,KAAAA;IACrB;EACF,GAAGJ,UAAAA;AACL;;;ACnDA,SAA8BU,aAAAA,YAAWC,cAAc;AAKhD,IAAMC,oBAAoB,CAACC,OAAuB,CAAA,MAAE;AACzD,QAAMC,WAAWC,OAAuB,CAAA,CAAE;AAC1CC,EAAAA,WAAU,MAAA;AACRC,YAAQC,MAAM,gBAAgB;MAAEC,KAAKL,SAASM,QAAQC;MAAQC,KAAKT,KAAKQ;IAAO,CAAA;AAC/E,aAASE,IAAI,GAAGA,IAAIC,KAAKC,IAAIX,SAASM,QAAQC,UAAU,GAAGR,KAAKQ,UAAU,CAAA,GAAIE,KAAK;AACjFN,cAAQS,IAAIH,GAAGT,SAASM,QAAQG,CAAAA,MAAOV,KAAKU,CAAAA,IAAK,SAAS,WAAW;QACnEI,UAAUb,SAASM,QAAQG,CAAAA;QAC3BH,SAASP,KAAKU,CAAAA;MAChB,CAAA;IACF;AAEAN,YAAQW,SAAQ;AAChBd,aAASM,UAAUP;EACrB,GAAGA,IAAAA;AACL;;;ACpBA,SAASgB,SAASC,4BAA4B;AAQvC,IAAMC,yBAAyB,CAAIC,eAAAA;AAExC,QAAMC,cAAcC,QAClB,MAAM,CAACC,aAAAA;AACL,UAAMC,eAAeJ,WAAWK,UAAUF,QAAAA;AAC1C,WAAO,MAAMC,aAAaE,YAAW;EACvC,GACA;IAACN;GAAW;AAId,SAAOO,qBAAqBN,aAAa,MAAMD,WAAWQ,IAAG,CAAA;AAC/D;",
|
|
6
6
|
"names": ["useEffect", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "useEffect", "useRef", "useDebugReactDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useDebugReactDeps.ts", "../../../src/useMulticastObservable.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the componet is still mounted.\n * @param destructor Receives the value retuned from the callback.\n * @param deps\n */\n// TODO(burdon):
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\n/**\n * Process async event with optional non-async destructor.\n * Inspired by: https://github.com/rauldeheer/use-async-effect/blob/master/index.js\n *\n * ```tsx\n * useAsyncEffect(async () => {\n * await test();\n * }, []);\n * ```\n *\n * The callback may check of the component is still mounted before doing state updates.\n *\n * ```tsx\n * const [value, setValue] = useState<string>();\n * useAsyncEffect<string>(async (isMounted) => {\n * const value = await test();\n * if (!isMounted()) {\n * setValue(value);\n * }\n * }, () => console.log('Unmounted'), []);\n * ```\n *\n * @param callback Receives a getter function that determines if the componet is still mounted.\n * @param destructor Receives the value retuned from the callback.\n * @param deps\n */\n// TODO(burdon): Create useAsyncMemo?\nexport const useAsyncEffect = <T>(\n callback: (isMounted: () => boolean) => Promise<T> | undefined,\n destructor?: ((value?: T) => void) | any[],\n deps?: any[],\n) => {\n const [effectDestructor, effectDeps] =\n typeof destructor === 'function' ? [destructor, deps] : [undefined, destructor];\n\n useEffect(() => {\n let mounted = true;\n let value: T | undefined;\n const asyncResult = callback(() => mounted);\n\n // TODO(burdon): Catch exception.\n void Promise.resolve(asyncResult).then((result) => {\n value = result;\n });\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n/* eslint-disable no-console */\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\nexport const useDebugReactDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { old: lastDeps.current.length, new: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n console.log(i, lastDeps.current[i] === deps[i] ? 'SAME' : 'CHANGED', {\n previous: lastDeps.current[i],\n current: deps[i],\n });\n }\n\n console.groupEnd();\n lastDeps.current = deps;\n }, deps);\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo, useSyncExternalStore } from 'react';\n\nimport { type MulticastObservable } from '@dxos/async';\n\n/**\n * Subscribe to a MulticastObservable and return the latest value.\n * @param observable the observable to subscribe to. Will resubscribe if the observable changes.\n */\nexport const useMulticastObservable = <T>(observable: MulticastObservable<T>): T => {\n // Make sure useSyncExternalStore is stable in respect to the observable.\n const subscribeFn = useMemo(\n () => (listener: () => void) => {\n const subscription = observable.subscribe(listener);\n return () => subscription.unsubscribe();\n },\n [observable],\n );\n\n // useSyncExternalStore will resubscribe to the observable and update the value if the subscribeFn changes.\n return useSyncExternalStore(subscribeFn, () => observable.get());\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAA0B;ACC1B,IAAAA,gBAAuD;ACDvD,IAAAA,gBAA8C;AF6BvC,IAAMC,iBAAiB,CAC5BC,UACAC,YACAC,SAAAA;AAEA,QAAM,CAACC,kBAAkBC,UAAAA,IACvB,OAAOH,eAAe,aAAa;IAACA;IAAYC;MAAQ;IAACG;IAAWJ;;AAEtEK,8BAAU,MAAA;AACR,QAAIC,UAAU;AACd,QAAIC;AACJ,UAAMC,cAAcT,SAAS,MAAMO,OAAAA;AAGnC,SAAKG,QAAQC,QAAQF,WAAAA,EAAaG,KAAK,CAACC,WAAAA;AACtCL,cAAQK;IACV,CAAA;AAEA,WAAO,MAAA;AACLN,gBAAU;AACVJ,yBAAmBK,KAAAA;IACrB;EACF,GAAGJ,UAAAA;AACL;AC9CO,IAAMU,oBAAoB,CAACZ,OAAuB,CAAA,MAAE;AACzD,QAAMa,eAAWC,sBAAuB,CAAA,CAAE;AAC1CV,oBAAAA,WAAU,MAAA;AACRW,YAAQC,MAAM,gBAAgB;MAAEC,KAAKJ,SAASK,QAAQC;MAAQC,KAAKpB,KAAKmB;IAAO,CAAA;AAC/E,aAASE,IAAI,GAAGA,IAAIC,KAAKC,IAAIV,SAASK,QAAQC,UAAU,GAAGnB,KAAKmB,UAAU,CAAA,GAAIE,KAAK;AACjFN,cAAQS,IAAIH,GAAGR,SAASK,QAAQG,CAAAA,MAAOrB,KAAKqB,CAAAA,IAAK,SAAS,WAAW;QACnEI,UAAUZ,SAASK,QAAQG,CAAAA;QAC3BH,SAASlB,KAAKqB,CAAAA;MAChB,CAAA;IACF;AAEAN,YAAQW,SAAQ;AAChBb,aAASK,UAAUlB;EACrB,GAAGA,IAAAA;AACL;ACZO,IAAM2B,yBAAyB,CAAIC,eAAAA;AAExC,QAAMC,kBAAcC,uBAClB,MAAM,CAACC,aAAAA;AACL,UAAMC,eAAeJ,WAAWK,UAAUF,QAAAA;AAC1C,WAAO,MAAMC,aAAaE,YAAW;EACvC,GACA;IAACN;GAAW;AAId,aAAOO,oCAAqBN,aAAa,MAAMD,WAAWQ,IAAG,CAAA;AAC/D;",
|
|
6
6
|
"names": ["import_react", "useAsyncEffect", "callback", "destructor", "deps", "effectDestructor", "effectDeps", "undefined", "useEffect", "mounted", "value", "asyncResult", "Promise", "resolve", "then", "result", "useDebugReactDeps", "lastDeps", "useRef", "console", "group", "old", "current", "length", "new", "i", "Math", "max", "log", "previous", "groupEnd", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,31 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-async",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.5-staging.097cf0c",
|
|
4
4
|
"description": "Async utils",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "DXOS.org",
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"browser": "./dist/lib/browser/index.mjs",
|
|
12
|
+
"node": {
|
|
13
|
+
"default": "./dist/lib/node/index.cjs"
|
|
14
|
+
},
|
|
15
|
+
"types": "./dist/types/src/index.d.ts"
|
|
16
|
+
}
|
|
12
17
|
},
|
|
13
18
|
"types": "dist/types/src/index.d.ts",
|
|
19
|
+
"typesVersions": {
|
|
20
|
+
"*": {}
|
|
21
|
+
},
|
|
14
22
|
"files": [
|
|
15
23
|
"dist",
|
|
16
24
|
"src"
|
|
17
25
|
],
|
|
18
26
|
"dependencies": {
|
|
19
27
|
"immutability-helper": "^3.0.2",
|
|
20
|
-
"@dxos/async": "0.6.
|
|
28
|
+
"@dxos/async": "0.6.5-staging.097cf0c"
|
|
21
29
|
},
|
|
22
30
|
"devDependencies": {
|
|
23
31
|
"@dxos/esbuild-server": "~2.29.0",
|
|
24
32
|
"@types/react": "^18.0.21",
|
|
25
33
|
"@types/react-dom": "^18.0.6",
|
|
26
|
-
"react": "
|
|
27
|
-
"react-dom": "
|
|
28
|
-
"@dxos/esbuild-plugins": "0.6.
|
|
34
|
+
"react": "~18.2.0",
|
|
35
|
+
"react-dom": "~18.2.0",
|
|
36
|
+
"@dxos/esbuild-plugins": "0.6.5-staging.097cf0c"
|
|
29
37
|
},
|
|
30
38
|
"peerDependencies": {
|
|
31
39
|
"react": "*",
|
package/src/useAsyncEffect.ts
CHANGED
|
@@ -30,7 +30,7 @@ import { useEffect } from 'react';
|
|
|
30
30
|
* @param destructor Receives the value retuned from the callback.
|
|
31
31
|
* @param deps
|
|
32
32
|
*/
|
|
33
|
-
// TODO(burdon):
|
|
33
|
+
// TODO(burdon): Create useAsyncMemo?
|
|
34
34
|
export const useAsyncEffect = <T>(
|
|
35
35
|
callback: (isMounted: () => boolean) => Promise<T> | undefined,
|
|
36
36
|
destructor?: ((value?: T) => void) | any[],
|