feat: add volar plugins

Author: posva

packages/router/src/volar/entries/sfc-route-blocks.ts

@@ -0,0 +1,66 @@
+import { allCodeFeatures, type VueLanguagePlugin } from '@vue/language-core'
+import { replace, toString } from 'muggle-string'
+
+const plugin: VueLanguagePlugin = () => {
+  const routeBlockIdPrefix = 'route_'
+  const routeBlockIdRe = new RegExp(`^${routeBlockIdPrefix}(\\d+)$`)
+
+  return {
+    version: 2.1,
+    getEmbeddedCodes(_fileName, sfc) {
+      const embeddedCodes = []
+
+      // we add an embedded code for every route block we find with the same index as the block
+      for (let i = 0; i < sfc.customBlocks.length; i++) {
+        const block = sfc.customBlocks[i]!
+
+        // TODO:
+        // `<route>` blocks without `lang="json"` are still interpreted as text right now.
+        // See: https://github.com/vuejs/language-tools/issues/185#issuecomment-1173742726
+        // This seems to be because `custom_block_x` is still seen as txt, even though the corresponding `route_x` is json.
+        if (block.type === 'route') {
+          const lang = block.lang === 'txt' ? 'json' : block.lang
+          embeddedCodes.push({ id: `${routeBlockIdPrefix}${i}`, lang })
+        }
+      }
+
+      return embeddedCodes
+    },
+    resolveEmbeddedCode(_fileName, sfc, embeddedCode) {
+      const match = embeddedCode.id.match(routeBlockIdRe)
+
+      if (match) {
+        const i = parseInt(match[1]!)
+        const block = sfc.customBlocks[i]
+
+        // this shouldn't happen, but just in case
+        if (!block) {
+          return
+        }
+
+        embeddedCode.content.push([
+          block.content,
+          block.name,
+          0,
+          allCodeFeatures,
+        ])
+
+        if (embeddedCode.lang === 'json') {
+          const contentStr = toString(embeddedCode.content)
+          if (
+            contentStr.trim().startsWith('{') &&
+            !contentStr.includes('$schema')
+          ) {
+            replace(
+              embeddedCode.content,
+              '{',
+              '{\n  "$schema": "https://router.vuejs.org/schemas/route.schema.json",'
+            )
+          }
+        }
+      }
+    },
+  }
+}
+
+export default plugin

packages/router/src/volar/entries/sfc-typed-router.ts

@@ -0,0 +1,113 @@
+import { relative } from 'pathe'
+import type { VueLanguagePlugin } from '@vue/language-core'
+import { replaceSourceRange, toString } from 'muggle-string'
+import { augmentVlsCtx } from '../utils/augment-vls-ctx'
+import type ts from 'typescript'
+
+/*
+  Future ideas:
+  - Enhance typing of `onBeforeRouteUpdate() to and from parameters
+  - Enhance typing of `onBeforeRouteLeave() from parameter
+  - Enhance typing of `<RouterView>`
+    - Typed `name` attribute for named views
+    - Typed `route` slot prop when using `<RouterView v-slot="{route}">`
+  - (low priority) Enhance typing of `to` route in `beforeEnter` route guards defined in `definePage`
+*/
+
+const plugin: VueLanguagePlugin = ({
+  compilerOptions,
+  modules: { typescript: ts },
+}) => {
+  const RE = {
+    DOLLAR_ROUTE: {
+      /**
+       * When using `$route` in a template, it is referred
+       * to as `__VLS_ctx.$route` in the virtual file.
+       */
+      VLS_CTX: /\b__VLS_ctx.\$route\b/g,
+    },
+  }
+
+  return {
+    version: 2.1,
+    resolveEmbeddedCode(fileName, sfc, embeddedCode) {
+      if (!embeddedCode.id.startsWith('script_')) {
+        return
+      }
+
+      // TODO: Do we want to apply this to EVERY .vue file or only to components that the user wrote themselves?
+
+      // NOTE: this might not work if different from the root passed to VueRouter unplugin
+      const relativeFilePath = compilerOptions.rootDir
+        ? relative(compilerOptions.rootDir, fileName)
+        : fileName
+
+      const useRouteNameType = `import('vue-router/auto-routes')._RouteNamesForFilePath<'${relativeFilePath}'>`
+      const useRouteNameTypeParam = `<${useRouteNameType}>`
+
+      if (sfc.scriptSetup) {
+        visit(sfc.scriptSetup.ast)
+      }
+
+      function visit(node: ts.Node) {
+        if (
+          ts.isCallExpression(node) &&
+          ts.isIdentifier(node.expression) &&
+          node.expression.text === 'useRoute' &&
+          !node.typeArguments &&
+          !node.arguments.length
+        ) {
+          if (!sfc.scriptSetup!.lang.startsWith('js')) {
+            replaceSourceRange(
+              embeddedCode.content,
+              sfc.scriptSetup!.name,
+              node.expression.end,
+              node.expression.end,
+              useRouteNameTypeParam
+            )
+          } else {
+            const start = node.getStart(sfc.scriptSetup!.ast)
+            replaceSourceRange(
+              embeddedCode.content,
+              sfc.scriptSetup!.name,
+              start,
+              start,
+              `(`
+            )
+            replaceSourceRange(
+              embeddedCode.content,
+              sfc.scriptSetup!.name,
+              node.end,
+              node.end,
+              ` as ReturnType<typeof useRoute${useRouteNameTypeParam}>)`
+            )
+          }
+        } else {
+          ts.forEachChild(node, visit)
+        }
+      }
+
+      const contentStr = toString(embeddedCode.content)
+
+      const vlsCtxAugmentations: string[] = []
+
+      // Augment `__VLS_ctx.$route` to override the typings of `$route` in template blocks
+      if (contentStr.match(RE.DOLLAR_ROUTE.VLS_CTX)) {
+        vlsCtxAugmentations.push(
+          `{} as { $route: ReturnType<typeof import('vue-router').useRoute${useRouteNameTypeParam}> }`
+        )
+      }
+
+      // We can try augmenting the types for `RouterView` below.
+      // if (contentStr.includes(`__VLS_WithComponent<'RouterView', __VLS_LocalComponents`)) {
+      //   vlsCtxAugmentations.push(`RouterView: 'test';`)
+      // }
+
+      if (vlsCtxAugmentations.length) {
+        augmentVlsCtx(embeddedCode.content, vlsCtxAugmentations)
+      }
+    },
+  }
+}
+
+export default plugin

packages/router/src/volar/utils/augment-vls-ctx.ts

@@ -0,0 +1,41 @@
+import type { Code } from '@vue/language-core'
+
+/**
+ * Augments the VLS context (volar) with additianal type information.
+ *
+ * @param content - content retrieved from the volar pluign
+ * @param codes - codes to add to the VLS context
+ */
+export function augmentVlsCtx(content: Code[], codes: Code[]) {
+  let from = -1
+
+  for (let i = 0; i < content.length; i++) {
+    const code = content[i]
+
+    if (typeof code !== 'string') {
+      continue
+    }
+
+    if (from === -1 && code.startsWith(`const __VLS_ctx`)) {
+      from = i
+    } else if (from !== -1) {
+      if (code === `}`) {
+        content.splice(i, 0, ...codes.map(code => `...${code},\n`))
+        break
+      } else if (code === `;\n`) {
+        content.splice(
+          from + 1,
+          i - from,
+          `{\n`,
+          `...`,
+          ...content.slice(from + 1, i),
+          `,\n`,
+          ...codes.map(code => `...${code},\n`),
+          `}`,
+          `;\n`
+        )
+        break
+      }
+    }
+  }
+}