@waline/client 2.15.0 → 2.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.15.0",
+  "version": "2.15.2",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -93,16 +93,6 @@
     "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%",
@@ -119,7 +109,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.1.0",
     "autosize": "^6.0.1",
     "marked": "^4.3.0",
     "vue": "^3.2.47"
@@ -133,9 +123,18 @@
     "@vitejs/plugin-vue": "4.1.0",
     "recaptcha-v3": "1.10.0",
     "user-agent-data-types": "0.3.1",
-    "vite": "4.2.1"
+    "vite": "4.3.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/components/CommentBox.vue

@@ -207,6 +207,7 @@
           />
 
           <ImageWall
+            v-if="searchResults.list.length"
             :items="searchResults.list"
             :column-width="200"
             :gap="6"
@@ -313,10 +314,10 @@ import { addComment, login, updateComment, UserInfo } from '../api/index.js';
 import {
   useEditor,
   useReCaptcha,
+  useTurnstile,
   useUserInfo,
   useUserMeta,
 } from '../composables/index.js';
-import { useTurnstile } from '../composables/turnstile';
 import {
   type WalineComment,
   type WalineCommentData,
@@ -563,7 +564,9 @@ const submitComment = async (): Promise<void> => {
 
   try {
     if (recaptchaV3Key)
-      comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute('social');
+      comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute(
+        'social'
+      );
 
     if (turnstileKey)
       comment.turnstile = await useTurnstile(turnstileKey).execute('social');

package/src/components/WalineComment.vue

@@ -160,7 +160,7 @@ const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
 
 const i18n = computed(() => config.value.locale);
 
-useStyleTag(darkmodeStyle);
+useStyleTag(darkmodeStyle, { id: 'waline-darkmode' });
 
 let abort: () => void;
 

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/turnstile.ts

@@ -1,3 +1,5 @@
+import { useScriptTag } from '@vueuse/core';
+
 interface TurnstileOptions {
   sitekey: string;
   action?: string;
@@ -19,61 +21,29 @@ 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)
+  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 };
 };