Only allow iframe embedding

.nvmrc

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

_headers.ejs

@@ -1,6 +1,7 @@
 # Long-term cache by default.
 /*
   Cache-Control: max-age=31536000
+  Access-Control-Allow-Origin: *
 
 # And here are the exceptions:
 /
@@ -9,6 +10,9 @@
 /serviceworker.js
   Cache-Control: no-cache
 
+/sdk.mjs
+  Cache-Control: no-cache
+
 /manifest.json
   Cache-Control: must-revalidate, max-age=3600
 

config/size-report.js

@@ -0,0 +1,203 @@
+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,15 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.7.0",
+  "version": "1.6.0",
   "license": "apache-2.0",
   "scripts": {
+    "build:sdk": "microbundle --compress -f es -o build/sdk.mjs -i src/sdk.ts",
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
-    "build": "webpack -p",
+    "build": "webpack -p && npm run build:sdk",
-    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
+    "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}'",
-    "sizereport": "sizereport --config"
+    "sizereport": "node config/size-report.js"
   },
   "husky": {
     "hooks": {
@@ -16,61 +17,61 @@
     }
   },
   "devDependencies": {
-    "@types/node": "10.14.9",
+    "@types/node": "10.14.1",
     "@types/pretty-bytes": "5.1.0",
-    "@types/webassembly-js-api": "0.0.3",
+    "@types/webassembly-js-api": "0.0.2",
-    "@webcomponents/custom-elements": "1.2.4",
+    "@webcomponents/custom-elements": "1.2.1",
-    "@webpack-cli/serve": "0.1.8",
+    "@webpack-cli/serve": "0.1.3",
     "assets-webpack-plugin": "3.9.10",
     "chalk": "2.4.2",
-    "chokidar": "3.0.1",
+    "chokidar": "2.1.2",
     "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",
+    "comlink": "^3.2.0",
     "critters-webpack-plugin": "2.3.0",
     "css-loader": "1.0.1",
-    "ejs": "2.6.2",
+    "ejs": "2.6.1",
-    "escape-string-regexp": "2.0.0",
+    "escape-string-regexp": "1.0.5",
     "exports-loader": "0.7.0",
     "file-drop-element": "0.2.0",
-    "file-loader": "4.0.0",
+    "file-loader": "3.0.1",
-    "gzip-size": "5.1.1",
+    "gzip-size": "5.0.0",
     "html-webpack-plugin": "3.2.0",
-    "husky": "2.4.1",
+    "husky": "1.3.1",
-    "idb-keyval": "3.2.0",
+    "idb-keyval": "3.1.0",
     "linkstate": "1.1.1",
     "loader-utils": "1.2.3",
-    "mini-css-extract-plugin": "0.7.0",
+    "microbundle": "^0.10.1",
+    "mini-css-extract-plugin": "0.5.0",
     "minimatch": "3.0.4",
-    "node-fetch": "2.6.0",
+    "node-fetch": "2.3.0",
-    "node-sass": "4.12.0",
+    "node-sass": "4.11.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.2.0",
+    "pretty-bytes": "5.1.0",
     "progress-bar-webpack-plugin": "1.12.1",
-    "raw-loader": "3.0.0",
+    "raw-loader": "2.0.0",
-    "readdirp": "3.0.2",
+    "readdirp": "2.2.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.3.0",
+    "terser-webpack-plugin": "1.2.3",
-    "travis-size-report": "1.0.1",
+    "ts-loader": "5.3.3",
-    "ts-loader": "6.0.2",
+    "tslint": "5.14.0",
-    "tslint": "5.17.0",
     "tslint-config-airbnb": "5.11.1",
-    "tslint-config-semistandard": "8.0.1",
+    "tslint-config-semistandard": "7.0.0",
-    "tslint-react": "4.0.0",
+    "tslint-react": "3.6.0",
     "typed-css-modules": "0.4.2",
-    "typescript": "3.5.2",
+    "typescript": "3.3.3333",
-    "url-loader": "2.0.0",
+    "url-loader": "1.1.2",
     "webpack": "4.28.0",
-    "webpack-bundle-analyzer": "3.3.2",
+    "webpack-bundle-analyzer": "3.1.0",
-    "webpack-cli": "3.3.4",
+    "webpack-cli": "3.3.0",
-    "webpack-dev-server": "3.7.1",
+    "webpack-dev-server": "3.2.1",
     "worker-plugin": "3.1.0"
   }
 }

sizereport.config.js

@@ -1,14 +0,0 @@
-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/client-api.ts

@@ -0,0 +1,106 @@
+import App from './index';
+import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
+
+import { expose } from 'comlink';
+
+export interface ReadyMessage {
+  type: 'READY';
+  version: string;
+}
+
+export function exposeAPI(app: App) {
+  if (window === top) {
+    // Someone opened Squoosh in a window rather than an iframe.
+    // This can be deceiving and we won’t allow that.
+    return;
+  }
+  self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION }, '*');
+  self.addEventListener('message', (event: MessageEvent) => {
+    if (event.data !== 'READY?') {
+      return;
+    }
+    event.stopImmediatePropagation();
+    self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION } as ReadyMessage, '*');
+  });
+  expose(new API(app), self.parent);
+}
+
+function addRemovableGlobalListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
+  document.addEventListener(name, listener);
+  return () => document.removeEventListener(name, listener);
+}
+
+/**
+ * The API class contains the methods that are exposed via Comlink to the
+ * outside world.
+ */
+export class API {
+  /**
+   * Internal constructor. Do not call.
+   */
+  constructor(private _app: App) {}
+
+  /**
+   * Loads a given file into Squoosh.
+   * @param blob The `Blob` to load
+   * @param name The name of the file. The extension of this name will be used
+   * to deterime which decoder to use.
+   */
+  setFile(blob: Blob, name: string) {
+    return new Promise((resolve) => {
+      document.addEventListener(SquooshStartEventType.START, () => resolve(), {
+        once: true,
+      });
+      this._app.openFile(new File([blob], name));
+    });
+  }
+
+  /**
+   * Grabs one side from Squoosh as a `File`.
+   * @param side The side which to grab. 0 = left, 1 = right.
+   */
+  async getBlob(side: 0 | 1) {
+    if (!this._app.state.file || !this._app.compressInstance) {
+      throw new Error('No file has been loaded');
+    }
+    if (
+      !this._app.compressInstance!.state.loading &&
+      !this._app.compressInstance!.state.sides[side].loading
+    ) {
+      return this._app.compressInstance!.state.sides[side].file;
+    }
+
+    const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
+
+    const r = new Promise((resolve, reject) => {
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          resolve(this._app.compressInstance!.state.sides[side].file);
+        }),
+      );
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          reject(new DOMException('Aborted', 'AbortError'));
+        }),
+      );
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          reject(event.error);
+        }),
+      );
+    });
+    r.then(() => listeners.forEach(remove => remove()));
+    return r;
+  }
+}

