refactor(ui/sidebar): ensure compatibility with new client types (#1008)

Since the client program already prioritizes local configuration over remote configuration by default, there's no need to use the `remoteConfModifier` magic function to alter the configuration priority.

The dependency injection function has changed from `get` to `inject`, or call a more specific method from the `Context` interface.

(The prerequisite PR is #1007)

ui/artalk-sidebar/auto-imports.d.ts

@@ -12,8 +12,6 @@ declare global {
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const defineLoader: typeof import('vue-router/auto')['defineLoader']
-  const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const effectScope: typeof import('vue')['effectScope']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']

ui/artalk-sidebar/src/artalk.ts

@@ -1,4 +1,4 @@
-import Artalk from 'artalk'
+import Artalk, { type Context } from 'artalk'
 import { Router } from 'vue-router'
 import { bootParams } from './global'
 import { useUserStore } from './stores/user'
@@ -16,22 +16,20 @@ export function setupArtalk() {
     pageKey: bootParams.pageKey,
     site: bootParams.site,
     darkMode: bootParams.darkMode,
-    useBackendConf: true,
     pvAdd: false,
-    remoteConfModifier: (conf) => {
-      conf.noComment = `<div class="atk-sidebar-no-content"></div>`
-      conf.flatMode = true
-      conf.pagination = {
-        pageSize: 20,
-        readMore: false,
-        autoLoad: false,
-      }
-      conf.listUnreadHighlight = true
+    noComment: `<div class="atk-sidebar-no-content"></div>`,
+    flatMode: true,
+    pagination: {
+      pageSize: 20,
+      readMore: false,
+      autoLoad: false,
     },
+    listUnreadHighlight: true,
+    fetchCommentsOnInit: false,
   })
 }
 
-export async function syncArtalkUser(artalk: Artalk, router: Router) {
+export async function syncArtalkUser(artalk: Context, router: Router) {
   const user = useUserStore()
   const logout = () => {
     user.logout()
@@ -43,7 +41,7 @@ export async function syncArtalkUser(artalk: Artalk, router: Router) {
   // Access from open sidebar or directly by url
   if (bootParams.user?.email) {
     // sync user from sidebar to artalk
-    artalk.ctx.get('user').update(bootParams.user)
+    artalk.getUser().update(bootParams.user)
   } else {
     // Sync user from artalk to sidebar
     try {
@@ -58,27 +56,27 @@ export async function syncArtalkUser(artalk: Artalk, router: Router) {
   checkUser(artalk, logout)
 }
 
-function checkUser(artalk: Artalk, logout: () => void) {
+function checkUser(artalk: Context, logout: () => void) {
   // Get user info from artalk
-  const { name, email } = artalk.ctx.get('user').getData()
+  const { name, email } = artalk.getUser().getData()
 
   // Remove login failed dialog if sidebar
-  artalk.ctx.getApiHandlers().remove('need_login')
-  artalk.ctx.getApiHandlers().add('need_login', async () => {
+  artalk.getApiHandlers().remove('need_login')
+  artalk.getApiHandlers().add('need_login', async () => {
     logout()
     throw new Error('Need login')
   })
 
   // Check user status
-  artalk.ctx
+  artalk
     .getApi()
     .user.getUserStatus({ email, name })
     .then((res) => {
       if (res.data.is_admin && !res.data.is_login) {
         logout()
       } else {
         // Mark all notifications as read
-        artalk.ctx.getApi().notifies.markAllNotifyRead({ email, name })
+        artalk.getApi().notifies.markAllNotifyRead({ email, name })
       }
     })
 }

ui/artalk-sidebar/src/components/PreferenceGrp.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import settings, { type OptionNode } from '../lib/settings'
+import type { OptionNode } from '../lib/settings'
 
 const props = defineProps<{
   node: OptionNode

ui/artalk-sidebar/src/components/UserEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ArtalkType } from 'artalk'
-import { artalk, bootParams } from '../global'
+import { artalk } from '../global'
 
 const { t } = useI18n()
 

ui/artalk-sidebar/src/main.ts

@@ -59,7 +59,7 @@ const artalkLoader = () =>
   app.use(pinia)
 
   // user sync from artalk to sidebar
-  await syncArtalkUser(artalk, router)
+  await syncArtalkUser(artalk.ctx, router)
 
   app.mount('#app')
 })()

ui/artalk-sidebar/src/pages/comments.vue

@@ -73,7 +73,7 @@ onMounted(() => {
 
   artalk!.reload()
 
-  const $el = artalk!.ctx.get('list')!.$el
+  const $el = artalk!.ctx.inject('list').getEl()
 
   $el.querySelector<HTMLElement>('.atk-list-header')!.style.display = 'none'
   $el.querySelector<HTMLElement>('.atk-list-footer')!.style.display = 'none'

ui/artalk-sidebar/src/pages/login.vue

@@ -51,7 +51,7 @@ function login(username?: string) {
       password: userForm.value.password,
     })
     .then((res) => {
-      artalk.ctx.get('user').update({
+      artalk.ctx.getUser().update({
         ...res.data.user,
         token: res.data.token,
       })

ui/artalk-sidebar/src/pages/users.vue

@@ -2,7 +2,7 @@
 import type { ArtalkType } from 'artalk'
 import { storeToRefs } from 'pinia'
 import { useNavStore } from '../stores/nav'
-import { artalk, bootParams } from '../global'
+import { artalk } from '../global'
 import Pagination from '../components/Pagination.vue'
 
 const nav = useNavStore()

ui/artalk-sidebar/src/stores/user.ts

@@ -20,10 +20,10 @@ export const useUserStore = defineStore('user', {
   actions: {
     logout() {
       this.$reset()
-      getArtalk()?.ctx.get('user').logout()
+      getArtalk()?.ctx.getUser().logout()
     },
     sync() {
-      const user = getArtalk()?.ctx.get('user')
+      const user = getArtalk()?.ctx.getUser()
       if (!user) throw new Error('Artalk is not initialized')
       if (!user.checkHasBasicUserInfo()) throw new Error('User is not logged in')
       this.$patch({ ...user.getData(), site: '' })