fix: support "setup" attribute in <script> tag in vue 3

In Vue 3, when <script> tag has "setup" attribute, SFC parser assigned script block to a separate field called "scriptSetup" ✅ Closes: #668
TypeStrong · Nov 21, 2021 · 01bcae4 · 01bcae4
1 parent 9f57a0a
commit 01bcae4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/typescript-reporter/extension/vue/TypeScriptVueExtension.ts b/src/typescript-reporter/extension/vue/TypeScriptVueExtension.ts
@@ -11,8 +11,6 @@ import { VueTemplateCompilerV3 } from './types/vue__compiler-sfc';
 interface GenericScriptSFCBlock {
   content: string;
   attrs: Record<string, string | true>;
-  start?: number;
-  end?: number;
   lang?: string;
   src?: string;
 }
@@ -105,25 +103,43 @@ function createTypeScriptVueExtension(
     let script: GenericScriptSFCBlock | undefined;
     if (isVueTemplateCompilerV2(compiler)) {
       const parsed = compiler.parseComponent(vueSourceText, {
-        pad: 'space',
+        pad: 'line',
       });
 
       script = parsed.script;
     } else if (isVueTemplateCompilerV3(compiler)) {
-      const parsed = compiler.parse(vueSourceText);
-
-      if (parsed.descriptor && parsed.descriptor.script) {
-        const scriptV3 = parsed.descriptor.script;
-
-        // map newer version of SFCScriptBlock to the generic one
-        script = {
-          content: scriptV3.content,
-          attrs: scriptV3.attrs,
-          start: scriptV3.loc.start.offset,
-          end: scriptV3.loc.end.offset,
-          lang: scriptV3.lang,
-          src: scriptV3.src,
-        };
+      const parsed = compiler.parse(vueSourceText, {
+        pad: 'line',
+      });
+
+      if (parsed.descriptor) {
+        if (parsed.descriptor.script) {
+          const scriptV3 = parsed.descriptor.script;
+
+          // map newer version of SFCScriptBlock to the generic one
+          script = {
+            content: scriptV3.content,
+            attrs: scriptV3.attrs,
+            lang: scriptV3.lang,
+            src: scriptV3.src,
+          };
+        } else if (parsed.descriptor.scriptSetup) {
+          const scriptSetupV3 = parsed.descriptor.scriptSetup;
+
+          // map newer version of SFCScriptBlock to the generic one
+          script = {
+            content:
+              scriptSetupV3.content +
+              [
+                'export default {};',
+                '// @ts-ignore',
+                "import { defineProps, defineEmits, defineExpose, withDefaults } from '@vue/runtime-core';",
+              ].join('\n'),
+            attrs: scriptSetupV3.attrs,
+            lang: scriptSetupV3.lang,
+            src: scriptSetupV3.src,
+          };
+        }
       }
     } else {
       throw new Error(
@@ -142,11 +158,7 @@ function createTypeScriptVueExtension(
     } else {
       // <script lang="ts"></script> block
       // pad blank lines to retain diagnostics location
-      const lineOffset = vueSourceText.slice(0, script.start).split(/\r?\n/g).length;
-      const paddedSourceText =
-        Array(lineOffset).join('\n') + vueSourceText.slice(script.start, script.end);
-
-      return createVueInlineScriptEmbeddedSource(paddedSourceText, script.attrs.lang);
+      return createVueInlineScriptEmbeddedSource(script.content, script.attrs.lang);
     }
   }
 

diff --git a/src/typescript-reporter/extension/vue/types/vue__compiler-sfc.ts b/src/typescript-reporter/extension/vue/types/vue__compiler-sfc.ts
@@ -23,6 +23,7 @@ interface SFCDescriptor {
   filename: string;
   template: SFCBlock | null;
   script: SFCBlock | null;
+  scriptSetup: SFCBlock | null;
   styles: SFCBlock[];
   customBlocks: SFCBlock[];
 }
@@ -37,7 +38,11 @@ interface SFCParseResult {
   errors: CompilerError[];
 }
 
+interface SFCParserOptionsV3 {
+  pad?: true | 'line' | 'space';
+}
+
 export interface VueTemplateCompilerV3 {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  parse(template: string, options?: any): SFCParseResult;
+  parse(template: string, options?: SFCParserOptionsV3): SFCParseResult;
 }