feature #746 Added Vue3 support (weaverryan)

This PR was squashed before being merged into the master branch.

Discussion
----------

Added Vue3 support

Hi!

Vue3 is now beta. I think Encore should support Vue2 and Vue 3... at least for awhile. The changes needed to make Webpack work with v3 are not that many:

1) Make sure the user installs `vue/compiler-sfc` instead of `vue-template-compiler`
2) require `VueLoaderPlugin` in a slightly different way
3) Add a slightly different "alias" for vue

You can choose the version with a new `version` option to `enableVue()`. Otherwise, it will configure itself correctly if you have vue2 or vue3 installed, or it will (finally) recommend the vue2 install instructions. When v3 comes out, we would change the default recommendation to be v3.

But... getting the code (and test suite) to work with both vue2 and vue3 is quite tricky :).

Commits
-------

40f8ae8 bumping to use vue 2.5.0 to avoid test inconsistency
5abb25d forcing exact low version
06782ae Merge branch 'master' into vue3-support
e51165d correctly clearing logger before asserting
449a0af removing vue3 alias
33d2ac5 fixing bad vue-beta version
24f7652 Upgrading to Webpack 4.22.0 which has a fix for ordering problems
43f66c9 lint fixes
35e508f Forcing vue installation to include @3 or @2 version constraint on yarn add command
d49352b changing order of entrypoints files
d7903e4 updating test hashes
7d2917e fixing missing return
bc182bd fixing lock file
63cfd1a fixing wrong path change in tests
08509da removing vue3 and jsx support for now
c344809 Fixing missing-loader for vue-loader 16
85d42cd working around a bug in vue-loader by putting module styles first
c9f83bc fixing bad test path
6f83868 updating lock file
e702197 hack to test with vue3 and vue2
e376be2 various test fixes
8d07790 WIP Vue3 support

Author: weaverryan

fixtures/vuejs-css-modules/App.vue

@@ -1,7 +1,36 @@
 <template>
-  <div id="app" class="red large justified lowercase block" :class="[$css.italic, $scss.bold, $less.underline, $stylus.rtl, $postcss.hidden]"></div>
+  <div class="red large justified lowercase block" :class="[$css.italic, $scss.bold, $less.underline, $stylus.rtl, $postcss.hidden]"></div>
 </template>
 
+<style module="$css">
+  .italic {
+    font-style: italic;
+  }
+</style>
+
+<style lang="scss" module="$scss">
+  .bold {
+    font-weight: bold;
+  }
+</style>
+
+<style lang="less" module="$less">
+  .underline {
+    text-decoration: underline;
+  }
+</style>
+
+<style lang="styl" module="$stylus">
+  .rtl
+    direction: rtl;
+</style>
+
+<style lang="postcss" module="$postcss">
+  .hidden {
+    visibility: hidden;
+  }
+</style>
+
 <style>
   .red {
     color: red;
@@ -30,33 +59,3 @@
     display: block;
   }
 </style>
-
-
-<style module="$css">
-  .italic {
-    font-style: italic;
-  }
-</style>
-
-<style lang="scss" module="$scss">
-  .bold {
-    font-weight: bold;
-  }
-</style>
-
-<style lang="less" module="$less">
-  .underline {
-    text-decoration: underline;
-  }
-</style>
-
-<style lang="styl" module="$stylus">
-  .rtl
-    direction: rtl;
-</style>
-
-<style lang="postcss" module="$postcss">
-  .hidden {
-    visibility: hidden;
-  }
-</style>

fixtures/vuejs-css-modules/main.js renamed to fixtures/vuejs-css-modules/main_v2.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App'
+
+createApp(App).mount('#app');

fixtures/vuejs-css-modules/main_v3.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App'
+
+createApp(App).mount('#app');

fixtures/vuejs-jsx/main.js renamed to fixtures/vuejs-jsx/main_v2.js

@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <hello></hello>
+  </div>
+</template>
+
+<script lang="ts">
+import Hello from './components/Hello.vue'
+
+class TestClassSyntax {
+
+}
+
+export default {
+  name: 'app',
+  components: {
+    Hello
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+<style lang="scss">
+#app {
+  display: flex;
+  color: #2c3e90;
+}
+</style>
+
+<style lang="less">
+#app {
+  margin-top: 40px;
+}
+</style>

fixtures/vuejs/main.js renamed to fixtures/vuejs/main_v2.js

@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="https://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="https://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="https://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+  name: 'hello',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

fixtures/vuejs/main_v3.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');

fixtures/vuejs-typescript/App.vue renamed to fixtures/vuejs2-typescript/App.vue

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "strict": true,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "./**/*.ts"
+    ]
+}

fixtures/vuejs-typescript/assets/logo.png renamed to fixtures/vuejs2-typescript/assets/logo.png

