Adds resize observer functionality #5963

jacwright · 2021-02-04T19:55:03Z

Implements ResizerObserver per @Rich-Harris #5524 (comment)

Done poorly, looking for guidance on doing this correctly or for someone else to take it on.

I started implementing this but it is stretching out too long. I haven't been in the code-base for a while and to add this a parameter needs to be added to the resize_observer function (the observer entries) so they can be set in the binding. I've got it working, but I believe my implementation is not clean. I wanted to publish what I had to save another time, but if I'm close then I'll fix it up with your direction.

//CC @pushkine @iamricard

@Rich-Harris

Implements ResizerObserver per @Rich-Harris sveltejs#5524 (comment) Done poorly, looking for guidance on doing this correctly or for someone else to take it on.

jacwright · 2021-02-26T20:39:08Z

If nobody has a better way to implement this, should we call it good? Tests are passing. 🙂

tanhauhau · 2021-02-27T19:34:31Z

looks okay to me in general. is there a test for this? eg: for bind:borderBoxSize etc

src/compiler/utils/patterns.ts

dummdidumm

Not sure what happened with that package.lock.json but I think its changed contents need to be omitted from this PR

jacwright · 2021-03-03T23:32:59Z

Not sure what happened with that package.lock.json but I think its changed contents need to be omitted from this PR

Yeah, I reverted this. Good call. Thanks!

dummdidumm · 2021-07-12T07:07:03Z

This would likely be a solution to #4233 and #6127

RaiVaibhav · 2021-09-30T16:33:56Z

Hi Team, thanks for the svelte 🙌 and for everything.

I am new to the codebase, can anyone suggest to me what else needs to be done, so that I can take this MR from here and update the PR.

I have added the test on top of @jacwright commits and rebased it locally, @dummdidumm if there is no issue can I push that commit here for your review?

205g0 · 2021-10-22T00:42:17Z

Any news on this?

bluwy · 2021-10-22T02:17:02Z

@205g0 I've planned to bring this up in the next maintainer's meeting.

src/compiler/compile/nodes/Binding.ts

src/runtime/internal/dom.ts

bluwy · 2022-01-19T03:38:40Z

Just pushed some changes, but still a WIP. The bindings doesn't seem to work yet.

bluwy · 2022-01-25T07:08:13Z

Found an issue with resize observer bindings. If we're using contentRect, contentBoxSize, borderBoxSize, devicePixelContentBoxSize, these values are only retrieved after the box is resized, or at least after the element is mounted. Hence, we can't have an initial value for these in render time, which is unexpected compared to bind:clientWidth and bind:clientHeight. Not sure how to handle this yet.

jacwright · 2022-01-28T05:21:14Z

I read on MDN that contentRect may be deprecated in the future. Perhaps we leave that one out?

We could have 0 initial values until mount. clientWidth is 0 before mounting. We can set { inlineSize: 0, blockSize: 0 } as the initial value until mounting triggers the resize observer. And we can document it if needed. What do you think @bluwy?

And thank you for helping @bluwy!

bluwy · 2022-01-29T15:37:23Z

I read on MDN that contentRect may be deprecated in the future. Perhaps we leave that one out?

I saw that too but left it in since it has better browser support, but then it would be confusing to coexist with contentBoxSize. I can remove contentRect for now and we can decide later if it's desirable.

We could have 0 initial values until mount. clientWidth is 0 before mounting. We can set { inlineSize: 0, blockSize: 0 } as the initial value until mounting triggers the resize observer. And we can document it if needed. What do you think @bluwy?

I'm not sure if this is safe since ResizeObserverSize has a constructor and us shimming it with n object could be risky. I think this would be more important for hydration since before mount (hydrate phase), the element already exist and it has a width and height. I believe the same goes to clientWidth too, which should be non-zero in the hydration-phase. (Untested)

I'll bring this up in the maintainer's meeting.

bluwy · 2022-01-30T12:30:24Z

Update from the last maintainer's meeting, we had decided to leave the variable as undefined initially instead of shimming a default value. This would keep in line with how the "standards" work, though deviates from the behaviour of bind:clientWidth and bind:clientHeight, hence we should document this.

