Add analytics script (fixes #174)

.babelrc

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,36 +0,0 @@
----
-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,34 +1,5 @@
-# [Squoosh]!
+# Squoosh!
 
-[Squoosh] is an image compression web app that allows you to dive into the advanced options provided
-by various image compressors.
+Squoosh will be an image compression web app that allows you to dive into the
+advanced options provided by various image compressors.
 
-# Privacy
-
-Google Analytics is used to record the following:
-
-* [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
-* Before and after image size once an image is downloaded. These values are rounded to the nearest
-  kilobyte.
-
-Image compression is handled locally; no additional data is sent to the server.
-
-# Building locally
-
-Clone the repo, and:
-
-```sh
-npm install
-npm run build
-```
-
-You'll get an error on first build because of [a stupid bug we haven't fixed
-yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
-
-You can run the development server with:
-
-```sh
-npm start
-```
-
-[Squoosh]: https://squoosh.app

_headers.ejs

@@ -1,18 +0,0 @@
-# Long-term cache by default.
-/*
-  Cache-Control: max-age=31536000
-
-# And here are the exceptions:
-/
-  Cache-Control: no-cache
-
-/serviceworker.js
-  Cache-Control: no-cache
-
-/manifest.json
-  Cache-Control: must-revalidate, max-age=3600
-
-# URLs in /assets do not include a hash and are mutable.
-# But it isn't a big deal if the user gets an old version.
-/assets/*
-  Cache-Control: must-revalidate, max-age=3600

config/asset-template-plugin.js

@@ -1,47 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const ejs = require('ejs');
-const AssetsPlugin = require('assets-webpack-plugin');
-
-module.exports = class AssetTemplatePlugin extends AssetsPlugin {
-  constructor(options) {
-    options = options || {};
-    if (!options.template) throw Error('AssetTemplatePlugin: template option is required.');
-    super({
-      useCompilerPath: true,
-      filename: options.filename,
-      processOutput: files => this._processOutput(files)
-    });
-    this._template = path.resolve(process.cwd(), options.template);
-    const ignore = options.ignore || /(manifest\.json|\.DS_Store)$/;
-    this._ignore = typeof ignore === 'function' ? ({ test: ignore }) : ignore;
-  }
-
-  _processOutput(files) {
-    const mapping = {
-      all: [],
-      byType: {},
-      entries: {}
-    };
-    for (const entryName in files) {
-      // non-entry-point-derived assets are collected under an empty string key
-      // since that's a bit awkward, we'll call them "assets"
-      const name = entryName === '' ? 'assets' : entryName;
-      const listing = files[entryName];
-      const entry = mapping.entries[name] = {
-        all: [],
-        byType: {}
-      };
-      for (let type in listing) {
-        const list = [].concat(listing[type]).filter(file => !this._ignore.test(file));
-        if (!list.length) continue;
-        mapping.all = mapping.all.concat(list);
-        mapping.byType[type] = (mapping.byType[type] || []).concat(list);
-        entry.all = entry.all.concat(list);
-        entry.byType[type] = (entry.byType[type] || []).concat(list);
-      }
-    }
-    mapping.files = mapping.all;
-    return ejs.render(fs.readFileSync(this._template, 'utf8'), mapping);
-  }
-};

global.d.ts

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

package.json

@@ -1,13 +1,13 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.0.2",
+  "version": "0.1.0",
   "license": "apache-2.0",
   "scripts": {
-    "start": "webpack-dev-server --host 0.0.0.0 --hot",
+    "start": "webpack serve --host 0.0.0.0 --hot",
     "build": "webpack -p",
-    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
-    "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
+    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
   },
   "husky": {
     "hooks": {
@@ -15,55 +15,62 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^10.12.6",
+    "@types/node": "^9.6.35",
     "@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": "^1.0.0",
+    "clean-webpack-plugin": "^0.1.19",
     "comlink": "^3.0.3",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^4.5.3",
     "critters-webpack-plugin": "^2.0.1",
-    "css-loader": "^1.0.1",
-    "ejs": "^2.6.1",
+    "css-loader": "^0.28.11",
     "exports-loader": "^0.7.0",
     "file-drop-element": "^0.0.9",
-    "file-loader": "^2.0.0",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.4",
+    "husky": "^1.1.2",
     "idb-keyval": "^3.1.0",
     "if-env": "^1.0.4",
     "linkstate": "^1.1.1",
     "loader-utils": "^1.1.0",
-    "mini-css-extract-plugin": "^0.4.4",
-    "minimatch": "^3.0.4",
-    "node-sass": "^4.10.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pointer-tracker": "^2.0.3",
+    "minimatch": "^3.0.4",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.4",
+    "optimize-css-assets-webpack-plugin": "^4.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.1.3",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.1.0",
-    "ts-loader": "^5.3.0",
+    "script-ext-html-webpack-plugin": "^2.0.1",
+    "source-map-loader": "^0.2.3",
+    "style-loader": "^0.22.1",
+    "ts-loader": "^4.4.2",
     "tslint": "^5.11.0",
-    "tslint-config-airbnb": "^5.11.0",
+    "tslint-config-airbnb": "^5.9.2",
     "tslint-config-semistandard": "^7.0.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.1.6",
+    "typescript": "^2.9.2",
     "typings-for-css-modules-loader": "^1.7.0",
     "url-loader": "^1.1.2",
-    "webpack": "^4.25.1",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10",
+    "webpack": "^4.19.1",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^2.1.5",
+    "webpack-dev-server": "^3.1.5",
     "worker-plugin": "^1.1.1"
   }
 }

src/components/Output/index.tsx

@@ -48,15 +48,6 @@ export default class Output extends Component<Props, State> {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
 
-    // Reset the pinch zoom, which may have an position set from the previous view, after pressing
-    // the back button.
-    this.pinchZoomLeft!.setTransform({
-      allowChangeEvent: true,
-      x: 0,
-      y: 0,
-      scale: 1,
-    });
-
     if (this.canvasLeft && leftDraw) {
       drawDataToCanvas(this.canvasLeft, leftDraw);
     }

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
-    const previousContent = document.activeElement!.previousElementSibling;
+    // previous Element of previous Content  is previousHeading
+    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/index.tsx

@@ -129,11 +129,6 @@ export default class Intro extends Component<Props, State> {
         <ul class={style.relatedLinks}>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
           <li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
-          <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
-              Privacy
-            </a>
-          </li>
         </ul>
       </div>
     );

src/components/intro/style.scss

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

src/components/range/index.tsx

@@ -13,8 +13,6 @@ 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/components/results/index.tsx

@@ -60,16 +60,11 @@ export default class Results extends Component<Props, State> {
 
   @bind
   onDownload() {
-    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
-    // avoid cases where exact image sizes leak something interesting about the user.
-    const before = Math.round(this.props.source!.file.size / 1024);
-    const after = Math.round(this.props.imageFile!.size / 1024);
-    const change = Math.round(after / before * 1000);
-
     ga('send', 'event', 'compression', 'download', {
-      metric1: before,
-      metric2: after,
-      metric3: change,
+      // GA can’t do floats. So we round to ints.
+      metric1: Math.floor(this.props.source!.file.size),
+      metric2: Math.floor(this.props.imageFile!.size),
+      metric3: Math.floor(this.props.imageFile!.size / this.props.source!.file.size * 1000),
     });
   }
 

src/index.ts

@@ -13,13 +13,11 @@ if (!('customElements' in self)) {
   init();
 }
 
-if (typeof PRERENDER === 'undefined') {
-  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
-  ga('create', 'UA-128752250-1', 'auto');
-  ga('set', 'transport', 'beacon');
-  ga('send', 'pageview');
-    // Load the GA script
-  const s = document.createElement('script');
-  s.src = 'https://www.google-analytics.com/analytics.js';
-  document.head!.appendChild(s);
-}
+window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
+ga('create', 'UA-128752250-1', 'auto');
+ga('set', 'transport', 'beacon');
+ga('send', 'pageview');
+  // Load the GA script
+const s = document.createElement('script');
+s.src = 'https://www.google-analytics.com/analytics.js';
+document.head!.appendChild(s);

src/lib/offliner.ts

@@ -42,9 +42,6 @@ async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
 
 /** Set up the service worker and monitor changes */
 export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
-  // This needs to be a typeof because Webpack.
-  if (typeof PRERENDER === 'boolean') return;
-
   if (process.env.NODE_ENV === 'production') {
     navigator.serviceWorker.register('../sw');
   }
@@ -63,10 +60,6 @@ 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": "any",
+  "orientation": "portrait",
   "background_color": "#fff",
   "theme_color": "#f78f21",
   "icons": [

src/missing-types.d.ts

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

src/sw/util.ts

@@ -56,6 +56,8 @@ export async function cacheBasics(cacheName: string, buildAssets: string[]) {
   const toCache = ['/', '/assets/favicon.ico'];
 
   const prefixesToCache = [
+    // First interaction JS & CSS:
+    'first-interaction.',
     // Main app JS & CSS:
     'main-app.',
     // Service worker handler:

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 TerserPlugin = require('terser-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -14,7 +14,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const WorkerPlugin = require('worker-plugin');
 const AutoSWPlugin = require('./config/auto-sw-plugin');
 const CrittersPlugin = require('critters-webpack-plugin');
-const AssetTemplatePlugin = require('./config/asset-template-plugin');
 
 function readJson (filename) {
   return JSON.parse(fs.readFileSync(filename));
@@ -226,7 +225,7 @@ module.exports = function (_, env) {
       // For now we're not doing SSR.
       new HtmlPlugin({
         filename: path.join(__dirname, 'build/index.html'),
-        template: isProd ? '!!prerender-loader?string!src/index.html' : 'src/index.html',
+        template: '!!prerender-loader?string!src/index.html',
         minify: isProd && {
           collapseWhitespace: true,
           removeScriptTypeAttributes: true,
@@ -239,11 +238,8 @@ module.exports = function (_, env) {
         compile: true
       }),
 
-      new AutoSWPlugin({ version: VERSION }),
-
-      isProd && new AssetTemplatePlugin({
-        template: path.join(__dirname, '_headers.ejs'),
-        filename: '_headers',
+      new AutoSWPlugin({
+        version: VERSION
       }),
 
       new ScriptExtHtmlPlugin({
@@ -290,10 +286,12 @@ module.exports = function (_, env) {
 
     optimization: {
       minimizer: [
-        new TerserPlugin({
+        new UglifyJsPlugin({
           sourceMap: isProd,
-          extractComments: 'build/licenses.txt',
-          terserOptions: {
+          extractComments: {
+            file: 'build/licenses.txt'
+          },
+          uglifyOptions: {
             compress: {
               inline: 1
             },