feature #1308 Drop Vue 2 support (End-Of-Life), only Vue 3 is supported (Kocal)

This PR was merged into the main branch.

Discussion
----------

Drop Vue 2 support (End-Of-Life), only Vue 3 is supported

Close #1283.

Vue 2 reached its end of life months ago, let's remove it for the next major version of Encore.

It also allows us to close #1272.

Commits
-------

ea6ba90 Drop Vue 2 support (End-Of-Life), only Vue 3 is supported

Author: Kocal

CHANGELOG.md

@@ -8,6 +8,8 @@ This is a new major version that contains several backwards-compatibility breaks
 
 * #1307 Drop `webpack-cli` 4 support, only `webpack-cli` ^5.1.4 is supported (@Kocal)
 
+* #1308 Drop Vue 2 support (End-Of-Life), only Vue 3 is supported (@Kocal)
+
 ## 4.7.0
 
 ### Features

lib/config-generator.js

@@ -133,11 +133,8 @@ class ConfigGenerator {
             switch (vueVersion) {
                 case 2:
                 case '2.7':
-                    logger.deprecation('The support for Vue 2 is deprecated and will be removed in the next major version of Encore.' +
+                    throw new Error('The support for Vue 2 has been removed.' +
                         ' Please upgrade to Vue 3, and if necessary remove the "version" setting or set it to 3 when calling ".enableVueLoader()".');
-
-                    config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
-                    break;
                 case 3:
                     config.resolve.alias['vue$'] = 'vue/dist/vue.esm-bundler.js';
                     break;

lib/features.js

@@ -85,26 +85,6 @@ const features = {
         ],
         description: 'process TypeScript files with Babel'
     },
-    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', version: '^2.5' },
-            { name: 'vue-loader', version: '^15.9.5' },
-            { name: 'vue-template-compiler' }
-        ],
-        description: 'load Vue files'
-    },
-    'vue2.7': {
-        method: 'enableVueLoader()',
-        // vue is needed so the end-user can do things
-        packages: [
-            { name: 'vue', version: '^2.7' },
-            { name: 'vue-loader', version: '^15.10.0' },
-        ],
-        description: 'load Vue files'
-    },
     vue3: {
         method: 'enableVueLoader()',
         // vue is needed so the end-user can do things

lib/friendly-errors/transformers/missing-loader.js

@@ -26,11 +26,6 @@ function isMissingLoaderError(e) {
 }
 
 function isErrorFromVueLoader(filename) {
-    // vue2
-    if (filename.includes('??vue-loader-options')) {
-        return true;
-    }
-
     // vue3
     if (/vue-loader\/dist(\/index\.js)?\?\?/.test(filename)) {
         return true;
@@ -48,7 +43,6 @@ function getFileExtension(filename) {
     // ??vue-loader-options
     if (isErrorFromVueLoader(filename)) {
         // vue is strange, the "filename" is reported as something like
-        // 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);

lib/utils/get-vue-version.js

@@ -27,15 +27,7 @@ module.exports = function(webpackConfig) {
     const vueVersion = packageHelper.getPackageVersion('vue');
     if (null === vueVersion) {
         // 2 is the current default version to recommend
-        return 2;
-    }
-
-    if (semver.satisfies(vueVersion, '^2.7')) {
-        return '2.7';
-    }
-
-    if (semver.satisfies(vueVersion, '^2')) {
-        return 2;
+        return 3;
     }
 
     if (semver.satisfies(vueVersion, '^3.0.0-beta.1')) {
@@ -46,6 +38,10 @@ module.exports = function(webpackConfig) {
         throw new Error('vue version 1 is not supported.');
     }
 
+    if (semver.satisfies(vueVersion, '^2')) {
+        throw new Error('vue version 2 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;

package.json

@@ -96,7 +96,6 @@
     "typescript": "^4.3.2 || ^5.0.0",
     "vue": "^3.2.14",
     "vue-loader": "^17.0.0",
-    "vue-template-compiler": "^2.5",
     "webpack": "^5.72",
     "webpack-cli": "^5.1.4",
     "webpack-notifier": "^1.15.0",
@@ -129,9 +128,8 @@
     "stylus-loader": "^7.0.0 || ^8.1.0",
     "ts-loader": "^9.0.0",
     "typescript": "^4.2.2 || ^5.0.0",
-    "vue": "^2.6 || ^3.2.14",
-    "vue-loader": "^15.0.11 || ^17.0.0",
-    "vue-template-compiler": "^2.5",
+    "vue": "^3.2.14",
+    "vue-loader": "^17.0.0",
     "webpack": "^5.72",
     "webpack-cli": "^5.1.4",
     "webpack-notifier": "^1.15.0"
@@ -221,9 +219,6 @@
     "vue-loader": {
       "optional": true
     },
-    "vue-template-compiler": {
-      "optional": true
-    },
     "webpack": {
       "optional": false
     },

test/config-generator.js

@@ -526,7 +526,7 @@ describe('The config-generator function', () => {
             const config = createConfig();
             config.outputPath = '/tmp/output/public-path';
             config.publicPath = '/public-path';
-            config.enableVueLoader(() => {}, { version: 2 }); // Adds the 'vue$' alias
+            config.enableVueLoader(() => {}, { version: 3 }); // Adds the 'vue$' alias
             config.enablePreactPreset({ preactCompat: true }); // Adds the 'react' and 'react-dom' aliases
             config.addAliases({
                 'foo': 'bar',

test/functional.js

@@ -762,28 +762,25 @@ describe('Functional tests using webpack', function() {
                 config.addEntry('page2', './preact/main');
 
                 // Move Vue.js code into its own chunk
-                const isVue2 = getVueVersion(config) === 2;
                 config.addCacheGroup('vuejs', {
-                    test: isVue2 ?
-                        /[\\/]node_modules[\\/]vue[\\/]/ :
-                        /[\\/]node_modules[\\/]@vue[\\/]/
+                    test: /[\\/]node_modules[\\/]@vue[\\/]/
                 });
 
                 testSetup.runWebpack(config, (webpackAssert) => {
                     // Vue.js code should be present in common.js but not in page1.js/page2.js
                     webpackAssert.assertOutputFileContains(
                         'vuejs.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     webpackAssert.assertOutputFileDoesNotContain(
                         'page1.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     webpackAssert.assertOutputFileDoesNotContain(
                         'page2.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     // Preact code should be present in page2.js only
@@ -842,10 +839,9 @@ describe('Functional tests using webpack', function() {
                 config.addEntry('page2', './preact/main');
 
                 // Move both vue.js and preact code into their own chunk
-                const isVue2 = getVueVersion(config) === 2;
                 config.addCacheGroup('common', {
                     node_modules: [
-                        isVue2 ? 'vue' : '@vue',
+                        '@vue',
                         'preact'
                     ]
                 });
@@ -854,17 +850,17 @@ describe('Functional tests using webpack', function() {
                     // Vue.js code should be present in common.js but not in page1.js/page2.js
                     webpackAssert.assertOutputFileContains(
                         'common.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     webpackAssert.assertOutputFileDoesNotContain(
                         'page1.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     webpackAssert.assertOutputFileDoesNotContain(
                         'page2.js',
-                        `/***/ "../../node_modules/${isVue2 ? 'vue' : '@vue'}/`
+                        '/***/ "../../node_modules/@vue/'
                     );
 
                     // Preact code should be present in common.js but not in page1.js/page2.js

test/utils/get-vue-version.js

@@ -36,25 +36,25 @@ describe('get-vue-version', () => {
 
     it('returns the value configured in Webpack.config.js', () => {
         const config = createWebpackConfig();
-        config.vueOptions.version = 3;
+        config.vueOptions.version = 4;
 
-        expect(getVueVersion(config)).to.equal(3);
+        expect(getVueVersion(config)).to.equal(4);
     });
 
     it('returns the default recommended version when vue is not installed', () => {
         const config = createWebpackConfig();
         getPackageVersionStub
             .callsFake(() => null);
 
-        expect(getVueVersion(config)).to.equal(2);
+        expect(getVueVersion(config)).to.equal(3);
     });
 
-    it('return 2 when Vue 2 is installed', () => {
+    it('throw an error when Vue 2 is installed', () => {
         const config = createWebpackConfig();
         getPackageVersionStub
             .callsFake(() => '2.2.4');
 
-        expect(getVueVersion(config)).to.equal(2);
+        expect(() => getVueVersion(config)).to.throw('vue version 2 is not supported.');
     });
 
     it('returns 3 when Vue 3 beta is installed', () => {

yarn.lock

@@ -2964,11 +2964,6 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -7183,14 +7178,6 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
-vue-template-compiler@^2.5:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
-  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
 vue@^3.2.14:
   version "3.4.38"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"