Type checking for template expressions

client/vueMain.ts

@@ -22,10 +22,9 @@ export function activate(context: vscode.ExtensionContext) {
 
   context.subscriptions.push(
     vscode.commands.registerCommand('vetur.chooseTypeScriptRefactoring', (args: any) => {
-      client.sendRequest<vscode.Command | undefined>('requestCodeActionEdits', args)
-        .then(command =>
-          command && vscode.commands.executeCommand(command.command, ...command.arguments!)
-        );
+      client
+        .sendRequest<vscode.Command | undefined>('requestCodeActionEdits', args)
+        .then(command => command && vscode.commands.executeCommand(command.command, ...command.arguments!));
     })
   );
 

package.json

@@ -412,6 +412,11 @@
         "vetur.dev.vlsPath": {
           "type": "string",
           "description": "Path to VLS for Vetur developers. There are two ways of using it. \n\n1. Clone vuejs/vetur from GitHub, build it and point it to the ABSOLUTE path of `/server`.\n2. `yarn global add vue-language-server` and point Vetur to the installed location (`yarn global dir` + node_modules/vue-language-server)"
+        },
+        "vetur.experimental.templateTypeCheck": {
+          "type": "boolean",
+          "default": true,
+          "description": "Type-check interpolation expressions in <template> region"
         }
       }
     }

server/package.json

@@ -44,11 +44,14 @@
     "vscode-languageserver": "^5.3.0-next.4",
     "vscode-languageserver-types": "^3.15.0-next.1",
     "vscode-uri": "^1.0.1",
