WIP Vue3 support

weaverryan · weaverryan · commit 8d07790a2470 · 2020-05-06T15:55:57.000-04:00
diff --git a/fixtures/vuejs-css-modules/main_v2.js b/fixtures/vuejs-css-modules/main_v2.js
diff --git a/fixtures/vuejs-css-modules/main_v3.js b/fixtures/vuejs-css-modules/main_v3.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App'
+
+createApp(App).mount('#app');
diff --git a/fixtures/vuejs-jsx/main_v2.js b/fixtures/vuejs-jsx/main_v2.js
diff --git a/fixtures/vuejs-jsx/main_v3.js b/fixtures/vuejs-jsx/main_v3.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App'
+
+createApp(App).mount('#app');
diff --git a/fixtures/vuejs-typescript/main_v2.ts b/fixtures/vuejs-typescript/main_v2.ts
diff --git a/fixtures/vuejs-typescript/main_v3.ts b/fixtures/vuejs-typescript/main_v3.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/fixtures/vuejs/main_v2.js b/fixtures/vuejs/main_v2.js
diff --git a/fixtures/vuejs/main_v3.js b/fixtures/vuejs/main_v3.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App'
+
+createApp(App).mount('#app');
diff --git a/lib/WebpackConfig.js b/lib/WebpackConfig.js
@@ -136,6 +136,7 @@ class WebpackConfig {
         this.babelTypeScriptPresetOptions = {};
         this.vueOptions = {
             useJsx: false,
+            version: null,
         };
         this.eslintOptions = {
             lintVue: false,
@@ -749,9 +750,16 @@ 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(', ')}.`);
             }
-        }
 
-        this.vueOptions = vueOptions;
+            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];
+        }
     }
 
     enableEslintLoader(eslintLoaderOptionsOrCallback = () => {}, eslintOptions = {}) {
diff --git a/lib/config-generator.js b/lib/config-generator.js
@@ -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,18 @@ class ConfigGenerator {
         };
 
         if (this.webpackConfig.useVueLoader) {
-            config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
+            const vueVersion = getVueVersion(this.webpackConfig);
+            switch (vueVersion) {
+                case 2:
+                    config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
+                    break;
+                case 3:
+                    // this may not be needed in the stable release
+                    config.resolve.alias['vue'] = 'vue/dist/vue.esm-bundler.js';
+                    break;
+                default:
+                    throw new Error(`Invalid vue version ${vueVersion}`);
+            }
         }
 
         if (this.webpackConfig.usePreact && this.webpackConfig.preactOptions.preactCompat) {
diff --git a/lib/features.js b/lib/features.js
@@ -87,7 +87,7 @@ 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
@@ -98,6 +98,17 @@ const features = {
         ],
         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' },
+            { name: 'vue-loader', enforce_version: true },
+            { name: '@vue/compiler-sfc' }
+        ],
+        description: 'load Vue files'
+    },
     'vue-jsx': {
         method: 'enableVueLoader()',
         packages: [
diff --git a/lib/friendly-errors/transformers/missing-loader.js b/lib/friendly-errors/transformers/missing-loader.js
@@ -9,6 +9,8 @@
 
 'use strict';
 
+const getVueVersion = require('../../utils/get-vue-version');
+
 const TYPE = 'loader-not-enabled';
 
 function isMissingLoaderError(e) {
@@ -47,7 +49,7 @@ function getFileExtension(filename) {
     return split.pop();
 }
 
-function transform(error) {
+function transform(error, webpackConfig) {
     if (!isMissingLoaderError(error)) {
         return error;
     }
@@ -68,7 +70,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 +88,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);
+    };
+};
diff --git a/lib/loaders/vue.js b/lib/loaders/vue.js
@@ -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 = {};
 
diff --git a/lib/package-helper.js b/lib/package-helper.js
@@ -67,9 +67,14 @@ function isPackageInstalled(packageConfig) {
     }
 }
 
-function getPackageVersion(packageConfig) {
+/**
+ *
+ * @param {string} packageName
+ * @returns {null|string}
+ */
+function getPackageVersion(packageName) {
     try {
-        return require(`${packageConfig.name}/package.json`).version;
+        return require(`${packageName}/package.json`).version;
     } catch (e) {
         return null;
     }
@@ -135,7 +140,7 @@ function getInvalidPackageVersionRecommendations(packagesConfig) {
             return [];
         }
 
-        const version = getPackageVersion(packageConfig);
+        const version = getPackageVersion(packageConfig.name);
 
         // If version is null at this point it should be because
         // of an optional dependency whose presence has already
@@ -196,4 +201,5 @@ module.exports = {
     getInvalidPackageVersionRecommendations,
     addPackagesVersionConstraint,
     getInstallCommand,
+    getPackageVersion,
 };
diff --git a/lib/plugins/friendly-errors.js b/lib/plugins/friendly-errors.js
@@ -13,7 +13,7 @@ const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unus
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
 const missingCssFileTransformer = require('../friendly-errors/transformers/missing-css-file');
 const missingCssFileFormatter = require('../friendly-errors/formatters/missing-css-file');
-const missingLoaderTransformer = require('../friendly-errors/transformers/missing-loader');
+const missingLoaderTransformerFactory = require('../friendly-errors/transformers/missing-loader');
 const missingLoaderFormatter = require('../friendly-errors/formatters/missing-loader');
 const missingPostCssConfigTransformer = require('../friendly-errors/transformers/missing-postcss-config');
 const missingPostCssConfigFormatter = require('../friendly-errors/formatters/missing-postcss-config');
@@ -28,7 +28,7 @@ module.exports = function(webpackConfig) {
         clearConsole: false,
         additionalTransformers: [
             missingCssFileTransformer,
-            missingLoaderTransformer,
+            missingLoaderTransformerFactory(webpackConfig),
             missingPostCssConfigTransformer
         ],
         additionalFormatters: [
diff --git a/lib/plugins/vue.js b/lib/plugins/vue.js
@@ -11,6 +11,7 @@
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
 const PluginPriorities = require('./plugin-priorities');
+const getVueVersion = require('../utils/get-vue-version');
 
 /**
  * @param {Array} plugins
@@ -22,7 +23,19 @@ module.exports = function(plugins, webpackConfig) {
         return;
     }
 
-    const VueLoaderPlugin = require('vue-loader/lib/plugin'); // eslint-disable-line
+    const vueVersion = getVueVersion(webpackConfig);
+    let VueLoaderPlugin;
+    switch (vueVersion) {
+        case 2:
+            VueLoaderPlugin = require('vue-loader/lib/plugin'); // eslint-disable-line
+            break;
+        case 3:
+            ({ VueLoaderPlugin } = require('vue-loader'));
+            break;
+        default:
+            throw new Error(`Invalid vue version ${vueVersion}`);
+    }
+
     plugins.push({
         plugin: new VueLoaderPlugin(),
         priority: PluginPriorities.VueLoaderPlugin
diff --git a/lib/utils/get-vue-version.js b/lib/utils/get-vue-version.js
@@ -0,0 +1,48 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
+const packageHelper = require('../package-helper');
+const semver = require('semver');
+const logger = require('../logger');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {int|null}
+ */
+module.exports = function(webpackConfig) {
+    if (webpackConfig.vueOptions.version !== null) {
+        return webpackConfig.vueOptions.version;
+    }
+
+    // detect installed version
+    const vueVersion = packageHelper.getPackageVersion('vue');
+    if (null === vueVersion) {
+        // 2 is the current default version to recommend
+        return 2;
+    }
+
+    if (semver.satisfies(vueVersion, '^2')) {
+        return 2;
+    }
+
+    if (semver.satisfies(vueVersion, '^3.0.0-beta.1')) {
+        return 3;
+    }
+
+    if (semver.satisfies(vueVersion, '^1')) {
+        throw new Error('vue version 1 is not supported.');
+    }
+
+    logger.warning(`Your version of vue "${vueVersion}" is newer than this version of Encore supports and may or may not function properly.`);
+
+    return 3;
+};
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "@babel/preset-typescript": "^7.0.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
     "@vue/babel-preset-jsx": "^1.0.0-beta.3",
+    "@vue/compiler-sfc": "^3.0.0-beta.9",
     "autoprefixer": "^8.5.0",
     "babel-eslint": "^10.0.1",
     "chai": "^3.5.0",
@@ -92,8 +93,8 @@
     "ts-loader": "^5.3.0",
     "typescript": ">=2.9",
     "url-loader": "^4.0.0",
-    "vue": "^2.3.4",
-    "vue-loader": "^15.0.11",
+    "vue": "^2.3.4 || ^3.0.0beta.9",
+    "vue-loader": "^15.0.11 || ^16.0.0-alpha.1",
     "vue-template-compiler": "^2.3.4",
     "webpack-notifier": "^1.6.0",
     "zombie": "^6.1.4"
diff --git a/test/WebpackConfig.js b/test/WebpackConfig.js
@@ -1037,7 +1037,7 @@ describe('WebpackConfig object', () => {
                 config.enableVueLoader(() => {}, {
                     notExisting: false,
                 });
-            }).to.throw('"notExisting" is not a valid key for enableVueLoader(). Valid keys: useJsx.');
+            }).to.throw('"notExisting" is not a valid key for enableVueLoader(). Valid keys: useJsx, version.');
         });
 
         it('Should set Encore-specific options', () => {
@@ -1048,8 +1048,19 @@ describe('WebpackConfig object', () => {
 
             expect(config.vueOptions).to.deep.equal({
                 useJsx: true,
+                version: null,
             });
         });
+
+        it('Should validate Vue version', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.enableVueLoader(() => {}, {
+                    version: 4,
+                });
+            }).to.throw('"4" is not a valid value for the "version" option passed to enableVueLoader(). Valid versions are: 2, 3.');
+        });
     });
 
 
diff --git a/test/config-generator.js b/test/config-generator.js
@@ -479,7 +479,7 @@ describe('The config-generator function', () => {
             const config = createConfig();
             config.outputPath = '/tmp/output/public-path';
             config.publicPath = '/public-path';
-            config.enableVueLoader(); // Adds the 'vue$' alias
+            config.enableVueLoader(() => {}, { version: 2 }); // Adds the 'vue$' alias
             config.enablePreactPreset({ preactCompat: true }); // Adds the 'react' and 'react-dom' aliases
             config.addAliases({
                 'foo': 'bar',
diff --git a/test/functional.js b/test/functional.js
diff --git a/test/utils/get-vue-version.js b/test/utils/get-vue-version.js
diff --git a/yarn.lock b/yarn.lock
