@waline/client 2.13.1 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",

package/src/api/articleCounter.ts

@@ -1,4 +1,4 @@
-import { JSON_HEADERS, errorCheck } from './utils';
+import { JSON_HEADERS } from './utils';
 import type { BaseAPIOptions } from './utils';
 
 export interface GetArticleCounterOptions extends BaseAPIOptions {
@@ -42,9 +42,7 @@ export const getArticleCounter = ({
       paths.join(',')
     )}&type=${encodeURIComponent(type.join(','))}&lang=${lang}`,
     { signal }
-  )
-    .then((resp) => <Promise<GetArticleCounterResponse>>resp.json())
-    .then((data) => errorCheck(data, 'article count'));
+  ).then((resp) => <Promise<GetArticleCounterResponse>>resp.json());
 
 export interface UpdateArticleCounterOptions extends BaseAPIOptions {
   /**
@@ -82,6 +80,4 @@ export const updateArticleCounter = ({
     method: 'POST',
     headers: JSON_HEADERS,
     body: JSON.stringify({ path, type, action }),
-  })
-    .then((resp) => <Promise<number>>resp.json())
-    .then((data) => errorCheck(data, 'article count'));
+  }).then((resp) => <Promise<number>>resp.json());

package/src/api/comment.ts

@@ -1,10 +1,10 @@
 import { JSON_HEADERS, errorCheck } from './utils';
-import type { BaseAPIOptions } from './utils';
+import type { BaseAPIOptions, ErrorStatusResponse } from './utils';
 import type { WalineComment, WalineCommentData } from '../typings';
 
 export interface GetCommentOptions extends BaseAPIOptions {
   /**
-   * 待获取评论列hi奥德路径
+   * 待获取评论列表的 path
    *
    * Path of comment list
    */
@@ -13,12 +13,12 @@ export interface GetCommentOptions extends BaseAPIOptions {
   /**
    * 评论分页数
    *
-   * Comment panination number
+   * Comment pagination number
    */
   page: number;
 
   /**
-   * 评论每页个数
+   * 每页评论个数
    *
    * Comment number per page
    */
@@ -46,7 +46,7 @@ export interface GetCommentOptions extends BaseAPIOptions {
   signal?: AbortSignal;
 }
 
-export interface GetCommentResponse {
+export interface GetCommentResponse extends ErrorStatusResponse {
   /**
    * 评论数量
    *
@@ -54,6 +54,20 @@ export interface GetCommentResponse {
    */
   count: number;
 
+  /**
+   * 评论分页数
+   *
+   * Comment pagination number
+   */
+  page: number;
+
+  /**
+   * 每页评论个数
+   *
+   * Comment number per page
+   */
+  pageSize: number;
+
   /**
    * 评论数据
    *
@@ -90,7 +104,7 @@ export const getComment = ({
     { signal, headers }
   )
     .then((resp) => <Promise<GetCommentResponse>>resp.json())
-    .then((data) => errorCheck(data, 'comment data'));
+    .then((data) => errorCheck(data, 'Get comment data'));
 };
 
 export interface AddCommentOptions extends BaseAPIOptions {
@@ -109,16 +123,13 @@ export interface AddCommentOptions extends BaseAPIOptions {
   comment: WalineCommentData;
 }
 
-export interface AddCommentResponse {
+export interface AddCommentResponse extends ErrorStatusResponse {
   /**
    * 渲染好的评论数据
    *
    * Comment data rendered
    */
   data?: WalineComment;
-
-  /** 错误原因 */
-  errmsg?: string;
 }
 
 export const addComment = ({
@@ -134,14 +145,11 @@ export const addComment = ({
 
   if (token) headers.Authorization = `Bearer ${token}`;
 
-  return fetch(
-    `${serverURL}/comment${comment.eid ? `/${comment.eid}` : ''}?lang=${lang}`,
-    {
-      method: 'PUT',
-      headers,
-      body: JSON.stringify(comment),
-    }
-  ).then((resp) => <Promise<AddCommentResponse>>resp.json());
+  return fetch(`${serverURL}/comment?lang=${lang}`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(comment),
+  }).then((resp) => <Promise<AddCommentResponse>>resp.json());
 };
 
 export interface DeleteCommentOptions extends BaseAPIOptions {
@@ -149,61 +157,53 @@ export interface DeleteCommentOptions extends BaseAPIOptions {
   objectId: string | number;
 }
 
+export interface DeleteCommentResponse extends ErrorStatusResponse {
+  data: '';
+}
+
 export const deleteComment = ({
   serverURL,
   lang,
   token,
   objectId,
-}: DeleteCommentOptions): Promise<void> =>
+}: DeleteCommentOptions): Promise<DeleteCommentResponse> =>
   fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
     method: 'DELETE',
     headers: {
       Authorization: `Bearer ${token}`,
     },
-  }).then((resp) => <Promise<void>>resp.json());
+  })
+    .then((resp) => <Promise<DeleteCommentResponse>>resp.json())
+    .then((resp) => errorCheck(resp, 'Delete comment'));
 
-export interface LikeCommentOptions extends BaseAPIOptions {
+export interface UpdateCommentOptions extends BaseAPIOptions {
   /**
-   * 评论的 ID
+   * 用户令牌
    *
-   * Comment ID
+   * User token
    */
-  objectId: number | string;
+  token: string;
 
   /**
-   * 点赞还是取消点赞
+   * 评论的 ID
    *
-   * Like or dislike
+   * Comment ID
    */
-  like: boolean;
-}
-
-export const likeComment = ({
-  serverURL,
-  lang,
-  objectId,
-  like,
-}: LikeCommentOptions): Promise<void> =>
-  fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
-    method: 'PUT',
-    headers: JSON_HEADERS,
-    body: JSON.stringify({ like }),
-  }).then((resp) => <Promise<void>>resp.json());
+  objectId: number | string;
 
-export interface UpdateCommentOptions extends BaseAPIOptions {
   /**
-   * 用户令牌
+   * 评论数据
    *
-   * User token
+   * Comment data
    */
-  token: string;
+  comment?: WalineCommentData;
 
   /**
-   * 评论的 ID
+   * 点赞还是取消点赞
    *
-   * Comment ID
+   * Like or dislike
    */
-  objectId: number | string;
+  like?: boolean;
 
   /**
    * 评论的状态
@@ -222,13 +222,22 @@ export interface UpdateCommentOptions extends BaseAPIOptions {
   sticky?: 0 | 1;
 }
 
+export interface UpdateCommentResponse extends ErrorStatusResponse {
+  /**
+   * 更新后的评论数据
+   *
+   * Comment data rendered
+   */
+  data: WalineComment;
+}
+
 export const updateComment = ({
   serverURL,
   lang,
   token,
   objectId,
   ...data
-}: UpdateCommentOptions): Promise<void> =>
+}: UpdateCommentOptions): Promise<UpdateCommentResponse> =>
   fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
     method: 'PUT',
     headers: {
@@ -236,4 +245,6 @@ export const updateComment = ({
       Authorization: `Bearer ${token}`,
     },
     body: JSON.stringify(data),
-  }).then((resp) => <Promise<void>>resp.json());
+  })
+    .then((resp) => <Promise<UpdateCommentResponse>>resp.json())
+    .then((resp) => errorCheck(resp, 'Update comment'));

package/src/api/commentCount.ts

@@ -1,4 +1,3 @@
-import { errorCheck } from './utils';
 import type { BaseAPIOptions } from './utils';
 
 export interface GetCommentCountOptions extends BaseAPIOptions {
@@ -30,6 +29,5 @@ export const fetchCommentCount = ({
     { signal }
   )
     .then((resp) => <Promise<number | number[]>>resp.json())
-    .then((data) => errorCheck(data, 'comment count'))
     // TODO: Improve this API
     .then((counts) => (Array.isArray(counts) ? counts : [counts]));

package/src/api/pageview.ts

@@ -17,7 +17,7 @@ interface GetPageviewOptions extends BaseAPIOptions {
   signal?: AbortSignal;
 }
 
-export const getPageviews = ({
+export const getPageview = ({
   serverURL,
   lang,
   paths,
@@ -44,7 +44,7 @@ export interface UpdatePageviewOptions extends BaseAPIOptions {
   path: string;
 }
 
-export const updatePageviews = (
+export const updatePageview = (
   options: UpdatePageviewOptions
 ): Promise<number> =>
   updateArticleCounter({

package/src/api/recentComment.ts

@@ -1,4 +1,3 @@
-import { errorCheck } from './utils';
 import type { BaseAPIOptions } from './utils';
 import type { WalineComment } from '../typings';
 
@@ -6,7 +5,7 @@ export interface GetRecentCommentOptions extends BaseAPIOptions {
   /**
    * 获取评论的数量
    *
-   * Comment numebr to be fetched
+   * Comment number to be fetched
    */
   count: number;
 
@@ -39,7 +38,5 @@ export const getRecentComment = ({
   return fetch(`${serverURL}/comment?type=recent&count=${count}&lang=${lang}`, {
     signal,
     headers,
-  })
-    .then((resp) => <Promise<WalineComment[]>>resp.json())
-    .then((data) => errorCheck(data, 'recent comment'));
+  }).then((resp) => <Promise<WalineComment[]>>resp.json());
 };

package/src/api/user.ts

@@ -1,4 +1,4 @@
-import { errorCheck } from './utils';
+import { errorCheck, ErrorStatusResponse } from './utils';
 import type { BaseAPIOptions } from './utils';
 import type { WalineComment } from '../typings';
 
@@ -23,9 +23,7 @@ export interface WalineUser
   count: number;
 }
 
-export interface GetUserListResponse {
-  errno: number;
-  message: string;
+export interface GetUserListResponse extends ErrorStatusResponse {
   data: WalineUser[];
 }
 

package/src/api/utils.ts

@@ -14,8 +14,19 @@ export interface BaseAPIOptions {
   lang: string;
 }
 
-export interface APIErrorResponse {
+export interface ErrorStatusResponse {
+  /**
+   * 错误代码
+   *
+   * Error number
+   */
   errno: number;
+
+  /**
+   * 错误消息
+   *
+   * Error msg
+   */
   errmsg: string;
 }
 
@@ -24,16 +35,12 @@ export const JSON_HEADERS: Record<string, string> = {
   'Content-Type': 'application/json',
 };
 
-export const errorCheck = <T = unknown>(
-  data: T | APIErrorResponse,
+export const errorCheck = <T extends ErrorStatusResponse>(
+  data: T,
   name = ''
 ): T => {
-  if (typeof data === 'object' && (data as APIErrorResponse).errno)
-    throw new TypeError(
-      `Fetch ${name} failed with ${(data as APIErrorResponse).errno}: ${
-        (data as APIErrorResponse).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/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 { addComment, login } 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;
 
-      addComment({
+      const options = {
         serverURL,
         lang,
         token: userInfo.value?.token,
         comment,
-      })
+      };
+
+      (props.edit
+        ? updateComment({ objectId: props.edit.objectId, ...options })
+        : addComment(options)
+      )
         .then((resp) => {
           isSubmitting.value = false;
 
@@ -673,7 +676,7 @@ export default defineComponent({
     );
 
     // 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 };
@@ -687,7 +690,7 @@ 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;
       }
@@ -745,7 +748,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       document.body.removeEventListener('click', popupHandler);
-      window.removeEventListener('message', onMessageRecive);
+      window.removeEventListener('message', onMessageReceive);
     });
 
     return {

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>
@@ -96,14 +96,16 @@ import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
 import { useUserInfo, useLikeStorage } from '../composables';
 import { defaultLocales } from '../config';
-import { deleteComment, getComment, 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,
@@ -122,6 +124,7 @@ const props = [
   'meta',
   'requiredMeta',
   'dark',
+  'commentSorting',
   'lang',
   'locale',
   'pageSize',
@@ -137,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: {
@@ -184,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',
@@ -223,7 +224,7 @@ const propsWithValidate = {
         )),
   },
 
-  login: String as PropType<'enable' | 'disable' | 'force'>,
+  login: String as PropType<WalineLoginStatus>,
 
   highlighter: Function as PropType<WalineHighlighter>,
 
@@ -278,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);
@@ -304,7 +305,7 @@ export default defineComponent({
         lang: config.value.lang,
         path,
         pageSize,
-        sortBy: sortBy.value,
+        sortBy: sortKeyMap[commentSorting.value],
         page: pageNumber,
         signal: controller.signal,
         token: userInfo.value?.token,
@@ -334,12 +335,11 @@ export default defineComponent({
       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 => {
@@ -445,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,
       });
 
@@ -484,8 +485,8 @@ export default defineComponent({
       count,
       page,
       totalPages,
-      sortBy,
-      sortByItems,
+      commentSorting,
+      sortingMethods,
       data,
       reply,
       edit,

package/src/pageview.ts

@@ -1,4 +1,4 @@
-import { getPageviews, updatePageviews } from './api';
+import { getPageview, updatePageview } from './api';
 import { errorHandler, getQuery, getServerURL } from './utils';
 
 import type { WalineAbort } from './typings';
@@ -78,7 +78,7 @@ export const pageviewCount = ({
   };
 
   const fetch = (elements: HTMLElement[]): Promise<void> =>
-    getPageviews({
+    getPageview({
       serverURL: getServerURL(serverURL),
       paths: elements.map((element) => getQuery(element) || path),
       lang,
@@ -92,7 +92,7 @@ export const pageviewCount = ({
     const normalElements = elements.filter((element) => !filter(element));
     const elementsNeedstoBeFetched = elements.filter(filter);
 
-    void updatePageviews({
+    void updatePageview({
       serverURL: getServerURL(serverURL),
       path,
       lang,

package/src/styles/index.scss

@@ -1,5 +1,5 @@
 @use 'config';
-@use 'nomalize';
+@use 'normalize';
 
 @use 'base';
 
@@ -14,4 +14,4 @@
 @use 'highlight';
 
 @use 'recent';
-@use 'userlist';
+@use 'user-list';

package/src/styles/panel.scss

@@ -242,7 +242,7 @@
     color: var(--waline-theme-color);
   }
 
-  &.actived {
+  &.active {
     color: var(--waline-active-color);
   }
 }