♻️ Upgrade dependencies and fix some code style

Author: qraimbault

bin/dev-server.js

@@ -30,7 +30,7 @@
     "scss-styles"
   ],
   "scripts": {
-    "start": "cross-env NODE_ENV=development node bin/dev-server.js",
+    "start": "cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server",
     "build": "cross-env NODE_ENV=production webpack",
     "serve": "cross-env NODE_ENV=production node bin/spa-server.js",
     "lint-js": "eslint --ext .js,.vue src",
@@ -53,51 +53,51 @@
     }
   },
   "dependencies": {
-    "axios": "^0.18.0",
-    "vue": "^2.5.16",
-    "vue-analytics": "^5.12.2",
+    "axios": "^0.19.0",
+    "vue": "^2.6.10",
+    "vue-analytics": "^5.17.0",
     "vue-cookie": "^1.1.4",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vue-router": "^3.0.6",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.51",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.51",
-    "@babel/preset-env": "^7.0.0-beta.51",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.4.5",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-0",
-    "babel-jest": "^23.2.0",
-    "babel-loader": "^8.0.0-beta",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
-    "copy-webpack-plugin": "^4.5.2",
+    "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
-    "css-loader": "^0.28.11",
-    "eslint": "^4",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-vue": "^4.5.0",
-    "express": "^4.16.3",
-    "file-loader": "^1.1.11",
+    "css-loader": "^2.1.1",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "express": "^4.17.1",
+    "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.2.0",
-    "mini-css-extract-plugin": "^0.4.1",
-    "node-sass": "^4.9.0",
-    "opn": "^5.3.0",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
-    "regenerator-runtime": "^0.12.0",
-    "resolve-url-loader": "^2.3.0",
-    "sass-lint": "^1.12.1",
-    "sass-loader": "^7.0.3",
-    "style-loader": "^0.21.0",
-    "sugarss": "^1.0.1",
-    "uglifyjs-webpack-plugin": "^1.2.5",
-    "url-loader": "^1.0.1",
-    "vue-eslint-parser": "^2.0.3",
-    "vue-jest": "^2.6.0",
-    "vue-loader": "^15.0.0-beta",
-    "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.14.0",
-    "webpack-cli": "^3.0.8",
-    "webpack-serve": "^1.0.4"
+    "jest": "^24.8.0",
+    "mini-css-extract-plugin": "^0.7.0",
+    "node-sass": "^4.12.0",
+    "open": "^6.3.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "regenerator-runtime": "^0.13.2",
+    "resolve-url-loader": "^3.1.0",
+    "sass-lint": "^1.13.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "sugarss": "^2.0.0",
+    "uglifyjs-webpack-plugin": "^2.1.3",
+    "url-loader": "^1.1.2",
+    "vue-eslint-parser": "^6.0.4",
+    "vue-jest": "^3.0.4",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.5.0"
   }
 }

package.json

@@ -1,11 +1,15 @@
 <template>
   <div class="app">
     <header>
-      <h1 class="title">{{ title }}</h1>
+      <h1 class="title">
+        {{ title }}
+      </h1>
       <nav>
         <ul>
           <li>
-            <router-link :to="{name: 'Home' }">Home</router-link>
+            <router-link :to="{name: 'Home' }">
+              Home
+            </router-link>
           </li>
         </ul>
       </nav>

src/components/App/App.vue

@@ -1,4 +1,4 @@
-import { shallow } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Articles from './Articles.vue';
 
 describe('Articles.vue', () => {
@@ -13,7 +13,7 @@ describe('Articles.vue', () => {
     },
   ];
   it('Displays all articles', () => {
-    const wrapper = shallow(Articles, {
+    const wrapper = shallowMount(Articles, {
       propsData: { articles },
     });
     expect(wrapper.findAll('li')).toHaveLength(articles.length);

src/components/Index/Articles.spec.js

@@ -3,9 +3,14 @@
     <ul class="list">
       <li 
         v-for="(article, index) in articles" 
-        :key="index">
-        <h2 class="list__title">{{ article.title }}</h2>
-        <p class="list__content">{{ article.body }}</p>
+        :key="index"
+      >
+        <h2 class="list__title">
+          {{ article.title }}
+        </h2>
+        <p class="list__content">
+          {{ article.body }}
+        </p>
       </li>
     </ul>
   </div>

src/components/Index/Articles.vue

@@ -6,11 +6,7 @@ import router from './router';
 import App from '@Component/App/App.vue';
 import VuexStoreConfig from './vuex/store';
 
-import {
-  enableAnalytics,
-  analyticsKey,
-  disableAnalyticsInDebug,
-} from './config';
+import { enableAnalytics, analyticsKey, disableAnalyticsInDebug } from './config';
 
 if (enableAnalytics) {
   const VueAnalytics = require('vue-analytics').default;
@@ -19,8 +15,7 @@ if (enableAnalytics) {
     router,
     debug: {
       enabled: process.env.NODE_ENV !== 'production',
-      sendHitTask:
-        process.env.NODE_ENV === 'production' || !disableAnalyticsInDebug,
+      sendHitTask: process.env.NODE_ENV === 'production' || !disableAnalyticsInDebug,
     },
   });
 }

src/main.js

@@ -1,6 +1,8 @@
 <template>
   <div class="page-content">
-    <h2 class="page-title">{{ title }}</h2>
+    <h2 class="page-title">
+      {{ title }}
+    </h2>
     <articles :articles="articles" />
   </div>
 </template>