feat: upgrade to babel7

Still compatible with existing apps in babel6. Also updated dependencies to latest version.

closes #846

lib/build/amodro-trace/read/es.js

@@ -1,10 +1,10 @@
 'use strict';
-const transform = require('babel-core').transform;
+const transform = require('@babel/core').transform;
 
 // use babel to translate native es module into AMD module
 module.exports = function es(fileName, fileContents) {
   return transform(fileContents, {
     babelrc: false,
-    plugins: ['transform-es2015-modules-amd']
+    plugins: ['@babel/plugin-transform-modules-amd']
   }).code;
 };

lib/commands/new/buildsystems/cli/transpilers/babel.js

@@ -4,26 +4,24 @@ const ProjectItem = require('../../../../../project-item').ProjectItem;
 module.exports = function(project) {
   project.model.transpiler.options = {
     'plugins': [
-      'transform-es2015-modules-amd'
+      '@babel/plugin-transform-modules-amd'
     ]
   };
 
   project.addToContent(
     ProjectItem.resource('.eslintrc.json', 'content/eslintrc.json'),
-    ProjectItem.resource('.babelrc.js', 'content/babelrc.js'),
-    ProjectItem.resource('.babelrc', 'content/babelrc')
+    ProjectItem.resource('.babelrc.js', 'content/babelrc.js')
   ).addToTasks(
     ProjectItem.resource('transpile.js', 'tasks/transpile.js'),
     ProjectItem.resource('lint.js', 'tasks/lint.js')
   ).addToDevDependencies(
     'babel-eslint',
-    'babel-plugin-syntax-flow',
-    'babel-plugin-transform-decorators-legacy',
-    'babel-plugin-transform-flow-strip-types',
-    'babel-preset-env',
-    'babel-preset-stage-1',
-    'babel-polyfill',
-    'babel-register',
+    '@babel/plugin-proposal-decorators',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/preset-env',
+    '@babel/core',
+    '@babel/polyfill',
+    '@babel/register',
     'gulp-babel',
     'gulp-cache',
     'gulp-eslint'

lib/commands/new/buildsystems/general/unit-test-runners/jest.js

@@ -22,7 +22,8 @@ module.exports = function(project) {
 
   if (project.model.transpiler.id === 'babel') {
     project.addToDevDependencies(
-      'babel-jest'
+      'babel-jest',
+      '[email protected]'
     );
 
     project.package.jest = {
@@ -35,17 +36,17 @@ module.exports = function(project) {
         'json'
       ],
       transform: {
-        '^.+\\.jsx?$': 'babel-jest'
+        '^.+\\.js$': 'babel-jest'
       },
-      testRegex: '\\.spec\\.(ts|js)x?$',
+      testRegex: '\\.spec\\.js$',
       setupFiles: [
         '<rootDir>/test/jest-pretest.js'
       ],
       testEnvironment: 'node',
       collectCoverage: true,
       collectCoverageFrom: [
-        'src/**/*.{js,ts}',
-        '!**/*.spec.{js,ts}',
+        'src/**/*.js',
+        '!**/*.spec.js',
         '!**/node_modules/**',
         '!**/test/**'
       ],
@@ -74,9 +75,9 @@ module.exports = function(project) {
         'ts'
       ],
       transform: {
-        '^.+\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest/preprocessor.js'
+        '^.+\\.ts$': 'ts-jest'
       },
-      testRegex: '\\.spec\\.(ts|js)x?$',
+      testRegex: '\\.spec\\.(ts|js)$',
       setupFiles: [
         '<rootDir>/test/jest-pretest.ts'
       ],

lib/commands/new/buildsystems/webpack/transpilers/babel.js

@@ -2,28 +2,20 @@
 const ProjectItem = require('../../../../../project-item').ProjectItem;
 
 module.exports = function(project) {
-  project.model.transpiler.options = {
-    'plugins': [
-      'transform-es2015-modules-amd'
-    ]
-  };
-
   project.addToContent(
     ProjectItem.resource('.eslintrc.json', 'content/eslintrc.json'),
-    ProjectItem.resource('.babelrc.js', 'content/babelrc.js'),
-    ProjectItem.resource('.babelrc', 'content/babelrc')
+    ProjectItem.resource('.babelrc.js', 'content/babelrc.js')
   ).addToDevDependencies(
-    'babel-eslint@7.2.3',
-    'eslint@3.19.0',
+    'babel-eslint',
+    'eslint',
     'babel-loader',
-    'babel-core',
-    'babel-plugin-syntax-flow',
-    'babel-plugin-transform-decorators-legacy',
-    'babel-plugin-transform-flow-strip-types',
-    'babel-polyfill',
-    'babel-preset-env',
-    'babel-preset-stage-1',
-    'babel-register',
+    '@babel/core',
+    '@babel/plugin-proposal-decorators',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/preset-env',
+    '@babel/core',
+    '@babel/polyfill',
+    '@babel/register',
     'babel-plugin-istanbul'
   );
 };

lib/dependencies.json

@@ -1,109 +1,107 @@
 {
-  "@types/jasmine": "^2.8.6",
-  "@types/jest": "^22.2.0",
-  "@types/lodash": "^4.14.105",
-  "@types/node": "^9.4.7",
-  "@types/webpack": "^4.1.1",
-  "aspnet-webpack": "^2.0.3",
+  "@types/jasmine": "^2.8.9",
+  "@types/jest": "^23.3.5",
+  "@types/lodash": "^4.14.117",
+  "@types/node": "^10.11.6",
+  "@types/webpack": "^4.4.15",
+  "aspnet-webpack": "^3.0.0",
   "aurelia-animator-css": "^1.0.4",
-  "aurelia-bootstrapper": "^2.2.0",
+  "aurelia-bootstrapper": "^2.3.0",
   "aurelia-cli": "^1.0.0-beta.1",
   "aurelia-loader-nodejs": "^1.0.1",
-  "aurelia-pal-nodejs": "^1.0.0-beta.3.2.0",
+  "aurelia-pal-nodejs": "^1.1.1",
   "aurelia-protractor-plugin": "^1.0.6",
-  "aurelia-testing": "^1.0.0-beta.4.0.0",
+  "aurelia-testing": "^1.0.0",
   "aurelia-tools": "^2.0.0",
-  "aurelia-webpack-plugin": "^3.0.0-rc.1",
+  "aurelia-webpack-plugin": "^3.0.0",
   "aurelia-polyfills": "^1.3.0",
-  "autoprefixer": "^8.1.0",
-  "babel-core": "^6.26.0",
-  "babel-eslint": "^8.2.2",
-  "babel-jest": "^23.0.0-alpha.0",
-  "babel-loader": "^7.1.4",
-  "babel-plugin-istanbul": "^4.1.5",
-  "babel-plugin-syntax-flow": "^6.18.0",
-  "babel-plugin-transform-decorators-legacy": "^1.3.4",
-  "babel-plugin-transform-flow-strip-types": "^6.22.0",
-  "babel-polyfill": "^6.26.0",
-  "babel-preset-env": "^1.6.1",
-  "babel-preset-stage-1": "^6.24.1",
-  "babel-register": "^6.26.0",
-  "bluebird": "^3.5.1",
-  "browser-sync": "^2.23.6",
+  "autoprefixer": "^9.1.5",
+  "@babel/core": "^7.1.2",
+  "babel-eslint": "^10.0.1",
+  "babel-jest": "^23.6.0",
+  "babel-loader": "^8.0.4",
+  "babel-plugin-istanbul": "^5.0.1",
+  "@babel/plugin-proposal-decorators": "^7.1.2",
+  "@babel/plugin-proposal-class-properties": "^7.1.0",
+  "@babel/polyfill": "^7.0.0",
+  "@babel/preset-env": "^7.1.0",
+  "@babel/register": "^7.0.0",
+  "bluebird": "^3.5.2",
+  "browser-sync": "^2.26.0",
   "clean-webpack-plugin": "^0.1.19",
   "connect-history-api-fallback": "^1.5.0",
-  "copy-webpack-plugin": "^4.5.1",
-  "cross-env": "^5.1.4",
-  "css-loader": "^0.28.11",
-  "debounce": "^1.1.0",
+  "copy-webpack-plugin": "^4.5.2",
+  "cross-env": "^5.2.0",
+  "css-loader": "^1.0.0",
+  "debounce": "^1.2.0",
   "del": "^3.0.0",
   "duplicate-package-checker-webpack-plugin": "^3.0.0",
-  "event-stream": "^3.3.4",
+  "event-stream": "^4.0.1",
   "expose-loader": "^0.7.5",
-  "mini-css-extract-plugin": "^0.4.1",
-  "file-loader": "^1.1.11",
+  "mini-css-extract-plugin": "^0.4.3",
+  "file-loader": "^2.0.0",
   "gulp": "^4.0.0",
-  "gulp-babel": "^7.0.1",
+  "gulp-babel": "^8.0.0",
   "gulp-cache": "^1.0.2",
   "gulp-changed-in-place": "^2.3.0",
-  "gulp-eslint": "^4.0.2",
-  "gulp-htmlmin": "^4.0.0",
-  "gulp-less": "^4.0.0",
+  "gulp-eslint": "^5.0.0",
+  "gulp-htmlmin": "^5.0.1",
+  "gulp-less": "^4.0.1",
   "gulp-notify": "^3.2.0",
   "gulp-plumber": "^1.2.0",
-  "gulp-postcss": "^7.0.1",
+  "gulp-postcss": "^8.0.0",
   "gulp-protractor": "^4.1.0",
-  "gulp-rename": "^1.2.2",
-  "gulp-sass": "^3.1.0",
+  "gulp-rename": "^1.4.0",
+  "gulp-sass": "^4.0.1",
   "gulp-sourcemaps": "^2.6.4",
   "gulp-stylus": "^2.7.0",
   "gulp-tslint": "^8.1.3",
-  "gulp-typescript": "^4.0.1",
-  "gulp-watch": "^5.0.0",
-  "html-minifier": "^3.5.11",
-  "html-webpack-plugin": "^3.0.6",
-  "istanbul-instrumenter-loader": "^3.0.0",
-  "jasmine-core": "^3.1.0",
-  "jest": "^22.4.2",
-  "jest-jasmine2": "^23.0.0-alpha.0",
-  "jest-cli": "^23.0.0-alpha.0",
+  "gulp-typescript": "^5.0.0-alpha.3",
+  "gulp-watch": "^5.0.1",
+  "html-minifier": "^3.5.20",
+  "html-webpack-plugin": "^3.2.0",
+  "istanbul-instrumenter-loader": "^3.0.1",
+  "jasmine-core": "^3.2.1",
+  "jest": "^23.6.0",
+  "jest-jasmine2": "^23.6.0",
+  "jest-cli": "^23.6.0",
   "jest-matchers": "^20.0.3",
   "json-loader": "^0.5.7",
   "html-loader": "^0.5.5",
-  "karma": "^2.0.0",
-  "karma-babel-preprocessor": "^7.0.0",
+  "karma": "^3.0.0",
+  "karma-babel-preprocessor": "^8.0.0-beta.0",
   "karma-chrome-launcher": "^2.2.0",
-  "karma-coverage-istanbul-reporter": "^1.4.2",
-  "karma-jasmine": "^1.1.1",
+  "karma-coverage-istanbul-reporter": "^2.0.4",
+  "karma-jasmine": "^1.1.2",
   "karma-sourcemap-loader": "^0.3.7",
-  "karma-typescript-preprocessor": "^0.3.1",
-  "karma-mocha": "^2.2.5",
-  "karma-webpack": "^v4.0.0-beta.0",
+  "karma-typescript-preprocessor": "^0.4.0",
+  "karma-mocha": "^1.3.0",
+  "karma-webpack": "^3.0.5",
   "minimatch": "^3.0.4",
-  "node-sass": "^4.7.2",
-  "nps": "^5.8.2",
-  "nps-utils": "^1.5.0",
-  "opn": "^5.3.0",
+  "node-sass": "^4.9.3",
+  "nps": "^5.9.3",
+  "nps-utils": "^1.7.0",
+  "opn": "^5.4.0",
   "plugin-error": "^1.0.1",
-  "protractor": "^5.3.0",
-  "requirejs": "^2.3.5",
-  "sass-loader": "^6.0.7",
-  "style-loader": "^0.20.3",
+  "protractor": "^5.4.1",
+  "requirejs": "^2.3.6",
+  "sass-loader": "^7.1.0",
+  "style-loader": "^0.23.1",
   "stylus": "^0.54.5",
-  "systemjs": "^0.21.0",
+  "systemjs": "^0.21.5",
   "systemjs-plugin-text": "^0.0.11",
   "text": "github:requirejs/text#latest",
   "through2": "^2.0.3",
-  "ts-jest": "^22.4.1",
-  "ts-node": "^7.0.0",
-  "ts-loader": "^4.0.1",
-  "tslint": "^5.9.1",
-  "typescript": "^2.7.2",
-  "url-loader": "^1.0.1",
-  "vinyl-fs": "^3.0.2",
-  "wait-on": "^2.1.0",
-  "webpack": "^4.1.1",
-  "webpack-cli": "^2.0.12",
-  "webpack-dev-server": "^3.1.1",
-  "webpack-hot-middleware": "^2.21.2"
-}
+  "ts-jest": "^23.10.4",
+  "ts-node": "^7.0.1",
+  "ts-loader": "^5.2.1",
+  "tslint": "^5.11.0",
+  "typescript": "^3.1.2",
+  "url-loader": "^1.1.1",
+  "vinyl-fs": "^3.0.3",
+  "wait-on": "^3.1.0",
+  "webpack": "^4.20.2",
+  "webpack-cli": "^3.1.2",
+  "webpack-dev-server": "^3.1.9",
+  "webpack-hot-middleware": "^2.24.3"
+}

lib/project.js

@@ -205,15 +205,13 @@ function getMetadata(dir) {
 }
 
 function installBabel() {
-  require('babel-polyfill');
-  require('babel-register')({
+  require('@babel/polyfill');
+  require('@babel/register')({
+    babelrc: false,
     plugins: [
-      'transform-es2015-modules-commonjs'
+      '@babel/plugin-transform-modules-commonjs'
     ],
-    ignore: (filename) => {
-      let relativeFromProjectRoot = path.relative(this.directory, filename);
-      return !/^aurelia_project/.test(relativeFromProjectRoot);
-    }
+    only: [/aurelia_project/]
   });
 }
 

lib/resources/content/babelrc.js

@@ -1,14 +1,18 @@
-// this file will be used by default by babel@7 once it is released
-module.exports = () => {
+module.exports = api => {
+  api.cache.using(() => {
+    // cache based on the two env vars
+    return 'babel:' + process.env.BABEL_TARGET +
+      ' protractor:' + process.env.IN_PROTRACTOR;
+  });
+
   return {
     "plugins": [
-      "syntax-flow",
-      "transform-decorators-legacy",
-      "transform-flow-strip-types"
+      ['@babel/plugin-proposal-decorators', { legacy: true }],
+      ['@babel/plugin-proposal-class-properties', { loose: true }]
     ],
     "presets": [
       [
-        "env", {
+        "@babel/preset-env", {
           "targets": process.env.BABEL_TARGET === 'node' ? {
             "node": process.env.IN_PROTRACTOR ? '6' : 'current'
           } : {
@@ -17,8 +21,7 @@ module.exports = () => {
           "loose": true,
           "modules": process.env.BABEL_TARGET === 'node' ? 'commonjs' : false
         }
-      ],
-      "stage-1"
+      ]
     ]
   }
 }

lib/resources/content/eslintrc.json

@@ -1,3 +1,8 @@
 {
-  "extends": "./node_modules/aurelia-tools/.eslintrc.json"
+  "extends": "./node_modules/aurelia-tools/.eslintrc.json",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  }
 }

lib/resources/content/webpack.config.template.js

@@ -125,7 +125,7 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
       },
       // @endif
       // @if transpiler.id='typescript'
-      { test: /\.tsx?$/, loader: "ts-loader" },
+      { test: /\.ts$/, loader: "ts-loader" },
       // @endif
       // use Bluebird as the global Promise implementation:
       { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },