feat(volar): support export props

.changeset/rich-brooms-whisper.md

@@ -0,0 +1,6 @@
+---
+'@vue-macros/volar': minor
+'@vue-macros/nuxt': minor
+---
+
+add volar support of export props

packages/nuxt/src/index.ts

@@ -52,7 +52,8 @@ export default defineNuxtModule<VueMacrosOptions>({
     nuxt.options.typescript.tsConfig.vueCompilerOptions.plugins.push(
       '@vue-macros/volar/define-model',
       '@vue-macros/volar/define-props',
-      '@vue-macros/volar/define-slots'
+      '@vue-macros/volar/define-slots',
+      '@vue-macros/volar/export-props'
     )
 
     nuxt.options.vite.vue ||= {}

packages/volar/export-props.js

@@ -0,0 +1 @@
+module.exports = require('./dist/export-props').default

packages/volar/package.json

@@ -33,12 +33,15 @@
     "./define-model": {
       "require": "./define-model.js"
     },
-    "./short-vmodel": {
-      "require": "./short-vmodel.js"
-    },
     "./define-slots": {
       "require": "./define-slots.js"
     },
+    "./export-props": {
+      "require": "./export-props.js"
+    },
+    "./short-vmodel": {
+      "require": "./short-vmodel.js"
+    },
     "./define-props": {
       "require": "./define-props.js"
     }

packages/volar/src/common.ts

@@ -1,3 +1,22 @@
+import type { FileRangeCapabilities } from '@volar/language-core'
+import type { Segment } from 'muggle-string'
+
 export function getVueLibraryName(vueVersion: number) {
   return vueVersion < 2.7 ? '@vue/runtime-dom' : 'vue'
 }
+
+export function addProps(
+  content: Segment<FileRangeCapabilities>[],
+  decl: Segment<FileRangeCapabilities>[],
+  vueLibName: string
+) {
+  const idx = content.indexOf('setup() {\n')
+  if (idx === -1) return false
+  content.splice(idx, 0, ...['props: ({} as ', ...decl, '),\n'])
+
+  content.push(
+    `type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\n`,
+    `type __VLS_TypePropsToRuntimeProps<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('${vueLibName}').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('${vueLibName}').PropType<T[K]>, required: true } };\n`
+  )
+  return true
+}

packages/volar/src/define-model.ts

@@ -146,7 +146,7 @@ function resolve({
   const typeArg = getTypeArg(ts, sfc)
   if (!typeArg) return
 
-  const vueVersion = vueCompilerOptions.target ?? 3
+  const vueVersion = vueCompilerOptions.target
   const vueLibName = getVueLibraryName(vueVersion)
   const unified =
     (vueVersion < 3 && (vueCompilerOptions as any)?.defineModel?.unified) ??

packages/volar/src/export-props.ts

@@ -0,0 +1,98 @@
+import { FileKind, FileRangeCapabilities } from '@volar/language-core'
+import { addProps, getVueLibraryName } from './common'
+import type { Segment } from 'muggle-string'
+import type {
+  Sfc,
+  VueEmbeddedFile,
+  VueLanguagePlugin,
+} from '@volar/vue-language-core'
+
+function transform({
+  file,
+  sfc,
+  ts,
+  vueLibName,
+}: {
+  file: VueEmbeddedFile
+  sfc: Sfc
+  ts: typeof import('typescript/lib/tsserverlibrary')
+  vueLibName: string
+}) {
+  const idx = file?.content.indexOf('const __VLS_setup = async () => {\n')
+
+  const props: Record<string, boolean> = {}
+  const sources: [offset: number, content: string][] = []
+  let source = file.content[idx + 1][0]
+  let cursor = 0
+  for (const stmt of sfc.scriptSetupAst!.statements) {
+    if (!ts.isVariableStatement(stmt)) continue
+    const exportModifier = stmt.modifiers?.find(
+      (m) => m.kind === ts.SyntaxKind.ExportKeyword
+    )
+    if (!exportModifier) continue
+
+    const start = exportModifier.getFullStart()
+    const end = exportModifier.getEnd()
+    if (cursor > 0) {
+      sources.push([cursor, source.slice(0, start - cursor)])
+    }
+    source = source.slice(end - cursor)
+    cursor = end
+
+    for (const decl of stmt.declarationList.declarations) {
+      if (!ts.isIdentifier(decl.name)) continue
+      props[decl.name.text] = !!decl.initializer
+    }
+  }
+
+  if (sources.length > 0) {
+    sources.push([cursor, source])
+    file.content.splice(
+      idx + 1,
+      1,
+      ...sources.map(([offset, content]): Segment<FileRangeCapabilities> => {
+        return [content, 'scriptSetup', offset, FileRangeCapabilities.full]
+      })
+    )
+  }
+
+  addProps(
+    file.content,
+    [
+      `__VLS_TypePropsToRuntimeProps<{
+  ${Object.entries(props)
+    .map(([prop, optional]) => `${prop}${optional ? '?' : ''}: typeof ${prop}`)
+    .join(',\n')}
+}>`,
+    ],
+    vueLibName
+  )
+}
+
+const plugin: VueLanguagePlugin = ({
+  modules: { typescript: ts },
+  vueCompilerOptions,
+}) => {
+  return {
+    name: 'vue-macros-export-props',
+    version: 1,
+    resolveEmbeddedFile(fileName, sfc, embeddedFile) {
+      if (
+        embeddedFile.kind !== FileKind.TypeScriptHostFile ||
+        !sfc.scriptSetup ||
+        !sfc.scriptSetupAst
+      )
+        return
+
+      const vueLibName = getVueLibraryName(vueCompilerOptions.target)
+
+      transform({
+        file: embeddedFile,
+        sfc,
+        vueLibName,
+        ts,
+      })
+    },
+  }
+}
+export default plugin

playground/vue3/src/examples/export-props/child.vue

@@ -1,8 +1,9 @@
 <!-- eslint-disable import/no-mutable-exports -->
 <!-- eslint-disable vue/no-export-in-script-setup -->
+<!-- eslint-disable @typescript-eslint/no-inferrable-types -->
 <script setup lang="ts">
 export let foo: string
-export const bar = 10
+export const bar: number = 10
 
 const check = () => {
   console.log(foo, bar)

playground/vue3/src/examples/export-props/index.vue

@@ -3,5 +3,5 @@ import Child from './child.vue'
 </script>
 
 <template>
-  <Child foo="foo" bar="20" />
+  <Child foo="foo" />
 </template>

playground/vue3/tsconfig.json

@@ -18,7 +18,8 @@
       "@vue-macros/volar/define-model",
       "@vue-macros/volar/define-props",
       "@vue-macros/volar/short-vmodel",
-      "@vue-macros/volar/define-slots"
+      "@vue-macros/volar/define-slots",
+      "@vue-macros/volar/export-props"
     ],
     "shortVmodel": {
       "prefix": "$"