Type checking for template expressions

server/package.json

@@ -38,6 +38,7 @@
     "vscode-languageserver": "^3.5.0",
     "vscode-languageserver-types": "^3.5.0",
     "vscode-uri": "^1.0.1",
+    "vue-eslint-parser": "^2.0.1-beta.2",
     "vue-onsenui-helper-json": "^1.0.2",
     "vuetify-helper-json": "^1.0.0"
   },

server/src/modes/script/bridge.ts

@@ -1,21 +1,38 @@
+import { renderHelperName, componentHelperName, iterationHelperName } from './transformTemplate';
+
 // this bridge file will be injected into TypeScript 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';
 
+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;
+  <T>(obj: object, fn: (value: any, key: string, index: number) => 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 = `
 import Vue from 'vue';
 const func = Vue.extend;
 export default func;
-`;
+` + renderHelpers;

server/src/modes/script/javascript.ts

@@ -37,14 +37,19 @@ import { nullMode, NULL_SIGNATURE, NULL_COMPLETION } from '../nullMode';
 
 export interface ScriptMode extends LanguageMode {
   findComponents(document: TextDocument): ComponentInfo[];
+  doTemplateValidation(document: TextDocument): Diagnostic[];
 }
 
 export function getJavascriptMode(
   documentRegions: LanguageModelCache<VueDocumentRegions>,
   workspacePath: string | null | undefined
 ): ScriptMode {
   if (!workspacePath) {
-    return { ...nullMode, findComponents: () => [] };
+    return {
+      ...nullMode,
+      findComponents: () => [],
+      doTemplateValidation: () => []
+    };
   }
   const jsDocuments = getLanguageModelCache(10, 60, document => {
     const vueDocument = documentRegions.get(document);
@@ -89,6 +94,35 @@ export function getJavascriptMode(
         };
       });
     },
+    doTemplateValidation(doc: TextDocument): Diagnostic[] {
+      // 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 fileFsPath = getFileFsPath(templateDoc.uri);
+      // We don't need syntactic diagnostics because
+      // compiled template is always valid JavaScript syntax.
+      const diagnostics = templateService.getSemanticDiagnostics(fileFsPath);
+
+      return diagnostics.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')
+        };
+      });
+    },
     doComplete(doc: TextDocument, position: Position): CompletionList {
       const { scriptDoc, service } = updateCurrentTextDocument(doc);
       if (!languageServiceIncludesFile(service, doc.uri)) {

server/src/modes/script/preprocess.ts

@@ -1,65 +1,111 @@
 import * as ts from 'typescript';
 import * as path from 'path';
+import { parse } from 'vue-eslint-parser';
 
 import { getDocumentRegions } from '../embeddedSupport';
 import { TextDocument } from 'vscode-languageserver-types';
+import { transformTemplate, componentHelperName, iterationHelperName, renderHelperName } from './transformTemplate';
 
 export function isVue(filename: string): boolean {
   return path.extname(filename) === '.vue';
 }
 
-export function parseVue(text: string): string {
+export function isVueTemplate(path: string) {
+  return path.endsWith('.vue.template');
+}
+
+export function parseVueScript(text: string): string {
   const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
   const regions = getDocumentRegions(doc);
   const script = regions.getEmbeddedDocumentByType('script');
   return script.getText() || 'export default {};';
 }
 
+function parseVueTemplate(text: string): string {
+  const doc = TextDocument.create('test://test/test.vue', 'vue', 0, text);
+  const regions = getDocumentRegions(doc);
+  const template = regions.getEmbeddedDocumentByType('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>');
+}
+
 function isTSLike(scriptKind: ts.ScriptKind | undefined) {
   return scriptKind === ts.ScriptKind.TS || scriptKind === ts.ScriptKind.TSX;
 }
 
 export function createUpdater() {
   const clssf = ts.createLanguageServiceSourceFile;
   const ulssf = ts.updateLanguageServiceSourceFile;
-  return {
-    createLanguageServiceSourceFile(
-      fileName: string,
-      scriptSnapshot: ts.IScriptSnapshot,
-      scriptTarget: ts.ScriptTarget,
-      version: string,
-      setNodeParents: boolean,
-      scriptKind?: ts.ScriptKind
-    ): ts.SourceFile {
-      const sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
-      // store scriptKind info on sourceFile
-      const hackSourceFile: any = sourceFile;
-      hackSourceFile.__scriptKind = scriptKind;
+
+  function modifySourceFile(
+    fileName: string,
+    sourceFile: ts.SourceFile,
+    scriptSnapshot: ts.IScriptSnapshot,
+    version: string,
+    scriptKind?: ts.ScriptKind
+  ): void {
+    // store scriptKind info on sourceFile
+    const hackSourceFile: any = sourceFile;
+    hackSourceFile.__scriptKind = scriptKind;
+
+    if (!hackSourceFile.__modified) {
       if (isVue(fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(sourceFile);
-      }
-      return sourceFile;
-    },
-    updateLanguageServiceSourceFile(
-      sourceFile: ts.SourceFile,
-      scriptSnapshot: ts.IScriptSnapshot,
-      version: string,
-      textChangeRange: ts.TextChangeRange,
-      aggressiveChecks?: boolean
-    ): ts.SourceFile {
-      let hackSourceFile: any = sourceFile;
-      const scriptKind = hackSourceFile.__scriptKind;
-      sourceFile = hackSourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
-      if (isVue(sourceFile.fileName) && !isTSLike(scriptKind)) {
-        modifyVueSource(sourceFile);
+        modifyVueScript(sourceFile);
+        hackSourceFile.__modified = true;
+      } else if (isVueTemplate(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 = transformTemplate(program, code);
+        injectVueTemplate(sourceFile, tsCode);
+        hackSourceFile.__modified = true;
       }
-      hackSourceFile.__scriptKind = scriptKind;
-      return sourceFile;
     }
+  }
+
+  function createLanguageServiceSourceFile(
+    fileName: string,
+    scriptSnapshot: ts.IScriptSnapshot,
+    scriptTarget: ts.ScriptTarget,
+    version: string,
+    setNodeParents: boolean,
+    scriptKind?: ts.ScriptKind
+  ): ts.SourceFile {
+    const sourceFile = clssf(fileName, scriptSnapshot, scriptTarget, version, setNodeParents, scriptKind);
+    modifySourceFile(fileName, sourceFile, scriptSnapshot, version, scriptKind);
+    return sourceFile;
+  }
+
+  function updateLanguageServiceSourceFile(
+    sourceFile: ts.SourceFile,
+    scriptSnapshot: ts.IScriptSnapshot,
+    version: string,
+    textChangeRange: ts.TextChangeRange,
+    aggressiveChecks?: boolean
+  ): ts.SourceFile {
+    const hackSourceFile: any = sourceFile;
+    const scriptKind = hackSourceFile.__scriptKind;
+    sourceFile = ulssf(sourceFile, scriptSnapshot, version, textChangeRange, aggressiveChecks);
+    modifySourceFile(sourceFile.fileName, sourceFile, scriptSnapshot, version, scriptKind);
+    return sourceFile;
+  }
+
+  return {
+    createLanguageServiceSourceFile,
+    updateLanguageServiceSourceFile
   };
 }
 
-function modifyVueSource(sourceFile: ts.SourceFile): void {
+function modifyVueScript(sourceFile: ts.SourceFile): void {
   const exportDefaultObject = sourceFile.statements.find(
     st =>
       st.kind === ts.SyntaxKind.ExportAssignment &&
@@ -93,6 +139,77 @@ function modifyVueSource(sourceFile: ts.SourceFile): void {
   }
 }
 
+/**
+ * Wrap render function with component options in the script block
+ * to validate its types
+ */
+function injectVueTemplate(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({ pos: 0, end: 0 });
+  const vueFilePath = './' + path.basename(sourceFile.fileName.slice(0, -9));
+  const componentImport = setZeroPos(ts.createImportDeclaration(undefined,
+    undefined,
+    setZeroPos(ts.createImportClause(ts.createIdentifier('__Component'), undefined)),
+    setZeroPos(ts.createLiteral(vueFilePath))
+  ));
+
+  // import helper type to handle Vue's private methods
+  const helperImport = setZeroPos(ts.createImportDeclaration(undefined,
+    undefined,
+    setZeroPos(ts.createImportClause(undefined,
+      setZeroPos(ts.createNamedImports([
+        setZeroPos(ts.createImportSpecifier(
+          undefined,
+          setZeroPos(ts.createIdentifier(renderHelperName))
+        )),
+        setZeroPos(ts.createImportSpecifier(
+          undefined,
+          setZeroPos(ts.createIdentifier(componentHelperName))
+        )),
+        setZeroPos(ts.createImportSpecifier(
+          undefined,
+          setZeroPos(ts.createIdentifier(iterationHelperName))
+        ))
+      ]))
+    )),
+    setZeroPos(ts.createLiteral('vue-editor-bridge'))
+  ));
+
+  // wrap render code with a function decralation
+  // with `this` type of component.
+  const setRenderPos = getWrapperRangeSetter(sourceFile);
+  const statements = renderBlock.map(exp => ts.createStatement(exp));
+  const renderElement = setRenderPos(ts.createStatement(
+    setRenderPos(ts.createCall(
+      setRenderPos(ts.createIdentifier(renderHelperName)),
+      undefined,
+      [
+        // Reference to the component
+        setRenderPos(ts.createIdentifier('__Component')),
+
+        // A function simulating the render function
+        setRenderPos(ts.createFunctionExpression(
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          [],
+          undefined,
+          setRenderPos(ts.createBlock(statements))
+        ))
+      ]
+    ))
+  ));
+
+  // replace the original statements with wrapped code.
+  sourceFile.statements = setRenderPos(ts.createNodeArray([
+    componentImport,
+    helperImport,
+    renderElement
+  ]));
+}
+
 /** Create a function that calls setTextRange on synthetic wrapper nodes that need a valid range */
 function getWrapperRangeSetter(wrapped: ts.TextRange): <T extends ts.TextRange>(wrapperNode: T) => T {
   return <T extends ts.TextRange>(wrapperNode: T) => ts.setTextRange(wrapperNode, wrapped);