clean up

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() {

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);

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(() => {
 		// ページ遷移完了後に再びキャッシュを有効化

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);

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) {
+	public replace(path: string) {
-		const res = this.navigate(path, key);
+		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' });
-		});
-	});
-}

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();
 	}