refactor

package.json

@@ -20,6 +20,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^16.9.1",
     "@vue/compiler-core": "npm:@vue/compiler-core-canary@minor",
+    "@vue/runtime-core": "npm:@vue/runtime-core-canary@minor",
     "terser": "^5.14.2"
   },
   "pnpm": {

src/errors/ErrorsTable.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  kind: string
+  errors: Record<any, string>
+  highlight?: any
+}>()
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Code</th>
+        <th>Message</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(msg, code) of errors"
+        :class="{ highlight: highlight === `${kind}-${code}` }"
+      >
+        <td :id="`${kind}-${code}`" v-text="code" />
+        <td v-text="msg" />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.highlight {
+  color: var(--vt-c-yellow-darker);
+  font-weight: bold;
+}
+</style>

src/errors/errors.data.ts

@@ -0,0 +1,14 @@
+import { defineLoader } from 'vitepress'
+import { errorMessages } from '@vue/compiler-core'
+
+function filterEmptyMsg(data: Record<number, string>) {
+  return Object.fromEntries(Object.entries(data).filter(([_, msg]) => msg))
+}
+
+export default defineLoader({
+  load() {
+    return {
+      compiler: filterEmptyMsg(errorMessages)
+    }
+  }
+})

src/errors/index.md

@@ -1,28 +1,16 @@
 <script setup>
-import { data } from '../../.vitepress/errors.data.ts'
-const hash = location.hash.slice(1)
+import { ref, onMounted } from 'vue'
+import { data } from './errors.data.ts'
+import ErrorsTable from './ErrorsTable.vue'
+
+const highlight = ref()
+onMounted(() => {
+  highlight.value = location.hash.slice(1)
+})
 </script>
 
 # Error Reference {#error-reference}
 
-<table>
-  <thead>
-    <tr>
-      <th>Code</th>
-      <th>Message</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr v-for="(msg, code) of data.errorMessages" :class="{ highlight: hash === String(code) }">
-      <td :id="code" v-text="code" />
-      <td v-text="msg" />
-    </tr>
-  </tbody>
-</table>
+## Compiler Errors {#compiler-errors}
 
-<style scoped>
-.highlight {
-  color: var(--vt-c-yellow-darker);
-  font-weight: bold;
-}
-</style>
+<ErrorsTable kind="compiler" :errors="data.compiler" :highlight="highlight" />