@waline/client 2.0.0-alpha.0 → 2.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.3",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -14,9 +14,9 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "default": "./dist/shim.js",
+      "import": "./dist/shim.esm.js",
       "require": "./dist/shim.js",
-      "import": "./dist/shim.esm.js"
+      "default": "./dist/shim.js"
     },
     "./dist": "./dist/shim.js",
     "./dist/waline.css": "./dist/waline.css",
@@ -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/compact/convert.ts

@@ -0,0 +1,78 @@
+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 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
+}: WalineInitOptions &
+  DeprecatedValineOptions &
+  DeprecatedWalineOptions): WalineInitOptions => {
+  // error with those which can no longr be handled
+  DROPPED_OPTIONS_WHICH_CAN_NOT_BE_POLYFILLED.filter((item) =>
+    Object.keys(more).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(more).includes(oldOption)
+  ).forEach(([oldOption, newOption]) =>
+    warning(
+      `Option ${oldOption} waas deprecated in v1 and is currently being polyfilled, Please move 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
+    ['hightlight', '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/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/typings/base.ts

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

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)[]