From d609f41f61d82d64cb8b01a0f4e52fb1af2c893e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 18 Mar 2025 17:31:25 +0900
Subject: 🎨
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/global/NestedRouterView.vue     | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/frontend/src/components/global/NestedRouterView.vue

(limited to 'packages/frontend/src/components/global/NestedRouterView.vue')

diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue
new file mode 100644
index 0000000000..eb7192d8e0
--- /dev/null
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -0,0 +1,65 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<Suspense :timeout="0">
+	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+
+	<template #fallback>
+		<MkLoading/>
+	</template>
+</Suspense>
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
+import type { IRouter, Resolved } from '@/nirax.js';
+import MkLoadingPage from '@/pages/_loading_.vue';
+import { DI } from '@/di.js';
+
+const props = defineProps<{
+	router?: IRouter;
+}>();
+
+const router = props.router ?? inject(DI.router);
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject(DI.routerCurrentDepth, 0);
+provide(DI.routerCurrentDepth, currentDepth + 1);
+
+function resolveNested(current: Resolved, d = 0): Resolved | null {
+	if (d === currentDepth) {
+		return current;
+	} else {
+		if (current.child) {
+			return resolveNested(current.child, d + 1);
+		} else {
+			return null;
+		}
+	}
+}
+
+const current = resolveNested(router.current)!;
+const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
+const currentPageProps = ref(current.props);
+const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+
+function onChange({ resolved, key: newKey }) {
+	const current = resolveNested(resolved);
+	if (current == null || 'redirect' in current.route) return;
+	currentPageComponent.value = current.route.component;
+	currentPageProps.value = current.props;
+	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
-- 
cgit v1.2.3-freya


From bdc72e5817782316bb2c56ab362b4aa237236bef Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 19 Mar 2025 15:17:41 +0900
Subject: clean up

---
 packages/frontend/src/components/MkPageWindow.vue  |  9 ++--
 .../src/components/global/NestedRouterView.vue     |  6 +--
 .../frontend/src/components/global/RouterView.vue  |  6 +--
 .../src/components/global/StackingRouterView.vue   |  2 +-
 packages/frontend/src/nirax.ts                     | 57 +++-------------------
 packages/frontend/src/router/main.ts               | 10 ++--
 6 files changed, 21 insertions(+), 69 deletions(-)

(limited to 'packages/frontend/src/components/global/NestedRouterView.vue')

diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 8a1a9c58d2..a6049b4d91 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -60,9 +60,8 @@ const windowRouter = routerFactory(props.initialPath);
 
 const pageMetadata = ref<null | PageMetadata>(null);
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
-const history = ref<{ path: string; key: string; }[]>([{
+const history = ref<{ path: string; }[]>([{
 	path: windowRouter.getCurrentPath(),
-	key: windowRouter.getCurrentKey(),
 }]);
 const buttonsLeft = computed(() => {
 	const buttons: Record<string, unknown>[] = [];
@@ -100,12 +99,12 @@ function getSearchMarker(path: string) {
 const searchMarkerId = ref<string | null>(getSearchMarker(props.initialPath));
 
 windowRouter.addListener('push', ctx => {
-	history.value.push({ path: ctx.path, key: ctx.key });
+	history.value.push({ path: ctx.path });
 });
 
 windowRouter.addListener('replace', ctx => {
 	history.value.pop();
-	history.value.push({ path: ctx.path, key: ctx.key });
+	history.value.push({ path: ctx.path });
 });
 
 windowRouter.addListener('change', ctx => {
@@ -155,7 +154,7 @@ const contextmenu = computed(() => ([{
 
 function back() {
 	history.value.pop();
-	windowRouter.replace(history.value.at(-1)!.path, history.value.at(-1)!.key);
+	windowRouter.replace(history.value.at(-1)!.path);
 }
 
 function reload() {
diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue
index eb7192d8e0..40ee21c674 100644
--- a/packages/frontend/src/components/global/NestedRouterView.vue
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -47,14 +47,14 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 const current = resolveNested(router.current)!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
-const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+const key = ref(router.getCurrentPath());
 
-function onChange({ resolved, key: newKey }) {
+function onChange({ resolved }) {
 	const current = resolveNested(resolved);
 	if (current == null || 'redirect' in current.route) return;
 	currentPageComponent.value = current.route.component;
 	currentPageProps.value = current.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+	key.value = router.getCurrentPath();
 }
 
 router.addListener('change', onChange);
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index b01e355c5e..2f1ee6734f 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -44,13 +44,13 @@ provide(DI.routerCurrentDepth, currentDepth + 1);
 const current = router.current!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
-const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
+const key = ref(router.getCurrentPath());
 
-function onChange({ resolved, key: newKey }) {
+function onChange({ resolved }) {
 	if (resolved == null || 'redirect' in resolved.route) return;
 	currentPageComponent.value = resolved.route.component;
 	currentPageProps.value = resolved.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(resolved.props));
+	key.value = router.getCurrentPath();
 
 	nextTick(() => {
 		// ページ遷移完了後に再びキャッシュを有効化
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index d1ca655dee..8f5e6663d8 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -123,7 +123,7 @@ function mount() {
 function back() {
 	const prev = tabs.value[tabs.value.length - 2];
 	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
-	router.replace(prev.path, prev.key);
+	router.replace(prev.path);
 }
 
 router.addListener('replace', onReplace);
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index ea3f1fb01a..03c8b43aae 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -51,18 +51,15 @@ export type RouterEvent = {
 		beforePath: string;
 		path: string;
 		resolved: Resolved;
-		key: string;
 	}) => void;
 	replace: (ctx: {
 		path: string;
-		key: string;
 	}) => void;
 	push: (ctx: {
 		beforePath: string;
 		path: string;
 		route: RouteDef | null;
 		props: Map<string, string> | null;
-		key: string;
 	}) => void;
 	same: () => void;
 };
@@ -121,11 +118,9 @@ export interface IRouter extends EventEmitter<RouterEvent> {
 
 	getCurrentPath(): string;
 
-	getCurrentKey(): string;
-
 	push(path: string, flag?: RouterFlag): void;
 
-	replace(path: string, key?: string | null): void;
+	replace(path: string): void;
 
 	/** @see EventEmitter */
 	eventNames(): Array<EventEmitter.EventNames<RouterEvent>>;
@@ -197,7 +192,6 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 	private currentPath: string;
 	private isLoggedIn: boolean;
 	private notFoundPageComponent: Component;
-	private currentKey = Date.now().toString();
 	private redirectCount = 0;
 
 	public navHook: ((path: string, flag?: RouterFlag) => boolean) | null = null;
@@ -215,10 +209,9 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 	}
 
 	public init() {
-		const res = this.navigate(this.currentPath, null, false);
+		const res = this.navigate(this.currentPath, false);
 		this.emit('replace', {
 			path: res._parsedRoute.fullPath,
-			key: this.currentKey,
 		});
 	}
 
@@ -345,7 +338,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 		return check(this.routes, _parts);
 	}
 
-	private navigate(path: string, key: string | null | undefined, emitChange = true, _redirected = false): Resolved {
+	private navigate(path: string, emitChange = true, _redirected = false): Resolved {
 		const beforePath = this.currentPath;
 		this.currentPath = path;
 
@@ -366,7 +359,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 			if (_redirected && this.redirectCount++ > 10) {
 				throw new Error('redirect loop detected');
 			}
-			return this.navigate(redirectPath, null, emitChange, true);
+			return this.navigate(redirectPath, emitChange, true);
 		}
 
 		if (res.route.loginRequired && !this.isLoggedIn) {
@@ -375,18 +368,15 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 		}
 
 		const isSamePath = beforePath === path;
-		if (isSamePath && key == null) key = this.currentKey;
 		this.current = res;
 		this.currentRef.value = res;
 		this.currentRoute.value = res.route;
-		this.currentKey = res.route.globalCacheKey ?? key ?? path;
 
 		if (emitChange && res.route.path !== '/:(*)') {
 			this.emit('change', {
 				beforePath,
 				path,
 				resolved: res,
-				key: this.currentKey,
 			});
 		}
 
@@ -401,10 +391,6 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 		return this.currentPath;
 	}
 
-	public getCurrentKey() {
-		return this.currentKey;
-	}
-
 	public push(path: string, flag?: RouterFlag) {
 		const beforePath = this.currentPath;
 		if (path === beforePath) {
@@ -415,7 +401,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 			const cancel = this.navHook(path, flag);
 			if (cancel) return;
 		}
-		const res = this.navigate(path, null);
+		const res = this.navigate(path);
 		if (res.route.path === '/:(*)') {
 			location.href = path;
 		} else {
@@ -424,43 +410,14 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 				path: res._parsedRoute.fullPath,
 				route: res.route,
 				props: res.props,
-				key: this.currentKey,
 			});
 		}
 	}
 
-	public replace(path: string, key?: string | null) {
-		const res = this.navigate(path, key);
+	public replace(path: string) {
+		const res = this.navigate(path);
 		this.emit('replace', {
 			path: res._parsedRoute.fullPath,
-			key: this.currentKey,
 		});
 	}
 }
-
-export function useScrollPositionManager(getScrollContainer: () => HTMLElement | null, router: IRouter) {
-	const scrollPosStore = new Map<string, number>();
-
-	onMounted(() => {
-		const scrollContainer = getScrollContainer();
-		if (scrollContainer == null) return;
-
-		scrollContainer.addEventListener('scroll', () => {
-			scrollPosStore.set(router.getCurrentKey(), scrollContainer.scrollTop);
-		}, { passive: true });
-
-		router.addListener('change', ctx => {
-			const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
-			scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-			if (scrollPos !== 0) {
-				window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-					scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-				}, 100);
-			}
-		});
-
-		router.addListener('same', () => {
-			scrollContainer.scroll({ top: 0, behavior: 'smooth' });
-		});
-	});
-}
diff --git a/packages/frontend/src/router/main.ts b/packages/frontend/src/router/main.ts
index 3932a8bac8..2373c87717 100644
--- a/packages/frontend/src/router/main.ts
+++ b/packages/frontend/src/router/main.ts
@@ -19,15 +19,15 @@ export function setupRouter(app: App, routerFactory: ((path: string) => IRouter)
 	const mainRouter = routerFactory(location.pathname + location.search + location.hash);
 
 	window.addEventListener('popstate', (event) => {
-		mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
+		mainRouter.replace(location.pathname + location.search + location.hash);
 	});
 
 	mainRouter.addListener('push', ctx => {
-		window.history.pushState({ key: ctx.key }, '', ctx.path);
+		window.history.pushState({ }, '', ctx.path);
 	});
 
 	mainRouter.addListener('replace', ctx => {
-		window.history.replaceState({ key: ctx.key }, '', ctx.path);
+		window.history.replaceState({ }, '', ctx.path);
 	});
 
 	mainRouter.addListener('change', ctx => {
@@ -96,10 +96,6 @@ class MainRouterProxy implements IRouter {
 		this.supplier().navHook = value;
 	}
 
-	getCurrentKey(): string {
-		return this.supplier().getCurrentKey();
-	}
-
 	getCurrentPath(): string {
 		return this.supplier().getCurrentPath();
 	}
-- 
cgit v1.2.3-freya


From 7d4045e8b43f847b62576d82d2f6e891a1b0e6a7 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 19 Mar 2025 15:24:56 +0900
Subject: refactor(frontend): router refactoring

---
 .../src/components/global/NestedRouterView.vue     |   4 +-
 .../frontend/src/components/global/RouterView.vue  |   4 +-
 .../src/components/global/StackingRouterView.vue   |   4 +-
 packages/frontend/src/di.ts                        |   4 +-
 packages/frontend/src/nirax.ts                     | 423 ---------------------
 packages/frontend/src/router.ts                    | 341 +++++++++++++++++
 packages/frontend/src/router/definition.ts         |   6 +-
 packages/frontend/src/router/main.ts               |  18 +-
 packages/frontend/src/router/supplier.ts           |  10 +-
 packages/frontend/src/utility/get-user-menu.ts     |   4 +-
 packages/frontend/src/utility/lookup.ts            |   2 +-
 11 files changed, 369 insertions(+), 451 deletions(-)
 delete mode 100644 packages/frontend/src/nirax.ts
 create mode 100644 packages/frontend/src/router.ts

(limited to 'packages/frontend/src/components/global/NestedRouterView.vue')

diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue
index 40ee21c674..5b22d0b7a8 100644
--- a/packages/frontend/src/components/global/NestedRouterView.vue
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -15,12 +15,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
-import type { IRouter, Resolved } from '@/nirax.js';
+import type { Router, Resolved } from '@/router.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 
 const props = defineProps<{
-	router?: IRouter;
+	router?: Router;
 }>();
 
 const router = props.router ?? inject(DI.router);
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 2f1ee6734f..720034a942 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -22,14 +22,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
+import type { Router, Resolved, RouteDef } from '@/router.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 
 const props = defineProps<{
-	router?: IRouter;
+	router?: Router;
 }>();
 
 const router = props.router ?? inject(DI.router);
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index 8f5e6663d8..b94e020072 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
+import type { Router, Resolved, RouteDef } from '@/router.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
@@ -50,7 +50,7 @@ import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
 
 const props = defineProps<{
-	router?: IRouter;
+	router?: Router;
 }>();
 
 const router = props.router ?? inject(DI.router);
diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts
index 2afe35550d..e9b2c2b650 100644
--- a/packages/frontend/src/di.ts
+++ b/packages/frontend/src/di.ts
@@ -4,11 +4,11 @@
  */
 
 import type { InjectionKey, Ref } from 'vue';
-import type { IRouter } from '@/nirax.js';
+import type { Router } from '@/router.js';
 
 export const DI = {
 	routerCurrentDepth: Symbol() as InjectionKey<number>,
-	router: Symbol() as InjectionKey<IRouter>,
+	router: Symbol() as InjectionKey<Router>,
 	mock: Symbol() as InjectionKey<boolean>,
 	pageMetadata: Symbol() as InjectionKey<Ref<Record<string, any>>>,
 };
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
deleted file mode 100644
index 03c8b43aae..0000000000
--- a/packages/frontend/src/nirax.ts
+++ /dev/null
@@ -1,423 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-// NIRAX --- A lightweight router
-
-import { onMounted, shallowRef } from 'vue';
-import { EventEmitter } from 'eventemitter3';
-import type { Component, ShallowRef } from 'vue';
-
-function safeURIDecode(str: string): string {
-	try {
-		return decodeURIComponent(str);
-	} catch {
-		return str;
-	}
-}
-
-interface RouteDefBase {
-	path: string;
-	query?: Record<string, string>;
-	loginRequired?: boolean;
-	name?: string;
-	hash?: string;
-	globalCacheKey?: string;
-	children?: RouteDef[];
-}
-
-interface RouteDefWithComponent extends RouteDefBase {
-	component: Component,
-}
-
-interface RouteDefWithRedirect extends RouteDefBase {
-	redirect: string | ((props: Map<string, string | boolean>) => string);
-}
-
-export type RouteDef = RouteDefWithComponent | RouteDefWithRedirect;
-
-export type RouterFlag = 'forcePage';
-
-type ParsedPath = (string | {
-	name: string;
-	startsWith?: string;
-	wildcard?: boolean;
-	optional?: boolean;
-})[];
-
-export type RouterEvent = {
-	change: (ctx: {
-		beforePath: string;
-		path: string;
-		resolved: Resolved;
-	}) => void;
-	replace: (ctx: {
-		path: string;
-	}) => void;
-	push: (ctx: {
-		beforePath: string;
-		path: string;
-		route: RouteDef | null;
-		props: Map<string, string> | null;
-	}) => void;
-	same: () => void;
-};
-
-export type Resolved = {
-	route: RouteDef;
-	props: Map<string, string | boolean>;
-	child?: Resolved;
-	redirected?: boolean;
-
-	/** @internal */
-	_parsedRoute: {
-		fullPath: string;
-		queryString: string | null;
-		hash: string | null;
-	};
-};
-
-function parsePath(path: string): ParsedPath {
-	const res = [] as ParsedPath;
-
-	path = path.substring(1);
-
-	for (const part of path.split('/')) {
-		if (part.includes(':')) {
-			const prefix = part.substring(0, part.indexOf(':'));
-			const placeholder = part.substring(part.indexOf(':') + 1);
-			const wildcard = placeholder.includes('(*)');
-			const optional = placeholder.endsWith('?');
-			res.push({
-				name: placeholder.replace('(*)', '').replace('?', ''),
-				startsWith: prefix !== '' ? prefix : undefined,
-				wildcard,
-				optional,
-			});
-		} else if (part.length !== 0) {
-			res.push(part);
-		}
-	}
-
-	return res;
-}
-
-export interface IRouter extends EventEmitter<RouterEvent> {
-	current: Resolved;
-	currentRef: ShallowRef<Resolved>;
-	currentRoute: ShallowRef<RouteDef>;
-	navHook: ((path: string, flag?: RouterFlag) => boolean) | null;
-
-	/**
-	 * ルートの初期化（eventListenerの定義後に必ず呼び出すこと）
-	 */
-	init(): void;
-
-	resolve(path: string): Resolved | null;
-
-	getCurrentPath(): string;
-
-	push(path: string, flag?: RouterFlag): void;
-
-	replace(path: string): void;
-
-	/** @see EventEmitter */
-	eventNames(): Array<EventEmitter.EventNames<RouterEvent>>;
-
-	/** @see EventEmitter */
-	listeners<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T
-	): Array<EventEmitter.EventListener<RouterEvent, T>>;
-
-	/** @see EventEmitter */
-	listenerCount(
-		event: EventEmitter.EventNames<RouterEvent>
-	): number;
-
-	/** @see EventEmitter */
-	emit<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		...args: EventEmitter.EventArgs<RouterEvent, T>
-	): boolean;
-
-	/** @see EventEmitter */
-	on<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		fn: EventEmitter.EventListener<RouterEvent, T>,
-		context?: any
-	): this;
-
-	/** @see EventEmitter */
-	addListener<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		fn: EventEmitter.EventListener<RouterEvent, T>,
-		context?: any
-	): this;
-
-	/** @see EventEmitter */
-	once<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		fn: EventEmitter.EventListener<RouterEvent, T>,
-		context?: any
-	): this;
-
-	/** @see EventEmitter */
-	removeListener<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		fn?: EventEmitter.EventListener<RouterEvent, T>,
-		context?: any,
-		once?: boolean | undefined
-	): this;
-
-	/** @see EventEmitter */
-	off<T extends EventEmitter.EventNames<RouterEvent>>(
-		event: T,
-		fn?: EventEmitter.EventListener<RouterEvent, T>,
-		context?: any,
-		once?: boolean | undefined
-	): this;
-
-	/** @see EventEmitter */
-	removeAllListeners(
-		event?: EventEmitter.EventNames<RouterEvent>
-	): this;
-}
-
-export class Router extends EventEmitter<RouterEvent> implements IRouter {
-	private routes: RouteDef[];
-	public current: Resolved;
-	public currentRef: ShallowRef<Resolved>;
-	public currentRoute: ShallowRef<RouteDef>;
-	private currentPath: string;
-	private isLoggedIn: boolean;
-	private notFoundPageComponent: Component;
-	private redirectCount = 0;
-
-	public navHook: ((path: string, flag?: RouterFlag) => boolean) | null = null;
-
-	constructor(routes: Router['routes'], currentPath: Router['currentPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
-		super();
-
-		this.routes = routes;
-		this.current = this.resolve(currentPath)!;
-		this.currentRef = shallowRef(this.current);
-		this.currentRoute = shallowRef(this.current.route);
-		this.currentPath = currentPath;
-		this.isLoggedIn = isLoggedIn;
-		this.notFoundPageComponent = notFoundPageComponent;
-	}
-
-	public init() {
-		const res = this.navigate(this.currentPath, false);
-		this.emit('replace', {
-			path: res._parsedRoute.fullPath,
-		});
-	}
-
-	public resolve(path: string): Resolved | null {
-		const fullPath = path;
-		let queryString: string | null = null;
-		let hash: string | null = null;
-		if (path[0] === '/') path = path.substring(1);
-		if (path.includes('#')) {
-			hash = path.substring(path.indexOf('#') + 1);
-			path = path.substring(0, path.indexOf('#'));
-		}
-		if (path.includes('?')) {
-			queryString = path.substring(path.indexOf('?') + 1);
-			path = path.substring(0, path.indexOf('?'));
-		}
-
-		const _parsedRoute = {
-			fullPath,
-			queryString,
-			hash,
-		};
-
-		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
-			forEachRouteLoop:
-			for (const route of routes) {
-				let parts = [..._parts];
-				const props = new Map<string, string>();
-
-				pathMatchLoop:
-				for (const p of parsePath(route.path)) {
-					if (typeof p === 'string') {
-						if (p === parts[0]) {
-							parts.shift();
-						} else {
-							continue forEachRouteLoop;
-						}
-					} else {
-						if (parts[0] == null && !p.optional) {
-							continue forEachRouteLoop;
-						}
-						if (p.wildcard) {
-							if (parts.length !== 0) {
-								props.set(p.name, safeURIDecode(parts.join('/')));
-								parts = [];
-							}
-							break pathMatchLoop;
-						} else {
-							if (p.startsWith) {
-								if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
-
-								props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
-								parts.shift();
-							} else {
-								if (parts[0]) {
-									props.set(p.name, safeURIDecode(parts[0]));
-								}
-								parts.shift();
-							}
-						}
-					}
-				}
-
-				if (parts.length === 0) {
-					if (route.children) {
-						const child = check(route.children, []);
-						if (child) {
-							return {
-								route,
-								props,
-								child,
-								_parsedRoute,
-							};
-						} else {
-							continue forEachRouteLoop;
-						}
-					}
-
-					if (route.hash != null && hash != null) {
-						props.set(route.hash, safeURIDecode(hash));
-					}
-
-					if (route.query != null && queryString != null) {
-						const queryObject = [...new URLSearchParams(queryString).entries()]
-							.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {});
-
-						for (const q in route.query) {
-							const as = route.query[q];
-							if (queryObject[q]) {
-								props.set(as, safeURIDecode(queryObject[q]));
-							}
-						}
-					}
-
-					return {
-						route,
-						props,
-						_parsedRoute,
-					};
-				} else {
-					if (route.children) {
-						const child = check(route.children, parts);
-						if (child) {
-							return {
-								route,
-								props,
-								child,
-								_parsedRoute,
-							};
-						} else {
-							continue forEachRouteLoop;
-						}
-					} else {
-						continue forEachRouteLoop;
-					}
-				}
-			}
-
-			return null;
-		}
-
-		const _parts = path.split('/').filter(part => part.length !== 0);
-
-		return check(this.routes, _parts);
-	}
-
-	private navigate(path: string, emitChange = true, _redirected = false): Resolved {
-		const beforePath = this.currentPath;
-		this.currentPath = path;
-
-		const res = this.resolve(this.currentPath);
-
-		if (res == null) {
-			throw new Error('no route found for: ' + path);
-		}
-
-		if ('redirect' in res.route) {
-			let redirectPath: string;
-			if (typeof res.route.redirect === 'function') {
-				redirectPath = res.route.redirect(res.props);
-			} else {
-				redirectPath = res.route.redirect + (res._parsedRoute.queryString ? '?' + res._parsedRoute.queryString : '') + (res._parsedRoute.hash ? '#' + res._parsedRoute.hash : '');
-			}
-			if (_DEV_) console.log('Redirecting to: ', redirectPath);
-			if (_redirected && this.redirectCount++ > 10) {
-				throw new Error('redirect loop detected');
-			}
-			return this.navigate(redirectPath, emitChange, true);
-		}
-
-		if (res.route.loginRequired && !this.isLoggedIn) {
-			res.route.component = this.notFoundPageComponent;
-			res.props.set('showLoginPopup', true);
-		}
-
-		const isSamePath = beforePath === path;
-		this.current = res;
-		this.currentRef.value = res;
-		this.currentRoute.value = res.route;
-
-		if (emitChange && res.route.path !== '/:(*)') {
-			this.emit('change', {
-				beforePath,
-				path,
-				resolved: res,
-			});
-		}
-
-		this.redirectCount = 0;
-		return {
-			...res,
-			redirected: _redirected,
-		};
-	}
-
-	public getCurrentPath() {
-		return this.currentPath;
-	}
-
-	public push(path: string, flag?: RouterFlag) {
-		const beforePath = this.currentPath;
-		if (path === beforePath) {
-			this.emit('same');
-			return;
-		}
-		if (this.navHook) {
-			const cancel = this.navHook(path, flag);
-			if (cancel) return;
-		}
-		const res = this.navigate(path);
-		if (res.route.path === '/:(*)') {
-			location.href = path;
-		} else {
-			this.emit('push', {
-				beforePath,
-				path: res._parsedRoute.fullPath,
-				route: res.route,
-				props: res.props,
-			});
-		}
-	}
-
-	public replace(path: string) {
-		const res = this.navigate(path);
-		this.emit('replace', {
-			path: res._parsedRoute.fullPath,
-		});
-	}
-}
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
new file mode 100644
index 0000000000..c6f3937cde
--- /dev/null
+++ b/packages/frontend/src/router.ts
@@ -0,0 +1,341 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// NIRAX --- A lightweight router
+
+import { onMounted, shallowRef } from 'vue';
+import { EventEmitter } from 'eventemitter3';
+import type { Component, ShallowRef } from 'vue';
+
+function safeURIDecode(str: string): string {
+	try {
+		return decodeURIComponent(str);
+	} catch {
+		return str;
+	}
+}
+
+interface RouteDefBase {
+	path: string;
+	query?: Record<string, string>;
+	loginRequired?: boolean;
+	name?: string;
+	hash?: string;
+	globalCacheKey?: string;
+	children?: RouteDef[];
+}
+
+interface RouteDefWithComponent extends RouteDefBase {
+	component: Component,
+}
+
+interface RouteDefWithRedirect extends RouteDefBase {
+	redirect: string | ((props: Map<string, string | boolean>) => string);
+}
+
+export type RouteDef = RouteDefWithComponent | RouteDefWithRedirect;
+
+export type RouterFlag = 'forcePage';
+
+type ParsedPath = (string | {
+	name: string;
+	startsWith?: string;
+	wildcard?: boolean;
+	optional?: boolean;
+})[];
+
+export type RouterEvent = {
+	change: (ctx: {
+		beforePath: string;
+		path: string;
+		resolved: Resolved;
+	}) => void;
+	replace: (ctx: {
+		path: string;
+	}) => void;
+	push: (ctx: {
+		beforePath: string;
+		path: string;
+		route: RouteDef | null;
+		props: Map<string, string> | null;
+	}) => void;
+	same: () => void;
+};
+
+export type Resolved = {
+	route: RouteDef;
+	props: Map<string, string | boolean>;
+	child?: Resolved;
+	redirected?: boolean;
+
+	/** @internal */
+	_parsedRoute: {
+		fullPath: string;
+		queryString: string | null;
+		hash: string | null;
+	};
+};
+
+function parsePath(path: string): ParsedPath {
+	const res = [] as ParsedPath;
+
+	path = path.substring(1);
+
+	for (const part of path.split('/')) {
+		if (part.includes(':')) {
+			const prefix = part.substring(0, part.indexOf(':'));
+			const placeholder = part.substring(part.indexOf(':') + 1);
+			const wildcard = placeholder.includes('(*)');
+			const optional = placeholder.endsWith('?');
+			res.push({
+				name: placeholder.replace('(*)', '').replace('?', ''),
+				startsWith: prefix !== '' ? prefix : undefined,
+				wildcard,
+				optional,
+			});
+		} else if (part.length !== 0) {
+			res.push(part);
+		}
+	}
+
+	return res;
+}
+
+export class Router extends EventEmitter<RouterEvent> {
+	private routes: RouteDef[];
+	public current: Resolved;
+	public currentRef: ShallowRef<Resolved>;
+	public currentRoute: ShallowRef<RouteDef>;
+	private currentPath: string;
+	private isLoggedIn: boolean;
+	private notFoundPageComponent: Component;
+	private redirectCount = 0;
+
+	public navHook: ((path: string, flag?: RouterFlag) => boolean) | null = null;
+
+	constructor(routes: Router['routes'], currentPath: Router['currentPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
+		super();
+
+		this.routes = routes;
+		this.current = this.resolve(currentPath)!;
+		this.currentRef = shallowRef(this.current);
+		this.currentRoute = shallowRef(this.current.route);
+		this.currentPath = currentPath;
+		this.isLoggedIn = isLoggedIn;
+		this.notFoundPageComponent = notFoundPageComponent;
+	}
+
+	public init() {
+		const res = this.navigate(this.currentPath, false);
+		this.emit('replace', {
+			path: res._parsedRoute.fullPath,
+		});
+	}
+
+	public resolve(path: string): Resolved | null {
+		const fullPath = path;
+		let queryString: string | null = null;
+		let hash: string | null = null;
+		if (path[0] === '/') path = path.substring(1);
+		if (path.includes('#')) {
+			hash = path.substring(path.indexOf('#') + 1);
+			path = path.substring(0, path.indexOf('#'));
+		}
+		if (path.includes('?')) {
+			queryString = path.substring(path.indexOf('?') + 1);
+			path = path.substring(0, path.indexOf('?'));
+		}
+
+		const _parsedRoute = {
+			fullPath,
+			queryString,
+			hash,
+		};
+
+		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
+			forEachRouteLoop:
+			for (const route of routes) {
+				let parts = [..._parts];
+				const props = new Map<string, string>();
+
+				pathMatchLoop:
+				for (const p of parsePath(route.path)) {
+					if (typeof p === 'string') {
+						if (p === parts[0]) {
+							parts.shift();
+						} else {
+							continue forEachRouteLoop;
+						}
+					} else {
+						if (parts[0] == null && !p.optional) {
+							continue forEachRouteLoop;
+						}
+						if (p.wildcard) {
+							if (parts.length !== 0) {
+								props.set(p.name, safeURIDecode(parts.join('/')));
+								parts = [];
+							}
+							break pathMatchLoop;
+						} else {
+							if (p.startsWith) {
+								if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
+
+								props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
+								parts.shift();
+							} else {
+								if (parts[0]) {
+									props.set(p.name, safeURIDecode(parts[0]));
+								}
+								parts.shift();
+							}
+						}
+					}
+				}
+
+				if (parts.length === 0) {
+					if (route.children) {
+						const child = check(route.children, []);
+						if (child) {
+							return {
+								route,
+								props,
+								child,
+								_parsedRoute,
+							};
+						} else {
+							continue forEachRouteLoop;
+						}
+					}
+
+					if (route.hash != null && hash != null) {
+						props.set(route.hash, safeURIDecode(hash));
+					}
+
+					if (route.query != null && queryString != null) {
+						const queryObject = [...new URLSearchParams(queryString).entries()]
+							.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {});
+
+						for (const q in route.query) {
+							const as = route.query[q];
+							if (queryObject[q]) {
+								props.set(as, safeURIDecode(queryObject[q]));
+							}
+						}
+					}
+
+					return {
+						route,
+						props,
+						_parsedRoute,
+					};
+				} else {
+					if (route.children) {
+						const child = check(route.children, parts);
+						if (child) {
+							return {
+								route,
+								props,
+								child,
+								_parsedRoute,
+							};
+						} else {
+							continue forEachRouteLoop;
+						}
+					} else {
+						continue forEachRouteLoop;
+					}
+				}
+			}
+
+			return null;
+		}
+
+		const _parts = path.split('/').filter(part => part.length !== 0);
+
+		return check(this.routes, _parts);
+	}
+
+	private navigate(path: string, emitChange = true, _redirected = false): Resolved {
+		const beforePath = this.currentPath;
+		this.currentPath = path;
+
+		const res = this.resolve(this.currentPath);
+
+		if (res == null) {
+			throw new Error('no route found for: ' + path);
+		}
+
+		if ('redirect' in res.route) {
+			let redirectPath: string;
+			if (typeof res.route.redirect === 'function') {
+				redirectPath = res.route.redirect(res.props);
+			} else {
+				redirectPath = res.route.redirect + (res._parsedRoute.queryString ? '?' + res._parsedRoute.queryString : '') + (res._parsedRoute.hash ? '#' + res._parsedRoute.hash : '');
+			}
+			if (_DEV_) console.log('Redirecting to: ', redirectPath);
+			if (_redirected && this.redirectCount++ > 10) {
+				throw new Error('redirect loop detected');
+			}
+			return this.navigate(redirectPath, emitChange, true);
+		}
+
+		if (res.route.loginRequired && !this.isLoggedIn) {
+			res.route.component = this.notFoundPageComponent;
+			res.props.set('showLoginPopup', true);
+		}
+
+		this.current = res;
+		this.currentRef.value = res;
+		this.currentRoute.value = res.route;
+
+		if (emitChange && res.route.path !== '/:(*)') {
+			this.emit('change', {
+				beforePath,
+				path,
+				resolved: res,
+			});
+		}
+
+		this.redirectCount = 0;
+		return {
+			...res,
+			redirected: _redirected,
+		};
+	}
+
+	public getCurrentPath() {
+		return this.currentPath;
+	}
+
+	public push(path: string, flag?: RouterFlag) {
+		const beforePath = this.currentPath;
+		if (path === beforePath) {
+			this.emit('same');
+			return;
+		}
+		if (this.navHook) {
+			const cancel = this.navHook(path, flag);
+			if (cancel) return;
+		}
+		const res = this.navigate(path);
+		if (res.route.path === '/:(*)') {
+			location.href = path;
+		} else {
+			this.emit('push', {
+				beforePath,
+				path: res._parsedRoute.fullPath,
+				route: res.route,
+				props: res.props,
+			});
+		}
+	}
+
+	public replace(path: string) {
+		const res = this.navigate(path);
+		this.emit('replace', {
+			path: res._parsedRoute.fullPath,
+		});
+	}
+}
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index 9a81032cc8..923903ec3d 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -5,8 +5,8 @@
 
 import { defineAsyncComponent } from 'vue';
 import type { AsyncComponentLoader } from 'vue';
-import type { IRouter, RouteDef } from '@/nirax.js';
-import { Router } from '@/nirax.js';
+import type { RouteDef } from '@/router.js';
+import { Router } from '@/router.js';
 import { $i, iAmModerator } from '@/i.js';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
@@ -578,6 +578,6 @@ const routes: RouteDef[] = [{
 	component: page(() => import('@/pages/not-found.vue')),
 }];
 
-export function createMainRouter(path: string): IRouter {
+export function createMainRouter(path: string): Router {
 	return new Router(routes, path, !!$i, page(() => import('@/pages/not-found.vue')));
 }
diff --git a/packages/frontend/src/router/main.ts b/packages/frontend/src/router/main.ts
index 2373c87717..f294af059d 100644
--- a/packages/frontend/src/router/main.ts
+++ b/packages/frontend/src/router/main.ts
@@ -4,7 +4,7 @@
  */
 
 import { EventEmitter } from 'eventemitter3';
-import type { IRouter, Resolved, RouteDef, RouterEvent, RouterFlag } from '@/nirax.js';
+import type { Router, Resolved, RouteDef, RouterEvent, RouterFlag } from '@/router.js';
 
 import type { App, ShallowRef } from 'vue';
 import { analytics } from '@/analytics.js';
@@ -13,7 +13,7 @@ import { analytics } from '@/analytics.js';
  * {@link Router}による画面遷移を可能とするために{@link mainRouter}をセットアップする。
  * また、{@link Router}のインスタンスを作成するためのファクトリも{@link provide}経由で公開する（`routerFactory`というキーで取得可能）
  */
-export function setupRouter(app: App, routerFactory: ((path: string) => IRouter)): void {
+export function setupRouter(app: App, routerFactory: ((path: string) => Router)): void {
 	app.provide('routerFactory', routerFactory);
 
 	const mainRouter = routerFactory(location.pathname + location.search + location.hash);
@@ -43,7 +43,7 @@ export function setupRouter(app: App, routerFactory: ((path: string) => IRouter)
 	setMainRouter(mainRouter);
 }
 
-function getMainRouter(): IRouter {
+function getMainRouter(): Router {
 	const router = mainRouterHolder;
 	if (!router) {
 		throw new Error('mainRouter is not found.');
@@ -56,7 +56,7 @@ function getMainRouter(): IRouter {
  * メインルータを設定する。一度設定すると、それ以降は変更できない。
  * {@link setupRouter}から呼び出されることのみを想定している。
  */
-export function setMainRouter(router: IRouter) {
+export function setMainRouter(router: Router) {
 	if (mainRouterHolder) {
 		throw new Error('mainRouter is already exists.');
 	}
@@ -69,10 +69,10 @@ export function setMainRouter(router: IRouter) {
  * {@link mainRouter}は起動シーケンスの一部にて初期化されるため、僅かにundefinedになる期間がある。
  * その僅かな期間のためだけに型をundefined込みにしたくないのでこのクラスを緩衝材として使用する。
  */
-class MainRouterProxy implements IRouter {
-	private supplier: () => IRouter;
+class MainRouterProxy implements Router {
+	private supplier: () => Router;
 
-	constructor(supplier: () => IRouter) {
+	constructor(supplier: () => Router) {
 		this.supplier = supplier;
 	}
 
@@ -194,6 +194,6 @@ class MainRouterProxy implements IRouter {
 	}
 }
 
-let mainRouterHolder: IRouter | null = null;
+let mainRouterHolder: Router | null = null;
 
-export const mainRouter: IRouter = new MainRouterProxy(getMainRouter);
+export const mainRouter: Router = new MainRouterProxy(getMainRouter);
diff --git a/packages/frontend/src/router/supplier.ts b/packages/frontend/src/router/supplier.ts
index bdeb47cfd8..3c05b41c20 100644
--- a/packages/frontend/src/router/supplier.ts
+++ b/packages/frontend/src/router/supplier.ts
@@ -4,15 +4,15 @@
  */
 
 import { inject } from 'vue';
-import type { IRouter } from '@/nirax.js';
+import type { Router } from '@/router.js';
 import { mainRouter } from '@/router/main.js';
 import { DI } from '@/di.js';
 
 /**
  * メインの{@link Router}を取得する。
- * あらかじめ{@link setupRouter}を実行しておく必要がある（{@link provide}により{@link IRouter}のインスタンスを注入可能であるならばこの限りではない）
+ * あらかじめ{@link setupRouter}を実行しておく必要がある（{@link provide}により{@link Router}のインスタンスを注入可能であるならばこの限りではない）
  */
-export function useRouter(): IRouter {
+export function useRouter(): Router {
 	return inject(DI.router, null) ?? mainRouter;
 }
 
@@ -20,8 +20,8 @@ export function useRouter(): IRouter {
  * 任意の{@link Router}を取得するためのファクトリを取得する。
  * あらかじめ{@link setupRouter}を実行しておく必要がある。
  */
-export function useRouterFactory(): (path: string) => IRouter {
-	const factory = inject<(path: string) => IRouter>('routerFactory');
+export function useRouterFactory(): (path: string) => Router {
+	const factory = inject<(path: string) => Router>('routerFactory');
 	if (!factory) {
 		console.error('routerFactory is not defined.');
 		throw new Error('routerFactory is not defined.');
diff --git a/packages/frontend/src/utility/get-user-menu.ts b/packages/frontend/src/utility/get-user-menu.ts
index 496e021e99..c28b2db6d7 100644
--- a/packages/frontend/src/utility/get-user-menu.ts
+++ b/packages/frontend/src/utility/get-user-menu.ts
@@ -7,7 +7,7 @@ import { toUnicode } from 'punycode.js';
 import { defineAsyncComponent, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { host, url } from '@@/js/config.js';
-import type { IRouter } from '@/nirax.js';
+import type { Router } from '@/router.js';
 import type { MenuItem } from '@/types/menu.js';
 import { i18n } from '@/i18n.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
@@ -21,7 +21,7 @@ import { genEmbedCode } from '@/utility/get-embed-code.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 
-export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter = mainRouter) {
+export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
 
 	const cleanups = [] as (() => void)[];
diff --git a/packages/frontend/src/utility/lookup.ts b/packages/frontend/src/utility/lookup.ts
index d3a2d854a0..e0b945e49b 100644
--- a/packages/frontend/src/utility/lookup.ts
+++ b/packages/frontend/src/utility/lookup.ts
@@ -6,7 +6,7 @@
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
-import { Router } from '@/nirax.js';
+import { Router } from '@/router.js';
 import { mainRouter } from '@/router/main.js';
 
 export async function lookup(router?: Router) {
-- 
cgit v1.2.3-freya


From 81ac71f7e59623625369aaff75a8712923450b80 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 19 Mar 2025 18:06:22 +0900
Subject: refactor(frontend): router refactoring

---
 packages/frontend/src/components/MkPageWindow.vue  | 22 ++---
 .../src/components/global/NestedRouterView.vue     | 19 ++---
 .../frontend/src/components/global/RouterView.vue  | 49 ++---------
 .../src/components/global/StackingRouterView.vue   | 71 +++++++---------
 packages/frontend/src/events.ts                    |  1 -
 packages/frontend/src/lib/nirax.ts                 | 94 ++++++++++++----------
 packages/frontend/src/pages/settings/profile.vue   |  5 --
 packages/frontend/src/router.ts                    | 16 ++--
 packages/frontend/src/ui/classic.vue               |  2 +-
 packages/frontend/src/ui/universal.vue             |  2 +-
 10 files changed, 114 insertions(+), 167 deletions(-)

(limited to 'packages/frontend/src/components/global/NestedRouterView.vue')

diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index fae4246335..4fbdc51d22 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -59,7 +59,7 @@ const windowRouter = createRouter(props.initialPath);
 const pageMetadata = ref<null | PageMetadata>(null);
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
 const history = ref<{ path: string; }[]>([{
-	path: windowRouter.getCurrentPath(),
+	path: windowRouter.getCurrentFullPath(),
 }]);
 const buttonsLeft = computed(() => {
 	const buttons: Record<string, unknown>[] = [];
@@ -97,20 +97,20 @@ function getSearchMarker(path: string) {
 const searchMarkerId = ref<string | null>(getSearchMarker(props.initialPath));
 
 windowRouter.addListener('push', ctx => {
-	history.value.push({ path: ctx.path });
+	history.value.push({ path: ctx.fullPath });
 });
 
 windowRouter.addListener('replace', ctx => {
 	history.value.pop();
-	history.value.push({ path: ctx.path });
+	history.value.push({ path: ctx.fullPath });
 });
 
 windowRouter.addListener('change', ctx => {
-	if (_DEV_) console.log('windowRouter: change', ctx.path);
-	searchMarkerId.value = getSearchMarker(ctx.path);
+	if (_DEV_) console.log('windowRouter: change', ctx.fullPath);
+	searchMarkerId.value = getSearchMarker(ctx.fullPath);
 	analytics.page({
-		path: ctx.path,
-		title: ctx.path,
+		path: ctx.fullPath,
+		title: ctx.fullPath,
 	});
 });
 
@@ -139,14 +139,14 @@ const contextmenu = computed(() => ([{
 	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
-		window.open(url + windowRouter.getCurrentPath(), '_blank', 'noopener');
+		window.open(url + windowRouter.getCurrentFullPath(), '_blank', 'noopener');
 		windowEl.value?.close();
 	},
 }, {
 	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
-		copyToClipboard(url + windowRouter.getCurrentPath());
+		copyToClipboard(url + windowRouter.getCurrentFullPath());
 	},
 }]));
 
@@ -164,12 +164,12 @@ function close() {
 }
 
 function expand() {
-	mainRouter.push(windowRouter.getCurrentPath(), 'forcePage');
+	mainRouter.push(windowRouter.getCurrentFullPath(), 'forcePage');
 	windowEl.value?.close();
 }
 
 function popout() {
-	_popout(windowRouter.getCurrentPath(), windowEl.value?.$el);
+	_popout(windowRouter.getCurrentFullPath(), windowEl.value?.$el);
 	windowEl.value?.close();
 }
 
diff --git a/packages/frontend/src/components/global/NestedRouterView.vue b/packages/frontend/src/components/global/NestedRouterView.vue
index 5b22d0b7a8..af00347db8 100644
--- a/packages/frontend/src/components/global/NestedRouterView.vue
+++ b/packages/frontend/src/components/global/NestedRouterView.vue
@@ -14,8 +14,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, ref, shallowRef } from 'vue';
-import type { Router, Resolved } from '@/router.js';
+import { inject, provide, ref, shallowRef } from 'vue';
+import type { Router } from '@/router.js';
+import type { PathResolvedResult } from '@/lib/nirax.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 
@@ -32,7 +33,7 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
-function resolveNested(current: Resolved, d = 0): Resolved | null {
+function resolveNested(current: PathResolvedResult, d = 0): PathResolvedResult | null {
 	if (d === currentDepth) {
 		return current;
 	} else {
@@ -47,19 +48,13 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 const current = resolveNested(router.current)!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
-const key = ref(router.getCurrentPath());
+const key = ref(router.getCurrentFullPath());
 
-function onChange({ resolved }) {
+router.useListener('change', ({ resolved }) => {
 	const current = resolveNested(resolved);
 	if (current == null || 'redirect' in current.route) return;
 	currentPageComponent.value = current.route.component;
 	currentPageProps.value = current.props;
-	key.value = router.getCurrentPath();
-}
-
-router.addListener('change', onChange);
-
-onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
+	key.value = router.getCurrentFullPath();
 });
 </script>
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 720034a942..fbdb7d261e 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -5,10 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_pageContainer" style="height: 100%;">
-	<KeepAlive
-		:max="prefer.s.numberOfPageCache"
-		:exclude="pageCacheController"
-	>
+	<KeepAlive :max="prefer.s.numberOfPageCache">
 		<Suspense :timeout="0">
 			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
@@ -21,10 +18,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import type { Router, Resolved, RouteDef } from '@/router.js';
+import { inject, provide, ref, shallowRef } from 'vue';
+import type { Router } from '@/router.js';
 import { prefer } from '@/preferences.js';
-import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 
@@ -44,45 +40,12 @@ provide(DI.routerCurrentDepth, currentDepth + 1);
 const current = router.current!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
-const key = ref(router.getCurrentPath());
+const key = ref(router.getCurrentFullPath());
 
-function onChange({ resolved }) {
+router.useListener('change', ({ resolved }) => {
 	if (resolved == null || 'redirect' in resolved.route) return;
 	currentPageComponent.value = resolved.route.component;
 	currentPageProps.value = resolved.props;
-	key.value = router.getCurrentPath();
-
-	nextTick(() => {
-		// ページ遷移完了後に再びキャッシュを有効化
-		if (clearCacheRequested.value) {
-			clearCacheRequested.value = false;
-		}
-	});
-}
-
-router.addListener('change', onChange);
-
-// #region キャッシュ制御
-
-/**
-	 * キャッシュクリアが有効になったら、全キャッシュをクリアする
-	 *
-	 * keepAlive側にwatcherがあるのですぐ消えるとはおもうけど、念のためページ遷移完了まではキャッシュを無効化しておく。
-	 * キャッシュ有効時向けにexcludeを使いたい場合は、pageCacheControllerに並列に突っ込むのではなく、下に追記すること
-	 */
-const pageCacheController = computed(() => clearCacheRequested.value ? /.*/ : undefined);
-const clearCacheRequested = ref(false);
-
-globalEvents.on('requestClearPageCache', () => {
-	if (_DEV_) console.log('clear page cache requested');
-	if (!clearCacheRequested.value) {
-		clearCacheRequested.value = true;
-	}
-});
-
-// #endregion
-
-onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
+	key.value = router.getCurrentFullPath();
 });
 </script>
diff --git a/packages/frontend/src/components/global/StackingRouterView.vue b/packages/frontend/src/components/global/StackingRouterView.vue
index b94e020072..c95c74aef3 100644
--- a/packages/frontend/src/components/global/StackingRouterView.vue
+++ b/packages/frontend/src/components/global/StackingRouterView.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:duration="200"
 	tag="div" :class="$style.tabs"
 >
-	<div v-for="(tab, i) in tabs" :key="tab.key" :class="$style.tab" :style="{ '--i': i - 1 }">
+	<div v-for="(tab, i) in tabs" :key="tab.fullPath" :class="$style.tab" :style="{ '--i': i - 1 }">
 		<div v-if="i > 0" :class="$style.tabBg" @click="back()"></div>
 		<div :class="$style.tabFg" @click.stop="back()">
 			<div v-if="i > 0" :class="$style.tabMenu">
@@ -41,10 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
-import type { Router, Resolved, RouteDef } from '@/router.js';
+import { inject, provide, shallowRef } from 'vue';
+import type { Router } from '@/router.js';
 import { prefer } from '@/preferences.js';
-import { globalEvents } from '@/events.js';
 import MkLoadingPage from '@/pages/_loading_.vue';
 import { DI } from '@/di.js';
 import { deepEqual } from '@/utility/deep-equal.js';
@@ -63,26 +62,36 @@ const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
 const tabs = shallowRef([{
-	key: router.getCurrentPath(),
-	path: router.getCurrentPath(),
-	route: router.current.route.path,
+	fullPath: router.getCurrentFullPath(),
+	routePath: router.current.route.path,
 	component: 'component' in router.current.route ? router.current.route.component : MkLoadingPage,
 	props: router.current.props,
 }]);
 
-function onChange({ resolved }) {
+function mount() {
 	const currentTab = tabs.value[tabs.value.length - 1];
-	const route = resolved.route.path;
+	tabs.value = [currentTab];
+}
+
+function back() {
+	const prev = tabs.value[tabs.value.length - 2];
+	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
+	router.replace(prev.fullPath);
+}
+
+router.useListener('change', ({ resolved }) => {
+	const currentTab = tabs.value[tabs.value.length - 1];
+	const routePath = resolved.route.path;
 	if (resolved == null || 'redirect' in resolved.route) return;
-	if (resolved.route.path === currentTab.path && deepEqual(resolved.props, currentTab.props)) return;
-	const fullPath = router.getCurrentPath();
+	if (resolved.route.path === currentTab.routePath && deepEqual(resolved.props, currentTab.props)) return;
+	const fullPath = router.getCurrentFullPath();
 
-	if (tabs.value.some(tab => tab.route === route && deepEqual(resolved.props, tab.props))) {
+	if (tabs.value.some(tab => tab.routePath === routePath && deepEqual(resolved.props, tab.props))) {
 		const newTabs = [];
 		for (const tab of tabs.value) {
 			newTabs.push(tab);
 
-			if (tab.route === route && deepEqual(resolved.props, tab.props)) {
+			if (tab.routePath === routePath && deepEqual(resolved.props, tab.props)) {
 				break;
 			}
 		}
@@ -93,45 +102,23 @@ function onChange({ resolved }) {
 	tabs.value = tabs.value.length >= prefer.s.numberOfPageCache ? [
 		...tabs.value.slice(1),
 		{
-			key: fullPath,
-			path: fullPath,
-			route,
+			fullPath: fullPath,
+			routePath,
 			component: resolved.route.component,
 			props: resolved.props,
 		},
 	] : [...tabs.value, {
-		key: fullPath,
-		path: fullPath,
-		route,
+		fullPath: fullPath,
+		routePath,
 		component: resolved.route.component,
 		props: resolved.props,
 	}];
-}
+});
 
-function onReplace({ path }) {
+router.useListener('replace', ({ fullPath }) => {
 	const currentTab = tabs.value[tabs.value.length - 1];
-	console.log('replace', currentTab.path, path);
-	currentTab.path = path;
+	currentTab.fullPath = fullPath;
 	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1), currentTab];
-}
-
-function mount() {
-	const currentTab = tabs.value[tabs.value.length - 1];
-	tabs.value = [currentTab];
-}
-
-function back() {
-	const prev = tabs.value[tabs.value.length - 2];
-	tabs.value = [...tabs.value.slice(0, tabs.value.length - 1)];
-	router.replace(prev.path);
-}
-
-router.addListener('replace', onReplace);
-router.addListener('change', onChange);
-
-onBeforeUnmount(() => {
-	router.removeListener('replace', onReplace);
-	router.removeListener('change', onChange);
 });
 </script>
 
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
index a74018223c..dfd3d4120c 100644
--- a/packages/frontend/src/events.ts
+++ b/packages/frontend/src/events.ts
@@ -10,5 +10,4 @@ export const globalEvents = new EventEmitter<{
 	themeChanging: () => void;
 	themeChanged: () => void;
 	clientNotification: (notification: Misskey.entities.Notification) => void;
-	requestClearPageCache: () => void;
 }>();
diff --git a/packages/frontend/src/lib/nirax.ts b/packages/frontend/src/lib/nirax.ts
index cc20d497e6..8783874bc2 100644
--- a/packages/frontend/src/lib/nirax.ts
+++ b/packages/frontend/src/lib/nirax.ts
@@ -5,7 +5,7 @@
 
 // NIRAX --- A lightweight router
 
-import { onMounted, shallowRef } from 'vue';
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import type { Component, ShallowRef } from 'vue';
 
@@ -45,28 +45,28 @@ type ParsedPath = (string | {
 	optional?: boolean;
 })[];
 
-export type RouterEvent = {
+export type RouterEvents = {
 	change: (ctx: {
-		beforePath: string;
-		path: string;
-		resolved: Resolved;
+		beforeFullPath: string;
+		fullPath: string;
+		resolved: PathResolvedResult;
 	}) => void;
 	replace: (ctx: {
-		path: string;
+		fullPath: string;
 	}) => void;
 	push: (ctx: {
-		beforePath: string;
-		path: string;
+		beforeFullPath: string;
+		fullPath: string;
 		route: RouteDef | null;
 		props: Map<string, string> | null;
 	}) => void;
 	same: () => void;
 };
 
-export type Resolved = {
+export type PathResolvedResult = {
 	route: RouteDef;
 	props: Map<string, string | boolean>;
-	child?: Resolved;
+	child?: PathResolvedResult;
 	redirected?: boolean;
 
 	/** @internal */
@@ -102,39 +102,39 @@ function parsePath(path: string): ParsedPath {
 	return res;
 }
 
-export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvent> {
+export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvents> {
 	private routes: DEF;
-	public current: Resolved;
-	public currentRef: ShallowRef<Resolved>;
+	public current: PathResolvedResult;
+	public currentRef: ShallowRef<PathResolvedResult>;
 	public currentRoute: ShallowRef<RouteDef>;
-	private currentPath: string;
+	private currentFullPath: string; // /foo/bar?baz=qux#hash
 	private isLoggedIn: boolean;
 	private notFoundPageComponent: Component;
 	private redirectCount = 0;
 
-	public navHook: ((path: string, flag?: RouterFlag) => boolean) | null = null;
+	public navHook: ((fullPath: string, flag?: RouterFlag) => boolean) | null = null;
 
-	constructor(routes: DEF, currentPath: Nirax<DEF>['currentPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
+	constructor(routes: DEF, currentFullPath: Nirax<DEF>['currentFullPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
 		super();
 
 		this.routes = routes;
-		this.current = this.resolve(currentPath)!;
+		this.current = this.resolve(currentFullPath)!;
 		this.currentRef = shallowRef(this.current);
 		this.currentRoute = shallowRef(this.current.route);
-		this.currentPath = currentPath;
+		this.currentFullPath = currentFullPath;
 		this.isLoggedIn = isLoggedIn;
 		this.notFoundPageComponent = notFoundPageComponent;
 	}
 
 	public init() {
-		const res = this.navigate(this.currentPath, false);
+		const res = this.navigate(this.currentFullPath, false);
 		this.emit('replace', {
-			path: res._parsedRoute.fullPath,
+			fullPath: res._parsedRoute.fullPath,
 		});
 	}
 
-	public resolve(path: string): Resolved | null {
-		const fullPath = path;
+	public resolve(fullPath: string): PathResolvedResult | null {
+		let path = fullPath;
 		let queryString: string | null = null;
 		let hash: string | null = null;
 		if (path[0] === '/') path = path.substring(1);
@@ -153,7 +153,7 @@ export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvent> {
 			hash,
 		};
 
-		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
+		function check(routes: RouteDef[], _parts: string[]): PathResolvedResult | null {
 			forEachRouteLoop:
 			for (const route of routes) {
 				let parts = [..._parts];
@@ -256,14 +256,14 @@ export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvent> {
 		return check(this.routes, _parts);
 	}
 
-	private navigate(path: string, emitChange = true, _redirected = false): Resolved {
-		const beforePath = this.currentPath;
-		this.currentPath = path;
+	private navigate(fullPath: string, emitChange = true, _redirected = false): PathResolvedResult {
+		const beforeFullPath = this.currentFullPath;
+		this.currentFullPath = fullPath;
 
-		const res = this.resolve(this.currentPath);
+		const res = this.resolve(this.currentFullPath);
 
 		if (res == null) {
-			throw new Error('no route found for: ' + path);
+			throw new Error('no route found for: ' + fullPath);
 		}
 
 		if ('redirect' in res.route) {
@@ -291,8 +291,8 @@ export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvent> {
 
 		if (emitChange && res.route.path !== '/:(*)') {
 			this.emit('change', {
-				beforePath,
-				path,
+				beforeFullPath,
+				fullPath,
 				resolved: res,
 			});
 		}
@@ -304,37 +304,45 @@ export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvent> {
 		};
 	}
 
-	public getCurrentPath() {
-		return this.currentPath;
+	public getCurrentFullPath() {
+		return this.currentFullPath;
 	}
 
-	public push(path: string, flag?: RouterFlag) {
-		const beforePath = this.currentPath;
-		if (path === beforePath) {
+	public push(fullPath: string, flag?: RouterFlag) {
+		const beforeFullPath = this.currentFullPath;
+		if (fullPath === beforeFullPath) {
 			this.emit('same');
 			return;
 		}
 		if (this.navHook) {
-			const cancel = this.navHook(path, flag);
+			const cancel = this.navHook(fullPath, flag);
 			if (cancel) return;
 		}
-		const res = this.navigate(path);
+		const res = this.navigate(fullPath);
 		if (res.route.path === '/:(*)') {
-			location.href = path;
+			location.href = fullPath;
 		} else {
 			this.emit('push', {
-				beforePath,
-				path: res._parsedRoute.fullPath,
+				beforeFullPath,
+				fullPath: res._parsedRoute.fullPath,
 				route: res.route,
 				props: res.props,
 			});
 		}
 	}
 
-	public replace(path: string) {
-		const res = this.navigate(path);
+	public replace(fullPath: string) {
+		const res = this.navigate(fullPath);
 		this.emit('replace', {
-			path: res._parsedRoute.fullPath,
+			fullPath: res._parsedRoute.fullPath,
+		});
+	}
+
+	public useListener<E extends keyof RouterEvents, L = RouterEvents[E]>(event: E, listener: L) {
+		this.addListener(event, listener);
+
+		onBeforeUnmount(() => {
+			this.removeListener(event, listener);
 		});
 	}
 }
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index e9b1ee8101..30b7cf9a86 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -169,7 +169,6 @@ import { langmap } from '@/utility/langmap.js';
 import { definePage } from '@/page.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { store } from '@/store.js';
-import { globalEvents } from '@/events.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 
@@ -223,7 +222,6 @@ function saveFields() {
 	os.apiWithDialog('i/update', {
 		fields: fields.value.filter(field => field.name !== '' && field.value !== '').map(field => ({ name: field.name, value: field.value })),
 	});
-	globalEvents.emit('requestClearPageCache');
 }
 
 function save() {
@@ -249,7 +247,6 @@ function save() {
 			text: i18n.ts.yourNameContainsProhibitedWordsDescription,
 		},
 	});
-	globalEvents.emit('requestClearPageCache');
 	claimAchievement('profileFilled');
 	if (profile.name === 'syuilo' || profile.name === 'しゅいろ') {
 		claimAchievement('setNameToSyuilo');
@@ -281,7 +278,6 @@ function changeAvatar(ev) {
 		});
 		$i.avatarId = i.avatarId;
 		$i.avatarUrl = i.avatarUrl;
-		globalEvents.emit('requestClearPageCache');
 		claimAchievement('profileFilled');
 	});
 }
@@ -308,7 +304,6 @@ function changeBanner(ev) {
 		});
 		$i.bannerId = i.bannerId;
 		$i.bannerUrl = i.bannerUrl;
-		globalEvents.emit('requestClearPageCache');
 	});
 }
 
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index b5f59b30c1..dd70571d64 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -13,8 +13,8 @@ import { DI } from '@/di.js';
 
 export type Router = Nirax<typeof ROUTE_DEF>;
 
-export function createRouter(path: string): Router {
-	return new Nirax(ROUTE_DEF, path, !!$i, page(() => import('@/pages/not-found.vue')));
+export function createRouter(fullPath: string): Router {
+	return new Nirax(ROUTE_DEF, fullPath, !!$i, page(() => import('@/pages/not-found.vue')));
 }
 
 export const mainRouter = createRouter(location.pathname + location.search + location.hash);
@@ -24,23 +24,23 @@ window.addEventListener('popstate', (event) => {
 });
 
 mainRouter.addListener('push', ctx => {
-	window.history.pushState({ }, '', ctx.path);
+	window.history.pushState({ }, '', ctx.fullPath);
 });
 
 mainRouter.addListener('replace', ctx => {
-	window.history.replaceState({ }, '', ctx.path);
+	window.history.replaceState({ }, '', ctx.fullPath);
 });
 
 mainRouter.addListener('change', ctx => {
-	console.log('mainRouter: change', ctx.path);
+	console.log('mainRouter: change', ctx.fullPath);
 	analytics.page({
-		path: ctx.path,
-		title: ctx.path,
+		path: ctx.fullPath,
+		title: ctx.fullPath,
 	});
 });
 
 mainRouter.init();
 
 export function useRouter(): Router {
-	return inject(DI.router, null) ?? mainRouter;
+	return inject(DI.router) ?? mainRouter;
 }
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
index fa63586ef7..2ef06726f9 100644
--- a/packages/frontend/src/ui/classic.vue
+++ b/packages/frontend/src/ui/classic.vue
@@ -112,7 +112,7 @@ function onContextmenu(ev: MouseEvent) {
 	if (isLink(ev.target)) return;
 	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
 	if (window.getSelection().toString() !== '') return;
-	const path = mainRouter.getCurrentPath();
+	const path = mainRouter.getCurrentFullPath();
 	os.contextMenu([{
 		type: 'label',
 		text: path,
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index a6695de39d..133360972b 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -186,7 +186,7 @@ const onContextmenu = (ev) => {
 	if (isLink(ev.target)) return;
 	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
 	if (window.getSelection()?.toString() !== '') return;
-	const path = mainRouter.getCurrentPath();
+	const path = mainRouter.getCurrentFullPath();
 	os.contextMenu([{
 		type: 'label',
 		text: path,
-- 
cgit v1.2.3-freya

