@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
95 lines (94 loc) • 3.17 kB
JavaScript
import { useRouter } from "./useRouter.js";
import { useRouterState } from "./useRouterState.js";
import { usePrevious } from "./utils.js";
import { getLocationChangeInfo, handleHashScroll, trimPathRight } from "@tanstack/router-core";
import * as Solid from "solid-js";
import { isServer } from "@tanstack/router-core/isServer";
//#region src/Transitioner.tsx
function Transitioner() {
const router = useRouter();
let mountLoadForRouter = {
router,
mounted: false
};
const isLoading = useRouterState({ select: ({ isLoading }) => isLoading });
if (isServer ?? router.isServer) return null;
const [isSolidTransitioning, startSolidTransition] = Solid.useTransition();
const hasPendingMatches = useRouterState({ select: (s) => s.matches.some((d) => d.status === "pending") });
const previousIsLoading = usePrevious(isLoading);
const isAnyPending = () => isLoading() || isSolidTransitioning() || hasPendingMatches();
const previousIsAnyPending = usePrevious(isAnyPending);
const isPagePending = () => isLoading() || hasPendingMatches();
const previousIsPagePending = usePrevious(isPagePending);
router.startTransition = (fn) => {
Solid.startTransition(() => {
startSolidTransition(fn);
});
};
Solid.onMount(() => {
const unsub = router.history.subscribe(router.load);
const nextLocation = router.buildLocation({
to: router.latestLocation.pathname,
search: true,
params: true,
hash: true,
state: true,
_includeValidateSearch: true
});
if (trimPathRight(router.latestLocation.publicHref) !== trimPathRight(nextLocation.publicHref)) router.commitLocation({
...nextLocation,
replace: true
});
Solid.onCleanup(() => {
unsub();
});
});
Solid.createRenderEffect(() => {
Solid.untrack(() => {
if (typeof window !== "undefined" && router.ssr || mountLoadForRouter.router === router && mountLoadForRouter.mounted) return;
mountLoadForRouter = {
router,
mounted: true
};
const tryLoad = async () => {
try {
await router.load();
} catch (err) {
console.error(err);
}
};
tryLoad();
});
});
Solid.createRenderEffect(Solid.on([previousIsLoading, isLoading], ([previousIsLoading, isLoading]) => {
if (previousIsLoading.previous && !isLoading) router.emit({
type: "onLoad",
...getLocationChangeInfo(router.state)
});
}));
Solid.createComputed(Solid.on([isPagePending, previousIsPagePending], ([isPagePending, previousIsPagePending]) => {
if (previousIsPagePending.previous && !isPagePending) router.emit({
type: "onBeforeRouteMount",
...getLocationChangeInfo(router.state)
});
}));
Solid.createRenderEffect(Solid.on([isAnyPending, previousIsAnyPending], ([isAnyPending, previousIsAnyPending]) => {
if (previousIsAnyPending.previous && !isAnyPending) {
const changeInfo = getLocationChangeInfo(router.state);
router.emit({
type: "onResolved",
...changeInfo
});
router.__store.setState((s) => ({
...s,
status: "idle",
resolvedLocation: s.location
}));
if (changeInfo.hrefChanged) handleHashScroll(router);
}
}));
return null;
}
//#endregion
export { Transitioner };
//# sourceMappingURL=Transitioner.js.map