forked from mirror/misskey
enhance: embed routerを分離(route定義をboot時に変更できるようにする改修を含む)
This commit is contained in:
parent
968f676b3a
commit
66825da39a
@ -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);
|
||||
|
@ -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;
|
||||
|
30
packages/frontend/src/router/definition.embed.ts
Normal file
30
packages/frontend/src/router/definition.embed.ts
Normal 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')));
|
||||
}
|
@ -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,
|
||||
@ -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);
|
||||
}
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user