@waline/client 2.13.0 → 2.14.0

package/src/api/recentComment.ts

@@ -1,21 +1,36 @@
-import { errorCheck } from './utils';
+import type { BaseAPIOptions } from './utils';
 import type { WalineComment } from '../typings';
 
-export interface FetchRecentCommentOptions {
-  serverURL: string;
-  lang: string;
+export interface GetRecentCommentOptions extends BaseAPIOptions {
+  /**
+   * 获取评论的数量
+   *
+   * Comment number to be fetched
+   */
   count: number;
-  signal: AbortSignal;
+
+  /**
+   * 取消请求的信号
+   *
+   * AbortSignal to cancel request
+   */
+  signal?: AbortSignal;
+
+  /**
+   * 用户令牌
+   *
+   * User token
+   */
   token?: string;
 }
 
-export const fetchRecentComment = ({
+export const getRecentComment = ({
   serverURL,
   lang,
   count,
   signal,
   token,
-}: FetchRecentCommentOptions): Promise<WalineComment[]> => {
+}: GetRecentCommentOptions): Promise<WalineComment[]> => {
   const headers: Record<string, string> = {};
 
   if (token) headers.Authorization = `Bearer ${token}`;
@@ -23,7 +38,5 @@ export const fetchRecentComment = ({
   return fetch(`${serverURL}/comment?type=recent&count=${count}&lang=${lang}`, {
     signal,
     headers,
-  })
-    .then((resp) => resp.json() as Promise<WalineComment[]>)
-    .then((data) => errorCheck(data, 'recent comment'));
+  }).then((resp) => <Promise<WalineComment[]>>resp.json());
 };

package/src/api/user.ts

@@ -1,11 +1,21 @@
-import { WalineComment } from '../typings';
-import { errorCheck } from './utils';
+import { errorCheck, ErrorStatusResponse } from './utils';
+import type { BaseAPIOptions } from './utils';
+import type { WalineComment } from '../typings';
 
-export interface FetchUserListOptions {
-  serverURL: string;
+export interface GetUserListOptions extends BaseAPIOptions {
+  /**
+   * 每页个数
+   *
+   * Number per page
+   */
   pageSize: number;
-  signal: AbortSignal;
-  lang: string;
+
+  /**
+   * 取消请求的信号
+   *
+   * AbortSignal to cancel request
+   */
+  signal?: AbortSignal;
 }
 
 export interface WalineUser
@@ -13,23 +23,19 @@ export interface WalineUser
   count: number;
 }
 
-export const fetchUserList = ({
+export interface GetUserListResponse extends ErrorStatusResponse {
+  data: WalineUser[];
+}
+
+export const getUserList = ({
   serverURL,
   signal,
   pageSize,
   lang,
-}: FetchUserListOptions): Promise<WalineUser[]> => {
-  return fetch(`${serverURL}/user?pageSize=${pageSize}&lang=${lang}`, {
+}: GetUserListOptions): Promise<WalineUser[]> =>
+  fetch(`${serverURL}/user?pageSize=${pageSize}&lang=${lang}`, {
     signal,
   })
-    .then(
-      (resp) =>
-        resp.json() as Promise<{
-          errno: number;
-          message: string;
-          data: WalineUser[];
-        }>
-    )
+    .then((resp) => <Promise<GetUserListResponse>>resp.json())
     .then((resp) => errorCheck(resp, 'user list'))
     .then((resp) => resp.data);
-};

package/src/api/utils.ts

@@ -1,5 +1,32 @@
-export interface FetchErrorData {
+export interface BaseAPIOptions {
+  /**
+   * Waline 服务端地址
+   *
+   * Waline serverURL
+   */
+  serverURL: string;
+
+  /**
+   * 错误信息所使用的语言
+   *
+   * Language used in error text
+   */
+  lang: string;
+}
+
+export interface ErrorStatusResponse {
+  /**
+   * 错误代码
+   *
+   * Error number
+   */
   errno: number;
+
+  /**
+   * 错误消息
+   *
+   * Error msg
+   */
   errmsg: string;
 }
 
@@ -8,16 +35,12 @@ export const JSON_HEADERS: Record<string, string> = {
   'Content-Type': 'application/json',
 };
 
-export const errorCheck = <T = unknown>(
-  data: T | FetchErrorData,
+export const errorCheck = <T extends ErrorStatusResponse>(
+  data: T,
   name = ''
 ): T => {
-  if (typeof data === 'object' && (data as FetchErrorData).errno)
-    throw new TypeError(
-      `Fetch ${name} failed with ${(data as FetchErrorData).errno}: ${
-        (data as FetchErrorData).errmsg
-      }`
-    );
+  if (typeof data === 'object' && data.errno)
+    throw new TypeError(`${name} failed with ${data.errno}: ${data.errmsg}`);
 
-  return data as T;
+  return data;
 };

package/src/comment.ts

@@ -13,7 +13,7 @@ export interface WalineCommentCountOptions {
   /**
    * 评论数 CSS 选择器
    *
-   * Commment count CSS selector
+   * Comment count CSS selector
    *
    * @default '.waline-comment-count'
    */

package/src/compact/convert.ts

@@ -44,7 +44,7 @@ export const covertOptions = (
     ...more
   } = options;
 
-  // error with those which can no longr be handled
+  // error with those which can no longer be handled
   DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED.filter((item) =>
     Object.keys(options).includes(item)
   ).forEach((item) =>

package/src/components/ArticleReaction.vue

@@ -27,8 +27,9 @@ import {
   onMounted,
   onUnmounted,
   ref,
+  watch,
 } from 'vue';
-import { fetchArticleCounter, updateArticleCounter } from '../api';
+import { getArticleCounter, updateArticleCounter } from '../api';
 import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
 import type { WalineConfig } from '../utils';
 import type { WalineLocale } from '../typings';
@@ -70,7 +71,7 @@ export default defineComponent({
       if (reaction.length) {
         const controller = new AbortController();
 
-        fetchArticleCounter({
+        getArticleCounter({
           serverURL,
           lang,
           paths: [path],
@@ -128,7 +129,15 @@ export default defineComponent({
         voteStorage.value = voteStorage.value.slice(-50);
     };
 
-    onMounted(() => fetchCounter());
+    onMounted(() => {
+      watch(
+        () => [config.value.serverURL, config.value.path],
+        () => {
+          fetchCounter();
+        },
+        { immediate: true }
+      );
+    });
     onUnmounted(() => abort?.());
 
     return {

package/src/components/CommentBox.vue

@@ -94,7 +94,7 @@
             v-show="emoji.tabs.length"
             ref="emojiButtonRef"
             class="wl-action"
-            :class="{ actived: showEmoji }"
+            :class="{ active: showEmoji }"
             :title="locale.emoji"
             @click="showEmoji = !showEmoji"
           >
@@ -105,7 +105,7 @@
             v-if="config.search"
             ref="gifButtonRef"
             class="wl-action"
-            :class="{ actived: showGif }"
+            :class="{ active: showGif }"
             :title="locale.gif"
             @click="showGif = !showGif"
           >
@@ -132,7 +132,7 @@
 
           <button
             class="wl-action"
-            :class="{ actived: showPreview }"
+            :class="{ active: showPreview }"
             :title="locale.preview"
             @click="showPreview = !showPreview"
           >
@@ -287,7 +287,7 @@ import {
   GifIcon,
 } from './Icons';
 import ImageWall from './ImageWall.vue';
-import { login, postComment } from '../api';
+import { addComment, login, updateComment } from '../api';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
   getEmojis,
@@ -526,18 +526,21 @@ export default defineComponent({
         comment.pid = props.replyId;
         comment.rid = props.rootId;
         comment.at = props.replyUser;
-      } else if (props.edit) {
-        comment.eid = props.edit.objectId;
       }
 
       isSubmitting.value = true;
 
-      postComment({
+      const options = {
         serverURL,
         lang,
         token: userInfo.value?.token,
         comment,
-      })
+      };
+
+      (props.edit
+        ? updateComment({ objectId: props.edit.objectId, ...options })
+        : addComment(options)
+      )
         .then((resp) => {
           isSubmitting.value = false;
 
@@ -590,8 +593,12 @@ export default defineComponent({
       const height = 800;
       const left = (window.innerWidth - width) / 2;
       const top = (window.innerHeight - height) / 2;
+      const query = new URLSearchParams({
+        lng: lang,
+        token: userInfo.value!.token,
+      });
       const handler = window.open(
-        `${serverURL}/ui/profile?lng=${encodeURIComponent(lang)}`,
+        `${serverURL}/ui/profile?${query.toString()}`,
         '_blank',
         `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
       );
@@ -668,25 +675,8 @@ export default defineComponent({
       { immediate: true }
     );
 
-    watch(showGif, async (showGif) => {
-      if (!showGif) return;
-
-      const searchOptions = config.value.search as WalineSearchOptions;
-
-      // clear input
-      if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
-
-      searchResults.loading = true;
-
-      searchResults.list = searchOptions.default
-        ? await searchOptions.default()
-        : await searchOptions.search('');
-
-      searchResults.loading = false;
-    });
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onMessageRecive = ({ data }: any): void => {
+    const onMessageReceive = ({ data }: any): void => {
       if (!data || data.type !== 'profile') return;
 
       userInfo.value = { ...userInfo.value, ...data.data };
@@ -700,11 +690,29 @@ export default defineComponent({
 
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
-      window.addEventListener('message', onMessageRecive);
+      window.addEventListener('message', onMessageReceive);
       if (props.edit?.objectId) {
         editor.value = props.edit.orig;
       }
 
+      // watch gif
+      watch(showGif, async (showGif) => {
+        if (!showGif) return;
+
+        const searchOptions = config.value.search as WalineSearchOptions;
+
+        // clear input
+        if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+        searchResults.loading = true;
+
+        searchResults.list = searchOptions.default
+          ? await searchOptions.default()
+          : await searchOptions.search('');
+
+        searchResults.loading = false;
+      });
+
       // watch editor
       watch(
         () => editor.value,
@@ -740,7 +748,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       document.body.removeEventListener('click', popupHandler);
-      window.removeEventListener('message', onMessageRecive);
+      window.removeEventListener('message', onMessageReceive);
     });
 
     return {

package/src/components/ImageWall.vue

@@ -133,27 +133,27 @@ export default defineComponent({
       window.scrollTo({ top: scrollY });
     };
 
-    const imageLoad = (e: Event) => {
+    const imageLoad = (e: Event): void => {
       state.value[(e.target as HTMLImageElement).src] = true;
     };
 
-    watch(
-      () => [props.items],
-      () => {
-        state.value = {};
-        redraw(true);
-      }
-    );
-    watch(
-      () => [props.columnWidth, props.gap],
-      () => redraw()
-    );
-
     onMounted(() => {
       redraw(true);
-      resizeObserver = new ResizeObserver(() => redraw());
 
+      resizeObserver = new ResizeObserver(() => redraw());
       resizeObserver.observe(wall.value!);
+
+      watch(
+        () => [props.items],
+        () => {
+          state.value = {};
+          redraw(true);
+        }
+      );
+      watch(
+        () => [props.columnWidth, props.gap],
+        () => redraw()
+      );
     });
 
     onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));

package/src/components/Waline.vue

@@ -9,12 +9,12 @@
       </div>
       <ul class="wl-sort">
         <li
-          v-for="item in sortByItems"
-          :key="item.key"
-          :class="[item.key === sortBy ? 'active' : '']"
-          @click="onSortByChange(item.key)"
+          v-for="item in sortingMethods"
+          :key="item"
+          :class="[item === commentSorting ? 'active' : '']"
+          @click="onSortByChange(item)"
         >
-          {{ i18n[item.name] }}
+          {{ i18n[item] }}
         </li>
       </ul>
     </div>
@@ -81,26 +81,31 @@
 
 <script lang="ts">
 import { useStyleTag } from '@vueuse/core';
-import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+} from 'vue';
 import Reaction from './ArticleReaction.vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
 import { useUserInfo, useLikeStorage } from '../composables';
 import { defaultLocales } from '../config';
-import {
-  deleteComment,
-  fetchComment,
-  likeComment,
-  updateComment,
-} from '../api';
+import { deleteComment, getComment, updateComment } from '../api';
 import { getConfig, getDarkStyle } from '../utils';
 
 import type { PropType } from 'vue';
 import type {
   WalineComment,
+  WalineCommentSorting,
   WalineCommentStatus,
   WalineEmojiInfo,
+  WalineLoginStatus,
   WalineHighlighter,
   WalineTexRenderer,
   WalineImageUploader,
@@ -119,6 +124,7 @@ const props = [
   'meta',
   'requiredMeta',
   'dark',
+  'commentSorting',
   'lang',
   'locale',
   'pageSize',
@@ -134,23 +140,13 @@ const props = [
   'reaction',
 ];
 
-type SortKeyItems = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
-type SortNameItems = 'latest' | 'oldest' | 'hottest';
-type SortByItems = { key: SortKeyItems; name: SortNameItems }[];
-const sortByItems: SortByItems = [
-  {
-    key: 'insertedAt_desc',
-    name: 'latest',
-  },
-  {
-    key: 'insertedAt_asc',
-    name: 'oldest',
-  },
-  {
-    key: 'like_desc',
-    name: 'hottest',
-  },
-];
+type SortKey = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
+const sortKeyMap: Record<WalineCommentSorting, SortKey> = {
+  latest: 'insertedAt_desc',
+  oldest: 'insertedAt_asc',
+  hottest: 'like_desc',
+};
+const sortingMethods = Object.keys(sortKeyMap) as WalineCommentSorting[];
 
 const propsWithValidate = {
   serverURL: {
@@ -181,6 +177,14 @@ const propsWithValidate = {
 
   dark: [String, Boolean],
 
+  commentSorting: {
+    type: String,
+    default: 'latest',
+    validator: (value: unknown): boolean =>
+      typeof value === 'string' &&
+      ['latest', 'oldest', 'hottest'].includes(value),
+  },
+
   lang: {
     type: String,
     default: 'zh-CN',
@@ -220,7 +224,7 @@ const propsWithValidate = {
         )),
   },
 
-  login: String as PropType<'enable' | 'disable' | 'force'>,
+  login: String as PropType<WalineLoginStatus>,
 
   highlighter: Function as PropType<WalineHighlighter>,
 
@@ -263,8 +267,9 @@ export default defineComponent({
 
   props: SHOULD_VALIDATE ? propsWithValidate : props,
 
-  setup(props) {
-    const config = computed(() => getConfig(props as unknown as WalineProps));
+  setup(_props) {
+    const props = _props as unknown as WalineProps;
+    const config = computed(() => getConfig(props));
 
     const userInfo = useUserInfo();
     const likeStorage = useLikeStorage();
@@ -274,7 +279,7 @@ export default defineComponent({
     const count = ref(0);
     const page = ref(1);
     const totalPages = ref(0);
-    const sortBy = ref<SortKeyItems>(sortByItems[0].key);
+    const commentSorting = ref(config.value.commentSorting);
 
     const data = ref<WalineComment[]>([]);
     const reply = ref<WalineComment | null>(null);
@@ -287,7 +292,7 @@ export default defineComponent({
     // eslint-disable-next-line vue/no-setup-props-destructure
     let abort: () => void;
 
-    const fetchCommentData = (pageNumber: number): void => {
+    const getCommentData = (pageNumber: number): void => {
       const { serverURL, path, pageSize } = config.value;
       const controller = new AbortController();
 
@@ -295,12 +300,12 @@ export default defineComponent({
 
       abort?.();
 
-      fetchComment({
+      getComment({
         serverURL,
         lang: config.value.lang,
         path,
         pageSize,
-        sortBy: sortBy.value,
+        sortBy: sortKeyMap[commentSorting.value],
         page: pageNumber,
         signal: controller.signal,
         token: userInfo.value?.token,
@@ -322,20 +327,19 @@ export default defineComponent({
       abort = controller.abort.bind(controller);
     };
 
-    const loadMore = (): void => fetchCommentData(page.value + 1);
+    const loadMore = (): void => getCommentData(page.value + 1);
 
     const refresh = (): void => {
       count.value = 0;
       data.value = [];
-      fetchCommentData(1);
+      getCommentData(1);
     };
 
-    const onSortByChange = (item: SortKeyItems): void => {
-      if (sortBy.value === item) {
-        return;
+    const onSortByChange = (item: WalineCommentSorting): void => {
+      if (commentSorting.value !== item) {
+        commentSorting.value = item;
+        refresh();
       }
-      sortBy.value = item;
-      refresh();
     };
 
     const onReply = (comment: WalineComment | null): void => {
@@ -441,10 +445,11 @@ export default defineComponent({
       const { objectId } = comment;
       const hasLiked = likeStorage.value.includes(objectId);
 
-      await likeComment({
+      await updateComment({
         serverURL,
         lang,
         objectId,
+        token: userInfo.value?.token,
         like: !hasLiked,
       });
 
@@ -462,9 +467,14 @@ export default defineComponent({
 
     provide('config', config);
 
-    watch(() => (props as unknown as WalineProps).path, refresh);
-
-    onMounted(() => refresh());
+    onMounted(() => {
+      watch(
+        () => [props.serverURL, props.path],
+        () => refresh(),
+        { immediate: true }
+      );
+    });
+    onUnmounted(() => abort?.());
 
     return {
       config,
@@ -475,8 +485,8 @@ export default defineComponent({
       count,
       page,
       totalPages,
-      sortBy,
-      sortByItems,
+      commentSorting,
+      sortingMethods,
       data,
       reply,
       edit,