src/components/App/index.tsx

@@ -14,10 +14,9 @@ const ROUTE_EDITOR = '/editor';
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress');
-
+const offlinerPromise = import(
-const swBridgePromise = import(
+  /* webpackChunkName: "offliner" */
-  /* webpackChunkName: "sw-bridge" */
+  '../../lib/offliner');
-  '../../lib/sw-bridge');
 
 function back() {
   window.history.back();
@@ -26,7 +25,6 @@ function back() {
 interface Props {}
 
 interface State {
-  awaitingShareTarget: boolean;
   file?: File | Fileish;
   isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
@@ -34,11 +32,11 @@ 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,
   };
+  compressInstance?: import('../compress').default;
 
   snackbar?: SnackBarElement;
 
@@ -51,15 +49,7 @@ export default class App extends Component<Props, State> {
       this.showSnack('Failed to load app');
     });
 
-    swBridgePromise.then(async ({ offliner, getSharedImage }) => {
+    offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
-      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') {
@@ -80,6 +70,14 @@ export default class App extends Component<Props, State> {
     });
 
     window.addEventListener('popstate', this.onPopState);
+    import(
+      /* webpackChunkName: "client-api" */
+      './client-api').then(m => m.exposeAPI(this));
+  }
+
+  @bind openFile(file: File | Fileish) {
+    this.openEditor();
+    this.setState({ file });
   }
 
   @bind
@@ -92,8 +90,7 @@ export default class App extends Component<Props, State> {
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
-    this.openEditor();
+    return this.openFile(file);
-    this.setState({ file });
   }
 
   @bind
@@ -114,18 +111,20 @@ export default class App extends Component<Props, State> {
     this.setState({ isEditorOpen: true });
   }
 
-  render({}: Props, { file, isEditorOpen, Compress, awaitingShareTarget }: State) {
+  render({}: Props, { file, isEditorOpen, Compress }: State) {
-    const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
-
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {
+          {!isEditorOpen
-            showSpinner
+            ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
-              ? <loading-spinner class={style.appLoader}/>
+            : (Compress)
-              : isEditorOpen
+              ? <Compress
-                ? Compress && <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+                  ref={i => this.compressInstance = i}
-                : <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
+                  file={file!}
+                  showSnack={this.showSnack}
+                  onBack={back}
+              />
+              : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />
         </file-drop>

src/components/Options/index.tsx

@@ -178,7 +178,6 @@ 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

@@ -32,6 +32,51 @@ import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
 import SnackBarElement from '../../lib/SnackBar';
 import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
 
+// Safari and Edge don't quite support extending Event, this works around it.
+function fixExtendedEvent(instance: Event, type: Function) {
+  if (!(instance instanceof type)) {
+    Object.setPrototypeOf(instance, type.prototype);
+  }
+}
+export enum SquooshStartEventType {
+  START = 'squoosh:start',
+}
+export class SquooshStartEvent extends Event {
+  constructor(init?: EventInit) {
+    super(SquooshStartEventType.START, init);
+    fixExtendedEvent(this, SquooshStartEvent);
+  }
+}
+
+export const enum SquooshSideEventType {
+  DONE = 'squoosh:done',
+  ABORT = 'squoosh:abort',
+  ERROR = 'squoosh:error',
+}
+export interface SquooshSideEventInit extends EventInit {
+  side: 0|1;
+  error?: Error;
+}
+export class SquooshSideEvent extends Event {
+  public side: 0|1;
+  public error?: Error;
+  constructor(name: SquooshSideEventType, init: SquooshSideEventInit) {
+    super(name, init);
+    fixExtendedEvent(this, SquooshSideEvent);
+    this.side = init.side;
+    this.error = init.error;
+  }
+}
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    [SquooshStartEventType.START]: SquooshStartEvent;
+    [SquooshSideEventType.DONE]: SquooshSideEvent;
+    [SquooshSideEventType.ABORT]: SquooshSideEvent;
+    [SquooshSideEventType.ERROR]: SquooshSideEvent;
+  }
+}
+
 export interface SourceImage {
   file: File | Fileish;
   decoded: ImageData;
@@ -244,7 +289,7 @@ export default class Compress extends Component<Props, State> {
     this.widthQuery.addListener(this.onMobileWidthChange);
     this.updateFile(props.file);
 
-    import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
+    import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
   }
 
   @bind
@@ -395,8 +440,7 @@ export default class Compress extends Component<Props, State> {
     // Either processor is good enough here.
     const processor = this.leftProcessor;
 
-    this.setState({ loadingCounter, loading: true });
+    this.setState({ loadingCounter, loading: true }, this.signalLoadingStart);
-
     // Abort any current encode jobs, as they're redundant now.
     this.leftProcessor.abortCurrent();
     this.rightProcessor.abortCurrent();
@@ -474,6 +518,35 @@ export default class Compress extends Component<Props, State> {
     );
   }
 
+  @bind
+  private dispatchSideEvent(type: SquooshSideEventType, init: SquooshSideEventInit) {
+    document.dispatchEvent(
+      new SquooshSideEvent(type, init),
+    );
+  }
+
+  @bind
+  private signalLoadingStart() {
+    document.dispatchEvent(
+      new SquooshStartEvent(),
+    );
+  }
+
+  @bind
+  private signalProcessingDone(side: 0|1) {
+    this.dispatchSideEvent(SquooshSideEventType.DONE, { side });
+  }
+
+  @bind
+  private signalProcessingAbort(side: 0|1) {
+    this.dispatchSideEvent(SquooshSideEventType.ABORT, { side });
+  }
+
+  @bind
+  private signalProcessingError(side: 0|1, msg: string) {
+    this.dispatchSideEvent(SquooshSideEventType.ERROR, { side, error: new Error(msg) });
+  }
+
   private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
     const {
       skipPreprocessing = false,
@@ -535,8 +608,13 @@ export default class Compress extends Component<Props, State> {
           });
         }
       } catch (err) {
-        if (err.name === 'AbortError') return;
+        if (err.name === 'AbortError') {
-        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
+          this.signalProcessingAbort(index as 0|1);
+          return;
+        }
+        const errorMsg = `Processing error (type=${settings.encoderState.type}): ${err}`;
+        this.signalProcessingError(index as 0|1, errorMsg);
+        this.props.showSnack(errorMsg);
         throw err;
       }
     }
@@ -559,7 +637,7 @@ export default class Compress extends Component<Props, State> {
       encodedSettings: settings,
     });
 
