* prefer destructing props that becomes stable in vue@3.5: vuejs/rf…

…cs#502 * enable `vue.inlayHints.destructuredProps` @ .vscode/settings.json @ fe
n0099 · Sep 6, 2024 · 2567a86 · 2567a86
1 parent fec399a
commit 2567a86
Show file tree

Hide file tree

Showing 23 changed files with 79 additions and 81 deletions.
diff --git a/fe/.vscode/settings.json b/fe/.vscode/settings.json
@@ -29,6 +29,7 @@
   "typescript.inlayHints.parameterNames.enabled": "literals",
   "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
   "vue.inlayHints.missingProps": true,
+  "vue.inlayHints.destructuredProps": true,
   "vue.inlayHints.inlineHandlerLeading": true,
   "vue.inlayHints.optionsWrapper": true,
   "vue.inlayHints.vBindShorthand": true,

diff --git a/fe/src/components/OgImage/Post.vue b/fe/src/components/OgImage/Post.vue
@@ -27,23 +27,23 @@
 <script setup lang="ts">
 import type { UnwrapRef } from 'vue';
 
-const props = defineProps<{
+const { firstThread, firstPostPage } = defineProps<{
     routePath: string,
     firstPostPage?: ApiPosts['response'],
     firstPostPageForum?: ApiPosts['response']['forum'],
     firstThread?: ApiPosts['response']['threads'][number],
     currentQueryType: UnwrapRef<QueryFormDeps['currentQueryType']>
 }>();
-const firstReplyContent = computed(() => props.firstThread?.replies[0]);
+const firstReplyContent = computed(() => firstThread?.replies[0]);
 const firstSubReplyContent = computed(() => firstReplyContent.value?.subReplies[0]);
 const firstPostContentTexts = computed(() =>
     extractContentTexts((firstSubReplyContent.value ?? firstReplyContent.value)?.content));
-const getUser = computed(() => baseGetUser(props.firstPostPage?.users ?? []));
+const getUser = computed(() => baseGetUser(firstPostPage?.users ?? []));
 const firstPostAuthor = computed(() => undefinedOr(
     (firstSubReplyContent.value ?? firstReplyContent.value)?.authorUid,
     uid => getUser.value(uid)
 ));
-const firstImage = computed(() => props.firstPostPage
+const firstImage = computed(() => firstPostPage
     ?.threads.flatMap(thread =>
         thread.replies.flatMap(reply =>
             reply.content?.find(i => i.type === 3)))

diff --git a/fe/src/components/RelativeTime.vue b/fe/src/components/RelativeTime.vue
@@ -19,15 +19,15 @@
 import type { DateTime } from 'luxon';
 import _ from 'lodash';
 
-const props = defineProps<{
+const { dateTime, relativeTo } = defineProps<{
     dateTime: DateTime<true>,
     relativeTo?: DateTime<true>
 }>();
 const hydrationStore = useHydrationStore();
 const relativeTimeStore = useRelativeTimeStore();
-const dateTimeInShanghai = computed(() => setDateTimeZoneAndLocale()(props.dateTime));
+const dateTimeInShanghai = computed(() => setDateTimeZoneAndLocale()(dateTime));
 const updateTimerDep = computed(() =>
-    (props.relativeTo === undefined ? relativeTimeStore.registerTimerDep(props.dateTime).value : undefined));
+    (relativeTo === undefined ? relativeTimeStore.registerTimerDep(dateTime).value : undefined));
 const updatedTimes = ref(0);
 const rootEl = ref<HTMLElement>();
 const isVisible = ref(false);

diff --git a/fe/src/components/placeholder/Error.vue b/fe/src/components/placeholder/Error.vue
@@ -29,8 +29,8 @@
 import { FetchError } from 'ofetch';
 import _ from 'lodash';
 
-const props = defineProps<{ error: ApiErrorClass | null }>();
-responseWithError(props.error);
+const { error } = defineProps<{ error: ApiErrorClass | null }>();
+responseWithError(error);
 </script>
 
 <style scoped>

diff --git a/fe/src/components/post/Nav.vue b/fe/src/components/post/Nav.vue
@@ -49,7 +49,7 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import _ from 'lodash';
 
-const props = defineProps<{ postPages: Array<ApiPosts['response']> }>();
+const { postPages } = defineProps<{ postPages: Array<ApiPosts['response']> }>();
 const route = useRoute();
 const router = useRouter();
 const highlightPostStore = useHighlightPostStore();
@@ -130,7 +130,7 @@ const menuReplyClasses = (reply: Reply) => {
 };
 
 watchEffect(() => {
-    expandedPages.value = props.postPages.map(i => `c${i.pages.currentCursor}`);
+    expandedPages.value = postPages.map(i => `c${i.pages.currentCursor}`);
 });
 watch(viewportTopmostPost, (to, from) => {
     if (to === undefined)

diff --git a/fe/src/components/post/Page.vue b/fe/src/components/post/Page.vue
@@ -21,7 +21,7 @@
 import type { PostRenderer } from '@/pages/posts.vue';
 import type { RouteLocationRaw } from 'vue-router';
 
-const props = defineProps<{
+const { posts } = defineProps<{
     posts: ApiPosts['response'],
     renderType: PostRenderer,
     isFetching: boolean,
@@ -30,7 +30,7 @@ const props = defineProps<{
     nextPageRoute: RouteLocationRaw
 }>();
 defineEmits<{ clickNextPage: [] }>();
-usePostPageProvision().provide({ ...props.posts, currentCursor: props.posts.pages.currentCursor });
+usePostPageProvision().provide({ ...posts, currentCursor: posts.pages.currentCursor });
 </script>
 
 <style scoped>

diff --git a/fe/src/components/post/badge/Common.vue b/fe/src/components/post/badge/Common.vue
@@ -42,7 +42,7 @@ import { faArrowUpRightFromSquare, faHashtag, faLink } from '@fortawesome/free-s
 import { DateTime } from 'luxon';
 
 // https://github.com/vuejs/language-tools/issues/3267
-const props = defineProps<{
+const { post } = defineProps<{
     post: TPost,
     postIDKey: TPostIDKey,
     postTypeText: PostTypeTextOf<TPost>
@@ -65,7 +65,7 @@ const formatTime = (time: UnixTimestamp) => {
 };
 
 const tippyContent = () => `
-首次收录时间：${formatTime(props.post.createdAt)}<br>
-最后更新时间：${formatTime(props.post.updatedAt ?? props.post.createdAt)}<br>
-最后发现时间：${formatTime(props.post.lastSeenAt ?? props.post.updatedAt ?? props.post.createdAt)}`;
+首次收录时间：${formatTime(post.createdAt)}<br>
+最后更新时间：${formatTime(post.updatedAt ?? post.createdAt)}<br>
+最后发现时间：${formatTime(post.lastSeenAt ?? post.updatedAt ?? post.createdAt)}`;
 </script>
diff --git a/fe/src/components/post/badge/ThreadAuthorAndLatestReplier.vue b/fe/src/components/post/badge/ThreadAuthorAndLatestReplier.vue
@@ -43,12 +43,12 @@
 import type { LocationAsRelativeRaw } from 'vue-router';
 import _ from 'lodash';
 
-const props = defineProps<{ thread: Thread }>();
+const { thread } = defineProps<{ thread: Thread }>();
 const { getUser, renderUsername, getLatestReplier } = usePostPageProvision().inject();
 
-const authorUid = computed(() => props.thread.authorUid);
+const authorUid = computed(() => thread.authorUid);
 const authorUser = computed(() => getUser.value(authorUid.value));
-const latestReplier = computed(() => getLatestReplier.value(props.thread.latestReplierId));
+const latestReplier = computed(() => getLatestReplier.value(thread.latestReplierId));
 const latestReplierUser = computed(() => (
     _.isNil(latestReplier.value?.uid) ? undefined : getUser.value(latestReplier.value.uid)));
 

diff --git a/fe/src/components/post/badge/Time.vue b/fe/src/components/post/badge/Time.vue
@@ -7,7 +7,7 @@
         @mouseleave="() => highlightPostStore.unset()"
         :current="currentDateTime" :relativeTo="previousDateTime"
         :relativeToText="`相对于上一${postType}${timestampType}`"
-        :postType="props.postType" :timestampType="timestampType" v-bind="$attrs">
+        :postType="postType" :timestampType="timestampType" v-bind="$attrs">
         <!-- https://github.com/vuejs/language-tools/issues/4798 -->
         <FontAwesome :icon="faChevronUp" class="me-1 align-bottom" />
     </PostBadgeTimeView>
@@ -18,7 +18,7 @@
         @mouseleave="() => highlightPostStore.unset()"
         :current="currentDateTime" :relativeTo="nextDateTime"
         :relativeToText="`相对于下一${postType}${timestampType}`"
-        :postType="props.postType" :timestampType="timestampType" v-bind="$attrs">
+        :postType="postType" :timestampType="timestampType" v-bind="$attrs">
         <FontAwesome :icon="faChevronDown" class="me-1 align-bottom" />
     </PostBadgeTimeView>
     <PostBadgeTimeView
@@ -29,12 +29,12 @@
         @mouseleave="() => highlightPostStore.unset()"
         :current="currentDateTime" :relativeTo="parentDateTime"
         :relativeToText="`相对于所属${postTypeText[postTypeText.indexOf(postType) - 1]}${timestampType}`"
-        :postType="props.postType" :timestampType="timestampType" v-bind="$attrs">
+        :postType="postType" :timestampType="timestampType" v-bind="$attrs">
         <FontAwesome :icon="faAnglesUp" class="me-1 align-bottom" />
     </PostBadgeTimeView>
 </ClientOnly>
 <PostBadgeTimeView
-    :current="currentDateTime" :postType="props.postType"
+    :current="currentDateTime" :postType="postType"
     :timestampType="timestampType" class="text-end"
     :class="{ 'post-badge-time-current-full': hydrationStore.isHydratingOrSSR }" v-bind="$attrs" />
 </template>
@@ -54,7 +54,7 @@ import { faAnglesUp, faChevronDown, faChevronUp } from '@fortawesome/free-solid-
 import { DateTime } from 'luxon';
 
 defineOptions({ inheritAttrs: false });
-const props = defineProps<{
+const { previousPost, nextPost, currentPost, parentPost, postTimeKey } = defineProps<{
     previousPost?: TPost,
     nextPost?: TPost,
     currentPost: TPost,
@@ -79,12 +79,12 @@ useHead({ noscript: [{ innerHTML: noScriptStyle }] });
 // https://github.com/typescript-eslint/typescript-eslint/issues/9723
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-unnecessary-type-parameters
 const getPostTime = <T extends TPost | TParentPost>(post?: T) =>
-    post?.[props.postTimeKey as keyof T] as TPostTimeValue | undefined;
-const previousTime = computed(() => getPostTime(props.previousPost));
-const nextTime = computed(() => getPostTime(props.nextPost));
-const parentTime = computed(() => getPostTime(props.parentPost));
+    post?.[postTimeKey as keyof T] as TPostTimeValue | undefined;
+const previousTime = computed(() => getPostTime(previousPost));
+const nextTime = computed(() => getPostTime(nextPost));
+const parentTime = computed(() => getPostTime(parentPost));
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const currentTime = computed(() => getPostTime(props.currentPost)!);
+const currentTime = computed(() => getPostTime(currentPost)!);
 
 const previousDateTime = computed(() =>
     undefinedOr(previousTime.value, i => DateTime.fromSeconds(i)));

diff --git a/fe/src/components/post/badge/TimeView.vue b/fe/src/components/post/badge/TimeView.vue
@@ -13,7 +13,7 @@
         & ('postedAt' | (TPost extends Thread ? 'latestReplyPostedAt' : never))">
 import { DateTime } from 'luxon';
 
-const props = defineProps<{
+const { current, relativeTo, relativeToText, postType, timestampType } = defineProps<{
     current: DateTime<true>,
     relativeTo?: DateTime<true>,
     relativeToText?: string,
@@ -22,42 +22,42 @@ const props = defineProps<{
         : 'postedAt' extends TPostTimeKey ? '发帖时间' : never
 }>();
 const hydrationStore = useHydrationStore();
-const currentInShanghai = computed(() => setDateTimeZoneAndLocale()(props.current));
+const currentInShanghai = computed(() => setDateTimeZoneAndLocale()(current));
 const placeholderWidth = computed(() => (dateTimeLocale.value.startsWith('zh') ? '' : '2.5rem'));
 
 const tippyContentRelativeTo = computed(() => {
-    if (props.relativeTo === undefined || props.relativeToText === undefined)
+    if (relativeTo === undefined || relativeToText === undefined)
         return '';
 
-    const relativeToLocale = props.relativeTo
+    const relativeToLocale = relativeTo
         .toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
-    const currentDiffRelativeHuman = props.current
-        .diff(props.relativeTo, undefined, { conversionAccuracy: 'longterm' })
+    const currentDiffRelativeHuman = current
+        .diff(relativeTo, undefined, { conversionAccuracy: 'longterm' })
         .rescale().toHuman();
 
     return `
-        ${props.relativeToText}：<br>
+        ${relativeToText}：<br>
         <span class="user-select-all">${relativeToLocale}</span>
-        UNIX:<span class="user-select-all">${props.relativeTo.toUnixInteger()}</span><br>
+        UNIX:<span class="user-select-all">${relativeTo.toUnixInteger()}</span><br>
         相差 <span class="user-select-all">${currentDiffRelativeHuman}</span>`;
 });
 const tippyContent = () => {
     const currentText = () => {
         if (hydrationStore.isHydratingOrSSR)
             return currentInShanghai.value.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
-        const currentLocale = props.current.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
+        const currentLocale = current.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS);
 
         return tippyContentRelativeTo.value === ''
             ? `
-                UNIX:<span class="user-select-all">${props.current.toUnixInteger()}</span><br>
+                UNIX:<span class="user-select-all">${current.toUnixInteger()}</span><br>
                 <span class="user-select-all">${currentLocale}</span>`
             : `
                 <span class="user-select-all">${currentLocale}</span>
-                UNIX:<span class="user-select-all">${props.current.toUnixInteger()}</span>`;
+                UNIX:<span class="user-select-all">${current.toUnixInteger()}</span>`;
     };
 
     return `
-        本${props.postType}${props.timestampType}：<br>
+        本${postType}${timestampType}：<br>
         ${currentText()}<br>
         ${tippyContentRelativeTo.value}`;
 };

diff --git a/fe/src/components/post/badge/User.vue b/fe/src/components/post/badge/User.vue
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import _ from 'lodash';
 
-const props = defineProps<{
+const { user } = defineProps<{
     user: User,
     threadAuthorUid?: BaiduUserID,
     replyAuthorUid?: BaiduUserID
@@ -48,5 +48,5 @@ const knownModeratorTypes: { [P in ForumModeratorType]: [string, BootstrapColor]
     ...keysWithSameValue(['publication_editor', 'publication'], ['吧刊小编', 'secondary'])
 };
 const moderators = computed(() => _.pick(knownModeratorTypes,
-    props.user.currentForumModerator?.moderatorTypes.split(',') ?? []));
+    user.currentForumModerator?.moderatorTypes.split(',') ?? []));
 </script>
diff --git a/fe/src/components/post/queryForm/QueryForm.vue b/fe/src/components/post/queryForm/QueryForm.vue
@@ -193,7 +193,7 @@ import { inputTextMatchParamPlaceholder } from './widget/InputTextMatchParam.vue
 import { faFilter, faPlus, faSortAmountDown, faTimes } from '@fortawesome/free-solid-svg-icons';
 import _ from 'lodash';
 
-const props = defineProps<{
+const { queryFormDeps } = defineProps<{
     isLoading: boolean,
     queryFormDeps: QueryFormDeps
 }>();
@@ -208,7 +208,7 @@ const {
     addParam,
     changeParam,
     deleteParam
-} = props.queryFormDeps;
+} = queryFormDeps;
 
 const getPostIDParamPlaceholders = (p: Param) => ({
     IN: p.name === 'tid' ? '5000000000,5000000001,5000000002,...' : '15000000000,15000000001,15000000002,...',

diff --git a/fe/src/components/post/queryForm/widget/InputTextMatchParam.vue b/fe/src/components/post/queryForm/widget/InputTextMatchParam.vue
@@ -48,7 +48,7 @@ export const inputTextMatchParamPlaceholder = (p: KnownTextParams) =>
 <script setup lang="ts">
 import _ from 'lodash';
 
-const props = defineProps<{ paramIndex: number }>();
+const { paramIndex } = defineProps<{ paramIndex: number }>();
 // eslint-disable-next-line vue/define-emits-declaration
 defineEmits({
     'update:modelValue': (p: KnownTextParams) =>
@@ -68,9 +68,9 @@ const emitModelChange = (
     } as KnownTextParams;
 };
 const inputID = (type: 'Explicit' | 'Implicit' | 'Regex' | 'SpaceSplit') =>
-    `param${_.upperFirst(modelValue.value.name)}${type}-${props.paramIndex}`;
+    `param${_.upperFirst(modelValue.value.name)}${type}-${paramIndex}`;
 const inputName = computed(() =>
-    `param${_.upperFirst(modelValue.value.name)}-${props.paramIndex}`);
+    `param${_.upperFirst(modelValue.value.name)}-${paramIndex}`);
 </script>
 
 <style scoped>

diff --git a/fe/src/components/post/renderer/list/List.vue b/fe/src/components/post/renderer/list/List.vue
@@ -11,11 +11,11 @@
 import type { RouterScrollBehavior } from 'vue-router';
 import _ from 'lodash';
 
-const props = defineProps<{ posts: ApiPosts['response'] }>();
+const { posts } = defineProps<{ posts: ApiPosts['response'] }>();
 const nestedPosts = computed(() => {
     // https://github.com/TanStack/query/pull/6657
     // eslint-disable-next-line unicorn/prefer-structured-clone
-    const newPosts = _.cloneDeep(props.posts) as // https://github.com/microsoft/TypeScript/issues/33591
+    const newPosts = _.cloneDeep(posts) as // https://github.com/microsoft/TypeScript/issues/33591
         Modify<ApiPosts['response'], { threads: Array<ThreadWithGroupedSubReplies<SubReply>> }>;
     newPosts.threads = newPosts.threads.map(thread => {
         thread.replies = thread.replies.map(reply => {

diff --git a/fe/src/components/post/renderer/list/Reply.vue b/fe/src/components/post/renderer/list/Reply.vue
@@ -58,7 +58,7 @@ import type { TemplateRefsList } from '@vueuse/core';
 import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
 
 type ReplyWithGroupedSubReplies = ThreadWithGroupedSubReplies['replies'][number];
-const props = defineProps<{
+const { reply } = defineProps<{
     thread: ThreadWithGroupedSubReplies,
     previousReply?: ReplyWithGroupedSubReplies,
     reply: ReplyWithGroupedSubReplies,
@@ -68,7 +68,7 @@ const props = defineProps<{
 const highlightPostStore = useHighlightPostStore();
 const { getUser, currentCursor } = usePostPageProvision().inject();
 const { stickyTitleEl } = useViewportTopmostPostStore().intersectionObserver(
-    { cursor: currentCursor.value, tid: props.reply.tid, pid: props.reply.pid },
+    { cursor: currentCursor.value, tid: reply.tid, pid: reply.pid },
     replyTitleStyle().top()
 );
 </script>

diff --git a/fe/src/components/post/renderer/list/SubReply.vue b/fe/src/components/post/renderer/list/SubReply.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
+const { previousSubReplyGroup, subReplyGroup, nextSubReplyGroup } = defineProps<{
     thread: Thread,
     reply: Reply,
     previousSubReplyGroup?: SubReply[],
@@ -52,8 +52,8 @@ const props = defineProps<{
 const highlightPostStore = useHighlightPostStore();
 const { getUser, renderUsername } = usePostPageProvision().inject();
 const getSiblingSubReply = (index: number, direction: 'previous' | 'next') =>
-    props.subReplyGroup[index + (direction === 'next' ? 1 : -1)] as SubReply | undefined
-        ?? (direction === 'next' ? props.nextSubReplyGroup?.[0] : props.previousSubReplyGroup?.at(-1));
+    subReplyGroup[index + (direction === 'next' ? 1 : -1)] as SubReply | undefined
+        ?? (direction === 'next' ? nextSubReplyGroup?.[0] : previousSubReplyGroup?.at(-1));
 </script>
 
 <style scoped>

diff --git a/fe/src/components/post/renderer/list/Thread.vue b/fe/src/components/post/renderer/list/Thread.vue
@@ -71,7 +71,7 @@ import type { TemplateRefsList } from '@vueuse/core';
 import { faCommentAlt, faEye, faLocationArrow, faShareAlt, faThumbsDown, faThumbsUp } from '@fortawesome/free-solid-svg-icons';
 import { DateTime } from 'luxon';
 
-const props = defineProps<{
+const { thread } = defineProps<{
     previousThread?: ThreadWithGroupedSubReplies,
     thread: ThreadWithGroupedSubReplies,
     nextThread?: ThreadWithGroupedSubReplies,
@@ -80,7 +80,7 @@ const props = defineProps<{
 const highlightPostStore = useHighlightPostStore();
 const { currentCursor } = usePostPageProvision().inject();
 const { stickyTitleEl } = useViewportTopmostPostStore()
-    .intersectionObserver({ cursor: currentCursor.value, tid: props.thread.tid });
+    .intersectionObserver({ cursor: currentCursor.value, tid: thread.tid });
 
 // todo: fetch users info in zan.userIdList
 const zanTippyContent = (zan: NonNullable<Thread['zan']>) => () => {