feat: add errors reference page

.vitepress/config.ts

@@ -17,6 +17,7 @@ const nav: ThemeConfig['nav'] = [
       { text: 'Quick Start', link: '/guide/quick-start' },
       // { text: 'Style Guide', link: '/style-guide/' },
       { text: 'Glossary', link: '/glossary/' },
+      { text: 'Error Reference', link: '/errors/' },
       {
         text: 'Vue 2 Docs',
         link: 'https://v2.vuejs.org'
@@ -695,7 +696,7 @@ export default defineConfigWithTheme<ThemeConfig>({
   markdown: {
     config(md) {
       md.use(headerPlugin)
-        // .use(textAdPlugin)
+      // .use(textAdPlugin)
     }
   },
 

package.json

@@ -19,6 +19,8 @@
   "devDependencies": {
     "@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

@@ -0,0 +1,16 @@
+<script setup>
+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}
+
+## Compiler Errors {#compiler-errors}
+
+<ErrorsTable kind="compiler" :errors="data.compiler" :highlight="highlight" />