@waline/client 2.14.1 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -96,6 +96,7 @@
   "browserslist": {
     "production": [
       ">0.5%",
+      "maintained node versions",
       "not dead",
       "not ie 11",
       "not op_mini all",
@@ -108,31 +109,31 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.5.0",
-    "autosize": "^5.0.1",
-    "marked": "^4.2.2",
+    "@vueuse/core": "^9.7.0",
+    "autosize": "^5.0.2",
+    "marked": "^4.2.4",
     "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.20.5",
     "@babel/preset-env": "7.20.2",
-    "@giphy/js-types": "4.2.1",
-    "@rollup/plugin-babel": "6.0.2",
-    "@rollup/plugin-commonjs": "23.0.2",
+    "@giphy/js-types": "4.4.0",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "24.0.0",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@rollup/plugin-replace": "5.0.1",
+    "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-terser": "0.1.0",
     "@types/autosize": "4.0.1",
-    "@types/marked": "4.0.7",
-    "@types/node": "18.11.9",
-    "@vitejs/plugin-vue": "3.2.0",
+    "@types/marked": "4.0.8",
+    "@types/node": "18.11.17",
+    "@vitejs/plugin-vue": "4.0.0",
     "recaptcha-v3": "1.10.0",
     "rimraf": "3.0.2",
-    "rollup": "3.3.0",
+    "rollup": "3.7.5",
     "rollup-plugin-dts": "5.0.0",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.9.3",
-    "vite": "3.2.4"
+    "typescript": "4.9.4",
+    "vite": "4.0.2"
   },
   "engines": {
     "node": ">=14"
@@ -140,9 +141,8 @@
   "scripts": {
     "build": "pnpm rollup && pnpm style",
     "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "rollup": "rollup -c ./config/rollup.config.mjs",
+    "dev": "vite",
+    "rollup": "rollup -c",
     "style": "pnpm style:main && pnpm style:meta",
     "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
     "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"

package/src/comment.ts

@@ -43,8 +43,7 @@ export const commentCount = ({
   path = window.location.pathname,
   selector = '.waline-comment-count',
   lang = 'zh-CN',
-}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-WalineCommentCountOptions): WalineAbort => {
+}: WalineCommentCountOptions): WalineAbort => {
   const controller = new AbortController();
 
   // comment count

package/src/components/ArticleReaction.vue

@@ -1,150 +1,153 @@
 <template>
-  <div v-if="reaction.length" class="wl-reaction">
+  <div v-if="reactionsInfo.length" class="wl-reaction">
     <h4 v-text="locale.reactionTitle" />
-    <ul>
+
+    <ul class="wl-reaction-list">
       <li
-        v-for="(item, index) in reaction"
+        v-for="({ active, icon, desc }, index) in reactionsInfo"
         :key="index"
-        :class="{ active: item.active }"
+        class="wl-reaction-item"
+        :class="{ active }"
         @click="vote(index)"
       >
         <div class="wl-reaction-img">
-          <img :src="item.icon" :alt="item.desc" />
-          <div class="wl-reaction-votes">{{ item.vote }}</div>
+          <img :src="icon" :alt="desc" />
+
+          <LoadingIcon
+            v-if="votingIndex === index"
+            class="wl-reaction-loading"
+          />
+
+          <div
+            v-else
+            class="wl-reaction-votes"
+            v-text="voteNumbers[index] || 0"
+          />
         </div>
-        <div class="wl-reaction-text">{{ item.desc }}</div>
+
+        <div class="wl-reaction-text" v-text="desc" />
       </li>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  inject,
-  ComputedRef,
-  computed,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-} from 'vue';
-import { getArticleCounter, updateArticleCounter } from '../api';
-import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
-import type { WalineConfig } from '../utils';
-import type { WalineLocale } from '../typings';
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { LoadingIcon } from './Icons.js';
+import { getArticleCounter, updateArticleCounter } from '../api/index.js';
+import { useReactionStorage } from '../composables/index.js';
+
+import type { ComputedRef } from 'vue';
+import type { WalineConfig } from '../utils/index.js';
+import type { WalineReactionLocale } from '../typings';
+
+defineExpose();
 
 interface ReactionItem {
   icon: string;
-  vote: number;
   desc: string;
   active?: boolean;
 }
 
-export default defineComponent({
-  setup() {
-    const votes = ref<ReactionItem['vote'][]>([]);
-    const voteStorage = useVoteStorage();
-    const config = inject<ComputedRef<WalineConfig>>('config')!;
-    const locale = computed(() => config.value.locale);
-    const reaction = computed((): ReactionItem[] => {
-      const { reaction, path } = config.value;
-
-      return reaction.map((icon, index) => ({
-        icon,
-        vote: votes.value[index] || 0,
-        desc: locale.value[`reaction${index}` as keyof WalineLocale],
-        active: Boolean(
-          voteStorage.value.find(
-            ({ [VOTE_IDENTIFIER]: voteIdentifier, [VOTE_INDEX]: voteIndex }) =>
-              voteIdentifier === path && voteIndex === index
-          )
-        ),
-      }));
+const reactionStorage = useReactionStorage();
+const config = inject<ComputedRef<WalineConfig>>('config')!;
+
+const votingIndex = ref(-1);
+const voteNumbers = ref<number[]>([]);
+
+const locale = computed(() => config.value.locale);
+const isReactionEnabled = computed(() => config.value.reaction.length > 0);
+
+const reactionsInfo = computed<ReactionItem[]>(() => {
+  const { reaction, path } = config.value;
+
+  return reaction.map((icon, index) => ({
+    icon,
+    desc: locale.value[`reaction${index}` as keyof WalineReactionLocale],
+    active: reactionStorage.value[path] === index,
+  }));
+});
+
+let abort: () => void;
+
+const fetchReaction = async (): Promise<void> => {
+  if (isReactionEnabled.value) {
+    const { serverURL, lang, path, reaction } = config.value;
+    const controller = new AbortController();
+
+    abort = controller.abort.bind(controller);
+
+    const resp = await getArticleCounter({
+      serverURL,
+      lang,
+      paths: [path],
+      type: reaction.map((_reaction, index) => `reaction${index}`),
+      signal: controller.signal,
     });
 
-    let abort: () => void;
-
-    const fetchCounter = (): void => {
-      const { serverURL, lang, path, reaction } = config.value;
-
-      if (reaction.length) {
-        const controller = new AbortController();
-
-        getArticleCounter({
-          serverURL,
-          lang,
-          paths: [path],
-          type: reaction.map((_, k) => `reaction${k}`),
-          signal: controller.signal,
-        }).then((resp) => {
-          if (Array.isArray(resp) || typeof resp === 'number') return;
-          votes.value = reaction.map((_, k) => resp[`reaction${k}`]);
-        });
-
-        abort = controller.abort.bind(controller);
-      }
-    };
-
-    const vote = async (index: number): Promise<void> => {
-      const { serverURL, lang, path } = config.value;
-      const hasVoted = voteStorage.value.find(
-        ({ [VOTE_IDENTIFIER]: voteIdentifier }) => voteIdentifier === path
-      );
-      const hasVotedTheReaction = hasVoted && hasVoted[VOTE_INDEX] === index;
+    // TODO: Remove this compact code
+    if (Array.isArray(resp) || typeof resp === 'number') return;
+
+    voteNumbers.value = reaction.map(
+      (_reaction, index) => resp[`reaction${index}`]
+    );
+  }
+};
+
+const vote = async (index: number): Promise<void> => {
+  // we should ensure that only one vote request is sent at a time
+  if (votingIndex.value === -1) {
+    const { serverURL, lang, path } = config.value;
+    const currentVoteItemIndex = reactionStorage.value[path];
 
-      if (hasVotedTheReaction) return;
+    // mark voting status
+    votingIndex.value = index;
 
+    // if user already vote current article, decrease the voted item number
+    if (currentVoteItemIndex !== undefined) {
       await updateArticleCounter({
         serverURL,
         lang,
         path,
-        type: `reaction${index}`,
+        type: `reaction${currentVoteItemIndex}`,
+        action: 'desc',
       });
 
-      votes.value[index] = (votes.value[index] || 0) + 1;
-      if (hasVoted) {
-        votes.value[hasVoted[VOTE_INDEX]] = Math.max(
-          votes.value[hasVoted[VOTE_INDEX]] - 1,
-          0
-        );
-        updateArticleCounter({
-          serverURL,
-          lang,
-          path,
-          type: `reaction${hasVoted.i}`,
-          action: 'desc',
-        });
-
-        hasVoted.i = index;
-        voteStorage.value = Array.from(voteStorage.value);
-      } else {
-        voteStorage.value = [
-          ...voteStorage.value,
-          { [VOTE_IDENTIFIER]: path, [VOTE_INDEX]: index },
-        ];
-      }
-
-      if (voteStorage.value.length > 50)
-        voteStorage.value = voteStorage.value.slice(-50);
-    };
-
-    onMounted(() => {
-      watch(
-        () => [config.value.serverURL, config.value.path],
-        () => {
-          fetchCounter();
-        },
-        { immediate: true }
+      voteNumbers.value[currentVoteItemIndex] = Math.max(
+        voteNumbers.value[currentVoteItemIndex] - 1,
+        0
       );
-    });
-    onUnmounted(() => abort?.());
-
-    return {
-      reaction,
-      locale,
-      vote,
-    };
-  },
+    }
+
+    // increase voting number if current reaction item is not been voted
+    if (currentVoteItemIndex !== index) {
+      await updateArticleCounter({
+        serverURL,
+        lang,
+        path,
+        type: `reaction${index}`,
+      });
+      voteNumbers.value[index] = (voteNumbers.value[index] || 0) + 1;
+    }
+
+    // update vote info in local storage
+    if (currentVoteItemIndex === index) delete reactionStorage.value[path];
+    else reactionStorage.value[path] = index;
+
+    // voting is completed
+    votingIndex.value = -1;
+  }
+};
+
+onMounted(() => {
+  watch(
+    () => [config.value.serverURL, config.value.path],
+    () => {
+      void fetchReaction();
+    },
+    { immediate: true }
+  );
 });
+onUnmounted(() => abort?.());
 </script>