How can I upgrade ember 2.7 to 3.28? - ember.js

My team inherited an old (around 2017) ember.js based project, and we need to choose between remake the project with vue, or just upgrade ember version.
The project use node 6.16, and here are the dependencies :
// package.json
{
"version": "1.0.0",
"private": true,
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"broccoli-asset-rev": "^2.2.0",
"chart.js": "2.2.1",
"ember-ajax": "0.7.1",
"ember-browserify": "1.1.13",
"ember-cli": "2.4.2",
"ember-cli-app-version": "^1.0.0",
"ember-cli-autoprefixer": "0.6.0",
"ember-cli-babel": "^5.1.5",
"ember-cli-chart": "3.1.0",
"ember-cli-chartjs": "2.3.1",
"ember-cli-dependency-checker": "^1.2.0",
"ember-cli-htmlbars": "^1.3.5",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-inject-live-reload": "^1.10.2",
"ember-cli-moment-shim": "2.2.0",
"ember-cli-qunit": "^1.2.1",
"ember-cli-release": "0.2.8",
"ember-cli-sass": "5.3.0",
"ember-cli-spinjs": "1.0.8",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-cookies": "0.0.9",
"ember-data": "^2.18.5",
"ember-disable-proxy-controllers": "^1.0.2",
"ember-export-application-global": "^1.0.4",
"ember-load-initializers": "^0.5.0",
"ember-models-table": "1.11.0",
"ember-moment": "7.0.0-beta.3",
"ember-pikaday": "2.1.0",
"ember-power-select": "1.0.0-beta.14",
"ember-resolver": "^2.0.3",
"ember-rl-year-picker": "^0.2.0",
"liquid-fire": "0.24.0",
"loader.js": "^4.0.0",
"semantic-ui-ember": "2.0.0-beta.0"
},
"dependencies": {
"ember-colpick": "^0.6.2",
"findup": "^0.1.5",
"semantic-ui-icon": "^2.3.3"
}
}
// bower.json
{
"dependencies": {
"ember": "~2.7",
"ember-cli-shims": "0.1.0",
"ember-cli-test-loader": "0.2.2",
"ember-qunit-notifications": "0.1.0",
"hammerjs": "^2.0.6",
"matchMedia": "0.2.0",
"semantic-ui": "^2.2.4",
"chartjs": "2.1.6",
"spin.js": "^2.3.2",
"mjolnic-bootstrap-colorpicker": "^2.3.6",
"colpick": "2.0.2",
"pikaday": "^1.4.0"
},
"devDependencies": {
"js-cookie": "^2.1.2"
}
}
Yes the project use bower & npm, no idea why.
Knowing this, I got some questions :
Is this normal that ember-cli from npm has not the same version as ember from bower ?
Do you think it is even possible to upgrade ember from 2.7 (or 2.4.2??) to 3.28 (which is LTS) ?
We tried to use the famous ember update and ember-cli-update but it seems that our version (2.4.2) of ember-cli doesn't support it. We can't even find from which version this is supported.
If this is possible, then how ?
Is it possible to get rid of bower ? Before upgrading or after ?
The project is quite large, so we would like to avoid remaking it with vuejs.
And to answer the "why upgrading ember ?", well, node 6 is awful. We need at least node 12

