refactor: use addon to enable waline

demo/yun/valaxy.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'valaxy'
 import type { ThemeConfig } from 'valaxy-theme-yun'
 // import { VitePWA } from 'vite-plugin-pwa'
 import Inspect from 'vite-plugin-inspect'
+import { addonWaline } from 'valaxy-addon-waline/node'
 // import site from './site.config'
 
 const safelist = [
@@ -217,4 +218,10 @@ export default defineConfig<ThemeConfig>({
       },
     },
   },
+
+  addons: [
+    addonWaline({
+      serverURL: 'https://waline.yunyoujun.cn',
+    }),
+  ],
 })

docs/pages/themes/write.md

@@ -154,25 +154,16 @@ Valaxy 决定通过插件中心化地提供各类封装好的评论钩子函数
 譬如主题开发者，可以从 `valaxy-addon-waline` 中导入 `useWaline` 来快速实现 [Waline](https://waline.js.org/) 评论系统的集成。  
 而用户则可以使用相同的配置穿梭漫游于不同的主题之间。
 
-```vue {2}
-<script lang="ts" setup>
-import { useConfig, useWaline } from 'valaxy-addon-waline'
+启用 `valaxy-addon-waline` 插件时，`<WalineClient />` 组件将会被自动注册。
 
-// 读取用户配置
+```vue
+<!-- YunWaline -->
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
 const config = useConfig()
-// 挂载 Waline
-useWaline(config.value.comment.waline)
 </script>
 
 <template>
-  <!-- waline html 挂载点，将其写入布局中 -->
-  <div id="waline" w="full" />
+  <WalineClient w="full" :server-u-r-l="config.comment.waline.serverURL" :cdn="config.cdn.prefix" />
 </template>
-
-<style lang="scss">
-// 可以在此处覆盖 waline 样式
-#waline {
-  --waline-theme-color: var(--va-c-primary);
-}
-</style>
 ```

packages/valaxy-addon-waline/README.md

@@ -0,0 +1,10 @@
+# valaxy-addon-waline
+
+valaxy-addon-waline 是基于 Waline 的一个 Valaxy 插件。
+
+主题开发者可以通过将其作为依赖使用，以快速集成 Waline 评论组件。
+
+## 如何集成
+
+```ts
+``

packages/valaxy-addon-waline/components/WalineClient.vue

@@ -8,20 +8,20 @@ import { Waline } from '@waline/client/dist/component'
 import { getEmojis } from '../utils'
 
 import '@waline/client/dist/waline.css'
+import type { WalineOptions } from '../types'
 
 const props = defineProps<{
-  serverURL: string
-  cdn: string
+  options: WalineOptions
 }>()
 
 const { locale } = useI18n()
-const emoji = computed(() => getEmojis(props.cdn))
+const emoji = computed(() => getEmojis(props.options.cdn))
 const route = useRoute()
 const path = computed(() => route.path)
 </script>
 
 <template>
-  <Waline :server-u-r-l="serverURL" :lang="locale" :path="path" :dark="isDark" :emoji="emoji" />
+  <Waline :server-u-r-l="options.serverURL" :lang="locale" :path="path" :dark="isDark" :emoji="emoji" />
 </template>
 
 <style>

packages/valaxy-addon-waline/index.d.ts

@@ -1 +1,2 @@
 export * from './client'
+export * from './types'

packages/valaxy-addon-waline/node/index.ts

@@ -0,0 +1,11 @@
+import type { ValaxyAddonLike } from 'valaxy'
+import type { WalineOptions } from '../types'
+
+// todo
+// defineValaxyAddon
+export function addonWaline(options: WalineOptions) {
+  return ['valaxy-addon-waline', {
+    enable: true,
+    options,
+  }] as [string, ValaxyAddonLike]
+}

packages/valaxy-addon-waline/types/index.ts

@@ -0,0 +1,4 @@
+export interface WalineOptions {
+  serverURL: string
+  cdn?: string
+}

packages/valaxy-addon-waline/utils/index.ts

