Analyze invalid interpolation expression

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 0.23.0
+
+- Support analyzing invalid template interpolation expression. #1448.
+
 ### 0.22.4 | 2019-10-01 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.22.4/vspackage)
 
 - Improve performance by caching module resolution results. #1442.

server/src/services/typescriptService/test/sourceMap.test.ts

@@ -9,13 +9,11 @@ import { generateSourceMap } from '../sourceMap';
 
 const printer = ts.createPrinter();
 
-function filePathToTest(filePath: string) {
-  const vueFileSrc = fs.readFileSync(filePath, 'utf-8');
-  const templateSrc = parseVueTemplate(vueFileSrc);
+function processVueTemplate(templateCode: string) {
   const syntheticSourceFileName = 'synthetic.ts';
   const validSourceFileName = 'valid.ts';
 
-  const program = parse(templateSrc, { sourceType: 'module' });
+  const program = parse(templateCode, { sourceType: 'module' });
 
   const syntheticSourceFile = ts.createSourceFile(
     syntheticSourceFileName,
@@ -26,7 +24,7 @@ function filePathToTest(filePath: string) {
   );
   let expressions: ts.Expression[] = [];
   try {
-    expressions = getTemplateTransformFunctions(ts).transformTemplate(program, templateSrc);
+    expressions = getTemplateTransformFunctions(ts).transformTemplate(program, templateCode);
     injectVueTemplate(ts, syntheticSourceFile, expressions);
   } catch (err) {
     console.log(err);
@@ -44,6 +42,17 @@ function filePathToTest(filePath: string) {
 
   const sourceMapNodes = generateSourceMap(ts, syntheticSourceFile, validSourceFile);
 
+  return {
+    validSourceFile,
+    sourceMapNodes
+  };
+}
+
+function filePathToTest(filePath: string) {
+  const vueFileSrc = fs.readFileSync(filePath, 'utf-8');
+  const templateSrc = parseVueTemplate(vueFileSrc);
+  const { sourceMapNodes, validSourceFile } = processVueTemplate(templateSrc);
+
   sourceMapNodes.forEach(node => {
     const endOffsets = [...node.mergedNodes, node].reduce((acc, node) => {
       acc.add(node.from.end);
@@ -75,16 +84,103 @@ function filePathToTest(filePath: string) {
   });
 }
 
+interface ExpectedMapping {
+  fromStart: number;
+  fromEnd: number;
+  toCode: string;
+}
+
+function testTemplateMapping(code: string, expectedList: ExpectedMapping[]) {
+  const { sourceMapNodes, validSourceFile } = processVueTemplate(code);
+
+  const actualList = sourceMapNodes
+    .map(node => {
+      return {
+        fromStart: node.from.start,
+        fromEnd: node.from.end,
+        toCode: validSourceFile.getFullText().slice(node.to.start, node.to.end)
+      };
+    })
+    .sort((a, b) => {
+      return a.fromStart - b.fromStart;
+    });
+
+  const sortedExpectedList = expectedList.sort((a, b) => {
+    return a.fromStart - b.fromStart;
+  });
+
+  assert.equal(actualList.length, expectedList.length);
+
+  sortedExpectedList.forEach((expected, i) => {
+    const actual = actualList[i];
+    assert.deepEqual(actual, expected);
+  });
+}
+
 suite('Source Map generation', () => {
-  const repoRootPath = path.resolve(__dirname, '../../../../..');
-  const fixturePath = path.resolve(__dirname, repoRootPath, './test/interpolation/fixture/diagnostics');
-
-  fs.readdirSync(fixturePath).forEach(file => {
-    if (file.endsWith('.vue')) {
-      const filePath = path.resolve(fixturePath, file);
-      test(`Source Map generation for ${path.relative(repoRootPath, filePath)}`, () => {
-        filePathToTest(filePath);
-      });
-    }
+  suite('Diagnostics fixtures', () => {
+    const repoRootPath = path.resolve(__dirname, '../../../../..');
+    const fixturePath = path.resolve(__dirname, repoRootPath, './test/interpolation/fixture/diagnostics');
+
+    fs.readdirSync(fixturePath).forEach(file => {
+      if (file.endsWith('.vue')) {
+        const filePath = path.resolve(fixturePath, file);
+        test(`Source Map generation for ${path.relative(repoRootPath, filePath)}`, () => {
+          filePathToTest(filePath);
+        });
+      }
+    });
+  });
+
+  suite('Individual mappings', () => {
+    test('regular text interpolation', () => {
+      testTemplateMapping(`<template>{{ a.b.c }}</template>`, [
+        {
+          fromStart: 13,
+          fromEnd: 18,
+          toCode: 'this.a.b.c'
+        }
+      ]);
+    });
+
+    test('text interpolation having an invalid expression', () => {
+      testTemplateMapping(`<template>{{ a. }}</template>`, [
+        {
+          fromStart: 13,
+          fromEnd: 15,
+          toCode: 'this.a.'
+        }
+      ]);
+    });
+
+    test('text interpolation of an empty expression', () => {
+      testTemplateMapping(`<template>{{ }}</template>`, [
+        {
+          fromStart: 12,
+          fromEnd: 12,
+          toCode: 'this.'
+        }
+      ]);
+    });
+
+    test('directive value of an empty expression', () => {
+      testTemplateMapping(`<template><div :title="" /></template>`, [
+        {
+          fromStart: 23,
+          fromEnd: 23,
+          toCode: 'this.'
+        }
+      ]);
+    });
+
+    test('dynamic directive key of an empty expression', () => {
+      testTemplateMapping(`<template><div :[] /></template>`, [
+        {
+          fromStart: 17,
+          fromEnd: 17,
+          toCode: 'this.'
+        }
+      ]);
+    });
   });
 });

server/src/services/typescriptService/test/transformTemplate.test.ts

@@ -6,7 +6,7 @@ suite('transformTemplate', () => {
   suite('`this` injection', () => {
     function check(inputTsCode: string, expectedTsCode: string, scope: string[] = []): void {
       const source = ts.createSourceFile('test.ts', inputTsCode, ts.ScriptTarget.Latest, true);
-      const output = getTemplateTransformFunctions(require('typescript')).parseExpressionImpl(source.text, scope, 0);
+      const output = getTemplateTransformFunctions(require('typescript')).parseExpression(source.text, scope, 0);
 
       const printer = ts.createPrinter();
       const outputStr = printer.printNode(ts.EmitHint.Expression, output, source);