refactor(client): Refine routing (#8846)
This commit is contained in:
syuilo
@@ -1,147 +1,253 @@
|
||||
import { AsyncComponentLoader, defineAsyncComponent, markRaw } from 'vue';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { $i, iAmModerator } from './account';
|
||||
import { AsyncComponentLoader, defineAsyncComponent, inject } from 'vue';
|
||||
import { Router } from '@/nirax';
|
||||
import { $i, iAmModerator } from '@/account';
|
||||
import MkLoading from '@/pages/_loading_.vue';
|
||||
import MkError from '@/pages/_error_.vue';
|
||||
import MkTimeline from '@/pages/timeline.vue';
|
||||
import { ui } from '@/config';
|
||||
|
||||
// pathに/が入るとrollupが解決してくれないので、() => import('*.vue')を指定すること
|
||||
const page = (path: string | AsyncComponentLoader<any>, uiName?: string) => defineAsyncComponent({
|
||||
loader: typeof path === 'string' ? uiName ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`) : path,
|
||||
const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
|
||||
loader: loader,
|
||||
loadingComponent: MkLoading,
|
||||
errorComponent: MkError,
|
||||
});
|
||||
|
||||
let indexScrollPos = 0;
|
||||
|
||||
const defaultRoutes = [
|
||||
// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
|
||||
{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
|
||||
{ path: '/@:acct/:page?', name: 'user', component: page(() => import('./pages/user/index.vue')), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
|
||||
{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
|
||||
{ path: '/@:user/pages/:pageName/view-source', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
|
||||
{ path: '/settings/:page(.*)?', name: 'settings', component: page(() => import('./pages/settings/index.vue')), props: route => ({ initialPage: route.params.page || null }) },
|
||||
{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
|
||||
{ path: '/signup-complete/:code', component: page('signup-complete'), props: route => ({ code: route.params.code }) },
|
||||
{ path: '/announcements', component: page('announcements') },
|
||||
{ path: '/about', component: page('about') },
|
||||
{ path: '/about-misskey', component: page('about-misskey') },
|
||||
{ path: '/featured', component: page('featured') },
|
||||
{ path: '/theme-editor', component: page('theme-editor') },
|
||||
{ path: '/advanced-theme-editor', component: page('advanced-theme-editor') },
|
||||
{ path: '/explore', component: page('explore') },
|
||||
{ path: '/explore/tags/:tag', props: true, component: page('explore') },
|
||||
{ path: '/federation', component: page('federation') },
|
||||
{ path: '/emojis', component: page('emojis') },
|
||||
{ path: '/search', component: page('search'), props: route => ({ query: route.query.q, channel: route.query.channel }) },
|
||||
{ path: '/pages', name: 'pages', component: page('pages') },
|
||||
{ path: '/pages/new', component: page(() => import('./pages/page-editor/page-editor.vue')) },
|
||||
{ path: '/pages/edit/:pageId', component: page(() => import('./pages/page-editor/page-editor.vue')), props: route => ({ initPageId: route.params.pageId }) },
|
||||
{ path: '/gallery', component: page(() => import('./pages/gallery/index.vue')) },
|
||||
{ path: '/gallery/new', component: page(() => import('./pages/gallery/edit.vue')) },
|
||||
{ path: '/gallery/:postId/edit', component: page(() => import('./pages/gallery/edit.vue')), props: route => ({ postId: route.params.postId }) },
|
||||
{ path: '/gallery/:postId', component: page(() => import('./pages/gallery/post.vue')), props: route => ({ postId: route.params.postId }) },
|
||||
{ path: '/channels', component: page('channels') },
|
||||
{ path: '/channels/new', component: page('channel-editor') },
|
||||
{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
|
||||
{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
|
||||
{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
|
||||
{ path: '/timeline/list/:listId', component: page('user-list-timeline'), props: route => ({ listId: route.params.listId }) },
|
||||
{ path: '/timeline/antenna/:antennaId', component: page('antenna-timeline'), props: route => ({ antennaId: route.params.antennaId }) },
|
||||
{ path: '/my/notifications', component: page('notifications') },
|
||||
{ path: '/my/favorites', component: page('favorites') },
|
||||
{ path: '/my/messages', component: page('messages') },
|
||||
{ path: '/my/mentions', component: page('mentions') },
|
||||
{ path: '/my/messaging', name: 'messaging', component: page(() => import('./pages/messaging/index.vue')) },
|
||||
{ path: '/my/messaging/:user', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ userAcct: route.params.user }) },
|
||||
{ path: '/my/messaging/group/:group', component: page(() => import('./pages/messaging/messaging-room.vue')), props: route => ({ groupId: route.params.group }) },
|
||||
{ path: '/my/drive', name: 'drive', component: page('drive') },
|
||||
{ path: '/my/drive/folder/:folder', component: page('drive') },
|
||||
{ path: '/my/follow-requests', component: page('follow-requests') },
|
||||
{ path: '/my/lists', component: page(() => import('./pages/my-lists/index.vue')) },
|
||||
{ path: '/my/lists/:list', component: page(() => import('./pages/my-lists/list.vue')) },
|
||||
{ path: '/my/groups', component: page(() => import('./pages/my-groups/index.vue')) },
|
||||
{ path: '/my/groups/:group', component: page(() => import('./pages/my-groups/group.vue')), props: route => ({ groupId: route.params.group }) },
|
||||
{ path: '/my/antennas', component: page(() => import('./pages/my-antennas/index.vue')) },
|
||||
{ path: '/my/antennas/create', component: page(() => import('./pages/my-antennas/create.vue')) },
|
||||
{ path: '/my/antennas/:antennaId', component: page(() => import('./pages/my-antennas/edit.vue')), props: true },
|
||||
{ path: '/my/clips', component: page(() => import('./pages/my-clips/index.vue')) },
|
||||
{ path: '/scratchpad', component: page('scratchpad') },
|
||||
{ path: '/admin/:page(.*)?', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found'), props: route => ({ initialPage: route.params.page || null }) },
|
||||
{ path: '/admin', component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page('not-found') },
|
||||
{ path: '/admin-file/:fileId', component: page('admin-file'), props: route => ({ fileId: route.params.fileId }) },
|
||||
{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
|
||||
{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
|
||||
{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
|
||||
{ path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) },
|
||||
{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
|
||||
{ path: '/api-console', component: page('api-console') },
|
||||
{ path: '/preview', component: page('preview') },
|
||||
{ path: '/test', component: page('test') },
|
||||
{ path: '/auth/:token', component: page('auth') },
|
||||
{ path: '/miauth/:session', component: page('miauth') },
|
||||
{ path: '/authorize-follow', component: page('follow') },
|
||||
{ path: '/share', component: page('share') },
|
||||
{ path: '/:catchAll(.*)', component: page('not-found') },
|
||||
];
|
||||
|
||||
const chatRoutes = [
|
||||
{ path: '/timeline', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
|
||||
{ path: '/timeline/home', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
|
||||
{ path: '/timeline/local', component: page('timeline', 'chat'), props: route => ({ src: 'local' }) },
|
||||
{ path: '/timeline/social', component: page('timeline', 'chat'), props: route => ({ src: 'social' }) },
|
||||
{ path: '/timeline/global', component: page('timeline', 'chat'), props: route => ({ src: 'global' }) },
|
||||
{ path: '/channels/:channelId', component: page('channel', 'chat'), props: route => ({ channelId: route.params.channelId }) },
|
||||
];
|
||||
|
||||
function margeRoutes(routes: any[]) {
|
||||
const result = defaultRoutes;
|
||||
for (const route of routes) {
|
||||
const found = result.findIndex(x => x.path === route.path);
|
||||
if (found > -1) {
|
||||
result[found] = route;
|
||||
} else {
|
||||
result.unshift(route);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: margeRoutes(ui === 'chat' ? chatRoutes : []),
|
||||
// なんかHacky
|
||||
// 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする
|
||||
scrollBehavior(to) {
|
||||
window._scroll = () => { // さらにHacky
|
||||
if (to.name === 'index') {
|
||||
window.scroll({ top: indexScrollPos, behavior: 'instant' });
|
||||
const i = window.setInterval(() => {
|
||||
window.scroll({ top: indexScrollPos, behavior: 'instant' });
|
||||
}, 10);
|
||||
window.setTimeout(() => {
|
||||
window.clearInterval(i);
|
||||
}, 500);
|
||||
} else {
|
||||
window.scroll({ top: 0, behavior: 'instant' });
|
||||
}
|
||||
};
|
||||
export const routes = [{
|
||||
name: 'user',
|
||||
path: '/@:acct/:page?',
|
||||
component: page(() => import('./pages/user/index.vue')),
|
||||
}, {
|
||||
path: '/@:initUser/pages/:initPageName/view-source',
|
||||
component: page(() => import('./pages/page-editor/page-editor.vue')),
|
||||
}, {
|
||||
path: '/@:username/pages/:pageName',
|
||||
component: page(() => import('./pages/page.vue')),
|
||||
}, {
|
||||
name: 'note',
|
||||
path: '/notes/:noteId',
|
||||
component: page(() => import('./pages/note.vue')),
|
||||
}, {
|
||||
path: '/clips/:clipId',
|
||||
component: page(() => import('./pages/clip.vue')),
|
||||
}, {
|
||||
path: '/user-info/:userId',
|
||||
component: page(() => import('./pages/user-info.vue')),
|
||||
}, {
|
||||
path: '/instance-info/:host',
|
||||
component: page(() => import('./pages/instance-info.vue')),
|
||||
}, {
|
||||
name: 'settings',
|
||||
path: '/settings/:initialPage(*)?',
|
||||
component: page(() => import('./pages/settings/index.vue')),
|
||||
}, {
|
||||
path: '/reset-password/:token?',
|
||||
component: page(() => import('./pages/reset-password.vue')),
|
||||
}, {
|
||||
path: '/signup-complete/:code',
|
||||
component: page(() => import('./pages/signup-complete.vue')),
|
||||
}, {
|
||||
path: '/announcements',
|
||||
component: page(() => import('./pages/announcements.vue')),
|
||||
}, {
|
||||
path: '/about',
|
||||
component: page(() => import('./pages/about.vue')),
|
||||
}, {
|
||||
path: '/about-misskey',
|
||||
component: page(() => import('./pages/about-misskey.vue')),
|
||||
}, {
|
||||
path: '/featured',
|
||||
component: page(() => import('./pages/featured.vue')),
|
||||
}, {
|
||||
path: '/theme-editor',
|
||||
component: page(() => import('./pages/theme-editor.vue')),
|
||||
}, {
|
||||
path: '/explore/tags/:tag',
|
||||
component: page(() => import('./pages/explore.vue')),
|
||||
}, {
|
||||
path: '/explore',
|
||||
component: page(() => import('./pages/explore.vue')),
|
||||
}, {
|
||||
path: '/federation',
|
||||
component: page(() => import('./pages/federation.vue')),
|
||||
}, {
|
||||
path: '/emojis',
|
||||
component: page(() => import('./pages/emojis.vue')),
|
||||
}, {
|
||||
path: '/search',
|
||||
component: page(() => import('./pages/search.vue')),
|
||||
query: {
|
||||
q: 'query',
|
||||
channel: 'channel',
|
||||
},
|
||||
});
|
||||
}, {
|
||||
path: '/authorize-follow',
|
||||
component: page(() => import('./pages/follow.vue')),
|
||||
}, {
|
||||
path: '/share',
|
||||
component: page(() => import('./pages/share.vue')),
|
||||
}, {
|
||||
path: '/api-console',
|
||||
component: page(() => import('./pages/api-console.vue')),
|
||||
}, {
|
||||
path: '/mfm-cheat-sheet',
|
||||
component: page(() => import('./pages/mfm-cheat-sheet.vue')),
|
||||
}, {
|
||||
path: '/scratchpad',
|
||||
component: page(() => import('./pages/scratchpad.vue')),
|
||||
}, {
|
||||
path: '/preview',
|
||||
component: page(() => import('./pages/preview.vue')),
|
||||
}, {
|
||||
path: '/auth/:token',
|
||||
component: page(() => import('./pages/auth.vue')),
|
||||
}, {
|
||||
path: '/miauth/:session',
|
||||
component: page(() => import('./pages/miauth.vue')),
|
||||
query: {
|
||||
callback: 'callback',
|
||||
name: 'name',
|
||||
icon: 'icon',
|
||||
permission: 'permission',
|
||||
},
|
||||
}, {
|
||||
path: '/tags/:tag',
|
||||
component: page(() => import('./pages/tag.vue')),
|
||||
}, {
|
||||
path: '/pages/new',
|
||||
component: page(() => import('./pages/page-editor/page-editor.vue')),
|
||||
}, {
|
||||
path: '/pages/edit/:initPageId',
|
||||
component: page(() => import('./pages/page-editor/page-editor.vue')),
|
||||
}, {
|
||||
path: '/pages',
|
||||
component: page(() => import('./pages/pages.vue')),
|
||||
}, {
|
||||
path: '/gallery/:postId/edit',
|
||||
component: page(() => import('./pages/gallery/edit.vue')),
|
||||
}, {
|
||||
path: '/gallery/new',
|
||||
component: page(() => import('./pages/gallery/edit.vue')),
|
||||
}, {
|
||||
path: '/gallery/:postId',
|
||||
component: page(() => import('./pages/gallery/post.vue')),
|
||||
}, {
|
||||
path: '/gallery',
|
||||
component: page(() => import('./pages/gallery/index.vue')),
|
||||
}, {
|
||||
path: '/channels/:channelId/edit',
|
||||
component: page(() => import('./pages/channel-editor.vue')),
|
||||
}, {
|
||||
path: '/channels/new',
|
||||
component: page(() => import('./pages/channel-editor.vue')),
|
||||
}, {
|
||||
path: '/channels/:channelId',
|
||||
component: page(() => import('./pages/channel.vue')),
|
||||
}, {
|
||||
path: '/channels',
|
||||
component: page(() => import('./pages/channels.vue')),
|
||||
}, {
|
||||
path: '/admin/file/:fileId',
|
||||
component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
|
||||
}, {
|
||||
path: '/admin/:initialPage(*)?',
|
||||
component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
|
||||
}, {
|
||||
path: '/my/notifications',
|
||||
component: page(() => import('./pages/notifications.vue')),
|
||||
}, {
|
||||
path: '/my/favorites',
|
||||
component: page(() => import('./pages/favorites.vue')),
|
||||
}, {
|
||||
path: '/my/messages',
|
||||
component: page(() => import('./pages/messages.vue')),
|
||||
}, {
|
||||
path: '/my/mentions',
|
||||
component: page(() => import('./pages/mentions.vue')),
|
||||
}, {
|
||||
name: 'messaging',
|
||||
path: '/my/messaging',
|
||||
component: page(() => import('./pages/messaging/index.vue')),
|
||||
}, {
|
||||
path: '/my/messaging/:userAcct',
|
||||
component: page(() => import('./pages/messaging/messaging-room.vue')),
|
||||
}, {
|
||||
path: '/my/messaging/group/:groupId',
|
||||
component: page(() => import('./pages/messaging/messaging-room.vue')),
|
||||
}, {
|
||||
path: '/my/drive/folder/:folder',
|
||||
component: page(() => import('./pages/drive.vue')),
|
||||
}, {
|
||||
path: '/my/drive',
|
||||
component: page(() => import('./pages/drive.vue')),
|
||||
}, {
|
||||
path: '/my/follow-requests',
|
||||
component: page(() => import('./pages/follow-requests.vue')),
|
||||
}, {
|
||||
path: '/my/lists/:listId',
|
||||
component: page(() => import('./pages/my-lists/list.vue')),
|
||||
}, {
|
||||
path: '/my/lists',
|
||||
component: page(() => import('./pages/my-lists/index.vue')),
|
||||
}, {
|
||||
path: '/my/clips',
|
||||
component: page(() => import('./pages/my-clips/index.vue')),
|
||||
}, {
|
||||
path: '/my/antennas/create',
|
||||
component: page(() => import('./pages/my-antennas/create.vue')),
|
||||
}, {
|
||||
path: '/my/antennas/:antennaId',
|
||||
component: page(() => import('./pages/my-antennas/edit.vue')),
|
||||
}, {
|
||||
path: '/my/antennas',
|
||||
component: page(() => import('./pages/my-antennas/index.vue')),
|
||||
}, {
|
||||
path: '/timeline/list/:listId',
|
||||
component: page(() => import('./pages/user-list-timeline.vue')),
|
||||
}, {
|
||||
path: '/timeline/antenna/:antennaId',
|
||||
component: page(() => import('./pages/antenna-timeline.vue')),
|
||||
}, {
|
||||
name: 'index',
|
||||
path: '/',
|
||||
component: $i ? page(() => import('./pages/timeline.vue')) : page(() => import('./pages/welcome.vue')),
|
||||
globalCacheKey: 'index',
|
||||
}, {
|
||||
path: '/(*)',
|
||||
component: page(() => import('./pages/not-found.vue')),
|
||||
}];
|
||||
|
||||
router.afterEach((to, from) => {
|
||||
if (from.name === 'index') {
|
||||
indexScrollPos = window.scrollY;
|
||||
export const mainRouter = new Router(routes, location.pathname + location.search);
|
||||
|
||||
window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
|
||||
|
||||
// TODO: このファイルでスクロール位置も管理する設計だとdeckに対応できないのでなんとかする
|
||||
// スクロール位置取得+スクロール位置設定関数をprovideする感じでも良いかも
|
||||
|
||||
const scrollPosStore = new Map<string, number>();
|
||||
|
||||
window.setInterval(() => {
|
||||
scrollPosStore.set(window.history.state?.key, window.scrollY);
|
||||
}, 1000);
|
||||
|
||||
mainRouter.addListener('push', ctx => {
|
||||
window.history.pushState({ key: ctx.key }, '', ctx.path);
|
||||
const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
|
||||
window.scroll({ top: scrollPos, behavior: 'instant' });
|
||||
if (scrollPos !== 0) {
|
||||
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
|
||||
window.scroll({ top: scrollPos, behavior: 'instant' });
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
export function resolve(path: string) {
|
||||
const resolved = router.resolve(path);
|
||||
const route = resolved.matched[0];
|
||||
return {
|
||||
component: markRaw(route.components.default),
|
||||
// TODO: route.propsには関数以外も入る可能性があるのでよしなにハンドリングする
|
||||
props: route.props.default ? route.props.default(resolved) : resolved.params,
|
||||
};
|
||||
window.addEventListener('popstate', (event) => {
|
||||
mainRouter.change(location.pathname + location.search, event.state?.key);
|
||||
const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
|
||||
window.scroll({ top: scrollPos, behavior: 'instant' });
|
||||
window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
|
||||
window.scroll({ top: scrollPos, behavior: 'instant' });
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
export function useRouter(): Router {
|
||||
return inject<Router | null>('router', null) ?? mainRouter;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user