From d456308653bcadbb95dbd954b01eab1df9464c03 Mon Sep 17 00:00:00 2001 From: tamaina Date: Tue, 17 Jan 2023 17:36:18 +0900 Subject: [PATCH] pref: Optimize client imports (#9506) * pref: Optimize client imports * split api? * fix * :v: * no vue split? * Revert "no vue split?" This reverts commit 27ccec971e2925184a58da65c3472655def2617c. * function => const * :v: * Revert "function => const" This reverts commit 34f2feb224f65cc4fca090b29450adb00e85c2c5. * function api --- packages/frontend/src/os.ts | 39 ++++++++++++++++------------ packages/frontend/src/scripts/api.ts | 2 +- packages/frontend/vite.config.ts | 1 + 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index b19443aa55..111bd0cd8d 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -1,5 +1,7 @@ // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する +import { pendingApiRequestsCount, api, apiGet } from '@/scripts/api'; +export { pendingApiRequestsCount, api, apiGet }; import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue'; import { EventEmitter } from 'eventemitter3'; import insertTextAtCursor from 'insert-text-at-cursor'; @@ -7,9 +9,14 @@ import * as Misskey from 'misskey-js'; import { i18n } from './i18n'; import MkPostFormDialog from '@/components/MkPostFormDialog.vue'; import MkWaitingDialog from '@/components/MkWaitingDialog.vue'; +import MkPageWindow from '@/components/MkPageWindow.vue' +import MkToast from '@/components/MkToast.vue'; +import MkDialog from '@/components/MkDialog.vue'; +import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue'; +import MkEmojiPickerWindow from '@/components/MkEmojiPickerWindow.vue'; +import MkPopupMenu from '@/components/MkPopupMenu.vue'; +import MkContextMenu from '@/components/MkContextMenu.vue'; import { MenuItem } from '@/types/menu'; -import { pendingApiRequestsCount, api, apiGet } from '@/scripts/api'; -export { pendingApiRequestsCount, api, apiGet }; export const apiWithDialog = (( endpoint: string, @@ -124,7 +131,7 @@ export async function popup(component: Component, props: Record, ev } export function pageWindow(path: string) { - popup(defineAsyncComponent(() => import('@/components/MkPageWindow.vue')), { + popup(MkPageWindow, { initialPath: path, }, {}, 'closed'); } @@ -136,7 +143,7 @@ export function modalPageWindow(path: string) { } export function toast(message: string) { - popup(defineAsyncComponent(() => import('@/components/MkToast.vue')), { + popup(MkToast, { message, }, {}, 'closed'); } @@ -147,7 +154,7 @@ export function alert(props: { text?: string | null; }): Promise { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), props, { + popup(MkDialog, props, { done: result => { resolve(); }, @@ -161,7 +168,7 @@ export function confirm(props: { text?: string | null; }): Promise<{ canceled: boolean }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { + popup(MkDialog, { ...props, showCancelButton: true, }, { @@ -182,7 +189,7 @@ export function inputText(props: { canceled: false; result: string; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { + popup(MkDialog, { title: props.title, text: props.text, input: { @@ -207,7 +214,7 @@ export function inputNumber(props: { canceled: false; result: number; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { + popup(MkDialog, { title: props.title, text: props.text, input: { @@ -232,7 +239,7 @@ export function inputDate(props: { canceled: false; result: Date; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { + popup(MkDialog, { title: props.title, text: props.text, input: { @@ -269,7 +276,7 @@ export function select(props: { canceled: false; result: C; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { + popup(MkDialog, { title: props.title, text: props.text, select: { @@ -291,7 +298,7 @@ export function success() { window.setTimeout(() => { showing.value = false; }, 1000); - popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { + popup(MkWaitingDialog, { success: true, showing: showing, }, { @@ -303,7 +310,7 @@ export function success() { export function waiting() { return new Promise((resolve, reject) => { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { + popup(MkWaitingDialog, { success: false, showing: showing, }, { @@ -366,7 +373,7 @@ export async function selectDriveFolder(multiple: boolean) { export async function pickEmoji(src: HTMLElement | null, opts) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { + popup(MkEmojiPickerDialog, { src, ...opts, }, { @@ -431,7 +438,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: characterData: false, }); - openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), { + openingEmojiPicker = await popup(MkEmojiPickerWindow, { src, ...opts, }, { @@ -454,7 +461,7 @@ export function popupMenu(items: MenuItem[] | Ref, src?: HTMLElement }) { return new Promise((resolve, reject) => { let dispose; - popup(defineAsyncComponent(() => import('@/components/MkPopupMenu.vue')), { + popup(MkPopupMenu, { items, src, width: options?.width, @@ -478,7 +485,7 @@ export function contextMenu(items: MenuItem[] | Ref, ev: MouseEvent) ev.preventDefault(); return new Promise((resolve, reject) => { let dispose; - popup(defineAsyncComponent(() => import('@/components/MkContextMenu.vue')), { + popup(MkContextMenu, { items, ev, }, { diff --git a/packages/frontend/src/scripts/api.ts b/packages/frontend/src/scripts/api.ts index f9fd11f069..5f34f5333e 100644 --- a/packages/frontend/src/scripts/api.ts +++ b/packages/frontend/src/scripts/api.ts @@ -45,7 +45,7 @@ export function api(en } // Implements Misskey.api.ApiClient.request -export function apiGet(endpoint: E, data: P = {} as any): Promise { +export function apiGet (endpoint: E, data: P = {} as any): Promise { pendingApiRequestsCount.value++; const onFinally = () => { diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts index ba82eda609..0bf35ec1b4 100644 --- a/packages/frontend/vite.config.ts +++ b/packages/frontend/vite.config.ts @@ -97,6 +97,7 @@ export default defineConfig(({ command, mode }) => { output: { manualChunks: { vue: ['vue'], + photoswipe: ['photoswipe', 'photoswipe/lightbox', 'photoswipe/style.css'], }, }, },