What's left on this PR is to clean it up, tests, and docs.

tanhauhau

and yes, would love to see a unit test for this

tanhauhau · 2022-04-12T14:59:05Z

src/compiler/compile/render_dom/wrappers/Element/index.ts

+				if (renderer.options.dev) {
+					block.chunks.mount.push(
+						b`${resize_observer} = @add_resize_observer_dev(${this.var}, ${callee}, { box: "${box}" });`
+					);
+				} else {
+					block.chunks.mount.push(
+						b`${resize_observer} = @add_resize_observer(${this.var}, ${callee}, { box: "${box}" });`
+					);
+				}


you dont have to do this here, any runtime function suffixed with _dev will be automatically used when the dev mode is true

Suggested change

if (renderer.options.dev) {

block.chunks.mount.push(

b`${resize_observer} = @add_resize_observer_dev(${this.var}, ${callee}, { box: "${box}" });`

);

} else {

block.chunks.mount.push(

b`${resize_observer} = @add_resize_observer(${this.var}, ${callee}, { box: "${box}" });`

);

}

block.chunks.mount.push(

b`${resize_observer} = @add_resize_observer(${this.var}, ${callee}, { box: "${box}" });`

);

tanhauhau · 2022-04-12T15:00:52Z

src/runtime/internal/dom.ts

+	observer.observe(node, opts);
+	return () => observer.disconnect();
+}
+


i wonder if we could / should reuse the ResizeObserver instance

bluwy · 2022-04-12T15:03:50Z

Thanks for the review @tanhauhau. I haven't been following up on this PR as well, so it has been stale for quite a while now. I'll try to pick it up soon, or if anyone feels like tackling this, feel free too.

dummdidumm · 2022-06-04T13:45:01Z

Closes #7583

searleser97 · 2022-10-28T17:43:05Z

are there plans to ever merge this PR? It looks like it would if the weird behavior of adding position: relative to style of element. #4776

bluwy · 2022-10-29T05:33:02Z

@searleser97 Feel free to pick up the remaining work to complete the PR. There were discussions above that weren't implemented yet, and I haven't had the need for this feature to continue working on it 😬

dummdidumm · 2023-03-14T15:04:56Z

Closing in favor #8022

Implements ResizeObserver bindings: #5524 (comment) Continuation of: #5963 Related to #7583 --------- Co-authored-by: Simon H <[email protected]>

Adds resize observer functionality

6705c53

Implements ResizerObserver per @Rich-Harris sveltejs#5524 (comment) Done poorly, looking for guidance on doing this correctly or for someone else to take it on.

benmccann marked this pull request as draft February 4, 2021 19:58

Merge branch 'master' into resize-observer

5aba3ee

dummdidumm reviewed Feb 27, 2021

View reviewed changes

src/compiler/utils/patterns.ts Outdated Show resolved Hide resolved

dummdidumm reviewed Feb 27, 2021

View reviewed changes

jacwright added 2 commits March 3, 2021 16:30

Merge branch 'master' into resize-observer

a6a5bc7

Reverting package-lock.json to master version

2323059

jacwright marked this pull request as ready for review March 3, 2021 23:33

jacwright marked this pull request as draft March 3, 2021 23:34

bluwy mentioned this pull request Oct 7, 2021

Dimension bindings intermittently add inline style="position:relative;" in Firefox #4776

Closed

Merge branch 'master' into resize-observer

1f3205f

Rich-Harris marked this pull request as ready for review January 8, 2022 17:02

Rich-Harris reviewed Jan 8, 2022

View reviewed changes

src/compiler/compile/nodes/Binding.ts Outdated Show resolved Hide resolved

Update src/compiler/compile/nodes/Binding.ts

1572a47

Rich-Harris reviewed Jan 8, 2022

View reviewed changes

src/runtime/internal/dom.ts Outdated Show resolved Hide resolved

tanhauhau mentioned this pull request Jan 8, 2022

Use ResizeObserver instead of iframes if available #5524

Closed

bluwy added 6 commits January 16, 2022 23:36

Merge branch 'master' into pr/jacwright/5963

