Upgrade babel, babelify, browserify-header, concurrently

Also, rewrite the babelify pipeline using a standalone script and the
programmatic API.

Refs #539

dist/babelify-config.js

@@ -0,0 +1,10 @@
+const babelifyConfig = {
+    presets: [
+        ['@babel/preset-env', {
+            'useBuiltIns': 'entry',
+        }],
+    ],
+    extensions: '.ts',
+}
+
+module.exports = babelifyConfig;

dist/browserify.js

@@ -0,0 +1,60 @@
+/**
+ * Bundle the application.
+ */
+
+// Parse argument
+const requiredTargets = 'Must be one of "app", "tests:unit" or "tests:ui".';
+const target = process.argv[2];
+if (target === undefined) {
+    console.error('Missing target. ' + requiredTargets);
+    process.exit(1);
+}
+
+// Import libs
+const fs = require('fs');
+const browserify = require('browserify');
+const babelifyConfig = require('./babelify-config.js');
+
+// Choose target entry point
+let b;
+switch (target) {
+    case 'app':
+        b = browserify('./src/app.ts');
+        break;
+    case 'test:unit':
+        b = browserify('./tests/ts/main.ts');
+        break;
+    case 'test:ui':
+        b = browserify('./tests/ui/main.ts');
+        break;
+    default:
+        console.error(`Invalid target: ${target}. ${requiredTargets}`);
+        process.exit(2);
+        return;
+}
+
+// Convert TypeScript
+b.plugin('tsify');
+
+// Babelify
+b.transform('babelify', babelifyConfig);
+
+// Add header comment
+if (target === 'app') {
+    b.plugin('browserify-header', {
+        'file': 'header.js',
+    })
+}
+
+// Generate bundle
+switch (target) {
+    case 'app':
+        b.bundle().pipe(fs.createWriteStream('dist/app.js'));
+        break;
+    case 'test:unit':
+        b.bundle().pipe(fs.createWriteStream('dist/ts-tests.js'));
+        break;
+    case 'test:ui':
+        b.bundle().pipe(fs.createWriteStream('dist/ui-tests.js'));
+        break;
+}

dist/devserver.js

@@ -0,0 +1,20 @@
+/**
+ * Run the devserver.
+ *
+ * IMPORTANT: Configuration should match `dist/browserify.js`!
+ */
+
+const budo = require('budo')
+const babelify = require('babelify')
+const babelifyConfig = require('./babelify-config.js');
+
+budo(null, {
+    dir: ['public', '.', 'src'],
+    live: true,
+    stream: process.stdout,
+    port: 9966,
+    debug: true,
+    browserify: {
+        transform: [babelify, babelifyConfig]
+    },
+});

dist/package.sh

