@waline/client 2.0.0-alpha.3 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",

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

@@ -9,52 +9,54 @@ import {
 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,
+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;
 
-  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)
+    Object.keys(options).includes(item)
   ).forEach((item) =>
-    warning(`Option ${item} is removed and can NOT be polyfilled!`)
+    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)
+    Object.keys(options).includes(oldOption)
   ).forEach(([oldOption, newOption]) =>
     warning(
-      `Option ${oldOption} waas deprecated in v1 and is currently being polyfilled, Please move to option ${newOption} in v2!`
+      `Deprecated option "${oldOption}" is currently being polyfilled, Please switch to option "${newOption}" in v2!`
     )
   );
 

package/src/compact/dropped.ts

@@ -27,7 +27,7 @@ export const DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED: [string, string][] =
     ['placeholder', 'locale.placeholder'],
 
     // waline v1
-    ['hightlight', 'highlighter'],
+    ['highlight', 'highlighter'],
     ['uploadImage', 'imageUploader'],
     ['previewMath', 'texRenderer'],
     ['anonymous', 'login'],

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

@@ -10,7 +10,7 @@ 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!'
+  ' This is a legacy package compatable with Valine and Waline@v1, please switch to Waline@v2 using https://<CDN.LINK>/@waline/client/dist/waline.js instead!'
 );
 
 // inject css styles
@@ -18,7 +18,7 @@ warning(
 const link = document.createElement('link');
 
 link.rel = 'stylesheet';
-link.href = '//cdn.jsdelivr.net/npm/@waline/client@next/dist/waline.css';
+link.href = '//cdn.jsdelivr.net/npm/@waline/client/dist/waline.css';
 
 document.head.appendChild(link);
 

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/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 = (reason?: any) => void;