feat(valaxy): on demand load shiki langs & only build esm

api/.vitepress/config.ts

@@ -25,15 +25,26 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'TypeDoc', link: '/typedoc' },
+      { text: '优化笔记', link: '/notes/' },
       { text: 'Valaxy Docs', link: 'https://valaxy.site' },
     ],
 
     sidebar: {
       '/typedoc/': typedocSidebar,
+      '/notes': [
+        {
+          text: 'Shiki 高亮耗时问题',
+          link: '/notes/shiki-performance',
+        },
+      ],
     },
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
     ],
   },
+
+  markdown: {
+    lineNumbers: true,
+  },
 })

api/notes/index.md

@@ -0,0 +1,3 @@
+# 优化笔记
+
+记录一下开发过程中的问题优化。

api/notes/shiki-performance.md

@@ -0,0 +1,91 @@
+# Shiki 高亮耗时问题
+
+Valaxy 使用 Shiki 实现代码高亮。
+
+使用 `Object.keys(bundledLanguages)` 加载全部语言时将使得冷启动时间更久（在 M1 Pro 下增加了约 3s）。
+
+此时应当使用按需加载配置。
+
+> [Bundles](https://shiki.style/guide/bundles)
+
+```ts {18}
+const highlighter = await createHighlighter({
+  themes:
+      typeof theme === 'object' && 'light' in theme && 'dark' in theme
+        ? [theme.light, theme.dark]
+        : [theme],
+  langs: [
+    // load long time, about 3s
+    // ...Object.keys(bundledLanguages),
+    ...(options.languages || []),
+    ...Object.values(options.languageAlias || {}),
+  ],
+  langAlias: options.languageAlias,
+})
+
+// ref vitepress
+// 使用 worker 按需加载语言
+const resolveLangSync = createSyncFn<ShikiResolveLang>(
+  require.resolve('valaxy/dist/node/worker_shikiResolveLang.js'),
+)
+
+function loadLanguage(name: string | LanguageRegistration) {
+  const lang = typeof name === 'string' ? name : name.name
+  if (
+    !isSpecialLang(lang)
+    && !highlighter.getLoadedLanguages().includes(lang)
+  ) {
+    const resolvedLang = resolveLangSync(lang)
+    if (resolvedLang.length)
+      highlighter.loadLanguageSync(resolvedLang)
+    else return false
+  }
+  return true
+}
+
+const internal = highlighter.getInternalContext()
+const getLanguage = internal.getLanguage
+internal.getLanguage = (name) => {
+  loadLanguage(name)
+  return getLanguage.call(internal, name)
+}
+```
+
+预先打包 `worker_shikiResolveLang.ts` 为 JS 以便调用。
+
+```ts [worker_shikiResolveLang.ts]
+import {
+  bundledLanguages,
+  type DynamicImportLanguageRegistration,
+  type LanguageRegistration,
+} from 'shiki'
+import { runAsWorker } from 'synckit'
+
+async function resolveLang(lang: string) {
+  return (
+    (
+      bundledLanguages as Record<
+        string,
+        DynamicImportLanguageRegistration | undefined
+      >
+    )[lang]?.()
+      .then(m => m.default) || ([] as LanguageRegistration[])
+  )
+}
+
+runAsWorker(resolveLang)
+
+export type ShikiResolveLang = typeof resolveLang
+```
+
+```ts [markdown/plugins/highlight.ts]
+// 加载对应语言，若无则 fallback to defaultLang 'txt'
+if (!loadLanguage(lang)) {
+  logger.warn(
+    c.yellow(
+      `\nThe language '${lang}' is not loaded, falling back to '${defaultLang}' for syntax highlighting.`,
+    ),
+  )
+  lang = defaultLang
+}
+```

demo/yun/package.json

@@ -9,6 +9,8 @@
     "build:spa": "valaxy build",
     "build:ssg": "valaxy build --ssg --log=info",
     "dev": "nodemon --exec \"valaxy . --port 4860\"",
+    "vite:dev": "npx vite-node -w scripts/vite-node.ts",
+    "valaxy:dev": "valaxy .",
     "fuse": "valaxy fuse",
     "preview-https": "serve dist",
     "new": "valaxy new",
@@ -17,7 +19,7 @@
   },
   "nodemonConfig": {
     "watch": [
-      "../../packages/valaxy/dist/*.mjs",
+      "../../packages/valaxy/dist/*.js",
       "../../packages/devtools/dist/*"
     ]
   },

demo/yun/scripts/vite-node.ts

@@ -0,0 +1,9 @@
+import { startValaxyDev } from '../../../packages/valaxy/node'
+
+function main() {
+  startValaxyDev({
+    port: 4860,
+  })
+}
+
+main()

docs/package.json

@@ -6,7 +6,7 @@
     "build": "npm run build:ssg",
     "build:spa": "valaxy build",
     "build:ssg": "valaxy build --ssg",
-    "dev": "nodemon -w \"../packages/valaxy/dist/*.mjs\" --exec \"valaxy .\"",
+    "dev": "nodemon -w \"../packages/valaxy/dist/*.js\" --exec \"valaxy .\"",
     "rss": "valaxy rss",
     "serve": "vite preview",
     "vitepress:dev": "vitepress dev",

package.json

@@ -42,6 +42,7 @@
     "demo:build": "pnpm -C demo/yun run build",
     "demo:serve": "pnpm -C demo/yun run serve",
     "demo:yun": "pnpm -C demo/yun run dev",
+    "demo:vite": "pnpm -C demo/yun run vite:dev",
     "dev:lib": "pnpm -C packages/valaxy run dev",
     "dev": "pnpm -r --filter=./packages/** --parallel run dev",
     "devtools": "pnpm -C packages/devtools run dev",
@@ -82,7 +83,7 @@
     "@antfu/eslint-config": "^3.12.0",
     "@iconify-json/logos": "catalog:",
     "@iconify-json/vscode-icons": "catalog:",
-    "@microsoft/api-extractor": "^7.48.0",
+    "@microsoft/api-extractor": "^7.48.1",
     "@playwright/test": "^1.49.1",
     "@types/debug": "^4.1.12",
     "@types/markdown-it-attrs": "^4.1.3",
@@ -94,7 +95,7 @@
     "bumpp": "^9.9.1",
     "cross-env": "^7.0.3",
     "decap-cms-app": "^3.4.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "https-localhost": "^4.7.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.11",
@@ -108,6 +109,7 @@
     "tsx": "^4.19.2",
     "typescript": "catalog:",
     "unbuild": "catalog:",
+    "vite-node": "^2.1.8",
     "vitest": "^2.1.8",
     "vue-tsc": "2.0.17",
     "zx": "^8.2.4"

packages/valaxy/bin/valaxy.mjs → packages/valaxy/bin/valaxy.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 'use strict'
 
-import { run } from '../dist/node/cli/index.mjs'
+import { run } from '../dist/node/cli/index.js'
 
 function main() {
   run()