Merge branch 'dev' into libsquoosh-codecs-to-ts

libsquoosh/README.md

@@ -39,9 +39,9 @@ The returned `image` object is a representation of the original image, that you
 When an image has been ingested, you can start preprocessing it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:
 
 ```js
-await image.decoded; //Wait until the image is decoded before running preprocessors
+await image.decoded; //Wait until the image is decoded before running preprocessors. 
 
-const preprocessOptions: {
+const preprocessOptions = {
   resize: {
     enabled: true,
     width: 100,
@@ -50,7 +50,7 @@ const preprocessOptions: {
 }
 await image.preprocess(preprocessOptions);
 
-const encodeOptions: {
+const encodeOptions = {
   mozjpeg: {}, //an empty object means 'use default settings'
   jxl: {
     quality: 90,

src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts

@@ -34,6 +34,8 @@ export default class TwoUp extends HTMLElement {
    */
   private _everConnected = false;
 
+  private _resizeObserver?: ResizeObserver;
+
   constructor() {
     super();
     this._handle.className = styles.twoUpHandle;
@@ -45,13 +47,6 @@ export default class TwoUp extends HTMLElement {
       childList: true,
     });
 
-    // Watch for element size changes.
-    if ('ResizeObserver' in window) {
-      new ResizeObserver(() => this._resetPosition()).observe(this);
-    } else {
-      window.addEventListener('resize', () => this._resetPosition());
-    }
-
     // Watch for pointers on the handle.
     const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
       start: (_, event) => {
@@ -68,8 +63,6 @@ export default class TwoUp extends HTMLElement {
         );
       },
     });
-
-    window.addEventListener('keydown', (event) => this._onKeyDown(event));
   }
 
   connectedCallback() {
@@ -84,12 +77,23 @@ export default class TwoUp extends HTMLElement {
         }</svg>
       `}</div>`;
 
+    // Watch for element size changes.
+    this._resizeObserver = new ResizeObserver(() => this._resetPosition());
+    this._resizeObserver.observe(this);
+
+    window.addEventListener('keydown', this._onKeyDown);
+
     if (!this._everConnected) {
       this._resetPosition();
       this._everConnected = true;
     }
   }
 
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this._onKeyDown);
+    if (this._resizeObserver) this._resizeObserver.disconnect();
+  }
+
   attributeChangedCallback(name: string) {
     if (name === orientationAttr) {
       this._resetPosition();
@@ -97,7 +101,7 @@ export default class TwoUp extends HTMLElement {
   }
 
   // KeyDown event handler
-  private _onKeyDown(event: KeyboardEvent) {
+  private _onKeyDown = (event: KeyboardEvent) => {
     const target = event.target;
     if (target instanceof HTMLElement && target.closest('input')) return;
 
@@ -122,7 +126,7 @@ export default class TwoUp extends HTMLElement {
       this._relativePosition = this._position / bounds[dimensionAxis];
       this._setPosition();
     }
-  }
+  };
 
   private _resetPosition() {
     // Set the initial position of the handle.

src/client/lazy-app/Compress/index.tsx

@@ -377,6 +377,7 @@ export default class Compress extends Component<Props, State> {
 
   componentWillUnmount(): void {
     updateDocumentTitle({ loading: false });
+    this.widthQuery.removeListener(this.onMobileWidthChange);
     this.mainAbortController.abort();
     for (const controller of this.sideAbortControllers) {
       controller.abort();