From 973b5b50a950405b76696431c38418b40787ed16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Thu, 30 Apr 2026 11:29:23 +0900 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=81=BE=E3=82=8C=E3=81=AB?= =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=BB?= =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC?= =?UTF-8?q?=E3=81=8C=E5=8B=95=E4=BD=9C=E3=81=97=E3=81=AA=E3=81=8F=E3=81=AA?= =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=20(#1734?= =?UTF-8?q?9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Revert "fix(frontend): popupのりアクティビティがチャンクをまたいで切れる事がある問題を修正" This reverts commit 0a93f526dde551c9846b7b0d3596c66bbcd4d5e5. * fix: iOS PWA でリアクション・絵文字ピッカーが動作しない問題を修正 Agent-Logs-Url: https://github.com/lqvp/misskey-tempura/sessions/44526368-0e6a-4a94-8991-fcdc094d2b96 Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com> * refactor * fix --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: lqvp <183242690+lqvp@users.noreply.github.com> --- packages/frontend/src/os.ts | 48 ++------- packages/frontend/src/utility/emoji-picker.ts | 96 ++++++++++------- .../frontend/src/utility/reaction-picker.ts | 100 +++++++++++------- 3 files changed, 133 insertions(+), 111 deletions(-) diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index c56631fe3c..9d199738f6 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -5,9 +5,9 @@ // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する -import { markRaw, ref, defineAsyncComponent, nextTick, effectScope, isRef, shallowReactive, watch } from 'vue'; +import { markRaw, ref, defineAsyncComponent, nextTick } from 'vue'; import * as Misskey from 'misskey-js'; -import type { Component, MaybeRef, ShallowReactive } from 'vue'; +import type { Component, MaybeRef } from 'vue'; import type { ComponentEmit, ComponentProps as CP } from 'vue-component-type-helpers'; import type { Form, GetFormResultType } from '@/utility/form.js'; import type { MenuItem } from '@/types/menu.js'; @@ -145,7 +145,7 @@ let popupIdCount = 0; export const popups = ref<{ id: number; component: Component; - props: ShallowReactive>; + props: Record; events: Record; }[]>([]); @@ -183,32 +183,6 @@ type ComponentEmitsObject void; }>; -// ref をそのまま保持せず popup 側の reactive props に同期するようにして、スコープをまたいでリアクティビティが切れるのを防止する -function normalizePopupProps>(props: T): { - resolvedProps: ShallowReactive; - stopSync: () => void; -} { - const resolvedProps = shallowReactive({} as T) as T; // shallowReactiveの返り値はreadonlyだが、実際には書き換えるので元の型で扱う - const scope = effectScope(); - - scope.run(() => { - for (const [key, value] of Object.entries(props)) { - if (isRef(value)) { - watch(value, (resolvedValue) => { - resolvedProps[key as keyof T] = resolvedValue as T[keyof T]; - }, { immediate: true }); - } else { - resolvedProps[key as keyof T] = value; - } - } - }); - - return { - resolvedProps: resolvedProps as ShallowReactive, - stopSync: () => scope.stop(), - }; -} - // NOTE: ジェネリック型つきのコンポーネントでは、emitsの型推論がうまく働かない（型変数を取り出すことはできないため） // NOTE: emitsがOverloadToUnionで対応しているオーバーロードの数を超える場合は、OverloadToUnionの個数を増やせばOK export function popup( @@ -219,24 +193,20 @@ export function popup( markRaw(component); const id = ++popupIdCount; - const { resolvedProps, stopSync } = normalizePopupProps(props); - let disposed = false; const dispose = () => { - if (disposed) return; - disposed = true; - stopSync(); - + // このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？ nextTick(() => { popups.value = popups.value.filter(p => p.id !== id); }); }; - - popups.value.push({ + const state = { component, - props: resolvedProps, + props, events, id, - }); + }; + + popups.value.push(state); return { dispose, diff --git a/packages/frontend/src/utility/emoji-picker.ts b/packages/frontend/src/utility/emoji-picker.ts index c663776de3..2ec8bb9779 100644 --- a/packages/frontend/src/utility/emoji-picker.ts +++ b/packages/frontend/src/utility/emoji-picker.ts @@ -3,9 +3,9 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { defineAsyncComponent, ref, watch } from 'vue'; -import type { Ref } from 'vue'; -import { popup } from '@/os.js'; +import { markRaw, shallowRef, ref, watch } from 'vue'; +import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue'; +import { popup, popupAsyncWithDialog } from '@/os.js'; import { prefer } from '@/preferences.js'; /** @@ -15,53 +15,77 @@ import { prefer } from '@/preferences.js'; * 一度表示したダイアログを連続で使用できることが望ましいシーンでの利用が想定される。 */ class EmojiPicker { - private anchorElement: Ref = ref(null); - private manualShowing = ref(false); - private onChosen?: (emoji: string) => void; - private onClosed?: () => void; + private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null; + private emojisRef = ref([]); constructor() { // nop } - public async init() { - const emojisRef = ref([]); - - watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => { - emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? []; - }, { - immediate: true, + public init() { + // コンポーネントをプリロードしてキャッシュしておく。 + // iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、 + // show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。 + import('@/components/MkEmojiPickerDialog.vue').then(m => { + this.loadedComponent = markRaw(m.default); + }).catch(err => { + console.error('[EmojiPicker] Failed to preload MkEmojiPickerDialog:', err); }); - await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { - anchorElement: this.anchorElement, - pinnedEmojis: emojisRef, - asReactionPicker: false, - manualShowing: this.manualShowing, - choseAndClose: false, + watch([prefer.r.emojiPaletteForMain, prefer.r.emojiPalettes], () => { + this.emojisRef.value = prefer.s.emojiPaletteForMain == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForMain)?.emojis ?? []; }, { - done: emoji => { - if (this.onChosen) this.onChosen(emoji); - }, - close: () => { - this.manualShowing.value = false; - }, - closed: () => { - this.anchorElement.value = null; - if (this.onClosed) this.onClosed(); - }, + immediate: true, }); } public show( anchorElement: HTMLElement, - onChosen?: EmojiPicker['onChosen'], - onClosed?: EmojiPicker['onClosed'], + onChosen?: (emoji: string) => void, + onClosed?: () => void, ) { - this.anchorElement.value = anchorElement; - this.manualShowing.value = true; - this.onChosen = onChosen; - this.onClosed = onClosed; + const anchorRef = shallowRef(anchorElement); + + if (this.loadedComponent) { + // コンポーネント解決済みのため同期的に popup() できる。 + // ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。 + const { dispose } = popup(this.loadedComponent, { + anchorElement: anchorRef, + pinnedEmojis: this.emojisRef, + asReactionPicker: false, + choseAndClose: false, + }, { + done: (emoji: string) => { + if (onChosen) onChosen(emoji); + }, + closed: () => { + if (onClosed) onClosed(); + dispose(); + }, + }); + } else { + // フォールバック: 初回タップがプリロード完了前 + popupAsyncWithDialog( + import('@/components/MkEmojiPickerDialog.vue').then(m => { + this.loadedComponent = markRaw(m.default); + return this.loadedComponent; + }), + { + anchorElement: anchorRef, + pinnedEmojis: this.emojisRef, + asReactionPicker: false, + choseAndClose: false, + }, + { + done: (emoji: string) => { + if (onChosen) onChosen(emoji); + }, + closed: () => { + if (onClosed) onClosed(); + }, + }, + ); + } } } diff --git a/packages/frontend/src/utility/reaction-picker.ts b/packages/frontend/src/utility/reaction-picker.ts index e33346101d..49114664cf 100644 --- a/packages/frontend/src/utility/reaction-picker.ts +++ b/packages/frontend/src/utility/reaction-picker.ts @@ -4,57 +4,85 @@ */ import * as Misskey from 'misskey-js'; -import { defineAsyncComponent, ref, watch } from 'vue'; -import type { Ref } from 'vue'; -import { popup } from '@/os.js'; +import { markRaw, shallowRef, ref, watch } from 'vue'; +import type MkEmojiPickerDialog__TypeReferenceOnly from '@/components/MkEmojiPickerDialog.vue'; +import { popup, popupAsyncWithDialog } from '@/os.js'; import { prefer } from '@/preferences.js'; class ReactionPicker { - private anchorElement: Ref = ref(null); - private manualShowing = ref(false); - private targetNote: Ref = ref(null); - private onChosen?: (reaction: string) => void; - private onClosed?: () => void; + private loadedComponent: typeof MkEmojiPickerDialog__TypeReferenceOnly | null = null; + private reactionsRef = ref([]); constructor() { // nop } - public async init() { - const reactionsRef = ref([]); + public init() { + // コンポーネントをプリロードしてキャッシュしておく。 + // iOS PWA では await を挟むとユーザーアクティベーションが失われfocusが効かなくなるため、 + // show() 呼び出し時には同期的に popup() できるよう事前にコンポーネントを解決しておく。 + import('@/components/MkEmojiPickerDialog.vue').then(m => { + this.loadedComponent = markRaw(m.default); + }).catch(err => { + console.error('[ReactionPicker] Failed to preload MkEmojiPickerDialog:', err); + }); watch([prefer.r.emojiPaletteForReaction, prefer.r.emojiPalettes], () => { - reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? []; + this.reactionsRef.value = prefer.s.emojiPaletteForReaction == null ? prefer.s.emojiPalettes[0].emojis : prefer.s.emojiPalettes.find(palette => palette.id === prefer.s.emojiPaletteForReaction)?.emojis ?? []; }, { immediate: true, }); - - await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { - anchorElement: this.anchorElement, - pinnedEmojis: reactionsRef, - asReactionPicker: true, - targetNote: this.targetNote, - manualShowing: this.manualShowing, - }, { - done: reaction => { - if (this.onChosen) this.onChosen(reaction); - }, - close: () => { - this.manualShowing.value = false; - }, - closed: () => { - this.anchorElement.value = null; - if (this.onClosed) this.onClosed(); - }, - }); } - public show(anchorElement: HTMLElement | null, targetNote: Misskey.entities.Note | null, onChosen?: ReactionPicker['onChosen'], onClosed?: ReactionPicker['onClosed']) { - this.anchorElement.value = anchorElement; - this.targetNote.value = targetNote; - this.manualShowing.value = true; - this.onChosen = onChosen; - this.onClosed = onClosed; + public show( + anchorElement: HTMLElement | null, + targetNote: Misskey.entities.Note | null, + onChosen?: (reaction: string) => void, + onClosed?: () => void, + ) { + const anchorRef = shallowRef(anchorElement); + const targetNoteRef = ref(targetNote); + + if (this.loadedComponent) { + // 通常パス: コンポーネント解決済みのため同期的に popup() できる。 + // ユーザーアクティベーションコンテキストが維持されiOSでもfocusが機能する。 + const { dispose } = popup(this.loadedComponent, { + anchorElement: anchorRef, + pinnedEmojis: this.reactionsRef, + asReactionPicker: true, + targetNote: targetNoteRef, + }, { + done: (reaction: string) => { + if (onChosen) onChosen(reaction); + }, + closed: () => { + if (onClosed) onClosed(); + dispose(); + }, + }); + } else { + // フォールバック: 初回タップがプリロード完了前 + popupAsyncWithDialog( + import('@/components/MkEmojiPickerDialog.vue').then(m => { + this.loadedComponent = markRaw(m.default); + return this.loadedComponent; + }), + { + anchorElement: anchorRef, + pinnedEmojis: this.reactionsRef, + asReactionPicker: true, + targetNote: targetNoteRef, + }, + { + done: (reaction: string) => { + if (onChosen) onChosen(reaction); + }, + closed: () => { + if (onClosed) onClosed(); + }, + }, + ); + } } }