StackedRouter: add startTransition
All checks were successful
/ depoly (push) Successful in 1m21s

This commit is contained in:
thislight 2025-01-02 21:05:20 +08:00
parent 2e13fcacb5
commit 1115135380
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E

View file

@ -15,6 +15,8 @@ import {
useContext, useContext,
onCleanup, onCleanup,
type Accessor, type Accessor,
useTransition,
getOwner,
} from "solid-js"; } from "solid-js";
import { createStore, unwrap } from "solid-js/store"; import { createStore, unwrap } from "solid-js/store";
import "./StackedRouter.css"; import "./StackedRouter.css";
@ -79,8 +81,8 @@ export type NewFrameOptions<T> = (T extends undefined
export type FramePusher<T, K extends keyof T = keyof T> = T[K] extends export type FramePusher<T, K extends keyof T = keyof T> = T[K] extends
| undefined | undefined
| any | any
? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame> ? (path: K, state?: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>
: (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Readonly<StackFrame>; : (path: K, state: Readonly<NewFrameOptions<T[K]>>) => Promise<Readonly<StackFrame>>;
export type Navigator<PushGuide = Record<string, any>> = { export type Navigator<PushGuide = Record<string, any>> = {
frames: readonly StackFrame[]; frames: readonly StackFrame[];
@ -465,6 +467,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
const [stack, mutStack] = createStore([] as StackFrame[], { name: "stack" }); const [stack, mutStack] = createStore([] as StackFrame[], { name: "stack" });
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const [, startTransition] = useTransition();
if (import.meta.hot) { if (import.meta.hot) {
const saveStack = () => { const saveStack = () => {
import.meta.hot!.data[$StackedRouterSavedStack] = unwrap(stack); import.meta.hot!.data[$StackedRouterSavedStack] = unwrap(stack);
@ -488,8 +492,8 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
}); });
} }
const pushFrame = (path: string, opts?: Readonly<NewFrameOptions<any>>) => const pushFrame = async (path: string, opts?: Readonly<NewFrameOptions<any>>) =>
untrack(() => { await untrack(async () => {
const frame = { const frame = {
path, path,
state: opts?.state, state: opts?.state,
@ -499,14 +503,17 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
}; };
const replace = opts?.replace; const replace = opts?.replace;
if (replace === "all" || stack.length === 0) { const length = stack.length;
mutStack([frame]); await startTransition(() => {
} else if (replace) { if (replace === "all" || length === 0) {
const idx = stack.length - 1; mutStack([frame]);
mutStack(idx, frame); } else if (replace) {
} else { const idx = length - 1;
mutStack(stack.length, frame); mutStack(idx, frame);
} } else {
mutStack(length, frame);
}
});
const savedStack = serializableStack(stack); const savedStack = serializableStack(stack);
@ -515,6 +522,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
} else { } else {
window.history.pushState(savedStack, "", path); window.history.pushState(savedStack, "", path);
} }
return frame; return frame;
}); });