@waline/client 2.11.1 → 2.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -25,6 +25,11 @@
       "require": "./dist/shim.cjs",
       "default": "./dist/shim.cjs"
     },
+    "./api": {
+      "types": "./dist/api.d.ts",
+      "require": "./dist/api.cjs",
+      "default": "./dist/api.mjs"
+    },
     "./component": {
       "default": "./dist/component.mjs"
     },
@@ -34,6 +39,12 @@
       "require": "./dist/waline.cjs",
       "default": "./dist/waline.js"
     },
+    "./comment": {
+      "types": "./dist/comment.d.ts",
+      "import": "./dist/comment.mjs",
+      "require": "./dist/comment.cjs",
+      "default": "./dist/comment.js"
+    },
     "./pageview": {
       "types": "./dist/pageview.d.ts",
       "import": "./dist/pageview.mjs",
@@ -42,9 +53,20 @@
     },
     "./waline.css": "./dist/waline.css",
     "./waline-meta.css": "./dist/waline-meta.css",
+    "./dist/api": {
+      "types": "./dist/api.d.ts",
+      "require": "./dist/api.cjs",
+      "default": "./dist/api.mjs"
+    },
     "./dist/component": {
       "default": "./dist/component.mjs"
     },
+    "./dist/comment": {
+      "types": "./dist/comment.d.ts",
+      "import": "./dist/comment.mjs",
+      "require": "./dist/comment.cjs",
+      "default": "./dist/comment.js"
+    },
     "./dist/pageview": {
       "types": "./dist/pageview.d.ts",
       "import": "./dist/pageview.mjs",
@@ -71,17 +93,6 @@
     "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%",
@@ -124,5 +135,15 @@
   },
   "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/api/articleCounter.ts

@@ -0,0 +1,53 @@
+import { JSON_HEADERS, errorCheck } from './utils';
+
+export interface FetchArticleCounterOptions {
+  serverURL: string;
+  lang: string;
+  paths: string[];
+  signal: AbortSignal;
+  type: string[];
+}
+
+export const fetchArticleCounter = ({
+  serverURL,
+  lang,
+  paths,
+  type,
+  signal,
+}: FetchArticleCounterOptions): Promise<
+  Record<string, number>[] | Record<string, number> | number[] | number
+> =>
+  fetch(
+    `${serverURL}/article?path=${encodeURIComponent(
+      paths.join(',')
+    )}&type=${encodeURIComponent(type.join(','))}&lang=${lang}`,
+    { signal }
+  )
+    .then(
+      (resp) =>
+        resp.json() as Promise<Record<string, number>[] | number[] | number>
+    )
+    .then((data) => errorCheck(data, 'article count'));
+
+export interface UpdateArticleCounterOptions {
+  serverURL: string;
+  lang: string;
+  path: string;
+  type: string;
+  action?: 'inc' | 'desc';
+}
+
+export const updateArticleCounter = ({
+  serverURL,
+  lang,
+  path,
+  type,
+  action,
+}: UpdateArticleCounterOptions): Promise<number> =>
+  fetch(`${serverURL}/article?lang=${lang}`, {
+    method: 'POST',
+    headers: JSON_HEADERS,
+    body: JSON.stringify({ path, type, action }),
+  })
+    .then((resp) => resp.json() as Promise<number>)
+    .then((data) => errorCheck(data, 'article count'));

package/src/api/comment.ts

