fix: on demand addons & extract YunComment

docs/pages/themes/write.md

@@ -159,7 +159,7 @@ Valaxy 决定通过插件中心化地提供各类封装好的评论组件和辅
 ## FAQ
 
 如果您的主题适配了多个 Addon（如 `valaxy-addon-waline`/`valaxy-addon-twikoo`），但用户并非都需要安装。
-您需要将其添加至 `build.rollupOptions.external` 中。
+您需要将其添加至 `vite.build.rollupOptions.external` 中以避免引起编译问题。
 
 譬如 `valaxy-theme-yun/valaxy.config.ts`:
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { usePostTitle, useRuntimeConfig, useSiteConfig } from 'valaxy'
+import { usePostTitle, useSiteConfig } from 'valaxy'
-import { StyleValue, computed, defineAsyncComponent } from 'vue'
+import { StyleValue, computed } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -9,23 +9,12 @@ const props = defineProps<{
   data?: PageData
 }>()
 
-const runtimeConfig = useRuntimeConfig()
 const siteConfig = useSiteConfig()
 
 const { styles, icon, color } = usePostProperty(props.frontmatter.type)
 const title = usePostTitle(computed(() => props.frontmatter))
 
 const aside = computed(() => props.frontmatter.aside !== false)
-
-// not import from 'valaxy-addon-waline' to judge
-const YunWaline = runtimeConfig.value.addons['valaxy-addon-waline']
-  ? defineAsyncComponent(() => import('./YunWaline.vue'))
-  : () => null
-
-// todo: refactor
-const YunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
-  ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
-  : () => null
 </script>
 
 <template>
@@ -60,10 +49,7 @@ const YunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
           <slot name="main-nav-after" />
 
           <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment">
-            <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
+            <YunComment :class="frontmatter.nav === false ? 'mt-4' : 0" />
-              <YunWaline />
-              <YunTwikoo />
-            </YunCard>
           </slot>
 
           <slot name="main-footer-before" />

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

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useRuntimeConfig } from 'valaxy'
+import { defineAsyncComponent } from 'vue'
+
+const runtimeConfig = useRuntimeConfig()
+
+// not import from 'valaxy-addon-waline' to judge
+const YunWaline = runtimeConfig.value.addons['valaxy-addon-waline']
+  ? defineAsyncComponent(() => import('./YunWaline.vue'))
+  : () => null
+
+// todo: refactor
+const YunTwikoo = runtimeConfig.value.addons['valaxy-addon-twikoo']
+  ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
+  : () => null
+</script>
+
+<template>
+  <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16">
+    <ClientOnly>
+      <YunWaline />
+      <YunTwikoo />
+    </ClientOnly>
+  </YunCard>
+</template>

packages/valaxy/node/constants/index.ts

@@ -0,0 +1,2 @@
+export const EXTERNAL_URL_RE = /^https?:/i
+export const PATHNAME_PROTOCOL_RE = /^pathname:\/\//

packages/valaxy/node/markdown/markdownToVue.ts

@@ -5,7 +5,7 @@ import c from 'picocolors'
 import LRUCache from 'lru-cache'
 import _debug from 'debug'
 import { resolveTitleFromToken } from '@mdit-vue/shared'
-import { EXTERNAL_URL_RE } from '@yunlefun/constants'
+import { EXTERNAL_URL_RE } from '../constants'
 import { getGitTimestamp, slash, transformObject } from '../utils'
 import type { CleanUrlsMode, HeadConfig, PageData } from '../../types'
 import { createMarkdownRenderer } from '.'

packages/valaxy/node/markdown/plugins/link.ts

@@ -6,9 +6,8 @@
 
 import { URL } from 'url'
 import type MarkdownIt from 'markdown-it'
-import { EXTERNAL_URL_RE } from '@yunlefun/constants'
+import { EXTERNAL_URL_RE, PATHNAME_PROTOCOL_RE } from '../../constants'
 import type { MarkdownEnv } from '../env'
