@waline/client 2.11.2 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.11.2",
+  "version": "2.12.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -93,6 +93,17 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "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"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -108,21 +119,22 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.2.0",
+    "@vueuse/core": "^9.3.0",
     "autosize": "^5.0.1",
-    "marked": "^4.1.0",
-    "vue": "^3.2.39"
+    "marked": "^4.1.1",
+    "vue": "^3.2.40"
   },
   "devDependencies": {
-    "@babel/core": "7.19.1",
-    "@babel/preset-env": "7.19.1",
+    "@babel/core": "7.19.3",
+    "@babel/preset-env": "7.19.3",
+    "@giphy/js-types": "4.2.1",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.7",
-    "@types/node": "18.7.21",
+    "@types/node": "18.7.23",
     "@vitejs/plugin-vue": "3.1.0",
     "recaptcha-v3": "1.10.0",
     "rimraf": "3.0.2",
@@ -130,20 +142,10 @@
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.8.3",
-    "vite": "3.1.3"
+    "typescript": "4.8.4",
+    "vite": "3.1.4"
   },
   "engines": {
     "node": ">=14"
-  },
-  "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.js",
-    "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/compact/convert.ts

@@ -1,11 +1,11 @@
 import { warning } from './logger';
 import { resolveOldEmojiMap } from './valine';
-
-import type { DeprecatedValineOptions } from './valine';
 import {
   DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED,
   DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED,
 } from './dropped';
+
+import type { DeprecatedValineOptions } from './valine';
 import type { DeprecatedWalineOptions } from './v1';
 import type { WalineInitOptions } from '../typings';
 

package/src/components/ArticleReaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="reaction && reaction.length" class="wl-reaction">
+  <div v-if="reaction.length" class="wl-reaction">
     <h4 v-text="locale.reactionTitle" />
     <ul>
       <li
@@ -29,7 +29,7 @@ import {
   ref,
 } from 'vue';
 import { fetchArticleCounter, updateArticleCounter } from '../api';
-import { useVoteStorage } from '../composables';
+import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
 import type { WalineConfig } from '../utils';
 import type { WalineLocale } from '../typings';
 
