build(babel): upgrade from babel 6 to babel 7 (#1628)

* build(babel): upgrade from babel 6 to babel 7

Upgrade the babel config from babel 6 to babel 7. This includes a few
subset of changes.

The vue-flow preset has been removed in favor or
direct plugin installation, including 'transform-flow-strip-types',
'syntax-flow', and ' proposal-class-properties'.

Use of 'transform-vue-jsx' plugin, using
@vue/babel-plugin-transform-vue-jsx and @vue/babel-helper-vue-jsx-merge-props to gain babel 7 support

Use proposal decorators with legacy decorators option set to true. This
requires options to be set in the babel-eslint to support since legacy
behavior is deprecated.

Use loose interpretation for proposal class properties to support legacy
proposal decorators. Proposal decorators must come before class
properties in plugin declaration

There were many stage-2 plugins that are not being used and were not
installed:
'proposal-export-namespace-from'
'proposal-function-sent'
'proposal-json-strings'
'proposal-numeric-separator'
'proposal-throw-expressions'
'syntax-import-meta'

@babel/polyfill now replaces babel-polyfill. @babel/polyfill is
currently deprecated, and should be replaced in a future PR. Please see
https://babeljs.io/docs/en/babel-polyfill for more details

* chore(.vuepress): upgrade vuepress to 0.14.8

Upgraded to latest patch version of vuepress to gain configFile: false fix for babel config. See
vuejs/vuepress#797 for more details.

Author: AtofStryker

.babelrc

@@ -18,5 +18,11 @@
     "space-before-function-paren": 0,
     "object-curly-spacing": 0,
     "indent": 0
+  },
+  "parserOptions": {
+    "parser": "babel-eslint",
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
   }
 }

.eslintrc

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+    '@babel/plugin-syntax-flow',
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }]
+  ],
+  comments: false
+}

babel.config.js

@@ -32,17 +32,18 @@
     "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types"
   },
   "dependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.3",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-flow-vue": "^1.0.0",
-    "babel-preset-stage-2": "^6.24.1",
+    "@babel/core": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-jsx": "^1.1.2",
+    "babel-loader": "^8.0.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-syntax-flow": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "chai": "^4.0.0",
     "chalk": "^2.4.2",
     "conditional-specs": "^1.0.1",
@@ -84,7 +85,7 @@
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.6.11",
     "vue-template-compiler": "^2.6.11",
-    "vuepress": "^0.14.2",
+    "vuepress": "^0.14.8",
     "vuepress-theme-vue": "^1.0.3",
     "vuex": "^3.0.1",
     "webpack": "^3.0.1",

package.json

@@ -6,7 +6,7 @@ module.exports = function(config) {
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec'],
     files: [
-      '../../node_modules/babel-polyfill/dist/polyfill.js',
+      '../../node_modules/@babel/polyfill/dist/polyfill.js',
       './polyfills.js',
       'load-tests.js'
     ],

test/setup/karma.conf.js

@@ -1,4 +1,4 @@
-require('babel-polyfill')
+require('@babel/polyfill')
 
 if (process.env.TEST_ENV !== 'node') {
   require('jsdom-global')()