artalk 2.6.4 → 2.7.1

package/src/api/_base.ts

@@ -0,0 +1,18 @@
+import { ApiOptions } from './_options'
+import { POST, Fetch } from './_request'
+
+abstract class ApiBase {
+  constructor(
+    protected options: ApiOptions
+  ) {}
+
+  protected async POST<T>(path: string, data?: {[key: string]: any}) {
+    return POST<T>(this.options, this.options.baseURL+path, data)
+  }
+
+  protected async Fetch(path: string, init: RequestInit, timeout?: number): Promise<any> {
+    return Fetch(this.options, this.options.baseURL+path, init, timeout)
+  }
+}
+
+export default ApiBase

package/src/api/_options.ts

@@ -0,0 +1,25 @@
+export interface ApiOptions {
+  baseURL: string
+  siteName: string
+  pageKey: string
+  pageTitle: string
+  timeout?: number
+
+  // -------------------------------------------------------------------
+  //  Hooks
+  // -------------------------------------------------------------------
+
+  onNeedCheckCaptcha?: (payload: {
+    recall: () => void
+    reject: () => void
+    data: {
+      imgData: string
+      iframe: string
+    }
+  }) => void
+
+  onNeedCheckAdmin?: (payload: {
+    recall: () => void
+    reject: () => void
+  }) => void
+}

package/src/api/{request.ts → _request.ts}

@@ -1,9 +1,11 @@
-import Context from '~/types/context'
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
+
+import { ApiOptions } from './_options'
 import User from '../lib/user'
 import $t from '../i18n'
 
 /** 公共请求函数 */