-    this.setState({ sides });
+    this.setState({ sides }, () => this.signalProcessingDone(index as 0|1));
   }
 
   render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
@@ -567,7 +645,6 @@ 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}
@@ -583,7 +660,6 @@ 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,17 +53,11 @@ 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/offliner.ts

@@ -40,23 +40,6 @@ 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,18 +12,5 @@
       "type": "image/png",
       "sizes": "1024x1024"
     }
-  ],
-  "share_target": {
-    "action": "/?share-target",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "files": [
-        {
-          "name": "file",
-          "accept": ["image/*"]
-        }
   ]
 }
-  }
-}

src/missing-types.d.ts

@@ -34,6 +34,7 @@ declare module 'url-loader!*' {
 }
 
 declare var VERSION: string;
+declare var MAJOR_VERSION: string;
 
 declare var ga: {
   (...args: any[]): void;

src/sdk.ts

@@ -0,0 +1,41 @@
+import { proxy, ProxyResult } from 'comlink';
+
+import { API, ReadyMessage } from './components/App/client-api';
+
+// @ts-ignore
+import { version } from '../package.json';
+const MAJOR_VERSION = (version.split('.')[0] as string);
+
+/**
+ * This function will load an iFrame
+ * @param {HTMLIFrameElement} ifr iFrame that will be used to load squoosh
+ * @param {string} src URL of squoosh instance to use
+ */
+export default async function loader(
+  ifr: HTMLIFrameElement,
+  src: string = 'https://squoosh.app',
+): Promise<ProxyResult<API>> {
+  ifr.src = src;
+  await new Promise(resolve => (ifr.onload = resolve));
+  ifr.contentWindow!.postMessage('READY?', '*');
+  await new Promise((resolve) => {
+    window.addEventListener('message', function l(ev) {
+      const msg = ev.data as ReadyMessage;
+      if (!msg || msg.type !== 'READY') {
+        return;
+      }
+      if (msg.version !== MAJOR_VERSION) {
+        throw Error(
+          `Version mismatch. SDK version ${MAJOR_VERSION}, Squoosh version ${
+            msg.version
+          }`,
+        );
+      }
+      ev.stopPropagation();
+      window.removeEventListener('message', l);
+      resolve();
+    });
+  });
+
+  return proxy(ifr.contentWindow!);
+}

src/sw/index.ts

@@ -1,6 +1,5 @@
 import {
   cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors,
-  serveShareTarget,
 } from './util';
 import { get } from 'idb-keyval';
 
@@ -41,23 +40,14 @@ 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,11 +1,8 @@
 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, { ignoreSearch: true });
+    const cachedResponse = await caches.match(event.request);
     return cachedResponse || fetch(event.request);
   }());
 }
@@ -32,23 +29,6 @@ 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);
@@ -124,26 +104,3 @@ 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();
-});

webpack.config.js

@@ -263,6 +263,7 @@ module.exports = async function (_, env) {
       // Inline constants during build, so they can be folded by UglifyJS.
       new webpack.DefinePlugin({
         VERSION: JSON.stringify(VERSION),
+        MAJOR_VERSION: JSON.stringify(VERSION.split(".")[0]),
         // We set node.process=false later in this config.
         // Here we make sure if (process && process.foo) still works:
         process: '{}'