-import { PATHNAME_PROTOCOL_RE } from '../../utils'
 
 const indexRE = /(^|.*\/)index.md(#?.*)$/i
 

packages/valaxy/node/plugins/extendConfig.ts

@@ -1,5 +1,5 @@
 import { dirname, join, resolve } from 'path'
-import type { AliasOptions, InlineConfig, Plugin } from 'vite'
+import type { Alias, AliasOptions, InlineConfig, Plugin } from 'vite'
 import { mergeConfig, searchForWorkspaceRoot } from 'vite'
 import isInstalledGlobally from 'is-installed-globally'
 import fs from 'fs-extra'
@@ -132,19 +132,30 @@ export function getDefine(options: ResolvedValaxyOptions): Record<string, any> {
 }
 
 export function getAlias(options: ResolvedValaxyOptions): AliasOptions {
-  const alias = {
+  const alias: Alias[] = [
-    '~/': `${toAtFS(options.userRoot)}/`,
+    { find: '~/', replacement: `${toAtFS(options.userRoot)}/` },
-    'valaxy/client/': `${toAtFS(options.clientRoot)}/`,
+    { find: 'valaxy/client/', replacement: `${toAtFS(options.clientRoot)}/` },
-    'valaxy/package.json': toAtFS(resolve(options.clientRoot, '../package.json')),
+    { find: 'valaxy/package.json', replacement: toAtFS(resolve(options.clientRoot, '../package.json')) },
-    'valaxy': toAtFS(resolve(options.clientRoot, 'index.ts')),
+    { find: 'valaxy', replacement: toAtFS(resolve(options.clientRoot, 'index.ts')) },
-    '@valaxyjs/client/': `${toAtFS(options.clientRoot)}/`,
+    { find: '@valaxyjs/client/', replacement: `${toAtFS(options.clientRoot)}/` },
-    [`valaxy-theme-${options.theme}/`]: `${toAtFS(resolve(options.themeRoot))}/`,
+    { find: `valaxy-theme-${options.theme}/`, replacement: `${toAtFS(resolve(options.themeRoot))}/` },
-    [`valaxy-theme-${options.theme}`]: `${toAtFS(resolve(options.themeRoot))}/client/index.ts`,
+    { find: `valaxy-theme-${options.theme}`, replacement: `${toAtFS(resolve(options.themeRoot))}/client/index.ts` },
-  }
+  ]
 
   options.addons.forEach((addon) => {
-    alias[addon.name] = toAtFS(resolve(addon.root, 'client/index.ts'))
+    alias.push({
+      find: `${addon.name}/`,
+      replacement: toAtFS(`${resolve(addon.root)}/`),
+    })
+    alias.push({
+      find: addon.name,
+      replacement: toAtFS(resolve(addon.root, 'client/index.ts')),
+    })
   })
 
+  // alias.push(...[
+  //   { find: /valaxy-addon-(.*)/, replacement: toAtFS(resolve(options.themeRoot, '../valaxy-addon-$1/client/index.ts')) },
+  // ])
+
   return alias
 }

packages/valaxy/node/utils/helper.ts

@@ -1,6 +1,4 @@
-import { EXTERNAL_URL_RE } from '@yunlefun/constants'
+import { EXTERNAL_URL_RE } from '../constants'
-
-export const PATHNAME_PROTOCOL_RE = /^pathname:\/\//
 
 /**
  * is url external (http/https:)

packages/valaxy/package.json

@@ -68,7 +68,6 @@
     "@vueuse/core": "^9.11.1",
     "@vueuse/head": "^1.0.23",
     "@vueuse/integrations": "^9.11.1",
-    "@yunlefun/constants": "^0.0.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "consola": "^2.15.3",
     "critters": "^0.0.16",

pnpm-lock.yaml

@@ -127,7 +127,6 @@ importers:
       '@vueuse/core': ^9.11.1
       '@vueuse/head': ^1.0.23
       '@vueuse/integrations': ^9.11.1
-      '@yunlefun/constants': ^0.0.1
       body-scroll-lock: 4.0.0-beta.0
       consola: ^2.15.3
       critters: ^0.0.16
@@ -186,7 +185,6 @@ importers:
       '@vueuse/core': 9.11.1_vue@3.2.45
       '@vueuse/head': 1.0.23_vue@3.2.45
       '@vueuse/integrations': 9.11.1_mxlsbeg5rfr66lwi3qdsf45g6a
-      '@yunlefun/constants': 0.0.1
       body-scroll-lock: 4.0.0-beta.0
       consola: 2.15.3
       critters: 0.0.16
@@ -1985,10 +1983,6 @@ packages:
       - '@vue/composition-api'
     dev: false
 
-  /@yunlefun/constants/0.0.1:
-    resolution: {integrity: sha512-TTYuk+v5wsjLjIPX34+9VWpetnTdqE3+qGQB65xDD6G9RNrXHrfl0RscBvkFVn80wN5WbcLdvmvQdO9rxmhEHg==}
-    dev: false
-
   /@zhead/schema/1.0.9:
     resolution: {integrity: sha512-MBubVXXEJX86ZBL6CDK0rYi1mC82zuben1MwwAEe98EFN1w4Oy0l2roJaM51MwQEvZ+WTi6o4lCxUShtLQJk8A==}
     dev: false