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

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

View File

@ -15,8 +15,11 @@ import { setIframeId, postMessageToParentWindow } from '@/scripts/post-message.j
import { parseEmbedParams } from '@/scripts/embed-page.js';
import { defaultStore } from '@/store.js';
import { useRouter } from '@/router/supplier.js';
import { createEmbedRouter } from '@/router/definition.embed.js';
const bootOptions: Partial<CommonBootOptions> = {};
const bootOptions: Partial<CommonBootOptions> = {
routerFactory: createEmbedRouter,
};
const params = new URLSearchParams(location.search);
const embedParams = parseEmbedParams(params);

View File

@ -15,6 +15,7 @@ import { updateI18n } from '@/i18n.js';
import { $i, refreshAccount, login } from '@/account.js';
import { defaultStore, ColdDeviceStorage } from '@/store.js';
import { fetchInstance, instance } from '@/instance.js';
import type { IRouter } from '@/nirax.js';
import { deviceKind } from '@/scripts/device-kind.js';
import { reloadChannel } from '@/scripts/unison-reload.js';
import { getUrlWithoutLoginId } from '@/scripts/login-id.js';
@ -22,14 +23,17 @@ import { getAccountFromId } from '@/scripts/get-account-from-id.js';
import { deckStore } from '@/ui/deck/deck-store.js';
import { miLocalStorage } from '@/local-storage.js';
import { fetchCustomEmojis } from '@/custom-emojis.js';
import { setupRouter } from '@/router/definition.js';
import { createMainRouter } from '@/router/definition.js';
import { setupRouter } from '@/router/main.js';
export type CommonBootOptions = {
forceColorMode: 'dark' | 'light' | 'auto';
routerFactory: ((path: string) => IRouter);
};
const defaultCommonBootOptions: CommonBootOptions = {
forceColorMode: 'auto',
routerFactory: createMainRouter,
};
export async function common(createVue: () => App<Element>, partialOptions?: Partial<CommonBootOptions>) {
@ -253,7 +257,7 @@ export async function common(createVue: () => App<Element>, partialOptions?: Par
const app = createVue();
setupRouter(app);
setupRouter(app, bootOptions.routerFactory);
if (_DEV_) {
app.config.performance = true;

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

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

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