@waline/client 2.0.3 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -27,6 +27,7 @@
     "./dist": "./dist/shim.js",
     "./dist/waline.css": "./dist/waline.css",
     "./dist/*": "./dist/*.js",
+    "./src/*": "./src/*",
     "./package.json": "./package.json"
   },
   "main": "./dist/shim.js",

package/src/compact/convert.ts

@@ -27,7 +27,7 @@ export const covertOptions = (
     visitor,
 
     pageview = visitor === true
-      ? '.leancloud_visitors,.waline-visitor-count,.waline-pageview-count'
+      ? '.leancloud_visitors,.leancloud-visitors,.waline-visitor-count,.waline-pageview-count'
       : visitor,
     locale = langMode,
     emoji,

package/src/components/CommentBox.vue

@@ -42,7 +42,7 @@
             :class="['wl-input', `wl-${kind}`]"
             :name="kind"
             :type="kind === 'mail' ? 'email' : 'text'"
-            v-model="inputs[kind]"
+            v-model="userMeta[kind]"
           />
         </div>
       </div>
@@ -52,7 +52,7 @@
         ref="editorRef"
         id="wl-edit"
         :placeholder="replyUser ? `@${replyUser}` : locale.placeholder"
-        v-model="inputs.editor"
+        v-model="editor"
         @keydown="onKeyDown"
         @drop="onDrop"
         @paste="onPaste"
@@ -228,18 +228,19 @@ import {
   PreviewIcon,
   LoadingIcon,
 } from './Icons';
-import { useInputs, useUserInfo } from '../composables';
+import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
   getImagefromDataTransfer,
   parseMarkdown,
   getWordNumber,
   parseEmoji,
   postComment,
+  getEmojis,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type { WalineCommentData, WalineImageUploader } from '../typings';
-import type { Config, EmojiConfig } from '../utils';
+import type { WalineConfig, WalineEmojiConfig } from '../utils';
 
 export default defineComponent({
   name: 'CommentBox',
@@ -271,9 +272,12 @@ export default defineComponent({
   emits: ['submit', 'cancel-reply'],
 
   setup(props, { emit }) {
-    const config = inject<ComputedRef<Config>>('config') as ComputedRef<Config>;
+    const config = inject<ComputedRef<WalineConfig>>(
+      'config'
+    ) as ComputedRef<WalineConfig>;
 
-    const inputs = useInputs();
+    const editor = useEditor();
+    const userMeta = useUserMeta();
     const userInfo = useUserInfo();
 
     const inputRefs = ref<Record<string, HTMLInputElement>>({});
@@ -282,7 +286,7 @@ export default defineComponent({
     const emojiButtonRef = ref<HTMLDivElement | null>(null);
     const emojiPopupRef = ref<HTMLDivElement | null>(null);
 
-    const emoji = ref<DeepReadonly<EmojiConfig>>({ tabs: [], map: {} });
+    const emoji = ref<DeepReadonly<WalineEmojiConfig>>({ tabs: [], map: {} });
     const emojiTabIndex = ref(0);
     const showEmoji = ref(false);
     const showPreview = ref(false);
@@ -308,7 +312,7 @@ export default defineComponent({
       const endPosition = textArea.selectionEnd || 0;
       const scrollTop = textArea.scrollTop;
 
-      inputs.value.editor =
+      editor.value =
         textArea.value.substring(0, startPosition) +
         content +
         textArea.value.substring(endPosition, textArea.value.length);
@@ -333,7 +337,7 @@ export default defineComponent({
       return Promise.resolve()
         .then(() => (config.value.imageUploader as WalineImageUploader)(file))
         .then((url) => {
-          inputs.value.editor = inputs.value.editor.replace(
+          editor.value = editor.value.replace(
             uploadText,
             `\r\n![${file.name}](${url})`
           );
@@ -374,9 +378,9 @@ export default defineComponent({
 
       const comment: WalineCommentData = {
         comment: content.value,
-        nick: inputs.value.nick,
-        mail: inputs.value.mail,
-        link: inputs.value.link,
+        nick: userMeta.value.nick,
+        mail: userMeta.value.mail,
+        link: userMeta.value.link,
         ua: navigator.userAgent,
         url: config.value.path,
       };
@@ -446,7 +450,7 @@ export default defineComponent({
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           emit('submit', resp.data!);
 
-          inputs.value.editor = '';
+          editor.value = '';
 
           previewText.value = '';
 
@@ -544,37 +548,6 @@ export default defineComponent({
         showEmoji.value = false;
     };
 
-    // watch editor
-    watch(
-      () => inputs.value.editor,
-      (value) => {
-        const { highlighter, texRenderer } = config.value;
-
-        content.value = value;
-        previewText.value = parseMarkdown(value, {
-          emojiMap: emoji.value.map,
-          highlighter,
-          texRenderer,
-        });
-        wordNumber.value = getWordNumber(value);
-
-        if (editorRef.value)
-          if (value) autosize(editorRef.value);
-          else autosize.destroy(editorRef.value);
-      },
-      { immediate: true }
-    );
-
-    // watch emoji value change
-    watch(
-      () => config.value.emoji,
-      (emojiConfig) =>
-        emojiConfig.then((config) => {
-          emoji.value = config;
-        }),
-      { immediate: true }
-    );
-
     // update wordNumber
     watch(
       [config, wordNumber],
@@ -602,6 +575,38 @@ export default defineComponent({
 
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
+
+      // watch editor
+      watch(
+        () => editor.value,
+        (value) => {
+          const { highlighter, texRenderer } = config.value;
+
+          content.value = value;
+          previewText.value = parseMarkdown(value, {
+            emojiMap: emoji.value.map,
+            highlighter,
+            texRenderer,
+          });
+          wordNumber.value = getWordNumber(value);
+
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          if (value) autosize(editorRef.value!);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          else autosize.destroy(editorRef.value!);
+        },
+        { immediate: true }
+      );
+
+      // watch emoji value change
+      watch(
+        () => config.value.emoji,
+        (emojiConfig) =>
+          getEmojis(emojiConfig).then((config) => {
+            emoji.value = config;
+          }),
+        { immediate: true }
+      );
     });
 
     onUnmounted(() => {
@@ -634,7 +639,8 @@ export default defineComponent({
       isWordNumberLegal,
 
       // inputs
-      inputs,
+      editor,
+      userMeta,
 
       // emoji
       emoji,

package/src/components/CommentCard.vue

@@ -73,7 +73,7 @@ import { isLinkHttp } from '../utils';
 import { useTimeAgo } from '../composables';
 
 import type { ComputedRef, PropType } from 'vue';
-import type { Config } from '../utils';
+import type { WalineConfig } from '../utils';
 import type { WalineComment } from '../typings';
 
 export default defineComponent({
@@ -100,7 +100,9 @@ export default defineComponent({
   emits: ['submit', 'reply'],
 
   setup(props) {
-    const config = inject<ComputedRef<Config>>('config') as ComputedRef<Config>;
+    const config = inject<ComputedRef<WalineConfig>>(
+      'config'
+    ) as ComputedRef<WalineConfig>;
     const locale = computed(() => config.value.locale);
 
     const link = computed(() => {

package/src/components/Waline.vue

@@ -134,10 +134,6 @@ export default defineComponent({
         : {}),
     },
 
-    visitor: {
-      type: Boolean,
-    },
-
     dark: {
       type: [String, Boolean],
     },

package/src/composables/inputs.ts

@@ -1,17 +1,18 @@
 import { useStorage } from '@vueuse/core';
 import type { RemovableRef } from '@vueuse/core';
 
-export interface Inputs {
+export interface UserMeta {
   nick: string;
   mail: string;
   link: string;
-  editor: string;
 }
 
-export const useInputs = (): RemovableRef<Inputs> =>
-  useStorage<Inputs>('WALINE_USER_CACHE', {
+export const useUserMeta = (): RemovableRef<UserMeta> =>
+  useStorage<UserMeta>('WALINE_USER_META', {
     nick: '',
     mail: '',
     link: '',
-    editor: '',
   });
+
+export const useEditor = (): RemovableRef<string> =>
+  useStorage<string>('WALINE_COMMENT_BOX_EDITOR', '');

package/src/entrys/legacy.ts

@@ -18,7 +18,7 @@ warning(
 const link = document.createElement('link');
 
 link.rel = 'stylesheet';
-link.href = '//cdn.jsdelivr.net/npm/@waline/client/dist/waline.css';
+link.href = '//unpkg.com/@waline/client@v2/dist/waline.css';
 
 document.head.appendChild(link);
 

package/src/pageview.ts

@@ -61,7 +61,7 @@ export const pageviewCount = ({
   const controller = new AbortController();
 
   const elements = Array.from(
-    // visitor selectors
+    // pageview selectors
     document.querySelectorAll<HTMLElement>(selector)
   );
 

package/src/utils/config.ts

@@ -7,7 +7,6 @@ import {
 } from '../config';
 
 import { decodePath, isLinkHttp, removeEndingSplash } from './path';
-import { getEmojis } from './emoji';
 
 import type {
   WalineEmojiInfo,
@@ -17,31 +16,15 @@ import type {
 } from '../typings';
 import hanabi from 'hanabi';
 
-export interface EmojiConfig {
+export interface WalineEmojiConfig {
   tabs: Pick<WalineEmojiInfo, 'name' | 'icon' | 'items'>[];
   map: WalineEmojiMaps;
 }
 
-export interface Config
-  extends Required<
-      Pick<
-        WalineProps,
-        | 'path'
-        | 'lang'
-        | 'meta'
-        | 'pageSize'
-        | 'requiredMeta'
-        | 'imageUploader'
-        | 'highlighter'
-        | 'texRenderer'
-        | 'copyright'
-        | 'login'
-      >
-    >,
-    Pick<WalineProps, 'dark' | 'serverURL'> {
+export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
   locale: WalineLocale;
   wordLimit: [number, number] | false;
-  emoji: Promise<EmojiConfig>;
+  // emoji: Promise<EmojiConfig>;
 }
 
 const getServerURL = (serverURL: string): string => {
@@ -50,6 +33,11 @@ const getServerURL = (serverURL: string): string => {
   return isLinkHttp(result) ? result : `https://${result}`;
 };
 
+const getWordLimit = (
+  wordLimit: WalineProps['wordLimit']
+): [number, number] | false =>
+  Array.isArray(wordLimit) ? wordLimit : wordLimit ? [0, wordLimit] : false;
+
 const fallback = <T = unknown>(
   value: T | false | undefined,
   fallback: T
@@ -62,9 +50,10 @@ export const getConfig = ({
   path = location.pathname,
   lang = defaultLang,
   locale,
-  emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo'],
+  emoji = ['//unpkg.com/@waline/emojis@1.0.1/weibo/info.json'],
   meta = ['nick', 'mail', 'link'],
   requiredMeta = [],
+  dark = false,
   pageSize = 10,
   wordLimit,
   imageUploader,
@@ -73,27 +62,25 @@ export const getConfig = ({
   copyright = true,
   login = 'enable',
   ...more
-}: WalineProps): Config => ({
+}: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
   path: decodePath(path),
-  lang,
   locale: {
     ...(locales[lang] || locales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
   },
-  emoji: getEmojis(emoji),
-  wordLimit: Array.isArray(wordLimit)
-    ? wordLimit
-    : wordLimit
-    ? [0, wordLimit]
-    : false,
+  // emoji: getEmojis(emoji),
+  wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),
-  pageSize,
-  login,
   imageUploader: fallback(imageUploader, defaultUploadImage),
   highlighter: fallback(highlighter, hanabi),
   texRenderer: fallback(texRenderer, defaultTexRenderer),
+  lang,
+  dark,
+  emoji,
+  pageSize,
+  login,
   copyright,
   ...more,
 });

package/src/utils/emoji.ts

@@ -1,7 +1,7 @@
 import { useStorage } from '@vueuse/core';
 import { removeEndingSplash } from './path';
 
-import type { EmojiConfig } from './config';
+import type { WalineEmojiConfig } from './config';
 import type { WalineEmojiInfo } from '../typings';
 
 const hasVersion = (url: string): boolean =>
@@ -40,7 +40,7 @@ const getLink = (name: string, folder = '', prefix = '', type = ''): string =>
 
 export const getEmojis = (
   emojis: (string | WalineEmojiInfo)[]
-): Promise<EmojiConfig> =>
+): Promise<WalineEmojiConfig> =>
   Promise.all(
     emojis.map((emoji) =>
       typeof emoji === 'string'
@@ -48,7 +48,7 @@ export const getEmojis = (
         : Promise.resolve(emoji)
     )
   ).then((emojiInfos) => {
-    const emojiConfig: EmojiConfig = {
+    const emojiConfig: WalineEmojiConfig = {
       tabs: [],
       map: {},
     };