@@ -49,42 +49,48 @@ export default defineComponent({
     const reaction = computed((): ReactionItem[] => {
       const { reaction, path } = config.value;
 
-      return (Array.isArray(reaction) ? reaction : []).map((icon, index) => ({
+      return reaction.map((icon, index) => ({
         icon,
         vote: votes.value[index] || 0,
         desc: locale.value[`reaction${index}` as keyof WalineLocale],
         active: Boolean(
-          voteStorage.value.find(({ u, i }) => u === path && i === index)
+          voteStorage.value.find(
+            ({ [VOTE_IDENTIFIER]: voteIdentifier, [VOTE_INDEX]: voteIndex }) =>
+              voteIdentifier === path && voteIndex === index
+          )
         ),
       }));
     });
 
-    const controller = new AbortController();
+    let abort: () => void;
 
-    const fetchCounter = async (): Promise<void> => {
+    const fetchCounter = (): void => {
       const { serverURL, lang, path, reaction } = config.value;
 
-      if (!Array.isArray(reaction)) {
-        return;
-      }
-
-      const resp = await fetchArticleCounter({
-        serverURL,
-        lang,
-        paths: [path],
-        type: reaction.map((_, k) => `reaction${k}`),
-        signal: controller.signal,
-      });
+      if (reaction.length) {
+        const controller = new AbortController();
 
-      if (Array.isArray(resp) || typeof resp === 'number') return;
+        fetchArticleCounter({
+          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}`]);
+        });
 
-      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(({ u }) => u === path);
-      const hasVotedTheReaction = hasVoted && hasVoted.i === index;
+      const hasVoted = voteStorage.value.find(
+        ({ [VOTE_IDENTIFIER]: voteIdentifier }) => voteIdentifier === path
+      );
+      const hasVotedTheReaction = hasVoted && hasVoted[VOTE_INDEX] === index;
 
       if (hasVotedTheReaction) return;
 
@@ -97,7 +103,10 @@ export default defineComponent({
 
       votes.value[index] = (votes.value[index] || 0) + 1;
       if (hasVoted) {
-        votes.value[hasVoted.i] = Math.max(votes.value[hasVoted.i] - 1, 0);
+        votes.value[hasVoted[VOTE_INDEX]] = Math.max(
+          votes.value[hasVoted[VOTE_INDEX]] - 1,
+          0
+        );
         updateArticleCounter({
           serverURL,
           lang,
@@ -109,7 +118,10 @@ export default defineComponent({
         hasVoted.i = index;
         voteStorage.value = Array.from(voteStorage.value);
       } else {
-        voteStorage.value = [...voteStorage.value, { u: path, i: index }];
+        voteStorage.value = [
+          ...voteStorage.value,
+          { [VOTE_IDENTIFIER]: path, [VOTE_INDEX]: index },
+        ];
       }
 
       if (voteStorage.value.length > 50)
@@ -117,7 +129,7 @@ export default defineComponent({
     };
 
     onMounted(() => fetchCounter());
-    onUnmounted(() => controller.abort());
+    onUnmounted(() => abort?.());
 
     return {
       reaction,

package/src/components/CommentBox.vue

@@ -368,7 +368,7 @@ export default defineComponent({
 
     const searchResults = reactive({
       loading: true,
-      list: [] as WalineSearchResult[],
+      list: [] as WalineSearchResult,
     });
 
     const wordLimit = ref(0);
@@ -624,11 +624,12 @@ export default defineComponent({
 
       searchResults.loading = true;
 
-      searchResults.list.push(
-        ...(searchOptions.more
+      searchResults.list = [
+        ...searchResults.list,
+        ...(searchOptions.more && searchResults.list.length
           ? await searchOptions.more(keyword, searchResults.list.length)
-          : await searchOptions.search(keyword))
-      );
+          : await searchOptions.search(keyword)),
+      ];
 
       searchResults.loading = false;
 

package/src/components/ImageWall.vue

@@ -42,7 +42,7 @@ SOFTWARE. -->
           :src="items[itemIndex].src"
           :title="items[itemIndex].title"
           loading="lazy"
-          @load="state[items[itemIndex].src] = true"
+          @load="imageLoad"
           @click="$emit('insert', `![](${items[itemIndex].src})`)"
         />
       </template>
@@ -75,7 +75,7 @@ export default defineComponent({
   },
 
   props: {
-    items: { type: Array as PropType<WalineSearchResult[]>, default: () => [] },
+    items: { type: Array as PropType<WalineSearchResult>, default: () => [] },
     columnWidth: { type: Number, default: 300 },
     gap: { type: Number, default: 0 },
   },
@@ -133,6 +133,10 @@ export default defineComponent({
       window.scrollTo({ top: scrollY });
     };
 
+    const imageLoad = (e: Event) => {
+      state.value[(e.target as HTMLImageElement).src] = true;
+    };
+
     watch(
       () => [props.items],
       () => {
@@ -158,6 +162,7 @@ export default defineComponent({
       columns,
       state,
       wall,
+      imageLoad,
     };
   },
 });

package/src/composables/vote.ts

@@ -4,9 +4,12 @@ import type { Ref } from 'vue';
 
 const VOTE_KEY = 'WALINE_VOTE';
 
+export const VOTE_IDENTIFIER = 'id';
+export const VOTE_INDEX = 'i';
+
 export interface VoteLogItem {
-  u: string;
-  i: number;
+  [VOTE_IDENTIFIER]: string;
+  [VOTE_INDEX]: number;
 }
 
 export type VoteRef = Ref<VoteLogItem[]>;

package/src/config/default.ts

@@ -1,4 +1,9 @@
-import type { WalineMeta, WalineSearchOptions } from '../typings';
+import type { IGif } from '@giphy/js-types';
+import type {
+  WalineMeta,
+  WalineSearchOptions,
+  WalineSearchResult,
+} from '../typings';
 
 const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 
@@ -25,94 +30,51 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
     ? '<p class="wl-tex">Tex is not available in preview</p>'
     : '<span class="wl-tex">Tex is not available in preview</span>';
 
-export const getDefaultSearchOptions = (): WalineSearchOptions => {
-  interface FetchGifRequest {
-    keyword: string;
-    pos?: string;
+export const getDefaultSearchOptions = (lang: string): WalineSearchOptions => {
+  interface Result {
+    meta: {
+      msg: string;
+      response_id: string;
+      status: number;
+    };
+    pagination: {
+      count: number;
+      total_count: number;
+      offset: number;
+    };
   }
-
-  type GifFormat =
-    | 'gif'
-    | 'mediumgif'
-    | 'tinygif'
-    | 'nanogif'
-    | 'mp4'
-    | 'loopedmp4'
-    | 'tinymp4'
-    | 'nanomp4'
-    | 'webm'
-    | 'tinywebm'
-    | 'nanowebm';
-
-  interface MediaObject {
-    preview: string;
-    url: string;
-    dims: number[];
-    size: number;
-  }
-
-  interface GifObject {
-    created: number;
-    hasaudio: boolean;
-    id: string;
-    media: Record<GifFormat, MediaObject>[];
-    tags: string[];
-    title: string;
-    itemurl: string;
-    hascaption: boolean;
-    url: string;
-  }
-
-  interface FetchGifResponse {
-    next: string;
-    results: GifObject[];
+  interface GifsResult extends Result {
+    data: IGif[];
   }
 
-  const state = {
-    next: '',
-  };
-
-  const fetchGif = ({
-    keyword,
-    pos,
-  }: FetchGifRequest): Promise<FetchGifResponse> => {
-    const baseUrl = `https://g.tenor.com/v1/search`;
-    const query = new URLSearchParams('media_filter=minimal');
-
-    query.set('key', 'PAY5JLFIH6V6');
-    query.set('limit', '20');
-    query.set('pos', pos || '');
-    query.set('q', keyword);
-
-    return fetch(`${baseUrl}?${query.toString()}`, {
-      headers: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((resp) => resp.json() as Promise<FetchGifResponse>)
-      .catch(() => ({ next: pos || '', results: [] }));
+  const fetchGiphy = async (
+    url: string,
+    params: Record<string, string> = {}
+  ): Promise<WalineSearchResult> => {
+    const querystring = new URLSearchParams({
+      lang,
+      limit: '20',
+      rating: 'g',
+      api_key: '6CIMLkNMMOhRcXPoMCPkFy4Ybk2XUiMp',
+      ...params,
+    }).toString();
+
+    const resp = await fetch(
+      `https://api.giphy.com/v1/gifs/${url}?${querystring}`
+    ).then((resp) => resp.json() as Promise<GifsResult>);
+
+    return resp.data.map((gif) => ({
+      title: gif.title,
+      src: gif.images.downsized_medium.url,
+    }));
   };
 
   return {
-    search: (word = '') =>
-      fetchGif({ keyword: word }).then((resp) => {
-        state.next = resp.next;
-
-        return resp.results.map((item) => ({
-          title: item.title,
-          src: item.media[0].tinygif.url,
-        }));
-      }),
-    more: (word) =>
-      fetchGif({ keyword: word, pos: state.next }).then((resp) => {
-        state.next = resp.next;
-
-        return resp.results.map((item) => ({
-          title: item.title,
-          src: item.media[0].tinygif.url,
-        }));
-      }),
+    search: (word: string): Promise<WalineSearchResult> =>
+      fetchGiphy('search', { q: word, offset: '0' }),
+    default: (): Promise<WalineSearchResult> => fetchGiphy('trending', {}),
+    more: (word: string, offset = 0): Promise<WalineSearchResult> =>
+      fetchGiphy('search', { q: word, offset: offset.toString() }),
   };
 };
 

package/src/entrys/api.ts

@@ -1 +1 @@
-export * from './api';
+export * from '../api';

package/src/typings/base.ts

@@ -39,44 +39,70 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
-export interface WalineSearchResult extends Record<string, unknown> {
+export interface WalineSearchImageData extends Record<string, unknown> {
   /**
+   * 图片链接
+   *
    * Image link
    */
   src: string;
 
   /**
-   * Image title, optional
+   * 图片标题
+   *
+   * @description 用于图片的 alt 属性
+   *
+   * Image title
+   *
+   * @description Used for alt attribute of image
    */
   title?: string;
 
   /**
-   * Image preview link, optional
+   * 图片缩略图
+   *
+   * @description 为了更好的加载性能，我们会优先在列表中使用此缩略图
+   *
+   * Image preview link
+   *
+   * @description For better loading performance, we will use this thumbnail first in the list
    *
    * @default src
    */
   preview?: string;
 }
 
+export type WalineSearchResult = WalineSearchImageData[];
+
 export interface WalineSearchOptions {
   /**
+   * 搜索操作
+   *
    * Search action
    */
-  search: (word: string) => Promise<WalineSearchResult[]>;
+  search: (word: string) => Promise<WalineSearchResult>;
 
   /**
-   * Default search action
+   * 打开列表时展示的默认结果
+   *
+   * Default result when opening list
    *
    * @default () => search('')
    */
-  default?: () => Promise<WalineSearchResult[]>;
+  default?: () => Promise<WalineSearchResult>;
 
   /**
+   * 获取更多的操作
+   *
+   * @description 会在列表滚动到底部时触发，如果你的搜索服务支持分页功能，你应该设置此项实现无限滚动
+   *
    * Fetch more action
    *
+   * @description It will be triggered when the list scrolls to the bottom. If your search service supports paging, you should set this to achieve infinite scrolling
+   *
    * @default (word) => search(word)
    */
-  more?: (word: string, currectCount: number) => Promise<WalineSearchResult[]>;
+  more?: (word: string, currectCount: number) => Promise<WalineSearchResult>;
 }
 
 export type WalineMeta = 'nick' | 'mail' | 'link';

package/src/typings/locale.ts

@@ -8,52 +8,66 @@ export interface WalineDateLocale {
 
 export type WalineLevelLocale = Record<`level${number}`, string>;
 
-export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
+export interface WalineReactionLocale {
+  reactionTitle: string;
+  reaction0: string;
+  reaction1: string;
+  reaction2: string;
+  reaction3: string;
+  reaction4: string;
+  reaction5: string;
+  reaction6: string;
+  reaction7: string;
+  reaction8: string;
+}
+
+export interface WalineLocale
+  extends WalineDateLocale,
+    WalineLevelLocale,
+    WalineReactionLocale {
   nick: string;
-  nickError: string;
   mail: string;
-  mailError: string;
   link: string;
   optional: string;
   placeholder: string;
   sofa: string;
   submit: string;
-  like: string;
-  cancelLike: string;
-  reply: string;
-  cancelReply: string;
   comment: string;
   refresh: string;
   more: string;
-  preview: string;
-  emoji: string;
-  uploadImage: string;
   uploading: string;
   login: string;
-  logout: string;
   admin: string;
   sticky: string;
   word: string;
-  wordHint: string;
   anonymous: string;
   gif: string;
   gifSearchPlaceholder: string;
-  profile: string;
+
+  // manage
   approved: string;
   waiting: string;
   spam: string;
   unsticky: string;
+
+  // sorting
   oldest: string;
   latest: string;
   hottest: string;
-  reactionTitle: string;
-  reaction0: string;
-  reaction1: string;
-  reaction2: string;
-  reaction3: string;
-  reaction4: string;
-  reaction5: string;
-  reaction6: string;
-  reaction7: string;
-  reaction8: string;
+
+  // hint
+  nickError: string;
+  mailError: string;
+  wordHint: string;
+
+  // i18n
+  like: string;
+  cancelLike: string;
+  reply: string;
+  cancelReply: string;
+  preview: string;
+  emoji: string;
+  uploadImage: string;
+  profile: string;
+  logout: string;
 }

package/src/utils/config.ts

@@ -23,9 +23,11 @@ export interface WalineEmojiConfig {
   map: WalineEmojiMaps;
 }
 
-export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
+export interface WalineConfig
+  extends Required<Omit<WalineProps, 'wordLimit' | 'reaction'>> {
   locale: WalineLocale;
   wordLimit: [number, number] | false;
+  reaction: string[];
 }
 
 export const getServerURL = (serverURL: string): string => {
@@ -62,7 +64,7 @@ export const getConfig = ({
   texRenderer,
   copyright = true,
   login = 'enable',
-  search = getDefaultSearchOptions(),
+  search,
   reaction,
   recaptchaV3Key = '',
   ...more
@@ -85,8 +87,12 @@ export const getConfig = ({
   pageSize,
   login,
   copyright,
-  search,
+  search: search || getDefaultSearchOptions(lang),
   recaptchaV3Key,
-  reaction: reaction === true ? defaultReaction : reaction || false,
+  reaction: Array.isArray(reaction)
+    ? reaction
+    : reaction === true
+    ? defaultReaction
+    : [],
   ...more,
 });