vue-macros · sxzz · Jul 24, 2024 · Jul 20, 2024 · Jul 22, 2024 · Jul 23, 2024
diff --git a/.changeset/twenty-houses-rest.md b/.changeset/twenty-houses-rest.md
@@ -0,0 +1,6 @@
+---
+"@vue-macros/volar": minor
+---
+
+introduce setup-sfc
+
diff --git a/docs/macros/setup-sfc.md b/docs/macros/setup-sfc.md
@@ -13,7 +13,7 @@ If you're using `setupSFC`, then `defineRender` cannot be disabled.
 |       Vue 3        | :white_check_mark: |
 |       Nuxt 3       | :white_check_mark: |
 |       Vue 2        | :white_check_mark: |
-| TypeScript / Volar |        :x:         |
+| TypeScript / Volar | :white_check_mark: |
 
 ## Setup
 
@@ -85,7 +85,16 @@ export default () => (
 )
 ```
 
-## Known Issues
-
-- The source map does not correspond properly in JSX/TSX files.
-- TypeScript support is not yet completed.
+## Volar Configuration
+
+```jsonc {5}
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/setup-sfc",
+      // ...more feature
+    ],
+  },
+}
+```
diff --git a/docs/zh-CN/macros/setup-sfc.md b/docs/zh-CN/macros/setup-sfc.md
@@ -13,7 +13,7 @@
 |       Vue 3        | :white_check_mark: |
 |       Nuxt 3       | :white_check_mark: |
 |       Vue 2        | :white_check_mark: |
-| TypeScript / Volar |        :x:         |
+| TypeScript / Volar | :white_check_mark: |
 
 ## 安装
 
@@ -85,7 +85,16 @@ export default () => (
 )
 ```
 
-## 已知的问题
-
-- Source map 在 JSX/TSX 文件中不能正确的映射。
-- TypeScript 支持尚未完成。
+## Volar 配置
+
+```jsonc {5}
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/setup-sfc",
+      // ...更多功能
+    ],
+  },
+}
+```
diff --git a/packages/volar/src/setup-sfc.ts b/packages/volar/src/setup-sfc.ts
@@ -0,0 +1,40 @@
+import { REGEX_SETUP_SFC } from '@vue-macros/common'
+import { parse, type VueLanguagePlugin } from '@vue/language-core'
+import type { SFCParseResult } from 'vue/compiler-sfc'
+
+const plugin: VueLanguagePlugin = () => {
+  function isValidFile(fileName: string) {
+    return REGEX_SETUP_SFC.test(fileName)
+  }
+
+  return {
+    version: 2.1,
+    order: -1,
+    isValidFile,
+    parseSFC2(fileName, _, content) {
+      if (!isValidFile(fileName)) return
+
+      const lang = fileName.split(/\.[cm]?/).at(-1)
+      const prefix = `<script setup lang="${lang}">\n`
+      return patchSFC(parse(`${prefix}${content}\n</script>`), prefix.length)
+    },
+  }
+}
+
+export default plugin
+
+function patchSFC(sfc: SFCParseResult, offset: number): SFCParseResult {
+  const {
+    descriptor: { scriptSetup },
+  } = sfc
+
+  if (scriptSetup) {
+    scriptSetup.loc.start.column -= offset
+    scriptSetup.loc.start.offset -= offset
+    scriptSetup.loc.end.offset -= offset
+    if (scriptSetup.loc.end.line === scriptSetup.loc.start.line) {
+      scriptSetup.loc.end.column -= offset
+    }
+  }
+  return sfc
+}
diff --git a/playground/vue3/src/examples/setup-sfc/comp.setup.tsx b/playground/vue3/src/examples/setup-sfc/comp.setup.tsx
@@ -0,0 +1,15 @@
+import { expectTypeOf } from 'expect-type'
+
+const { foo } = defineProps<{
+  foo: number
+}>()
+
+/**
+ * ## Vue JSX is the future
+ */
+export default (
+  <div>
+    <div v-if={foo === 1}>{expectTypeOf<1>(foo)}</div>
+    <div v-else-if={foo === 2}>{expectTypeOf<2>(foo)}</div>
+  </div>
+)
diff --git a/playground/vue3/src/examples/setup-sfc/index.setup.tsx b/playground/vue3/src/examples/setup-sfc/index.setup.tsx
@@ -1,10 +1,3 @@
-import { ref } from 'vue'
+import Comp from './comp.setup'
 
-const msg = ref('Hello World')
-
-export default () => (
-  <div>
-    <input type="text" v-model={msg.value} />
-    <div>{msg.value}</div>
-  </div>
-)
+export default <Comp foo={1} />
diff --git a/playground/vue3/tsconfig.json b/playground/vue3/tsconfig.json
@@ -39,6 +39,7 @@
       "@vue-macros/volar/setup-jsdoc",
       "@vue-macros/volar/boolean-prop",
       "@vue-macros/volar/template-ref",
+      "@vue-macros/volar/setup-sfc",
       "@vue-macros/volar/script-lang"
     ],
     "experimentalDefinePropProposal": "kevinEdition",
@@ -54,7 +55,11 @@
         "include": ["**/export-props/**"]
       },
       "exportRender": {
-        "include": ["**/export-render/**"]
+        "include": [
+          "**/export-render/**",
+          "**/setup-sfc/**",
+          "**/full.setup.tsx/**"
+        ]
       }
     }
   },