+    "vue-eslint-parser": "^6.0.3",
     "vue-onsenui-helper-json": "^1.0.2",
     "vuetify-helper-json": "^1.0.0"
   },
   "devDependencies": {
     "@types/eslint": "^4.16.5",
+    "@types/eslint-scope": "^3.7.0",
+    "@types/eslint-visitor-keys": "^1.0.0",
     "@types/glob": "^7.1.0",
     "@types/js-beautify": "^1.8.0",
     "@types/lodash": "^4.14.118",

server/src/modes/script/bridge.ts

@@ -1,21 +1,44 @@
-// this bridge file will be injected into TypeScript service
+import { renderHelperName, componentHelperName, iterationHelperName, listenerHelperName } from './transformTemplate';
+
+// This bridge file will be injected into TypeScript language service
 // it enable type checking and completion, yet still preserve precise option type
 
 export const moduleName = 'vue-editor-bridge';
 
 export const fileName = 'vue-temp/vue-editor-bridge.ts';
 
-export const oldContent = `
+const renderHelpers = `
+export declare const ${renderHelperName}: {
+  <T>(Component: (new (...args: any[]) => T), fn: (this: T) => any): any;
+};
+export declare const ${componentHelperName}: {
+  (tag: string, data: any, children: any[]): any;
+};
+export declare const ${iterationHelperName}: {
+  <T>(list: T[], fn: (value: T, index: number) => any): any;
+  <T>(obj: { [key: string]: T }, fn: (value: T, key: string, index: number) => any): any;
+  (num: number, fn: (value: number) => any): any;
+  <T>(obj: object, fn: (value: any, key: string, index: number) => any): any;
+};
+export declare const ${listenerHelperName}: {
+  <T>(vm: T, listener: (this: T, ...args: any[]) => any): any;
+};
+`;
+
+export const oldContent =
+  `
 import Vue from 'vue';
 export interface GeneralOption extends Vue.ComponentOptions<Vue> {
   [key: string]: any;
 }
 export default function bridge<T>(t: T & GeneralOption): T {
   return t;
-}`;
+}
+` + renderHelpers;
 
-export const content = `
+export const content =
+  `
 import Vue from 'vue';
 const func = Vue.extend;
 export default func;
-`;
+` + renderHelpers;

server/src/modes/script/javascript.ts

@@ -102,18 +102,23 @@ export async function getJavascriptMode(
     },
 
     doValidation(doc: TextDocument): Diagnostic[] {
+      const templateDiags = getTemplateDiagnostics();
+      const scriptDiags = getScriptDiagnostics();
+      return [...templateDiags, ...scriptDiags];
+
+      function getScriptDiagnostics(): Diagnostic[] {
         const { scriptDoc, service } = updateCurrentTextDocument(doc);
         if (!languageServiceIncludesFile(service, doc.uri)) {
           return [];
         }
 
         const fileFsPath = getFileFsPath(doc.uri);
-      const diagnostics = [
+        const rawScriptDiagnostics = [
           ...service.getSyntacticDiagnostics(fileFsPath),
           ...service.getSemanticDiagnostics(fileFsPath)
         ];
 
-      return diagnostics.map(diag => {
+        return rawScriptDiagnostics.map(diag => {
           const tags: DiagnosticTag[] = [];
 
           if (diag.reportsUnnecessary) {
@@ -131,6 +136,39 @@ export async function getJavascriptMode(
             source: 'Vetur'
           };
         });
+      }
+
+      function getTemplateDiagnostics(): Diagnostic[] {
+        const enabledTemplateValidation = config.vetur.experimental.templateTypeCheck;
+        if (!enabledTemplateValidation) {
+          return [];
+        }
+
+        // Add suffix to process this doc as vue template.
+        const templateDoc = TextDocument.create(doc.uri + '.template', doc.languageId, doc.version, doc.getText());
+
+        const { templateService } = updateCurrentTextDocument(templateDoc);
+        if (!languageServiceIncludesFile(templateService, templateDoc.uri)) {
+          return [];
+        }
+
+        const templateFileFsPath = getFileFsPath(templateDoc.uri);
+        // We don't need syntactic diagnostics because
+        // compiled template is always valid JavaScript syntax.
+        const rawTemplateDiagnostics = templateService.getSemanticDiagnostics(templateFileFsPath);
+
+        return rawTemplateDiagnostics.map(diag => {
+          // syntactic/semantic diagnostic always has start and length
+          // so we can safely cast diag to TextSpan
+          return {
+            range: convertRange(templateDoc, diag as ts.TextSpan),
+            severity: DiagnosticSeverity.Error,
+            message: ts.flattenDiagnosticMessageText(diag.messageText, '\n'),
+            code: diag.code,
+            source: 'Vetur'
+          };
+        });
+      }
     },
     doComplete(doc: TextDocument, position: Position): CompletionList {
       const { scriptDoc, service } = updateCurrentTextDocument(doc);

server/src/modes/script/preprocess.ts

@@ -1,32 +1,85 @@
 import * as ts from 'typescript';
 import * as path from 'path';
+import { parse } from 'vue-eslint-parser';
 
 import { getVueDocumentRegions } from '../../embeddedSupport/embeddedSupport';
 import { TextDocument } from 'vscode-languageserver-types';
 import { T_TypeScript } from '../../services/dependencyService';
+import {
+  getTemplateTransformFunctions,
+  componentHelperName,
+  iterationHelperName,
+  renderHelperName,
+  listenerHelperName
+} from './transformTemplate';
+import { isVirtualVueTemplateFile } from './serviceHost';
 
 export function isVue(filename: string): boolean {
   return path.extname(filename) === '.vue';
 }
 
-export function parseVue(text: string): string {
+export function parseVueScript(text: string): string {
   const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
   const regions = getVueDocumentRegions(doc);
   const script = regions.getSingleTypeDocument('script');
   return script.getText() || 'export default {};';
 }
 
+function parseVueTemplate(text: string): string {
+  const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
+  const regions = getVueDocumentRegions(doc);
+  const template = regions.getSingleTypeDocument('template');
+
+  if (template.languageId !== 'vue-html') {
+    return '';
+  }
+  const rawText = template.getText();
+  // skip checking on empty template
+  if (rawText.replace(/\s/g, '') === '') {
+    return '';
+  }
+  return rawText.replace(/^\s*\n/, '<template>\n').replace(/\s*\n$/, '\n</template>');
+}
+
 export function createUpdater(tsModule: T_TypeScript) {
   const clssf = tsModule.createLanguageServiceSourceFile;
   const ulssf = tsModule.updateLanguageServiceSourceFile;
   const scriptKindTracker = new WeakMap<ts.SourceFile, ts.ScriptKind | undefined>();
+  const modificationTracker = new WeakSet<ts.SourceFile>();
 
   function isTSLike(scriptKind: ts.ScriptKind | undefined) {
-    return scriptKind === ts.ScriptKind.TS || scriptKind === ts.ScriptKind.TSX;
+    return scriptKind === tsModule.ScriptKind.TS || scriptKind === tsModule.ScriptKind.TSX;
   }
 
-  return {
-    createLanguageServiceSourceFile(
+  function modifySourceFile(
+    fileName: string,
+    sourceFile: ts.SourceFile,
+    scriptSnapshot: ts.IScriptSnapshot,
+    version: string,
+    scriptKind?: ts.ScriptKind
+  ): void {
+    if (modificationTracker.has(sourceFile)) {
+      return;
+    }
+
+    if (isVue(fileName) && !isTSLike(scriptKind)) {
+      modifyVueScript(tsModule, sourceFile);
+      modificationTracker.add(sourceFile);
+      return;
+    }
+
+    if (isVirtualVueTemplateFile(fileName)) {
+      // TODO: share the logic of transforming the code into AST
+      // with the template mode
+      const code = parseVueTemplate(scriptSnapshot.getText(0, scriptSnapshot.getLength()));
+      const program = parse(code, { sourceType: 'module' });
+      const tsCode = getTemplateTransformFunctions(tsModule).transformTemplate(program, code);
+      injectVueTemplate(tsModule, sourceFile, tsCode);
+      modificationTracker.add(sourceFile);
+    }
+  }
+
+  function createLanguageServiceSourceFile(
     fileName: string,
     scriptSnapshot: ts.IScriptSnapshot,
     scriptTarget: ts.ScriptTarget,
@@ -36,12 +89,11 @@ export function createUpdater(tsModule: T_TypeScript) {
   ): ts.SourceFile {
     const sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
     scriptKindTracker.set(sourceFile, scriptKind);
-      if (isVue(fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(tsModule, sourceFile);
-      }
+    modifySourceFile(fileName, sourceFile, scriptSnapshot, version, scriptKind);
     return sourceFile;
-    },
-    updateLanguageServiceSourceFile(
+  }
+
+  function updateLanguageServiceSourceFile(
     sourceFile: ts.SourceFile,
     scriptSnapshot: ts.IScriptSnapshot,
     version: string,
@@ -50,15 +102,17 @@ export function createUpdater(tsModule: T_TypeScript) {
   ): ts.SourceFile {
     const scriptKind = scriptKindTracker.get(sourceFile);
     sourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
-      if (isVue(sourceFile.fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(tsModule, sourceFile);
-      }
+    modifySourceFile(sourceFile.fileName, sourceFile, scriptSnapshot, version, scriptKind);
     return sourceFile;
   }
+
+  return {
+    createLanguageServiceSourceFile,
+    updateLanguageServiceSourceFile
   };
 }
 
-function modifyVueSource(tsModule: T_TypeScript, sourceFile: ts.SourceFile): void {
+function modifyVueScript(tsModule: T_TypeScript, sourceFile: ts.SourceFile): void {
   const exportDefaultObject = sourceFile.statements.find(
     st =>
       st.kind === tsModule.SyntaxKind.ExportAssignment &&
@@ -94,6 +148,91 @@ function modifyVueSource(tsModule: T_TypeScript, sourceFile: ts.SourceFile): voi
   }
 }
 
+/**
+ * Wrap render function with component options in the script block
+ * to validate its types
+ */
+function injectVueTemplate(tsModule: T_TypeScript, sourceFile: ts.SourceFile, renderBlock: ts.Expression[]): void {
+  // add import statement for corresponding Vue file
+  // so that we acquire the component type from it.
+  const setZeroPos = getWrapperRangeSetter(tsModule, { pos: 0, end: 0 });
+  const vueFilePath = './' + path.basename(sourceFile.fileName.slice(0, -9));
+  const componentImport = setZeroPos(
+    tsModule.createImportDeclaration(
+      undefined,
+      undefined,
+      setZeroPos(tsModule.createImportClause(setZeroPos(tsModule.createIdentifier('__Component')), undefined)),
+      setZeroPos(tsModule.createLiteral(vueFilePath))
+    )
+  );
+
+  // import helper type to handle Vue's private methods
+  const helperImport = setZeroPos(
+    tsModule.createImportDeclaration(
+      undefined,
+      undefined,
+      setZeroPos(
+        tsModule.createImportClause(
+          undefined,
+          setZeroPos(
+            tsModule.createNamedImports([
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(renderHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(componentHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(iterationHelperName)))
+              ),
+              setZeroPos(
+                tsModule.createImportSpecifier(undefined, setZeroPos(tsModule.createIdentifier(listenerHelperName)))
+              )
+            ])
+          )
+        )
+      ),
+      setZeroPos(tsModule.createLiteral('vue-editor-bridge'))
+    )
+  );
+
+  // wrap render code with a function decralation
+  // with `this` type of component.
+  const setRenderPos = getWrapperRangeSetter(tsModule, sourceFile);
+  const statements = renderBlock.map(exp => tsModule.createStatement(exp));
+  const renderElement = setRenderPos(
+    tsModule.createStatement(
+      setRenderPos(
+        tsModule.createCall(setRenderPos(tsModule.createIdentifier(renderHelperName)), undefined, [
+          // Reference to the component
+          setRenderPos(tsModule.createIdentifier('__Component')),
+
+          // A function simulating the render function
+          setRenderPos(
+            tsModule.createFunctionExpression(
+              undefined,
+              undefined,
+              undefined,
+              undefined,
+              [],
+              undefined,
+              setRenderPos(tsModule.createBlock(statements))
+            )
+          )
+        ])
+      )
+    )
+  );
+
+  // replace the original statements with wrapped code.
+  sourceFile.statements = setRenderPos(tsModule.createNodeArray([componentImport, helperImport, renderElement]));
+
+  // Update external module indicator to the transformed template node,
+  // otherwise symbols in this template (e.g. __Component) will be put
+  // into global namespace and it causes duplicated identifier error.
+  (sourceFile as any).externalModuleIndicator = componentImport;
+}
+
 /** Create a function that calls setTextRange on synthetic wrapper nodes that need a valid range */
 function getWrapperRangeSetter(
   tsModule: T_TypeScript,