@waline/client 2.14.8 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.14.8",
+  "version": "2.15.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -121,29 +121,19 @@
   "dependencies": {
     "@vueuse/core": "^9.13.0",
     "autosize": "^6.0.1",
-    "marked": "^4.2.12",
-    "user-agent-data-types": "^0.3.1",
+    "marked": "^4.3.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@babel/core": "7.21.0",
-    "@babel/preset-env": "7.20.2",
+    "@babel/core": "7.21.4",
+    "@babel/preset-env": "7.21.4",
     "@giphy/js-types": "4.4.0",
-    "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
-    "@rollup/plugin-node-resolve": "15.0.1",
-    "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-terser": "0.4.0",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.8",
-    "@types/node": "18.14.2",
-    "@vitejs/plugin-vue": "4.0.0",
+    "@vitejs/plugin-vue": "4.1.0",
     "recaptcha-v3": "1.10.0",
-    "rollup": "3.17.3",
-    "rollup-plugin-dts": "5.2.0",
-    "rollup-plugin-ts": "3.2.0",
-    "typescript": "4.9.5",
-    "vite": "4.1.4"
+    "user-agent-data-types": "0.3.1",
+    "vite": "4.2.1"
   },
   "engines": {
     "node": ">=14"

package/src/api/articleCounter.ts

@@ -1,5 +1,4 @@
-import { JSON_HEADERS } from './utils';
-import type { BaseAPIOptions } from './utils';
+import { type BaseAPIOptions, JSON_HEADERS } from './utils.js';
 
 export interface GetArticleCounterOptions extends BaseAPIOptions {
   /**

package/src/api/comment.ts

@@ -1,6 +1,13 @@
-import { JSON_HEADERS, errorCheck } from './utils';
-import type { BaseAPIOptions, ErrorStatusResponse } from './utils';
-import type { WalineComment, WalineCommentData } from '../typings';
+import {
+  type BaseAPIOptions,
+  type ErrorStatusResponse,
+  JSON_HEADERS,
+  errorCheck,
+} from './utils.js';
+import {
+  type WalineComment,
+  type WalineCommentData,
+} from '../typings/index.js';
 
 export interface GetCommentOptions extends BaseAPIOptions {
   /**

package/src/api/commentCount.ts

@@ -1,4 +1,4 @@
-import type { BaseAPIOptions } from './utils';
+import { type BaseAPIOptions } from './utils.js';
 
 export interface GetCommentCountOptions extends BaseAPIOptions {
   /**

package/src/api/login.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import type { BaseAPIOptions } from './utils';
+import { type BaseAPIOptions } from './utils.js';
 
 export interface UserInfo {
   /**

package/src/api/pageview.ts

@@ -1,5 +1,5 @@
-import { getArticleCounter, updateArticleCounter } from './articleCounter';
-import type { BaseAPIOptions } from './utils';
+import { getArticleCounter, updateArticleCounter } from './articleCounter.js';
+import { type BaseAPIOptions } from './utils.js';
 
 interface GetPageviewOptions extends BaseAPIOptions {
   /**

package/src/api/recentComment.ts

@@ -1,5 +1,5 @@
-import type { BaseAPIOptions } from './utils';
-import type { WalineComment } from '../typings';
+import { type BaseAPIOptions } from './utils.js';
+import { type WalineComment } from '../typings/index.js';
 
 export interface GetRecentCommentOptions extends BaseAPIOptions {
   /**

package/src/api/user.ts

@@ -1,6 +1,9 @@
-import { errorCheck, ErrorStatusResponse } from './utils';
-import type { BaseAPIOptions } from './utils';
-import type { WalineComment } from '../typings';
+import {
+  type BaseAPIOptions,
+  errorCheck,
+  ErrorStatusResponse,
+} from './utils.js';
+import { type WalineComment } from '../typings/index.js';
 
 export interface GetUserListOptions extends BaseAPIOptions {
   /**

package/src/comment.ts

@@ -1,6 +1,6 @@
-import { fetchCommentCount } from './api';
-import { decodePath, errorHandler, getServerURL } from './utils';
-import type { WalineAbort } from './typings';
+import { fetchCommentCount } from './api/index.js';
+import { type WalineAbort } from './typings/index.js';
+import { decodePath, errorHandler, getServerURL } from './utils/index.js';
 
 export interface WalineCommentCountOptions {
   /**

package/src/compact/convert.ts

@@ -1,13 +1,12 @@
-import { warning } from './logger';
-import { resolveOldEmojiMap } 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';
+} from './dropped.js';
+import { warning } from './logger.js';
+import { type DeprecatedWalineOptions } from './v1.js';
+import { resolveOldEmojiMap } from './valine.js';
+import { type DeprecatedValineOptions } from './valine.js';
+import { type WalineInitOptions } from '../typings/index.js';
 
 export const covertOptions = (
   options: WalineInitOptions & DeprecatedValineOptions & DeprecatedWalineOptions

package/src/compact/v1.ts

@@ -1,8 +1,8 @@
-import type {
-  WalineHighlighter,
-  WalineImageUploader,
-  WalineTexRenderer,
-} from '../typings';
+import {
+  type WalineHighlighter,
+  type WalineImageUploader,
+  type WalineTexRenderer,
+} from '../typings/index.js';
 
 export interface DeprecatedWalineOptions {
   /**

package/src/compact/valine.ts

@@ -1,9 +1,9 @@
-import type {
-  WalineEmojiInfo,
-  WalineEmojiMaps,
-  WalineLocale,
-  WalineMeta,
-} from '../typings';
+import {
+  type WalineEmojiInfo,
+  type WalineEmojiMaps,
+  type WalineLocale,
+  type WalineMeta,
+} from '../typings/index.js';
 
 export type DeprecatedAvatar =
   | ''

package/src/components/ArticleReaction.vue

@@ -32,15 +32,14 @@
 </template>
 
 <script setup lang="ts">
+import { type ComputedRef } from 'vue';
 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';
+import { type WalineReactionLocale } from '../typings/index.js';
+import { type WalineConfig } from '../utils/index.js';
 
 defineExpose();
 

package/src/components/CommentBox.vue

@@ -154,6 +154,8 @@
         </div>
 
         <div class="wl-info">
+          <div class="wl-captcha-container"></div>
+
           <div class="wl-text-number">
             {{ wordNumber }}
 
@@ -286,6 +288,8 @@
 import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
+  type ComputedRef,
+  type DeepReadonly,
   computed,
   inject,
   onMounted,
@@ -303,7 +307,7 @@ import {
   LoadingIcon,
   MarkdownIcon,
   PreviewIcon,
-} from './Icons';
+} from './Icons.js';
 import ImageWall from './ImageWall.vue';
 import { addComment, login, updateComment, UserInfo } from '../api/index.js';
 import {
@@ -312,25 +316,25 @@ import {
   useUserInfo,
   useUserMeta,
 } from '../composables/index.js';
+import { useTurnstile } from '../composables/turnstile';
+import {
+  type WalineComment,
+  type WalineCommentData,
+  type WalineImageUploader,
+  type WalineSearchOptions,
+  type WalineSearchResult,
+} from '../typings/index.js';
 import {
+  type WalineConfig,
+  type WalineEmojiConfig,
   getEmojis,
   getImageFromDataTransfer,
   getWordNumber,
   parseEmoji,
   parseMarkdown,
+  userAgent,
 } from '../utils/index.js';
 
-import type { ComputedRef, DeepReadonly } from 'vue';
-import type {
-  WalineComment,
-  WalineCommentData,
-  WalineImageUploader,
-  WalineSearchOptions,
-  WalineSearchResult,
-} from '../typings/index.js';
-import type { WalineConfig, WalineEmojiConfig } from '../utils/index.js';
-import { userAgent } from '../utils/userAgent';
-
 const props = withDefaults(
   defineProps<{
     /**
@@ -482,12 +486,15 @@ const onChange = (): void => {
 };
 
 const submitComment = async (): Promise<void> => {
-  const { serverURL, lang, login, wordLimit, requiredMeta } = config.value;
-
-  let token = '';
-
-  if (config.value.recaptchaV3Key)
-    token = await useReCaptcha(config.value.recaptchaV3Key).execute('social');
+  const {
+    serverURL,
+    lang,
+    login,
+    wordLimit,
+    requiredMeta,
+    recaptchaV3Key,
+    turnstileKey,
+  } = config.value;
 
   const ua = await userAgent();
   const comment: WalineCommentData = {
@@ -496,7 +503,6 @@ const submitComment = async (): Promise<void> => {
     mail: userMeta.value.mail,
     link: userMeta.value.link,
     url: config.value.path,
-    recaptchaV3: token,
     ua,
   };
 
@@ -527,14 +533,14 @@ const submitComment = async (): Promise<void> => {
       return alert(locale.value.mailError);
     }
 
-    // check comment
-    if (!comment.comment) {
-      editorRef.value?.focus();
+    if (!comment.nick) comment.nick = locale.value.anonymous;
+  }
 
-      return;
-    }
+  // check comment
+  if (!comment.comment) {
+    editorRef.value?.focus();
 
-    if (!comment.nick) comment.nick = locale.value.anonymous;
+    return;
   }
 
   if (!isWordNumberLegal.value)
@@ -555,37 +561,44 @@ const submitComment = async (): Promise<void> => {
 
   isSubmitting.value = true;
 
-  const options = {
-    serverURL,
-    lang,
-    token: userInfo.value?.token,
-    comment,
-  };
+  try {
+    if (recaptchaV3Key)
+      comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute('social');
 
-  void (
-    props.edit
-      ? updateComment({ objectId: props.edit.objectId, ...options })
-      : addComment(options)
-  )
-    .then((resp) => {
-      isSubmitting.value = false;
+    if (turnstileKey)
+      comment.turnstile = await useTurnstile(turnstileKey).execute('social');
 
-      if (resp.errmsg) return alert(resp.errmsg);
+    const options = {
+      serverURL,
+      lang,
+      token: userInfo.value?.token,
+      comment,
+    };
 
-      emit('submit', resp.data!);
+    const resp = await (props.edit
+      ? updateComment({
+          objectId: props.edit.objectId,
+          ...options,
+        })
+      : addComment(options));
 
-      editor.value = '';
+    isSubmitting.value = false;
 
-      previewText.value = '';
+    if (resp.errmsg) return alert(resp.errmsg);
 
-      if (props.replyId) emit('cancelReply');
-      if (props.edit?.objectId) emit('cancelEdit');
-    })
-    .catch((err: TypeError) => {
-      isSubmitting.value = false;
+    emit('submit', resp.data!);
 
-      alert(err.message);
-    });
+    editor.value = '';
+
+    previewText.value = '';
+
+    if (props.replyId) emit('cancelReply');
+    if (props.edit?.objectId) emit('cancelEdit');
+  } catch (err: unknown) {
+    isSubmitting.value = false;
+
+    alert((err as TypeError).message);
+  }
 };
 
 const onLogin = (event: Event): void => {

package/src/components/CommentCard.vue

@@ -13,7 +13,7 @@
           class="wl-nick"
           :href="link"
           target="_blank"
-          rel="noopener noreferrer"
+          rel="nofollow noopener noreferrer"
           >{{ comment.nick }}</a
         >
 
@@ -177,7 +177,8 @@
 
 <script setup lang="ts">
 import { useNow } from '@vueuse/core';
-import { computed, inject } from 'vue';
+import { type ComputedRef, computed, inject } from 'vue';
+
 import CommentBox from './CommentBox.vue';
 import {
   DeleteIcon,
@@ -186,12 +187,12 @@ import {
   ReplyIcon,
   VerifiedIcon,
 } from './Icons.js';
-import { getTimeAgo, isLinkHttp } from '../utils';
 import { useLikeStorage, useUserInfo } from '../composables/index.js';
-
-import type { ComputedRef } from 'vue';
-import type { WalineConfig } from '../utils/index.js';
-import type { WalineComment, WalineCommentStatus } from '../typings/index.js';
+import {
+  type WalineComment,
+  type WalineCommentStatus,
+} from '../typings/index.js';
+import { type WalineConfig, getTimeAgo, isLinkHttp } from '../utils/index.js';
 
 const props = withDefaults(
   defineProps<{

package/src/components/Icons.ts

@@ -1,5 +1,4 @@
-import { h } from 'vue';
-import type { FunctionalComponent } from 'vue';
+import { type FunctionalComponent, h } from 'vue';
 
 export const CloseIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
   h(
@@ -127,7 +126,9 @@ export const VerifiedIcon: FunctionalComponent = () =>
     })
   );
 
-export const LoadingIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
+export const LoadingIcon: FunctionalComponent<{ size?: number }> = ({
+  size = 100,
+}) =>
   h(
     'svg',
     {

package/src/components/ImageWall.vue

@@ -59,8 +59,7 @@
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { LoadingIcon } from './Icons.js';
-
-import type { WalineSearchResult } from '../typings/index.js';
+import { type WalineSearchResult } from '../typings/index.js';
 
 type Column = number[];
 

package/src/components/WalineComment.vue

@@ -90,22 +90,22 @@
 /* eslint-disable vue/require-prop-types */
 import { useStyleTag } from '@vueuse/core';
 import { computed, 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.js';
 import { deleteComment, getComment, updateComment } from '../api/index.js';
 import { useUserInfo, useLikeStorage } from '../composables/index.js';
+import {
+  type WalineComment,
+  type WalineCommentSorting,
+  type WalineCommentStatus,
+  type WalineProps,
+} from '../typings/index.js';
 import { getConfig, getDarkStyle } from '../utils/index.js';
 import { version } from '../version.js';
 
-import type {
-  WalineComment,
-  WalineCommentSorting,
-  WalineCommentStatus,
-  WalineProps,
-} from '../typings/index.js';
-
 type SortKey = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
 
 const props = defineProps([
@@ -127,6 +127,7 @@ const props = defineProps([
   'search',
   'copyright',
   'recaptchaV3Key',
+  'turnstileKey',
   'reaction',
 ]);
 

package/src/composables/inputs.ts

@@ -1,5 +1,4 @@
-import { useStorage } from '@vueuse/core';
-import type { RemovableRef } from '@vueuse/core';
+import { type RemovableRef, useStorage } from '@vueuse/core';
 
 export interface UserMeta {
   nick: string;

package/src/composables/like.ts

@@ -1,6 +1,5 @@
 import { useStorage } from '@vueuse/core';
-
-import type { Ref } from 'vue';
+import { type Ref } from 'vue';
 
 const LIKE_KEY = 'WALINE_LIKE';
 

package/src/composables/reaction.ts

@@ -1,6 +1,5 @@
 import { useStorage } from '@vueuse/core';
-
-import type { Ref } from 'vue';
+import { type Ref } from 'vue';
 
 const REACTION_KEY = 'WALINE_REACTION';
 

package/src/composables/recaptchaV3.ts

@@ -1,6 +1,4 @@
-import { load } from 'recaptcha-v3';
-
-import type { ReCaptchaInstance } from 'recaptcha-v3';
+import { type ReCaptchaInstance, load } from 'recaptcha-v3';
 
 const recaptchaStore: Record<string, Promise<ReCaptchaInstance>> = {};
 

package/src/composables/turnstile.ts

@@ -0,0 +1,79 @@
+interface TurnstileOptions {
+  sitekey: string;
+  action?: string;
+  size?: 'normal' | 'compact';
+  callback?: (token: string) => void;
+}
+interface TurnstileInstance {
+  ready: (fn: () => void) => void;
+  render: (className: string, options?: TurnstileOptions) => void;
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileInstance;
+  }
+}
+
+interface Turnstile {
+  execute: (action: string) => Promise<string>;
+}
+
+interface LoadScriptParameters {
+  src: string;
+  async?: boolean;
+  defer?: boolean;
+}
+
+const isBrowser =
+  typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
+async function loadScript(
+  options: LoadScriptParameters
+): Promise<Event | undefined> {
+  if (!isBrowser) {
+    return Promise.resolve(undefined);
+  }
+
+  const el = document.createElement('script');
+
+  el.async = Boolean(options.async);
+  el.defer = Boolean(options.defer);
+
+  return new Promise((resolve, reject) => {
+    el.onload = resolve;
+    el.onerror = reject;
+    el.src = options.src;
+
+    document.head.appendChild(el);
+  });
+}
+
+const turnstileScriptPromise = loadScript({
+  src: 'https://challenges.cloudflare.com/turnstile/v0/api.js',
+  async: false,
+});
+
+export const useTurnstile = (key: string): Turnstile => {
+  async function execute(action: string): Promise<string> {
+    await turnstileScriptPromise;
+    const turnstile = window?.turnstile;
+
+    return new Promise((resolve) => {
+      const options: TurnstileOptions = {
+        sitekey: key,
+        action,
+        size: 'compact',
+        callback(token: string): void {
+          resolve(token);
+        },
+      };
+
+      turnstile?.ready(() =>
+        turnstile?.render('.wl-captcha-container', options)
+      );
+    });
+  }
+
+  return { execute };
+};

package/src/composables/userInfo.ts

@@ -1,7 +1,7 @@
 import { useStorage } from '@vueuse/core';
+import { type Ref } from 'vue';
 
-import type { Ref } from 'vue';
-import type { UserInfo } from '../api';
+import { type UserInfo } from '../api/index.js';
 
 export const USER_KEY = 'WALINE_USER';