clear-react-router 1.5.1 → 1.5.2
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useSetIsAnimated: (isAnimated?: boolean) => void;
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
1
|
+
import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
2
2
|
//#region \0rolldown/runtime.js
|
|
3
3
|
var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
|
|
4
4
|
//#endregion
|
|
@@ -78,6 +78,42 @@ var useLatest = (value) => {
|
|
|
78
78
|
return ref;
|
|
79
79
|
};
|
|
80
80
|
//#endregion
|
|
81
|
+
//#region store/createStore.ts
|
|
82
|
+
var createStore = (storeCreator) => {
|
|
83
|
+
let store;
|
|
84
|
+
const subscribers = /* @__PURE__ */ new Set();
|
|
85
|
+
const get = () => store;
|
|
86
|
+
const set = (action) => {
|
|
87
|
+
const nextState = typeof action === "function" ? action(store) : action;
|
|
88
|
+
if (!Object.is(store, nextState)) {
|
|
89
|
+
const prevState = store;
|
|
90
|
+
store = typeof nextState !== "object" || nextState === null ? nextState : Object.assign({}, store, nextState);
|
|
91
|
+
console.log({ store });
|
|
92
|
+
subscribers.forEach((listener) => listener(store, prevState));
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
store = storeCreator(set, get);
|
|
96
|
+
const subscribe = (listener) => {
|
|
97
|
+
subscribers.add(listener);
|
|
98
|
+
return () => subscribers.delete(listener);
|
|
99
|
+
};
|
|
100
|
+
function use(selector) {
|
|
101
|
+
return useSyncExternalStore(subscribe, () => selector ? selector(get()) : get());
|
|
102
|
+
}
|
|
103
|
+
return {
|
|
104
|
+
get,
|
|
105
|
+
set,
|
|
106
|
+
subscribe,
|
|
107
|
+
use
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region store/isAnimatedStore.ts
|
|
112
|
+
var isAnimatedStore = createStore((set) => ({
|
|
113
|
+
isAnimated: false,
|
|
114
|
+
setIsAnimated: (isAnimated) => set({ isAnimated })
|
|
115
|
+
}));
|
|
116
|
+
//#endregion
|
|
81
117
|
//#region utils/createLazyComponent.tsx
|
|
82
118
|
var createLazyComponent = (importFn, fallback) => {
|
|
83
119
|
const LazyComp = lazy(() => importFn().then((module) => ({ default: module.default || module })));
|
|
@@ -132,6 +168,7 @@ var comparePaths = (el, pathname) => {
|
|
|
132
168
|
//#region hooks/useHandleNavigation.ts
|
|
133
169
|
var ALL_LOCATIONS = "*";
|
|
134
170
|
var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, isCacheItemFresh }) => {
|
|
171
|
+
const isAnimated = isAnimatedStore.use((state) => state.isAnimated);
|
|
135
172
|
const [blockedRoute, setBlockedRoute] = useState({
|
|
136
173
|
from: "",
|
|
137
174
|
to: ""
|
|
@@ -184,6 +221,10 @@ var useHandleNavigation = ({ routeList, context, revalidateCache, setContext, is
|
|
|
184
221
|
[prevPathname.current]: scrollPosition
|
|
185
222
|
};
|
|
186
223
|
});
|
|
224
|
+
if (!isAnimated) {
|
|
225
|
+
navigation(nextLocation, routeItem);
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
187
228
|
try {
|
|
188
229
|
document.startViewTransition(() => navigation(nextLocation, routeItem));
|
|
189
230
|
} catch {
|
|
@@ -486,11 +527,18 @@ var renderElement = (Component) => {
|
|
|
486
527
|
return typeof Component === "function" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) : Component;
|
|
487
528
|
};
|
|
488
529
|
//#endregion
|
|
530
|
+
//#region hooks/useSetIsAnimated.ts
|
|
531
|
+
var useSetIsAnimated = (isAnimated) => {
|
|
532
|
+
const setIsAnimated = isAnimatedStore.use((state) => state.setIsAnimated);
|
|
533
|
+
useEffect(() => setIsAnimated(!!isAnimated), [isAnimated]);
|
|
534
|
+
};
|
|
535
|
+
//#endregion
|
|
489
536
|
//#region components/Router.tsx
|
|
490
537
|
var Router = ({ isAnimated, animationDuration, spinner = true, preserveScroll = true, showFallbackIfAnimated = false }) => {
|
|
491
538
|
const { routeItemData: { routeItem, loaderState }, currentLoaderFallback } = useNavigationState();
|
|
492
539
|
usePreserveScroll(preserveScroll);
|
|
493
540
|
useApplyCustomAnimation(animationDuration);
|
|
541
|
+
useSetIsAnimated(isAnimated);
|
|
494
542
|
const isLoading = Boolean(currentLoaderFallback);
|
|
495
543
|
const showErrorElement = !isLoading && Boolean(loaderState.loaderError || loaderState.beforeLoadError);
|
|
496
544
|
const showSpinner = spinner && isAnimated && isLoading;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
type SetStateAction<T> = ((prevState: T) => Partial<T>) | Partial<T>;
|
|
2
|
+
type Listener<T> = (state: T, prevState: T) => void;
|
|
3
|
+
type Store<T> = {
|
|
4
|
+
get: () => T;
|
|
5
|
+
set: (action: SetStateAction<T>) => void;
|
|
6
|
+
subscribe: (listener: Listener<T>) => () => void;
|
|
7
|
+
use(): T;
|
|
8
|
+
use<S>(selector: (state: T) => S): S;
|
|
9
|
+
use<S>(selector?: (state: T) => S): T | S;
|
|
10
|
+
};
|
|
11
|
+
type StoreCreator<T> = (set: (action: SetStateAction<T>) => void, get: () => T) => T;
|
|
12
|
+
export declare const createStore: <T>(storeCreator: StoreCreator<T>) => Store<T>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
type IsAnimatedStore = {
|
|
2
|
+
isAnimated: boolean;
|
|
3
|
+
setIsAnimated(arg: boolean): void;
|
|
4
|
+
};
|
|
5
|
+
export declare const isAnimatedStore: {
|
|
6
|
+
get: () => IsAnimatedStore;
|
|
7
|
+
set: (action: Partial<IsAnimatedStore> | ((prevState: IsAnimatedStore) => Partial<IsAnimatedStore>)) => void;
|
|
8
|
+
subscribe: (listener: (state: IsAnimatedStore, prevState: IsAnimatedStore) => void) => () => void;
|
|
9
|
+
use(): IsAnimatedStore;
|
|
10
|
+
use<S>(selector: (state: IsAnimatedStore) => S): S;
|
|
11
|
+
use<S>(selector?: ((state: IsAnimatedStore) => S) | undefined): IsAnimatedStore | S;
|
|
12
|
+
};
|
|
13
|
+
export {};
|