Merge pull request TypeStrong#92 from wonderful-panda/support-jsx-in-vue

Support jsx in vue

Author: piotr-oles

src/VueProgram.ts

@@ -85,6 +85,19 @@ class VueProgram {
     const host = ts.createCompilerHost(programConfig.options);
     const realGetSourceFile = host.getSourceFile;
 
+    const getScriptKind = (lang: string) => {
+      if (lang === "ts") {
+        return ts.ScriptKind.TS;
+      } else if (lang === "tsx") {
+        return ts.ScriptKind.TSX;
+      } else if (lang === "jsx") {
+        return ts.ScriptKind.JSX;
+      } else {
+        // when lang is "js" or no lang specified
+        return ts.ScriptKind.JS;
+      }
+    }
+
     // We need a host that can parse Vue SFCs (single file components).
     host.getSourceFile = (filePath, languageVersion, onError) => {
       // first check if watcher is watching file - if not - check it's mtime
@@ -110,8 +123,21 @@ class VueProgram {
 
       // get typescript contents from Vue file
       if (source && VueProgram.isVue(filePath)) {
-        const parsed = vueParser.parse(source.text, 'script', { lang: ['ts', 'tsx', 'js', 'jsx'] });
-        source = ts.createSourceFile(filePath, parsed, languageVersion, true);
+        let parsed: string;
+        let kind: ts.ScriptKind;
+        for (const lang of ['ts', 'tsx', 'js', 'jsx']) {
+          parsed = vueParser.parse(source.text, 'script', { lang: [lang], emptyExport: false });
+          if (parsed) {
+            kind = getScriptKind(lang);
+            break;
+          }
+        }
+        if (!parsed) {
+          // when script tag has no lang, or no script tag given
+          parsed = vueParser.parse(source.text, 'script');
+          kind = ts.ScriptKind.JS;
+        }
+        source = ts.createSourceFile(filePath, parsed, languageVersion, true, kind);
       }
 
       return source;

test/integration/vue.spec.js

@@ -147,4 +147,91 @@ describe('[INTEGRATION] vue', function () {
       callback();
     });
   });
+
+  [
+    'example-ts.vue',
+    'example-tsx.vue',
+    'example-js.vue',
+    'example-jsx.vue',
+    'example-nolang.vue'
+  ].forEach(fileName => {
+    it('should be able to extract script from ' + fileName, function () {
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs.json' });
+      var sourceFilePath = path.resolve(compiler.context, 'src/langs/' + fileName)
+      var source = checker.program.getSourceFile(sourceFilePath);
+      expect(source).to.not.be.undefined;
+      // remove padding lines
+      var text = source.text.replace(/^\s*\/\/.*$\n/gm, '');
+      expect(text.startsWith('/* OK */')).to.be.true;
+    });
+  });
+
+  function groupByFileName(errors) {
+    var ret = {
+      'example-ts.vue': [],
+      'example-tsx.vue': [],
+      'example-js.vue': [],
+      'example-jsx.vue': [],
+      'example-nolang.vue': []
+    };
+    for (var error of errors) {
+      ret[path.basename(error.file)].push(error);
+    }
+    return ret;
+  }
+
+  describe('should be able to compile *.vue with each lang', function () {
+    var errors;
+    before(function(callback) {
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs.json' });
+      compiler.run(function(error, stats) {
+        errors = groupByFileName(stats.compilation.errors);
+        callback();
+      });
+    });
+    it("lang=ts", function() {
+      expect(errors['example-ts.vue'].length).to.be.equal(0);
+    })
+    it("lang=tsx", function() {
+      expect(errors['example-tsx.vue'].length).to.be.equal(0);
+    });
+    it("lang=js", function() {
+      expect(errors['example-js.vue'].length).to.be.equal(0);
+    });
+    it("lang=jsx", function() {
+      expect(errors['example-jsx.vue'].length).to.be.equal(0);
+    });
+    it("no lang", function() {
+      expect(errors['example-nolang.vue'].length).to.be.equal(0);
+    });
+  });
+
+  describe('should be able to detect errors in *.vue', function () {
+    var errors;
+    before(function(callback) {
+      // tsconfig-langs-strict.json === tsconfig-langs.json + noUnusedLocals
+      createCompiler({ vue: true, tsconfig: 'tsconfig-langs-strict.json' });
+      compiler.run(function(error, stats) {
+        errors = groupByFileName(stats.compilation.errors);
+        callback();
+      });
+    });
+    it("lang=ts", function() {
+      expect(errors['example-ts.vue'].length).to.be.equal(1);
+      expect(errors['example-ts.vue'][0].rawMessage).to.match(/'a' is declared but/);
+    })
+    it("lang=tsx", function() {
+      expect(errors['example-tsx.vue'].length).to.be.equal(1);
+      expect(errors['example-tsx.vue'][0].rawMessage).to.match(/'a' is declared but/);
+    });
+    it("lang=js", function() {
+      expect(errors['example-js.vue'].length).to.be.equal(0);
+    });
+    it("lang=jsx", function() {
+      expect(errors['example-jsx.vue'].length).to.be.equal(0);
+    });
+    it("no lang", function() {
+      expect(errors['example-nolang.vue'].length).to.be.equal(0);
+    });
+  });
 });

