@waline/client 2.14.9 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.14.9",
+  "version": "2.15.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -93,6 +93,16 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "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"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -111,40 +121,21 @@
   "dependencies": {
     "@vueuse/core": "^9.13.0",
     "autosize": "^6.0.1",
-    "marked": "^4.2.12",
+    "marked": "^4.3.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@babel/core": "7.21.3",
-    "@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.15.3",
-    "@vitejs/plugin-vue": "4.0.0",
+    "@vitejs/plugin-vue": "4.1.0",
     "recaptcha-v3": "1.10.0",
-    "rollup": "3.19.1",
-    "rollup-plugin-dts": "5.2.0",
-    "rollup-plugin-ts": "3.2.0",
-    "typescript": "4.9.5",
-    "user-agent-data-types": "^0.3.1",
-    "vite": "4.1.4"
+    "user-agent-data-types": "0.3.1",
+    "vite": "4.2.1"
   },
   "engines": {
     "node": ">=14"
-  },
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "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/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 }}
 
@@ -205,6 +207,7 @@
           />
 
           <ImageWall
+            v-if="searchResults.list.length"
             :items="searchResults.list"
             :column-width="200"
             :gap="6"
@@ -286,6 +289,8 @@
 import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
+  type ComputedRef,
+  type DeepReadonly,
   computed,
   inject,
   onMounted,
@@ -303,34 +308,34 @@ import {
   LoadingIcon,
   MarkdownIcon,
   PreviewIcon,
-} from './Icons';
+} from './Icons.js';
 import ImageWall from './ImageWall.vue';
 import { addComment, login, updateComment, UserInfo } from '../api/index.js';
 import {
   useEditor,
   useReCaptcha,
+  useTurnstile,
   useUserInfo,
   useUserMeta,
 } from '../composables/index.js';
 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 +487,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 +504,6 @@ const submitComment = async (): Promise<void> => {
     mail: userMeta.value.mail,
     link: userMeta.value.link,
     url: config.value.path,
-    recaptchaV3: token,
     ua,
   };
 
@@ -555,37 +562,46 @@ 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/index.ts

@@ -2,4 +2,5 @@ export * from './inputs';
 export * from './like';
 export * from './reaction';
 export * from './recaptchaV3';
+export * from './turnstile';
 export * from './userInfo';

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,49 @@
+import { useScriptTag } from '@vueuse/core';
+
+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>;
+}
+
+export const useTurnstile = (key: string): Turnstile => {
+  const execute = (action: string): Promise<string> =>
+    new Promise((resolve) => {
+      useScriptTag(
+        'https://challenges.cloudflare.com/turnstile/v0/api.js',
+        () => {
+          const turnstile = window?.turnstile;
+
+          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';
 

package/src/config/default.ts

@@ -1,10 +1,11 @@
-import type { IGif } from '@giphy/js-types';
-import type {
-  WalineEmojiPresets,
-  WalineMeta,
-  WalineSearchOptions,
-  WalineSearchResult,
-} from '../typings';
+import { type IGif } from '@giphy/js-types';
+
+import {
+  type WalineEmojiPresets,
+  type WalineMeta,
+  type WalineSearchOptions,
+  type WalineSearchResult,
+} from '../typings/index.js';
 
 const AVAILABLE_META: WalineMeta[] = ['nick', 'mail', 'link'];
 

package/src/config/i18n/generate.ts

@@ -1,4 +1,4 @@
-import type { WalineLocale } from '../../typings';
+import { type WalineLocale } from '../../typings/index.js';
 
 const localeKeys = [
   'nick',

package/src/config/i18n/index.ts

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import en from './en';
-import jp from './jp';
-import zhCN from './zh-CN';
-import zhTW from './zh-TW';
-import ptBR from './pt-BR';
-import ru from './ru';
-
-import type { WalineLocale } from '../../typings';
+import en from './en.js';
+import jp from './jp.js';
+import ptBR from './pt-BR.js';
+import ru from './ru.js';
+import zhCN from './zh-CN.js';
+import zhTW from './zh-TW.js';
+import { type WalineLocale } from '../../typings/index.js';
 
 export type Locales = Record<string, WalineLocale>;