revert: "fix: support "setup" attribute in <script> tag in vue 3 (#676)…

…" (#678) This reverts commit 40e4ecf.
TypeStrong · Nov 23, 2021 · b1c0d9a · b1c0d9a
1 parent 40e4ecf
commit b1c0d9a
Show file tree

Hide file tree

Showing 9 changed files with 1,137 additions and 1,149 deletions.
diff --git a/src/typescript-reporter/extension/vue/TypeScriptVueExtension.ts b/src/typescript-reporter/extension/vue/TypeScriptVueExtension.ts
@@ -10,7 +10,10 @@ import { VueTemplateCompilerV3 } from './types/vue__compiler-sfc';
 
 interface GenericScriptSFCBlock {
   content: string;
-  attrs: Record<string, string | true | undefined>;
+  attrs: Record<string, string | true>;
+  start?: number;
+  end?: number;
+  lang?: string;
   src?: string;
 }
 
@@ -91,22 +94,6 @@ function createTypeScriptVueExtension(
     };
   }
 
-  function mergeVueScriptsContent(
-    scriptContent: string | undefined,
-    scriptSetupContent: string | undefined
-  ): string {
-    const scriptLines = scriptContent?.split(/\r?\n/) ?? [];
-    const scriptSetupLines = scriptSetupContent?.split(/\r?\n/) ?? [];
-    const maxScriptLines = Math.max(scriptLines.length, scriptSetupLines.length);
-    const mergedScriptLines: string[] = [];
-
-    for (let line = 0; line < maxScriptLines; ++line) {
-      mergedScriptLines.push(scriptLines[line] || scriptSetupLines[line]);
-    }
-
-    return mergedScriptLines.join('\n');
-  }
-
   function getVueEmbeddedSource(fileName: string): TypeScriptEmbeddedSource | undefined {
     if (!fs.existsSync(fileName)) {
       return undefined;
@@ -118,44 +105,25 @@ function createTypeScriptVueExtension(
     let script: GenericScriptSFCBlock | undefined;
     if (isVueTemplateCompilerV2(compiler)) {
       const parsed = compiler.parseComponent(vueSourceText, {
-        pad: 'line',
+        pad: 'space',
       });
 
       script = parsed.script;
     } else if (isVueTemplateCompilerV3(compiler)) {
-      const parsed = compiler.parse(vueSourceText, {
-        pad: 'line',
-      });
-
-      if (parsed.descriptor) {
-        const parsedScript = parsed.descriptor.script;
-        const parsedScriptSetup = parsed.descriptor.scriptSetup;
-        let parsedContent = mergeVueScriptsContent(
-          parsedScript?.content,
-          parsedScriptSetup?.content
-        );
-
-        if (parsedScriptSetup) {
-          // a little bit naive, but should work in 99.9% cases without need for parsing script
-          const alreadyHasExportDefault = /export\s+default[\s|{]/gm.test(parsedContent);
-
-          if (!alreadyHasExportDefault) {
-            parsedContent += '\nexport default {};';
-          }
-          // add script setup lines at the end
-          parsedContent +=
-            "\n// @ts-ignore\nimport { defineProps, defineEmits, defineExpose, withDefaults } from '@vue/runtime-core';";
-        }
-
-        if (parsedScript || parsedScriptSetup) {
-          // map newer version of SFCScriptBlock to the generic one
-          script = {
-            content: parsedContent,
-            attrs: {
-              lang: parsedScript?.lang || parsedScriptSetup?.lang,
-            },
-          };
-        }
+      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,
+        };
       }
     } else {
       throw new Error(
@@ -173,7 +141,12 @@ function createTypeScriptVueExtension(
       }
     } else {
       // <script lang="ts"></script> block
-      return createVueInlineScriptEmbeddedSource(script.content, script.attrs.lang);
+      // 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);
     }
   }
 

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,7 +23,6 @@ interface SFCDescriptor {
   filename: string;
   template: SFCBlock | null;
   script: SFCBlock | null;
-  scriptSetup: SFCBlock | null;
   styles: SFCBlock[];
   customBlocks: SFCBlock[];
 }
@@ -38,11 +37,7 @@ 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?: SFCParserOptionsV3): SFCParseResult;
+  parse(template: string, options?: any): SFCParseResult;
 }
diff --git a/test/e2e/TypeScriptVueExtension.spec.ts b/test/e2e/TypeScriptVueExtension.spec.ts
@@ -7,7 +7,6 @@ import {
   WEBPACK_DEV_SERVER_VERSION,
 } from './sandbox/WebpackDevServerDriver';
 import { FORK_TS_CHECKER_WEBPACK_PLUGIN_VERSION } from './sandbox/Plugin';
-import semver from 'semver/preload';
 
 describe('TypeScript Vue Extension', () => {
   let sandbox: Sandbox;
@@ -30,23 +29,21 @@ describe('TypeScript Vue Extension', () => {
       typescript: '^3.8.0',
       tsloader: '^7.0.0',
       vueloader: '^15.8.3',
-      vue: '^2.0.0',
+      vue: '^2.6.11',
       compiler: 'vue-template-compiler',
-      qrcodevue: '^1.7.0',
     },
     {
       async: true,
       typescript: '^3.8.0',
       tsloader: '^7.0.0',
-      vueloader: 'v16.8.3',
-      vue: '^3.0.0',
+      vueloader: 'v16.0.0-beta.3',
+      vue: '^3.0.0-beta.14',
       compiler: '@vue/compiler-sfc',
-      qrcodevue: '^3.0.0',
     },
   ])(
     'reports semantic error for %p',
-    async ({ async, typescript, tsloader, vueloader, vue, compiler, qrcodevue }) => {
-      const fixtures = [
+    async ({ async, typescript, tsloader, vueloader, vue, compiler }) => {
+      await sandbox.load([
         await readFixture(join(__dirname, 'fixtures/environment/typescript-vue.fixture'), {
           FORK_TS_CHECKER_WEBPACK_PLUGIN_VERSION: JSON.stringify(
             FORK_TS_CHECKER_WEBPACK_PLUGIN_VERSION
@@ -59,23 +56,12 @@ describe('TypeScript Vue Extension', () => {
           VUE_LOADER_VERSION: JSON.stringify(vueloader),
           VUE_VERSION: JSON.stringify(vue),
           VUE_COMPILER: JSON.stringify(compiler),
-          QRCODE_VUE_VERSION: JSON.stringify(qrcodevue),
           ASYNC: JSON.stringify(async),
         }),
-        await readFixture(join(__dirname, 'fixtures/implementation/typescript-vue-shared.fixture')),
-      ];
-      if (semver.satisfies('2.0.0', vue)) {
-        fixtures.push(
-          await readFixture(join(__dirname, 'fixtures/implementation/typescript-vue2.fixture'))
-        );
-      } else if (semver.satisfies('3.0.0', vue)) {
-        fixtures.push(
-          await readFixture(join(__dirname, 'fixtures/implementation/typescript-vue3.fixture'))
-        );
-      }
-      await sandbox.load(fixtures);
+        await readFixture(join(__dirname, 'fixtures/implementation/typescript-vue.fixture')),
+      ]);
 
-      if (semver.satisfies('2.0.0', vue)) {
+      if (vue === '^2.6.11') {
         await sandbox.write(
           'src/vue-shim.d.ts',
           [
@@ -85,7 +71,7 @@ describe('TypeScript Vue Extension', () => {
             '}',
           ].join('\n')
         );
-      } else if (semver.satisfies('3.0.0', vue)) {
+      } else {
         await sandbox.write('src/vue-shim.d.ts', 'declare module "*.vue";');
       }
 
@@ -112,7 +98,7 @@ describe('TypeScript Vue Extension', () => {
           'ERROR in src/component/LoggedIn.vue:27:21',
           "TS2304: Cannot find name 'getUserName'.",
           '    25 |       const user: User = this.user;',
-          '    26 |',
+          '    26 | ',
           "  > 27 |       return user ? getUserName(user) : '';",
           '       |                     ^^^^^^^^^^^',
           '    28 |     }',
@@ -140,7 +126,7 @@ describe('TypeScript Vue Extension', () => {
           'ERROR in src/component/LoggedIn.vue:27:29',
           "TS2339: Property 'firstName' does not exist on type 'User'.",
           '    25 |       const user: User = this.user;',
-          '    26 |',
+          '    26 | ',
           "  > 27 |       return user ? `${user.firstName} ${user.lastName}` : '';",
           '       |                             ^^^^^^^^^',
           '    28 |     }',
@@ -150,7 +136,7 @@ describe('TypeScript Vue Extension', () => {
         [
           'ERROR in src/model/User.ts:11:16',
           "TS2339: Property 'firstName' does not exist on type 'User'.",
-          '     9 |',
+          '     9 | ',
           '    10 | function getUserName(user: User): string {',
           '  > 11 |   return [user.firstName, user.lastName]',
           '       |                ^^^^^^^^^',
@@ -159,62 +145,6 @@ describe('TypeScript Vue Extension', () => {
           '    14 | }',
         ].join('\n'),
       ]);
-
-      // fix the error
-      await sandbox.patch(
-        'src/model/User.ts',
-        '  lastName?: string;',
-        ['  firstName?: string;', '  lastName?: string;'].join('\n')
-      );
-      await driver.waitForNoErrors();
-
-      if (semver.satisfies('3.0.0', vue)) {
-        await sandbox.patch(
-          'src/component/Header.vue',
-          'defineProps({',
-          ['let x: number = "1"', 'defineProps({'].join('\n')
-        );
-
-        errors = await driver.waitForErrors();
-        expect(errors).toEqual([
-          [
-            'ERROR in src/component/Header.vue:6:5',
-            "TS2322: Type '\"1\"' is not assignable to type 'number'.",
-            '    4 |',
-            '    5 | <script setup lang="ts">',
-            '  > 6 | let x: number = "1"',
-            '      |     ^',
-            '    7 | defineProps({',
-            '    8 |   title: String,',
-            '    9 | });',
-          ].join('\n'),
-        ]);
-        // fix the issue
-        await sandbox.patch('src/component/Header.vue', 'let x: number = "1"', '');
-        await driver.waitForNoErrors();
-
-        // introduce error in second <script>
-        await sandbox.patch(
-          'src/component/Logo.vue',
-          'export default {',
-          ['let x: number = "1";', 'export default {'].join('\n')
-        );
-
-        errors = await driver.waitForErrors();
-        expect(errors).toEqual([
-          [
-            'ERROR in src/component/Logo.vue:15:5',
-            "TS2322: Type '\"1\"' is not assignable to type 'number'.",
-            '    13 |',
-            '    14 | <script lang="ts">',
-            '  > 15 | let x: number = "1";',
-            '       |     ^',
-            '    16 | export default {',
-            '    17 |   inheritAttrs: false,',
-            '    18 |   customOptions: {}',
-          ].join('\n'),
-        ]);
-      }
     }
   );
 });
diff --git a/test/e2e/fixtures/environment/typescript-vue.fixture b/test/e2e/fixtures/environment/typescript-vue.fixture
@@ -17,7 +17,7 @@
     "typescript": ${TYPESCRIPT_VERSION},
     "vue-loader": ${VUE_LOADER_VERSION},
     ${VUE_COMPILER}: ${VUE_VERSION},
-    "qrcode.vue": ${QRCODE_VUE_VERSION},
+    "qrcode.vue": "^1.7.0",
     "webpack": ${WEBPACK_VERSION},
     "webpack-cli": ${WEBPACK_CLI_VERSION},
     "webpack-dev-server": ${WEBPACK_DEV_SERVER_VERSION}

diff --git a/...lementation/typescript-vue-shared.fixture → ...res/implementation/typescript-vue.fixture b/...lementation/typescript-vue-shared.fixture → ...res/implementation/typescript-vue.fixture
@@ -1,4 +1,4 @@
-/// src/component/LoginView.vue
+/// src/App.vue
 <template>
   <logged-in v-if="user" :user="user" @logout="logout"></logged-in>
   <login-form v-else @login="login"></login-form>
@@ -108,7 +108,7 @@ export default {
     }
   },
   computed: {
-    userName() {
+    userName: () => {
       const user: User = this.user;
 
       return user ? getUserName(user) : '';

diff --git a/test/e2e/fixtures/implementation/typescript-vue2.fixture b/test/e2e/fixtures/implementation/typescript-vue2.fixture
diff --git a/test/e2e/fixtures/implementation/typescript-vue3.fixture b/test/e2e/fixtures/implementation/typescript-vue3.fixture