-export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
+export async function Fetch(opts: ApiOptions, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
   // JWT
   if (User.data.token) {
     const headers = new Headers(init.headers) // 保留原有 headers
@@ -15,7 +17,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   // init.credentials = 'include'
 
   // 请求操作
-  const resp = await timeoutFetch(ctx, input, timeout || ctx.conf.reqTimeout || 15000, init)
+  const resp = await timeoutFetch(input, timeout || opts.timeout || 15000, init)
 
   const respHttpCode = resp.status
   const noAccessCodes = [401, 400]
@@ -29,7 +31,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
 
   // 重新发起请求
   const recall = (resolve, reject) => {
-    Fetch(ctx, input, init)
+    Fetch(opts, input, init)
       .then(d => { resolve(d) })
       .catch(e => { reject(e) })
   }
@@ -38,19 +40,18 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   if (json.data?.need_captcha) {
     // 请求需要验证码
     json = await (new Promise<any>((resolve, reject) => {
-      ctx.checkCaptcha({
-        imgData: json.data.img_data,
-        iframe: json.data.iframe,
-        onSuccess: () => { recall(resolve, reject) },
-        onCancel: () => { reject(json) }
+      opts.onNeedCheckCaptcha && opts.onNeedCheckCaptcha({
+        data: { imgData: json.data.img_data, iframe: json.data.iframe },
+        recall: () => { recall(resolve, reject) },
+        reject: () => { reject(json) }
       })
     }))
   } else if (json.data?.need_login || isNoAccess) {
     // 请求需要管理员权限
     json = await (new Promise<any>((resolve, reject) => {
-      ctx.checkAdmin({
-        onSuccess: () => { recall(resolve, reject) },
-        onCancel: () => { reject(json) }
+      opts.onNeedCheckAdmin && opts.onNeedCheckAdmin({
+        recall: () => { recall(resolve, reject) },
+        reject: () => { reject(json) }
       })
     }))
   }
@@ -61,20 +62,20 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
 }
 
 /** 公共 POST 请求 */
-export async function POST<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
+export async function POST<T>(opts: ApiOptions, url: string, data?: {[key: string]: any}) {
   const init: RequestInit = {
     method: 'POST',
   }
-  data = { site_name: ctx.conf.site || '', ...(data || {}) } // 总是携带 site_name
+  data = { site_name: opts.siteName || '', ...(data || {}) } // 总是携带 site_name
   init.body = ToFormData(data)
 
-  const json = await Fetch(ctx, url, init)
+  const json = await Fetch(opts, url, init)
   return ((json.data || {}) as T)
 }
 
 /** 公共 GET 请求 (无 GET 方式 API) */
-// export async function GET<T>(ctx: Context, url: string, data?: {[key: string]: any}) {
-//   const json = await Fetch(ctx, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
+// export async function GET<T>(opts: ApiOptions, url: string, data?: {[key: string]: any}) {
+//   const json = await Fetch(opts, url + (data ? (`?${new URLSearchParams(data)}`) : ''), {
 //     method: 'GET',
 //   })
 //   return ((json.data || {}) as T)
@@ -88,7 +89,7 @@ export function ToFormData(object: {[key: string]: any}): FormData {
 }
 
 /** 我靠，fetch 一个 timeout，都要丑陋的实现 */
-function timeoutFetch(ctx: Context, url: RequestInfo, ms: number, opts: RequestInit) {
+function timeoutFetch(url: RequestInfo, ms: number, opts: RequestInit) {
   const controller = new AbortController()
   opts.signal?.addEventListener('abort', () => controller.abort()) // 保留原有 signal 功能
   let promise = fetch(url, { ...opts, signal: controller.signal })

package/src/api/admin.ts

@@ -1,4 +1,4 @@
-import ApiBase from './api-base'
+import ApiBase from './_base'
 
 /**
  * 管理员 API

package/src/api/captcha.ts

@@ -1,4 +1,4 @@
-import ApiBase from './api-base'
+import ApiBase from './_base'
 
 /**
  * 验证码 API

package/src/api/comment.ts

@@ -1,6 +1,6 @@
-import { CommentData, ListData } from '~/types/artalk-data'
+import type { CommentData, ListData } from '~/types'
 import * as Utils from '../lib/utils'
-import ApiBase from './api-base'
+import ApiBase from './_base'
 import User from '../lib/user'
 
 /**
@@ -10,8 +10,8 @@ export default class CommentApi extends ApiBase {
   /** 评论 · 获取 */
   public get(offset: number, pageSize: number, flatMode?: boolean, paramsEditor?: (params: any) => void) {
     const params: any = {
-      page_key: this.ctx.conf.pageKey,
-      site_name: this.ctx.conf.site || '',
+      page_key: this.options.pageKey,
+      site_name: this.options.siteName,
       limit: pageSize,
       offset,
     }

package/src/api/index.ts

@@ -1,6 +1,4 @@
-import Context from '~/types/context'
-import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
-
+import { ApiOptions } from './_options'
 import comment from './comment'
 import page from './page'
 import site from './site'
@@ -17,16 +15,9 @@ const ApiComponents = {
 }
 
 class Api {
-  protected ctx: Context
-  public get baseURL() {
-    return `${this.ctx.conf.server}/api`
-  }
-
-  constructor (ctx: Context) {
-    this.ctx = ctx
-
+  constructor (opts: ApiOptions) {
     Object.entries(ApiComponents).forEach(([key, ApiComponent]) => {
-      this[key] = new ApiComponent(this, this.ctx)
+      this[key] = new ApiComponent(opts)
     })
   }
 }

package/src/api/page.ts

@@ -1,5 +1,5 @@
-import { PageData, CommentData } from '~/types/artalk-data'
-import ApiBase from './api-base'
+import type { PageData, CommentData } from '~/types'
+import ApiBase from './_base'
 
 /**
  * 页面 API
@@ -24,7 +24,7 @@ export default class PageApi extends ApiBase {
       key: data.key,
       title: data.title,
       admin_only: data.admin_only,
-      site_name: data.site_name || this.ctx.conf.site,
+      site_name: data.site_name || this.options.siteName,
     }
 
     const d = await this.POST<any>('/admin/page-edit', params)
@@ -55,8 +55,8 @@ export default class PageApi extends ApiBase {
   /** PV */
   public async pv() {
     const params: any = {
-      page_key: this.ctx.conf.pageKey || '',
-      page_title: this.ctx.conf.pageTitle || ''
+      page_key: this.options.pageKey || '',
+      page_title: this.options.pageTitle || ''
     }
 
     const p = await this.POST<any>('/pv', params)

package/src/api/site.ts

@@ -1,5 +1,5 @@
-import { SiteData } from '~/types/artalk-data'
-import ApiBase from './api-base'
+import type { SiteData } from '~/types'
+import ApiBase from './_base'
 
 /**
  * 站点 API

package/src/api/system.ts

@@ -1,17 +1,29 @@
-import ArtalkConfig from '~/types/artalk-config'
-import ApiBase from './api-base'
-import { handleBackendRefConf } from '../config'
+import type { ArtalkConfig } from '~/types'
+import ApiBase from './_base'
+
+interface ApiVersionInfo {
+  app: string
+  version: string
+  commit_hash: string
+}
+
+interface SystemConfResp {
+  frontend_conf: Partial<ArtalkConfig>
+  version: ApiVersionInfo
+}
 
 /**
  * 系统 API
  */
 export default class SystemApi extends ApiBase {
   /** 获取配置 */
-  public async conf() {
+  public async conf(): Promise<SystemConfResp> {
     const data = await this.POST<any>(`/conf`)
-    const conf = (data.frontend_conf || {}) as ArtalkConfig
 
-    return handleBackendRefConf(conf)
+    return {
+      frontend_conf: data.frontend_conf,
+      version: data.version,
+    }
   }
 
   /** 获取配置数据 */
@@ -30,7 +42,7 @@ export default class SystemApi extends ApiBase {
 
   /** 获取 API 版本信息 */
   public async version() {
-    const resp = await fetch(`${this.api.baseURL}/version`, { method: 'POST' })
+    const resp = await fetch(`${this.options.baseURL}/version`, { method: 'POST' })
     const data = await resp.json()
     return data as { app: string, version: string, commit_hash: string, fe_min_version: string }
   }

package/src/api/upload.ts

@@ -1,5 +1,5 @@
-import { ToFormData } from './request'
-import ApiBase from './api-base'
+import { ToFormData } from './_request'
+import ApiBase from './_base'
 import User from '../lib/user'
 
 /**
@@ -11,7 +11,7 @@ export default class UploadApi extends ApiBase {
     const params: any = {
       name: User.data.nick,
       email: User.data.email,
-      page_key: this.ctx.conf.pageKey,
+      page_key: this.options.pageKey,
     }
 
     const form = ToFormData(params)

package/src/api/user.ts

@@ -1,6 +1,6 @@
-import { UserData, NotifyData, UserDataForAdmin } from '~/types/artalk-data'
-import ApiBase from './api-base'
-import { ToFormData } from './request'
+import type { UserData, NotifyData, UserDataForAdmin } from '~/types'
+import ApiBase from './_base'
+import { ToFormData } from './_request'
 import User from '../lib/user'
 
 /**

package/src/artalk.ts

@@ -1,105 +1,83 @@
 import './style/main.scss'
 
-import type ArtalkConfig from '~/types/artalk-config'
-import type { EventPayloadMap, Handler } from '~/types/event'
-import type ArtalkPlug from '~/types/plug'
-import type Context from '~/types/context'
+import type { ArtalkConfig, EventPayloadMap, ArtalkPlugin, ContextApi } from '~/types'
+import type { EventHandler } from './lib/event-manager'
 import ConcreteContext from './context'
-import defaults from './defaults'
-import { handelBaseConf } from './config'
+import { handelCustomConf, convertApiOptions } from './config'
 import Services from './service'
-import * as Stat from './lib/stat'
-import ListLite from './list/list-lite'
+import { DefaultPlugins } from './plugins'
+import * as Stat from './plugins/stat'
 import Api from './api'
 
+/** Global Plugins for all instances */
+const GlobalPlugins: ArtalkPlugin[] = [ ...DefaultPlugins ]
+
 /**
  * Artalk
  *
  * @see https://artalk.js.org
  */
 export default class Artalk {
-  private static instance?: Artalk
-
-  public static ListLite = ListLite
-  public static readonly defaults: ArtalkConfig = defaults
-
   public conf!: ArtalkConfig
-  public ctx!: Context
+  public ctx!: ContextApi
   public $root!: HTMLElement
 
   /** Plugins */
-  protected static plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
-  public static DisabledComponents: string[] = []
+  protected plugins: ArtalkPlugin[] = [ ...GlobalPlugins ]
 
   constructor(conf: Partial<ArtalkConfig>) {
-    if (Artalk.instance) Artalk.destroy()
-
-    // 初始化基本配置
-    this.conf = handelBaseConf(conf)
+    // Init Config
+    this.conf = handelCustomConf(conf)
     if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
 
-    // 初始化 Context
+    // Init Context
     this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    // 内建服务初始化
+    // Init Services
     Object.entries(Services).forEach(([name, initService]) => {
-      if (Artalk.DisabledComponents.includes(name)) return
       const obj = initService(this.ctx)
       if (obj) this.ctx.inject(name as any, obj) // auto inject deps to ctx
     })
 
-    // 插件初始化 (global scope)
-    Artalk.plugins.forEach(plugin => {
-      if (typeof plugin === 'function')
-        plugin(this.ctx)
+    // Init Plugins
+    this.plugins.forEach(plugin => {
+      if (typeof plugin === 'function') plugin(this.ctx)
     })
-  }
-
-  /** Init Artalk */
-  public static init(conf: Partial<ArtalkConfig>): Artalk {
-    if (this.instance) Artalk.destroy()
-    this.instance = new Artalk(conf)
-    return this.instance
-  }
 
-  /** Use Plugin (plugin will be called in instance `use` func) */
-  public use(plugin: ArtalkPlug) {
-    Artalk.plugins.push(plugin)
-    if (typeof plugin === 'function') plugin(this.ctx)
+    // Trigger inited event
+    this.ctx.trigger('inited')
   }
 
   /** Update config of Artalk */
   public update(conf: Partial<ArtalkConfig>) {
-    if (!Artalk.instance) throw Error('cannot call `update` function before call `load`')
-    Artalk.instance.ctx.updateConf(conf)
-    return Artalk.instance
+    this.ctx.updateConf(conf)
+    return this
   }
 
   /** Reload comment list of Artalk */
   public reload() {
-    this.ctx.listReload()
+    this.ctx.reload()
   }
 
   /** Destroy instance of Artalk */
   public destroy() {
-    if (!Artalk.instance) throw Error('cannot call `destroy` function before call `load`')
-    Artalk.instance.$root.remove()
-    delete Artalk.instance
+    this.ctx.trigger('destroy')
+    this.$root.remove()
   }
 
   /** Add an event listener */
-  public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
-    this.ctx.on(name, handler, 'external')
+  public on<K extends keyof EventPayloadMap>(name: K, handler: EventHandler<EventPayloadMap[K]>) {
+    this.ctx.on(name, handler)
   }
 
   /** Remove an event listener */
-  public off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
-    this.ctx.off(name, handler, 'external')
+  public off<K extends keyof EventPayloadMap>(name: K, handler: EventHandler<EventPayloadMap[K]>) {
+    this.ctx.off(name, handler)
   }
 
   /** Trigger an event */
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
-    this.ctx.trigger(name, payload, 'external')
+    this.ctx.trigger(name, payload)
   }
 
   /** Set dark mode */
@@ -108,60 +86,30 @@ export default class Artalk {
   }
 
   // ===========================
-  //       Static methods
+  //       Static Members
   // ===========================
 
-  /** Use Plugin (static method) */
-  public static use(plugin: ArtalkPlug) {
-    this.plugins.push(plugin)
-    if (this.instance && typeof plugin === 'function') plugin(this.instance.ctx)
-  }
-
-  /** Update config of Artalk */
-  public static update(conf: Partial<ArtalkConfig>) {
-    return this.instance?.update(conf)
-  }
-
-  /** Reload comment list of Artalk */
-  public static reload() {
-    this.instance?.reload()
-  }
-
-  /** Destroy instance of Artalk */
-  public static destroy() {
-    this.instance?.destroy()
-  }
-
-  /** Add an event listener */
-  public static on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
-    this.instance?.on(name, handler)
-  }
-
-  /** Remove an event listener */
-  public static off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
-    this.instance?.off(name, handler)
-  }
-
-  /** Trigger an event */
-  public static trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
-    this.instance?.trigger(name, payload)
+  /** Init Artalk */
+  public static init(conf: Partial<ArtalkConfig>): Artalk {
+    return new Artalk(conf)
   }
 
-  /** Set dark mode */
-  public static setDarkMode(darkMode: boolean) {
-    this.instance?.setDarkMode(darkMode)
+  /** Use plugin, the plugin will be used when Artalk.init */
+  public static use(plugin: ArtalkPlugin) {
+    if (GlobalPlugins.includes(plugin)) return
+    GlobalPlugins.push(plugin)
   }
 
   /** Load count widget */
-  public static loadCountWidget(conf: Partial<ArtalkConfig>) {
-    const ctx: Context = new ConcreteContext(handelBaseConf(conf))
-    ctx.inject('api', new Api(ctx))
-    Stat.initCountWidget({ ctx, pvAdd: false })
-  }
-
-  /** @deprecated Please use `loadCountWidget` instead */
-  public static LoadCountWidget(conf: Partial<ArtalkConfig>) {
-    console.warn('The method `LoadCountWidget` is deprecated, please use `loadCountWidget` instead.')
-    this.loadCountWidget(conf)
+  public static loadCountWidget(c: Partial<ArtalkConfig>) {
+    const conf = handelCustomConf(c)
+
+    Stat.initCountWidget({
+      getApi: () => new Api(convertApiOptions(conf)),
+      pageKey: conf.pageKey,
+      countEl: conf.countEl,
+      pvEl: conf.pvEl,
+      pvAdd: false
+    })
   }
 }

package/src/comment/actions.ts

@@ -1,4 +1,4 @@
-import Comment from './comment'
+import type Comment from './comment'
 import ActionBtn from '../components/action-btn'
 
 export default class CommentActions {
@@ -50,9 +50,6 @@ export default class CommentActions {
 
       // 刷新当前 Comment UI
       this.comment.setData(data)
-
-      // 刷新 List UI
-      this.ctx.listRefreshUI()
     }).catch((err) => {
       console.error(err)
       btnElem.setError(this.ctx.$t('editFail'))

package/src/comment/comment.ts

@@ -1,5 +1,4 @@
-import { CommentData } from '~/types/artalk-data'
-import Context from '~/types/context'
+import type { CommentData, ContextApi } from '~/types'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
 import marked from '../lib/marked'
@@ -31,7 +30,7 @@ export default class Comment extends Component {
   private nestCurt: number // 当前嵌套层数
   private nestMax: number  // 最大嵌套层数
 
-  constructor(ctx: Context, data: CommentData, conf: CommentConf) {
+  constructor(ctx: ContextApi, data: CommentData, conf: CommentConf) {
     super(ctx)
 
     // 最大嵌套数
@@ -160,17 +159,21 @@ export default class Comment extends Component {
 
   /** 获取 Gravatar 头像 URL */
   public getGravatarURL() {
-    return Utils.getGravatarURL(this.ctx, this.data.email_encrypted)
+    return Utils.getGravatarURL({
+      mirror: this.ctx.conf.gravatar.mirror,
+      params: this.ctx.conf.gravatar.params,
+      emailMD5: this.data.email_encrypted,
+    })
   }
 
   /** 获取评论 markdown 解析后的内容 */
   public getContentMarked() {
-    return marked(this.ctx, this.data.content)
+    return marked(this.data.content)
   }
 
   /** 获取格式化后的日期 */
   public getDateFormatted() {
-    return Utils.timeAgo(new Date(this.data.date), this.ctx)
+    return Utils.timeAgo(new Date(this.data.date), this.ctx.$t)
   }
 
   /** 获取用户 UserAgent 信息 */

package/src/comment/render.ts

@@ -1,15 +1,37 @@
+import type Comment from './comment'
+import ActionBtn from '../components/action-btn'
 import * as Utils from '../lib/utils'
 import * as Ui from '../lib/ui'
 
+import * as HeightLimit from './height-limit'
 import CommentHTML from './comment.html?raw'
-import Comment from './comment'
-import RenderCtx from './render-ctx'
 import loadRenders from './renders'
-import * as HeightLimit from './height-limit'
 
-export default class CommentRender extends RenderCtx {
+export default class Render {
+  public comment: Comment
+
+  public get ctx() { return this.comment.ctx }
+  public get data() { return this.comment.getData() }
+  public get conf() { return this.comment.conf }
+  public get cConf() { return this.comment.getConf() }
+
+  public $el!: HTMLElement
+  public $main!: HTMLElement
+  public $header!: HTMLElement
+  public $headerNick!: HTMLElement
+  public $headerBadgeWrap!: HTMLElement
+  public $body!: HTMLElement
+  public $content!: HTMLElement
+  public $childrenWrap!: HTMLElement|null
+  public $actions!: HTMLElement
+  public voteBtnUp?: ActionBtn
+  public voteBtnDown?: ActionBtn
+
+  public $replyTo?: HTMLElement // 回复评论内容 (平铺下显示)
+  public $replyAt?: HTMLElement // 回复 AT（层级嵌套下显示）
+
   public constructor(comment: Comment) {
-    super(comment)
+    this.comment = comment
   }
 
   public render() {