@waline/client 2.0.0-alpha.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -24,7 +24,7 @@
     "./package.json": "./package.json"
   },
   "main": "./dist/shim.js",
-  "browser": "./dist/waline.js",
+  "browser": "./dist/legacy.js",
   "types": "./dist/shim.d.ts",
   "files": [
     "dist",

package/src/comment.ts

@@ -1,9 +1,31 @@
 import { useUserInfo } from './composables';
 import { decodePath, errorHandler, fetchCommentCount } from './utils';
+import type { WalineAbort } from './typings';
 
-export interface CommentCountOptions {
+export interface WalineCommentCountOptions {
+  /**
+   * Waline 服务端地址
+   *
+   * Waline server url
+   */
   serverURL: string;
+
+  /**
+   * 评论数 CSS 选择器
+   *
+   * Commment count CSS selector
+   *
+   * @default '.waline-comment-count'
+   */
   selector?: string;
+
+  /**
+   * 需要获取的默认路径
+   *
+   * Path to be fetched by default
+   *
+   * @default window.location.pathname
+   */
   path?: string;
 }
 
@@ -11,7 +33,8 @@ export const commentCount = ({
   serverURL,
   path = window.location.pathname,
   selector = '.waline-comment-count',
-}: CommentCountOptions): ((reason?: unknown) => void) => {
+}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+WalineCommentCountOptions): WalineAbort => {
   const controller = new AbortController();
 
   // comment count

package/src/compact/convert.ts

@@ -0,0 +1,80 @@
+import { warning } from './logger';
+import { resolveOldEmojiMap } from './valine';
+
+import type { DeprecatedValineOptions } from './valine';
+import {
+  DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED,
+  DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED,
+} from './dropped';
+import type { DeprecatedWalineOptions } from './v1';
+import type { WalineInitOptions } from '../typings';
+
+export const covertOptions = (
+  options: WalineInitOptions & DeprecatedValineOptions & DeprecatedWalineOptions
+): WalineInitOptions => {
+  const {
+    // Options which needs to be polyfilled
+    placeholder,
+    langMode = {},
+    emojiCDN,
+    emojiMaps,
+    requiredFields = [],
+    anonymous,
+    previewMath,
+    uploadImage,
+    highlight,
+    copyRight,
+    visitor,
+
+    pageview = visitor === true
+      ? '.leancloud_visitors,.waline-visitor-count,.waline-pageview-count'
+      : visitor,
+    locale = langMode,
+    emoji,
+    requiredMeta = requiredFields,
+    highlighter = highlight,
+    imageUploader = uploadImage,
+    texRenderer = previewMath,
+    copyright = copyRight,
+    login = anonymous === true
+      ? 'disable'
+      : anonymous === false
+      ? 'force'
+      : 'enable',
+    ...more
+  } = options;
+
+  // error with those which can no longr be handled
+  DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED.filter((item) =>
+    Object.keys(options).includes(item)
+  ).forEach((item) =>
+    warning(`Option "${item}" is REMOVED and CAN NOT be polyfilled!`)
+  );
+
+  // warnings with those which can no longr be handled
+  DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED.filter(([oldOption]) =>
+    Object.keys(options).includes(oldOption)
+  ).forEach(([oldOption, newOption]) =>
+    warning(
+      `Deprecated option "${oldOption}" is currently being polyfilled, Please switch to option "${newOption}" in v2!`
+    )
+  );
+
+  if (placeholder) locale.placeholder = placeholder;
+
+  return {
+    locale,
+    emoji:
+      emojiCDN && typeof emojiMaps === 'object'
+        ? resolveOldEmojiMap(emojiMaps, emojiCDN)
+        : emoji,
+    requiredMeta,
+    imageUploader,
+    highlighter,
+    texRenderer,
+    copyright,
+    login,
+    pageview,
+    ...more,
+  };
+};

package/src/compact/dropped.ts

@@ -0,0 +1,35 @@
+export const DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED: string[] = [
+  // valine
+  'region',
+  'appId',
+  'appKey',
+  'notify',
+  'verify',
+  'avatar',
+  'avatarForce',
+  'enableQQ',
+  'recordIP',
+  'serverURLs',
+
+  // waline v1
+  'avatarCDN',
+  'mathTagSupport',
+];
+
+export const DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED: [string, string][] =
+  [
+    // valine
+    ['emojiCDN', 'emoji'],
+    ['emojiMaps', 'emoji'],
+    ['requiredFields', 'requiredMeta'],
+    ['visitor', 'pageview'],
+    ['langMode', 'locale'],
+    ['placeholder', 'locale.placeholder'],
+
+    // waline v1
+    ['highlight', 'highlighter'],
+    ['uploadImage', 'imageUploader'],
+    ['previewMath', 'texRenderer'],
+    ['anonymous', 'login'],
+    ['copyRight', 'copyright'],
+  ];

package/src/compact/index.ts

@@ -0,0 +1,4 @@
+export * from './convert';
+export * from './logger';
+export * from './v1';
+export * from './valine';

package/src/compact/logger.ts

@@ -0,0 +1,5 @@
+export const warning = (content: string): void =>
+  console.warn(
+    `%c ${content}`,
+    'background:#ff0;color:red;font-size:36px;font-weight:bold;'
+  );

package/src/compact/v1.ts

@@ -0,0 +1,103 @@
+import type {
+  WalineHighlighter,
+  WalineImageUploader,
+  WalineTexRenderer,
+} from '../typings';
+
+export interface DeprecatedWalineOptions {
+  /**
+   * @deprecated Please use mathjax in server, dropped in V2
+   *
+   * 是否注入额外的样式添加对 `<math>` 块的兼容
+   *
+   * Whether injecting additional styles to support math block
+   *
+   * @default false
+   */
+  mathTagSupport?: boolean;
+
+  /**
+   * @deprecated use `pageview` instead, dropped in V2
+   *
+   * 文章访问量统计
+   *
+   * Article reading statistics
+   *
+   * @default false
+   */
+  visitor?: boolean;
+
+  /**
+   * @deprecated use `highlighter` instead, dropped in V2
+   *
+   * 代码高亮
+   *
+   * Code highlighting
+   */
+
+  highlight?: WalineHighlighter | false;
+
+  /**
+   * @deprecated use `imageUploader` instead, dropped in V2
+   *
+   * 自定义图片上传方法，方便更好的存储图片
+   *
+   * 方法执行时会将图片对象传入。
+   *
+   * Custom image upload callback to manage picture by yourself.
+   *
+   * We will pass a picture file object when execute it.
+   */
+
+  uploadImage?: WalineImageUploader | false;
+
+  /**
+   * @deprecated Use `login` instead, dropped in V2
+   *
+   * 是否允许登录评论
+   *
+   * 默认情况是两者都支持，设置为 `true` 表示仅支持匿名评论，`false` 表示仅支持登录评论。
+   *
+   * Whether to allow login comments.
+   *
+   * Both supported by default, set to `true` means only support anonymous comments, `false` means only support login comments.
+   *
+   * @default undefined
+   */
+  anonymous?: boolean;
+
+  /**
+   * @deprecated Please use `AVATAR_PROXY` in server, dropped in V2
+   *
+   * 设置 Gravatar 头像 CDN 地址
+   *
+   * Gravatar CDN baseURL
+   *
+   * @default 'https://www.gravatar.com/avatar'
+   */
+  avatarCDN?: string;
+
+  /**
+   * @deprecated Use `texRenderer` instead, dropped in V2
+   *
+   * 自定义 Tex 处理方法，用于预览。
+   *
+   * Custom math formula parse callback for preview.
+   */
+  previewMath?: WalineTexRenderer | false;
+
+  /**
+   * @deprecated use `copyright` instead, dropped in V2
+   *
+   * 是否在页脚展示版权信息
+   *
+   * 为了支持 Waline，我们强烈建议你开启它
+   *
+   * Whether show copyright in footer
+   *
+   * We strongly recommended you to keep it on to support waline
+   *
+   * @default true
+   */
+  copyRight?: boolean;
+}

package/src/compact/valine.ts

@@ -0,0 +1,132 @@
+import type {
+  WalineEmojiInfo,
+  WalineEmojiMaps,
+  WalineLocale,
+  WalineMeta,
+} from '../typings';
+
+export type DeprecatedAvatar =
+  | ''
+  | 'mp'
+  | 'identicon'
+  | 'monsterid'
+  | 'wavatar'
+  | 'retro'
+  | 'robohash'
+  | 'hide';
+
+export type DeprecatedEmojiMaps = Record<string, string>;
+
+export interface DeprecatedValineOptions {
+  /**
+   * @deprecated Use `locale.placeholder` instead, dropped in V2
+   */
+  placeholder?: string;
+
+  /**
+   * @deprecated Use `locale` instead, dropped in V2
+   */
+  langMode?: Partial<WalineLocale>;
+
+  /**
+   * @deprecated Use `requiredMeta` instead, dropped in V2
+   */
+  requiredFields?: WalineMeta[];
+
+  /**
+   * @deprecated Please use `AVATAR_PROXY` in server, dropped in V2
+   *
+   * [Gravatar](http://cn.gravatar.com/) 头像展示方式
+   *
+   * 可选值:
+   *
+   * - `''`
+   * - `'mp'`
+   * - `'identicon'`
+   * - `'monsterid'`
+   * - `'wavatar'`
+   * - `'retro'`
+   * - `'robohash'`
+   * - `'hide'`
+   *
+   * [Gravatar](http://gravatar.com/) type
+   *
+   * Optional value:
+   *
+   * - `''`
+   * - `'mp'`
+   * - `'identicon'`
+   * - `'monsterid'`
+   * - `'wavatar'`
+   * - `'retro'`
+   * - `'robohash'`
+   * - `'hide'`
+   *
+   * @default 'mp'
+   */
+  avatar?: DeprecatedAvatar;
+
+  /**
+   * @deprecated no longer needed, dropped in V2
+   *
+   * 每次访问是否**强制**拉取最新的*评论列表头像*
+   *
+   * Whether **force** pulling the latest avatar each time
+   *
+   * @default false
+   */
+  avatarForce?: boolean;
+
+  /**
+   * @deprecated Use `emojis` instead, dropped in V2
+   *
+   * 设置**表情包 CDN**
+   *
+   * @see [自定义表情包](https://waline.js.org/client/emoji.html)
+   *
+   * Set **Emoji Pack CDN**
+   *
+   * @see [Custom Emoji](https://waline.js.org/en/client/emoji.html)
+   *
+   * @default 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/'
+   */
+  emojiCDN?: string;
+
+  /**
+   * @deprecated Use `emojis` instead, dropped in V2
+   *
+   * 设置**表情包映射**
+   *
+   * @see [自定义表情](https://waline.js.org/client/emoji.html)
+   *
+   * Set **emoji maps**
+   *
+   * @see [Custom Emoji](https://waline.js.org/en/client/emoji.html)
+   *
+   * @default 微博表情包
+   */
+
+  emojiMaps?: DeprecatedEmojiMaps;
+}
+
+// TODO: remove
+export const resolveOldEmojiMap = (
+  emojiMaps: DeprecatedEmojiMaps,
+  emojiCDN = ''
+): WalineEmojiInfo[] => {
+  const resolvedEmojiMaps: WalineEmojiMaps = {};
+
+  for (const key in emojiMaps) {
+    resolvedEmojiMaps[key] = /(?:https?:)?\/\//.test(emojiMaps[key])
+      ? emojiMaps[key]
+      : `${emojiCDN}${emojiMaps[key]}`;
+  }
+
+  return [
+    {
+      name: 'Emoji',
+      icon: Object.values(resolvedEmojiMaps).pop() || '',
+      items: Object.keys(resolvedEmojiMaps),
+    },
+  ];
+};

package/src/components/Icons.ts

@@ -5,7 +5,7 @@ export const CloseIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
   h(
     'svg',
     {
-      class: 'vclose-icon',
+      class: 'wl-close-icon',
       viewBox: '0 0 1024 1024',
       width: size,
       height: size,

package/src/components/Waline.vue

@@ -6,6 +6,18 @@
       {{ i18n.comment }}
     </div>
 
+    <div class="wl-cards">
+      <CommentCard
+        v-for="comment in data"
+        :key="comment.objectId"
+        :root-id="comment.objectId"
+        :comment="comment"
+        :reply="reply"
+        @reply="onReply"
+        @submit="onSubmit"
+      />
+    </div>
+
     <div v-if="status === 'error'" class="wl-action">
       <button
         type="button"
@@ -15,27 +27,15 @@
       />
     </div>
 
-    <div v-else-if="status === 'loading'" class="wl-loading">
-      <LoadingIcon :size="30" />
-    </div>
-
     <template v-else>
-      <div v-if="!data.length" class="wl-empty" v-text="i18n.sofa" />
-
-      <div v-else class="wl-cards">
-        <CommentCard
-          v-for="comment in data"
-          :key="comment.objectId"
-          :root-id="comment.objectId"
-          :comment="comment"
-          :reply="reply"
-          @reply="onReply"
-          @submit="onSubmit"
-        />
+      <div v-if="status === 'loading'" class="wl-loading">
+        <LoadingIcon :size="30" />
       </div>
 
+      <div v-else-if="!data.length" class="wl-empty" v-text="i18n.sofa" />
+
       <!-- Load more button -->
-      <div v-if="page < totalPages" class="wl-more">
+      <div v-else-if="page < totalPages" class="wl-more">
         <button
           type="button"
           class="wl-btn"
@@ -93,7 +93,7 @@ declare const SHOULD_VALIDATE: boolean;
 declare const VERSION: string;
 
 export default defineComponent({
-  name: 'Waline-Root',
+  name: 'WalineRoot',
 
   components: {
     CommentBox,

package/src/entrys/legacy.ts

@@ -0,0 +1,29 @@
+import { covertOptions, warning } from '../compact';
+import { init, WalineInstance } from '../init';
+
+import type {
+  DeprecatedValineOptions,
+  DeprecatedWalineOptions,
+} from '../compact';
+import type { WalineInitOptions } from '../typings';
+
+export { WalineInstance } from '../init';
+
+warning(
+  ' This is a legacy package compatable with Valine and Waline@v1, please switch to Waline@v2 using https://<CDN.LINK>/@waline/client@next/dist/waline.js instead!'
+);
+
+// inject css styles
+
+const link = document.createElement('link');
+
+link.rel = 'stylesheet';
+link.href = '//cdn.jsdelivr.net/npm/@waline/client@next/dist/waline.css';
+
+document.head.appendChild(link);
+
+export default function legacyWaline(
+  options: WalineInitOptions & DeprecatedValineOptions & DeprecatedWalineOptions
+): WalineInstance | null {
+  return init(covertOptions(options));
+}

package/src/init.ts

@@ -5,11 +5,36 @@ import { commentCount } from './comment';
 import { pageviewCount } from './pageview';
 import { getRoot } from './utils';
 
-import type { WalineInitOptions, WalineProps } from './typings';
+import type { WalineInitOptions } from './typings';
 
 export interface WalineInstance {
+  /**
+   * Waline 被挂载到的元素
+   *
+   * @description 当通过 `el: null` 初始化，值为 `null`
+   *
+   * Element where Waline is mounted
+   *
+   * @description when initialized with `el: null`, it will be `null`
+   */
   el: HTMLElement | null;
-  update: (newOptions: Partial<WalineProps>) => void;
+
+  /**
+   * 更新 Waline 实例
+   *
+   * @description 只要不设置`path` 选项，更新时它就会被重置为 `windows.location.pathname`
+   *
+   * Update Waline instance
+   *
+   * @description when not setting `path` option, it will be reset to `window.location.pathname`
+   */
+  update: (newOptions: Partial<Omit<WalineInitOptions, 'el'>>) => void;
+
+  /**
+   * 取消挂载并摧毁 Waline 实例
+   *
+   * Unmount and destroy Waline instance
+   */
   destroy: () => void;
 }
 

package/src/pageview.ts

@@ -5,53 +5,59 @@ import {
   updatePageviews,
 } from './utils';
 
-const renderVisitorCount = (
-  counts: number[],
-  countElements: HTMLElement[]
-): void => {
-  countElements.forEach((element, index) => {
-    element.innerText = counts[index].toString();
-  });
-};
+import type { WalineAbort } from './typings';
 
-export interface VisitorCountOptions {
+export interface WalinePageviewCountOptions {
   /**
-   * Waline server url
-   *
    * Waline 服务端地址
+   *
+   * Waline server url
    */
   serverURL: string;
 
   /**
-   * Path to be fetched and updated
+   * 浏览量 CSS 选择器
    *
-   * 需要更新和获取的路径
+   * Pageview CSS selector
    *
-   * @default window.location.pathname
-   */
-  path?: string;
-
-  /**
    * @default '.waline-pageview-count'
    */
   selector?: string;
 
   /**
-   * Whether update pageviews when fetching path result
+   * 需要更新和获取的路径
+   *
+   * Path to be fetched and updated
    *
+   * @default window.location.pathname
+   */
+  path?: string;
+
+  /**
    * 是否在查询时更新 path 的浏览量
    *
+   * Whether update pageviews when fetching path result
+   *
    * @default true
    */
   update?: boolean;
 }
 
+const renderVisitorCount = (
+  counts: number[],
+  countElements: HTMLElement[]
+): void => {
+  countElements.forEach((element, index) => {
+    element.innerText = counts[index].toString();
+  });
+};
+
 export const pageviewCount = ({
   serverURL,
   path = window.location.pathname,
   selector = '.waline-pageview-count',
   update = true,
-}: VisitorCountOptions): ((reason?: unknown) => void) => {
+}: WalinePageviewCountOptions): WalineAbort => {
   const controller = new AbortController();
 
   const elements = Array.from(

package/src/styles/emoji.scss

@@ -81,7 +81,7 @@
     .wl-tabs {
       position: relative;
       height: 2em;
-      padding: 0 6px;
+      padding: 0 6px 1px;
 
       &::before {
         content: ' ';

package/src/styles/nomalize.scss

@@ -20,6 +20,8 @@
 
     text-decoration: none;
 
+    word-break: break-word;
+
     cursor: pointer;
 
     &:hover {

package/src/typings/base.ts

@@ -10,7 +10,7 @@ export interface WalineEmojiInfo {
    *
    * Current folder link
    */
-  folder: string;
+  folder?: string;
   /**
    * Emoji 通用路径前缀
    *

package/src/typings/options.ts

@@ -39,3 +39,6 @@ export interface WalineInitOptions extends Omit<WalineProps, 'path'> {
    */
   path?: string;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WalineAbort = (reson: any) => void;

package/src/utils/emoji.ts

@@ -33,12 +33,8 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
     });
 };
 
-const getLink = (
-  name: string,
-  folder: string,
-  prefix = '',
-  type = ''
-): string => `${folder}/${prefix}${name}${type ? `.${type}` : ''}`;
+const getLink = (name: string, folder = '', prefix = '', type = ''): string =>
+  `${folder ? `${folder}/` : ''}${prefix}${name}${type ? `.${type}` : ''}`;
 
 export const getEmojis = (
   emojis: (string | WalineEmojiInfo)[]