usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): `os.ts`周りのリファクタリング

This commit is contained in:
zyoshoka 2024-02-06 21:06:56 +09:00
parent 0df069494e
commit c462e13528
No known key found for this signature in database
GPG Key ID: 0C2CB8FBA309A5B8
7 changed files with 80 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/account.ts
View File

@ -185,7 +185,7 @@ export async function refreshAccount() {
export async function login(token: Account['token'], redirect?: string) {
const showing = ref(true);
popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
success: false,
success: ref(false),
showing: showing,
}, {}, 'closed');
if (_DEV_) console.log('logging as token ', token);
@ -290,7 +290,7 @@ export async function openAccountMenu(opts: {
text: i18n.ts.profile,
to: `/@${ $i.username }`,
avatar: $i,
}, { type: 'divider' }, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
}, { type: 'divider' as const }, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
type: 'parent' as const,
icon: 'ti ti-plus',
text: i18n.ts.addAccount,

18
packages/frontend/src/components/MkDialog.vue
View File

@ -38,11 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="select.items">
<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
</template>
<template v-else>
<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
</optgroup>
</template>
</MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
<MkButton v-if="showOkButton" data-cy-modal-dialog-ok inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabledReason" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
@ -64,7 +59,7 @@ import MkSelect from '@/components/MkSelect.vue';
import { i18n } from '@/i18n.js';
type Input = {
type: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search' | 'datetime-local';
placeholder?: string | null;
autocomplete?: string;
default: string | number | null;
@ -74,22 +69,15 @@ type Input = {
type Select = {
items: {
value: string;
value: any;
text: string;
}[];
groupedItems: {
label: string;
items: {
value: string;
text: string;
}[];
}[];
default: string | null;
};
const props = withDefaults(defineProps<{
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
title: string;
title?: string;
text?: string;
input?: Input;
select?: Select;

47
packages/frontend/src/components/MkEmojiPickerWindow.vue
View File

@ -1,47 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkWindow
ref="window"
:initialWidth="300"
:initialHeight="290"
:canResize="true"
:mini="true"
:front="true"
@closed="emit('closed')"
>
<MkEmojiPicker :showPinned="showPinned" :asReactionPicker="asReactionPicker" asWindow :class="$style.picker" @chosen="chosen"/>
</MkWindow>
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkWindow from '@/components/MkWindow.vue';
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
withDefaults(defineProps<{
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
showPinned: true,
});
const emit = defineEmits<{
(ev: 'chosen', v: any): void;
(ev: 'closed'): void;
}>();
function chosen(emoji: any) {
emit('chosen', emoji);
}
</script>
<style lang="scss" module>
.picker {
height: 100%;
}
</style>

6
packages/frontend/src/components/MkWaitingDialog.vue
View File

@ -14,14 +14,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { watch, shallowRef } from 'vue';
import { Ref, watch, shallowRef } from 'vue';
import MkModal from '@/components/MkModal.vue';
const modal = shallowRef<InstanceType<typeof MkModal>>();
const props = defineProps<{
success: boolean;
showing: boolean;
success: Ref<boolean>;
showing: Ref<boolean>;
text?: string;
}>();

178
packages/frontend/src/os.ts
View File

@ -7,7 +7,6 @@
import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue';
import { EventEmitter } from 'eventemitter3';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as Misskey from 'misskey-js';
import type { ComponentProps } from 'vue-component-type-helpers';
import { misskeyApi } from '@/scripts/misskey-api.js';
@ -19,7 +18,6 @@ import MkToast from '@/components/MkToast.vue';
import MkDialog from '@/components/MkDialog.vue';
import MkPasswordDialog from '@/components/MkPasswordDialog.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.js';
@ -28,14 +26,14 @@ import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
export const openingWindowsCount = ref(0);
export const apiWithDialog = ((
endpoint: string,
export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints>(
endpoint: E,
data: Record<string, any> = {},
token?: string | null | undefined,
) => {
const promise = misskeyApi(endpoint, data, token);
promiseDialog(promise, null, async (err) => {
let title = null;
let title: string | undefined;
let text = err.message + '\n' + (err as any).id;
if (err.code === 'INTERNAL_ERROR') {
title = i18n.ts.internalServerError;
@ -88,7 +86,7 @@ export const apiWithDialog = ((
export function promiseDialog<T extends Promise<any>>(
promise: T,
onSuccess?: ((res: any) => void) | null,
onFailure?: ((err: Error) => void) | null,
onFailure?: ((err: Misskey.api.APIError) => void) | null,
text?: string,
): T {
const showing = ref(true);
@ -149,8 +147,16 @@ export function claimZIndex(priority: keyof typeof zIndexes = 'low'): number {
// 使い物にならないので、代わりに ['$props'] から色々省くことで emit の型を生成する
// FIXME: 何故か *.ts ファイルからだと型がうまく取れない？ことがあるのをなんとかしたい
type ComponentEmit<T> = T extends new () => { $props: infer Props }
? EmitsExtractor<Props>
: never;
? [keyof Pick<T, Extract<keyof T, `on${string}`>>] extends [never]
? Record<string, unknown> // *.ts ファイルから型がうまく取れないとき用（これがないと {} になって型エラーがうるさい）
: EmitsExtractor<Props>
: T extends (...args: any) => any
? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
? [keyof Pick<T, Extract<keyof T, `on${string}`>>] extends [never]
? Record<string, unknown>
: EmitsExtractor<Props>
: never
: never;
type EmitsExtractor<T> = {
[K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer E}` ? Uncapitalize<E> : K extends string ? never : K]: T[K];
@ -197,12 +203,12 @@ export function toast(message: string) {
export function alert(props: {
type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
title?: string;
text?: string;
}): Promise<void> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, props, {
done: result => {
done: () => {
resolve();
},
}, 'closed');
@ -211,12 +217,12 @@ export function alert(props: {
export function confirm(props: {
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
title?: string;
text?: string;
okText?: string;
cancelText?: string;
}): Promise<{ canceled: boolean }> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
...props,
showCancelButton: true,
@ -237,13 +243,13 @@ export function actions<T extends {
danger?: boolean,
}[]>(props: {
type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
title?: string | null;
text?: string | null;
title?: string;
text?: string;
actions: T;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: T[number]['value'];
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
...props,
actions: props.actions.map(a => ({
@ -264,8 +270,8 @@ export function actions<T extends {
export function inputText(props: {
type?: 'text' | 'email' | 'password' | 'url';
title?: string | null;
text?: string | null;
title?: string;
text?: string;
placeholder?: string | null;
autocomplete?: string;
default?: string | null;
@ -274,7 +280,7 @@ export function inputText(props: {
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: string;
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
title: props.title,
text: props.text,
@ -282,7 +288,7 @@ export function inputText(props: {
type: props.type,
placeholder: props.placeholder,
autocomplete: props.autocomplete,
default: props.default,
default: props.default ?? null,
minLength: props.minLength,
maxLength: props.maxLength,
},
@ -295,15 +301,15 @@ export function inputText(props: {
}
export function inputNumber(props: {
title?: string | null;
text?: string | null;
title?: string;
text?: string;
placeholder?: string | null;
autocomplete?: string;
default?: number | null;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: number;
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
title: props.title,
text: props.text,
@ -311,7 +317,7 @@ export function inputNumber(props: {
type: 'number',
placeholder: props.placeholder,
autocomplete: props.autocomplete,
default: props.default,
default: props.default ?? null,
},
}, {
done: result => {
@ -322,25 +328,25 @@ export function inputNumber(props: {
}
export function inputDate(props: {
title?: string | null;
text?: string | null;
title?: string;
text?: string;
placeholder?: string | null;
default?: Date | null;
default?: string | null;
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: Date;
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
title: props.title,
text: props.text,
input: {
type: 'date',
placeholder: props.placeholder,
default: props.default,
default: props.default ?? null,
},
}, {
done: result => {
resolve(result ? { result: new Date(result.result), canceled: false } : { canceled: true });
resolve(result ? { result: new Date(result.result), canceled: false } : { result: undefined, canceled: true });
},
}, 'closed');
});
@ -349,7 +355,7 @@ export function inputDate(props: {
export function authenticateDialog(): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: { password: string; token: string | null; };
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkPasswordDialog, {}, {
done: result => {
resolve(result ? { canceled: false, result } : { canceled: true, result: undefined });
@ -359,33 +365,23 @@ export function authenticateDialog(): Promise<{ canceled: true; result: undefine
}
export function select<C = any>(props: {
title?: string | null;
text?: string | null;
title?: string;
text?: string;
default?: string | null;
} & ({
items: {
value: C;
text: string;
}[];
} | {
groupedItems: {
label: string;
items: {
value: C;
text: string;
}[];
}[];
})): Promise<{ canceled: true; result: undefined; } | {
}): Promise<{ canceled: true; result: undefined; } | {
canceled: false; result: C;
}> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkDialog, {
title: props.title,
text: props.text,
select: {
items: props.items,
groupedItems: props.groupedItems,
default: props.default,
default: props.default ?? null,
},
}, {
done: result => {
@ -396,13 +392,13 @@ export function select<C = any>(props: {
}
export function success(): Promise<void> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
const showing = ref(true);
window.setTimeout(() => {
showing.value = false;
}, 1000);
popup(MkWaitingDialog, {
success: true,
success: ref(true),
showing: showing,
}, {
done: () => resolve(),
@ -411,10 +407,10 @@ export function success(): Promise<void> {
}
export function waiting(): Promise<void> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
const showing = ref(true);
popup(MkWaitingDialog, {
success: false,
success: ref(false),
showing: showing,
}, {
done: () => resolve(),
@ -422,8 +418,8 @@ export function waiting(): Promise<void> {
});
}
export function form(title, form) {
return new Promise((resolve, reject) => {
export function form(title: string, form: any) {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, {
done: result => {
resolve(result);
@ -433,7 +429,7 @@ export function form(title, form) {
}
export async function selectUser(opts: { includeSelf?: boolean; localOnly?: boolean; } = {}): Promise<Misskey.entities.UserDetailed> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {
includeSelf: opts.includeSelf,
localOnly: opts.localOnly,
@ -446,7 +442,7 @@ export async function selectUser(opts: { includeSelf?: boolean; localOnly?: bool
}
export async function selectDriveFile(multiple: boolean): Promise<Misskey.entities.DriveFile[]> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
type: 'file',
multiple,
@ -461,7 +457,7 @@ export async function selectDriveFile(multiple: boolean): Promise<Misskey.entiti
}
export async function selectDriveFolder(multiple: boolean) {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
type: 'folder',
multiple,
@ -476,7 +472,7 @@ export async function selectDriveFolder(multiple: boolean) {
}
export async function pickEmoji(src: HTMLElement | null, opts) {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(MkEmojiPickerDialog, {
src,
...opts,
@ -492,7 +488,7 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
aspectRatio: number;
uploadFolder?: string | null;
}): Promise<Misskey.entities.DriveFile> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
file: image,
aspectRatio: options.aspectRatio,
@ -505,67 +501,13 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: {
});
}
type AwaitType<T> =
T extends Promise<infer U> ? U :
T extends (...args: any[]) => Promise<infer V> ? V :
T;
let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: typeof activeTextarea) {
if (openingEmojiPicker) return;
activeTextarea = initialTextarea;
const textareas = document.querySelectorAll('textarea, input');
for (const textarea of Array.from(textareas)) {
textarea.addEventListener('focus', () => {
activeTextarea = textarea;
});
}
const observer = new MutationObserver(records => {
for (const record of records) {
for (const node of Array.from(record.addedNodes).filter(node => node instanceof HTMLElement) as HTMLElement[]) {
const textareas = node.querySelectorAll('textarea, input') as NodeListOf<NonNullable<typeof activeTextarea>>;
for (const textarea of Array.from(textareas).filter(textarea => textarea.dataset.preventEmojiInsert == null)) {
if (document.activeElement === textarea) activeTextarea = textarea;
textarea.addEventListener('focus', () => {
activeTextarea = textarea;
});
}
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: false,
characterData: false,
});
openingEmojiPicker = await popup(MkEmojiPickerWindow, {
src,
...opts,
}, {
chosen: emoji => {
insertTextAtCursor(activeTextarea, emoji);
},
closed: () => {
openingEmojiPicker!.dispose();
openingEmojiPicker = null;
observer.disconnect();
},
});
}
export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement | EventTarget | null, options?: {
export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | null, options?: {
align?: string;
width?: number;
viaKeyboard?: boolean;
onClosing?: () => void;
}): Promise<void> {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
let dispose;
popup(MkPopupMenu, {
items,
@ -587,9 +529,9 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement
});
}
export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent): Promise<void> {
export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
ev.preventDefault();
return new Promise((resolve, reject) => {
return new Promise(resolve => {
let dispose;
popup(MkContextMenu, {
items,
@ -608,7 +550,7 @@ export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent)
export function post(props: Record<string, any> = {}): Promise<void> {
showMovedDialog();
return new Promise((resolve, reject) => {
return new Promise(resolve => {
// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
// Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、

4
packages/frontend/src/pages/notifications.vue
View File

@ -52,7 +52,7 @@ const directNotesPagination = {
function setFilter(ev) {
const typeItems = notificationTypes.map(t => ({
text: i18n.ts._notification._types[t],
active: includeTypes.value && includeTypes.value.includes(t),
active: (includeTypes.value && includeTypes.value.includes(t)) ?? false,
action: () => {
includeTypes.value = [t];
},
@ -63,7 +63,7 @@ function setFilter(ev) {
action: () => {
includeTypes.value = null;
},
}, { type: 'divider' }, ...typeItems] : typeItems;
}, { type: 'divider' as const }, ...typeItems] : typeItems;
os.popupMenu(items, ev.currentTarget ?? ev.target);
}

20
packages/frontend/src/ui/deck.vue
View File

@ -117,6 +117,7 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
import XDirectColumn from '@/ui/deck/direct-column.vue';
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
import { mainRouter } from '@/router/main.js';
import { MenuItem } from '@/types/menu.js';
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
@ -221,21 +222,19 @@ document.documentElement.style.scrollBehavior = 'auto';
loadDeck();
function changeProfile(ev: MouseEvent) {
const items = ref([{
let items: MenuItem[] = [{
text: deckStore.state.profile,
active: true.valueOf,
}]);
active: true,
action: () => {},
}];
getProfiles().then(profiles => {
items.value = [{
text: deckStore.state.profile,
active: true.valueOf,
}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
items.push(...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
text: k,
action: () => {
deckStore.set('profile', k);
unisonReload();
},
}))), { type: 'divider' }, {
}))), { type: 'divider' as const }, {
text: i18n.ts._deck.newProfile,
icon: 'ti ti-plus',
action: async () => {
@ -248,9 +247,10 @@ function changeProfile(ev: MouseEvent) {
deckStore.set('profile', name);
unisonReload();
},
}];
});
}).then(() => {
os.popupMenu(items, ev.currentTarget ?? ev.target);
});
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
async function deleteProfile() {