From c3ae6f3a4a8325eaa1420ae1ab0435428d92c2cb Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 3 Nov 2020 15:22:55 +0900 Subject: [PATCH] Refactor --- src/client/components/drive.folder.vue | 4 +-- src/client/components/link.vue | 2 +- src/client/components/note.vue | 4 +-- src/client/components/post-form.vue | 4 +-- src/client/components/sidebar.vue | 10 +++--- src/client/components/taskmanager.vue | 4 +-- src/client/components/url.vue | 2 +- src/client/directives/tooltip.ts | 4 +-- src/client/directives/user-preview.ts | 4 +-- src/client/os.ts | 37 +++++++++++++-------- src/client/pages/instance/emojis.vue | 4 +-- src/client/pages/instance/file-dialog.vue | 4 +-- src/client/pages/instance/files.vue | 4 +-- src/client/pages/instance/users.vue | 4 +-- src/client/pages/settings/api.vue | 4 +-- src/client/pages/settings/notifications.vue | 4 +-- src/client/pages/settings/other.vue | 2 +- src/client/pages/settings/plugins.vue | 4 +-- src/client/pages/settings/reaction.vue | 6 ++-- src/client/scripts/get-user-menu.ts | 4 +-- src/client/ui/deck.vue | 4 +-- src/client/ui/deck/notifications-column.vue | 4 +-- src/client/ui/default.vue | 4 +-- src/client/ui/zen.vue | 4 +-- src/client/widgets/notifications.vue | 4 +-- 25 files changed, 73 insertions(+), 62 deletions(-) diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue index 5664fb8c62..ab678217b6 100644 --- a/src/client/components/drive.folder.vue +++ b/src/client/components/drive.folder.vue @@ -248,8 +248,8 @@ export default defineComponent({ os.contextMenu([{ text: this.$t('openInWindow'), icon: faWindowRestore, - action: async () => { - os.popup(await import('./drive-window.vue'), { + action: () => { + os.popup(import('./drive-window.vue'), { initialFolder: this.folder }, { }, 'closed'); diff --git a/src/client/components/link.vue b/src/client/components/link.vue index bac49a62ef..f51773dc4b 100644 --- a/src/client/components/link.vue +++ b/src/client/components/link.vue @@ -46,7 +46,7 @@ export default defineComponent({ if (!document.body.contains(this.$el)) return; if (this.close) return; - const { dispose } = os.popup(await import('@/components/url-preview-popup.vue'), { + const { dispose } = await os.popup(import('@/components/url-preview-popup.vue'), { url: this.url, source: this.$el }); diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 609098f82c..377496b402 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -498,7 +498,7 @@ export default defineComponent({ react(viaKeyboard = false) { pleaseLogin(); this.blur(); - os.popup(defineAsyncComponent(() => import('@/components/reaction-picker.vue')), { + os.popup(import('@/components/reaction-picker.vue'), { showFocus: viaKeyboard, src: this.$refs.reactButton, }, { @@ -644,7 +644,7 @@ export default defineComponent({ text: this.$t('reportAbuse'), action: () => { const u = `${url}/notes/${this.appearNote.id}`; - os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), { + os.popup(import('@/components/abuse-report-window.vue'), { user: this.appearNote.user, initialComment: `Note: ${u}\n-----\n` }, {}, 'closed'); diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue index 2eb807af5a..020b925fb9 100644 --- a/src/client/components/post-form.vue +++ b/src/client/components/post-form.vue @@ -378,13 +378,13 @@ export default defineComponent({ this.saveDraft(); }, - async setVisibility() { + setVisibility() { if (this.channel) { // TODO: information dialog return; } - os.popup(await import('./visibility-picker.vue'), { + os.popup(import('./visibility-picker.vue'), { currentVisibility: this.visibility, currentLocalOnly: this.localOnly, src: this.$refs.visibilityButton diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue index 47bc8830ec..ae9fff816f 100644 --- a/src/client/components/sidebar.vue +++ b/src/client/components/sidebar.vue @@ -257,8 +257,8 @@ export default defineComponent({ }], ev.currentTarget || ev.target); }, - async addAcount() { - os.popup(await import('./signin-dialog.vue'), {}, { + addAcount() { + os.popup(import('./signin-dialog.vue'), {}, { done: res => { this.$store.dispatch('addAcount', res); os.success(); @@ -266,8 +266,8 @@ export default defineComponent({ }, 'closed'); }, - async createAccount() { - os.popup(await import('./signup-dialog.vue'), {}, { + createAccount() { + os.popup(import('./signup-dialog.vue'), {}, { done: res => { this.$store.dispatch('addAcount', res); this.switchAccountWithToken(res.i); @@ -275,7 +275,7 @@ export default defineComponent({ }, 'closed'); }, - async switchAccount(account: any) { + switchAccount(account: any) { const token = this.$store.state.device.accounts.find((x: any) => x.id === account.id).token; this.switchAccountWithToken(token); }, diff --git a/src/client/components/taskmanager.vue b/src/client/components/taskmanager.vue index 91b52ecc3e..ab8d4a80dd 100644 --- a/src/client/components/taskmanager.vue +++ b/src/client/components/taskmanager.vue @@ -119,8 +119,8 @@ export default defineComponent({ os.popups.value = os.popups.value.filter(x => x !== p); }; - const showReq = async req => { - os.popup(await import('./taskmanager.api-window.vue'), { + const showReq = req => { + os.popup(import('./taskmanager.api-window.vue'), { req: req }, { }, 'closed'); diff --git a/src/client/components/url.vue b/src/client/components/url.vue index ceb0381f87..c7e93094f5 100644 --- a/src/client/components/url.vue +++ b/src/client/components/url.vue @@ -71,7 +71,7 @@ export default defineComponent({ if (!document.body.contains(this.$el)) return; if (this.close) return; - const { dispose } = os.popup(await import('@/components/url-preview-popup.vue'), { + const { dispose } = await os.popup(import('@/components/url-preview-popup.vue'), { url: this.url, source: this.$el }); diff --git a/src/client/directives/tooltip.ts b/src/client/directives/tooltip.ts index f232ea47c7..faeeef79a7 100644 --- a/src/client/directives/tooltip.ts +++ b/src/client/directives/tooltip.ts @@ -23,13 +23,13 @@ export default { } }; - const show = async e => { + const show = e => { if (!document.body.contains(el)) return; if (self._close) return; if (self.text == null) return; const showing = ref(true); - popup(await import('@/components/ui/tooltip.vue'), { + popup(import('@/components/ui/tooltip.vue'), { showing, text: self.text, source: el diff --git a/src/client/directives/user-preview.ts b/src/client/directives/user-preview.ts index 0fe05aca40..68d9e2816c 100644 --- a/src/client/directives/user-preview.ts +++ b/src/client/directives/user-preview.ts @@ -18,13 +18,13 @@ export class UserPreview { } @autobind - private async show() { + private show() { if (!document.body.contains(this.el)) return; if (this.promise) return; const showing = ref(true); - popup(await import('@/components/user-preview.vue'), { + popup(import('@/components/user-preview.vue'), { showing, q: this.user, source: this.el diff --git a/src/client/os.ts b/src/client/os.ts index 39032b61f1..898b876589 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -147,7 +147,9 @@ export const popups = ref([]) as Ref<{ props: Record; }[]>; -export function popup(component: Component | typeof import('*.vue'), props: Record, events = {}, disposeEvent?: string) { +export async function popup(component: Component | typeof import('*.vue') | Promise, props: Record, events = {}, disposeEvent?: string) { + if (component.then) component = await component; + if (isModule(component)) component = component.default; markRaw(component); @@ -179,7 +181,7 @@ export function popup(component: Component | typeof import('*.vue'), props: Reco export function pageWindow(path: string) { const { component, props } = resolve(path); - popup(defineAsyncComponent(() => import('@/components/page-window.vue')), { + popup(import('@/components/page-window.vue'), { initialPath: path, initialComponent: markRaw(component), initialProps: props, @@ -188,7 +190,7 @@ export function pageWindow(path: string) { export function dialog(props: Record) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, { + popup(import('@/components/dialog.vue'), props, { done: result => { resolve(result ? result : { canceled: true }); }, @@ -202,7 +204,7 @@ export function success() { setTimeout(() => { showing.value = false; }, 1000); - popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), { + popup(import('@/components/waiting-dialog.vue'), { success: true, showing: showing }, { @@ -214,7 +216,7 @@ export function success() { export function waiting() { return new Promise((resolve, reject) => { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), { + popup(import('@/components/waiting-dialog.vue'), { success: false, showing: showing }, { @@ -225,7 +227,7 @@ export function waiting() { export function form(title, form) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/form-dialog.vue')), { title, form }, { + popup(import('@/components/form-dialog.vue'), { title, form }, { done: result => { resolve(result); }, @@ -235,7 +237,7 @@ export function form(title, form) { export async function selectUser() { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/user-select-dialog.vue')), {}, { + popup(import('@/components/user-select-dialog.vue'), {}, { ok: user => { resolve(user); }, @@ -245,7 +247,7 @@ export async function selectUser() { export async function selectDriveFile(multiple: boolean) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), { + popup(import('@/components/drive-select-dialog.vue'), { type: 'file', multiple }, { @@ -260,7 +262,7 @@ export async function selectDriveFile(multiple: boolean) { export async function selectDriveFolder(multiple: boolean) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), { + popup(import('@/components/drive-select-dialog.vue'), { type: 'folder', multiple }, { @@ -275,7 +277,7 @@ export async function selectDriveFolder(multiple: boolean) { export async function pickEmoji(src?: HTMLElement) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/emoji-picker.vue')), { + popup(import('@/components/emoji-picker.vue'), { src }, { done: emoji => { @@ -287,7 +289,8 @@ export async function pickEmoji(src?: HTMLElement) { export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) { return new Promise((resolve, reject) => { - const { dispose } = popup(defineAsyncComponent(() => import('@/components/ui/modal-menu.vue')), { + let dispose; + popup(import('@/components/ui/modal-menu.vue'), { items, src, align: options?.align, @@ -297,6 +300,8 @@ export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: s resolve(); dispose(); }, + }).then(_dispose => { + dispose = _dispose; }); }); } @@ -304,7 +309,8 @@ export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: s export function contextMenu(items: any[], ev: MouseEvent) { ev.preventDefault(); return new Promise((resolve, reject) => { - const { dispose } = popup(defineAsyncComponent(() => import('@/components/ui/context-menu.vue')), { + let dispose; + popup(import('@/components/ui/context-menu.vue'), { items, ev, }, { @@ -312,6 +318,8 @@ export function contextMenu(items: any[], ev: MouseEvent) { resolve(); dispose(); }, + }).then(_dispose => { + dispose = _dispose; }); }); } @@ -323,11 +331,14 @@ export function post(props: Record) { // Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、 // 複数のpost formを開いたときに場合によってはエラーになる // もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが - const { dispose } = popup(MkPostFormDialog, props, { + let dispose; + popup(MkPostFormDialog, props, { closed: () => { resolve(); dispose(); }, + }).then(_dispose => { + dispose = _dispose; }); }); } diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue index 9001a5c5eb..f33383776c 100644 --- a/src/client/pages/instance/emojis.vue +++ b/src/client/pages/instance/emojis.vue @@ -113,8 +113,8 @@ export default defineComponent({ os.promiseDialog(promise); }, - async edit(emoji) { - os.popup(await import('./emoji-edit-dialog.vue'), { + edit(emoji) { + os.popup(import('./emoji-edit-dialog.vue'), { emoji: emoji }, { done: result => { diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue index c03a691bfd..79244349e3 100644 --- a/src/client/pages/instance/file-dialog.vue +++ b/src/client/pages/instance/file-dialog.vue @@ -84,8 +84,8 @@ export default defineComponent({ Progress.done(); }, - async showUser() { - os.popup(await import('./user-dialog.vue'), { + showUser() { + os.popup(import('./user-dialog.vue'), { userId: this.file.userId }, {}, 'closed'); }, diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue index 29efe08a39..3c1d90f24f 100644 --- a/src/client/pages/instance/files.vue +++ b/src/client/pages/instance/files.vue @@ -131,8 +131,8 @@ export default defineComponent({ }); }, - async show(file, ev) { - os.popup(await import('./file-dialog.vue'), { + show(file, ev) { + os.popup(import('./file-dialog.vue'), { fileId: file.id }, {}, 'closed'); }, diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue index b891ed8412..43ea79656d 100644 --- a/src/client/pages/instance/users.vue +++ b/src/client/pages/instance/users.vue @@ -206,8 +206,8 @@ export default defineComponent({ }); }, - async show(user) { - os.popup(await import('./user-dialog.vue'), { + show(user) { + os.popup(import('./user-dialog.vue'), { userId: user.id }, {}, 'closed'); }, diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue index 6a311cdc8b..80a558ff85 100644 --- a/src/client/pages/settings/api.vue +++ b/src/client/pages/settings/api.vue @@ -42,8 +42,8 @@ export default defineComponent({ }, methods: { - async generateToken() { - os.popup(await import('@/components/token-generate-window.vue'), {}, { + generateToken() { + os.popup(import('@/components/token-generate-window.vue'), {}, { done: async result => { const { name, permissions } = result; const { token } = await os.api('miauth/gen-token', { diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue index 98dc85ea52..6d73e79a31 100644 --- a/src/client/pages/settings/notifications.vue +++ b/src/client/pages/settings/notifications.vue @@ -72,9 +72,9 @@ export default defineComponent({ os.api('notifications/mark-all-as-read'); }, - async configure() { + configure() { const includingTypes = notificationTypes.filter(x => !this.$store.state.i.mutingNotificationTypes.includes(x)); - os.popup(await import('@/components/notification-setting-window.vue'), { + os.popup(import('@/components/notification-setting-window.vue'), { includingTypes, showGlobalToggle: false, }, { diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue index dbeb9ad719..0faf4e4c85 100644 --- a/src/client/pages/settings/other.vue +++ b/src/client/pages/settings/other.vue @@ -69,7 +69,7 @@ export default defineComponent({ }, taskmanager() { - os.popup(defineAsyncComponent(() => import('@/components/taskmanager.vue')), { + os.popup(import('@/components/taskmanager.vue'), { }, {}, 'closed'); } } diff --git a/src/client/pages/settings/plugins.vue b/src/client/pages/settings/plugins.vue index 246624ddd4..6cedf02548 100644 --- a/src/client/pages/settings/plugins.vue +++ b/src/client/pages/settings/plugins.vue @@ -117,8 +117,8 @@ export default defineComponent({ return; } - const token = permissions == null || permissions.length === 0 ? null : await new Promise(async (res, rej) => { - os.popup(await import('@/components/token-generate-window.vue'), { + const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => { + os.popup(import('@/components/token-generate-window.vue'), { title: this.$t('tokenRequested'), information: this.$t('pluginTokenRequestedDescription'), initialName: name, diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue index 683cf6dfbe..8d76d65ed1 100644 --- a/src/client/pages/settings/reaction.vue +++ b/src/client/pages/settings/reaction.vue @@ -73,8 +73,8 @@ export default defineComponent({ this.changed = false; }, - async preview(ev) { - os.popup(await import('@/components/reaction-picker.vue'), { + preview(ev) { + os.popup(import('@/components/reaction-picker.vue'), { reactions: this.splited, showFocus: false, src: ev.currentTarget || ev.target, @@ -85,7 +85,7 @@ export default defineComponent({ this.reactions = defaultSettings.reactions.join(''); }, - async chooseEmoji(ev) { + chooseEmoji(ev) { os.pickEmoji(ev.currentTarget || ev.target).then(emoji => { this.reactions += emoji; }); diff --git a/src/client/scripts/get-user-menu.ts b/src/client/scripts/get-user-menu.ts index 693e573b07..c3de7313cc 100644 --- a/src/client/scripts/get-user-menu.ts +++ b/src/client/scripts/get-user-menu.ts @@ -101,8 +101,8 @@ export function getUserMenu(user) { }); } - async function reportAbuse() { - os.popup(await import('@/components/abuse-report-window.vue'), { + function reportAbuse() { + os.popup(import('@/components/abuse-report-window.vue'), { user: user, }, {}, 'closed'); } diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue index ce54a6672d..ff1daa58a0 100644 --- a/src/client/ui/deck.vue +++ b/src/client/ui/deck.vue @@ -143,7 +143,7 @@ export default defineComponent({ os.post(); }, - async onNotification(notification) { + onNotification(notification) { if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) { return; } @@ -153,7 +153,7 @@ export default defineComponent({ id: notification.id }); - os.popup(await import('@/components/toast.vue'), { + os.popup(import('@/components/toast.vue'), { notification }, {}, 'closed'); } diff --git a/src/client/ui/deck/notifications-column.vue b/src/client/ui/deck/notifications-column.vue index 6284cdcd0b..a6281a766a 100644 --- a/src/client/ui/deck/notifications-column.vue +++ b/src/client/ui/deck/notifications-column.vue @@ -42,8 +42,8 @@ export default defineComponent({ this.menu = [{ icon: faCog, text: this.$t('notificationSetting'), - action: async () => { - os.popup(await import('@/components/notification-setting-window.vue'), { + action: () => { + os.popup(import('@/components/notification-setting-window.vue'), { includingTypes: this.column.includingTypes, }, { done: async (res) => { diff --git a/src/client/ui/default.vue b/src/client/ui/default.vue index 626e5242c5..2c9d842676 100644 --- a/src/client/ui/default.vue +++ b/src/client/ui/default.vue @@ -235,7 +235,7 @@ export default defineComponent({ }], e); }, - async onNotification(notification) { + onNotification(notification) { if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) { return; } @@ -244,7 +244,7 @@ export default defineComponent({ id: notification.id }); - os.popup(await import('@/components/toast.vue'), { + os.popup(import('@/components/toast.vue'), { notification }, {}, 'closed'); } diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue index dbf9430e78..e3aa077bd7 100644 --- a/src/client/ui/zen.vue +++ b/src/client/ui/zen.vue @@ -95,7 +95,7 @@ export default defineComponent({ if (window._scroll) window._scroll(); }, - async onNotification(notification) { + onNotification(notification) { if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) { return; } @@ -104,7 +104,7 @@ export default defineComponent({ id: notification.id }); - os.popup(await import('@/components/toast.vue'), { + os.popup(import('@/components/toast.vue'), { notification }, {}, 'closed'); } diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue index 490c4d758f..7937ffb0a5 100644 --- a/src/client/widgets/notifications.vue +++ b/src/client/widgets/notifications.vue @@ -51,8 +51,8 @@ export default defineComponent({ }, methods: { - async configure() { - os.popup(await import('@/components/notification-setting-window.vue'), { + configure() { + os.popup(import('@/components/notification-setting-window.vue'), { includingTypes: this.props.includingTypes, }, { done: async (res) => {