perf(ui/conf): support for watching partial changes in config with `w…

…atchConf()` (#755)

ui/artalk-sidebar/src/main.ts

@@ -20,7 +20,7 @@ const i18n = createI18n({
 // Artalk extension
 Artalk.use((ctx) => {
   // Sync config from artalk instance to sidebar
-  ctx.on('conf-loaded', (conf) => {
+  ctx.watchConf(['locale'], (conf) => {
     if (typeof conf.locale === 'string' && conf.locale !== 'auto')
       i18n.global.locale.value = conf.locale as any
   })

ui/artalk/src/context.ts

@@ -139,10 +139,7 @@ class Context implements ContextApi {
   }
 
   setDarkMode(darkMode: boolean|'auto'): void {
-    // prevent trigger 'conf-loaded' to improve performance
-    // this.updateConf({ ...this.conf, darkMode })
-    this.conf.darkMode = darkMode
-    this.events.trigger('dark-mode-changed', darkMode)
+    this.updateConf({ darkMode })
   }
 
   updateConf(nConf: Partial<ArtalkConfig>): void {
@@ -161,6 +158,26 @@ class Context implements ContextApi {
   getMarked() {
     return marked.getInstance()
   }
+
+  watchConf<T extends (keyof ArtalkConfig)[]>(keys: T, effect: (conf: Pick<ArtalkConfig, T[number]>) => void): void {
+    const deepEqual = (a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)
+    const val = () => {
+      const conf = this.getConf()
+      const res: any = {}
+      keys.forEach((key) => { res[key] = conf[key] })
+      return res
+    }
+    let lastVal = {}
+    this.on('conf-loaded', () => {
+      const newVal = val()
+      const isDiff = !deepEqual(lastVal, newVal)
+      // only trigger when specific keys changed
+      if (isDiff) {
+        lastVal = newVal
+        effect(newVal)
+      }
+    })
+  }
 }
 
 export default Context

ui/artalk/src/list/page.ts

@@ -4,7 +4,7 @@ import { Paginator } from './paginator'
 import ReadMorePaginator from './paginator/read-more'
 import UpDownPaginator from './paginator/up-down'
 
-function createPaginatorByConf(conf: ArtalkConfig): Paginator {
+function createPaginatorByConf(conf: Pick<ArtalkConfig, 'pagination'>): Paginator {
   if (conf.pagination.readMore) return new ReadMorePaginator()
   return new UpDownPaginator()
 }
@@ -24,7 +24,7 @@ export const initListPaginatorFunc = (ctx: ContextApi) => {
   let paginator: Paginator|null = null
 
   // Init paginator when conf loaded
-  ctx.on('conf-loaded', (conf) => {
+  ctx.watchConf(['pagination', 'locale'], (conf) => {
     const list = ctx.get('list')
 
     if (paginator) paginator.dispose() // if had been init, dispose it

ui/artalk/src/plugins/dark-mode.ts

@@ -1,6 +1,6 @@
 import type { ArtalkPlugin } from '@/types'
 
-// Notice: Singleton mode needs to be loaded as lazy as possible,
+// Notice: Singleton pattern needs to be loaded as lazy as possible,
 //         because the SSG application does not have a `window` context.
 let darkModeMedia: MediaQueryList | undefined
 
@@ -48,9 +48,8 @@ export const DarkMode: ArtalkPlugin = (ctx) => {
     }
   }
 
+  ctx.watchConf(['darkMode'], (conf) => sync(conf.darkMode))
   ctx.on('inited', () => sync(ctx.conf.darkMode))
-  ctx.on('conf-loaded', (conf) => sync(conf.darkMode))
-  ctx.on('dark-mode-changed', (darkMode) => sync(darkMode))
   ctx.on('destroy', () => {
     // if handler exists, don't forget to remove it, or it will cause memory leak
     darkModeAutoHandler && darkModeMedia?.removeEventListener('change', darkModeAutoHandler)

ui/artalk/src/plugins/editor-kit.ts

@@ -1,6 +1,6 @@
 import type { EditorApi, ArtalkPlugin } from '@/types'
 import EventManager from '@/lib/event-manager'
-import { ENABLED_PLUGS, getDisabledPlugByConf } from './editor'
+import { getEnabledPlugs } from './editor'
 import EditorPlug from './editor/_plug'
 import PlugKit from './editor/_kit'
 
@@ -43,7 +43,9 @@ export class PlugManager {
     public editor: EditorApi
   ) {
     let confLoaded = false // config not loaded at first time
-    this.editor.ctx.on('conf-loaded', () => {
+    this.editor.ctx.watchConf([
+      'imgUpload', 'emoticons', 'preview', 'editorTravel', 'locale'
+    ], (conf) => {
       // trigger unmount event will call all plugs' unmount function
       // (this will only be called while conf reloaded, not be called at first time)
       confLoaded && this.getEvents().trigger('unmounted')
@@ -52,10 +54,7 @@ export class PlugManager {
       this.clear()
 
       // init the all enabled plugs
-      const DISABLED = getDisabledPlugByConf(this.editor.ctx.conf)
-
-      ENABLED_PLUGS
-        .filter(p => !DISABLED.includes(p)) // 禁用的插件
+      getEnabledPlugs(conf)
         .forEach((Plug) => {
           // create the plug instance
           const kit = new PlugKit(this)

ui/artalk/src/plugins/editor/index.ts

@@ -16,7 +16,7 @@ import Upload from './upload'
 import Preview from './preview'
 
 /** The default enabled plugs */
-export const ENABLED_PLUGS: (typeof EditorPlug)[] = [
+const EDITOR_PLUGS: (typeof EditorPlug)[] = [
   // Core
   LocalStorage,
   HeaderEvent, HeaderUser, HeaderLink,
@@ -29,12 +29,17 @@ export const ENABLED_PLUGS: (typeof EditorPlug)[] = [
   Emoticons, Upload, Preview
 ]
 
-/** Get the name list of disabled plugs */
-export function getDisabledPlugByConf(conf: ArtalkConfig): (typeof EditorPlug)[] {
-  return [
-    {k: Upload, v: conf.imgUpload},
-    {k: Emoticons, v: conf.emoticons},
-    {k: Preview, v: conf.preview},
-    {k: Mover, v: conf.editorTravel},
-  ].filter(n => !n.v).flatMap(n => n.k)
+/**
+ * Get the enabled plugs by config
+ */
+export function getEnabledPlugs(conf: Pick<ArtalkConfig, 'imgUpload'|'emoticons'|'preview'|'editorTravel'>): (typeof EditorPlug)[] {
+  // The reference map of config and plugs
+  // (for check if the plug is enabled)
+  const confRefs = new Map<typeof EditorPlug, any>()
+  confRefs.set(Upload, conf.imgUpload)
+  confRefs.set(Emoticons, conf.emoticons)
+  confRefs.set(Preview, conf.preview)
+  confRefs.set(Mover, conf.editorTravel)
+
+  return EDITOR_PLUGS.filter(p => !confRefs.has(p) || !!confRefs.get(p))
 }

ui/artalk/src/plugins/list/copyright.ts

@@ -2,7 +2,7 @@ import type { ArtalkPlugin } from '@/types'
 import { version as ARTALK_VERSION } from '~/package.json'
 
 export const Copyright: ArtalkPlugin = (ctx) => {
-  ctx.on('conf-loaded', () => {
+  ctx.on('inited', () => {
     const list = ctx.get('list')
 
     const $copyright = list.$el.querySelector<HTMLElement>('.atk-copyright')

ui/artalk/src/plugins/list/dropdown.ts

@@ -20,14 +20,14 @@ export const Dropdown: ArtalkPlugin = (ctx) => {
     })
   }
 
-  ctx.on('conf-loaded', () => {
+  ctx.watchConf(['listSort', 'locale'], (conf) => {
     const list = ctx.get('list')
 
     const $count = list.$el.querySelector<HTMLElement>('.atk-comment-count')
     if (!$count) return
 
     // 评论列表排序 Dropdown 下拉选择层
-    if (ctx.conf.listSort) {
+    if (conf.listSort) {
       initDropdown($count)
     } else {
       removeDropdown({

ui/artalk/src/plugins/list/sidebar-btn.ts

@@ -20,7 +20,7 @@ export const SidebarBtn: ArtalkPlugin = (ctx) => {
     }
   }
 
-  ctx.on('conf-loaded', () => {
+  ctx.watchConf(['locale'], (conf) => {
     const list = ctx.get('list')
 
     $openSidebarBtn = list.$el.querySelector<HTMLElement>('[data-action="open-sidebar"]')

ui/artalk/src/plugins/list/unread-badge.ts

@@ -14,7 +14,7 @@ export const UnreadBadge: ArtalkPlugin = (ctx) => {
     }
   }
 
-  ctx.on('conf-loaded', () => {
+  ctx.on('inited', () => {
     const list = ctx.get('list')
 
     $unreadBadge = list.$el.querySelector<HTMLElement>('.atk-unread-badge')

ui/artalk/src/plugins/stat.ts

@@ -1,4 +1,4 @@
-import type { ContextApi, ArtalkPlugin } from '@/types'
+import type { ContextApi, ArtalkPlugin, ArtalkConfig } from '@/types'
 import { Api } from '@/api'
 
 export interface CountOptions {
@@ -14,13 +14,15 @@ export interface CountOptions {
 }
 
 export const PvCountWidget: ArtalkPlugin = (ctx: ContextApi) => {
-  ctx.on('conf-loaded', () => {
+  ctx.watchConf([
+    'site', 'pageKey', 'countEl', 'pvEl',
+  ], (conf) => {
     initCountWidget({
       getApi: () => ctx.getApi(),
-      siteName: ctx.conf.site,
-      pageKey: ctx.conf.pageKey,
-      countEl: ctx.conf.countEl,
-      pvEl: ctx.conf.pvEl,
+      siteName: conf.site,
+      pageKey: conf.pageKey,
+      countEl: conf.countEl,
+      pvEl: conf.pvEl,
       pvAdd: true,
     })
   })

ui/artalk/src/plugins/version-check.ts

@@ -8,10 +8,10 @@ import $t from '@/i18n'
 let IgnoreVersionCheck = false
 
 export const VersionCheck: ArtalkPlugin = (ctx) => {
-  ctx.on('conf-loaded', () => {
+  ctx.watchConf(['apiVersion', 'versionCheck'], (conf) => {
     const list = ctx.get('list')
-    if (ctx.conf.apiVersion && ctx.conf.versionCheck && !IgnoreVersionCheck)
-      versionCheck(list, ARTALK_VERSION, ctx.conf.apiVersion)
+    if (conf.apiVersion && conf.versionCheck && !IgnoreVersionCheck)
+      versionCheck(list, ARTALK_VERSION, conf.apiVersion)
   })
 }
 

ui/artalk/src/service.ts

@@ -20,8 +20,8 @@ const services = {
   i18n(ctx: ContextApi) {
     I18n.setLocale(ctx.conf.locale)
 
-    ctx.on('conf-loaded', () => {
-      I18n.setLocale(ctx.conf.locale)
+    ctx.watchConf(['locale'], (conf) => {
+      I18n.setLocale(conf.locale)
     })
   },
 

ui/artalk/src/types/context.ts

@@ -104,4 +104,7 @@ export interface ContextApi extends EventManagerFuncs<EventPayloadMap> {
 
   /** 更新配置 */
   updateConf(conf: Partial<ArtalkConfig>): void
+
+  /** 监听配置更新 */
+  watchConf<T extends (keyof ArtalkConfig)[]>(keys: T, effect: (val: Pick<ArtalkConfig, T[number]>) => void): void
 }

ui/artalk/src/types/event.ts

@@ -35,7 +35,6 @@ export interface EventPayloadMap {
   'editor-submitted': undefined    // 编辑器提交后
   'user-changed': LocalUser        // 本地用户数据变更时
   'conf-loaded': ArtalkConfig      // Artalk 配置变更时
-  'dark-mode-changed': boolean|'auto' // 深色模式变更时
   'sidebar-show': undefined        // 侧边栏显示
   'sidebar-hide': undefined        // 侧边栏隐藏
 }