@waline/client 2.2.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.2.0",
+  "version": "2.3.2",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -56,15 +56,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "npm run rollup && npm run style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "npm run clean && npm run build",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
-  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -80,9 +71,8 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.3.1",
+    "@vueuse/core": "^8.4.0",
     "autosize": "^5.0.1",
-    "hanabi": "^0.4.0",
     "marked": "^4.0.15",
     "vue": "^3.2.33"
   },
@@ -90,9 +80,18 @@
     "@types/autosize": "^4.0.1",
     "@types/marked": "^4.0.3",
     "@vitejs/plugin-vue": "^2.3.1",
-    "vite": "^2.9.6"
+    "vite": "^2.9.7"
   },
   "engines": {
     "node": ">=12.20.0"
+  },
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublish": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   }
-}
+}

package/src/components/CommentBox.vue

@@ -405,9 +405,7 @@ export default defineComponent({
         if (
           (requiredMeta.indexOf('mail') > -1 && !comment.mail) ||
           (comment.mail &&
-            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.){0,2}\w+$/.exec(
-              comment.mail
-            ))
+            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.)*\w+$/.exec(comment.mail))
         ) {
           inputRefs.value.mail?.focus();
           return alert(locale.value.mailError);

package/src/components/CommentCard.vue

@@ -22,10 +22,11 @@
           class="wl-badge"
           v-text="locale.admin"
         />
+        <span v-if="comment.label" class="wl-badge" v-text="comment.label" />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
         <span
           v-if="comment.level >= 0"
-          class="wl-badge"
+          :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />
 

package/src/components/Waline.vue

@@ -67,7 +67,7 @@ import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
 import { useUserInfo } from '../composables';
-import { locales } from '../config';
+import { defaultLocales } from '../config';
 import { fetchCommentList, getConfig, getDarkStyle } from '../utils';
 
 import type { PropType } from 'vue';
@@ -79,11 +79,115 @@ import type {
   WalineImageUploader,
   WalineLocale,
   WalineProps,
+  WalineMeta,
 } from '../typings';
 
 declare const SHOULD_VALIDATE: boolean;
 declare const VERSION: string;
 
+const props = [
+  'serverURL',
+  'path',
+  'meta',
+  'requiredMeta',
+  'dark',
+  'lang',
+  'locale',
+  'pageSize',
+  'wordLimit',
+  'emoji',
+  'login',
+  'highlighter',
+  'texRenderer',
+  'imageUploader',
+  'copyright',
+];
+
+const propsWithValidate = {
+  serverURL: {
+    type: String,
+    required: true,
+  },
+
+  path: {
+    type: String,
+    required: true,
+  },
+
+  meta: {
+    type: Array as PropType<WalineMeta[]>,
+    default: (): WalineMeta[] => ['nick', 'mail', 'link'],
+    validator: (value: unknown): boolean =>
+      Array.isArray(value) &&
+      value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+  },
+
+  requiredMeta: {
+    type: Array,
+    default: (): WalineMeta[] => [],
+    validator: (value: unknown): boolean =>
+      Array.isArray(value) &&
+      value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+  },
+
+  dark: [String, Boolean],
+
+  lang: {
+    type: String,
+    default: 'zh-CN',
+    validator: (value: unknown): boolean =>
+      Object.keys(defaultLocales).includes(value as string),
+  },
+
+  locale: Object as PropType<Partial<WalineLocale>>,
+
+  pageSize: { type: Number, default: 10 },
+
+  wordLimit: {
+    type: [Number, Array] as PropType<number | [number, number]>,
+    validator: (value: unknown): boolean =>
+      typeof value === 'number' ||
+      (Array.isArray(value) &&
+        value.length === 2 &&
+        value.every((item) => typeof item === 'number')),
+  },
+
+  emoji: {
+    type: [Array, Boolean] as PropType<(string | WalineEmojiInfo)[] | false>,
+    validator: (value: unknown): boolean =>
+      value === false ||
+      (Array.isArray(value) &&
+        value.every(
+          (item) =>
+            typeof item === 'string' ||
+            (typeof item === 'object' &&
+              typeof item.name === 'string' &&
+              typeof item.folder === 'string' &&
+              typeof item.icon === 'string' &&
+              Array.isArray(item.items) &&
+              (item.items as unknown[]).every(
+                (icon) => typeof icon === 'string'
+              ))
+        )),
+  },
+
+  login: String as PropType<'enable' | 'disable' | 'force'>,
+
+  highlighter: Function as PropType<WalineHighlighter>,
+
+  imageUploader: {
+    type: [Function, Boolean] as PropType<WalineImageUploader | false>,
+    default: undefined,
+  },
+
+  texRenderer: {
+    type: [Function, Boolean] as PropType<WalineTexRenderer | false>,
+    default: undefined,
+  },
+
+  copyright: { type: Boolean, default: true },
+};
+
 export default defineComponent({
   name: 'WalineRoot',
 
@@ -93,117 +197,10 @@ export default defineComponent({
     LoadingIcon,
   },
 
-  props: {
-    serverURL: {
-      type: String,
-      required: true,
-    },
-
-    path: {
-      type: String,
-      required: true,
-    },
-
-    meta: {
-      type: Array,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Array.isArray(value) &&
-              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
-          }
-        : {}),
-    },
-
-    requiredMeta: {
-      type: Array,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Array.isArray(value) &&
-              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
-          }
-        : {}),
-    },
-
-    dark: {
-      type: [String, Boolean],
-    },
-
-    lang: {
-      type: String,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Object.keys(locales).includes(value as string),
-          }
-        : {}),
-    },
-
-    locale: {
-      type: Object as PropType<Partial<WalineLocale>>,
-    },
-
-    pageSize: {
-      type: Number,
-    },
-
-    wordLimit: {
-      type: [Number, Array] as PropType<number | [number, number]>,
-      // default: 0,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              typeof value === 'number' ||
-              (Array.isArray(value) &&
-                value.length === 2 &&
-                value.every((item) => typeof item === 'number')),
-          }
-        : {}),
-    },
-
-    emoji: {
-      type: [Array, Boolean] as PropType<(string | WalineEmojiInfo)[] | false>,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              value === false ||
-              (Array.isArray(value) &&
-                value.every(
-                  (item) =>
-                    typeof item === 'string' ||
-                    (typeof item === 'object' &&
-                      typeof item.name === 'string' &&
-                      typeof item.folder === 'string' &&
-                      typeof item.icon === 'string' &&
-                      Array.isArray(item.items) &&
-                      (item.items as unknown[]).every(
-                        (icon) => typeof icon === 'string'
-                      ))
-                )),
-          }
-        : {}),
-    },
-
-    login: {
-      type: String as PropType<'enable' | 'disable' | 'force'>,
-    },
-
-    highlighter: {
-      type: Function as PropType<WalineHighlighter>,
-    },
-
-    imageUploader: {
-      type: [Function, Boolean] as PropType<WalineImageUploader | false>,
-    },
-
-    texRenderer: {
-      type: [Function, Boolean] as PropType<WalineTexRenderer | false>,
-    },
-  },
+  props: SHOULD_VALIDATE ? propsWithValidate : props,
 
   setup(props) {
-    const config = computed(() => getConfig(props as WalineProps));
+    const config = computed(() => getConfig(props as unknown as WalineProps));
 
     const userInfo = useUserInfo();
 
@@ -286,7 +283,7 @@ export default defineComponent({
 
     provide('config', config);
 
-    watch(() => props.path, refresh);
+    watch(() => (props as unknown as WalineProps).path, refresh);
 
     onMounted(() => refresh());
 

package/src/config/highlighter.ts

@@ -0,0 +1,74 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+const WORD_REGEXP =
+  /[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af\u0400-\u04FF]+|\w+/;
+const LEFT_ANGLE_REGEXP = /</;
+const LINE_COMMENT_REGEXP = /(?:^|\s)\/\/(.+?)$/gm;
+const BLOCK_COMMENT_REGEXP = /\/\*([\S\s]*?)\*\//gm;
+const REGEXP = new RegExp(
+  `(${WORD_REGEXP.source}|${LEFT_ANGLE_REGEXP.source})|((?:${LINE_COMMENT_REGEXP.source})|(?:${BLOCK_COMMENT_REGEXP.source}))`,
+  'gmi'
+);
+
+const COLORS = [
+  '23AC69',
+  '91C132',
+  'F19726',
+  'E8552D',
+  '1AAB8E',
+  'E1147F',
+  '2980C1',
+  '1BA1E6',
+  '9FA0A0',
+  'F19726',
+  'E30B20',
+  'E30B20',
+  'A3338B',
+];
+const cache: Record<string, string> = {};
+
+export const defaultHighlighter = (input: string): string => {
+  let index = 0;
+
+  return input.replace(REGEXP, (_match, word: string, comment: string) => {
+    if (comment) return `<span style="color: slategray">${comment}</span>`;
+    if (word === '<') return '&lt;';
+
+    let color: string;
+
+    if (cache[word]) color = cache[word];
+    else {
+      color = COLORS[index];
+      cache[word] = color;
+    }
+
+    const out = `<span style="color: #${color}">${word}</span>`;
+
+    index = ++index % COLORS.length;
+
+    return out;
+  });
+};

package/src/config/i18n/index.ts

@@ -10,7 +10,7 @@ import type { WalineLocale } from '../../typings';
 
 export type Locales = Record<string, WalineLocale>;
 
-export const locales: Locales = {
+export const defaultLocales: Locales = {
   zh: zhCN,
   'zh-cn': zhCN,
   'zh-CN': zhCN,

package/src/config/index.ts

@@ -1,2 +1,3 @@
 export * from './default';
+export * from './highlighter';
 export * from './i18n';

package/src/entrys/full.ts

@@ -1,4 +1,4 @@
-export * from '../config';
+export { defaultLocales } from '../config';
 export * from '../comment';
 export * from '../init';
 export * from '../pageview';

package/src/entrys/init.ts

@@ -1,4 +1,4 @@
 export * from '../init';
-export * from '../config';
+export { defaultLocales } from '../config';
 export * from '../typings';
 export * from '../version';

package/src/typings/base.ts

@@ -43,12 +43,6 @@ export type WalineMeta = 'nick' | 'mail' | 'link';
 
 export type WalineImageUploader = (image: File) => Promise<string>;
 
-export type WalineHighlighter =
-  | ((code: string, lang: string) => string)
-  | ((
-      code: string,
-      lang: string,
-      callback?: (error: unknown | undefined, code?: string) => void
-    ) => void);
+export type WalineHighlighter = (code: string, lang: string) => string;
 
 export type WalineTexRenderer = (blockMode: boolean, tex: string) => string;

package/src/typings/comment.ts

@@ -24,4 +24,5 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   os?: string;
   level?: number;
   addr?: string;
+  label?: string;
 }

package/src/typings/locale.ts

@@ -6,7 +6,16 @@ export interface WalineDateLocale {
   now: string;
 }
 
-export interface WalineLocale extends WalineDateLocale {
+export interface WalineLevelLocale {
+  level0: string;
+  level1: string;
+  level2: string;
+  level3: string;
+  level4: string;
+  level5: string;
+}
+
+export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   nick: string;
   nickError: string;
   mail: string;

package/src/utils/config.ts

@@ -1,9 +1,10 @@
 import {
   defaultLang,
   defaultUploadImage,
+  defaultHighlighter,
   defaultTexRenderer,
   getMeta,
-  locales,
+  defaultLocales,
 } from '../config';
 
 import { decodePath, isLinkHttp, removeEndingSplash } from './path';
@@ -14,7 +15,6 @@ import type {
   WalineLocale,
   WalineProps,
 } from '../typings';
-import hanabi from 'hanabi';
 
 export interface WalineEmojiConfig {
   tabs: Pick<WalineEmojiInfo, 'name' | 'icon' | 'items'>[];
@@ -66,14 +66,14 @@ export const getConfig = ({
   serverURL: getServerURL(serverURL),
   path: decodePath(path),
   locale: {
-    ...(locales[lang] || locales[defaultLang]),
+    ...(defaultLocales[lang] || defaultLocales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
   },
   wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),
   imageUploader: fallback(imageUploader, defaultUploadImage),
-  highlighter: fallback(highlighter, hanabi),
+  highlighter: fallback(highlighter, defaultHighlighter),
   texRenderer: fallback(texRenderer, defaultTexRenderer),
   lang,
   dark,

package/src/shims-hanabi.d.ts

@@ -1,9 +0,0 @@
-declare module 'hanabi' {
-  const hanabi: (
-    code: string,
-    lang: string,
-    callback?: (error: unknown, code?: string | undefined) => void
-  ) => string | void;
-
-  export default hanabi;
-}