@waline/client 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -9,9 +9,15 @@
     "blog"
   ],
   "repository": {
-    "url": "https://github.com/walinejs/waline"
+    "url": "https://github.com/walinejs/waline",
+    "directory": "packages/client"
   },
   "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "mister-hope@outlook.com",
+    "url": "https://mrhope.site"
+  },
   "exports": {
     ".": {
       "import": "./dist/shim.esm.js",
@@ -53,14 +59,15 @@
     ]
   },
   "dependencies": {
-    "autosize": "5.0.1",
-    "hanabi": "0.4.0",
-    "marked": "4.0.14",
-    "vue": "3.2.33"
+    "@vueuse/core": "^8.3.1",
+    "autosize": "^5.0.1",
+    "hanabi": "^0.4.0",
+    "marked": "^4.0.14",
+    "vue": "^3.2.33"
   },
   "devDependencies": {
-    "@types/autosize": "4.0.1",
-    "@types/marked": "4.0.3"
+    "@types/autosize": "^4.0.1",
+    "@types/marked": "^4.0.3"
   },
   "engines": {
     "node": ">=12.20.0"

package/src/comment.ts

@@ -40,7 +40,7 @@ WalineCommentCountOptions): WalineAbort => {
   // comment count
   const elements = document.querySelectorAll<HTMLElement>(selector);
 
-  const { userInfo } = useUserInfo();
+  const userInfo = useUserInfo();
 
   if (elements.length)
     void fetchCommentCount({

package/src/components/CommentBox.vue

@@ -273,8 +273,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const config = inject<ComputedRef<Config>>('config') as ComputedRef<Config>;
 
-    const { inputs, store } = useInputs();
-    const { userInfo, setUserInfo } = useUserInfo();
+    const inputs = useInputs();
+    const userInfo = useUserInfo();
 
     const inputRefs = ref<Record<string, HTMLInputElement>>({});
     const editorRef = ref<HTMLTextAreaElement | null>(null);
@@ -308,7 +308,7 @@ export default defineComponent({
       const endPosition = textArea.selectionEnd || 0;
       const scrollTop = textArea.scrollTop;
 
-      inputs.editor =
+      inputs.value.editor =
         textArea.value.substring(0, startPosition) +
         content +
         textArea.value.substring(endPosition, textArea.value.length);
@@ -333,7 +333,7 @@ export default defineComponent({
       return Promise.resolve()
         .then(() => (config.value.imageUploader as WalineImageUploader)(file))
         .then((url) => {
-          inputs.editor = inputs.editor.replace(
+          inputs.value.editor = inputs.value.editor.replace(
             uploadText,
             `\r\n![${file.name}](${url})`
           );
@@ -374,9 +374,9 @@ export default defineComponent({
 
       const comment: WalineCommentData = {
         comment: content.value,
-        nick: inputs.nick,
-        mail: inputs.mail,
-        link: inputs.link,
+        nick: inputs.value.nick,
+        mail: inputs.value.mail,
+        link: inputs.value.link,
         ua: navigator.userAgent,
         url: config.value.path,
       };
@@ -441,18 +441,12 @@ export default defineComponent({
         .then((resp) => {
           isSubmitting.value = false;
 
-          store.update({
-            nick: comment.nick,
-            link: comment.link,
-            mail: comment.mail,
-          });
-
           if (resp.errmsg) return alert(resp.errmsg);
 
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           emit('submit', resp.data!);
 
-          inputs.editor = '';
+          inputs.value.editor = '';
 
           previewText.value = '';
 
@@ -488,7 +482,7 @@ export default defineComponent({
 
         if (data.data.token) {
           handler?.close();
-          setUserInfo(data.data);
+          userInfo.value = data.data;
           (data.data.remember ? localStorage : sessionStorage).setItem(
             'WALINE_USER',
             JSON.stringify(data.data)
@@ -502,7 +496,7 @@ export default defineComponent({
     };
 
     const onLogout = (): void => {
-      setUserInfo({});
+      userInfo.value = {};
       localStorage.setItem('WALINE_USER', 'null');
       sessionStorage.setItem('WALINE_USER', 'null');
     };
@@ -529,7 +523,8 @@ export default defineComponent({
       const receiver = ({ data }: any): void => {
         if (!data || data.type !== 'profile') return;
 
-        setUserInfo(Object.assign({}, userInfo.value, data));
+        userInfo.value = { ...userInfo.value, ...data };
+
         [localStorage, sessionStorage]
           .filter((store) => store.getItem('WALINE_USER'))
           .forEach((store) =>
@@ -551,7 +546,7 @@ export default defineComponent({
 
     // watch editor
     watch(
-      () => inputs.editor,
+      () => inputs.value.editor,
       (value) => {
         const { highlighter, texRenderer } = config.value;
 

package/src/components/CommentCard.vue

@@ -24,7 +24,7 @@
         />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
 
-        <span class="wl-time" v-text="timeAgo(comment.insertedAt, locale)" />
+        <span class="wl-time" v-text="time" />
 
         <button
           class="wl-reply"
@@ -69,7 +69,8 @@
 import { computed, defineComponent, inject } from 'vue';
 import CommentBox from './CommentBox.vue';
 import { ReplyIcon, VerifiedIcon } from './Icons';
-import { isLinkHttp, timeAgo } from '../utils';
+import { isLinkHttp } from '../utils';
+import { useTimeAgo } from '../composables';
 
 import type { ComputedRef, PropType } from 'vue';
 import type { Config } from '../utils';
@@ -108,6 +109,8 @@ export default defineComponent({
       return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
     });
 
+    const time = useTimeAgo(props.comment.insertedAt, locale.value);
+
     const isReplyingCurrent = computed(
       () => props.comment.objectId === props.reply?.objectId
     );
@@ -118,7 +121,7 @@ export default defineComponent({
 
       isReplyingCurrent,
       link,
-      timeAgo,
+      time,
     };
   },
 });

package/src/components/Waline.vue

@@ -114,7 +114,6 @@ export default defineComponent({
 
     meta: {
       type: Array,
-      // default: (): Meta[] => ['nick', 'mail', 'link'],
       ...(SHOULD_VALIDATE
         ? {
             validator: (value: unknown): boolean =>
@@ -126,7 +125,6 @@ export default defineComponent({
 
     requiredMeta: {
       type: Array,
-      // default: (): Meta[] => [],
       ...(SHOULD_VALIDATE
         ? {
             validator: (value: unknown): boolean =>
@@ -138,17 +136,14 @@ export default defineComponent({
 
     visitor: {
       type: Boolean,
-      // default: false,
     },
 
     dark: {
       type: [String, Boolean],
-      // default: false,
     },
 
     lang: {
       type: String,
-      // default: 'zh-CN',
       ...(SHOULD_VALIDATE
         ? {
             validator: (value: unknown): boolean =>
@@ -163,7 +158,6 @@ export default defineComponent({
 
     pageSize: {
       type: Number,
-      // default: 10,
     },
 
     wordLimit: {
@@ -182,9 +176,6 @@ export default defineComponent({
 
     emoji: {
       type: Array as PropType<(string | WalineEmojiInfo)[]>,
-      // default: (): string[] => [
-      //   'https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo',
-      // ],
       ...(SHOULD_VALIDATE
         ? {
             validator: (value: unknown): boolean =>
@@ -207,38 +198,25 @@ export default defineComponent({
 
     login: {
       type: String as PropType<'enable' | 'disable' | 'force'>,
-      // default: 'enable',
     },
 
     highlighter: {
       type: Function as PropType<WalineHighlighter>,
-      // default: (text: string): string => text,
     },
 
     imageUploader: {
-      type: [Function, false] as PropType<WalineImageUploader>,
-      // default: (file: File): Promise<string> =>
-      //   new Promise((resolve, reject) => {
-      //     const reader = new FileReader();
-      //     reader.readAsDataURL(file);
-      //     reader.onload = (): void => resolve(reader.result?.toString() || '');
-      //     reader.onerror = reject;
-      //   }),
+      type: [Function, Boolean] as PropType<WalineImageUploader | false>,
     },
 
     texRenderer: {
-      type: Function as PropType<WalineTexRenderer>,
-      // default: (blockMode: boolean): string =>
-      //   blockMode === true
-      //     ? '<p class="wl-tex">Tex is not available in preview</p>'
-      //     : '<span class="wl-tex">Tex is not available in preview</span>',
+      type: [Function, Boolean] as PropType<WalineTexRenderer | false>,
     },
   },
 
   setup(props) {
     const config = computed(() => getConfig(props as WalineProps));
 
-    const { userInfo } = useUserInfo();
+    const userInfo = useUserInfo();
 
     const status = ref<'loading' | 'success' | 'error'>('loading');
 

package/src/composables/index.ts

@@ -1,3 +1,3 @@
 export * from './inputs';
+export * from './timeAgo';
 export * from './userInfo';
-export * from './store';

package/src/composables/inputs.ts

@@ -1,7 +1,5 @@
-import { reactive } from 'vue';
-import { useStore } from './store';
-
-import type { Store } from './store';
+import { useStorage } from '@vueuse/core';
+import type { RemovableRef } from '@vueuse/core';
 
 export interface Inputs {
   nick: string;
@@ -10,20 +8,10 @@ export interface Inputs {
   editor: string;
 }
 
-let store: Store;
-let inputs: Inputs;
-
-export const useInputs = (): { inputs: Inputs; store: Store } => {
-  if (!inputs) {
-    store = useStore('WALINE_USER_CACHE');
-
-    inputs = reactive({
-      nick: store.get<string>('nick') || '',
-      mail: store.get<string>('mail') || '',
-      link: store.get<string>('link') || '',
-      editor: '',
-    });
-  }
-
-  return { inputs, store };
-};
+export const useInputs = (): RemovableRef<Inputs> =>
+  useStorage<Inputs>('WALINE_USER_CACHE', {
+    nick: '',
+    mail: '',
+    link: '',
+    editor: '',
+  });

package/src/composables/timeAgo.ts

@@ -0,0 +1,61 @@
+import { useNow } from '@vueuse/core';
+import { computed } from 'vue';
+import { dateFormat } from '../utils';
+
+import type { ComputedRef } from 'vue';
+import type { WalineLocale } from '../typings';
+
+export const useTimeAgo = (
+  date: Date | string,
+  locale: WalineLocale
+): ComputedRef<string> => {
+  const now = useNow();
+
+  return computed(() => {
+    if (!date) return '';
+
+    const time =
+      typeof date === 'string'
+        ? new Date(date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date)
+        : date;
+
+    const timepassed = now.value.getTime() - time.getTime();
+
+    const days = Math.floor(timepassed / (24 * 3600 * 1000));
+
+    if (days === 0) {
+      // 计算相差小时数
+
+      // 计算天数后剩余的毫秒数
+      const leave1 = timepassed % (24 * 3600 * 1000);
+      const hours = Math.floor(leave1 / (3600 * 1000));
+
+      if (hours === 0) {
+        //计算相差分钟数
+
+        // 计算小时数后剩余的毫秒数
+        const leave2 = leave1 % (3600 * 1000);
+        const minutes = Math.floor(leave2 / (60 * 1000));
+
+        // 计算相差秒数
+        if (minutes === 0) {
+          // 计算分钟数后剩余的毫秒数
+          const leave3 = leave2 % (60 * 1000);
+          const seconds = Math.round(leave3 / 1000);
+
+          return `${seconds} ${locale.seconds}`;
+        }
+
+        return `${minutes} ${locale.minutes}`;
+      }
+
+      return `${hours} ${locale.hours}`;
+    }
+
+    if (days < 0) return locale.now;
+
+    if (days < 8) return `${days} ${locale.days}`;
+
+    return dateFormat(time);
+  });
+};

package/src/composables/userInfo.ts

@@ -1,27 +1,20 @@
-import { readonly, ref } from 'vue';
-import { getUserInfo } from '../utils';
+import { useStorage } from '@vueuse/core';
 
 import type { Ref } from 'vue';
-import type { UserInfo } from '../utils';
 
-export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
-
-const userInfo: UserInfoRef = ref({});
+export interface UserInfo {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  display_name: string;
+  email: string;
+  url: string;
+  token: string;
+  avatar: string;
+  mailMd5: string;
+}
 
-export const useUserInfo = (): {
-  userInfo: UserInfoRef;
-  setUserInfo: (userInfo: UserInfo | Record<string, never>) => void;
-} => {
-  if (!userInfo.value.token) {
-    const info = getUserInfo();
+export const USER_KEY = 'WALINE_USER';
 
-    if (info) userInfo.value = info;
-  }
+export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 
-  return {
-    userInfo: readonly(userInfo),
-    setUserInfo: (info: UserInfo | Record<string, never>): void => {
-      userInfo.value = info;
-    },
-  };
-};
+export const useUserInfo = (): UserInfoRef =>
+  useStorage<UserInfo | Record<string, never>>('USER_KEY', {});

package/src/init.ts

@@ -97,7 +97,7 @@ export const init = ({
       path = window.location.pathname,
       ...newProps
     }: Partial<Omit<WalineInitOptions, 'el'>>): void => {
-      Object.entries(newProps).map(([key, value]) => {
+      Object.entries(newProps).forEach(([key, value]) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         // eslint-disable-next-line

package/src/utils/date.ts

@@ -0,0 +1,17 @@
+const padWithZeros = (vNumber: number, width: number): string => {
+  let numAsString = vNumber.toString();
+
+  while (numAsString.length < width) {
+    numAsString = '0' + numAsString;
+  }
+
+  return numAsString;
+};
+
+export const dateFormat = (date: Date): string => {
+  const vDay = padWithZeros(date.getDate(), 2);
+  const vMonth = padWithZeros(date.getMonth() + 1, 2);
+  const vYear = padWithZeros(date.getFullYear(), 2);
+
+  return `${vYear}-${vMonth}-${vDay}`;
+};

package/src/utils/emoji.ts

@@ -1,21 +1,23 @@
-import { Store, useStore } from '../composables/store';
+import { useStorage } from '@vueuse/core';
 import { removeEndingSplash } from './path';
 
 import type { EmojiConfig } from './config';
 import type { WalineEmojiInfo } from '../typings';
 
-let store: Store;
-
 const hasVersion = (url: string): boolean =>
   Boolean(/@[0-9]+\.[0-9]+\.[0-9]+/.test(url));
 
 const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
-  if (!store) store = useStore('WALINE_EMOJI');
+  const emojiStore = useStorage<Record<string, WalineEmojiInfo>>(
+    'WALINE_EMOJI',
+    {}
+  );
 
   const result = hasVersion(link);
 
   if (result) {
-    const info = store.get<WalineEmojiInfo>(link);
+    const info = emojiStore.value.link;
+
     if (info) return Promise.resolve(info);
   }
 
@@ -27,7 +29,7 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
         ...emojiInfo,
       };
 
-      if (result) store.set(link, info);
+      if (result) emojiStore.value.link = info;
 
       return info;
     });

package/src/utils/index.ts

@@ -1,13 +1,12 @@
 export * from './config';
 export * from './darkmode';
-export * from './data';
+export * from './date';
 export * from './emoji';
 export * from './error';
 export * from './fetch';
 export * from './getRoot';
+export * from './image';
 export * from './markdown';
 export * from './path';
 export * from './query';
-export * from './timeAgo';
-export * from './userInfo';
 export * from './wordCount';

package/src/widgets/recentComments.ts

@@ -1,4 +1,5 @@
-import { fetchRecentComment, getRoot, getUserInfo } from '../utils';
+import { useUserInfo } from '../composables';
+import { fetchRecentComment, getRoot } from '../utils';
 
 import type { WalineComment } from '../typings';
 
@@ -46,6 +47,7 @@ export const RecentComments = ({
   serverURL,
   count,
 }: WalineRecentCommentsOptions): Promise<WalineRecentCommentsResult> => {
+  const userInfo = useUserInfo();
   const root = getRoot(el);
   const controller = new AbortController();
 
@@ -53,7 +55,7 @@ export const RecentComments = ({
     serverURL,
     count,
     signal: controller.signal,
-    token: getUserInfo()?.token,
+    token: userInfo.value?.token,
   }).then((comments) => {
     if (root && comments.length) {
       root.innerHTML = `<ul class="wl-recent-list">${comments

package/src/composables/store.ts

@@ -1,38 +0,0 @@
-export interface Store {
-  get: <T = unknown>(key: string) => T | null;
-  set: <T = unknown>(key: string, content: T) => void;
-  update: <T = unknown>(content: T) => void;
-}
-
-export const useStore = (cacheKey: string): Store => {
-  let storage: Record<string, unknown> = {};
-  const content = localStorage.getItem(cacheKey);
-
-  if (content) {
-    try {
-      storage = JSON.parse(content) as Record<string, unknown>;
-    } catch (err) {
-      // do nothing
-    }
-  }
-
-  return {
-    get: <T>(key: string): T | null => (storage[key] as T) || null,
-
-    set<T>(key: string, content: T): void {
-      try {
-        // make sure the content can be stringify and make a deep copy here
-        storage[key] = JSON.parse(JSON.stringify(content));
-        localStorage.setItem(cacheKey, JSON.stringify(storage));
-      } catch (err) {
-        // do nothing
-      }
-    },
-
-    update<T>(content: T): void {
-      // make sure the content can be stringify and make a deep copy here
-      storage = JSON.parse(JSON.stringify(content)) as Record<string, unknown>;
-      localStorage.setItem(cacheKey, JSON.stringify(storage));
-    },
-  };
-};

package/src/utils/timeAgo.ts

@@ -1,75 +0,0 @@
-import type { WalineLocale } from '../typings';
-
-const padWithZeros = (vNumber: number, width: number): string => {
-  let numAsString = vNumber.toString();
-
-  while (numAsString.length < width) {
-    numAsString = '0' + numAsString;
-  }
-
-  return numAsString;
-};
-
-const dateFormat = (date: Date): string => {
-  const vDay = padWithZeros(date.getDate(), 2);
-  const vMonth = padWithZeros(date.getMonth() + 1, 2);
-  const vYear = padWithZeros(date.getFullYear(), 2);
-
-  return `${vYear}-${vMonth}-${vDay}`;
-};
-
-export const timeAgo = (date: Date | string, locale: WalineLocale): string => {
-  if (date)
-    try {
-      if (typeof date === 'string') {
-        // compat with mysql output date
-        date = new Date(
-          date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date
-        );
-      }
-      const oldTime = date.getTime();
-      const currTime = new Date().getTime();
-      const diffValue = currTime - oldTime;
-
-      const days = Math.floor(diffValue / (24 * 3600 * 1000));
-
-      // 计算相差小时数
-      if (days === 0) {
-        // 计算天数后剩余的毫秒数
-        const leave1 = diffValue % (24 * 3600 * 1000);
-        const hours = Math.floor(leave1 / (3600 * 1000));
-
-        //计算相差分钟数
-        if (hours === 0) {
-          // 计算小时数后剩余的毫秒数
-          const leave2 = leave1 % (3600 * 1000);
-          const minutes = Math.floor(leave2 / (60 * 1000));
-
-          // 计算相差秒数
-          if (minutes === 0) {
-            // 计算分钟数后剩余的毫秒数
-            const leave3 = leave2 % (60 * 1000);
-            const seconds = Math.round(leave3 / 1000);
-
-            return `${seconds} ${locale.seconds}`;
-          }
-          return `${minutes} ${locale.minutes}`;
-        }
-        return `${hours} ${locale.hours}`;
-      }
-
-      if (days < 0) {
-        return locale.now;
-      }
-
-      if (days < 8) {
-        return `${days} ${locale.days}`;
-      } else {
-        return dateFormat(date);
-      }
-    } catch (error) {
-      console.log(error);
-    }
-
-  return '';
-};

package/src/utils/userInfo.ts

@@ -1,26 +0,0 @@
-export interface UserInfo {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  display_name: string;
-  email: string;
-  url: string;
-  token: string;
-  avatar: string;
-  mailMd5: string;
-}
-
-const USER_KEY = 'WALINE_USER';
-
-export const getUserInfo = (): UserInfo | null => {
-  try {
-    const localStorageData = localStorage.getItem(USER_KEY);
-    const sessionStorageData = sessionStorage.getItem(USER_KEY);
-
-    return localStorageData
-      ? (JSON.parse(localStorageData) as UserInfo)
-      : sessionStorageData
-      ? (JSON.parse(sessionStorageData) as UserInfo)
-      : null;
-  } catch (err) {
-    return null;
-  }
-};