@waline/client 2.0.0-alpha.4 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0",
   "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

@@ -56,7 +56,7 @@ export const covertOptions = (
     Object.keys(options).includes(oldOption)
   ).forEach(([oldOption, newOption]) =>
     warning(
-      `Option "${oldOption}" was deprecated and is currently being polyfilled, Please switch to option "${newOption}" in v2!`
+      `Deprecated option "${oldOption}" is currently being polyfilled, Please switch to option "${newOption}" in v2!`
     )
   );
 

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@next/dist/waline.js instead!'
 );
 
 // inject css styles

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 = (reson: any) => void;