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: [PATCH] clean up --- .../frontend/src/components/MkPageWindow.vue | 9 ++- .../components/global/NestedRouterView.vue | 6 +- .../src/components/global/RouterView.vue | 6 +- .../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(-) 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); const windowEl = shallowRef>(); -const history = ref<{ path: string; key: string; }[]>([{ +const history = ref<{ path: string; }[]>([{ path: windowRouter.getCurrentPath(), - key: windowRouter.getCurrentKey(), }]); const buttonsLeft = computed(() => { const buttons: Record[] = []; @@ -100,12 +99,12 @@ function getSearchMarker(path: string) { const searchMarkerId = ref(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 | null; - key: string; }) => void; same: () => void; }; @@ -121,11 +118,9 @@ export interface IRouter extends EventEmitter { 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>; @@ -197,7 +192,6 @@ export class Router extends EventEmitter 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 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 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 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 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 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 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 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(); - - 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(); }