@@ -1,3 +1,5 @@
+export * from './options'
+
 export const getEmojis = (cdn = 'https://unpkg.com') => {
   return [
     `${cdn}@waline/emojis/bilibili/`,

packages/valaxy-addon-waline/utils/options.ts

@@ -0,0 +1,8 @@
+import { computed } from 'vue'
+import { useConfig } from 'valaxy'
+import type { WalineOptions } from '../types'
+
+export function useWalineOptions() {
+  const config = useConfig()
+  return computed(() => config.value.runtime.addons['valaxy-addon-waline'].options as WalineOptions)
+}

packages/valaxy-theme-yun/components/ValaxyMain.vue

@@ -15,11 +15,11 @@ const title = usePostTitle(computed(() => props.frontmatter))
 
 const aside = computed(() => props.frontmatter.aside !== false)
 
-const YunWaline = config.value.comment.waline.enable
+const YunWaline = config.value.runtime.addons['valaxy-addon-waline'].enable
   ? defineAsyncComponent(() => import('./YunWaline.vue'))
   : () => null
 
-const YunTwikoo = config.value.comment.waline.enable
+const YunTwikoo = config.value.runtime.addons['valaxy-addon-twikoo']?.enable
   ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
   : () => null
 </script>

packages/valaxy-theme-yun/components/YunWaline.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-const config = useConfig()
+import { useWalineOptions } from 'valaxy-addon-waline'
+const walineOptions = useWalineOptions()
 </script>
 
 <template>
-  <WalineClient w="full" :server-u-r-l="config.comment.waline.serverURL" :cdn="config.cdn.prefix" />
+  <WalineClient w="full" :options="walineOptions" />
 </template>

packages/valaxy/node/config.ts

@@ -126,6 +126,7 @@ export const defaultSiteConfig: SiteConfig = {
   // markdown: {
   //   excerpt: '<!-- more -->',
   // },
+  runtime: { addons: {} },
 }
 
 export type UnoSetup = () => Awaitable<Partial<UnoCssConfig> | undefined>

packages/valaxy/node/options.ts

@@ -4,7 +4,7 @@ import _debug from 'debug'
 import fg from 'fast-glob'
 import { ensureSuffix, uniq } from '@antfu/utils'
 import defu from 'defu'
-import type { DefaultThemeConfig } from '../types'
+import type { DefaultThemeConfig, ValaxyAddon } from '../types'
 import { resolveImportPath } from './utils'
 import { mergeValaxyConfig, resolveAddonConfig, resolveValaxyConfig, resolveValaxyConfigFromRoot } from './utils/config'
 import type { ValaxyAddonResolver, ValaxyConfig } from './types'
@@ -53,7 +53,12 @@ export interface ResolvedValaxyOptions<ThemeConfig = DefaultThemeConfig> {
   /**
    * Valaxy Config
    */
-  config: ValaxyConfig<ThemeConfig>
+  config: ValaxyConfig<ThemeConfig> & {
+    /**
+     * Generated Runtime Config
+     */
+    runtime: { addons: Record<string, ValaxyAddon> }
+  }
   /**
    * config file path
    */
@@ -104,7 +109,10 @@ export async function resolveOptions(options: ValaxyEntryOptions, mode: Resolved
     addonRoots: [],
     roots: [],
     theme,
-    config: userValaxyConfig,
+    config: {
+      ...userValaxyConfig,
+      runtime: { addons: {} },
+    },
     configFile: configFile || '',
     pages,
     addons: [],
@@ -121,9 +129,18 @@ export async function resolveOptions(options: ValaxyEntryOptions, mode: Resolved
   valaxyConfig = mergeValaxyConfig(valaxyConfig, addonValaxyConfig)
 
   const config = defu(valaxyConfig, defaultSiteConfig)
-  valaxyOptions.config = config
+  valaxyOptions.config = {
+    ...config,
+    runtime: {
+      addons: {},
+    },
+  }
   valaxyOptions.addons = addons
 
+  addons.forEach((addon) => {
+    valaxyOptions.config.runtime.addons[addon.name] = addon
+  })
+
   const addonRoots = addons.map(({ root }) => root)
   valaxyOptions.addonRoots = addonRoots
   // ensure order

packages/valaxy/node/types.ts

@@ -4,7 +4,7 @@ import type { VitePluginConfig as UnoCSSConfig } from 'unocss/vite'
 import type Pages from 'vite-plugin-pages'
 import type { UserConfig as ViteUserConfig } from 'vite'
 import type { presetAttributify, presetIcons, presetTypography, presetUno } from 'unocss'
-import type { DefaultThemeConfig, UserSiteConfig } from '../types'
+import type { DefaultThemeConfig, UserSiteConfig, ValaxyAddon } from '../types'
 import type { ResolvedValaxyOptions } from './options'
 import type { MarkdownOptions } from './markdown'
 
@@ -49,13 +49,8 @@ export interface ValaxyExtendConfig {
   addons?: ValaxyAddonOptions
 }
 
-export interface ValaxyAddon {
-  global?: boolean
-  props?: Record<string, any>
-  options?: Record<string, any>
-}
 export type ValaxyAddonLike = ValaxyAddon | false | null | undefined
-export type ValaxyAddonOptions = ([string, ValaxyAddonLike] | string)[] | Record<string, ValaxyAddonLike>
+export type ValaxyAddonOptions = ([string, ValaxyAddonLike] | string | (() => [string, ValaxyAddonLike]))[] | Record<string, ValaxyAddonLike>
 
 export type ValaxyAddonFn<ThemeConfig = DefaultThemeConfig> = (addonOptions: ValaxyAddonResolver, valaxyOptions: ResolvedValaxyOptions<ThemeConfig>) => ValaxyConfig | Promise<ValaxyConfig>
 export type ValaxyAddonExport<ThemeConfig = DefaultThemeConfig> = ValaxyConfig<ThemeConfig> | ValaxyAddonFn<ThemeConfig>

packages/valaxy/types/addon.ts

@@ -0,0 +1,6 @@
+export interface ValaxyAddon {
+  enable: boolean
+  global?: boolean
+  props?: Record<string, any>
+  options?: Record<string, any>
+}

packages/valaxy/types/config.ts

@@ -1,3 +1,5 @@
+import type { ValaxyAddon } from '../types'
+
 export type DefaultThemeConfig = {
   /**
    * Custom header levels of outline in the aside component.
@@ -230,6 +232,10 @@ export interface SiteConfig<T = DefaultThemeConfig> {
       icon: string
     }[]
   }
+
+  runtime: {
+    addons: Record<string, ValaxyAddon>
+  }
 }
 
 export type PartialDeep<T> = {

packages/valaxy/types/index.ts

@@ -1,4 +1,5 @@
 // do not export node type here
+export * from './addon'
 export * from './config'
 export * from './data'
 export * from './posts'