Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Aug 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 1 addition & 4 deletions lib/config-generator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 0 additions & 20 deletions lib/features.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 0 additions & 6 deletions lib/friendly-errors/transformers/missing-loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
14 changes: 5 additions & 9 deletions lib/utils/get-vue-version.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand All @@ -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;
Expand Down
9 changes: 2 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -221,9 +219,6 @@
"vue-loader": {
"optional": true
},
"vue-template-compiler": {
"optional": true
},
"webpack": {
"optional": false
},
Expand Down
2 changes: 1 addition & 1 deletion test/config-generator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
20 changes: 8 additions & 12 deletions test/functional.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'
]
});
Expand All @@ -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
Expand Down
10 changes: 5 additions & 5 deletions test/utils/get-vue-version.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
13 changes: 0 additions & 13 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down