From 3633cf5f7e31ac571997539d028fe01b371d320b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Exbrayat?=
 <cexbrayat@users.noreply.github.com>
Date: Thu, 19 Mar 2020 14:17:22 +0100
Subject: [PATCH] feat: use @vue/compiler-sfc as a compiler for TS if available
 (#5170)

* feat: use @vue/compiler-sfc as a compiler for TS if available

The `fork-ts-checker-webpack-plugin` is using `vue-template-compiler` by default, and this compiler is not the correct one to pick for vue-next. This commit tries to load `@vue/compiler-sfc` and falls back to `vue-template-compiler` if it does not find it.

* chore: bump fork-ts-checker-webpack-plugin to v3.1.1
---
 packages/@vue/cli-plugin-typescript/index.js       | 14 +++++++++++++-
 packages/@vue/cli-plugin-typescript/package.json   |  2 +-
 .../cli-plugin-typescript/vue-compiler-sfc-shim.js |  7 +++++++
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js

diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js
index be65dff5b7..ce03f3a189 100644
--- a/packages/@vue/cli-plugin-typescript/index.js
+++ b/packages/@vue/cli-plugin-typescript/index.js
@@ -77,12 +77,24 @@ module.exports = (api, projectOptions) => {
     })
 
     if (!process.env.VUE_CLI_TEST) {
+      // try to load `@vue/compiler-sfc` if the project is using Vue 3.
+      // if it is not available, it uses `vue-template-compiler`
+      let compiler = '@vue/compiler-sfc'
+      try {
+        require.resolve(compiler)
+        // use a shim as @vue/compiler-sfc does not offer the `parseComponent` function
+        // but a `parse` function
+        // the shim only delegates to the parse function
+        compiler = '@vue/cli-plugin-typescript/vue-compiler-sfc-shim'
+      } catch (e) {
+        compiler = 'vue-template-compiler'
+      }
       // this plugin does not play well with jest + cypress setup (tsPluginE2e.spec.js) somehow
       // so temporarily disabled for vue-cli tests
       config
         .plugin('fork-ts-checker')
           .use(require('fork-ts-checker-webpack-plugin'), [{
-            vue: true,
+            vue: { enabled: true, compiler },
             tslint: projectOptions.lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')),
             formatter: 'codeframe',
             // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
diff --git a/packages/@vue/cli-plugin-typescript/package.json b/packages/@vue/cli-plugin-typescript/package.json
index 353a0f0210..b581b7b7b9 100644
--- a/packages/@vue/cli-plugin-typescript/package.json
+++ b/packages/@vue/cli-plugin-typescript/package.json
@@ -26,7 +26,7 @@
     "@types/webpack-env": "^1.15.1",
     "@vue/cli-shared-utils": "^4.2.3",
     "cache-loader": "^4.1.0",
-    "fork-ts-checker-webpack-plugin": "^1.5.1",
+    "fork-ts-checker-webpack-plugin": "^3.1.1",
     "globby": "^9.2.0",
     "thread-loader": "^2.1.3",
     "ts-loader": "^6.2.1",
diff --git a/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js b/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js
new file mode 100644
index 0000000000..c9be3dbc41
--- /dev/null
+++ b/packages/@vue/cli-plugin-typescript/vue-compiler-sfc-shim.js
@@ -0,0 +1,7 @@
+const compilerSFC = require('@vue/compiler-sfc')
+
+module.exports = {
+  parseComponent (content, options) {
+    return compilerSFC.parse(content, options)
+  }
+}