test: merge index.html & upgrade vite vue-i18n

docs/pages/addons/index.md

@@ -0,0 +1,17 @@
+# Why Addon?
+
+我们需要一个插件系统允许用户仅使用/快速加在部分功能。
+
+## 命名规范
+
+插件名称：`valaxy-addon-<name>`。
+
+> Add-on 相比 Plug-in 通常包含对界面造成修改，以及仅在某特定平台下适用的含义。
+> 譬如 Edge 插件商店（Add-on Store），Slidev 等使用 Addon 命名。
+>
+> - [Difference Between Add-on and Plug-in](http://www.differencebetween.net/technology/difference-between-add-on-and-plug-in/)
+>
+> Valaxy 本身完全支持使用 Vite 与 Vue 生态插件。
+> 除此之外，我们可能还需要支持一些针对 Valaxy 并（在 Vite/Vue 插件运行前）可控制整个流程的插件。
+>
+> 此时，Addon 的 API 仅仅适用于 Valaxy 平台。

docs/pages/themes/index.md

@@ -59,4 +59,4 @@ export interface ValaxyPluginOptions {
 
 ## Third Plugin
 
-- [关于评论](/docs/theme/comment)
+- [关于评论](/themes/comment)

packages/valaxy/node/index.ts

@@ -1,5 +1,7 @@
 import './declare'
 
+export * from './common'
+export * from './build'
 export * from './config'
 export * from './options'
 export * from './server'

packages/valaxy/node/plugins/preset.ts

@@ -9,7 +9,7 @@ import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
 import Components from 'unplugin-vue-components/vite'
-import VueI18n from '@intlify/vite-plugin-vue-i18n'
+import { vueI18n } from '@intlify/vite-plugin-vue-i18n'
 
 import dayjs from 'dayjs'
 import type { ResolvedValaxyOptions, ValaxyPluginOptions, ValaxyServerOptions } from '../options'
@@ -210,7 +210,7 @@ export async function ViteValaxyPlugins(
     // ...MarkdownPlugin,
 
     // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
-    VueI18n({
+    vueI18n({
       runtimeOnly: true,
       compositionOnly: true,
       include: roots.map(root => `${root}/locales/**`),

packages/valaxy/package.json

@@ -64,7 +64,7 @@
     "@ctrl/tinycolor": "^3.4.1",
     "@iconify-json/carbon": "^1.1.6",
     "@iconify-json/ri": "^1.1.3",
-    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
+    "@intlify/vite-plugin-vue-i18n": "^5.0.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vueuse/core": "^8.9.2",
     "@vueuse/head": "^0.7.6",

pnpm-lock.yaml

@@ -93,7 +93,7 @@ importers:
       '@ctrl/tinycolor': ^3.4.1
       '@iconify-json/carbon': ^1.1.6
       '@iconify-json/ri': ^1.1.3
-      '@intlify/vite-plugin-vue-i18n': ^3.4.0
+      '@intlify/vite-plugin-vue-i18n': ^5.0.0
       '@types/cross-spawn': ^6.0.2
       '@types/ejs': ^3.1.1
       '@types/katex': ^0.14.0
@@ -151,7 +151,7 @@ importers:
       '@ctrl/tinycolor': 3.4.1
       '@iconify-json/carbon': 1.1.6
       '@iconify-json/ri': 1.1.3
-      '@intlify/vite-plugin-vue-i18n': 3.4.0_xvemjdrs57vyjchkqoyrcwzkya
+      '@intlify/vite-plugin-vue-i18n': 5.0.0_xvemjdrs57vyjchkqoyrcwzkya
       '@vitejs/plugin-vue': 2.3.3_vite@2.9.14+vue@3.2.37
       '@vueuse/core': 8.9.2_vue@3.2.37
       '@vueuse/head': 0.7.6_vue@3.2.37
@@ -1790,8 +1790,8 @@ packages:
       - supports-color
     dev: false
 
-  /@intlify/bundle-utils/2.2.2_vue-i18n@9.1.10:
-    resolution: {integrity: sha512-vngkvlIVV8ZJoyC5VqMvqJd2nvsx+qMN7pQjPiPjOrVndeiR7Dlue0k86Q8FsFUzyksW3HJZZi833ldxwbFzTA==}
+  /@intlify/bundle-utils/3.1.0_vue-i18n@9.1.10:
+    resolution: {integrity: sha512-ghlJ0kR2cCQ8D+poKknC0Xx0ncOt3J3os7CcIAqqIWVF7k6AtGoCDnIru+YzlZcvFRNmP9wEZ7jKliojCdAWNg==}
     engines: {node: '>= 12'}
     peerDependencies:
       petite-vue-i18n: '*'
@@ -1802,8 +1802,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': 9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/message-compiler': 9.2.0-beta.37
+      '@intlify/shared': 9.2.0-beta.37
       jsonc-eslint-parser: 1.4.1
       source-map: 0.6.1
       vue-i18n: 9.1.10_vue@3.2.37
@@ -1838,6 +1838,14 @@ packages:
       source-map: 0.6.1
     dev: false
 
+  /@intlify/message-compiler/9.2.0-beta.37:
+    resolution: {integrity: sha512-7V5bJ5b5OqYTOa+Pfl4ugB6p/16yB4R/37i5vIaPzNW3Lhg8hdNoo+mtLPp1VKs1zmgpSjYi/rvDobGkHJvr2g==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.0-beta.37
+      source-map: 0.6.1
+    dev: false
+
   /@intlify/message-resolver/9.1.10:
     resolution: {integrity: sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w==}
     engines: {node: '>= 10'}
@@ -1857,21 +1865,28 @@ packages:
     engines: {node: '>= 10'}
     dev: false
 
-  /@intlify/vite-plugin-vue-i18n/3.4.0_xvemjdrs57vyjchkqoyrcwzkya:
-    resolution: {integrity: sha512-XXcZBgwJ+3FRu11c4ARoY9N00kElPii0/jNZ49qR045Ka7/YGCwb1Ku14BBlMSEHiHDSjLQknLwrJKSQGVZLyA==}
-    engines: {node: '>= 12'}
+  /@intlify/shared/9.2.0-beta.37:
+    resolution: {integrity: sha512-TVh69KwsY1A4Vo/ODJEp9NPW9O6zO1id4hwohaMdcibPdTp9ieX00QU9OiPRJ8Iz6W6A9xjU0Q30RAX1ba4+5g==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/vite-plugin-vue-i18n/5.0.0_xvemjdrs57vyjchkqoyrcwzkya:
+    resolution: {integrity: sha512-49W7y2b0m6Cg6qGoBkjdNgxyzFx3iOSbnxvDaWcN65raaceJVuwCwxXX1SqJbjHTg32rpTFi4jSlroqAV9Rr0w==}
+    engines: {node: '>= 14.6'}
     peerDependencies:
-      petite-vue-i18n: ^9.1.0
-      vite: ^2.0.0
-      vue-i18n: ^9.1.0
+      petite-vue-i18n: '*'
+      vite: ^2.9.0 || ^3.0.0
+      vue-i18n: '*'
     peerDependenciesMeta:
       petite-vue-i18n:
         optional: true
+      vite:
+        optional: true
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 2.2.2_vue-i18n@9.1.10
-      '@intlify/shared': 9.1.10
+      '@intlify/bundle-utils': 3.1.0_vue-i18n@9.1.10
+      '@intlify/shared': 9.2.0-beta.37
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4
       fast-glob: 3.2.11

test/fixtures/theme/index.html

@@ -0,0 +1,7 @@
+<head>
+  <script src="/theme/head.js"></script>
+</head>
+
+<body>
+  <script src="/theme/body.js"></script>
+</body>

test/fixtures/user/index.html

@@ -0,0 +1,7 @@
+<head>
+  <script src="/head.js"></script>
+</head>
+
+<body>
+  <script src="/body.js"></script>
+</body>

test/fixtures/user/package.json

@@ -0,0 +1,8 @@
+{
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "valaxy",
+    "build": "valaxy build"
+  }
+}

test/fixtures/user/pages/posts/hello-valaxy.md

@@ -0,0 +1,3 @@
+# Hello Valaxy
+
+Valaxy Content Test.

test/utils.test.ts

@@ -0,0 +1,38 @@
+import { resolve } from 'path'
+import { describe, expect, it } from 'vitest'
+import type { ResolvedValaxyOptions, ValaxyConfig, ValaxyThemeConfig } from 'valaxy'
+import { getIndexHtml } from 'valaxy'
+
+const clientRoot = resolve(__dirname, '../packages/valaxy/client')
+const themeRoot = resolve(__dirname, 'fixtures/theme')
+const userRoot = resolve(__dirname, 'fixtures/user')
+
+describe('utils', () => {
+  it('merge index.html', async () => {
+    const config = {
+      mode: 'light',
+    } as ValaxyConfig<ValaxyThemeConfig>
+    const indexHtml = await getIndexHtml({ clientRoot, themeRoot, userRoot, config } as ResolvedValaxyOptions)
+
+    const head = indexHtml.match(/<head>([\s\S]*?)<\/head>/im)?.[1]
+    const body = indexHtml.match(/<body>([\s\S]*?)<\/body>/im)?.[1]
+
+    // theme
+    expect(head).toContain('<script src="/theme/head.js"></script>')
+    expect(body).toContain('<script src="/theme/body.js"></script>')
+
+    // user
+    expect(head).toContain('<script src="/head.js"></script>')
+    expect(body).toContain('<script src="/body.js"></script>')
+  })
+
+  it('mode light', async () => {
+    const config = {
+      mode: 'auto',
+    } as ValaxyConfig<ValaxyThemeConfig>
+    const indexHtml = await getIndexHtml({ clientRoot, themeRoot, userRoot, config } as ResolvedValaxyOptions)
+
+    const head = indexHtml.match(/<head>([\s\S]*?)<\/head>/im)?.[1]
+    expect(head).toContain('prefers-color-scheme: dark')
+  })
+})

vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    deps: {
+      inline: ['@vue', '@vueuse', 'vue-demi'],
+    },
+  },
+})