1.3.0

* Add basic history handling (#288)

* Move history management to Compress component

* Remove unused pathname property from history

* Rename history listener functions

* Use history.back instead of history.replace

* Support going forward in history. Persist last selected file in runtime

* Add netlify redirects file

* Use 301 status code for redirect

* Cleanup _redirects file

* Use 200 status code for redirects

* Simplify onPopState function

* Always redirect to 301 with url rewrite

* Remove redundant history function

* Remove file check on render. Call openEditor synchronously

* Use pushState only if user is on the initial screen. Mount history listener in constructor

* Simplify openEditor condition

* Update early return condition

* Rolling abstractions back into the main component

_redirects.ejs

@@ -0,0 +1,2 @@
+/index.html / 301
+/* /index.html 301

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",

src/components/App/index.tsx

@@ -9,6 +9,8 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';
 
+const ROUTE_EDITOR = '/editor';
+
 const compressPromise = import(
   /* webpackChunkName: "main-app" */
   '../compress',
@@ -18,15 +20,21 @@ const offlinerPromise = import(
   '../../lib/offliner',
 );
 
+function back() {
+  window.history.back();
+}
+
 interface Props {}
 
 interface State {
   file?: File | Fileish;
+  isEditorOpen: Boolean;
   Compress?: typeof import('../compress').default;
 }
 
 export default class App extends Component<Props, State> {
   state: State = {
+    isEditorOpen: false,
     file: undefined,
     Compress: undefined,
   };
@@ -53,17 +61,20 @@ export default class App extends Component<Props, State> {
         window.STATE = this.state;
       };
     }
+
+    window.addEventListener('popstate', this.onPopState);
   }
 
   @bind
-  private onFileDrop(event: FileDropEvent) {
+  private onFileDrop({ file }: FileDropEvent) {
-    const { file } = event;
     if (!file) return;
+    this.openEditor();
     this.setState({ file });
   }
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
+    this.openEditor();
     this.setState({ file });
   }
 
@@ -74,18 +85,25 @@ export default class App extends Component<Props, State> {
   }
 
   @bind
-  private onBack() {
+  private onPopState() {
-    this.setState({ file: undefined });
+    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
   }
 
-  render({}: Props, { file, Compress }: State) {
+  @bind
+  private openEditor() {
+    if (this.state.isEditorOpen) return;
+    history.pushState(null, '', ROUTE_EDITOR);
+    this.setState({ isEditorOpen: true });
+  }
+
+  render({}: Props, { file, isEditorOpen, Compress }: State) {
     return (
       <div id="app" class={style.app}>
         <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
-          {(!file)
+          {!isEditorOpen
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
+              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/compress/index.tsx

@@ -160,7 +160,7 @@ function stateForNewSourceData(state: State, newSource: SourceImage): State {
   for (const i of [0, 1]) {
     // Ditch previous encodings
     const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
 
     newState = cleanMerge(state, `sides.${i}`, {
       preprocessed: undefined,
@@ -319,9 +319,14 @@ export default class Compress extends Component<Props, State> {
   private async onCopyToOtherClick(index: 0 | 1) {
     const otherIndex = (index + 1) % 2;
     const oldSettings = this.state.sides[otherIndex];
+    const newSettings = { ...this.state.sides[index] };
+
+    // Create a new object URL for the new settings. This avoids both sides sharing a URL, which
+    // means it can be safely revoked without impacting the other side.
+    if (newSettings.file) newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
 
     this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, this.state.sides[index]),
+      sides: cleanSet(this.state.sides, otherIndex, newSettings),
     });
 
     const result = await this.props.showSnack('Settings copied across', {

webpack.config.js

@@ -251,6 +251,11 @@ module.exports = async function (_, env) {
         filename: '_headers',
       }),
 
+      isProd && new AssetTemplatePlugin({
+        template: path.join(__dirname, '_redirects.ejs'),
+        filename: '_redirects',
+      }),
+
       new ScriptExtHtmlPlugin({
         inline: ['first']
       }),