Bootstrap application asynchronously

.gitignore

@@ -6,8 +6,7 @@
 
 # Generated files
 js/
-dist/*.js
-dist/*.js.map
+dist/generated/
 dist/*.tar.gz
 public/css/*.css
 public/css/*.map

dist/package.sh

@@ -36,16 +36,16 @@ if [ -e "release" ]; then
 fi
 
 VERSION=$(grep "\"version\"" package.json  | sed 's/[[:blank:]]*\"version\": \"\([^\"]*\).*/\1/')$SUFFIX
-echo "+ Building version $VERSION"
+echo "+ Packaging version $VERSION"
 
 DIR="release/threema-web-$VERSION"
 
 echo "+ Create release directory..."
-mkdir -p $DIR/{dist,partials,directives,components,node_modules,partials/messenger.receiver,troubleshoot}
+mkdir -p $DIR/{partials,directives,components,node_modules,partials/messenger.receiver,troubleshoot}
 
 echo "+ Copy code..."
 cp -R index.html $DIR/
-cp -R dist/app.bundle.js $DIR/dist/
+cp -R dist/generated/*.js $DIR/
 cp -R public/* $DIR/
 cp -R troubleshoot/* $DIR/troubleshoot/
 cp -R src/partials/*.html $DIR/partials/
@@ -98,8 +98,8 @@ for target in "${targets[@]}"; do
 done
 
 echo "+ Update version number..."
-sed -i.bak -e "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html $DIR/troubleshoot/index.html $DIR/dist/app.bundle.js $DIR/manifest.webmanifest $DIR/browserconfig.xml $DIR/version.txt
-rm $DIR/index.html.bak $DIR/troubleshoot/index.html.bak $DIR/dist/app.bundle.js.bak $DIR/manifest.webmanifest.bak $DIR/browserconfig.xml.bak $DIR/version.txt.bak
+sed -i.bak -e "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html $DIR/troubleshoot/index.html $DIR/*.bundle.js $DIR/manifest.webmanifest $DIR/browserconfig.xml $DIR/version.txt
+rm $DIR/*.bak $DIR/troubleshoot/index.html.bak
 
 echo "+ Update permissions..."
 find $DIR/ -type f -exec chmod 644 {} \;

index.html

@@ -138,7 +138,7 @@
     <script src="node_modules/croppie/croppie.min.js?v=[[VERSION]]"></script>
 
     <!-- App -->
-    <script src="dist/app.bundle.js?v=[[VERSION]]"></script>
+    <script src="app.bundle.js?v=[[VERSION]]"></script>
 
 </body>
 </html>

package-lock.json

@@ -379,6 +379,14 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz",
+      "integrity": "sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz",

package.json

@@ -10,7 +10,7 @@
     "build:tests": "echo -e 'NOTE: Use either \"npm build:unittests\" or \"npm build:uitests\"\n' && exit 1",
     "build:unittests": "webpack --config webpack.tests.js",
     "build:uitests": "npm run build:css && webpack --config webpack.tests.js",
-    "dist": "npm run build && echo \"\" && node dist/build-package.js",
+    "dist": "npm run clean && 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\" \"npx webpack-dev-server --config webpack.dev.js\"",
     "testserver": "npx webpack-dev-server --config webpack.tests.js",
@@ -21,7 +21,7 @@
     "lint:ts": "tslint -c tslint.json --project tsconfig.json --exclude \"**/src/config.ts\"",
     "lint:sass": "sass-lint -c .sass-lint.yml -v -q",
     "lint:sass:fix": "sass-lint-auto-fix -c .sass-lint.yml",
-    "clean": "rm -rf js/ build/ dist/app*"
+    "clean": "rm -rf dist/generated"
   },
   "keywords": [
     "threema",
@@ -35,6 +35,7 @@
   "homepage": "https://threema.ch/",
   "dependencies": {
     "@babel/core": "^7.4.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/runtime": "^7.4.3",

src/bootstrap.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright © 2016-2019 Threema GmbH (https://threema.ch/).
+ *
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// tslint:disable:no-console
+
+// A dependency graph that contains any wasm must all be imported asynchronously.
+import('./app')
+    .then(() => console.info('Application bootstrapped'))
+    .catch((e) => console.error('Could not bootstrap application', e));

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "target": "ES2015",
-        "module": "es2015",
+        "module": "esNext",
         "moduleResolution": "node",
         "removeComments": true
     },

webpack.common.js

@@ -23,12 +23,13 @@ const babelOptions = {
     ['@babel/plugin-transform-runtime', {
       regenerator: true,
     }],
+    ['@babel/plugin-syntax-dynamic-import'],
   ],
 };
 
 module.exports = {
   entry: {
-    app: './src/app.ts',
+    app: './src/bootstrap.ts',
   },
   module: {
     rules: [
@@ -50,10 +51,10 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.ts'],
+    extensions: ['.js', '.ts', '.wasm'],
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'dist', 'generated'),
     filename: '[name].bundle.js',
   },
 };

webpack.dev.js

@@ -11,7 +11,6 @@ module.exports = merge(common, {
       path.join(__dirname, 'public'),
       path.join(__dirname, 'src'),
     ],
-    publicPath: '/dist/',
     compress: true,
     port: 9966,
   },