@waline/client 2.0.0-alpha.4 → 2.0.2

package/package.json

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

@@ -51,12 +51,12 @@ export const covertOptions = (
     warning(`Option "${item}" is REMOVED and CAN NOT be polyfilled!`)
   );
 
-  // warnings with those which can no longr be handled
+  // warnings with those which is being polyfilled
   DROPPED_OPTIONS_WHICH_CAN_STILL_BE_POLYFILLED.filter(([oldOption]) =>
     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/CommentBox.vue

@@ -58,10 +58,8 @@
         @paste="onPaste"
       />
 
-      <div
-        class="wl-preview"
-        :style="{ display: showPreview ? 'block' : 'none' }"
-      >
+      <div class="wl-preview" v-show="showPreview">
+        <hr />
         <h4>{{ locale.preview }}:</h4>
         <div class="wl-content" v-html="previewText" />
       </div>

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,7 +6,19 @@
       {{ i18n.comment }}
     </div>
 
-    <div v-if="status === 'error'" class="wl-action">
+    <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-operation">
       <button
         type="button"
         class="wl-btn"
@@ -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-operation">
         <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,
@@ -226,12 +226,12 @@ export default defineComponent({
       //   }),
     },
 
-    texRender: {
+    texRenderer: {
       type: Function as PropType<WalineTexRenderer>,
       // default: (blockMode: boolean): string =>
       //   blockMode === true
-      //     ? '<p class="vtex">Tex is not available in preview</p>'
-      //     : '<span class="vtex">Tex is not available in preview</span>',
+      //     ? '<p class="wl-tex">Tex is not available in preview</p>'
+      //     : '<span class="wl-tex">Tex is not available in preview</span>',
     },
   },
 

package/src/config/default.ts

@@ -17,5 +17,5 @@ export const defaultUploadImage = (file: File): Promise<string> =>
 
 export const defaultTexRenderer = (blockMode: boolean): string =>
   blockMode === true
-    ? '<p class="vtex">Tex is not available in preview</p>'
-    : '<span class="vtex">Tex is not available in preview</span>';
+    ? '<p class="wl-tex">Tex is not available in preview</p>'
+    : '<span class="wl-tex">Tex is not available in preview</span>';

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/layout.scss

@@ -62,7 +62,7 @@
   text-align: center;
 }
 
-.wl-more {
+.wl-operation {
   text-align: center;
 
   button {

package/src/styles/nomalize.scss

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

package/src/styles/panel.scss

@@ -196,8 +196,6 @@
   .wl-content {
     min-height: 1.25em;
     padding: 0.25em;
-    border: var(--waline-border);
-    border-radius: 0.25em;
 
     word-break: break-word;
     hyphens: auto;

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;

package/src/utils/markdown.ts

@@ -10,7 +10,7 @@ import type {
 export const parseEmoji = (text = '', emojiMap: WalineEmojiMaps = {}): string =>
   text.replace(/:(.+?):/g, (placeholder, key: string) =>
     emojiMap[key]
-      ? `<img class="vemoji" src="${emojiMap[key]}" alt="${key}">`
+      ? `<img class="wl-emoji" src="${emojiMap[key]}" alt="${key}">`
       : placeholder
   );
 

package/src/widgets/recentComments.ts

@@ -2,14 +2,42 @@ import { fetchRecentComment, getRoot, getUserInfo } from '../utils';
 
 import type { WalineComment } from '../typings';
 
-export interface RecentCommentsOptions {
+export interface WalineRecentCommentsOptions {
+  /**
+   * Waline 服务端地址
+   *
+   * Waline serverURL
+   */
   serverURL: string;
+
+  /**
+   * 获取最新评论的数量
+   *
+   * fetch number of latest comments
+   */
   count: number;
+
+  /**
+   * 需要挂载的元素
+   *
+   * Element to be mounted
+   */
   el?: string | HTMLElement;
 }
 
-export interface RecentCommentsResult {
+export interface WalineRecentCommentsResult {
+  /**
+   * 评论数据
+   *
+   * Comment Data
+   */
   comments: WalineComment[];
+
+  /**
+   * 取消挂载挂件
+   *
+   * Umount widget
+   */
   destroy: () => void;
 }
 
@@ -17,7 +45,7 @@ export const RecentComments = ({
   el,
   serverURL,
   count,
-}: RecentCommentsOptions): Promise<RecentCommentsResult> => {
+}: WalineRecentCommentsOptions): Promise<WalineRecentCommentsResult> => {
   const root = getRoot(el);
   const controller = new AbortController();