diff options
Diffstat (limited to 'packages/frontend-embed')
17 files changed, 57 insertions, 72 deletions
diff --git a/packages/frontend-embed/eslint.config.js b/packages/frontend-embed/eslint.config.js index e686da9cc3..fbe91f3660 100644 --- a/packages/frontend-embed/eslint.config.js +++ b/packages/frontend-embed/eslint.config.js @@ -52,6 +52,7 @@ export default [ '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true, }], + 'import/consistent-type-specifier-style': ['error', 'prefer-top-level'], // window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため // e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため 'id-denylist': ['error', 'window', 'e'], diff --git a/packages/frontend-embed/package.json b/packages/frontend-embed/package.json index 2ee60eaad8..40e8802ab4 100644 --- a/packages/frontend-embed/package.json +++ b/packages/frontend-embed/package.json @@ -13,59 +13,58 @@ "@discordapp/twemoji": "15.1.0", "@phosphor-icons/web": "^2.0.3", "@rollup/plugin-json": "6.1.0", - "@rollup/plugin-replace": "5.0.7", - "@rollup/pluginutils": "5.1.3", + "@rollup/plugin-replace": "6.0.2", + "@rollup/pluginutils": "5.1.4", "@transfem-org/sfm-js": "0.24.5", "@twemoji/parser": "15.1.1", - "@vitejs/plugin-vue": "5.2.0", - "@vue/compiler-sfc": "3.5.12", + "@vitejs/plugin-vue": "5.2.3", + "@vue/compiler-sfc": "3.5.13", "astring": "1.9.0", "buraha": "0.0.1", "estree-walker": "3.0.3", - "misskey-js": "workspace:*", "frontend-shared": "workspace:*", + "json5": "2.2.3", + "misskey-js": "workspace:*", "punycode.js": "2.3.1", - "rollup": "4.26.0", - "sass": "1.79.4", - "shiki": "1.22.2", + "rollup": "4.39.0", + "sass": "1.86.3", + "shiki": "3.2.2", "tinycolor2": "1.6.0", - "tsc-alias": "1.8.10", + "tsc-alias": "1.8.15", "tsconfig-paths": "4.2.0", - "typescript": "5.6.3", - "uuid": "10.0.0", - "json5": "2.2.3", - "vite": "5.4.11", - "vue": "3.5.12" + "typescript": "5.8.3", + "uuid": "11.1.0", + "vite": "6.3.1", + "vue": "3.5.13" }, "devDependencies": { - "@transfem-org/summaly": "5.2.1", + "@misskey-dev/summaly": "5.2.1", "@testing-library/vue": "8.1.0", - "@types/estree": "1.0.6", + "@types/estree": "1.0.7", "@types/micromatch": "4.0.9", - "@types/node": "22.9.0", + "@types/node": "22.14.0", "@types/punycode.js": "npm:@types/punycode@2.1.4", "@types/tinycolor2": "1.4.6", - "@types/uuid": "10.0.0", - "@types/ws": "8.5.13", - "@typescript-eslint/eslint-plugin": "7.17.0", - "@typescript-eslint/parser": "7.17.0", - "@vitest/coverage-v8": "1.6.0", - "@vue/runtime-core": "3.5.12", - "acorn": "8.14.0", + "@types/ws": "8.18.1", + "@typescript-eslint/eslint-plugin": "8.29.1", + "@typescript-eslint/parser": "8.29.1", + "@vitest/coverage-v8": "3.1.1", + "@vue/runtime-core": "3.5.13", + "acorn": "8.14.1", "cross-env": "7.0.3", "eslint-plugin-import": "2.31.0", - "eslint-plugin-vue": "9.31.0", - "fast-glob": "3.3.2", - "happy-dom": "10.0.3", + "eslint-plugin-vue": "10.0.0", + "fast-glob": "3.3.3", + "happy-dom": "17.4.4", "intersection-observer": "0.12.2", "micromatch": "4.0.8", - "msw": "2.6.4", - "nodemon": "3.1.7", - "prettier": "3.3.3", - "start-server-and-test": "2.0.8", + "msw": "2.7.3", + "nodemon": "3.1.9", + "prettier": "3.5.3", + "start-server-and-test": "2.0.11", "vite-plugin-turbosnap": "1.0.3", - "vue-component-type-helpers": "2.1.10", - "vue-eslint-parser": "9.4.3", - "vue-tsc": "2.1.10" + "vue-component-type-helpers": "2.2.8", + "vue-eslint-parser": "10.1.3", + "vue-tsc": "2.2.8" } } diff --git a/packages/frontend-embed/src/components/EmImgWithBlurhash.vue b/packages/frontend-embed/src/components/EmImgWithBlurhash.vue index bf976c71ae..0bff048ce4 100644 --- a/packages/frontend-embed/src/components/EmImgWithBlurhash.vue +++ b/packages/frontend-embed/src/components/EmImgWithBlurhash.vue @@ -33,13 +33,11 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol Math.min(navigator.hardwareConcurrency - 1, 4), ); resolve(workers); - if (_DEV_) console.log('WebGL2 in worker is supported!'); } else { const canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 64; resolve(canvas); - if (_DEV_) console.log('WebGL2 in worker is not supported...'); } testWorker.terminate(); }); diff --git a/packages/frontend-embed/src/components/EmMediaImage.vue b/packages/frontend-embed/src/components/EmMediaImage.vue index 3bdf702b01..e9126d4665 100644 --- a/packages/frontend-embed/src/components/EmMediaImage.vue +++ b/packages/frontend-embed/src/components/EmMediaImage.vue @@ -95,7 +95,7 @@ async function onclick(ev: MouseEvent) { position: absolute; border-radius: 6px; background-color: var(--MI_THEME-fg); - color: var(--MI_THEME-accentLighten); + color: hsl(from var(--MI_THEME-accent) h s calc(l + 10)); font-size: 12px; opacity: .5; padding: 5px 8px; @@ -153,7 +153,7 @@ html[data-color-scheme=light] .visible { /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ background-color: black; border-radius: 6px; - color: var(--MI_THEME-accentLighten); + color: hsl(from var(--MI_THEME-accent) h s calc(l + 10)); display: inline-block; font-weight: bold; font-size: 0.8em; diff --git a/packages/frontend-embed/src/components/EmMfm.ts b/packages/frontend-embed/src/components/EmMfm.ts index 40189133d2..d377d492e0 100644 --- a/packages/frontend-embed/src/components/EmMfm.ts +++ b/packages/frontend-embed/src/components/EmMfm.ts @@ -3,7 +3,8 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { VNode, h, SetupContext, provide } from 'vue'; +import { h, provide } from 'vue'; +import type { VNode, SetupContext } from 'vue'; import * as mfm from '@transfem-org/sfm-js'; import * as Misskey from 'misskey-js'; import { host } from '@@/js/config.js'; diff --git a/packages/frontend-embed/src/components/EmNote.vue b/packages/frontend-embed/src/components/EmNote.vue index bf96c557ea..666cbde72d 100644 --- a/packages/frontend-embed/src/components/EmNote.vue +++ b/packages/frontend-embed/src/components/EmNote.vue @@ -155,7 +155,6 @@ const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value const isLong = shouldCollapsed(appearNote.value, []); const collapsed = ref(appearNote.value.cw == null && isLong); const isDeleted = ref(false); - const mergedCW = computed(() => computeMergedCw(appearNote.value)); </script> diff --git a/packages/frontend-embed/src/components/EmNoteDetailed.vue b/packages/frontend-embed/src/components/EmNoteDetailed.vue index 0961b36e35..9f4be8c666 100644 --- a/packages/frontend-embed/src/components/EmNoteDetailed.vue +++ b/packages/frontend-embed/src/components/EmNoteDetailed.vue @@ -176,7 +176,6 @@ const isDeleted = ref(false); const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null; const isLong = shouldCollapsed(appearNote.value, []); const collapsed = ref(appearNote.value.cw == null && isLong); - const mergedCW = computed(() => computeMergedCw(appearNote.value)); </script> diff --git a/packages/frontend-embed/src/components/EmNoteSimple.vue b/packages/frontend-embed/src/components/EmNoteSimple.vue index 688758edb6..a1dee733c7 100644 --- a/packages/frontend-embed/src/components/EmNoteSimple.vue +++ b/packages/frontend-embed/src/components/EmNoteSimple.vue @@ -36,7 +36,6 @@ const props = defineProps<{ }>(); const showContent = ref(false); - const mergedCW = computed(() => computeMergedCw(props.note)); </script> diff --git a/packages/frontend-embed/src/components/EmNoteSub.vue b/packages/frontend-embed/src/components/EmNoteSub.vue index 629f0bffcd..931e1e2d79 100644 --- a/packages/frontend-embed/src/components/EmNoteSub.vue +++ b/packages/frontend-embed/src/components/EmNoteSub.vue @@ -55,7 +55,6 @@ const props = withDefaults(defineProps<{ const showContent = ref(false); const replies = ref<Misskey.entities.Note[]>([]); - const mergedCW = computed(() => computeMergedCw(props.note)); if (props.detail) { diff --git a/packages/frontend-embed/src/components/EmNotes.vue b/packages/frontend-embed/src/components/EmNotes.vue index 4e0ae005df..962a982fb7 100644 --- a/packages/frontend-embed/src/components/EmNotes.vue +++ b/packages/frontend-embed/src/components/EmNotes.vue @@ -22,7 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { useTemplateRef } from 'vue'; import EmNote from '@/components/EmNote.vue'; -import EmPagination, { Paging } from '@/components/EmPagination.vue'; +import EmPagination from '@/components/EmPagination.vue'; +import type { Paging } from '@/components/EmPagination.vue'; import { i18n } from '@/i18n.js'; import * as Misskey from 'misskey-js'; diff --git a/packages/frontend-embed/src/components/EmPagination.vue b/packages/frontend-embed/src/components/EmPagination.vue index 5d5317a912..94a91305f4 100644 --- a/packages/frontend-embed/src/components/EmPagination.vue +++ b/packages/frontend-embed/src/components/EmPagination.vue @@ -34,10 +34,11 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts"> -import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, shallowRef, watch } from 'vue'; +import { computed, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, shallowRef, watch } from 'vue'; import * as Misskey from 'misskey-js'; import { useDocumentVisibility } from '@@/js/use-document-visibility.js'; -import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@@/js/scroll.js'; +import { onScrollTop, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scrollInContainer, isTailVisible, isHeadVisible } from '@@/js/scroll.js'; +import type { ComputedRef } from 'vue'; import { misskeyApi } from '@/misskey-api.js'; import { i18n } from '@/i18n.js'; @@ -62,8 +63,6 @@ export type Paging<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoints> reversed?: boolean; offsetMode?: boolean; - - pageEl?: HTMLElement; }; type MisskeyEntity = { @@ -135,8 +134,7 @@ const isBackTop = ref(false); const empty = computed(() => items.value.size === 0); const error = ref(false); -const contentEl = computed(() => props.pagination.pageEl ?? rootEl.value); -const scrollableElement = computed(() => contentEl.value ? getScrollContainer(contentEl.value) : document.body); +const scrollableElement = computed(() => rootEl.value ? getScrollContainer(rootEl.value) : document.body); const visibility = useDocumentVisibility(); @@ -167,11 +165,11 @@ watch(rootEl, () => { }); }); -watch([backed, contentEl], () => { +watch([backed, rootEl], () => { if (!backed.value) { - if (!contentEl.value) return; + if (!rootEl.value) return; - scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); + scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(rootEl.value, executeQueue, TOLERANCE); } else { if (scrollRemove.value) scrollRemove.value(); scrollRemove.value = null; @@ -254,7 +252,7 @@ const fetchMore = async (): Promise<void> => { return nextTick(() => { if (scrollableElement.value) { - scroll(scrollableElement.value, { top: oldScroll + (scrollableElement.value.scrollHeight - oldHeight), behavior: 'instant' }); + scrollInContainer(scrollableElement.value, { top: oldScroll + (scrollableElement.value.scrollHeight - oldHeight), behavior: 'instant' }); } else { window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' }); } @@ -344,7 +342,7 @@ const appearFetchMoreAhead = async (): Promise<void> => { fetchMoreAppearTimeout(); }; -const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl.value!, TOLERANCE); +const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isTailVisible : isHeadVisible)(rootEl.value!, TOLERANCE); watch(visibility, () => { if (visibility.value === 'hidden') { @@ -442,7 +440,7 @@ onDeactivated(() => { }); function toBottom() { - scrollToBottom(contentEl.value!); + scrollToBottom(rootEl.value!); } onBeforeMount(() => { diff --git a/packages/frontend-embed/src/components/EmReactionsViewer.vue b/packages/frontend-embed/src/components/EmReactionsViewer.vue index 014dd1c935..f5aa6bdc3f 100644 --- a/packages/frontend-embed/src/components/EmReactionsViewer.vue +++ b/packages/frontend-embed/src/components/EmReactionsViewer.vue @@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import * as Misskey from 'misskey-js'; -import { inject, watch, ref } from 'vue'; +import { watch, ref } from 'vue'; import XReaction from '@/components/EmReactionsViewer.reaction.vue'; const props = withDefaults(defineProps<{ @@ -22,12 +22,6 @@ const props = withDefaults(defineProps<{ maxNumber: Infinity, }); -const mock = inject<boolean>('mock', false); - -const emit = defineEmits<{ - (ev: 'mockUpdateMyReaction', emoji: string, delta: number): void; -}>(); - const initialReactions = new Set(Object.keys(props.note.reactions)); const reactions = ref<[string, number][]>([]); @@ -38,12 +32,8 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m } function onMockToggleReaction(emoji: string, count: number) { - if (!mock) return; - const i = reactions.value.findIndex((item) => item[0] === emoji); if (i < 0) return; - - emit('mockUpdateMyReaction', emoji, (count - reactions.value[i][1])); } watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => { diff --git a/packages/frontend-embed/src/pages/not-found.vue b/packages/frontend-embed/src/pages/not-found.vue index bbb03b4e64..061254a39a 100644 --- a/packages/frontend-embed/src/pages/not-found.vue +++ b/packages/frontend-embed/src/pages/not-found.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div> <div class="_fullinfo"> - <img :src="notFoundImageUrl" class="_ghost"/> + <img :src="notFoundImageUrl" draggable="false"/> <div>{{ i18n.ts.notFoundDescription }}</div> </div> </div> @@ -20,5 +20,5 @@ import { i18n } from '@/i18n.js'; const serverMetadata = inject(DI.serverMetadata)!; -const notFoundImageUrl = computed(() => serverMetadata?.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL); +const notFoundImageUrl = computed(() => serverMetadata.notFoundImageUrl ?? DEFAULT_NOT_FOUND_IMAGE_URL); </script> diff --git a/packages/frontend-embed/src/pages/note.vue b/packages/frontend-embed/src/pages/note.vue index e879430286..4e0ea9c145 100644 --- a/packages/frontend-embed/src/pages/note.vue +++ b/packages/frontend-embed/src/pages/note.vue @@ -17,7 +17,7 @@ import EmNoteDetailed from '@/components/EmNoteDetailed.vue'; import XNotFound from '@/pages/not-found.vue'; import { DI } from '@/di.js'; import { misskeyApi } from '@/misskey-api.js'; -import { assertServerContext } from '@/server-context'; +import { assertServerContext } from '@/server-context.js'; const props = defineProps<{ noteId: string; diff --git a/packages/frontend-embed/src/post-message.ts b/packages/frontend-embed/src/post-message.ts index fd8eb8a5d2..93b57c380b 100644 --- a/packages/frontend-embed/src/post-message.ts +++ b/packages/frontend-embed/src/post-message.ts @@ -21,7 +21,7 @@ export type MiPostMessageEvent<T extends PostMessageEventType = PostMessageEvent type: T; iframeId?: string; payload?: PostMessageEventPayload[T]; -} +}; let defaultIframeId: string | null = null; diff --git a/packages/frontend-embed/src/style.scss b/packages/frontend-embed/src/style.scss index 6097281c37..ba3238cd4c 100644 --- a/packages/frontend-embed/src/style.scss +++ b/packages/frontend-embed/src/style.scss @@ -278,7 +278,7 @@ rt { } ._acrylic { - background: var(--MI_THEME-acrylicPanel); + background: color(from var(--MI_THEME-panel) srgb r g b / 0.5); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); } diff --git a/packages/frontend-embed/tsconfig.json b/packages/frontend-embed/tsconfig.json index ff04a689bf..e0ee08188d 100644 --- a/packages/frontend-embed/tsconfig.json +++ b/packages/frontend-embed/tsconfig.json @@ -21,6 +21,7 @@ "allowSyntheticDefaultImports": true, "isolatedModules": true, "useDefineForClassFields": true, + "verbatimModuleSyntax": true, "skipLibCheck": true, "baseUrl": ".", "paths": { |