clear-react-router 1.4.7 → 1.4.9
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,6 @@
|
|
|
1
1
|
import { BlockerState, Location, RouteItem, RouteItemData, UpdateBlockedRouteProps } from '../types/global';
|
|
2
2
|
export type NavigationContextValue = {
|
|
3
3
|
blockerState: BlockerState;
|
|
4
|
-
isLoading: boolean;
|
|
5
4
|
routeItemData: RouteItemData;
|
|
6
5
|
currentLoaderFallback: RouteItem['loaderFallback'];
|
|
7
6
|
};
|
|
@@ -5,9 +5,12 @@ type UseHandleNavigation = {
|
|
|
5
5
|
context: Record<string, unknown>;
|
|
6
6
|
revalidateCache(arg: RevalidateCacheArgs): Promise<void>;
|
|
7
7
|
setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
|
|
8
|
-
|
|
8
|
+
isCacheItemFresh(arg: {
|
|
9
|
+
routeItem?: RouteItem;
|
|
10
|
+
pathname: string;
|
|
11
|
+
}): boolean;
|
|
9
12
|
};
|
|
10
|
-
export declare const useHandleNavigation: ({ routeList, context, revalidateCache, setContext,
|
|
13
|
+
export declare const useHandleNavigation: ({ routeList, context, revalidateCache, setContext, isCacheItemFresh, }: UseHandleNavigation) => {
|
|
11
14
|
blockerState: BlockerState;
|
|
12
15
|
updateLocation: (nextLocation: Location) => Promise<void>;
|
|
13
16
|
updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;
|
|
@@ -8,7 +8,9 @@ type UseLoaderParams = {
|
|
|
8
8
|
export declare const useLoader: ({ routeList, context, setContext }: UseLoaderParams) => {
|
|
9
9
|
prefetchLoader: (pathname: string) => Promise<void>;
|
|
10
10
|
revalidateCache: ({ routeItem, loaderState, pathname }: RevalidateCacheArgs) => Promise<void>;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
isCacheItemFresh: ({ routeItem, pathname }: {
|
|
12
|
+
routeItem?: RouteItem;
|
|
13
|
+
pathname: string;
|
|
14
|
+
}) => boolean;
|
|
13
15
|
};
|
|
14
16
|
export {};
|
package/dist/index.js
CHANGED
|
@@ -45,7 +45,7 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
|
|
|
45
45
|
var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
|
|
46
46
|
module.exports = require_react_jsx_runtime_production();
|
|
47
47
|
})))();
|
|
48
|
-
var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState,
|
|
48
|
+
var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback }) => {
|
|
49
49
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsContext.Provider, {
|
|
50
50
|
value: {
|
|
51
51
|
setSearch,
|
|
@@ -60,7 +60,6 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
|
|
|
60
60
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationContext.Provider, {
|
|
61
61
|
value: {
|
|
62
62
|
blockerState,
|
|
63
|
-
isLoading,
|
|
64
63
|
routeItemData,
|
|
65
64
|
currentLoaderFallback
|
|
66
65
|
},
|
|
@@ -132,7 +131,7 @@ var comparePaths = (el, pathname) => {
|
|
|
132
131
|
//#endregion
|
|
133
132
|
//#region hooks/useHandleNavigation.ts
|
|
134
133
|
var ALL_LOCATIONS = "*";
|
|
135
|
-
var useHandleNavigation = ({ routeList, context, revalidateCache, setContext,
|
|
134
|
+
var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh }) => {
|
|
136
135
|
const [blockedRoute, setBlockedRoute] = useState({
|
|
137
136
|
from: "",
|
|
138
137
|
to: ""
|
|
@@ -170,12 +169,12 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
|
|
|
170
169
|
routeItem,
|
|
171
170
|
loaderState: loaderState.current
|
|
172
171
|
});
|
|
173
|
-
|
|
172
|
+
setCurrentLoaderFallback(void 0);
|
|
174
173
|
prevPathname.current = nextLocation.pathname;
|
|
175
174
|
const fullPath = nextLocation.search ? `${nextLocation.pathname}${nextLocation.search}` : nextLocation.pathname;
|
|
176
175
|
if (fullPath === window.location.pathname + window.location.search) return;
|
|
177
176
|
history.pushState(null, "", fullPath);
|
|
178
|
-
}, [
|
|
177
|
+
}, []);
|
|
179
178
|
const transitionedNavigation = useCallback((nextLocation, routeItem) => {
|
|
180
179
|
setScrollMap((prevState) => {
|
|
181
180
|
const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
|
|
@@ -220,7 +219,10 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
|
|
|
220
219
|
return transitionedNavigation(nextLocation, nextItem);
|
|
221
220
|
}
|
|
222
221
|
if (seq !== navigationSeq.current) return;
|
|
223
|
-
setCurrentLoaderFallback(
|
|
222
|
+
setCurrentLoaderFallback(isCacheItemFresh({
|
|
223
|
+
routeItem: nextItem,
|
|
224
|
+
pathname: nextLocation.pathname
|
|
225
|
+
}) ? void 0 : nextItem?.loaderFallback);
|
|
224
226
|
await revalidateCache({
|
|
225
227
|
routeItem: nextItem,
|
|
226
228
|
loaderState,
|
|
@@ -238,7 +240,8 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
|
|
|
238
240
|
revalidateCache,
|
|
239
241
|
routeList,
|
|
240
242
|
transitionedNavigation,
|
|
241
|
-
setContext
|
|
243
|
+
setContext,
|
|
244
|
+
isCacheItemFresh
|
|
242
245
|
]);
|
|
243
246
|
const setNextLocationRef = useLatest(navigationHandler);
|
|
244
247
|
const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
|
|
@@ -301,7 +304,6 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, se
|
|
|
301
304
|
//#endregion
|
|
302
305
|
//#region hooks/useLoader.ts
|
|
303
306
|
var useLoader = ({ routeList, context, setContext }) => {
|
|
304
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
305
307
|
const cacheTimestampsRef = useRef({});
|
|
306
308
|
const loaderCacheRef = useRef({});
|
|
307
309
|
const isCacheItemFresh = useCallback(({ routeItem, pathname }) => {
|
|
@@ -313,7 +315,8 @@ var useLoader = ({ routeList, context, setContext }) => {
|
|
|
313
315
|
}, []);
|
|
314
316
|
const revalidateCache = useCallback(async ({ routeItem, loaderState, pathname }) => {
|
|
315
317
|
if (!routeItem?.loader) {
|
|
316
|
-
if (loaderState)
|
|
318
|
+
if (!loaderState) return;
|
|
319
|
+
if (!routeItem?.beforeLoad) loaderState.current = {};
|
|
317
320
|
return;
|
|
318
321
|
}
|
|
319
322
|
if (isCacheItemFresh({
|
|
@@ -323,7 +326,6 @@ var useLoader = ({ routeList, context, setContext }) => {
|
|
|
323
326
|
if (loaderState) loaderState.current = loaderCacheRef.current[pathname];
|
|
324
327
|
return;
|
|
325
328
|
}
|
|
326
|
-
if (loaderState) setIsLoading(true);
|
|
327
329
|
try {
|
|
328
330
|
const params = getParamsObject({
|
|
329
331
|
params: routeItem.params,
|
|
@@ -369,15 +371,14 @@ var useLoader = ({ routeList, context, setContext }) => {
|
|
|
369
371
|
});
|
|
370
372
|
}, [revalidateCache, routeList]),
|
|
371
373
|
revalidateCache,
|
|
372
|
-
|
|
373
|
-
setIsLoading
|
|
374
|
+
isCacheItemFresh
|
|
374
375
|
};
|
|
375
376
|
};
|
|
376
377
|
//#endregion
|
|
377
378
|
//#region components/RouterProvider.tsx
|
|
378
379
|
var RouterProvider = ({ children, routeList, context: initialContext = {} }) => {
|
|
379
380
|
const [context, setContext] = useState(initialContext);
|
|
380
|
-
const { prefetchLoader, revalidateCache,
|
|
381
|
+
const { prefetchLoader, revalidateCache, isCacheItemFresh } = useLoader({
|
|
381
382
|
routeList,
|
|
382
383
|
context,
|
|
383
384
|
setContext
|
|
@@ -387,7 +388,7 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
|
|
|
387
388
|
context,
|
|
388
389
|
setContext,
|
|
389
390
|
revalidateCache,
|
|
390
|
-
|
|
391
|
+
isCacheItemFresh
|
|
391
392
|
});
|
|
392
393
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
|
|
393
394
|
...useMemo(() => ({
|
|
@@ -401,12 +402,10 @@ var RouterProvider = ({ children, routeList, context: initialContext = {} }) =>
|
|
|
401
402
|
routeList,
|
|
402
403
|
routeItemData,
|
|
403
404
|
restoreScroll,
|
|
404
|
-
currentLoaderFallback
|
|
405
|
-
isLoading
|
|
405
|
+
currentLoaderFallback
|
|
406
406
|
}), [
|
|
407
407
|
blockerState,
|
|
408
408
|
context,
|
|
409
|
-
isLoading,
|
|
410
409
|
prefetchLoader,
|
|
411
410
|
routeItemData,
|
|
412
411
|
routeList,
|
|
@@ -491,10 +490,11 @@ var renderElement = (Component) => {
|
|
|
491
490
|
//#endregion
|
|
492
491
|
//#region components/Router.tsx
|
|
493
492
|
var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
|
|
494
|
-
const {
|
|
493
|
+
const { routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
|
|
495
494
|
usePreserveScroll(preserveScroll);
|
|
496
495
|
useApplyCustomAnimation(animationDuration);
|
|
497
|
-
const
|
|
496
|
+
const isLoading = Boolean(currentLoaderFallback);
|
|
497
|
+
const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
|
|
498
498
|
const showSpinner = spinner && isAnimated && isLoading;
|
|
499
499
|
const loadingContent = !showErrorElement && isLoading;
|
|
500
500
|
if ((showFallbackIfAnimated || !isAnimated) && loadingContent) return renderElement(currentLoaderFallback);
|
|
@@ -733,20 +733,21 @@ var adapter = {
|
|
|
733
733
|
parse: (params) => params.map((param) => new Date(Number(param))),
|
|
734
734
|
serialize: (args) => args.map((arg) => String(arg.getTime()))
|
|
735
735
|
},
|
|
736
|
-
zodSchema: {
|
|
737
|
-
parse: (
|
|
736
|
+
zodSchema: (schema) => ({
|
|
737
|
+
parse: (params) => {
|
|
738
738
|
let parsed;
|
|
739
739
|
try {
|
|
740
|
-
parsed = JSON.parse(params[0]
|
|
740
|
+
parsed = params[0] ? JSON.parse(params[0]) : void 0;
|
|
741
741
|
} catch {
|
|
742
742
|
throw new Error("Invalid JSON");
|
|
743
743
|
}
|
|
744
|
+
if (parsed === void 0) return void 0;
|
|
744
745
|
const result = schema.safeParse(parsed);
|
|
745
746
|
if (!result.success) throw new Error("Invalid schema");
|
|
746
747
|
return result.data;
|
|
747
748
|
},
|
|
748
749
|
serialize: JSON.stringify
|
|
749
|
-
}
|
|
750
|
+
})
|
|
750
751
|
};
|
|
751
752
|
//#endregion
|
|
752
753
|
export { Link, Router, RouterProvider, adapter, createRouter, useBeforeUnload, useBlocker, useHistoricalTrail, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };
|
|
@@ -3,5 +3,5 @@ import { type ActionsContextValue, type DataContextValue, type NavigationContext
|
|
|
3
3
|
type ProviderProps = NavigationContextValue & ActionsContextValue & DataContextValue & {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
};
|
|
6
|
-
export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState,
|
|
6
|
+
export declare const Provider: ({ children, setContext, context, updateBlockedRoute, updateLocation, setSearch, prefetchLoader, blockerState, routeItemData, restoreScroll, currentLoaderFallback, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
package/dist/utils/adapter.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Adapter } from '../types/global';
|
|
1
2
|
type ZodInterface<T> = {
|
|
2
3
|
safeParse(input: unknown): {
|
|
3
4
|
success: true;
|
|
@@ -45,12 +46,6 @@ export declare const adapter: {
|
|
|
45
46
|
parse: (params: string[]) => Date[];
|
|
46
47
|
serialize: (args: Date[]) => string[];
|
|
47
48
|
};
|
|
48
|
-
zodSchema:
|
|
49
|
-
parse: <T>(schema: ZodInterface<T>) => (params: string[]) => T;
|
|
50
|
-
serialize: {
|
|
51
|
-
(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
|
|
52
|
-
(value: any, replacer?: (number | string)[] | null, space?: string | number): string;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
49
|
+
zodSchema: <T>(schema: ZodInterface<T>) => Adapter<T>;
|
|
55
50
|
};
|
|
56
51
|
export {};
|