@dxos/react-hooks 0.8.3-staging.0fa589b → 0.8.4-main.1da679c
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.
- package/dist/lib/browser/index.mjs +185 -77
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +185 -77
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/index.d.ts +4 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/useAsyncEffect.d.ts +5 -29
- package/dist/types/src/useAsyncEffect.d.ts.map +1 -1
- package/dist/types/src/useAsyncEffect.stories.d.ts +9 -0
- package/dist/types/src/useAsyncEffect.stories.d.ts.map +1 -0
- package/dist/types/src/useAsyncState.d.ts.map +1 -1
- package/dist/types/src/useControlledState.d.ts +2 -1
- package/dist/types/src/useControlledState.d.ts.map +1 -1
- package/dist/types/src/useDebugDeps.d.ts +6 -0
- package/dist/types/src/useDebugDeps.d.ts.map +1 -0
- package/dist/types/src/useDefaultValue.d.ts.map +1 -1
- package/dist/types/src/useDefaults.d.ts +6 -0
- package/dist/types/src/useDefaults.d.ts.map +1 -0
- package/dist/types/src/useDynamicRef.d.ts +6 -1
- package/dist/types/src/useDynamicRef.d.ts.map +1 -1
- package/dist/types/src/useForwardedRef.d.ts +1 -1
- package/dist/types/src/useIsFocused.d.ts.map +1 -1
- package/dist/types/src/useSignals.d.ts +10 -0
- package/dist/types/src/useSignals.d.ts.map +1 -0
- package/dist/types/src/useTimeout.d.ts +3 -0
- package/dist/types/src/useTimeout.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -3
- package/src/index.ts +4 -1
- package/src/useAsyncEffect.stories.tsx +34 -0
- package/src/useAsyncEffect.ts +19 -49
- package/src/useAsyncState.ts +2 -1
- package/src/useControlledState.ts +10 -1
- package/src/useDebugDeps.ts +26 -0
- package/src/useDefaultValue.ts +1 -2
- package/src/useDefaults.ts +14 -0
- package/src/useDynamicRef.ts +27 -5
- package/src/useForwardedRef.ts +2 -2
- package/src/useIsFocused.ts +1 -1
- package/src/useSignals.ts +27 -0
- package/src/useTimeout.ts +46 -0
- package/src/useTrackProps.ts +1 -1
- package/src/useTransitions.ts +1 -1
- package/dist/lib/node/index.cjs +0 -413
- package/dist/lib/node/index.cjs.map +0 -7
- package/dist/lib/node/meta.json +0 -1
- package/dist/types/src/useAsyncEffect.test.d.ts +0 -2
- package/dist/types/src/useAsyncEffect.test.d.ts.map +0 -1
- package/dist/types/src/useDebugReactDeps.d.ts +0 -6
- package/dist/types/src/useDebugReactDeps.d.ts.map +0 -1
- package/src/useAsyncEffect.test.tsx +0 -51
- package/src/useDebugReactDeps.ts +0 -27
|
@@ -1,35 +1,29 @@
|
|
|
1
|
-
//
|
|
1
|
+
// src/useAsyncEffect.ts
|
|
2
2
|
import { useEffect } from "react";
|
|
3
|
-
|
|
4
|
-
var useAsyncEffect = (callback, destructor, deps) => {
|
|
5
|
-
const [effectDestructor, effectDeps] = typeof destructor === "function" ? [
|
|
6
|
-
destructor,
|
|
7
|
-
deps
|
|
8
|
-
] : [
|
|
9
|
-
void 0,
|
|
10
|
-
destructor
|
|
11
|
-
];
|
|
3
|
+
var useAsyncEffect = (cb, deps) => {
|
|
12
4
|
useEffect(() => {
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
5
|
+
const controller = new AbortController();
|
|
6
|
+
let cleanup;
|
|
7
|
+
const t = setTimeout(async () => {
|
|
8
|
+
if (!controller.signal.aborted) {
|
|
9
|
+
cleanup = await cb(controller);
|
|
10
|
+
}
|
|
11
|
+
});
|
|
19
12
|
return () => {
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
clearTimeout(t);
|
|
14
|
+
controller.abort();
|
|
15
|
+
cleanup?.();
|
|
22
16
|
};
|
|
23
|
-
},
|
|
17
|
+
}, deps ?? []);
|
|
24
18
|
};
|
|
25
19
|
|
|
26
|
-
//
|
|
20
|
+
// src/useAsyncState.ts
|
|
27
21
|
import { useEffect as useEffect2, useState } from "react";
|
|
28
22
|
var useAsyncState = (cb, deps = []) => {
|
|
29
23
|
const [value, setValue] = useState();
|
|
30
24
|
useEffect2(() => {
|
|
31
25
|
let disposed = false;
|
|
32
|
-
|
|
26
|
+
const t = setTimeout(async () => {
|
|
33
27
|
const data = await cb();
|
|
34
28
|
if (!disposed) {
|
|
35
29
|
setValue(data);
|
|
@@ -37,6 +31,7 @@ var useAsyncState = (cb, deps = []) => {
|
|
|
37
31
|
});
|
|
38
32
|
return () => {
|
|
39
33
|
disposed = true;
|
|
34
|
+
clearTimeout(t);
|
|
40
35
|
};
|
|
41
36
|
}, deps);
|
|
42
37
|
return [
|
|
@@ -45,9 +40,9 @@ var useAsyncState = (cb, deps = []) => {
|
|
|
45
40
|
];
|
|
46
41
|
};
|
|
47
42
|
|
|
48
|
-
//
|
|
43
|
+
// src/useControlledState.ts
|
|
49
44
|
import { useEffect as useEffect3, useState as useState2 } from "react";
|
|
50
|
-
var useControlledState = (controlledValue, ...deps) => {
|
|
45
|
+
var useControlledState = (controlledValue, onChange, ...deps) => {
|
|
51
46
|
const [value, setValue] = useState2(controlledValue);
|
|
52
47
|
useEffect3(() => {
|
|
53
48
|
if (controlledValue !== void 0) {
|
|
@@ -57,34 +52,43 @@ var useControlledState = (controlledValue, ...deps) => {
|
|
|
57
52
|
controlledValue,
|
|
58
53
|
...deps
|
|
59
54
|
]);
|
|
55
|
+
useEffect3(() => {
|
|
56
|
+
onChange?.(value);
|
|
57
|
+
}, [
|
|
58
|
+
value,
|
|
59
|
+
onChange
|
|
60
|
+
]);
|
|
60
61
|
return [
|
|
61
62
|
value,
|
|
62
63
|
setValue
|
|
63
64
|
];
|
|
64
65
|
};
|
|
65
66
|
|
|
66
|
-
//
|
|
67
|
+
// src/useDebugDeps.ts
|
|
67
68
|
import { useEffect as useEffect4, useRef } from "react";
|
|
68
|
-
var
|
|
69
|
+
var useDebugDeps = (deps = []) => {
|
|
69
70
|
const lastDeps = useRef([]);
|
|
70
71
|
useEffect4(() => {
|
|
71
72
|
console.group("deps changed", {
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
previous: lastDeps.current.length,
|
|
74
|
+
current: deps.length
|
|
74
75
|
});
|
|
75
76
|
for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
if (lastDeps.current[i] !== deps[i]) {
|
|
78
|
+
console.log("changed", {
|
|
79
|
+
index: i,
|
|
80
|
+
previous: lastDeps.current[i],
|
|
81
|
+
current: deps[i]
|
|
82
|
+
});
|
|
83
|
+
}
|
|
80
84
|
}
|
|
81
85
|
console.groupEnd();
|
|
82
86
|
lastDeps.current = deps;
|
|
83
87
|
}, deps);
|
|
84
88
|
};
|
|
85
89
|
|
|
86
|
-
//
|
|
87
|
-
import { useEffect as useEffect5, useState as useState3
|
|
90
|
+
// src/useDefaultValue.ts
|
|
91
|
+
import { useEffect as useEffect5, useMemo, useState as useState3 } from "react";
|
|
88
92
|
var useDefaultValue = (reactiveValue, getDefaultValue) => {
|
|
89
93
|
const stableDefaultValue = useMemo(getDefaultValue, []);
|
|
90
94
|
const [value, setValue] = useState3(reactiveValue ?? stableDefaultValue);
|
|
@@ -97,22 +101,53 @@ var useDefaultValue = (reactiveValue, getDefaultValue) => {
|
|
|
97
101
|
return value;
|
|
98
102
|
};
|
|
99
103
|
|
|
100
|
-
//
|
|
101
|
-
import
|
|
104
|
+
// src/useDefaults.ts
|
|
105
|
+
import defaultsDeep from "lodash.defaultsdeep";
|
|
106
|
+
import { useMemo as useMemo2 } from "react";
|
|
107
|
+
var useDefaults = (value, defaults) => {
|
|
108
|
+
return useMemo2(() => defaultsDeep({}, defaults, value), [
|
|
109
|
+
value,
|
|
110
|
+
defaults
|
|
111
|
+
]);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
// src/useDynamicRef.ts
|
|
115
|
+
import { useCallback } from "@preact-signals/safe-react/react";
|
|
116
|
+
import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
|
|
117
|
+
var useStateWithRef = (value$) => {
|
|
118
|
+
const [value, setValue] = useState4(value$);
|
|
119
|
+
const valueRef = useRef2(value$);
|
|
120
|
+
const setter = useCallback((value2) => {
|
|
121
|
+
if (typeof value2 === "function") {
|
|
122
|
+
setValue((current) => {
|
|
123
|
+
valueRef.current = value2(current);
|
|
124
|
+
return valueRef.current;
|
|
125
|
+
});
|
|
126
|
+
} else {
|
|
127
|
+
valueRef.current = value2;
|
|
128
|
+
setValue(value2);
|
|
129
|
+
}
|
|
130
|
+
}, []);
|
|
131
|
+
return [
|
|
132
|
+
value,
|
|
133
|
+
setter,
|
|
134
|
+
valueRef
|
|
135
|
+
];
|
|
136
|
+
};
|
|
102
137
|
var useDynamicRef = (value) => {
|
|
103
|
-
const
|
|
138
|
+
const valueRef = useRef2(value);
|
|
104
139
|
useEffect6(() => {
|
|
105
|
-
|
|
140
|
+
valueRef.current = value;
|
|
106
141
|
}, [
|
|
107
142
|
value
|
|
108
143
|
]);
|
|
109
|
-
return
|
|
144
|
+
return valueRef;
|
|
110
145
|
};
|
|
111
146
|
|
|
112
|
-
//
|
|
113
|
-
import { useMemo as
|
|
147
|
+
// src/useFileDownload.ts
|
|
148
|
+
import { useMemo as useMemo3 } from "react";
|
|
114
149
|
var useFileDownload = () => {
|
|
115
|
-
return
|
|
150
|
+
return useMemo3(() => (data, filename) => {
|
|
116
151
|
const url = typeof data === "string" ? data : URL.createObjectURL(data);
|
|
117
152
|
const element = document.createElement("a");
|
|
118
153
|
element.setAttribute("href", url);
|
|
@@ -122,8 +157,8 @@ var useFileDownload = () => {
|
|
|
122
157
|
}, []);
|
|
123
158
|
};
|
|
124
159
|
|
|
125
|
-
//
|
|
126
|
-
import {
|
|
160
|
+
// src/useForwardedRef.ts
|
|
161
|
+
import { useEffect as useEffect7, useRef as useRef3 } from "react";
|
|
127
162
|
var useForwardedRef = (ref) => {
|
|
128
163
|
const innerRef = useRef3(null);
|
|
129
164
|
useEffect7(() => {
|
|
@@ -139,21 +174,21 @@ var useForwardedRef = (ref) => {
|
|
|
139
174
|
return innerRef;
|
|
140
175
|
};
|
|
141
176
|
|
|
142
|
-
//
|
|
177
|
+
// src/useId.ts
|
|
143
178
|
import alea from "alea";
|
|
144
|
-
import { useMemo as
|
|
179
|
+
import { useMemo as useMemo4 } from "react";
|
|
145
180
|
var Alea = alea;
|
|
146
181
|
var prng = new Alea("@dxos/react-hooks");
|
|
147
182
|
var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
|
|
148
|
-
var useId = (namespace, propsId, opts) =>
|
|
183
|
+
var useId = (namespace, propsId, opts) => useMemo4(() => makeId(namespace, propsId, opts), [
|
|
149
184
|
propsId
|
|
150
185
|
]);
|
|
151
186
|
var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
|
|
152
187
|
|
|
153
|
-
//
|
|
154
|
-
import { useEffect as useEffect8, useRef as useRef4, useState as
|
|
188
|
+
// src/useIsFocused.ts
|
|
189
|
+
import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
|
|
155
190
|
var useIsFocused = (inputRef) => {
|
|
156
|
-
const [isFocused, setIsFocused] =
|
|
191
|
+
const [isFocused, setIsFocused] = useState5(void 0);
|
|
157
192
|
const isFocusedRef = useRef4(isFocused);
|
|
158
193
|
isFocusedRef.current = isFocused;
|
|
159
194
|
useEffect8(() => {
|
|
@@ -179,8 +214,8 @@ var useIsFocused = (inputRef) => {
|
|
|
179
214
|
return isFocused;
|
|
180
215
|
};
|
|
181
216
|
|
|
182
|
-
//
|
|
183
|
-
import { useEffect as useEffect9, useState as
|
|
217
|
+
// src/useMediaQuery.ts
|
|
218
|
+
import { useEffect as useEffect9, useState as useState6 } from "react";
|
|
184
219
|
var breakpointMediaQueries = {
|
|
185
220
|
sm: "(min-width: 640px)",
|
|
186
221
|
md: "(min-width: 768px)",
|
|
@@ -197,7 +232,7 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
197
232
|
fallback
|
|
198
233
|
];
|
|
199
234
|
fallbackValues = fallbackValues.filter((v) => v != null);
|
|
200
|
-
const [value, setValue] =
|
|
235
|
+
const [value, setValue] = useState6(() => {
|
|
201
236
|
return queries.map((query2, index) => ({
|
|
202
237
|
media: query2,
|
|
203
238
|
matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query2).matches
|
|
@@ -244,10 +279,10 @@ var useMediaQuery = (query, options = {}) => {
|
|
|
244
279
|
return value.map((item) => !!item.matches);
|
|
245
280
|
};
|
|
246
281
|
|
|
247
|
-
//
|
|
248
|
-
import { useMemo as
|
|
282
|
+
// src/useMulticastObservable.ts
|
|
283
|
+
import { useMemo as useMemo5, useSyncExternalStore } from "react";
|
|
249
284
|
var useMulticastObservable = (observable) => {
|
|
250
|
-
const subscribeFn =
|
|
285
|
+
const subscribeFn = useMemo5(() => (listener) => {
|
|
251
286
|
const subscription = observable.subscribe(listener);
|
|
252
287
|
return () => subscription.unsubscribe();
|
|
253
288
|
}, [
|
|
@@ -256,20 +291,20 @@ var useMulticastObservable = (observable) => {
|
|
|
256
291
|
return useSyncExternalStore(subscribeFn, () => observable.get());
|
|
257
292
|
};
|
|
258
293
|
|
|
259
|
-
//
|
|
260
|
-
import { useState as
|
|
294
|
+
// src/useRefCallback.ts
|
|
295
|
+
import { useState as useState7 } from "react";
|
|
261
296
|
var useRefCallback = () => {
|
|
262
|
-
const [value, setValue] =
|
|
297
|
+
const [value, setValue] = useState7(null);
|
|
263
298
|
return {
|
|
264
299
|
refCallback: (value2) => setValue(value2),
|
|
265
300
|
value
|
|
266
301
|
};
|
|
267
302
|
};
|
|
268
303
|
|
|
269
|
-
//
|
|
270
|
-
import { useLayoutEffect, useMemo as
|
|
304
|
+
// src/useResize.ts
|
|
305
|
+
import { useLayoutEffect, useMemo as useMemo6 } from "react";
|
|
271
306
|
var useResize = (handler, deps = [], delay = 800) => {
|
|
272
|
-
const debouncedHandler =
|
|
307
|
+
const debouncedHandler = useMemo6(() => {
|
|
273
308
|
let timeout;
|
|
274
309
|
return (event) => {
|
|
275
310
|
clearTimeout(timeout);
|
|
@@ -291,17 +326,84 @@ var useResize = (handler, deps = [], delay = 800) => {
|
|
|
291
326
|
]);
|
|
292
327
|
};
|
|
293
328
|
|
|
294
|
-
//
|
|
295
|
-
import {
|
|
296
|
-
import {
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
329
|
+
// src/useSignals.ts
|
|
330
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
331
|
+
import { computed, effect } from "@preact-signals/safe-react";
|
|
332
|
+
import { useRef as useRef5 } from "@preact-signals/safe-react/react";
|
|
333
|
+
import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
|
|
334
|
+
var useSignalsEffect = (cb, deps) => {
|
|
335
|
+
const callback = useRef5(cb);
|
|
336
|
+
callback.current = cb;
|
|
300
337
|
useEffect10(() => {
|
|
338
|
+
return effect(() => {
|
|
339
|
+
return callback.current();
|
|
340
|
+
});
|
|
341
|
+
}, deps ?? []);
|
|
342
|
+
};
|
|
343
|
+
var useSignalsMemo = (cb, deps) => {
|
|
344
|
+
var _effect = _useSignals();
|
|
345
|
+
try {
|
|
346
|
+
return useMemo7(() => computed(cb), deps ?? []).value;
|
|
347
|
+
} finally {
|
|
348
|
+
_effect.f();
|
|
349
|
+
}
|
|
350
|
+
};
|
|
351
|
+
|
|
352
|
+
// src/useTimeout.ts
|
|
353
|
+
import { useEffect as useEffect11, useRef as useRef6 } from "react";
|
|
354
|
+
var useTimeout = (callback, delay = 0, deps = []) => {
|
|
355
|
+
const callbackRef = useRef6(callback);
|
|
356
|
+
useEffect11(() => {
|
|
357
|
+
callbackRef.current = callback;
|
|
358
|
+
}, [
|
|
359
|
+
callback
|
|
360
|
+
]);
|
|
361
|
+
useEffect11(() => {
|
|
362
|
+
if (delay == null) {
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
const t = setTimeout(() => callbackRef.current?.(), delay);
|
|
366
|
+
return () => clearTimeout(t);
|
|
367
|
+
}, [
|
|
368
|
+
delay,
|
|
369
|
+
...deps
|
|
370
|
+
]);
|
|
371
|
+
};
|
|
372
|
+
var useInterval = (callback, delay = 0, deps = []) => {
|
|
373
|
+
const callbackRef = useRef6(callback);
|
|
374
|
+
useEffect11(() => {
|
|
375
|
+
callbackRef.current = callback;
|
|
376
|
+
}, [
|
|
377
|
+
callback
|
|
378
|
+
]);
|
|
379
|
+
useEffect11(() => {
|
|
380
|
+
if (delay == null) {
|
|
381
|
+
return;
|
|
382
|
+
}
|
|
383
|
+
const i = setInterval(async () => {
|
|
384
|
+
const result = await callbackRef.current?.();
|
|
385
|
+
if (result === false) {
|
|
386
|
+
clearInterval(i);
|
|
387
|
+
}
|
|
388
|
+
}, delay);
|
|
389
|
+
return () => clearInterval(i);
|
|
390
|
+
}, [
|
|
391
|
+
delay,
|
|
392
|
+
...deps
|
|
393
|
+
]);
|
|
394
|
+
};
|
|
395
|
+
|
|
396
|
+
// src/useTrackProps.ts
|
|
397
|
+
import { useEffect as useEffect12, useRef as useRef7 } from "react";
|
|
398
|
+
import { log } from "@dxos/log";
|
|
399
|
+
var __dxlog_file = "/__w/dxos/dxos/packages/ui/primitives/react-hooks/src/useTrackProps.ts";
|
|
400
|
+
var useTrackProps = (props, componentName = "Component", active = true) => {
|
|
401
|
+
const prevProps = useRef7(props);
|
|
402
|
+
useEffect12(() => {
|
|
301
403
|
const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);
|
|
302
404
|
if (changes.length > 0) {
|
|
303
405
|
if (active) {
|
|
304
|
-
|
|
406
|
+
log.info("props changed", {
|
|
305
407
|
componentName,
|
|
306
408
|
keys: changes.map(([key]) => key).join(","),
|
|
307
409
|
props: Object.fromEntries(changes.map(([key]) => [
|
|
@@ -323,15 +425,15 @@ var useTrackProps = (props, componentName = "Component", active = true) => {
|
|
|
323
425
|
});
|
|
324
426
|
};
|
|
325
427
|
|
|
326
|
-
//
|
|
327
|
-
import {
|
|
428
|
+
// src/useTransitions.ts
|
|
429
|
+
import { useEffect as useEffect13, useRef as useRef8, useState as useState8 } from "react";
|
|
328
430
|
var isFunction = (functionToCheck) => {
|
|
329
431
|
return functionToCheck instanceof Function;
|
|
330
432
|
};
|
|
331
433
|
var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
332
|
-
const [hasTransitioned, setHasTransitioned] =
|
|
333
|
-
const previousValue =
|
|
334
|
-
|
|
434
|
+
const [hasTransitioned, setHasTransitioned] = useState8(false);
|
|
435
|
+
const previousValue = useRef8(currentValue);
|
|
436
|
+
useEffect13(() => {
|
|
335
437
|
const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
|
|
336
438
|
const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
|
|
337
439
|
if (fromValueValid && toValueValid && !hasTransitioned) {
|
|
@@ -349,15 +451,15 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
|
|
|
349
451
|
return hasTransitioned;
|
|
350
452
|
};
|
|
351
453
|
var useOnTransition = (currentValue, fromValue, toValue, callback) => {
|
|
352
|
-
const dirty =
|
|
454
|
+
const dirty = useRef8(false);
|
|
353
455
|
const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
|
|
354
|
-
|
|
456
|
+
useEffect13(() => {
|
|
355
457
|
dirty.current = false;
|
|
356
458
|
}, [
|
|
357
459
|
currentValue,
|
|
358
460
|
dirty
|
|
359
461
|
]);
|
|
360
|
-
|
|
462
|
+
useEffect13(() => {
|
|
361
463
|
if (hasTransitioned && !dirty.current) {
|
|
362
464
|
callback();
|
|
363
465
|
dirty.current = true;
|
|
@@ -374,19 +476,25 @@ export {
|
|
|
374
476
|
useAsyncEffect,
|
|
375
477
|
useAsyncState,
|
|
376
478
|
useControlledState,
|
|
377
|
-
|
|
479
|
+
useDebugDeps,
|
|
378
480
|
useDefaultValue,
|
|
481
|
+
useDefaults,
|
|
379
482
|
useDidTransition,
|
|
380
483
|
useDynamicRef,
|
|
381
484
|
useFileDownload,
|
|
382
485
|
useForwardedRef,
|
|
383
486
|
useId,
|
|
487
|
+
useInterval,
|
|
384
488
|
useIsFocused,
|
|
385
489
|
useMediaQuery,
|
|
386
490
|
useMulticastObservable,
|
|
387
491
|
useOnTransition,
|
|
388
492
|
useRefCallback,
|
|
389
493
|
useResize,
|
|
494
|
+
useSignalsEffect,
|
|
495
|
+
useSignalsMemo,
|
|
496
|
+
useStateWithRef,
|
|
497
|
+
useTimeout,
|
|
390
498
|
useTrackProps
|
|
391
499
|
};
|
|
392
500
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledState.ts", "../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { useEffect } from 'react';\n\nimport { log } from '@dxos/log';\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 component is still mounted.\n * @param destructor Receives the value returned from the callback.\n * @param deps\n *\n * NOTE: This effect does not cancel the async operation if the component is unmounted.\n *\n * @deprecated\n */\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 void Promise.resolve(asyncResult)\n .then((result) => {\n value = result;\n })\n .catch(log.catch);\n\n return () => {\n mounted = false;\n effectDestructor?.(value);\n };\n }, effectDeps);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.\n */\nexport const useAsyncState = <T>(\n cb: () => Promise<T | undefined>,\n deps: any[] = [],\n): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {\n const [value, setValue] = useState<T | undefined>();\n useEffect(() => {\n let disposed = false;\n queueMicrotask(async () => {\n const data = await cb();\n if (!disposed) {\n setValue(data);\n }\n });\n\n return () => {\n disposed = true;\n };\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n */\nexport const useControlledState = <T>(controlledValue: T, ...deps: any[]): [T, Dispatch<SetStateAction<T>>] => {\n const [value, setValue] = useState<T>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\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 */\n// TODO(burdon): Move to react-hooks.\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 2024 DXOS.org\n//\n\nimport { useEffect, useState, useMemo } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, getDefaultValue: () => T): T => {\n // Memoize defaultValue with an empty dependency array.\n // This ensures that the defaultValue instance remains stable across all re-renders,\n // regardless of whether the defaultValue changes.\n const stableDefaultValue = useMemo(getDefaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * Ref that is updated by a dependency.\n */\nexport const useDynamicRef = <T>(value: T) => {\n const ref = useRef<T>(value);\n useEffect(() => {\n ref.current = value;\n }, [value]);\n\n return ref;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { type ForwardedRef, useRef, useEffect } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n * See also: react-merge-refs\n */\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => makeId(namespace, propsId, opts), [propsId]);\n\nexport const makeId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { useEffect, useRef, useState, type RefObject } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n // TODO(wittjosiah): Why is the default here true?\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\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 */\n// TODO(burdon): Move to react-hooks.\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", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n const [value, setValue] = useState<T | null>(null);\n return { refCallback: (value: T) => setValue(value), value };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useLayoutEffect, useMemo } from 'react';\n\nexport const useResize = (\n handler: (event?: Event) => void,\n deps: Parameters<typeof useLayoutEffect>[1] = [],\n delay: number = 800,\n) => {\n const debouncedHandler = useMemo(() => {\n let timeout: ReturnType<typeof setTimeout>;\n return (event?: Event) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n handler(event);\n }, delay);\n };\n }, [handler, delay]);\n\n return useLayoutEffect(() => {\n window.visualViewport?.addEventListener('resize', debouncedHandler);\n debouncedHandler();\n return () => window.visualViewport?.removeEventListener('resize', debouncedHandler);\n }, [debouncedHandler, ...deps]);\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useRef, useEffect } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Use to debug which props have changed to trigger re-renders in a React component.\n */\nexport const useTrackProps = <T extends Record<string, unknown>>(\n props: T,\n componentName = 'Component',\n active = true,\n) => {\n const prevProps = useRef<T>(props);\n useEffect(() => {\n const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);\n if (changes.length > 0) {\n if (active) {\n log.info('props changed', {\n componentName,\n keys: changes.map(([key]) => key).join(','),\n props: Object.fromEntries(\n changes.map(([key]) => [\n key,\n {\n from: prevProps.current[key],\n to: props[key],\n },\n ]),\n ),\n });\n }\n }\n\n prevProps.current = props;\n });\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useRef, useEffect, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n) => {\n const [hasTransitioned, setHasTransitioned] = useState(false);\n const previousValue = useRef<T>(currentValue);\n\n useEffect(() => {\n const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n if (fromValueValid && toValueValid && !hasTransitioned) {\n setHasTransitioned(true);\n } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, hasTransitioned]);\n\n return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n callback: () => void,\n) => {\n const dirty = useRef(false);\n const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n useEffect(() => {\n dirty.current = false;\n }, [currentValue, dirty]);\n\n useEffect(() => {\n if (hasTransitioned && !dirty.current) {\n callback();\n dirty.current = true;\n }\n }, [hasTransitioned, dirty, callback]);\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,
|
|
6
|
-
"names": ["useEffect", "
|
|
3
|
+
"sources": ["../../../src/useAsyncEffect.ts", "../../../src/useAsyncState.ts", "../../../src/useControlledState.ts", "../../../src/useDebugDeps.ts", "../../../src/useDefaultValue.ts", "../../../src/useDefaults.ts", "../../../src/useDynamicRef.ts", "../../../src/useFileDownload.ts", "../../../src/useForwardedRef.ts", "../../../src/useId.ts", "../../../src/useIsFocused.ts", "../../../src/useMediaQuery.ts", "../../../src/useMulticastObservable.ts", "../../../src/useRefCallback.ts", "../../../src/useResize.ts", "../../../src/useSignals.ts", "../../../src/useTimeout.ts", "../../../src/useTrackProps.ts", "../../../src/useTransitions.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2022 DXOS.org\n//\n\nimport { type DependencyList, type EffectCallback, useEffect } from 'react';\n\n/**\n * Async version of useEffect.\n * The `AbortController` can be used to detect if the component has been unmounted and\n * can be used to propagate abort signals to downstream async operations (e.g., `fetch`).\n */\nexport const useAsyncEffect = (\n cb: (controller: AbortController) => Promise<EffectCallback | void>,\n deps?: DependencyList,\n) => {\n useEffect(() => {\n const controller = new AbortController();\n let cleanup: EffectCallback | void;\n // NOTE: Timeout enables us to immediately cancel. if the component is unmounted.\n const t = setTimeout(async () => {\n if (!controller.signal.aborted) {\n cleanup = await cb(controller);\n }\n });\n\n return () => {\n clearTimeout(t);\n controller.abort();\n cleanup?.();\n };\n }, deps ?? []);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * NOTE: Use with care and when necessary to be able to cancel an async operation when unmounting.\n */\nexport const useAsyncState = <T>(\n cb: () => Promise<T | undefined>,\n deps: any[] = [],\n): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {\n const [value, setValue] = useState<T | undefined>();\n useEffect(() => {\n let disposed = false;\n const t = setTimeout(async () => {\n const data = await cb();\n if (!disposed) {\n setValue(data);\n }\n });\n\n return () => {\n disposed = true;\n clearTimeout(t);\n };\n }, deps);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Dispatch, type SetStateAction, useEffect, useState } from 'react';\n\n/**\n * A stateful hook with a controlled value.\n * NOTE: Be careful not to provide an inlinde default array.\n */\nexport const useControlledState = <T>(\n controlledValue: T,\n onChange?: (value: T) => void,\n ...deps: any[]\n): [T, Dispatch<SetStateAction<T>>] => {\n const [value, setValue] = useState<T>(controlledValue);\n useEffect(() => {\n if (controlledValue !== undefined) {\n setValue(controlledValue);\n }\n }, [controlledValue, ...deps]);\n\n useEffect(() => {\n onChange?.(value);\n }, [value, onChange]);\n\n return [value, setValue];\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type DependencyList, useEffect, useRef } from 'react';\n\n/**\n * Util to log deps that have changed.\n */\nexport const useDebugDeps = (deps: DependencyList = []) => {\n const lastDeps = useRef<DependencyList>([]);\n useEffect(() => {\n console.group('deps changed', { previous: lastDeps.current.length, current: deps.length });\n for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {\n if (lastDeps.current[i] !== deps[i]) {\n console.log('changed', {\n index: i,\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 2024 DXOS.org\n//\n\nimport { useEffect, useMemo, useState } from 'react';\n\n/**\n * A custom React hook that provides a stable default value for a potentially undefined reactive value.\n * The defaultValue is memoized upon component mount and remains unchanged until the component unmounts,\n * ensuring stability across all re-renders, even if the defaultValue prop changes.\n *\n * Note: The defaultValue is not reactive. It retains the same value from the component's mount to unmount.\n *\n * @param reactiveValue - The value that may change over time.\n * @param defaultValue - The initial value used when the reactiveValue is undefined. This value is not reactive.\n * @returns - The reactiveValue if it's defined, otherwise the defaultValue.\n */\nexport const useDefaultValue = <T>(reactiveValue: T | undefined | null, getDefaultValue: () => T): T => {\n // Memoize defaultValue with an empty dependency array.\n // This ensures that the defaultValue instance remains stable across all re-renders,\n // regardless of whether the defaultValue changes.\n const stableDefaultValue = useMemo(getDefaultValue, []);\n const [value, setValue] = useState(reactiveValue ?? stableDefaultValue);\n useEffect(() => {\n setValue(reactiveValue ?? stableDefaultValue);\n }, [reactiveValue, stableDefaultValue]);\n\n return value;\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport { useMemo } from 'react';\n\n/**\n * Returns a memo-ized deep-merged object of the default and value.\n * If value is undefined or null, then returns the default.\n */\nexport const useDefaults = <T>(value: T | undefined | null, defaults: T): T => {\n return useMemo(() => defaultsDeep({}, defaults, value), [value, defaults]);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useCallback } from '@preact-signals/safe-react/react';\nimport { type Dispatch, type MutableRefObject, type SetStateAction, useEffect, useRef, useState } from 'react';\n\n/**\n * Like `useState` but with an additional dynamic value.\n */\nexport const useStateWithRef = <T>(value$: T): [T, Dispatch<SetStateAction<T>>, MutableRefObject<T>] => {\n const [value, setValue] = useState<T>(value$);\n const valueRef = useRef<T>(value$);\n const setter = useCallback<Dispatch<SetStateAction<T>>>((value) => {\n if (typeof value === 'function') {\n setValue((current) => {\n valueRef.current = (value as Function)(current);\n return valueRef.current;\n });\n } else {\n valueRef.current = value;\n setValue(value);\n }\n }, []);\n\n return [value, setter, valueRef];\n};\n\n/**\n * Ref that is updated by a dependency.\n */\nexport const useDynamicRef = <T>(value: T): MutableRefObject<T> => {\n const valueRef = useRef<T>(value);\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n\n return valueRef;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\n/**\n * File download anchor.\n *\n * ```\n * const download = useDownload();\n * const handleDownload = (data: string) => {\n * download(new Blob([data], { type: 'text/plain' }), 'test.txt');\n * };\n * ```\n */\nexport const useFileDownload = (): ((data: Blob | string, filename: string) => void) => {\n return useMemo(\n () => (data: Blob | string, filename: string) => {\n const url = typeof data === 'string' ? data : URL.createObjectURL(data);\n const element = document.createElement('a');\n element.setAttribute('href', url);\n element.setAttribute('download', filename);\n element.setAttribute('target', 'download');\n element.click();\n },\n [],\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { type ForwardedRef, useEffect, useRef } from 'react';\n\n/**\n * Combines a possibly undefined forwarded ref with a locally defined ref.\n * @deprecated Use @radix-ui/react-compose-refs\n */\nexport const useForwardedRef = <T>(ref: ForwardedRef<T>) => {\n const innerRef = useRef<T>(null);\n useEffect(() => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(innerRef.current);\n } else {\n ref.current = innerRef.current;\n }\n });\n\n return innerRef;\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport alea from 'alea';\nimport { useMemo } from 'react';\n\ninterface PrngFactory {\n new (seed?: string): () => number;\n}\n\nconst Alea: PrngFactory = alea as unknown as PrngFactory;\n\nconst prng = new Alea('@dxos/react-hooks');\n\n// TODO(burdon): Replace with PublicKey.random().\nexport const randomString = (n = 4) =>\n prng()\n .toString(16)\n .slice(2, n + 2);\n\nexport const useId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n useMemo(() => makeId(namespace, propsId, opts), [propsId]);\n\nexport const makeId = (namespace: string, propsId?: string, opts?: Partial<{ n: number }>) =>\n propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;\n", "//\n// Copyright 2022 DXOS.org\n//\n\n// Based upon the useIsFocused hook which is part of the `rci` project:\n/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport const useIsFocused = (inputRef: RefObject<HTMLInputElement>) => {\n const [isFocused, setIsFocused] = useState<boolean | undefined>(undefined);\n const isFocusedRef = useRef<boolean | undefined>(isFocused);\n\n isFocusedRef.current = isFocused;\n\n useEffect(() => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n\n const onFocus = () => setIsFocused(true);\n const onBlur = () => setIsFocused(false);\n input.addEventListener('focus', onFocus);\n input.addEventListener('blur', onBlur);\n\n if (isFocusedRef.current === undefined) {\n setIsFocused(document.activeElement === input);\n }\n\n return () => {\n input.removeEventListener('focus', onFocus);\n input.removeEventListener('blur', onBlur);\n };\n }, [inputRef, setIsFocused]);\n\n return isFocused;\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// This hook is based on Chakra UI’s `useMediaQuery`: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/media-query/src/use-media-query.ts\n\nimport { useEffect, useState } from 'react';\n\nexport type UseMediaQueryOptions = {\n fallback?: boolean | boolean[];\n ssr?: boolean;\n};\n\n// TODO(thure): This should be derived from the same source of truth as the Tailwind theme config\nconst breakpointMediaQueries: Record<string, string> = {\n sm: '(min-width: 640px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 1024px)',\n xl: '(min-width: 1280px)',\n '2xl': '(min-width: 1536px)',\n};\n\n/**\n * React hook that tracks state of a CSS media query\n *\n * @param query the media query to match, or a recognized breakpoint token\n * @param options the media query options { fallback, ssr }\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-media-query\n */\nexport const useMediaQuery = (query: string | string[], options: UseMediaQueryOptions = {}): boolean[] => {\n // TODO(wittjosiah): Why is the default here true?\n const { ssr = true, fallback } = options;\n\n const queries = (Array.isArray(query) ? query : [query]).map((query) =>\n query in breakpointMediaQueries ? breakpointMediaQueries[query] : query,\n );\n\n let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];\n fallbackValues = fallbackValues.filter((v) => v != null) as boolean[];\n\n const [value, setValue] = useState(() => {\n return queries.map((query, index) => ({\n media: query,\n matches: ssr ? !!fallbackValues[index] : document.defaultView?.matchMedia(query).matches,\n }));\n });\n\n useEffect(() => {\n setValue(\n queries.map((query) => ({\n media: query,\n matches: document.defaultView?.matchMedia(query).matches,\n })),\n );\n\n const mql = queries.map((query) => document.defaultView?.matchMedia(query));\n\n const handler = (evt: MediaQueryListEvent) => {\n setValue((prev) => {\n return prev.slice().map((item) => {\n if (item.media === evt.media) {\n return { ...item, matches: evt.matches };\n }\n return item;\n });\n });\n };\n\n mql.forEach((mql) => {\n if (typeof mql?.addListener === 'function') {\n mql?.addListener(handler);\n } else {\n mql?.addEventListener('change', handler);\n }\n });\n\n return () => {\n mql.forEach((mql) => {\n if (typeof mql?.removeListener === 'function') {\n mql?.removeListener(handler);\n } else {\n mql?.removeEventListener('change', handler);\n }\n });\n };\n }, [document.defaultView]);\n\n return value.map((item) => !!item.matches);\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 */\n// TODO(burdon): Move to react-hooks.\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", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type RefCallback, useState } from 'react';\n\n/**\n * Custom React Hook that creates a ref callback and a state variable.\n * The ref callback sets the state variable when the ref changes.\n *\n * @returns An object containing the ref callback and the current value of the ref.\n */\nexport const useRefCallback = <T = any>(): { refCallback: RefCallback<T>; value: T | null } => {\n const [value, setValue] = useState<T | null>(null);\n return { refCallback: (value: T) => setValue(value), value };\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useLayoutEffect, useMemo } from 'react';\n\nexport const useResize = (\n handler: (event?: Event) => void,\n deps: Parameters<typeof useLayoutEffect>[1] = [],\n delay: number = 800,\n) => {\n const debouncedHandler = useMemo(() => {\n let timeout: ReturnType<typeof setTimeout>;\n return (event?: Event) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n handler(event);\n }, delay);\n };\n }, [handler, delay]);\n\n return useLayoutEffect(() => {\n window.visualViewport?.addEventListener('resize', debouncedHandler);\n debouncedHandler();\n return () => window.visualViewport?.removeEventListener('resize', debouncedHandler);\n }, [debouncedHandler, ...deps]);\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport { computed, effect } from '@preact-signals/safe-react';\nimport { useRef } from '@preact-signals/safe-react/react';\nimport { type DependencyList, useEffect, useMemo } from 'react';\n\n/**\n * Like `useEffect` but also tracks signals inside of the callback.\n */\nexport const useSignalsEffect = (cb: () => void | (() => void), deps?: DependencyList) => {\n const callback = useRef(cb);\n callback.current = cb;\n useEffect(() => {\n return effect(() => {\n return callback.current();\n });\n }, deps ?? []);\n};\n\n/**\n * Like `useMemo` but also tracks signals inside of the callback.\n */\nexport const useSignalsMemo = <T>(cb: () => T, deps?: DependencyList) => {\n return useMemo(() => computed(cb), deps ?? []).value;\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nexport const useTimeout = (callback?: () => Promise<void>, delay = 0, deps: any[] = []) => {\n const callbackRef = useRef(callback);\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n\n useEffect(() => {\n if (delay == null) {\n return;\n }\n\n const t = setTimeout(() => callbackRef.current?.(), delay);\n return () => clearTimeout(t);\n }, [delay, ...deps]);\n};\n\nexport const useInterval = (\n callback?: (() => Promise<void | boolean>) | (() => void | boolean),\n delay = 0,\n deps: any[] = [],\n) => {\n const callbackRef = useRef(callback);\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n\n useEffect(() => {\n if (delay == null) {\n return;\n }\n\n const i = setInterval(async () => {\n const result = await callbackRef.current?.();\n if (result === false) {\n clearInterval(i);\n }\n }, delay);\n return () => clearInterval(i);\n }, [delay, ...deps]);\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useRef } from 'react';\n\nimport { log } from '@dxos/log';\n\n/**\n * Use to debug which props have changed to trigger re-renders in a React component.\n */\nexport const useTrackProps = <T extends Record<string, unknown>>(\n props: T,\n componentName = 'Component',\n active = true,\n) => {\n const prevProps = useRef<T>(props);\n useEffect(() => {\n const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);\n if (changes.length > 0) {\n if (active) {\n log.info('props changed', {\n componentName,\n keys: changes.map(([key]) => key).join(','),\n props: Object.fromEntries(\n changes.map(([key]) => [\n key,\n {\n from: prevProps.current[key],\n to: props[key],\n },\n ]),\n ),\n });\n }\n }\n\n prevProps.current = props;\n });\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useRef, useState } from 'react';\n\nconst isFunction = <T>(functionToCheck: any): functionToCheck is (value: T) => boolean => {\n return functionToCheck instanceof Function;\n};\n\n/**\n * This is an internal custom hook that checks if a value has transitioned from a specified 'from' value to a 'to' value.\n *\n * @param currentValue - The value that is being monitored for transitions.\n * @param fromValue - The *from* value or a predicate function that determines the start of the transition.\n * @param toValue - The *to* value or a predicate function that determines the end of the transition.\n * @returns A boolean indicating whether the transition from *fromValue* to *toValue* has occurred.\n *\n * @internal Consider using `useOnTransition` for handling transitions instead of this hook.\n */\nexport const useDidTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n) => {\n const [hasTransitioned, setHasTransitioned] = useState(false);\n const previousValue = useRef<T>(currentValue);\n\n useEffect(() => {\n const toValueValid = isFunction<T>(toValue) ? toValue(currentValue) : toValue === currentValue;\n const fromValueValid = isFunction<T>(fromValue)\n ? fromValue(previousValue.current)\n : fromValue === previousValue.current;\n\n if (fromValueValid && toValueValid && !hasTransitioned) {\n setHasTransitioned(true);\n } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {\n setHasTransitioned(false);\n }\n\n previousValue.current = currentValue;\n }, [currentValue, fromValue, toValue, hasTransitioned]);\n\n return hasTransitioned;\n};\n\n/**\n * Executes a callback function when a specified transition occurs in a value.\n *\n * This function utilizes the `useDidTransition` hook to monitor changes in `currentValue`.\n * When `currentValue` transitions from `fromValue` to `toValue`, the provided `callback` function is executed. */\nexport const useOnTransition = <T>(\n currentValue: T,\n fromValue: T | ((value: T) => boolean),\n toValue: T | ((value: T) => boolean),\n callback: () => void,\n) => {\n const dirty = useRef(false);\n const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);\n\n useEffect(() => {\n dirty.current = false;\n }, [currentValue, dirty]);\n\n useEffect(() => {\n if (hasTransitioned && !dirty.current) {\n callback();\n dirty.current = true;\n }\n }, [hasTransitioned, dirty, callback]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useEffect", "useAsyncEffect", "cb", "deps", "useEffect", "controller", "AbortController", "cleanup", "t", "setTimeout", "signal", "aborted", "clearTimeout", "abort", "useEffect", "useState", "useAsyncState", "cb", "deps", "value", "setValue", "useState", "useEffect", "disposed", "t", "setTimeout", "data", "clearTimeout", "useEffect", "useState", "useControlledState", "controlledValue", "onChange", "deps", "value", "setValue", "useState", "useEffect", "undefined", "useEffect", "useRef", "useDebugDeps", "deps", "lastDeps", "useRef", "useEffect", "console", "group", "previous", "current", "length", "i", "Math", "max", "log", "index", "groupEnd", "useEffect", "useMemo", "useState", "useDefaultValue", "reactiveValue", "getDefaultValue", "stableDefaultValue", "useMemo", "value", "setValue", "useState", "useEffect", "defaultsDeep", "useMemo", "useDefaults", "value", "defaults", "useMemo", "defaultsDeep", "useCallback", "useEffect", "useRef", "useState", "useStateWithRef", "value$", "value", "setValue", "useState", "valueRef", "useRef", "setter", "useCallback", "current", "useDynamicRef", "useEffect", "useMemo", "useFileDownload", "useMemo", "data", "filename", "url", "URL", "createObjectURL", "element", "document", "createElement", "setAttribute", "click", "useEffect", "useRef", "useForwardedRef", "ref", "innerRef", "useRef", "useEffect", "current", "alea", "useMemo", "Alea", "alea", "prng", "randomString", "n", "toString", "slice", "useId", "namespace", "propsId", "opts", "useMemo", "makeId", "useEffect", "useRef", "useState", "useIsFocused", "inputRef", "isFocused", "setIsFocused", "useState", "undefined", "isFocusedRef", "useRef", "current", "useEffect", "input", "onFocus", "onBlur", "addEventListener", "document", "activeElement", "removeEventListener", "useEffect", "useState", "breakpointMediaQueries", "sm", "md", "lg", "xl", "useMediaQuery", "query", "options", "ssr", "fallback", "queries", "Array", "isArray", "map", "fallbackValues", "filter", "v", "value", "setValue", "useState", "index", "media", "matches", "document", "defaultView", "matchMedia", "useEffect", "mql", "handler", "evt", "prev", "slice", "item", "forEach", "addListener", "addEventListener", "removeListener", "removeEventListener", "useMemo", "useSyncExternalStore", "useMulticastObservable", "observable", "subscribeFn", "useMemo", "listener", "subscription", "subscribe", "unsubscribe", "useSyncExternalStore", "get", "useState", "useRefCallback", "value", "setValue", "useState", "refCallback", "useLayoutEffect", "useMemo", "useResize", "handler", "deps", "delay", "debouncedHandler", "useMemo", "timeout", "event", "clearTimeout", "setTimeout", "useLayoutEffect", "window", "visualViewport", "addEventListener", "removeEventListener", "computed", "effect", "useRef", "useEffect", "useMemo", "useSignalsEffect", "cb", "deps", "callback", "useRef", "current", "useEffect", "effect", "useSignalsMemo", "useMemo", "computed", "value", "useEffect", "useRef", "useTimeout", "callback", "delay", "deps", "callbackRef", "useRef", "useEffect", "current", "t", "setTimeout", "clearTimeout", "useInterval", "i", "setInterval", "result", "clearInterval", "useEffect", "useRef", "log", "useTrackProps", "props", "componentName", "active", "prevProps", "changes", "Object", "entries", "filter", "key", "current", "length", "info", "keys", "map", "join", "fromEntries", "from", "to", "useEffect", "useRef", "useState", "isFunction", "functionToCheck", "Function", "useDidTransition", "currentValue", "fromValue", "toValue", "hasTransitioned", "setHasTransitioned", "useState", "previousValue", "useRef", "useEffect", "toValueValid", "fromValueValid", "current", "useOnTransition", "callback", "dirty"]
|
|
7
7
|
}
|