@@ -53,7 +53,6 @@ targets=(
     angular-animate/angular-animate.min.js
     angular-sanitize/angular-sanitize.min.js
     angular-route/angular-route.min.js
-    babel-es6-polyfill/browser-polyfill.min.js
     msgpack-lite/dist/msgpack.min.js
     tweetnacl/nacl-fast.min.js
     @saltyrtc/chunked-dc/dist/chunked-dc.es5.js

gather-licenses.sh

@@ -15,8 +15,6 @@ LICENSE_FILES=(
     'angular-ui-router' 'node_modules/@uirouter/angularjs/LICENSE'
     'angularjs-scroll-glue' '.licenses/angularjs-scroll-glue'
     'autolinker' 'node_modules/autolinker/LICENSE'
-    'babel-es6-polyfill' '.licenses/babel-es6-polyfill'
-    'babel-preset-es2015' '.licenses/babel-preset-es2015'
     'babelify' 'node_modules/babelify/LICENSE'
     'browserify' 'node_modules/browserify/LICENSE'
     'browserify-header' '.licenses/browserify-header'

index.html

@@ -102,7 +102,6 @@
 
     <!-- Polyfills -->
     <script src="node_modules/webrtc-adapter/out/adapter_no_edge.js?v=[[VERSION]]"></script>
-    <script src="node_modules/babel-es6-polyfill/browser-polyfill.min.js?v=[[VERSION]]"></script>
 
     <!-- Various libraries -->
     <script src="node_modules/qrcode-generator/qrcode.js?v=[[VERSION]]"></script>

karma.conf.js

@@ -11,7 +11,6 @@ module.exports = function(config) {
             'node_modules/angular-material/angular-material.min.js',
             'node_modules/@saltyrtc/chunked-dc/dist/chunked-dc.es5.js',
             'node_modules/autolinker/dist/Autolinker.min.js',
-            'node_modules/regenerator-runtime/runtime.js',
             'dist/app.js',
             'dist/ts-tests.js',
             'tests/filters.js',

package.json

@@ -4,15 +4,15 @@
   "description": "Threema Webclient",
   "scripts": {
     "build": "npm run build:js && npm run build:css",
-    "build:js": "browserify -p tsify src/app.ts -t [ babelify --presets [ es2015 ] --extensions .ts ] -p [ browserify-header --file header.js ] -o dist/app.js",
+    "build:js": "node dist/browserify.js app",
     "build:css": "node-sass -o public/css/ --output-style compressed src/sass/",
     "build:css:watch": "node-sass -w -r --source-map true --source-map-embed true -o public/css/ --output-style compressed src/sass/",
     "build:tests": "echo -e 'NOTE: Use either \"npm build:unittests\" or \"npm build:uitests\"\n' && exit 1",
-    "build:unittests": "browserify -p tsify tests/ts/main.ts -t [ babelify --presets [ es2015 ] --extensions .ts ] -o dist/ts-tests.js",
-    "build:uitests": "npm run build:css && browserify -p tsify tests/ui/main.ts -t [ babelify --presets [ es2015 ] --extensions .ts ] -o dist/ui-tests.js",
+    "build:unittests": "node dist/browserify.js test:unit",
+    "build:uitests": "npm run build:css && node dist/browserify.js test:ui",
     "dist": "npm run build && echo \"\" && node dist/build-package.js",
     "serve:live": "echo 'NOTE: serve:live command has been renamed to devserver'",
-    "devserver": "npm run build:css && concurrently --kill-others --names \"css,server\" -p name \"npm run build:css:watch\" \"budo src/app.ts:dist/app.js -d public -d . -d src --live -- -d -p tsify -t [ babelify --presets [ es2015 ] --extensions .ts ]\"",
+    "devserver": "npm run build:css && concurrently --kill-others --names \"css,server\" -p name \"npm run build:css:watch\" \"node dist/devserver.js\"",
     "testserver": "budo -d public -d . -d src -p 7777",
     "test": "echo -e 'NOTE: Use either \"npm run test:unit\" or \"npm run test:ui\"\n' && exit 1",
     "test:unit": "npm run build:unittests && karma start --single-run --log-level=debug --colors",
@@ -31,6 +31,9 @@
   "private": true,
   "homepage": "https://threema.ch/",
   "dependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.2.3",
     "@saltyrtc/client": "^0.13.2",
     "@saltyrtc/task-relayed-data": "^0.3.1",
     "@saltyrtc/task-webrtc": "^0.13.0",
@@ -54,11 +57,9 @@
     "angular-translate": "~2.18",
     "angularjs-scroll-glue": "~2.1.0",
     "autolinker": "~1.6.2",
-    "babel-es6-polyfill": "~1.1.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babelify": "~7.3.0",
+    "babelify": "~10.0.0",
     "browserify": "^16.2.3",
-    "browserify-header": "^0.9.4",
+    "browserify-header": "^1.0.0",
     "croppie": "~2.6.0",
     "file-saver": "2.0.0",
     "messageformat": "^2.0.5",
@@ -78,7 +79,7 @@
     "angular-mocks": "^1.7.5",
     "budo": "^11.5.0",
     "chai": "^4.2.0",
-    "concurrently": "~3.3.0",
+    "concurrently": "~4.1.0",
     "geckodriver": "^1.14.1",
     "jasmine": "^3.3.1",
     "jasmine-core": "^3.3.0",

src/app.ts

@@ -17,6 +17,8 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import 'regenerator-runtime/runtime';
+
 import {AsyncEvent} from 'ts-events';
 
 import './components';

tests/testsuite.html

@@ -7,8 +7,6 @@
 
         <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
 
-        <script src="../node_modules/regenerator-runtime/runtime.js"></script>
-
         <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
         <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
         <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>

tests/ts/main.ts

@@ -20,6 +20,8 @@
 // tslint:disable:no-reference
 /// <reference path="../../src/threema.d.ts" />
 
+import '@babel/polyfill';
+
 import './containers';
 import './crypto_helpers';
 import './helpers';

tests/ui/main.ts

@@ -3,6 +3,8 @@
  *
  * This file is part of Threema Web.
  */
+import '@babel/polyfill';
+
 import {init as initComposeArea} from './compose_area';
 
 // Expose global functions