Fix #3107

Author: yoyo930021

server/src/services/typescriptService/bridge.ts

@@ -8,12 +8,12 @@ export const moduleName = 'vue-editor-bridge';
 export const fileName = 'vue-temp/vue-editor-bridge.ts';
 
 const renderHelpers = `
-type ComponentListeners<T> = {
-  [K in keyof T]?: ($event: T[K]) => any;
+type ComponentListeners<T, TH> = {
+  [K in keyof T]?: (this: TH, $event: T[K]) => any;
 };
-export interface ${componentDataName}<T> {
+export interface ${componentDataName}<T, TH> {
   props: Record<string, any>;
-  on: ComponentListeners<T>;
+  on: ComponentListeners<T, TH>;
   directives: any[];
 }
 export declare const ${renderHelperName}: {
@@ -23,7 +23,7 @@ export declare const ${componentHelperName}: {
   <T>(
     vm: T,
     tag: string,
-    data: ${componentDataName}<Record<string, any>> & ThisType<T>,
+    data: ${componentDataName}<Record<string, any>, T> & ThisType<T>,
     children: any[]
   ): any;
 };

server/src/services/typescriptService/preprocess.ts

@@ -119,7 +119,7 @@ export function createUpdater(
       newText,
       sourceFile.languageVersion,
       true /* setParentNodes: Need this to walk the AST */,
-      tsModule.ScriptKind.JS
+      tsModule.ScriptKind.TS
     );
     // Assign version to the new template sourceFile to avoid re-processing
     // *internal* property
@@ -338,15 +338,15 @@ function convertChildComponentsInfoToSource(childComponents: ChildComponent[]) {
     });
 
     src += `
-interface ${componentDataInterfaceName}<T> extends ${componentDataName}<T> {
+interface ${componentDataInterfaceName}<T, TH> extends ${componentDataName}<T, TH> {
   props: { ${propTypeStrings.join(', ')} }
-  on: { ${onTypeStrings.join(', ')} } & { [K in keyof T]?: ($event: T[K]) => any; }
+  on: { ${onTypeStrings.join(', ')} } & { [K in keyof T]?: (this: TH, $event: T[K]) => any; }
 }
 declare const ${componentHelperInterfaceName}: {
   <T>(
     vm: T,
     tag: string,
-    data: ${componentDataInterfaceName}<Record<string, any>> & ThisType<T>,
+    data: ${componentDataInterfaceName}<Record<string, any>, T> & ThisType<T>,
     children: any[]
   ): any
 }`;

server/src/services/typescriptService/serviceHost.ts

@@ -310,7 +310,7 @@ export function getServiceHost(
           }
           return getScriptKind(tsModule, doc.languageId);
         } else if (isVirtualVueTemplateFile(fileName)) {
-          return tsModule.ScriptKind.JS;
+          return tsModule.ScriptKind.TS;
         } else {
           if (fileName === bridge.fileName) {
             return tsModule.ScriptKind.TS;

test/componentData/features/hover/basic.test.ts

@@ -8,7 +8,7 @@ describe('Should show hover info with component data', () => {
   it('shows element description', async () => {
     await testHover(docUri, position(2, 5), {
       contents: [
-        '```ts\n(property) __vlsComponentData<Record<string, any>>.props: Record<string, any>\n```\nA foo tag'
+        '```ts\n(property) __vlsComponentData<Record<string, any>, CombinedVueInstance<{ noop(): void; } & Record<never, any> & Vue, object, object, object, Record<never, any>>>.props: Record<string, any>\n```\nA foo tag'
       ],
       range: sameLineRange(2, 5, 12)
     });
@@ -37,7 +37,9 @@ describe('Should show hover info with component data', () => {
 
   it('shows attribute description for html event handler', async () => {
     await testHover(docUri, position(4, 26), {
-      contents: ['```ts\n(property) "error": ($event: any) => () => void\n```'],
+      contents: [
+        '```ts\n(property) "error": (this: CombinedVueInstance<{\n    noop(): void;\n} & Record<never, any> & Vue, object, object, object, Record<never, any>>, $event: any) => () => void\n```'
+      ],
       range: sameLineRange(4, 26, 31)
     });
   });

test/interpolation/features/diagnostics/basic.test.ts

@@ -264,7 +264,8 @@ describe('Should find template-diagnostics in <template> region', () => {
     'issue-1745-duplicate-event-with-modifiers.vue',
     'issue-2254.vue',
     'issue-2258.vue',
-    'optional-in-template.vue'
+    'optional-in-template.vue',
+    'issue-3107.vue'
   ];
 
   noErrorTests.forEach(t => {

test/interpolation/fixture/diagnostics/issue-3107.vue

@@ -0,0 +1,16 @@
+<template>
+  <button @click="page = newPage">
+    Switch to page {{ newPage }}
+  </button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: "home",
+      newPage: "products",
+    }
+  }
+}
+</script>