Skip to content

Commit 580faf5

Browse files
lolmauslolmaus
committed
Fix jumps of unstyled content and test freezes, credit to @simonihmig, fixes #44: address PR feedback
1 parent c7064fd commit 580faf5

File tree

5 files changed

+30
-32
lines changed

5 files changed

+30
-32
lines changed

‎addon/-private/modifier.ts‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
4242
sizesRatioDefault: Sizes = SIZES_RATIO_DEFAULT;
4343

4444
_element?: HTMLElement; // For some reason, this.element is not always available
45+
_firstCall = true;
4546

4647
// -------------------
4748
// Computed properties
@@ -542,16 +543,16 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
542543
: sizeObjectsSortedAsc[sizeObjectsSortedAsc.length - 1];
543544
}
544545

545-
__didResizeHandler(): void {
546-
this.applyAttributesToElement();
547-
this.callOnResize();
546+
_didResizeHandlerSync(): void {
547+
if (!this.args.named.isDisabled && !this.isDestroying && !this.isDestroyed) {
548+
this.applyAttributesToElement();
549+
this.callOnResize();
550+
}
548551
}
549552

550-
_didResizeHandler(): void {
553+
_didResizeHandlerRequestAnimationFrame(): void {
551554
window.requestAnimationFrame(() => {
552-
if (!this.args.named.isDisabled && !this.isDestroying && !this.isDestroyed) {
553-
this.__didResizeHandler();
554-
}
555+
this._didResizeHandlerSync();
555556
});
556557
}
557558

@@ -560,7 +561,7 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
560561
// -------------------
561562

562563
@action didResizeHandler(): void {
563-
debounceTask(this, '_didResizeHandler', this.debounce);
564+
debounceTask(this, '_didResizeHandlerRequestAnimationFrame', this.debounce);
564565
}
565566

566567
// -------------------
@@ -573,7 +574,7 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
573574

574575
this.resizeObserver.observe(this.element, this.didResizeHandler); // eslint-disable-line @typescript-eslint/unbound-method
575576

576-
this.__didResizeHandler(); // We want to run it as soon as possible to avoid a jump of unstyled content
577+
this._didResizeHandlerSync(); // We want to run it as soon as possible to avoid a jump of unstyled content
577578
}
578579

579580
didUpdateArguments(): void {

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@
6767
}
6868
},
6969
"dependencies": {
70-
"@ember/test-waiters": "^3.0.0",
7170
"ember-cli-babel": "^7.26.3",
7271
"ember-cli-htmlbars": "5.7.1",
7372
"ember-cli-typescript": "^4.2.1",

‎tests/integration/component-test.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ module('Integration | Component | element-query', function (hooks) {
4747
// eslint-disable-next-line @typescript-eslint/no-misused-promises
4848
test('calls the onResize callback', async function (this: TestContextCustom, assert) {
4949
let callCount = 0;
50+
let callCountOld = 0;
5051
this.callback = sinon.spy(() => callCount++);
5152

5253
await render(hbs`
@@ -64,12 +65,12 @@ module('Integration | Component | element-query', function (hooks) {
6465
m = 'Element is rendered';
6566
assert.ok(true, m);
6667

67-
await waitUntil(() => callCount === 1);
68+
await waitUntil(() => callCount > callCountOld);
6869

6970
m = 'Callback called once';
7071
assert.ok(true, m);
7172

72-
assert.deepEqual(this.callback.firstCall.args, [
73+
assert.deepEqual(this.callback.lastCall.args, [
7374
{
7475
element,
7576
width: 300,
@@ -106,14 +107,15 @@ module('Integration | Component | element-query', function (hooks) {
106107
},
107108
]);
108109

110+
callCountOld = callCount;
109111
element.style.width = '400px';
110112

111-
await waitUntil(() => callCount === 2);
113+
await waitUntil(() => callCount > callCountOld);
112114

113115
m = 'Callback called twice';
114116
assert.ok(true, m);
115117

116-
assert.deepEqual(this.callback.secondCall.args, [
118+
assert.deepEqual(this.callback.lastCall.args, [
117119
{
118120
element,
119121
width: 400,
@@ -186,6 +188,7 @@ module('Integration | Component | element-query', function (hooks) {
186188
// eslint-disable-next-line @typescript-eslint/no-misused-promises
187189
test('stops calling the onResize callback after updating isDisabled after rendering', async function (this: TestContextCustom, assert) {
188190
let callCount = 0;
191+
let callCountOld = 0;
189192
this.callback = sinon.spy(() => callCount++);
190193
this.set('isDisabled', false);
191194

@@ -205,7 +208,7 @@ module('Integration | Component | element-query', function (hooks) {
205208
m = 'Element is rendered';
206209
assert.ok(true, m);
207210

208-
await waitUntil(() => callCount === 1);
211+
await waitUntil(() => callCount > callCountOld);
209212

210213
m = 'Callback called once';
211214
assert.ok(true, m);
@@ -249,12 +252,13 @@ module('Integration | Component | element-query', function (hooks) {
249252

250253
this.set('isDisabled', true);
251254

255+
callCountOld = callCount;
252256
element.style.width = '400px';
253257

254258
await pause(500);
255259

256260
m = 'Call count';
257-
assert.equal(callCount, 1, m);
261+
assert.ok(callCount === callCountOld, m);
258262

259263
m = 'Attr `at-s` presence';
260264
assert.equal(element.getAttribute('at-s'), null, m);

‎tests/integration/modifier-test.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ module('Integration | Modifier | element-query', function (hooks) {
4949
// eslint-disable-next-line @typescript-eslint/no-misused-promises
5050
test('calls the onResize callback', async function (this: TestContextCustom, assert) {
5151
let callCount = 0;
52+
let callCountOld = 0;
5253
this.callback = sinon.spy(() => callCount++);
5354

5455
await render(hbs`
@@ -67,13 +68,13 @@ module('Integration | Modifier | element-query', function (hooks) {
6768
m = 'Element is rendered';
6869
assert.ok(true, m);
6970

70-
await waitUntil(() => callCount === 1);
71+
await waitUntil(() => callCount > callCountOld);
7172

7273
m = 'Callback called once';
7374
assert.ok(true, m);
7475

7576
sinon.assert.calledWithExactly(
76-
this.callback.firstCall,
77+
this.callback.lastCall,
7778
sinon.match({
7879
element,
7980
width: 300,
@@ -98,16 +99,17 @@ module('Integration | Modifier | element-query', function (hooks) {
9899
})
99100
);
100101

102+
callCountOld = callCount;
101103
element.style.width = '400px';
102104

103-
await waitUntil(() => callCount === 2);
105+
await waitUntil(() => callCount > callCountOld);
104106

105107
m = 'Callback called twice';
106108
assert.ok(true, m);
107109

108110
// prettier-ignore
109111
sinon.assert.calledWithMatch(
110-
this.callback.secondCall,
112+
this.callback.lastCall,
111113
{
112114
element,
113115
width: 400,
@@ -168,6 +170,7 @@ module('Integration | Modifier | element-query', function (hooks) {
168170
// eslint-disable-next-line @typescript-eslint/no-misused-promises
169171
test('stops calling the onResize callback after updating isDisabled after rendering', async function (this: TestContextCustom, assert) {
170172
let callCount = 0;
173+
let callCountOld = 0;
171174
this.callback = sinon.spy(() => callCount++);
172175
this.set('isDisabled', false);
173176

@@ -187,7 +190,7 @@ module('Integration | Modifier | element-query', function (hooks) {
187190
m = 'Element is rendered';
188191
assert.ok(true, m);
189192

190-
await waitUntil(() => callCount === 1);
193+
await waitUntil(() => callCount > callCountOld);
191194

192195
m = 'Callback called once';
193196
assert.ok(true, m);
@@ -220,12 +223,13 @@ module('Integration | Modifier | element-query', function (hooks) {
220223

221224
this.set('isDisabled', true);
222225

226+
callCountOld = callCount;
223227
element.style.width = '400px';
224228

225229
await pause(500);
226230

227231
m = 'Call count';
228-
assert.equal(callCount, 1, m);
232+
assert.ok(callCount === callCountOld, m);
229233

230234
m = 'Attr `at-s` presence';
231235
assert.equal(element.getAttribute('at-s'), null, m);

‎yarn.lock‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1826,16 +1826,6 @@
18261826
ember-cli-version-checker "^5.1.2"
18271827
semver "^7.3.2"
18281828

1829-
"@ember/test-waiters@^3.0.0":
1830-
version "3.0.0"
1831-
resolved "https://registry.yarnpkg.com/@ember/test-waiters/-/test-waiters-3.0.0.tgz#b66a35cd5b78ec3c296a6f5f5fb3852780a5d3c8"
1832-
integrity sha512-z6+gIlq/rXLKroWv2wxAoiiLtgSOGQFCw6nUufERausV+jLnA7CYbWwzEo5R7XaOejSDpgA5d6haXIBsD5j0oQ==
1833-
dependencies:
1834-
calculate-cache-key-for-tree "^2.0.0"
1835-
ember-cli-babel "^7.26.6"
1836-
ember-cli-version-checker "^5.1.2"
1837-
semver "^7.3.5"
1838-
18391829
"@embroider/core@0.33.0", "@embroider/core@^0.33.0":
18401830
version "0.33.0"
18411831
resolved "https://registry.yarnpkg.com/@embroider/core/-/core-0.33.0.tgz#0fb1752d6e34ea45368e65c42e13220a57ffae76"

0 commit comments

Comments
 (0)