Support latest preset (ES-2015 - ES-2017) (#209)

* Migrate to use gulp 8, babel 7, es2015+, Node 6+
* Fix ESLint rest/spread error message during linting

.travis.yml

@@ -1,6 +1,8 @@
 sudo: false
 language: node_js
 node_js:
+  - 12
+  - 10
   - 8
   - 7
   - 6

app/chrome-manifest.js

@@ -83,6 +83,7 @@ module.exports = {
       'default_locale': 'en',
       'background': {
         'scripts': [
+          'libs/polyfill.min.js',
           'scripts/chromereload.js',
           'scripts/background.js'
         ]

app/index.js

@@ -23,7 +23,7 @@ module.exports = yeoman.Base.extend({
     this.option('babel', {
       type: Boolean,
       defaults: true,
-      desc: 'Compile ES2015 using Babel'
+      desc: 'Compile ES2015+ using Babel'
     });
 
     this.option('sass', {
@@ -51,6 +51,7 @@ module.exports = yeoman.Base.extend({
     };
 
     this.srcScript = 'app/scripts' + (this.options.babel ? '.babel/' : '/');
+    this.libScript = 'app/libs/';
 
     if (this.options['test-framework'] === 'mocha') {
       testLocal = require.resolve('generator-mocha/generators/app/index.js');
@@ -289,6 +290,11 @@ module.exports = yeoman.Base.extend({
       this.templatePath('babelrc'),
       this.destinationPath('.babelrc')
     );
+
+    this.fs.copy(
+      this.templatePath('../../node_modules/@babel/polyfill/dist/polyfill.min.js'),
+      this.libScript + 'polyfill.min.js'
+    );
   },
 
   mainStylesheet: function () {

app/templates/_package.json

@@ -5,11 +5,14 @@
     "node": ">=0.8.0"
   },
   "devDependencies": {
-    "babel-core": "^6.7.2",
-    "babel-preset-es2015": "^6.6.0",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/polyfill": "7.2.5",
+    "@babel/register": "^7.0.0",
+    "babel-eslint": "^10.0.1",
     "del": "^2.2.0",
     "gulp": "^3.9.1",<% if (babel) { %>
-    "gulp-babel": "^6.1.2",<% } %>
+    "gulp-babel": "^8.0.0",<% } %>
     "gulp-cache": "^0.4.3",
     "gulp-chrome-manifest": "0.0.13",
     "gulp-clean-css": "^2.0.3",
@@ -41,6 +44,10 @@
     "globals": {
       "chrome": true
     },
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 8
+    },
     "rules": {
       "eol-last": 0,
       "quotes": [

app/templates/babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["@babel/env"]
 }

app/templates/gulpfile.babel.js

@@ -99,7 +99,7 @@ gulp.task('babel', () => {
   return gulp.src('app/scripts.babel/**/*.js')
       .pipe($.plumber())
       .pipe($.babel({
-        presets: ['es2015']
+        presets: ['@babel/env']
       }))
       .pipe(gulp.dest('app/scripts'));
 });

app/templates/manifest.json

@@ -10,6 +10,7 @@
   "default_locale": "en",
   "background": {
     "scripts": [
+      "libs/polyfill.min.js",
       "scripts/chromereload.js",
       "scripts/background.js"
     ]

package.json

@@ -15,6 +15,7 @@
     "test": "mocha --reporter spec --timeout 5000"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.2.5",
     "chrome-manifest": "^0.2.9",
     "generator-jasmine": "^0.2.2",
     "generator-mocha": "^0.3.1",

test/test-generator.js

@@ -27,7 +27,7 @@ describe('Generator test', function () {
 
       assert.fileContent([
         ['gulpfile.babel.js', /import gulp/],
-        ['package.json', /babel-core/]
+        ['package.json', /@babel\/core/]
       ]);
 
       done();
@@ -42,12 +42,14 @@ describe('Generator test', function () {
         'app/manifest.json',
         'app/scripts.babel/background.js',
         'app/scripts.babel/chromereload.js',
+        'app/libs/polyfill.min.js',
       ]);
 
       assert.fileContent([
         ['app/scripts.babel/background.js', /details =>/],
         ['app/scripts.babel/chromereload.js', /const\sLIVERELOAD_HOST\s=/],
         ['gulpfile.babel.js', /gulp.task\('babel'/],
+        ['app/libs/polyfill.min.js', /@babel\/polyfill/],
       ]);
 
       done();

test/test-manifest.js

@@ -39,7 +39,8 @@ describe('Manifest test', function () {
     assert.equal(manifest.description, '__MSG_appDescription__');
     assert.equal(manifest.icons['16'], 'images/icon-16.png');
     assert.equal(manifest.default_locale, 'en');
-    assert.equal(manifest.background.scripts[0], 'scripts/chromereload.js');
+    assert.equal(manifest.background.scripts[0], 'libs/polyfill.min.js');
+    assert.equal(manifest.background.scripts[1], 'scripts/chromereload.js');
     assert.equal(manifest.permissions.length, 21);
     assert.ok(manifest.browser_action);
     assert.ok(manifest.page_action);