artalk 2.4.4 → 2.5.1

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "artalk",
-  "version": "2.4.4",
-  "backendMinVersion": "2.3.0",
+  "version": "2.5.1",
   "license": "LGPL-3.0",
   "description": "A Selfhosted Comment System",
   "keywords": [
@@ -14,7 +13,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ArtalkJS/Artalk.git",
-    "directory": "packages/artalk"
+    "directory": "ui/packages/artalk"
   },
   "homepage": "https://artalk.js.org",
   "bugs": "https://github.com/ArtalkJS/Artalk/issue",
@@ -24,17 +23,17 @@
   "module": "./dist/Artalk.es.js",
   "types": "./dist/src/main.d.ts",
   "devDependencies": {
-    "@types/marked": "4.0.6"
+    "@types/marked": "4.0.8"
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.7.5",
     "hanabi": "^0.4.0",
     "insane": "^2.6.2",
-    "marked": "^4.0.19",
-    "abortcontroller-polyfill": "^1.7.5"
+    "marked": "^4.2.12"
   },
   "scripts": {
     "dev": "vite",
-    "build": "pnpm lint && vite build && pnpm build:lite && pnpm build:i18n",
+    "build": "vite build && pnpm build:lite && pnpm build:i18n",
     "build:lite": "vite build --config vite-lite.config.ts",
     "build:i18n": "node scripts/build-i18n.mjs",
     "build:demo": "vite build --config vite-demo.config.ts",

package/src/api/comment.ts

@@ -1,6 +1,7 @@
 import { CommentData, ListData } from '~/types/artalk-data'
 import * as Utils from '../lib/utils'
 import ApiBase from './api-base'
+import User from '../lib/user'
 
 /**
  * 评论 API
@@ -16,9 +17,9 @@ export default class CommentApi extends ApiBase {
     }
 
     if (flatMode) params.flat_mode = flatMode // 平铺模式
-    if (this.ctx.user.checkHasBasicUserInfo()) {
-      params.name = this.ctx.user.data.nick
-      params.email = this.ctx.user.data.email
+    if (User.checkHasBasicUserInfo()) {
+      params.name = User.data.nick
+      params.email = User.data.email
     }
 
     if (paramsEditor) paramsEditor(params)
@@ -68,14 +69,13 @@ export default class CommentApi extends ApiBase {
   /** 投票 */
   public async vote(targetID: number, type: string) {
     const params: any = {
-      site_name: this.ctx.conf.site || '',
       target_id: targetID,
       type,
     }
 
-    if (this.ctx.user.checkHasBasicUserInfo()) {
-      params.name = this.ctx.user.data.nick
-      params.email = this.ctx.user.data.email
+    if (User.checkHasBasicUserInfo()) {
+      params.name = User.data.nick
+      params.email = User.data.email
     }
 
     const data = await this.POST<any>('/vote', params)

package/src/api/page.ts

@@ -55,7 +55,6 @@ export default class PageApi extends ApiBase {
   /** PV */
   public async pv() {
     const params: any = {
-      site_name: this.ctx.conf.site || '',
       page_key: this.ctx.conf.pageKey || '',
       page_title: this.ctx.conf.pageTitle || ''
     }
@@ -73,7 +72,6 @@ export default class PageApi extends ApiBase {
   ) {
     const params: any = {
       type,
-      site_name: this.ctx.conf.site || '',
     }
 
     if (pageKeys) params.page_keys = Array.isArray(pageKeys) ? pageKeys.join(',') : pageKeys

package/src/api/request.ts

@@ -1,11 +1,13 @@
 import Context from '~/types/context'
+import User from '../lib/user'
+import $t from '../i18n'
 
 /** 公共请求函数 */
 export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit, timeout?: number): Promise<any> {
   // JWT
-  if (ctx.user.data.token) {
+  if (User.data.token) {
     const headers = new Headers(init.headers) // 保留原有 headers
-    headers.set('Authorization', `Bearer ${ctx.user.data.token}`)
+    headers.set('Authorization', `Bearer ${User.data.token}`)
     init.headers = headers
   }
 
@@ -20,7 +22,7 @@ export async function Fetch(ctx: Context, input: RequestInfo, init: RequestInit,
   const isNoAccess = noAccessCodes.includes(respHttpCode)
 
   if (!resp.ok && !isNoAccess)
-    throw new Error(`${ctx.$t('reqGot')} ${respHttpCode}`)
+    throw new Error(`${$t('reqGot')} ${respHttpCode}`)
 
   // 解析获取响应的 json
   let json: any = await resp.json()
@@ -95,7 +97,7 @@ function timeoutFetch(ctx: Context, url: RequestInfo, ms: number, opts: RequestI
     promise.finally(() => { clearTimeout(timer) })
   }
   promise = promise.catch((err) => {
-    throw ((err || {}).name === 'AbortError') ? new Error(ctx.$t('reqAborted')) : err
+    throw ((err || {}).name === 'AbortError') ? new Error($t('reqAborted')) : err
   })
   return promise
 }

package/src/api/system.ts

@@ -1,5 +1,6 @@
 import ArtalkConfig from '~/types/artalk-config'
 import ApiBase from './api-base'
+import { handleBackendRefConf } from '../config'
 
 /**
  * 系统 API
@@ -10,22 +11,12 @@ export default class SystemApi extends ApiBase {
     const data = await this.POST<any>(`/conf`)
     const conf = (data.frontend_conf || {}) as ArtalkConfig
 
-    // Patch: `emoticons` config string to json
-    if (conf.emoticons && typeof conf.emoticons === "string") {
-      conf.emoticons = conf.emoticons.trim()
-      if (conf.emoticons.startsWith("[") || conf.emoticons.startsWith("{")) {
-        conf.emoticons = JSON.parse(conf.emoticons) // pase json
-      } else if (conf.emoticons === "false") {
-        conf.emoticons = false
-      }
-    }
-
-    return conf
+    return handleBackendRefConf(conf)
   }
 
   /** 获取配置数据 */
   public async getSettings() {
-    const data = await this.POST<string>('/admin/setting-get')
+    const data = await this.POST<{custom: string, template: string}>('/admin/setting-get')
     return data
   }
 

package/src/api/upload.ts

@@ -1,5 +1,6 @@
 import { ToFormData } from './request'
 import ApiBase from './api-base'
+import User from '../lib/user'
 
 /**
  * 上传 API
@@ -8,13 +9,11 @@ export default class UploadApi extends ApiBase {
   /** 图片上传 */
   public async imgUpload(file: File) {
     const params: any = {
-      name: this.ctx.user.data.nick,
-      email: this.ctx.user.data.email,
+      name: User.data.nick,
+      email: User.data.email,
       page_key: this.ctx.conf.pageKey,
     }
 
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
     const form = ToFormData(params)
     form.set('file', file)
 

package/src/api/user.ts

@@ -1,6 +1,7 @@
 import { UserData, NotifyData, UserDataForAdmin } from '~/types/artalk-data'
 import ApiBase from './api-base'
 import { ToFormData } from './request'
+import User from '../lib/user'
 
 /**
  * 用户 API
@@ -12,8 +13,6 @@ export default class UserApi extends ApiBase {
       name, email, password
     }
 
-    if (this.ctx.conf.site) params.site_name = this.ctx.conf.site
-
     const data = await this.POST<any>('/login', params)
     return data as { token: string, user: UserData }
   }
@@ -22,7 +21,7 @@ export default class UserApi extends ApiBase {
   public userGet(name: string, email: string) {
     const ctrl = new AbortController()
     const params: any = {
-      name, email, site_name: (this.ctx.conf.site || '')
+      name, email
     }
 
     const req = this.Fetch(`/user-get`, {
@@ -45,8 +44,8 @@ export default class UserApi extends ApiBase {
   /** 用户 · 登录状态 */
   public async loginStatus() {
     const data = await this.POST<any>('/login-status', {
-      name: this.ctx.user.data.nick,
-      email: this.ctx.user.data.email
+      name: User.data.nick,
+      email: User.data.email
     })
     return (data || { is_login: false, is_admin: false }) as { is_login: boolean, is_admin: boolean }
   }
@@ -59,15 +58,14 @@ export default class UserApi extends ApiBase {
   /** 已读标记 */
   public markRead(notifyKey: string, readAll = false) {
     const params: any = {
-      site_name: this.ctx.conf.site || '',
       notify_key: notifyKey,
     }
 
     if (readAll) {
       delete params.notify_key
       params.read_all = true
-      params.name = this.ctx.user.data.nick
-      params.email = this.ctx.user.data.email
+      params.name = User.data.nick
+      params.email = User.data.email
     }
 
     return this.POST(`/mark-read`, params)

package/src/artalk.ts

@@ -1,29 +1,25 @@
-import './style/main.less'
+import './style/main.scss'
 
-import ArtalkConfig from '~/types/artalk-config'
-import { EventPayloadMap, Handler } from '~/types/event'
-import ArtalkPlug from '~/types/plug'
-import Context from '~/types/context'
+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 ConcreteContext from './context'
 import defaults from './defaults'
-
-import ListLite from './list/list-lite'
-import CheckerLauncher from './lib/checker'
-import Editor from './editor'
-import List from './list'
-import SidebarLayer from './layer/sidebar-layer'
-
-import Layer from './layer'
-import * as Utils from './lib/utils'
-import * as Ui from './lib/ui'
+import { handelBaseConf } from './config'
+import Services from './service'
 import * as Stat from './lib/stat'
+import ListLite from './list/list-lite'
+import Api from './api'
 
 /**
  * Artalk
  *
- * @website https://artalk.js.org
+ * @see https://artalk.js.org
  */
 export default class Artalk {
+  private static instance?: Artalk
+
   public static ListLite = ListLite
   public static readonly defaults: ArtalkConfig = defaults
 
@@ -31,192 +27,141 @@ export default class Artalk {
   public ctx!: Context
   public $root!: HTMLElement
 
-  /** Plugins (in global scope)  */
-  protected static Plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
-
-  /** Plugins (in a instance scope) */
-  protected instancePlugins: ArtalkPlug[] = []
-
-  /** 禁用的组件 */
+  /** Plugins */
+  protected static plugins: ArtalkPlug[] = [ Stat.PvCountWidget ]
   public static DisabledComponents: string[] = []
 
-  constructor(customConf: Partial<ArtalkConfig>) {
-    /* 初始化基本配置 */
-    this.conf = Artalk.HandelBaseConf(customConf)
+  constructor(conf: Partial<ArtalkConfig>) {
+    if (Artalk.instance) return Artalk.instance.update(conf)
+
+    // 初始化基本配置
+    this.conf = handelBaseConf(conf)
     if (this.conf.el instanceof HTMLElement) this.$root = this.conf.el
 
-    /* 初始化 Context */
+    // 初始化 Context
     this.ctx = new ConcreteContext(this.conf, this.$root)
 
-    /* 初始化组件 */
-    this.initComponents()
-  }
-
-  /** 组件初始化 */
-  private initComponents() {
-    this.initLocale()
-    this.initLayer()
-    Utils.initMarked(this.ctx)
-
-    const Components: { [name: string]: () => void } = {
-      // CheckerLauncher
-      checkerLauncher: () => {
-        const checkerLauncher = new CheckerLauncher(this.ctx)
-        this.ctx.setCheckerLauncher(checkerLauncher)
-      },
-
-      // 编辑器
-      editor: () => {
-        const editor = new Editor(this.ctx)
-        this.ctx.setEditor(editor)
-        this.$root.appendChild(editor.$el)
-      },
-
-      // 评论列表
-      list: () => {
-        // 评论列表
-        const list = new List(this.ctx)
-        this.ctx.setList(list)
-        this.$root.appendChild(list.$el)
-
-        // 评论获取
-        list.fetchComments(0)
-      },
-
-      // 侧边栏 Layer
-      sidebarLayer: () => {
-        const sidebarLayer = new SidebarLayer(this.ctx)
-        this.ctx.setSidebarLayer(sidebarLayer)
-      },
-
-      // 默认事件绑定
-      eventsDefault: () => {
-        this.initEventBind()
-      }
-    }
-
-    // 组件初始化
-    Object.entries(Components).forEach(([name, initComponent]) => {
+    // 内建服务初始化
+    Object.entries(Services).forEach(([name, initService]) => {
       if (Artalk.DisabledComponents.includes(name)) return
-
-      initComponent()
+      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 => {
+    Artalk.plugins.forEach(plugin => {
       if (typeof plugin === 'function')
         plugin(this.ctx)
     })
   }
 
-  /** 基本配置初始化 */
-  public static HandelBaseConf(customConf: Partial<ArtalkConfig>): ArtalkConfig {
-    // 合并默认配置
-    const conf: ArtalkConfig = Utils.mergeDeep(Artalk.defaults, customConf)
-
-    // 绑定元素
-    if (typeof conf.el === 'string' && !!conf.el) {
-      try {
-        const findEl = document.querySelector<HTMLElement>(conf.el)
-        if (!findEl) throw Error(`Target element "${conf.el}" was not found.`)
-        conf.el = findEl
-      } catch (e) {
-        console.error(e)
-        throw new Error('Please check your Artalk `el` config.')
-      }
-    }
-
-    // 服务器配置
-    conf.server = conf.server.replace(/\/$/, '').replace(/\/api\/?$/, '')
-
-    // 默认 pageKey
-    if (!conf.pageKey) {
-      // @link http://bl.ocks.org/abernier/3070589
-      conf.pageKey = `${window.location.pathname}`
-    }
-
-    // 默认 pageTitle
-    if (!conf.pageTitle) {
-      conf.pageTitle = `${document.title}`
-    }
-
-    return conf
-  }
-
-  /** 事件绑定初始化 */
-  private initEventBind() {
-    // 锚点快速跳转评论
-    window.addEventListener('hashchange', () => {
-      this.ctx.listHashGotoCheck()
-    })
+  /** Init Artalk */
+  public static init(conf: Partial<ArtalkConfig>): Artalk {
+    if (this.instance) return this.instance.update(conf) // 单例模式
+    this.instance = new Artalk(conf)
+    return this.instance
+  }
 
-    // 本地用户数据变更
-    this.ctx.on('user-changed', () => {
-      this.ctx.checkAdminShowEl()
-      this.ctx.listRefreshUI()
-    })
+  /** 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)
   }
 
-  /** 语言初始化 */
-  private initLocale() {
-    if (this.conf.locale === 'auto') { // 自适应语言
-      this.conf.locale = navigator.language
-    }
+  /** 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
   }
 
-  /** Layer 初始化 */
-  private initLayer() {
-    // 记录页面原始 Styles
-    Layer.BodyOrgOverflow = document.body.style.overflow
-    Layer.BodyOrgPaddingRight = document.body.style.paddingRight
+  /** Reload comment list of Artalk */
+  public reload() {
+    this.ctx.listReload()
   }
 
-  /** 监听事件 */
+  /** 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
+  }
+
+  /** Add an event listener */
   public on<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.on(name, handler, 'external')
   }
 
-  /** 解除监听事件 */
+  /** Remove an event listener */
   public off<K extends keyof EventPayloadMap>(name: K, handler: Handler<EventPayloadMap[K]>) {
     this.ctx.off(name, handler, 'external')
   }
 
-  /** 触发事件 */
+  /** Trigger an event */
   public trigger<K extends keyof EventPayloadMap>(name: K, payload?: EventPayloadMap[K]) {
     this.ctx.trigger(name, payload, 'external')
   }
 
-  /** 重新加载 */
-  public reload() {
-    this.ctx.listReload()
-  }
-
-  /** 设置暗黑模式 */
+  /** Set dark mode */
   public setDarkMode(darkMode: boolean) {
     this.ctx.setDarkMode(darkMode)
   }
 
-  /** Use Plugin (specific instance) */
-  public use(plugin: ArtalkPlug) {
-    this.instancePlugins.push(plugin)
-    if (typeof plugin === 'function') plugin(this.ctx)
-  }
+  // ===========================
+  //       Static methods
+  // ===========================
 
-  /** Use Plugin (static method for global scope) */
+  /** Use Plugin (static method) */
   public static use(plugin: ArtalkPlug) {
-    this.Plugins.push(plugin)
+    this.plugins.push(plugin)
+    if (this.instance && typeof plugin === 'function') plugin(this.instance.ctx)
   }
 
-  /** @deprecated Please replace it with lowercase function name `use(...)`. */
-  public static Use(plugin: ArtalkPlug) {
-    this.use(plugin)
-    console.warn('`Use(...)` is deprecated, replace it with lowercase `use(...)`.')
+  /** Update config of Artalk */
+  public static update(conf: Partial<ArtalkConfig>) {
+    return this.instance?.update(conf)
   }
 
-  /** 装载数量统计元素 */
-  public static LoadCountWidget(customConf: Partial<ArtalkConfig>) {
-    const conf = this.HandelBaseConf(customConf)
-    const ctx = new ConcreteContext(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)
+  }
+
+  /** Set dark mode */
+  public static setDarkMode(darkMode: boolean) {
+    this.instance?.setDarkMode(darkMode)
+  }
+
+  /** 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)
+  }
 }

package/src/comment/comment.ts

@@ -2,8 +2,9 @@ import { CommentData } from '~/types/artalk-data'
 import Context from '~/types/context'
 import Component from '../lib/component'
 import * as Utils from '../lib/utils'
+import marked from '../lib/marked'
 import UADetect from '../lib/detect'
-import CommentRender from './render'
+import CommentUI from './render'
 import CommentActions from './actions'
 
 export interface CommentConf {
@@ -18,7 +19,7 @@ export interface CommentConf {
 }
 
 export default class Comment extends Component {
-  private renderInstance: CommentRender
+  private renderInstance: CommentUI
   private actionInstance: CommentActions
 
   private data: CommentData
@@ -44,7 +45,7 @@ export default class Comment extends Component {
     this.nestCurt = 1 // 现在已嵌套 n 层
 
     this.actionInstance = new CommentActions(this)
-    this.renderInstance = new CommentRender(this)
+    this.renderInstance = new CommentUI(this)
   }
 
   /** 渲染 UI */
@@ -119,7 +120,7 @@ export default class Comment extends Component {
     childC.getRender().playFadeAnim()
 
     // 内容限高
-    childC.getRender().checkHeightLimitArea('content')
+    childC.getRender().checkHeightLimit()
   }
 
   /** 获取存放子评论的元素对象 */
@@ -131,7 +132,7 @@ export default class Comment extends Component {
       if (this.nestCurt < this.nestMax) {
         $children = this.getRender().renderChildrenWrap()
       } else {
-          $children = this.parent!.getChildrenEl()
+        $children = this.parent!.getChildrenEl()
       }
     }
 
@@ -164,7 +165,7 @@ export default class Comment extends Component {
 
   /** 获取评论 markdown 解析后的内容 */
   public getContentMarked() {
-    return Utils.marked(this.ctx, this.data.content)
+    return marked(this.ctx, this.data.content)
   }
 
   /** 获取格式化后的日期 */