1.7.0

* Quick test

* More testing

* More testing

* Removing transfer for now

* Changing name so it's easier to tell them apart when installed

* Disable minification to ease debugging

* Adding navigate lock

* lol oops

* Add minifying back

* Removing minification again, for debugging

* Removing broadcast channel bits, to simplify the code

* Revert "Removing broadcast channel bits, to simplify the code"

This reverts commit 0b2a3ecf2986aae0dd65fdd1ddda2bd9e4e1eac7.

* I think this fixes it

* Refactor

* Suppress flash of home screen during share target

* Almost ready, so switching to real name

* Removing log

* Ahh yes the trailing comma thing

* Removing use of BroadcastChannel

* Reducing ternary

.nvmrc

@@ -1 +1 @@
-10.15.3
+10.16.0

config/size-report.js

@@ -1,203 +0,0 @@
-const path = require('path');
-const { URL } = require('url');
-
-const gzipSize = require('gzip-size');
-const fetch = require('node-fetch');
-const prettyBytes = require('pretty-bytes');
-const escapeRE = require('escape-string-regexp');
-const readdirp = require('readdirp');
-const chalk = new require('chalk').constructor({ level: 4 });
-
-function fetchTravis(path, options = {}) {
-  const url = new URL(path, 'https://api.travis-ci.org');
-  url.search = new URLSearchParams(options);
-
-  return fetch(url, {
-    headers: { 'Travis-API-Version': '3' },
-  });
-}
-
-function fetchTravisBuildInfo(user, repo, branch) {
-  return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
-    'branch.name': branch,
-    state: 'passed',
-    limit: 1,
-    event_type: 'push',
-  }).then(r => r.json());
-}
-
-function fetchTravisText(path) {
-  return fetchTravis(path).then(r => r.text());
-}
-
-/**
- * Recursively-read a directory and turn it into an array of { name, size, gzipSize }
- */
-async function dirToInfoArray(startPath) {
-  const results = await new Promise((resolve, reject) => {
-    readdirp({ root: startPath }, (err, results) => {
-      if (err) reject(err); else resolve(results);
-    });
-  });
-
-  return Promise.all(
-    results.files.map(async (entry) => ({
-      name: entry.path,
-      gzipSize: await gzipSize.file(entry.fullPath),
-      size: entry.stat.size,
-    })),
-  );
-}
-
-/**
- * Try to treat two entries with different file name hashes as the same file.
- */
-function findHashedMatch(name, buildInfo) {
-  const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
-  if (!nameParts) return;
-
-  const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
-  const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
-  return matchingEntry;
-}
-
-const buildSizePrefix = '=== BUILD SIZES: ';
-const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
-
-async function getPreviousBuildInfo() {
-  const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
-  const jobUrl = buildData.builds[0].jobs[0]['@href'];
-  const log = await fetchTravisText(jobUrl + '/log.txt');
-  const reResult = buildSizePrefixRe.exec(log);
-
-  if (!reResult) return;
-  return JSON.parse(reResult[1]);
-}
-
-/**
- * Generate an array that represents the difference between builds.
- * Returns an array of { beforeName, afterName, beforeSize, afterSize }.
- * Sizes are gzipped size.
- * Before/after properties are missing if resource isn't in the previous/new build.
- */
-function getChanges(previousBuildInfo, buildInfo) {
-  const buildChanges = [];
-  const alsoInPreviousBuild = new Set();
-
-  for (const oldEntry of previousBuildInfo) {
-    const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
-      findHashedMatch(oldEntry.name, buildInfo);
-
-    // Entry is in previous build, but not the new build.
-    if (!newEntry) {
-      buildChanges.push({
-        beforeName: oldEntry.name,
-        beforeSize: oldEntry.gzipSize,
-      });
-      continue;
-    }
-
-    // Mark this entry so we know we've dealt with it.
-    alsoInPreviousBuild.add(newEntry);
-
-    // If they're the same, just ignore.
-    // Using size rather than gzip size. I've seen different platforms produce different zipped
-    // sizes.
-    if (
-      oldEntry.size === newEntry.size &&
-      oldEntry.name === newEntry.name
-    ) continue;
-
-    // Entry is in both builds (maybe renamed).
-    buildChanges.push({
-      beforeName: oldEntry.name,
-      afterName: newEntry.name,
-      beforeSize: oldEntry.gzipSize,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  // Look for entries that are only in the new build.
-  for (const newEntry of buildInfo) {
-    if (alsoInPreviousBuild.has(newEntry)) continue;
-
-    buildChanges.push({
-      afterName: newEntry.name,
-      afterSize: newEntry.gzipSize,
-    });
-  }
-
-  return buildChanges;
-}
-
-async function main() {
-  // Output the current build sizes for later retrieval.
-  const buildInfo = await dirToInfoArray(__dirname + '/../build');
-  console.log(buildSizePrefix + JSON.stringify(buildInfo));
-  console.log('\nBuild change report:');
-
-  let previousBuildInfo;
-
-  try {
-    previousBuildInfo = await getPreviousBuildInfo();
-  } catch (err) {
-    console.log(`  Couldn't parse previous build info`);
-    return;
-  }
-
-  if (!previousBuildInfo) {
-    console.log(`  Couldn't find previous build info`);
-    return;
-  }
-
-  const buildChanges = getChanges(previousBuildInfo, buildInfo);
-
-  if (buildChanges.length === 0) {
-    console.log('  No changes');
-    return;
-  }
-
-  // One letter references, so it's easier to get the spacing right.
-  const y = chalk.yellow;
-  const g = chalk.green;
-  const r = chalk.red;
-
-  for (const change of buildChanges) {
-    // New file.
-    if (!change.beforeSize) {
-      console.log(`  ${g('ADDED')}   ${change.afterName} - ${prettyBytes(change.afterSize)}`);
-      continue;
-    }
-
-    // Removed file.
-    if (!change.afterSize) {
-      console.log(`  ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
-      continue;
-    }
-
-    // Changed file.
-    let size;
-
-    if (change.beforeSize === change.afterSize) {
-      // Just renamed.
-      size = `${prettyBytes(change.afterSize)} -> no change`;
-    } else {
-      const color = change.afterSize > change.beforeSize ? r : g;
-      const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
-      const relativeDiff = Math.round((change.afterSize / change.beforeSize) * 1000) / 1000;
-
-      size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
-        ' (' +
-        color(`${sizeDiff}, ${relativeDiff}x`) +
-        ')';
-    }
-
-    console.log(`  ${y('CHANGED')} ${change.afterName} - ${size}`);
-
-    if (change.beforeName !== change.afterName) {
-      console.log(`    Renamed from: ${change.beforeName}`);
-    }
-  }
-}
-
-main();

package.json

@@ -1,14 +1,14 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
     "build": "webpack -p",
     "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
     "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
-    "sizereport": "node config/size-report.js"
+    "sizereport": "sizereport --config"
   },
   "husky": {
     "hooks": {
@@ -16,60 +16,61 @@
     }
   },
   "devDependencies": {
-    "@types/node": "10.14.1",
+    "@types/node": "10.14.9",
     "@types/pretty-bytes": "5.1.0",
-    "@types/webassembly-js-api": "0.0.2",
-    "@webcomponents/custom-elements": "1.2.1",
-    "@webpack-cli/serve": "0.1.3",
+    "@types/webassembly-js-api": "0.0.3",
+    "@webcomponents/custom-elements": "1.2.4",
+    "@webpack-cli/serve": "0.1.8",
     "assets-webpack-plugin": "3.9.10",
-    "chokidar": "2.1.2",
     "chalk": "2.4.2",
+    "chokidar": "3.0.1",
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
     "comlink": "3.1.1",
-    "copy-webpack-plugin": "5.0.1",
+    "copy-webpack-plugin": "5.0.3",
     "critters-webpack-plugin": "2.3.0",
     "css-loader": "1.0.1",
-    "ejs": "2.6.1",
-    "escape-string-regexp": "1.0.5",
+    "ejs": "2.6.2",
+    "escape-string-regexp": "2.0.0",
     "exports-loader": "0.7.0",
     "file-drop-element": "0.2.0",
-    "file-loader": "3.0.1",
-    "gzip-size": "5.0.0",
+    "file-loader": "4.0.0",
+    "gzip-size": "5.1.1",
     "html-webpack-plugin": "3.2.0",
-    "husky": "1.3.1",
-    "idb-keyval": "3.1.0",
+    "husky": "2.4.1",
+    "idb-keyval": "3.2.0",
     "linkstate": "1.1.1",
     "loader-utils": "1.2.3",
-    "mini-css-extract-plugin": "0.5.0",
+    "mini-css-extract-plugin": "0.7.0",
     "minimatch": "3.0.4",
-    "node-fetch": "2.3.0",
-    "node-sass": "4.11.0",
+    "node-fetch": "2.6.0",
+    "node-sass": "4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pointer-tracker": "2.0.3",
     "preact": "8.4.2",
     "prerender-loader": "1.3.0",
-    "pretty-bytes": "5.1.0",
+    "pretty-bytes": "5.2.0",
     "progress-bar-webpack-plugin": "1.12.1",
-    "raw-loader": "2.0.0",
-    "readdirp": "2.2.1",
+    "raw-loader": "3.0.0",
+    "readdirp": "3.0.2",
     "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.2.3",
-    "ts-loader": "5.3.3",
-    "tslint": "5.14.0",
+    "terser-webpack-plugin": "1.3.0",
+    "travis-size-report": "1.0.1",
+    "ts-loader": "6.0.2",
+    "tslint": "5.17.0",
     "tslint-config-airbnb": "5.11.1",
-    "tslint-config-semistandard": "7.0.0",
-    "tslint-react": "3.6.0",
+    "tslint-config-semistandard": "8.0.1",
+    "tslint-react": "4.0.0",
     "typed-css-modules": "0.4.2",
-    "typescript": "3.3.3333",
-    "url-loader": "1.1.2",
+    "typescript": "3.5.2",
+    "url-loader": "2.0.0",
     "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.1.0",
-    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.2.1",
+    "webpack-bundle-analyzer": "3.3.2",
+    "webpack-cli": "3.3.4",
+    "webpack-dev-server": "3.7.1",
     "worker-plugin": "3.1.0"
   }
 }

sizereport.config.js

@@ -0,0 +1,14 @@
+const escapeRE = require("escape-string-regexp");
+
+module.exports = {
+  repo: "GoogleChromeLabs/squoosh",
+  path: "build/**/!(*.map)",
+  branch: "master",
+  findRenamed(path, newPaths) {
+    const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
+    if (!nameParts) return;
+
+    const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
+    return newPaths.find(newPath => matchRe.test(newPath));
+  }
+};

src/components/App/index.tsx

@@ -14,9 +14,10 @@ const ROUTE_EDITOR = '/editor';
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress');
-const offlinerPromise = import(
-  /* webpackChunkName: "offliner" */
-  '../../lib/offliner');
+
+const swBridgePromise = import(
+  /* webpackChunkName: "sw-bridge" */
+  '../../lib/sw-bridge');
 
 function back() {
   window.history.back();
@@ -25,6 +26,7 @@ function back() {
 interface Props {}
 
 interface State {
+  awaitingShareTarget: boolean;
   file?: File | Fileish;
   isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
@@ -32,6 +34,7 @@ interface State {
 
 export default class App extends Component<Props, State> {
   state: State = {
+    awaitingShareTarget: new URL(location.href).searchParams.has('share-target'),
     isEditorOpen: false,
     file: undefined,
     Compress: undefined,
@@ -48,7 +51,15 @@ export default class App extends Component<Props, State> {
       this.showSnack('Failed to load app');
     });
 
-    offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
+    swBridgePromise.then(async ({ offliner, getSharedImage }) => {
+      offliner(this.showSnack);
+      if (!this.state.awaitingShareTarget) return;
+      const file = await getSharedImage();
+      // Remove the ?share-target from the URL
+      history.replaceState('', '', '/');
+      this.openEditor();
+      this.setState({ file, awaitingShareTarget: false });
+    });
 
     // In development, persist application state across hot reloads:
     if (process.env.NODE_ENV === 'development') {
@@ -103,15 +114,18 @@ export default class App extends Component<Props, State> {
     this.setState({ isEditorOpen: true });
   }
 
-  render({}: Props, { file, isEditorOpen, Compress }: State) {
+  render({}: Props, { file, isEditorOpen, Compress, awaitingShareTarget }: State) {
+    const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
+
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {!isEditorOpen
-            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
-            : (Compress)
-              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
-              : <loading-spinner class={style.appLoader}/>
+          {
+            showSpinner
+              ? <loading-spinner class={style.appLoader}/>
+              : isEditorOpen
+                ? Compress && <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+                : <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />
         </file-drop>

src/components/Options/index.tsx

@@ -178,6 +178,7 @@ export default class Options extends Component<Props, State> {
           {encoderSupportMap ?
             <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
               {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
+                // tslint:disable-next-line:jsx-key
                 <option value={encoder.type}>{encoder.label}</option>
               ))}
             </Select>

src/components/compress/index.tsx

@@ -244,7 +244,7 @@ export default class Compress extends Component<Props, State> {
     this.widthQuery.addListener(this.onMobileWidthChange);
     this.updateFile(props.file);
 
-    import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
+    import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
   }
 
   @bind
@@ -567,6 +567,7 @@ export default class Compress extends Component<Props, State> {
     const [leftImageData, rightImageData] = sides.map(i => i.data);
 
     const options = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
       <Options
         source={source}
         mobileView={mobileView}
@@ -582,6 +583,7 @@ export default class Compress extends Component<Props, State> {
       (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
 
     const results = sides.map((side, index) => (
+      // tslint:disable-next-line:jsx-key
       <Results
         downloadUrl={side.downloadUrl}
         imageFile={side.file}

src/components/intro/index.tsx

@@ -53,11 +53,17 @@ export default class Intro extends Component<Props, State> {
   state: State = {};
   private fileInput?: HTMLInputElement;
 
+  @bind
+  private resetFileInput() {
+    this.fileInput!.value = '';
+  }
+
   @bind
   private onFileChange(event: Event): void {
     const fileInput = event.target as HTMLInputElement;
     const file = fileInput.files && fileInput.files[0];
     if (!file) return;
+    this.resetFileInput();
     this.props.onFile(file);
   }
 

src/lib/sw-bridge.ts

@@ -40,6 +40,23 @@ async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
   });
 }
 
+/** Wait for a shared image */
+export function getSharedImage(): Promise<File> {
+  return new Promise((resolve) => {
+    const onmessage = (event: MessageEvent) => {
+      if (event.data.action !== 'load-image') return;
+      resolve(event.data.file);
+      navigator.serviceWorker.removeEventListener('message', onmessage);
+    };
+
+    navigator.serviceWorker.addEventListener('message', onmessage);
+
+    // This message is picked up by the service worker - it's how it knows we're ready to receive
+    // the file.
+    navigator.serviceWorker.controller!.postMessage('share-ready');
+  });
+}
+
 /** Set up the service worker and monitor changes */
 export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
   // This needs to be a typeof because Webpack.

src/manifest.json

@@ -12,5 +12,18 @@
       "type": "image/png",
       "sizes": "1024x1024"
     }
-  ]
+  ],
+  "share_target": {
+    "action": "/?share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "file",
+          "accept": ["image/*"]
+        }
+      ]
+    }
+  }
 }

src/sw/index.ts

@@ -1,5 +1,6 @@
 import {
   cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors,
+  serveShareTarget,
 } from './util';
 import { get } from 'idb-keyval';
 
@@ -40,14 +41,23 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
-  // We only care about GET.
-  if (event.request.method !== 'GET') return;
-
   const url = new URL(event.request.url);
 
   // Don't care about other-origin URLs
   if (url.origin !== location.origin) return;
 
+  if (
+    url.pathname === '/' &&
+    url.searchParams.has('share-target') &&
+    event.request.method === 'POST'
+  ) {
+    serveShareTarget(event);
+    return;
+  }
+
+  // We only care about GET from here on in.
+  if (event.request.method !== 'GET') return;
+
   if (url.pathname.startsWith('/demo-') || url.pathname.startsWith('/wc-polyfill')) {
     cacheOrNetworkAndCache(event, dynamicCache);
     cleanupCache(event, dynamicCache, BUILD_ASSETS);

src/sw/util.ts

@@ -1,8 +1,11 @@
 import webpDataUrl from 'url-loader!../codecs/tiny.webp';
 
+// Give TypeScript the correct global.
+declare var self: ServiceWorkerGlobalScope;
+
 export function cacheOrNetwork(event: FetchEvent): void {
   event.respondWith(async function () {
-    const cachedResponse = await caches.match(event.request);
+    const cachedResponse = await caches.match(event.request, { ignoreSearch: true });
     return cachedResponse || fetch(event.request);
   }());
 }
@@ -29,6 +32,23 @@ export function cacheOrNetworkAndCache(event: FetchEvent, cacheName: string): vo
   }());
 }
 
+export function serveShareTarget(event: FetchEvent): void {
+  const dataPromise = event.request.formData();
+
+  // Redirect so the user can refresh the page without resending data.
+  // @ts-ignore It doesn't like me giving a response to respondWith, although it's allowed.
+  event.respondWith(Response.redirect('/?share-target'));
+
+  event.waitUntil(async function () {
+    // The page sends this message to tell the service worker it's ready to receive the file.
+    await nextMessage('share-ready');
+    const client = await self.clients.get(event.resultingClientId);
+    const data = await dataPromise;
+    const file = data.get('file');
+    client.postMessage({ file, action: 'load-image' });
+  }());
+}
+
 export function cleanupCache(event: FetchEvent, cacheName: string, keepAssets: string[]) {
   event.waitUntil(async function () {
     const cache = await caches.open(cacheName);
@@ -104,3 +124,26 @@ export async function cacheAdditionalProcessors(cacheName: string, buildAssets:
   const cache = await caches.open(cacheName);
   await cache.addAll(toCache);
 }
+
+const nextMessageResolveMap = new Map<string, (() => void)[]>();
+
+/**
+ * Wait on a message with a particular event.data value.
+ *
+ * @param dataVal The event.data value.
+ */
+function nextMessage(dataVal: string): Promise<void> {
+  return new Promise((resolve) => {
+    if (!nextMessageResolveMap.has(dataVal)) {
+      nextMessageResolveMap.set(dataVal, []);
+    }
+    nextMessageResolveMap.get(dataVal)!.push(resolve);
+  });
+}
+
+self.addEventListener('message', (event) => {
+  const resolvers = nextMessageResolveMap.get(event.data);
+  if (!resolvers) return;
+  nextMessageResolveMap.delete(event.data);
+  for (const resolve of resolvers) resolve();
+});