* 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']>) => () => {