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

Author: cexbrayat

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

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",

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)
+  }
+}