Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enhance: embed routerを分離（route定義をboot時に変更できるようにする改修を含む）

Browse source
This commit is contained in:
kakkokari-gtyih 2024-08-20 14:08:48 +09:00
parent 968f676b3a
commit 66825da39a
5 changed files with 74 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/frontend/src/router/definition.embed.ts Normal file
View file

@ -0,0 +1,30 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import type { IRouter, RouteDef } from '@/nirax.js';
import { Router } from '@/nirax.js';
import { page } from '@/router/definition.js';
import { $i } from '@/account.js';
const routes: RouteDef[] = [{
path: '/embed/notes/:noteId',
component: page(() => import('@/pages/embed/note.vue')),
}, {
path: '/embed/user-timeline/@:username',
component: page(() => import('@/pages/embed/user-timeline.vue')),
}, {
path: '/embed/clips/:clipId',
component: page(() => import('@/pages/embed/clip.vue')),
}, {
path: '/embed/tags/:tag',
component: page(() => import('@/pages/embed/tag.vue')),
}, {
path: '/:(*)',
component: page(() => import('@/pages/not-found.vue')),
}];
export function createEmbedRouter(path: string): IRouter {
return new Router(routes, path, !!$i, page(() => import('@/pages/not-found.vue')));
}

51
packages/frontend/src/router/definition.ts
View file

@ -3,15 +3,14 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { App, AsyncComponentLoader, defineAsyncComponent, provide } from 'vue';
import type { RouteDef } from '@/nirax.js';
import { IRouter, Router } from '@/nirax.js';
import { AsyncComponentLoader, defineAsyncComponent } from 'vue';
import type { IRouter, RouteDef } from '@/nirax.js';
import { Router } from '@/nirax.js';
import { $i, iAmModerator } from '@/account.js';
import MkLoading from '@/pages/_loading_.vue';
import MkError from '@/pages/_error_.vue';
import { setMainRouter } from '@/router/main.js';
const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
export const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
loader: loader,
loadingComponent: MkLoading,
errorComponent: MkError,
@ -240,7 +239,7 @@ const routes: RouteDef[] = [{
origin: 'origin',
},
}, {
// Legacy Compatibility
// Legacy Compatibility
path: '/authorize-follow',
redirect: '/lookup',
loginRequired: true,
@ -579,18 +578,6 @@ const routes: RouteDef[] = [{
path: '/reversi/g/:gameId',
component: page(() => import('@/pages/reversi/game.vue')),
loginRequired: false,
}, {
path: '/embed/notes/:noteId',
component: page(() => import('@/pages/embed/note.vue')),
}, {
path: '/embed/user-timeline/@:username',
component: page(() => import('@/pages/embed/user-timeline.vue')),
}, {
path: '/embed/clips/:clipId',
component: page(() => import('@/pages/embed/clip.vue')),
}, {
path: '/embed/tags/:tag',
component: page(() => import('@/pages/embed/tag.vue')),
}, {
path: '/timeline',
component: page(() => import('@/pages/timeline.vue')),
@ -609,32 +596,6 @@ const routes: RouteDef[] = [{
component: page(() => import('@/pages/not-found.vue')),
}];
function createRouterImpl(path: string): IRouter {
export function createMainRouter(path: string): IRouter {
return new Router(routes, path, !!$i, page(() => import('@/pages/not-found.vue')));
}
/**
* {@link Router}による画面遷移を可能とするために{@link mainRouter}をセットアップする。
* また、{@link Router}のインスタンスを作成するためのファクトリも{@link provide}経由で公開する（`routerFactory`というキーで取得可能）
*/
export function setupRouter(app: App) {
app.provide('routerFactory', createRouterImpl);
const mainRouter = createRouterImpl(location.pathname + location.search + location.hash);
window.addEventListener('popstate', (event) => {
mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
});
mainRouter.addListener('push', ctx => {
window.history.pushState({ key: ctx.key }, '', ctx.path);
});
mainRouter.addListener('replace', ctx => {
window.history.replaceState({ key: ctx.key }, '', ctx.path);
});
mainRouter.init();
setMainRouter(mainRouter);
}

29
packages/frontend/src/router/main.ts
View file

@ -3,10 +3,37 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { ShallowRef } from 'vue';
import { EventEmitter } from 'eventemitter3';
import { IRouter, Resolved, RouteDef, RouterEvent } from '@/nirax.js';
import type { App, ShallowRef } from 'vue';
/**
* {@link Router}による画面遷移を可能とするために{@link mainRouter}をセットアップする。
* また、{@link Router}のインスタンスを作成するためのファクトリも{@link provide}経由で公開する（`routerFactory`というキーで取得可能）
*/
export function setupRouter(app: App, routerFactory: ((path: string) => IRouter)): void {
app.provide('routerFactory', routerFactory);
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.addListener('push', ctx => {
window.history.pushState({ key: ctx.key }, '', ctx.path);
});
mainRouter.addListener('replace', ctx => {
window.history.replaceState({ key: ctx.key }, '', ctx.path);
});
mainRouter.init();
setMainRouter(mainRouter);
}
function getMainRouter(): IRouter {
const router = mainRouterHolder;
if (!router) {