every version is upgradable! But the safest way to do so is probably to traverse from LTS to LTS.
So, 2.4 -> 2.8 -> 2.12 -> 2.16 -> 2.18 -> 3.4 -> 3.8 -> 3.12 -> 3.16 > 3.20 -> 3.24 -> 3.28
More information about Releases here
That may sound like a lot of work, but it's why it's so important to keep up with upgrades. (It may not actually be that much work, depending on the size of your app, and how much you get distracted by new features)
The general strategy at each step is:
have a good test suite
loop:
ensure you have 0 deprecations being logged while running tests
upgrade all libraries to the highest they can go while supporting your version of ember (this'll require some spelunking, but thankfully, you don't have very many non-default deps)
upgrade your ember-source version to the next LTS
Getting off bower is a little non-standard though (in that it's a one-time thing), but there are some blog posts to help you out:
The 2x release blog posts: https://blog.emberjs.com/tag/version-2-x
The 3x release blog posts: https://blog.emberjs.com/tag/version-3-x
From reading the 2-x blog posts, I found this migration guide for getting off bower: https://github.com/ember-cli/ember-cli/releases/tag/v2.13.0-beta.1
I'd probably try to do this first, because you can do the nice upgrade loop described above
However, since you're thinking about re-writing in Vue, it may make sense to just re-write in Ember 4.2 instead -- since a lot of the concepts transfer (if you're not familiar with the latest ember, I cannot recommend the tutorial enough, as it's hard to top.
For a full list of features there is this app: https://upgrade.emberjs.com/changes?fromVersion=2.4&toVersion=4.2
(It says to run some commands, I wouldn't do either of those commands being as far back as 2.4)
For better support through you're upgrade, I recommend joining ember's discord server: https://discord.gg/emberjs

Related

Upgrade Expo react-native-svg dependency version

My Expo project requires the latest version of react-native-svg library to render my SVGs correctly. Currently it's version 9.3.5
From package-json.lock, I see that my current Expo SDK 32 has version 8.0.10 listed.
"dependencies": {
"react-native-svg": {
"version": "8.0.10",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-8.0.10.tgz",
"integrity": "sha512-gsG5GUdvlox67+ohLnq3tZSqiYBmz4M5lKKeUfnJZ8EPrMMS5ZgaVj7Zcccee1VvINS5xQaoenUJdha/GEo34w==",
"requires": {
"color": "^2.0.1",
"lodash": "^4.16.6",
"pegjs": "^0.10.0"
}
}
}
I have tried just installing latest react-native-svg alongside Expo by using
npm install react-native-svg#9.3.5
However, when running the app I get an error:
Tried to register two views with the same name RNSVGRect
So how can I force Expo to use the latest version? I don't see any react-native-svg dependencies anywhere and changing the package-lock.json directly doesn't seem like a good idea.
Short answer to my question is: you can't. At least not without some ugly hacks that are more trouble than they're worth.
The good news is that SDK 33 now comes with "react-native-svg": "~9.4.0" as a dependency and this is almost the latest version as of this writing.

Can prettier plugin get integrated into the web IDE when saving js files?

I would like to configure Prettier within the WebIDE, so far without success.
In my package.json file, I have the following settings:
"scripts": {
"format": "prettier --write \"webapp/**/*.{js,css,json}\""
},
"devDependencies": {
"prettier": "^1.14.3",
"eslint": "^5.7.0",
"eslint-plugin-prettier": "^3.0.0",
"eslint-config-prettier": "^3.1.0" //Here I get ESLint error cannot find module
}
Then, in my .eslintrc.json file:
"extends": ["eslint:recommended", "prettier"]
This is not really working, my goal is to format according to Prettier when I save a file (similar to the "beautify code" option in the web IDE code editor settings, which is now switched off).
I tried cleaning the npm folder and building again, but nothing happens.

Ember-CLI uses wrong path for jQuery and QUnit

I'm using a fresh install of ember-cli with the following versions:
~/Projects/ember_tut > ember s
version: 1.13.13
node: 4.2.1
npm: 2.14.10
os: darwin x64
bower.json looks like this:
{
"name": "ember-tut",
"dependencies": {
"ember": "1.13.11",
"ember-cli-shims": "0.0.6",
"ember-cli-test-loader": "0.2.1",
"ember-data": "1.13.15",
"ember-load-initializers": "0.1.7",
"ember-qunit": "0.4.16",
"ember-qunit-notifications": "0.1.0",
"ember-resolver": "~0.1.20",
"jquery": "^1.11.3",
"loader.js": "ember-cli/loader.js#3.4.0",
"qunit": "~1.20.0",
"pretender": "~0.10.1",
"lodash": "~3.7.0",
"Faker": "~3.0.0"
}
}
Immediately after running ember new ember_test:
~/Projects/ember_tut > ember s
version: 1.13.13
Livereload server on http://localhost:49154
Serving on http://localhost:4200/
ENOENT: no such file or directory, stat '/Users/sms/Projects/ember_tut/tmp/concat_with_maps-input_base_path-pmZyxQ2F.tmp/0/bower_components/jquery/dist/jquery.js'
Error: ENOENT: no such file or directory, stat '/Users/sms/Projects/ember_tut/tmp/concat_with_maps-input_base_path-pmZyxQ2F.tmp/0/bower_components/jquery/dist/jquery.js'
at Error (native)
at Object.fs.statSync (fs.js:849:18)
at ConcatWithMaps.keyForFile (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:90:20)
at Array.map (native)
at ConcatWithMaps.CachingWriter._conditionalBuild (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:112:65)
at /Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/read_compat.js:61:34
at lib$rsvp$$internal$$tryCatch (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:493:16)
at lib$rsvp$$internal$$invokeCallback (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:505:17)
at lib$rsvp$$internal$$publish (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:476:11)
at lib$rsvp$asap$$flush (/Users/sms/Projects/ember_tut/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
It's looking for jquery.js in bower_components/jquery/dist/jquery.js but it's really in bower_components/jquery/jquery-1.11.3/dist/jquery.js.
This is easily "fixed" by creating a symlink in bower_components/jquery/ to bower_components/jquery/jquery-1.11.3/dist, but that's awfully klunky, and I'm wondering what the right way to address it is.
I found that removing all npm and bower caches, then reinstalling everything worked, which makes me think that nem's suggestion in the comments was pretty close:
npm cache clear && bower cache clean && rm -rf node_modules bower_components && npm install && bower install

Trying to share Gulp project with a friend

I have made a gulp project and I am trying to share it with a friend.
Its a simple css grid with gulp tasks integrated.
You can download the package here:
https://www.dropbox.com/s/od1dsh75tegbq24/projectfolder.zip?dl=1
When you unzip the package and make sure you have node.js, ruby and gulp.js installed and try to run the gulpfile, it throws the following error:
Cannot find module "semver-regex"
After I install that (npm install --save semver-regex)
It throws the same kind of error with:
Cannot find module "array-uniq"
After I install that, the build proces works, but liveReload and watch tasks don't...
Is there a way to share Gulpfiles without all the hassle? I just want it to be downloaded and used :)
Package.json is in the root:
{
"devDependencies": {
"gulp-minify-css": "^0.3.10",
"gulp-concat": "^2.4.1",
"gulp-uglify": "^1.0.1",
"gulp-imagemin": "^1.0.1",
"imagemin-pngcrush": "^1.0.0",
"gulp-sass": "^1.0.0",
"gulp-html-replace": "^1.3.0",
"gulp-connect": "^2.0.6",
"gulp-open": "^0.2.8",
"run-sequence": "^1.0.0",
"streamqueue": "^0.1.1"
}
}

How to download ember canary version using bower

I want to use the query-params feature in Ember. However, to do this, I need to download the canary version of ember. I am using bower for package management. How do I update my bower.json file in order to donwload latest canary version of Ember. Relevant parts of my bower.json file look as below:
{
"dependencies": {
"sass-bootstrap": "~2.3.0",
"requirejs": "~2.1.4",
"modernizr": "~2.6.2",
"jquery": "~1.9.1",
"requirejs-text": "~2.0.7",
"ember": "http://builds.emberjs.com/canary/ember.js",
"ember-prod": "http://builds.emberjs.com/canary/ember.prod.js",
"datatables": "~1.9.4",
"lodash": "~1.3.1",
"font-awesome": "~3.2.1",
"moment": "~2.1.0",
"d3": "~3.2.6",
"ember-model": "~0.0.7",
"jquery-ui": "~1.10.3",
"typeahead.js": "~0.10.1"
},
"devDependencies": {},
"resolutions": {
"jquery": ">=1.8.0",
}
}
However, "bower install ember" does not show me following:
Unable to find a suitable version for ember, please choose one:
1) ember#* which resolved to e-tag:8ee2c1ef5 and has ember-table-shim#0.2.0, nvwebapp as dependants
2) ember#~1.0 which resolved to 1.0.1 and has ember-model#0.0.11 as dependants
If I select the first resolution, and then go to app/bower_components/ember/index.js file, following can be seen at the top of the file:
/*!
* #overview Ember - JavaScript Application Framework
* #copyright Copyright 2011-2014 Tilde Inc. and contributors
* Portions Copyright 2006-2011 Strobe Inc.
* Portions Copyright 2008-2011 Apple Inc. All rights reserved.
* #license Licensed under MIT license
* See https://raw.github.com/emberjs/ember.js/master/LICENSE
* #version 1.4.1+pre.af87bd20
*/
So, it seems that this is downloading version 1.4.1, however the latest canary version is 1.6.0.
How should I update my bower.json file to get the latest canary version?
Thanks in advance..!!
Source: http://www.ember-cli.com/user-guide/#using-canary-build-instead-of-release
Using canary build instead of release
In bower.json instead of a version number use:
"ember": "components/ember#canary",
And, following dependencies add resolutions:
"resolutions": {
"ember": "canary"
}
This can also be applied to Ember Data:
"ember-data": "components/ember-data#canary",
And, adding to resolutions:
"resolutions": {
"ember-data": "canary"
}
Wipe your vendor directory clean then run npm install && bower install.
You can enable the canary build by specifying just the build number, like this -
"ember": "1.4.0-beta.2"
I am using beta.2 for query params.
You also need to explicitly enable this feature.