From 5e14444b13427bad5b4d5c6d401eb5a9f83954fe Mon Sep 17 00:00:00 2001 From: Alexandre Desroches <69808183+alex-drocks@users.noreply.github.com> Date: Fri, 11 Jun 2021 09:36:30 -0400 Subject: [PATCH 1/3] Update README.md To close typo in example code as reported in issue #1051 --- libsquoosh/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libsquoosh/README.md b/libsquoosh/README.md index 6b9c0d2b..9692196d 100644 --- a/libsquoosh/README.md +++ b/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, From 828f9a5eebd172158d540d849546de73f3a9e343 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Tue, 15 Jun 2021 10:45:53 +0100 Subject: [PATCH 2/3] Fix memory leaks (#1054) --- .../Compress/Output/custom-els/TwoUp/index.ts | 33 ++++++++++++------- src/client/lazy-app/Compress/index.tsx | 1 + 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts index 6b5b5715..116a3fd9 100644 --- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts +++ b/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,28 @@ export default class TwoUp extends HTMLElement { } `}`; + // Watch for element size changes. + if ('ResizeObserver' in window) { + this._resizeObserver = new ResizeObserver(() => this._resetPosition()); + this._resizeObserver.observe(this); + } else { + window.addEventListener('resize', this._onResize); + } + + window.addEventListener('keydown', this._onKeyDown); + if (!this._everConnected) { this._resetPosition(); this._everConnected = true; } } + disconnectedCallback() { + window.removeEventListener('keydown', this._onKeyDown); + window.removeEventListener('resize', this._onResize); + if (this._resizeObserver) this._resizeObserver.disconnect(); + } + attributeChangedCallback(name: string) { if (name === orientationAttr) { this._resetPosition(); @@ -97,7 +106,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 +131,9 @@ export default class TwoUp extends HTMLElement { this._relativePosition = this._position / bounds[dimensionAxis]; this._setPosition(); } - } + }; + + private _onResize = () => this._resetPosition(); private _resetPosition() { // Set the initial position of the handle. diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx index 4793a5ee..a7d7464a 100644 --- a/src/client/lazy-app/Compress/index.tsx +++ b/src/client/lazy-app/Compress/index.tsx @@ -377,6 +377,7 @@ export default class Compress extends Component { componentWillUnmount(): void { updateDocumentTitle({ loading: false }); + this.widthQuery.removeListener(this.onMobileWidthChange); this.mainAbortController.abort(); for (const controller of this.sideAbortControllers) { controller.abort(); From 1d292468b07ef8af81c24b00f4ad0710ce0080e4 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Wed, 16 Jun 2021 10:13:46 +0100 Subject: [PATCH 3/3] Everything supports ResizeObserver now --- .../Compress/Output/custom-els/TwoUp/index.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts index 116a3fd9..24041912 100644 --- a/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts +++ b/src/client/lazy-app/Compress/Output/custom-els/TwoUp/index.ts @@ -78,12 +78,8 @@ export default class TwoUp extends HTMLElement { `}`; // Watch for element size changes. - if ('ResizeObserver' in window) { - this._resizeObserver = new ResizeObserver(() => this._resetPosition()); - this._resizeObserver.observe(this); - } else { - window.addEventListener('resize', this._onResize); - } + this._resizeObserver = new ResizeObserver(() => this._resetPosition()); + this._resizeObserver.observe(this); window.addEventListener('keydown', this._onKeyDown); @@ -95,7 +91,6 @@ export default class TwoUp extends HTMLElement { disconnectedCallback() { window.removeEventListener('keydown', this._onKeyDown); - window.removeEventListener('resize', this._onResize); if (this._resizeObserver) this._resizeObserver.disconnect(); } @@ -133,8 +128,6 @@ export default class TwoUp extends HTMLElement { } }; - private _onResize = () => this._resetPosition(); - private _resetPosition() { // Set the initial position of the handle. requestAnimationFrame(() => {