@@ -136,6 +136,7 @@ class WebpackConfig {
         this.babelTypeScriptPresetOptions = {};
         this.vueOptions = {
             useJsx: false,
+            version: null,
         };
         this.eslintOptions = {
             lintVue: false,
@@ -749,9 +750,21 @@ class WebpackConfig {
             if (!(key in this.vueOptions)) {
                 throw new Error(`"${key}" is not a valid key for enableVueLoader(). Valid keys: ${Object.keys(this.vueOptions).join(', ')}.`);
             }
+
+            if (key === 'version') {
+                const validVersions = [2, 3];
+                if (!validVersions.includes(vueOptions.version)) {
+                    throw new Error(`"${vueOptions.version}" is not a valid value for the "version" option passed to enableVueLoader(). Valid versions are: ${validVersions.join(', ')}.`);
+                }
+            }
+
+            this.vueOptions[key] = vueOptions[key];
         }
 
-        this.vueOptions = vueOptions;
+        // useJsx and vue 3 are not currently supported by Encore
+        if (this.vueOptions.useJsx && this.vueOptions.version === 3) {
+            throw new Error('Setting both "useJsx: true" and "version: 3" for enableVueLoader() is not currently supported. Please use version: 2 or disable useJsx.');
+        }
     }
 
     enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, eslintOptions = {}) {

fixtures/vuejs-typescript/components/Hello.vue renamed to fixtures/vuejs2-typescript/components/Hello.vue

@@ -43,6 +43,7 @@ const PluginPriorities = require('./plugins/plugin-priorities');
 const applyOptionsCallback = require('./utils/apply-options-callback');
 const sharedEntryTmpName = require('./utils/sharedEntryTmpName');
 const copyEntryTmpName = require('./utils/copyEntryTmpName');
+const getVueVersion = require('./utils/get-vue-version');
 const tmp = require('tmp');
 const fs = require('fs');
 const path = require('path');
@@ -101,7 +102,10 @@ class ConfigGenerator {
         };
 
         if (this.webpackConfig.useVueLoader) {
-            config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
+            const vueVersion = getVueVersion(this.webpackConfig);
+            if (vueVersion === 2) {
+                config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
+            }
         }
 
         if (this.webpackConfig.usePreact && this.webpackConfig.preactOptions.preactCompat) {

fixtures/vuejs-typescript/main.ts renamed to fixtures/vuejs2-typescript/main.ts

@@ -87,17 +87,28 @@ const features = {
         ],
         description: 'process TypeScript files with Babel'
     },
-    vue: {
+    vue2: {
         method: 'enableVueLoader()',
         // vue is needed so the end-user can do things
         // vue-template-compiler is a peer dep of vue-loader
         packages: [
-            { name: 'vue' },
-            { name: 'vue-loader', enforce_version: true },
+            { name: 'vue', version: '^2.5' },
+            { name: 'vue-loader', version: '^15' },
             { name: 'vue-template-compiler' }
         ],
         description: 'load Vue files'
     },
+    vue3: {
+        method: 'enableVueLoader()',
+        // vue is needed so the end-user can do things
+        // @vue/compiler-sfc is an optional peer dep of vue-loader
+        packages: [
+            { name: 'vue', enforce_version: true },
+            { name: 'vue-loader', enforce_version: true },
+            { name: '@vue/compiler-sfc' }
+        ],
+        description: 'load Vue files'
+    },
     'vue-jsx': {
         method: 'enableVueLoader()',
         packages: [

fixtures/vuejs-typescript/tsconfig.json renamed to fixtures/vuejs2-typescript/tsconfig.json

@@ -9,6 +9,8 @@
 
 'use strict';
 
+const getVueVersion = require('../../utils/get-vue-version');
+
 const TYPE = 'loader-not-enabled';
 
 function isMissingLoaderError(e) {
@@ -24,14 +26,25 @@ function isMissingLoaderError(e) {
 }
 
 function isErrorFromVueLoader(filename) {
-    return filename.includes('??vue-loader-options');
+    // vue2
+    if (filename.includes('??vue-loader-options')) {
+        return true;
+    }
+
+    // vue3
+    if (filename.includes('vue-loader/dist??')) {
+        return true;
+    }
+
+    return false;
 }
 
 function getFileExtension(filename) {
     // ??vue-loader-options
     if (isErrorFromVueLoader(filename)) {
         // vue is strange, the "filename" is reported as something like
-        // /path/to/project/node_modules/vue-loader/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss
+        // vue2: /path/to/project/node_modules/vue-loader/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss
+        // vue3: /path/to/project/node_modules/vue-loader/dist??ref--4-0!./vuejs/App.vue?vue&type=style&index=1&lang=scss
         const langPos = filename.indexOf('lang=') + 5;
         let endLangPos = filename.indexOf('&', langPos);
         if (endLangPos === -1) {
@@ -47,7 +60,7 @@ function getFileExtension(filename) {
     return split.pop();
 }
 
-function transform(error) {
+function transform(error, webpackConfig) {
     if (!isMissingLoaderError(error)) {
         return error;
     }
@@ -68,7 +81,7 @@ function transform(error) {
             error.loaderName = 'react';
             break;
         case 'vue':
-            error.loaderName = 'vue';
+            error.loaderName = 'vue' + getVueVersion(webpackConfig);
             break;
         case 'tsx':
         case 'ts':
@@ -86,4 +99,11 @@ function transform(error) {
     return error;
 }
 
-module.exports = transform;
+/*
+ * Returns a factory to get the function.
+ */
+module.exports = function(webpackConfig) {
+    return function(error) {
+        return transform(error, webpackConfig);
+    };
+};

fixtures/vuejs3-typescript/App.vue

@@ -12,14 +12,16 @@
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const loaderFeatures = require('../features');
 const applyOptionsCallback = require('../utils/apply-options-callback');
+const getVueVersion = require('../utils/get-vue-version');
 
 module.exports = {
     /**
      * @param {WebpackConfig} webpackConfig
      * @return {Array} of loaders to use for Vue files
      */
     getLoaders(webpackConfig) {
-        loaderFeatures.ensurePackagesExistAndAreCorrectVersion('vue');
+        const vueVersion = getVueVersion(webpackConfig);
+        loaderFeatures.ensurePackagesExistAndAreCorrectVersion('vue' + vueVersion);
 
         const options = {};