test/integration/vue/src/langs/example-js.vue

@@ -0,0 +1,17 @@
+<template>
+<div>Example</div>
+</template>
+
+<script lang="js">
+/* OK */
+import Vue from "vue";
+export default Vue.extend({
+  name: "ExampleJs",
+  methods: {
+    foo() {
+      const a = 1; // noUnusedLocals
+    }
+  }
+});
+</script>
+

test/integration/vue/src/langs/example-jsx.vue

@@ -0,0 +1,11 @@
+<script lang="jsx">
+/* OK */
+import Vue from "vue";
+export default Vue.extend({
+  name: "ExampleJsx",
+  render() {
+    const a = 1; // noUnusedLocals
+    return <div>Example</div>;
+  }
+});
+</script>

test/integration/vue/src/langs/example-nolang.vue

@@ -0,0 +1,17 @@
+<template>
+<div>Example</div>
+</template>
+
+<script>
+/* OK */
+import Vue from "vue";
+export default Vue.extend({
+  name: "ExampleNolang",
+  methods: {
+    foo() {
+      const a = 1; // noUnusedLocals
+    }
+  }
+});
+</script>
+

test/integration/vue/src/langs/example-ts.vue

@@ -0,0 +1,18 @@
+<template>
+<div>{{ text }}</div>
+</template>
+
+<script lang="ts">
+/* OK */
+import Vue from "vue";
+export default Vue.extend({
+  name: "ExampleJs",
+  computed: {
+    text(): string {
+      const a = 1; // noUnusedLocals
+      return "Example";
+    }
+  }
+});
+</script>
+

test/integration/vue/src/langs/example-tsx.vue

@@ -0,0 +1,11 @@
+<script lang="tsx">
+/* OK */
+import Vue, { VNode } from "vue";
+export default Vue.extend({
+  name: "ExampleTsx",
+  render(): VNode {
+    const a = 1; // noUnusedLocals
+    return <div>Example</div>;
+  }
+});
+</script>

test/integration/vue/src/langs/index.ts

@@ -0,0 +1,6 @@
+import Vue from "vue";
+import ExampleTsx from "./example-tsx.vue";
+
+new Vue({
+    components: { ExampleTsx }
+});

test/integration/vue/tsconfig-langs-strict.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+      "jsx": "preserve",
+      "noUnusedLocals": true
+  },
+  "include": [
+      "src/langs/*.ts",
+      "src/langs/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

test/integration/vue/tsconfig-langs.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+      "jsx": "preserve"
+  },
+  "include": [
+      "src/langs/*.ts",
+      "src/langs/*.vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}