bump theme + vitepress, make search box lazy

Author: yyx990803

package.json

@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.7",
-    "@vue/theme": "^0.1.20",
-    "vitepress": "^0.20.8",
+    "@vue/theme": "^0.1.22",
+    "vitepress": "^0.20.9",
     "vue": "^3.2.25"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -478,43 +478,6 @@ export const sidebar = {
 export default defineConfig({
   extends: baseConfig,
 
-  vite: {
-    define: {
-      __VUE_OPTIONS_API__: false
-    },
-    optimizeDeps: {
-      exclude: ['@vue/repl']
-    },
-    // @ts-ignore
-    ssr: {
-      external: ['@vue/repl']
-    },
-    server: {
-      host: true,
-      fs: {
-        // for when developing with locally linked theme
-        allow: ['../..']
-      }
-    },
-    build: {
-      minify: 'terser',
-      chunkSizeWarningLimit: Infinity
-    },
-    json: {
-      stringify: true
-    }
-  },
-
-  vue: {
-    template: {
-      compilerOptions: {
-        directiveTransforms: {
-          focus: () => ({ props: [] })
-        }
-      }
-    }
-  },
-
   lang: 'en-US',
   title: 'Vue.js',
   description: 'Vue.js - The Progressive JavaScript Framework',
@@ -570,5 +533,42 @@ export default defineConfig({
       },
       copyright: 'Copyright © 2014-2021 Evan You'
     }
+  },
+
+  vite: {
+    define: {
+      __VUE_OPTIONS_API__: false
+    },
+    optimizeDeps: {
+      exclude: ['@vue/repl']
+    },
+    // @ts-ignore
+    ssr: {
+      external: ['@vue/repl']
+    },
+    server: {
+      host: true,
+      fs: {
+        // for when developing with locally linked theme
+        allow: ['../..']
+      }
+    },
+    build: {
+      minify: 'terser',
+      chunkSizeWarningLimit: Infinity
+    },
+    json: {
+      stringify: true
+    }
+  },
+
+  vue: {
+    template: {
+      compilerOptions: {
+        directiveTransforms: {
+          focus: () => ({ props: [] })
+        }
+      }
+    }
   }
 })

src/.vitepress/config.ts

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { APIGroup, data as apiIndex } from './api.data'
+// in .vue components or .md pages:
+// named import "data" is the resolved static data
+// can also import types for type consistency
+import { data as apiIndex, APIGroup } from './api.data'
 import { ref, computed } from 'vue'
 
 const query = ref('')

src/api/ApiIndex.vue

@@ -1,3 +1,5 @@
+// api.data.ts
+// a file ending with data.(j|t)s will be evaluated in Node.js
 import fs from 'fs'
 import path from 'path'
 import { sidebar } from '../.vitepress/config'
@@ -11,10 +13,13 @@ export interface APIGroup {
   }[]
 }
 
+// declare resolved data type
 export declare const data: APIGroup[]
 
 export default {
+  // declare files that should trigger HMR
   watch: './*.md',
+  // read from fs and generate the data
   load(): APIGroup[] {
     return sidebar['/api/'].map((group) => ({
       text: group.text,