ask to attach images

* Upgrade devDependcies. Replace UglifyJS ⚰ with TerserJS 👶 Fix TypeScript compiler errors

* Remove babel and associated plugins

* Re-enable strictNullChecks and noImplicitAny

* Use surma's better ga type definition.
`ts-ignore` document.activeElement potential null warnings

* Avoiding ignores

.babelrc

@@ -1,13 +0,0 @@
-{
-  "plugins": [
-    "transform-class-properties",
-    "transform-react-constant-elements",
-    "transform-react-remove-prop-types",
-    [
-      "transform-react-jsx",
-      {
-        "pragma": "h"
-      }
-    ]
-  ]
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Something is not working as expected
+labels: 
+
+---
+
+**Before you start**
+Please take a look at the [FAQ](https://github.com/GoogleChromeLabs/squoosh/wiki/FAQ) as well as the already opened issues! If nothing fits your problem, go ahead and fill out the following template:
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Version:**
+ - OS w/ version: [e.g. iOS 12]
+ - Browser w/ version [e.g. Chrome 70]
+ - Node version: [e.g. 10.11.0]
+ - npm version: [e.g. 6.4.1]
+
+**Is your issue related to the quality of image compression?**
+Please attach original and output images (you can drag & drop to attach). 
+- Original image 
+- Output image from Squoosh
+
+**Additional context, screenshots, screencasts**
+Add any other context about the problem here.

README.md

@@ -1,6 +1,6 @@
-# Squoosh!
+# [Squoosh]!
 
-Squoosh is an image compression web app that allows you to dive into the advanced options provided
+[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
 by various image compressors.
 
 # Privacy
@@ -30,3 +30,5 @@ You can run the development server with:
 ```sh
 npm start
 ```
+
+[Squoosh]: https://squoosh.app

global.d.ts

@@ -6,7 +6,8 @@ declare interface NodeModule {
 }
 
 declare interface Window {
-  STATE: any
+  STATE: any;
+  ga: typeof ga;
 }
 
 declare namespace JSX {

package.json

@@ -4,10 +4,10 @@
   "version": "1.0.2",
   "license": "apache-2.0",
   "scripts": {
-    "start": "webpack serve --host 0.0.0.0 --hot",
+    "start": "webpack-dev-server --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
+    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
   },
   "husky": {
     "hooks": {
@@ -15,64 +15,55 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^9.6.35",
+    "@types/node": "^10.12.6",
     "@types/pretty-bytes": "^5.1.0",
     "@types/webassembly-js-api": "0.0.1",
     "@webcomponents/custom-elements": "^1.2.1",
+    "@webpack-cli/serve": "^0.1.2",
     "assets-webpack-plugin": "^3.9.7",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-constant-elements": "^6.23.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
-    "babel-preset-env": "^1.7.0",
-    "babel-register": "^6.26.0",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^0.1.19",
+    "clean-webpack-plugin": "^1.0.0",
     "comlink": "^3.0.3",
-    "copy-webpack-plugin": "^4.5.3",
+    "copy-webpack-plugin": "^4.6.0",
     "critters-webpack-plugin": "^2.0.1",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.1",
     "ejs": "^2.6.1",
     "exports-loader": "^0.7.0",
     "file-drop-element": "^0.0.9",
-    "file-loader": "^1.1.11",
+    "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.2",
+    "husky": "^1.1.4",
     "idb-keyval": "^3.1.0",
     "if-env": "^1.0.4",
     "linkstate": "^1.1.1",
     "loader-utils": "^1.1.0",
-    "pointer-tracker": "^2.0.3",
-    "minimatch": "^3.0.4",
     "mini-css-extract-plugin": "^0.4.4",
-    "node-sass": "^4.9.4",
+    "minimatch": "^3.0.4",
-    "optimize-css-assets-webpack-plugin": "^4.0.3",
+    "node-sass": "^4.10.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "pointer-tracker": "^2.0.3",
     "preact": "^8.3.1",
     "prerender-loader": "^1.2.0",
     "pretty-bytes": "^5.1.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.1.0",
-    "script-ext-html-webpack-plugin": "^2.0.1",
+    "script-ext-html-webpack-plugin": "^2.1.3",
-    "source-map-loader": "^0.2.3",
+    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.22.1",
+    "style-loader": "^0.23.1",
-    "ts-loader": "^4.4.2",
+    "terser-webpack-plugin": "^1.1.0",
+    "ts-loader": "^5.3.0",
     "tslint": "^5.11.0",
-    "tslint-config-airbnb": "^5.9.2",
+    "tslint-config-airbnb": "^5.11.0",
     "tslint-config-semistandard": "^7.0.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^2.9.2",
+    "typescript": "^3.1.6",
     "typings-for-css-modules-loader": "^1.7.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.19.1",
+    "webpack": "^4.25.1",
-    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^2.1.5",
+    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.5",
+    "webpack-dev-server": "^3.1.10",
     "worker-plugin": "^1.1.1"
   }
 }

src/components/compress/custom-els/MultiPanel/index.ts

@@ -103,7 +103,7 @@ export default class MultiPanel extends HTMLElement {
 
   // KeyDown event handler
   private _onKeyDown(event: KeyboardEvent) {
-    const selectedEl = document.activeElement;
+    const selectedEl = document.activeElement!;
     const heading = getClosestHeading(selectedEl);
 
     // if keydown event is not on heading element, ignore
@@ -252,8 +252,8 @@ export default class MultiPanel extends HTMLElement {
       return this.firstElementChild as HTMLElement;
     }
     // previous Element of active Element is previous Content,
-    // previous Element of previous Content  is previousHeading
+    // previous Element of previous Content is previousHeading
-    const previousContent = document.activeElement.previousElementSibling;
+    const previousContent = document.activeElement!.previousElementSibling;
     if (previousContent) {
       return previousContent.previousElementSibling as HTMLElement;
     }
@@ -263,7 +263,7 @@ export default class MultiPanel extends HTMLElement {
   private _nextHeading() {
     // activeElement would be the currently selected heading
     // 2 elemements after that would be the next heading.
-    const nextContent = document.activeElement.nextElementSibling;
+    const nextContent = document.activeElement!.nextElementSibling;
     if (nextContent) {
       return nextContent.nextElementSibling as HTMLElement;
     }

src/components/intro/style.scss

@@ -48,6 +48,7 @@
 
 .logo {
   composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
 }
 
 .open-image-guide {
@@ -144,6 +145,7 @@
 
 .demo-icon {
   composes: abs-fill from '../../lib/util.scss';
+  pointer-events: none;
 }
 
 .demo-description {

src/components/range/index.tsx

@@ -13,6 +13,8 @@ export default class Range extends Component<Props, State> {
   @bind
   private onTextInput(event: Event) {
     const input = event.target as HTMLInputElement;
+    const value = input.value.trim();
+    if (!value) return;
     this.rangeWc!.value = input.value;
     const { onInput } = this.props;
     if (onInput) onInput(event);

src/lib/offliner.ts

@@ -63,6 +63,10 @@ export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
     location.reload();
   });
 
+  // If we don't have a controller, we don't need to check for updates – we've just loaded from the
+  // network.
+  if (!hasController) return;
+
   const reg = await navigator.serviceWorker.getRegistration();
   // Service worker not registered yet.
   if (!reg) return;

src/manifest.json

@@ -3,7 +3,7 @@
   "short_name": "Squoosh",
   "start_url": "/",
   "display": "standalone",
-  "orientation": "portrait",
+  "orientation": "any",
   "background_color": "#fff",
   "theme_color": "#f78f21",
   "icons": [

src/missing-types.d.ts

@@ -39,7 +39,3 @@ declare var ga: {
   (...args: any[]): void;
   q: any[];
 };
-
-interface Window {
-  ga: typeof ga;
-}

webpack.config.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const CleanPlugin = require('clean-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -290,12 +290,10 @@ module.exports = function (_, env) {
 
     optimization: {
       minimizer: [
-        new UglifyJsPlugin({
+        new TerserPlugin({
           sourceMap: isProd,
-          extractComments: {
+          extractComments: 'build/licenses.txt',
-            file: 'build/licenses.txt'
+          terserOptions: {
-          },
-          uglifyOptions: {
             compress: {
               inline: 1
             },