fix(theme-yun): add on demand external

2023-01-24 21:41:22 +08:00 · 2023-01-24 21:41:22 +08:00 · b73c44ea4b
parent bd7c1a6a7f
commit b73c44ea4b
10 changed files with 92 additions and 27 deletions
--- a/docs/pages/themes/write.md
+++ b/docs/pages/themes/write.md
@ -155,3 +155,34 @@ Valaxy 决定通过插件中心化地提供各类封装好的评论组件和辅
 而用户则可以使用相同的配置穿梭漫游于不同的主题之间。

 > 集成参见 [valaxy-addon-waline](https://github.com/YunYouJun/valaxy/blob/main/packages/valaxy-addon-waline/README.md)。
+
+## FAQ
+
+如果您的主题适配了多个 Addon（如 `valaxy-addon-waline`/`valaxy-addon-twikoo`），但用户并非都需要安装。
+您需要将其添加至 `build.rollupOptions.external` 中。
+
+譬如 `valaxy-theme-yun/valaxy.config.ts`:
+
+```ts
+import { defineValaxyTheme } from 'valaxy'
+import type { ThemeConfig } from './types'
+import { defaultThemeConfig, generateSafelist } from './node'
+
+export default defineValaxyTheme<ThemeConfig>((options) => {
+  return {
+    themeConfig: defaultThemeConfig,
+    vite: {
+      build: {
+        rollupOptions: {
+          // add on demand external
+          external: ['valaxy-addon-twikoo', 'valaxy-addon-waline'],
+        },
+      },
+      plugins: [ThemeVitePlugin(options)],
+    },
+    unocss: {
+      safelist: generateSafelist(options),
+    },
+  }
+})
+```
--- a/package.json
+++ b/package.json
@ -17,7 +17,7 @@
    "blog"
  ],
  "engines": {
-    "node": ">=14.0.0"
+    "node": "^14.18.0 || >=16.0.0"
  },
  "scripts": {
    "build": "pnpm run build:valaxy",
--- a/packages/valaxy-addon-waline/package.json
+++ b/packages/valaxy-addon-waline/package.json
@ -1,6 +1,6 @@
 {
  "name": "valaxy-addon-waline",
-  "version": "0.0.8",
+  "version": "0.0.9",
  "description": "Waline Composition API for Valaxy",
  "repository": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-waline",
  "keywords": [
--- a/packages/valaxy-theme-yun/layouts/home.vue
+++ b/packages/valaxy-theme-yun/layouts/home.vue
@ -17,7 +17,7 @@ const themeConfig = useThemeConfig()

    <YunBanner />
    <YunSay v-if="themeConfig.say.enable" w="full" />
-    <YunCloud v-if="themeConfig.banner.cloud.enable" />
+    <YunCloud v-if="themeConfig.banner.cloud?.enable" />
    <YunNotice
      v-if="themeConfig.notice.enable"
      :content="themeConfig.notice.content" mt="4"
--- a/packages/valaxy-theme-yun/types/index.d.ts
+++ b/packages/valaxy-theme-yun/types/index.d.ts
@ -15,7 +15,7 @@ export namespace YunTheme {
     * 首页下方的动态云
     * If you want change color of cloud, please change css var `--yun-c-cloud`
     */
-    cloud: {
+    cloud?: {
      enable: boolean
    }
  }
--- a/packages/valaxy-theme-yun/valaxy.config.ts
+++ b/packages/valaxy-theme-yun/valaxy.config.ts
@ -1,5 +1,5 @@
 import type { ResolvedValaxyOptions } from 'valaxy'
-import { defineTheme } from 'valaxy'
+import { defineValaxyTheme } from 'valaxy'
 import type { Plugin } from 'vite'
 import type { ThemeConfig } from './types'
 import { defaultThemeConfig, generateSafelist } from './node'
@ -27,10 +27,16 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
  }
 }

-export default defineTheme<ThemeConfig>((options) => {
+export default defineValaxyTheme<ThemeConfig>((options) => {
  return {
    themeConfig: defaultThemeConfig,
    vite: {
+      build: {
+        rollupOptions: {
+          // add on demand external
+          external: ['valaxy-addon-twikoo', 'valaxy-addon-waline'],
+        },
+      },
      plugins: [ThemeVitePlugin(options)],
    },
    unocss: {
--- a/packages/valaxy/node/config/addon.ts
+++ b/packages/valaxy/node/config/addon.ts
@ -12,8 +12,10 @@ export const defineAddon = defineValaxyAddon
 export type ValaxyConfigExtendKey = 'vite' | 'vue' | 'unocss' | 'unocssPresets' | 'markdown' | 'extendMd' | 'addons'
 export type ValaxyPickConfig = Pick<ValaxyNodeConfig, ValaxyConfigExtendKey>
 export type ValaxyTheme<ThemeConfig = DefaultThemeConfig> = ValaxyPickConfig & { themeConfig?: ThemeConfig }
-export function defineTheme<ThemeConfig = DefaultThemeConfig>(
+export function defineValaxyTheme<ThemeConfig = DefaultThemeConfig>(
  theme: ValaxyTheme<ThemeConfig> | ((options: ResolvedValaxyOptions<ThemeConfig>) => ValaxyTheme<ThemeConfig>),
 ) {
  return theme
 }
+
+export const defineTheme = defineValaxyTheme
--- a/packages/valaxy/node/plugins/extendConfig.ts
+++ b/packages/valaxy/node/plugins/extendConfig.ts
@ -8,6 +8,39 @@ import type { ResolvedValaxyOptions } from '../options'
 import { resolveImportPath, toAtFS } from '../utils'
 import { getIndexHtml } from '../common'

+/**
+ * dependencies used by client
+ */
+const clientDeps = [
+  '@vueuse/head',
+  '@vueuse/integrations/useFuse',
+  'unocss',
+  'vue',
+  'vue-router',
+  'dayjs',
+  'nprogress',
+  'katex',
+  'fuse.js',
+  'body-scroll-lock',
+]
+
+/**
+ * internal deps or esm deps do not need optimize
+ */
+const EXCLUDE = [
+  '@vueuse/core',
+  '@vueuse/shared',
+  '@unocss/reset',
+  'unocss',
+  'vue',
+  'vue-demi',
+
+  // internal
+  'valaxy',
+  '/@valaxyjs/config',
+  '/@valaxyjs/context',
+]
+
 export function createConfigPlugin(options: ResolvedValaxyOptions): Plugin {
  return {
    name: 'valaxy:site',
@ -30,26 +63,10 @@ export function createConfigPlugin(options: ResolvedValaxyOptions): Plugin {

          // must need it
          include: [
-            'vue',
-            'vue-router',
-            '@vueuse/head',
-            'dayjs',
-            'nprogress',
-            'katex',
+            ...clientDeps.filter(i => !EXCLUDE.includes(i)),
          ],

-          exclude: [
-            '@vueuse/core',
-            '@vueuse/shared',
-            '@unocss/reset',
-            'unocss',
-            'vue-demi',
-
-            // internal
-            'valaxy',
-            '/@valaxyjs/config',
-            '/@valaxyjs/context',
-          ],
+          exclude: EXCLUDE,
        },

        server: {
--- a/packages/valaxy/package.json
+++ b/packages/valaxy/package.json
@ -77,6 +77,7 @@
    "ejs": "^3.1.8",
    "escape-html": "^1.0.3",
    "feed": "^4.2.2",
+    "fuse.js": "^6.6.2",
    "global-dirs": "^3.0.1",
    "gray-matter": "^4.0.3",
    "html-to-text": "^9.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -138,6 +138,7 @@ importers:
      ejs: ^3.1.8
      escape-html: ^1.0.3
      feed: ^4.2.2
+      fuse.js: ^6.6.2
      global-dirs: ^3.0.1
      gray-matter: ^4.0.3
      html-to-text: ^9.0.3
@ -184,7 +185,7 @@ importers:
      '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
      '@vueuse/core': 9.11.1_vue@3.2.45
      '@vueuse/head': 1.0.23_vue@3.2.45
-      '@vueuse/integrations': 9.11.1_nprogress@0.2.0+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
@ -194,6 +195,7 @@ importers:
      ejs: 3.1.8
      escape-html: 1.0.3
      feed: 4.2.2
+      fuse.js: 6.6.2
      global-dirs: 3.0.1
      gray-matter: 4.0.3
      html-to-text: 9.0.3
@ -1897,7 +1899,7 @@ packages:
      vue: 3.2.45
    dev: false

-  /@vueuse/integrations/9.11.1_nprogress@0.2.0+vue@3.2.45:
+  /@vueuse/integrations/9.11.1_mxlsbeg5rfr66lwi3qdsf45g6a:
    resolution: {integrity: sha512-1VBT1U0ScI0GmJn+i7RvyCX5P+Dh04yxHurN3RniYPCFOJ8mCKSqJlzSA5aQ94UIK0ZKI2RyEGS8FY0WAteixw==}
    peerDependencies:
      async-validator: '*'
@ -1937,6 +1939,7 @@ packages:
    dependencies:
      '@vueuse/core': 9.11.1_vue@3.2.45
      '@vueuse/shared': 9.11.1_vue@3.2.45
+      fuse.js: 6.6.2
      nprogress: 0.2.0
      vue-demi: 0.13.11_vue@3.2.45
    transitivePeerDependencies:
@ -3925,6 +3928,11 @@ packages:
  /functions-have-names/1.2.3:
    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}

+  /fuse.js/6.6.2:
+    resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
+    engines: {node: '>=10'}
+    dev: false
+
  /get-caller-file/2.0.5:
    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
    engines: {node: 6.* || 8.* || >= 10.*}