6d8515c

fix sizing regex

45221be

throw error for unsupported browser in dev

fb529ef

use dev variant

1e9b3fc

fix ts errors

8a1a62e

fix invalid binding error report

3317eb3

bluwy marked this pull request as draft January 19, 2022 03:38

bluwy added 5 commits January 24, 2022 13:34

remove has_arg

1ac349f

add resize observer options

d5947a2

split binding events

ede723f

typo

8783ad2

ts typo

f08ee39

Prinzhorn mentioned this pull request Feb 9, 2022

clientWidth clientHeight offsetWidth offsetHeight cause block to be raised unexpectedly #7236

Closed

tanhauhau requested changes Apr 12, 2022

View reviewed changes

dummdidumm mentioned this pull request Jun 4, 2022

Improve performance of bind:clientWidth using ResizeObserver api #7583

Closed

dummdidumm mentioned this pull request Nov 10, 2022

[fix] ⚡️ Use RO singleton instead of iframe if supported #8019

Closed

TheCymaera mentioned this pull request Nov 10, 2022

feat: add support for resize observer bindings #8022

Merged

josdejong mentioned this pull request Dec 8, 2022

fix: ensure bind:offsetHeight updates #8096

Merged

mhkeller mentioned this pull request Feb 10, 2023

Switch to resize observer instead of svelte's bind:clientWidth bind:clientHeight? mhkeller/layercake#114

Closed

dummdidumm closed this Mar 14, 2023

dummdidumm added a commit that referenced this pull request Apr 11, 2023

feat: add support for resize observer bindings (#8022)

0adc09d

Implements ResizeObserver bindings: #5524 (comment) Continuation of: #5963 Related to #7583 --------- Co-authored-by: Simon H <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds resize observer functionality #5963

Adds resize observer functionality #5963

jacwright commented Feb 4, 2021

jacwright commented Feb 26, 2021

tanhauhau commented Feb 27, 2021 •

edited

Loading

dummdidumm left a comment

jacwright commented Mar 3, 2021

dummdidumm commented Jul 12, 2021

RaiVaibhav commented Sep 30, 2021

205g0 commented Oct 22, 2021

bluwy commented Oct 22, 2021

bluwy commented Jan 19, 2022

bluwy commented Jan 25, 2022

jacwright commented Jan 28, 2022 •

edited

Loading

bluwy commented Jan 29, 2022 •

edited

Loading

bluwy commented Jan 30, 2022

tanhauhau left a comment

tanhauhau Apr 12, 2022

tanhauhau Apr 12, 2022

bluwy commented Apr 12, 2022

dummdidumm commented Jun 4, 2022

searleser97 commented Oct 28, 2022

bluwy commented Oct 29, 2022

dummdidumm commented Mar 14, 2023

Adds resize observer functionality #5963

Adds resize observer functionality #5963

Conversation

jacwright commented Feb 4, 2021

jacwright commented Feb 26, 2021

tanhauhau commented Feb 27, 2021 • edited Loading

dummdidumm left a comment

Choose a reason for hiding this comment

jacwright commented Mar 3, 2021

dummdidumm commented Jul 12, 2021

RaiVaibhav commented Sep 30, 2021

205g0 commented Oct 22, 2021

bluwy commented Oct 22, 2021

bluwy commented Jan 19, 2022

bluwy commented Jan 25, 2022

jacwright commented Jan 28, 2022 • edited Loading

bluwy commented Jan 29, 2022 • edited Loading

bluwy commented Jan 30, 2022

tanhauhau left a comment

Choose a reason for hiding this comment

tanhauhau Apr 12, 2022

Choose a reason for hiding this comment

tanhauhau Apr 12, 2022

Choose a reason for hiding this comment

bluwy commented Apr 12, 2022

dummdidumm commented Jun 4, 2022

searleser97 commented Oct 28, 2022

bluwy commented Oct 29, 2022

dummdidumm commented Mar 14, 2023

tanhauhau commented Feb 27, 2021 •

edited

Loading

jacwright commented Jan 28, 2022 •

edited

Loading

bluwy commented Jan 29, 2022 •

edited

Loading