From 2cd5c4ca0154bc649070a0295bb1a007f6807049 Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Mon, 13 Jun 2022 23:51:04 +0100 Subject: [PATCH 1/5] - use resize observer service instead of window resize --- packages/ember-fast-marquee/package.json | 3 ++- .../ember-fast-marquee/src/modifiers/marquee.ts | 17 ++++++++++------- yarn.lock | 8 ++++++++ 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/ember-fast-marquee/package.json b/packages/ember-fast-marquee/package.json index d82eaa1..be6857f 100644 --- a/packages/ember-fast-marquee/package.json +++ b/packages/ember-fast-marquee/package.json @@ -31,7 +31,8 @@ }, "dependencies": { "@embroider/addon-shim": "^1.7.1", - "ember-modifier": "^3.2.7" + "ember-modifier": "^3.2.7", + "ember-resize-observer-service": "^1.1.0" }, "devDependencies": { "@babel/core": "^7.18.2", diff --git a/packages/ember-fast-marquee/src/modifiers/marquee.ts b/packages/ember-fast-marquee/src/modifiers/marquee.ts index 01c135e..f886006 100644 --- a/packages/ember-fast-marquee/src/modifiers/marquee.ts +++ b/packages/ember-fast-marquee/src/modifiers/marquee.ts @@ -1,6 +1,7 @@ import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier'; import { registerDestructor } from '@ember/destroyable'; import type component from '../components/marquee'; +import { service } from '@ember/service'; interface MarqueeModifierSignature { Args: { @@ -23,7 +24,7 @@ interface MarqueeModifierSignature { function cleanup(instance: MarqueeModifier): void { if (instance.boundFn) { - window.removeEventListener('resize', instance.boundFn); + instance.resizeObserver.unobserve(instance.containerEl, instance.boundFn); } if (instance.listeningForResize) instance.listeningForResize = false; } @@ -31,8 +32,11 @@ function cleanup(instance: MarqueeModifier): void { type MarqueeState = NamedArgs; export default class MarqueeModifier extends Modifier { + @service resizeObserver!: any; + boundFn?: (() => void) | null = null; component?: component; + containerEl?: HTMLDivElement; delay?: MarqueeState['delay']; direction?: MarqueeState['direction']; fillRow?: MarqueeState['fillRow']; @@ -138,21 +142,20 @@ export default class MarqueeModifier extends Modifier this.play = play; this.rgbaGradientColor = rgbaGradientColor; this.speed = speed; - - const containerEl = element; + this.containerEl = element; const marqueeEl = ( - containerEl.querySelector('.' + marqueeSelector) + this.containerEl.querySelector('.' + marqueeSelector) ); - this.measureAndSetCSSVariables(containerEl, marqueeEl); + this.measureAndSetCSSVariables(this.containerEl, marqueeEl); this.boundFn = this.measureAndSetCSSVariables.bind( this, - containerEl, + this.containerEl, marqueeEl ); if (!this.listeningForResize) { - window.addEventListener('resize', this.boundFn); + this.resizeObserver.observe(this.containerEl, this.boundFn); this.listeningForResize = true; } } diff --git a/yarn.lock b/yarn.lock index 705a431..39d1a9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7245,6 +7245,14 @@ ember-qunit@^5.1.5: silent-error "^1.1.1" validate-peer-dependencies "^1.2.0" +ember-resize-observer-service@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/ember-resize-observer-service/-/ember-resize-observer-service-1.1.0.tgz#62729a9de656e8eade4b3e65bd9999840dc44f65" + integrity sha512-/vbfxtHSyOGSNdjPKL8X3SyvUnYo3z88sJtD/bLJ0ZGhqVPaXCmtSkLyr/Fh75ckJDixRFxK4i4zEUSlrbk0PA== + dependencies: + ember-cli-babel "^7.26.6" + ember-cli-htmlbars "^5.7.1" + ember-resolver@^8.0.3: version "8.0.3" resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-8.0.3.tgz#40f243aa58281bf195c695fe84a6b291e204690a" From eb301bbd227baac1f8f33fe7fca8444644d18fda Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Tue, 14 Jun 2022 00:44:31 +0100 Subject: [PATCH 2/5] trying to fix tests --- package.json | 4 ++-- .../ember-fast-marquee/src/components/index.d.ts | 13 +++++++++++++ .../ember-fast-marquee/src/modifiers/marquee.ts | 5 +++-- packages/test-app/package.json | 9 ++++++--- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index f43b06f..026af60 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ], "scripts": { "prepare": "yarn workspace ember-fast-marquee run prepare", - "start": "KEEP_DATA_TEST_SELECOTRS=1 npm-run-all --parallel start:*", + "start": "KEEP_DATA_TEST_SELECTORS=1 npm-run-all --parallel start:*", "start:addon": "yarn workspace ember-fast-marquee run start", "start:test-app": "yarn workspace test-app run start", "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", @@ -18,7 +18,7 @@ "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:fix:*", "lint:fix:addon": "yarn workspace ember-fast-marquee run lint:fix", "lint:fix:test-app": "yarn workspace test-app run lint:fix", - "test": "npm-run-all --aggregate-output --continue-on-error --parallel \"test:!(watch)\"", + "test": "KEEP_DATA_TEST_SELECTORS=1 yarn prepare && npm-run-all --aggregate-output --continue-on-error --parallel \"test:!(watch)\"", "test:watch": "npm-run-all --aggregate-output --continue-on-error --parallel test:watch:*", "test:test-app": "yarn workspace test-app run test", "test:watch:test-app": "yarn workspace test-app run test:watch", diff --git a/packages/ember-fast-marquee/src/components/index.d.ts b/packages/ember-fast-marquee/src/components/index.d.ts index a1fdb07..954db60 100644 --- a/packages/ember-fast-marquee/src/components/index.d.ts +++ b/packages/ember-fast-marquee/src/components/index.d.ts @@ -2,3 +2,16 @@ declare module '*.css' { const styles: { [className: string]: string }; export default styles; } + +declare module 'ember-resize-observer-service/services/resize-observer' { + import Service from '@ember/service'; + + export default class extends Service { + isEnabled: boolean; + observe(element: HTMLDivElement, callback: () => void): void; + unobserve(element: HTMLDivElement, callback: () => void): void; + clear(): void; + willDestroy(): void; + handleResize(entries: ResizeObserverEntry[]): void; + } +} diff --git a/packages/ember-fast-marquee/src/modifiers/marquee.ts b/packages/ember-fast-marquee/src/modifiers/marquee.ts index f886006..0df06ac 100644 --- a/packages/ember-fast-marquee/src/modifiers/marquee.ts +++ b/packages/ember-fast-marquee/src/modifiers/marquee.ts @@ -2,6 +2,7 @@ import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier'; import { registerDestructor } from '@ember/destroyable'; import type component from '../components/marquee'; import { service } from '@ember/service'; +import type ResizeObserverService from 'ember-resize-observer-service/services/resize-observer'; interface MarqueeModifierSignature { Args: { @@ -32,11 +33,11 @@ function cleanup(instance: MarqueeModifier): void { type MarqueeState = NamedArgs; export default class MarqueeModifier extends Modifier { - @service resizeObserver!: any; + @service resizeObserver!: ResizeObserverService; boundFn?: (() => void) | null = null; component?: component; - containerEl?: HTMLDivElement; + containerEl!: HTMLDivElement; delay?: MarqueeState['delay']; direction?: MarqueeState['direction']; fillRow?: MarqueeState['fillRow']; diff --git a/packages/test-app/package.json b/packages/test-app/package.json index f67b158..432634a 100644 --- a/packages/test-app/package.json +++ b/packages/test-app/package.json @@ -11,7 +11,7 @@ "test": "tests" }, "scripts": { - "build": "ember build --environment=production", + "build": "KEEP_DATA_TEST_SELECTORS=1 ember build --environment=production", "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix", "lint:hbs": "ember-template-lint .", @@ -20,8 +20,8 @@ "lint:js:fix": "eslint . --fix", "start": "ember serve", "test": "npm-run-all lint \"test:!(watch)\"", - "test:ember": "ember test", - "test:watch": "ember test --server" + "test:ember": "KEEP_DATA_TEST_SELECTORS=1 ember test", + "test:watch": "KEEP_DATA_TEST_SELECTORS=1 ember test --server" }, "devDependencies": { "@ember/optional-features": "^2.0.0", @@ -70,5 +70,8 @@ }, "ember": { "edition": "octane" + }, + "dependencies": { + "ember-resize-observer-service": "^1.1.0" } } From afa8c88a1edafd53d22070ead8763ff8097bda1e Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Tue, 14 Jun 2022 01:44:12 +0100 Subject: [PATCH 3/5] tweaks --- packages/test-app/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/test-app/package.json b/packages/test-app/package.json index 432634a..a94acba 100644 --- a/packages/test-app/package.json +++ b/packages/test-app/package.json @@ -11,7 +11,7 @@ "test": "tests" }, "scripts": { - "build": "KEEP_DATA_TEST_SELECTORS=1 ember build --environment=production", + "build": "ember build --environment=production", "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix", "lint:hbs": "ember-template-lint .", @@ -20,8 +20,8 @@ "lint:js:fix": "eslint . --fix", "start": "ember serve", "test": "npm-run-all lint \"test:!(watch)\"", - "test:ember": "KEEP_DATA_TEST_SELECTORS=1 ember test", - "test:watch": "KEEP_DATA_TEST_SELECTORS=1 ember test --server" + "test:ember": "ember test", + "test:watch": "ember test --server" }, "devDependencies": { "@ember/optional-features": "^2.0.0", From 6b38f1598122ae4341747822131213394d694cce Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Tue, 14 Jun 2022 01:46:32 +0100 Subject: [PATCH 4/5] remove ember-resize-observer as dep of test-app --- packages/test-app/package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/test-app/package.json b/packages/test-app/package.json index a94acba..f67b158 100644 --- a/packages/test-app/package.json +++ b/packages/test-app/package.json @@ -70,8 +70,5 @@ }, "ember": { "edition": "octane" - }, - "dependencies": { - "ember-resize-observer-service": "^1.1.0" } } From d151d6c5f24cc47f0759c7854b29100e11a4f5ec Mon Sep 17 00:00:00 2001 From: Liam Potter Date: Tue, 14 Jun 2022 02:01:14 +0100 Subject: [PATCH 5/5] use inject for service to support older embers --- packages/ember-fast-marquee/src/modifiers/marquee.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ember-fast-marquee/src/modifiers/marquee.ts b/packages/ember-fast-marquee/src/modifiers/marquee.ts index 0df06ac..e19f48a 100644 --- a/packages/ember-fast-marquee/src/modifiers/marquee.ts +++ b/packages/ember-fast-marquee/src/modifiers/marquee.ts @@ -1,7 +1,7 @@ import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier'; import { registerDestructor } from '@ember/destroyable'; import type component from '../components/marquee'; -import { service } from '@ember/service'; +import { inject as service } from '@ember/service'; import type ResizeObserverService from 'ember-resize-observer-service/services/resize-observer'; interface MarqueeModifierSignature {