@@ -0,0 +1,147 @@
+import { JSON_HEADERS, errorCheck } from './utils';
+import type { WalineComment, WalineCommentData } from '../typings';
+
+export interface FetchCommentOptions {
+  serverURL: string;
+  path: string;
+  page: number;
+  pageSize: number;
+  sortBy: string;
+  signal: AbortSignal;
+  token?: string;
+  lang: string;
+}
+
+export interface CommentData {
+  count: number;
+  data: WalineComment[];
+  totalPages: number;
+}
+
+export const fetchComment = ({
+  serverURL,
+  lang,
+  path,
+  page,
+  pageSize,
+  sortBy,
+  signal,
+  token,
+}: FetchCommentOptions): Promise<CommentData> => {
+  const headers: Record<string, string> = {};
+
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  return fetch(
+    `${serverURL}/comment?path=${encodeURIComponent(
+      path
+    )}&pageSize=${pageSize}&page=${page}&lang=${lang}&sortBy=${sortBy}`,
+    { signal, headers }
+  )
+    .then((resp) => resp.json() as Promise<CommentData>)
+    .then((data) => errorCheck(data, 'comment data'));
+};
+
+export interface PostCommentOptions {
+  serverURL: string;
+  lang: string;
+  token?: string;
+  comment: WalineCommentData;
+}
+
+export interface PostCommentResponse {
+  data?: WalineComment;
+  errmsg?: string;
+}
+
+export const postComment = ({
+  serverURL,
+  lang,
+  token,
+  comment,
+}: PostCommentOptions): Promise<PostCommentResponse> => {
+  const headers: Record<string, string> = {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'Content-Type': 'application/json',
+  };
+
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  if (comment.eid) {
+    return fetch(`${serverURL}/comment/${comment.eid}?lang=${lang}`, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify(comment),
+    }).then((resp) => resp.json() as Promise<PostCommentResponse>);
+  }
+
+  return fetch(`${serverURL}/comment?lang=${lang}`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(comment),
+  }).then((resp) => resp.json() as Promise<PostCommentResponse>);
+};
+
+export interface DeleteCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: string | number;
+}
+
+export const deleteComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+}: DeleteCommentOptions): Promise<void> =>
+  fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  }).then((resp) => resp.json() as Promise<void>);
+
+export interface LikeCommentOptions {
+  serverURL: string;
+  lang: string;
+  objectId: number | string;
+  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) => resp.json() as Promise<void>);
+
+export interface UpdateCommentOptions {
+  serverURL: string;
+  lang: string;
+  token: string;
+  objectId: number | string;
+  status?: 'approved' | 'waiting' | 'spam';
+  sticky?: number;
+}
+
+export const updateComment = ({
+  serverURL,
+  lang,
+  token,
+  objectId,
+  ...data
+}: UpdateCommentOptions): Promise<void> =>
+  fetch(`${serverURL}/comment/${objectId}?lang=${lang}`, {
+    method: 'PUT',
+    headers: {
+      ...JSON_HEADERS,
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(data),
+  }).then((resp) => resp.json() as Promise<void>);

package/src/api/commentCount.ts

@@ -0,0 +1,30 @@
+import { errorCheck } from './utils';
+
+export interface FetchCommentCountOptions {
+  serverURL: string;
+  lang: string;
+  paths: string[];
+  signal: AbortSignal;
+}
+
+export const fetchCommentCount = ({
+  serverURL,
+  lang,
+  paths,
+  signal,
+}: FetchCommentCountOptions): Promise<number[]> => {
+  const headers: Record<string, string> = {};
+
+  return (
+    fetch(
+      `${serverURL}/comment?type=count&url=${encodeURIComponent(
+        paths.join(',')
+      )}&lang=${lang}`,
+      { signal, headers }
+    )
+      .then((resp) => resp.json() as Promise<number | number[]>)
+      .then((data) => errorCheck(data, 'comment count'))
+      // TODO: Improve this API
+      .then((counts) => (Array.isArray(counts) ? counts : [counts]))
+  );
+};

package/src/api/index.ts

@@ -0,0 +1,6 @@
+export * from './articleCounter';
+export * from './comment';
+export * from './commentCount';
+export * from './login';
+export * from './pageview';
+export * from './recentComment';

package/src/api/login.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+export interface LoginOptions {
+  lang: string;
+  serverURL: string;
+}
+
+export interface UserInfo {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  display_name: string;
+  email: string;
+  url: string;
+  token: string;
+  avatar: string;
+  mailMd5: string;
+  objectId: string | number;
+  type: 'administrator' | 'guest';
+}
+
+export const login = ({
+  lang,
+  serverURL,
+}: LoginOptions): Promise<UserInfo & { remember: boolean }> => {
+  const width = 450;
+  const height = 450;
+  const left = (window.innerWidth - width) / 2;
+  const top = (window.innerHeight - height) / 2;
+
+  const handler = window.open(
+    `${serverURL}/ui/login?lng=${encodeURIComponent(lang)}`,
+    '_blank',
+    `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
+  );
+
+  handler?.postMessage({ type: 'TOKEN', data: null }, '*');
+
+  return new Promise((resolve) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const receiver = ({ data }: any): void => {
+      if (!data || typeof data !== 'object' || data.type !== 'userInfo') return;
+
+      if (data.data.token) {
+        handler?.close();
+
+        window.removeEventListener('message', receiver);
+
+        resolve(data.data as UserInfo & { remember: boolean });
+      }
+    };
+
+    window.addEventListener('message', receiver);
+  });
+};

package/src/api/pageview.ts

@@ -0,0 +1,41 @@
+import { fetchArticleCounter, updateArticleCounter } from './articleCounter';
+
+interface FetchPageviewOptions {
+  serverURL: string;
+  lang: string;
+  paths: string[];
+  signal: AbortSignal;
+}
+
+export const fetchPageviews = ({
+  serverURL,
+  lang,
+  paths,
+  signal,
+}: FetchPageviewOptions): Promise<number[]> =>
+  fetchArticleCounter({
+    serverURL,
+    lang,
+    paths,
+    type: ['time'],
+    signal,
+  })
+    // TODO: Improve this API
+    .then((counts) => (Array.isArray(counts) ? counts : [counts])) as Promise<
+    number[]
+  >;
+
+export interface UpdatePageviewOptions {
+  serverURL: string;
+  lang: string;
+  path: string;
+  action?: 'inc' | 'desc';
+}
+
+export const updatePageviews = (
+  options: UpdatePageviewOptions
+): Promise<number> =>
+  updateArticleCounter({
+    ...options,
+    type: 'time',
+  });

package/src/api/recentComment.ts

@@ -0,0 +1,29 @@
+import { errorCheck } from './utils';
+import type { WalineComment } from '../typings';
+
+export interface FetchRecentCommentOptions {
+  serverURL: string;
+  lang: string;
+  count: number;
+  signal: AbortSignal;
+  token?: string;
+}
+
+export const fetchRecentComment = ({
+  serverURL,
+  lang,
+  count,
+  signal,
+  token,
+}: FetchRecentCommentOptions): Promise<WalineComment[]> => {
+  const headers: Record<string, string> = {};
+
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  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'));
+};

package/src/api/utils.ts

@@ -0,0 +1,23 @@
+export interface FetchErrorData {
+  errno: number;
+  errmsg: string;
+}
+
+export const JSON_HEADERS: Record<string, string> = {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'Content-Type': 'application/json',
+};
+
+export const errorCheck = <T = unknown>(
+  data: T | FetchErrorData,
+  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
+      }`
+    );
+
+  return data as T;
+};

package/src/comment.ts

@@ -1,10 +1,5 @@
-import { useUserInfo } from './composables';
-import {
-  decodePath,
-  errorHandler,
-  fetchCommentCount,
-  getServerURL,
-} from './utils';
+import { fetchCommentCount } from './api';
+import { decodePath, errorHandler, getServerURL } from './utils';
 import type { WalineAbort } from './typings';
 
 export interface WalineCommentCountOptions {
@@ -55,8 +50,6 @@ WalineCommentCountOptions): WalineAbort => {
   // comment count
   const elements = document.querySelectorAll<HTMLElement>(selector);
 
-  const userInfo = useUserInfo();
-
   if (elements.length)
     void fetchCommentCount({
       serverURL: getServerURL(serverURL),
@@ -65,7 +58,6 @@ WalineCommentCountOptions): WalineAbort => {
       ),
       lang,
       signal: controller.signal,
-      token: userInfo.value?.token,
     })
       .then((counts) => {
         elements.forEach((element, index) => {

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,18 +1,18 @@
 <template>
-  <div v-if="reaction && reaction.length" class="wl-reaction">
-    <h4>{{ locale.reactionTitle }}</h4>
+  <div v-if="reaction.length" class="wl-reaction">
+    <h4 v-text="locale.reactionTitle" />
     <ul>
       <li
         v-for="(item, index) in reaction"
         :key="index"
-        :class="item.active ? 'active' : ''"
-        @click="onVote(index)"
+        :class="{ active: item.active }"
+        @click="vote(index)"
       >
-        <div class="wl-reaction__img">
+        <div class="wl-reaction-img">
           <img :src="item.icon" :alt="item.desc" />
-          <div class="wl-reaction__votes">{{ item.vote }}</div>
+          <div class="wl-reaction-votes">{{ item.vote }}</div>
         </div>
-        <div class="wl-reaction__text">{{ item.desc }}</div>
+        <div class="wl-reaction-text">{{ item.desc }}</div>
       </li>
     </ul>
   </div>
@@ -28,12 +28,10 @@ import {
   onUnmounted,
   ref,
 } from 'vue';
-import {
-  fetchArticleCounter,
-  updateArticleCounter,
-  WalineConfig,
-} from '../utils';
-import { useVoteStorage } from '../composables/vote';
+import { fetchArticleCounter, updateArticleCounter } from '../api';
+import { VOTE_IDENTIFIER, VOTE_INDEX, useVoteStorage } from '../composables';
+import type { WalineConfig } from '../utils';
+import type { WalineLocale } from '../typings';
 
 interface ReactionItem {
   icon: string;
@@ -46,59 +44,55 @@ export default defineComponent({
   setup() {
     const votes = ref<ReactionItem['vote'][]>([]);
     const voteStorage = useVoteStorage();
-    const config = inject<ComputedRef<WalineConfig>>(
-      'config'
-    ) as ComputedRef<WalineConfig>;
+    const config = inject<ComputedRef<WalineConfig>>('config')!;
     const locale = computed(() => config.value.locale);
     const reaction = computed((): ReactionItem[] => {
-      const { path } = config.value;
-
-      if (!Array.isArray(config.value.reaction)) {
-        return [];
-      }
+      const { reaction, path } = config.value;
 
-      return config.value.reaction.map((icon, index) => ({
+      return reaction.map((icon, index) => ({
         icon,
         vote: votes.value[index] || 0,
-        desc: locale.value[`reaction${index}` as `reaction0`],
+        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;
-      }
+      if (reaction.length) {
+        const controller = new AbortController();
 
-      const resp = await fetchArticleCounter({
-        serverURL,
-        lang,
-        paths: [path],
-        type: reaction.map((_, k) => `reaction${k}`),
-        signal: controller.signal,
-      });
+        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}`]);
+        });
 
-      if (Array.isArray(resp) || typeof resp === 'number') {
-        return;
+        abort = controller.abort.bind(controller);
       }
-
-      votes.value = reaction.map((_, k) => resp[`reaction${k}`]);
     };
 
-    const onVote = async (index: number): Promise<void> => {
+    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;
-      }
+      if (hasVotedTheReaction) return;
 
       await updateArticleCounter({
         serverURL,
@@ -109,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,
@@ -121,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)
@@ -129,12 +129,12 @@ export default defineComponent({
     };
 
     onMounted(() => fetchCounter());
-    onUnmounted(() => controller.abort());
+    onUnmounted(() => abort?.());
 
     return {
       reaction,
       locale,
-      onVote,
+      vote,
     };
   },
 });