@alxia/react-router 0.32.0 → 0.32.1
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/fetcher/index.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
// src/fetcher/use-debounced-fetcher.ts
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
startTransition,
|
|
4
|
+
useCallback,
|
|
5
|
+
useEffect,
|
|
6
|
+
useLayoutEffect,
|
|
7
|
+
useRef,
|
|
8
|
+
useState
|
|
9
|
+
} from "react";
|
|
3
10
|
import { useFetcher } from "react-router";
|
|
4
11
|
function useDebouncedFetcher(value, to, options = {}) {
|
|
5
12
|
const { delayMs = 250, minLength = 1, enabled = true, key, keep } = options;
|
|
@@ -12,6 +19,23 @@ function useDebouncedFetcher(value, to, options = {}) {
|
|
|
12
19
|
const url = enabled && text.length >= minLength ? typeof to === "function" ? to(text) : to : null;
|
|
13
20
|
const [loaded, setLoaded] = useState(null);
|
|
14
21
|
const previous = useRef(undefined);
|
|
22
|
+
const seq = useRef(0);
|
|
23
|
+
const [settled, setSettled] = useState(0);
|
|
24
|
+
const busySeq = useRef(0);
|
|
25
|
+
useLayoutEffect(() => {
|
|
26
|
+
if (fetcher.state !== "idle")
|
|
27
|
+
busySeq.current = seq.current;
|
|
28
|
+
}, [fetcher.state]);
|
|
29
|
+
const ask = (target) => {
|
|
30
|
+
const mine = ++seq.current;
|
|
31
|
+
setLoaded(target);
|
|
32
|
+
Promise.resolve(load.current(target)).then(() => {
|
|
33
|
+
if (mine === seq.current)
|
|
34
|
+
startTransition(() => setSettled(mine));
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
const askRef = useRef(ask);
|
|
38
|
+
askRef.current = ask;
|
|
15
39
|
useEffect(() => {
|
|
16
40
|
if (url === null) {
|
|
17
41
|
previous.current = undefined;
|
|
@@ -19,12 +43,12 @@ function useDebouncedFetcher(value, to, options = {}) {
|
|
|
19
43
|
return;
|
|
20
44
|
}
|
|
21
45
|
const timer = setTimeout(() => {
|
|
22
|
-
|
|
23
|
-
load.current(url);
|
|
46
|
+
askRef.current(url);
|
|
24
47
|
}, delayMs);
|
|
25
48
|
return () => clearTimeout(timer);
|
|
26
49
|
}, [url, text, delayMs]);
|
|
27
|
-
const
|
|
50
|
+
const landed = fetcher.state === "idle" && (busySeq.current === seq.current || settled === seq.current);
|
|
51
|
+
const current = url !== null && loaded === url && landed && fetcher.data !== undefined;
|
|
28
52
|
const answer = current ? fetcher.data : undefined;
|
|
29
53
|
useEffect(() => {
|
|
30
54
|
if (answer === undefined || answer === null)
|
|
@@ -39,15 +63,14 @@ function useDebouncedFetcher(value, to, options = {}) {
|
|
|
39
63
|
else if (loaded !== url)
|
|
40
64
|
state = "waiting";
|
|
41
65
|
else
|
|
42
|
-
state =
|
|
66
|
+
state = landed ? "done" : "loading";
|
|
43
67
|
const urlRef = useRef(url);
|
|
44
68
|
urlRef.current = url;
|
|
45
69
|
const retry = useCallback(() => {
|
|
46
70
|
const now = urlRef.current;
|
|
47
71
|
if (now === null)
|
|
48
72
|
return;
|
|
49
|
-
|
|
50
|
-
load.current(now);
|
|
73
|
+
askRef.current(now);
|
|
51
74
|
}, []);
|
|
52
75
|
return { data, stale: state !== "done" && data !== undefined, state, retry };
|
|
53
76
|
}
|
|
@@ -74,5 +97,5 @@ export {
|
|
|
74
97
|
useFetcherAnswer
|
|
75
98
|
};
|
|
76
99
|
|
|
77
|
-
//# debugId=
|
|
100
|
+
//# debugId=A7A319CE3CF8CC6064756E2164756E21
|
|
78
101
|
//# sourceMappingURL=index.js.map
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/fetcher/use-debounced-fetcher.ts", "../src/fetcher/use-fetcher-answer.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import {
|
|
5
|
+
"import {\n\tstartTransition,\n\tuseCallback,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { useFetcher } from 'react-router';\n\n/** What `useFetcher<Data>` hands back as `data` (`Data` may be `typeof loader`). */\ntype FetcherData<Data> = ReturnType<typeof useFetcher<Data>>['data'];\n\n/** What `useDebouncedFetcher` is doing for the value typed. */\nexport type DebouncedFetcherState =\n\t/** Nothing to ask: disabled, or the value is shorter than `minLength`. */\n\t| 'idle'\n\t/** The value changed and the pause after the last change is running. */\n\t| 'waiting'\n\t/** The resource route is loading. */\n\t| 'loading'\n\t/** The route answered for the value as it stands. */\n\t| 'done';\n\nexport interface DebouncedFetcherOptions<Data = unknown> {\n\t/** Pause after the last change before the route is asked. Default 250. */\n\treadonly delayMs?: number;\n\t/** The trimmed value must have this many characters. Default 1. */\n\treadonly minLength?: number;\n\t/** `false` asks nothing and forgets the previous answer. Default `true`. */\n\treadonly enabled?: boolean;\n\t/** The fetcher's key, to share it with another component. */\n\treadonly key?: string;\n\t/**\n\t * Which answers may be kept as the stale `data` while the next value waits\n\t * or loads. Default: all. An answer it refuses (a failure) is still `data`\n\t * while it is the current one, but is never shown as the previous one: after a refused answer, the stale\n\t * data is the last *kept* answer, not the refused one.\n\t */\n\treadonly keep?: (data: NonNullable<FetcherData<Data>>) => boolean;\n}\n\nexport interface DebouncedFetcher<Data> {\n\t/**\n\t * The route's answer for the value as it stands, else (`stale`) the last\n\t * answer for an earlier value, kept until the new one lands. `undefined`\n\t * before any answer, and again once the hook goes `idle`.\n\t */\n\treadonly data: FetcherData<Data>;\n\t/** `data` answers an earlier value (or none is current yet). */\n\treadonly stale: boolean;\n\treadonly state: DebouncedFetcherState;\n\t/** Asks the route again for the value as it stands, without waiting. */\n\treadonly retry: () => void;\n}\n\n/**\n * A resource route loaded through a fetcher for a value that changes as the\n * user types. After `delayMs` without a change, and from `minLength`\n * characters, it calls `fetcher.load` once (a newer load cancels the\n * previous one). An answer only counts for the value it was asked for: while\n * a newer value waits or loads, `data` is the previous answer with `stale`\n * set, and an answer for an older value is never returned as current.\n * `to` is the route's URL, or a function of the trimmed value that builds it\n * (a string without a function is loaded as it is, the value being only the\n * trigger). A refusal the route answers as data is `data` like any answer.\n */\nexport function useDebouncedFetcher<Data>(\n\tvalue: string,\n\tto: string | ((value: string) => string),\n\toptions: DebouncedFetcherOptions<Data> = {},\n): DebouncedFetcher<Data> {\n\tconst { delayMs = 250, minLength = 1, enabled = true, key, keep } = options;\n\tconst keepRef = useRef(keep);\n\tkeepRef.current = keep;\n\tconst fetcher = useFetcher<Data>(key === undefined ? undefined : { key });\n\tconst load = useRef(fetcher.load);\n\tload.current = fetcher.load;\n\tconst text = value.trim();\n\tconst url =\n\t\tenabled && text.length >= minLength\n\t\t\t? typeof to === 'function'\n\t\t\t\t? to(text)\n\t\t\t\t: to\n\t\t\t: null;\n\t// The URL the fetcher was last told to load.\n\tconst [loaded, setLoaded] = useState<string | null>(null);\n\tconst previous = useRef<FetcherData<Data>>(undefined);\n\t// React Router applies the fetcher's `loading` state in a transition, so\n\t// right after `load()` a render can still show `idle` and the previous\n\t// answer. A load has landed only once the fetcher was seen busy for that very load (the load number is kept, so a busy render of a superseded load does not count), or\n\t// its `load()` promise settled and a transition queued after it committed\n\t// (a fast load whose busy state was never rendered, or a route answering\n\t// the very same object twice). `seq` numbers the loads, so a superseded\n\t// one never counts.\n\tconst seq = useRef(0);\n\tconst [settled, setSettled] = useState(0);\n\tconst busySeq = useRef(0);\n\tuseLayoutEffect(() => {\n\t\tif (fetcher.state !== 'idle') busySeq.current = seq.current;\n\t}, [fetcher.state]);\n\tconst ask = (target: string) => {\n\t\tconst mine = ++seq.current;\n\t\tsetLoaded(target);\n\t\tvoid Promise.resolve(load.current(target)).then(() => {\n\t\t\tif (mine === seq.current) startTransition(() => setSettled(mine));\n\t\t});\n\t};\n\tconst askRef = useRef(ask);\n\taskRef.current = ask;\n\n\tuseEffect(() => {\n\t\tif (url === null) {\n\t\t\tprevious.current = undefined;\n\t\t\tsetLoaded(null);\n\t\t\treturn;\n\t\t}\n\t\tconst timer = setTimeout(() => {\n\t\t\taskRef.current(url);\n\t\t}, delayMs);\n\t\treturn () => clearTimeout(timer);\n\t}, [url, text, delayMs]);\n\n\tconst landed =\n\t\tfetcher.state === 'idle' &&\n\t\t(busySeq.current === seq.current || settled === seq.current);\n\tconst current =\n\t\turl !== null && loaded === url && landed && fetcher.data !== undefined;\n\tconst answer = current ? fetcher.data : undefined;\n\tuseEffect(() => {\n\t\tif (answer === undefined || answer === null) return;\n\t\tif (keepRef.current?.(answer) ?? true) previous.current = answer;\n\t}, [answer]);\n\n\tconst data = current ? answer : url === null ? undefined : previous.current;\n\tlet state: DebouncedFetcherState;\n\tif (url === null) state = 'idle';\n\telse if (loaded !== url) state = 'waiting';\n\telse state = landed ? 'done' : 'loading';\n\n\tconst urlRef = useRef(url);\n\turlRef.current = url;\n\tconst retry = useCallback(() => {\n\t\tconst now = urlRef.current;\n\t\tif (now === null) return;\n\t\taskRef.current(now);\n\t}, []);\n\treturn { data, stale: state !== 'done' && data !== undefined, state, retry };\n}\n",
|
|
6
6
|
"import { useEffect, useRef, useState } from 'react';\n\n/** What the hook reads of a React Router fetcher. */\nexport interface AnswerSource<Data> {\n\treadonly state: string;\n\treadonly data: Data | undefined;\n}\n\n/**\n * The answers a fetcher gives, one at a time. A keyed fetcher outlives its\n * component, so the data it holds when the component mounts is an earlier\n * visit's, not this one's. `onAnswer` is called once for each answer that\n * arrives while the fetcher is idle and is another object than the last one\n * seen (the data present at mount counts as seen). The handler is read from\n * a ref, so a new function each render never re-fires it. Returns the latest\n * answer handed over, `undefined` until one arrives.\n */\nexport function useFetcherAnswer<Data>(\n\tfetcher: AnswerSource<Data>,\n\tonAnswer?: (answer: Data) => void,\n): Data | undefined {\n\tconst seen = useRef(fetcher.data);\n\tconst handler = useRef(onAnswer);\n\thandler.current = onAnswer;\n\tconst [latest, setLatest] = useState<Data | undefined>(undefined);\n\tconst answer = fetcher.state === 'idle' ? fetcher.data : undefined;\n\tuseEffect(() => {\n\t\tif (answer === undefined || answer === null || answer === seen.current) {\n\t\t\treturn;\n\t\t}\n\t\tseen.current = answer;\n\t\tsetLatest(answer);\n\t\thandler.current?.(answer);\n\t}, [answer]);\n\treturn latest;\n}\n"
|
|
7
7
|
],
|
|
8
|
-
"mappings": ";AAAA;
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "A7A319CE3CF8CC6064756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-debounced-fetcher.d.ts","sourceRoot":"","sources":["../../src/fetcher/use-debounced-fetcher.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-debounced-fetcher.d.ts","sourceRoot":"","sources":["../../src/fetcher/use-debounced-fetcher.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,oFAAoF;AACpF,KAAK,WAAW,CAAC,IAAI,IAAI,UAAU,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,+DAA+D;AAC/D,MAAM,MAAM,qBAAqB;AAChC,0EAA0E;AACxE,MAAM;AACR,wEAAwE;GACtE,SAAS;AACX,qCAAqC;GACnC,SAAS;AACX,qDAAqD;GACnD,MAAM,CAAC;AAEV,MAAM,WAAW,uBAAuB,CAAC,IAAI,GAAG,OAAO;IACtD,0EAA0E;IAC1E,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,OAAO,CAAC;CAClE;AAED,MAAM,WAAW,gBAAgB,CAAC,IAAI;IACrC;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACjC,gEAAgE;IAChE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,qBAAqB,CAAC;IACtC,wEAAwE;IACxE,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EACvC,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,EACxC,OAAO,GAAE,uBAAuB,CAAC,IAAI,CAAM,GACzC,gBAAgB,CAAC,IAAI,CAAC,CA6ExB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alxia/react-router",
|
|
3
|
-
"version": "0.32.
|
|
3
|
+
"version": "0.32.1",
|
|
4
4
|
"description": "alxia as the server of a React Router framework app: server rendering behind the app's hooks, loaders reading its typed context, the client's assets served; the code with no UI an installable app shares (`/pwa`), its hooks (`/pwa/react`), `noCache` for the worker's script (`/pwa/server`), the service worker on Workbox (`/pwa/worker`) and its build (`/pwa/build`), an API's refusals worded for the page (`/errors`), the BFF session: cookies, sign-in, step-up and mail links (`/session`), its page hooks (`/session/react`) and what it shares with the page (`/session/model`), a GraphQL subscription relayed to the browser over SSE (`/subscription`), the page's CSP nonce and inline boot scripts (`/document`) and a streaming `entry.server` (`/entry`)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|