clear-react-router 1.5.3 → 1.5.4
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,12 +221,16 @@ 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 {
|
|
190
231
|
navigation(nextLocation, routeItem);
|
|
191
232
|
}
|
|
192
|
-
}, [navigation]);
|
|
233
|
+
}, [navigation, isAnimated]);
|
|
193
234
|
const navigationHandler = useCallback(async (nextLocation) => {
|
|
194
235
|
navigationSeq.current = navigationSeq.current + 1;
|
|
195
236
|
const seq = navigationSeq.current;
|
|
@@ -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 {};
|