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

Implements ResizeObserver bindings: #5524 (comment)
Continuation of: #5963
Related to #7583

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

elements/index.d.ts

@@ -546,6 +546,11 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	 */
 	'bind:innerText'?: string | undefined | null;
 
+	readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+	readonly 'bind:contentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:borderBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+	readonly 'bind:devicePixelContentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4
+
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
 	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;

src/compiler/compile/nodes/Binding.ts

@@ -3,7 +3,7 @@ import get_object from '../utils/get_object';
 import Expression from './shared/Expression';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
-import { regex_dimensions } from '../../utils/patterns';
+import { regex_dimensions, regex_box_size } from '../../utils/patterns';
 import { Node as ESTreeNode } from 'estree';
 import { TemplateNode } from '../../interfaces';
 import Element from './Element';
@@ -92,6 +92,7 @@ export default class Binding extends Node {
 
 		this.is_readonly =
 			regex_dimensions.test(this.name) ||
+			regex_box_size.test(this.name) ||
 			(isElement(parent) &&
 				((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
 					(parent.name === 'input' && type === 'file')) /* TODO others? */);

src/compiler/compile/nodes/Element.ts

@@ -12,7 +12,7 @@ import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
 import { is_name_contenteditable, get_contenteditable_attr } from '../utils/contenteditable';
-import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character } from '../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_non_whitespace_character, regex_box_size } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
 import Let from './Let';
@@ -1090,7 +1090,10 @@ export default class Element extends Node {
 				} else if (contenteditable && !contenteditable.is_static) {
 					return component.error(contenteditable, compiler_errors.dynamic_contenteditable_attribute);
 				}
-			} else if (name !== 'this') {
+			} else if (
+				name !== 'this' &&
+				!regex_box_size.test(name)
+			) {
 				return component.error(binding, compiler_errors.invalid_binding(binding.name));
 			}
 		});

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

@@ -11,6 +11,7 @@ import { Node, Identifier } from 'estree';
 import add_to_set from '../../../utils/add_to_set';
 import mark_each_block_bindings from '../shared/mark_each_block_bindings';
 import handle_select_value_binding from './handle_select_value_binding';
+import { regex_box_size } from '../../../../utils/patterns';
 
 export default class BindingWrapper {
 	node: Binding;
@@ -455,7 +456,12 @@ function get_value_from_dom(
 		return x`$$value`;
 	}
 
-	// <select bind:value='selected'>
+	// <div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>
+	if (regex_box_size.test(name)) {
+		return x`@ResizeObserverSingleton.entries.get(this)?.${name}`;
+	}
+
+	// <select bind:value='selected>
 	if (node.name === 'select') {
 		return node.get_static_attribute_value('multiple') === true ?
 			x`@select_multiple_value(this)` :

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

@@ -12,7 +12,7 @@ import { namespaces } from '../../../../utils/namespaces';
 import AttributeWrapper from './Attribute';
 import StyleAttributeWrapper from './StyleAttribute';
 import SpreadAttributeWrapper from './SpreadAttribute';
-import { regex_dimensions, regex_starts_with_newline, regex_backslashes } from '../../../../utils/patterns';
+import { regex_dimensions, regex_starts_with_newline, regex_backslashes, regex_border_box_size, regex_content_box_size, regex_device_pixel_content_box_size, regex_content_rect } from '../../../../utils/patterns';
 import Binding from './Binding';
 import add_to_set from '../../../utils/add_to_set';
 import { add_event_handler } from '../shared/add_event_handlers';
@@ -64,11 +64,29 @@ const events = [
 		filter: (node: Element, _name: string) =>
 			node.name === 'input' && node.get_static_attribute_value('type') === 'range'
 	},
+	// resize events
 	{
 		event_names: ['elementresize'],
 		filter: (_node: Element, name: string) =>
 			regex_dimensions.test(name)
 	},
+	{
+		event_names: ['elementresizecontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_content_rect.test(name) ?? regex_content_box_size.test(name)
+	},
+
+	{
+		event_names: ['elementresizeborderbox'],
+		filter: (_node: Element, name: string) => 
+			regex_border_box_size.test(name)
+	},
+
+	{
+		event_names: ['elementresizedevicepixelcontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_device_pixel_content_box_size.test(name)
+	},
 	// media events
 	{
 		event_names: ['timeupdate'],
@@ -747,13 +765,19 @@ export default class ElementWrapper extends Wrapper {
 		`);
 
 		binding_group.events.forEach(name => {
-			if (name === 'elementresize') {
+			const resizeListenerFunctions = {
-				// special case
+				elementresize: 'add_iframe_resize_listener',
+				elementresizecontentbox: 'resize_observer_content_box.observe',
+				elementresizeborderbox: 'resize_observer_border_box.observe',
+				elementresizedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe'
+			};
+
+			if (name in resizeListenerFunctions) {
 				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
 				block.add_variable(resize_listener);
 
 				block.chunks.mount.push(
-					b`${resize_listener} = @add_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+					b`${resize_listener} = @${resizeListenerFunctions[name]}(${this.var}, ${callee}.bind(${this.var}));`
 				);
 
 				block.chunks.destroy.push(

src/compiler/utils/patterns.ts

@@ -22,3 +22,9 @@ export const regex_ends_with_underscore = /_$/;
 export const regex_invalid_variable_identifier_characters = /[^a-zA-Z0-9_$]/g;
 
 export const regex_dimensions = /^(?:offset|client)(?:Width|Height)$/;
+
+export const regex_content_rect = /^(?:contentRect)$/;
+export const regex_content_box_size = /^(?:contentBoxSize)$/;
+export const regex_border_box_size = /^(?:borderBoxSize)$/;
+export const regex_device_pixel_content_box_size = /^(?:devicePixelContentBoxSize)$/;
+export const regex_box_size = /^(?:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize)$/;

src/runtime/internal/ResizeObserverSingleton.ts

@@ -0,0 +1,67 @@
+/**
+ * Resize observer singleton.
+ * One listener per element only!
+ * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ */
+export class ResizeObserverSingleton {
+	constructor(readonly options?: ResizeObserverOptions) {}
+
+	observe(element: Element, listener: Listener) {
+		this._listeners.set(element, listener);
+		this._getObserver().observe(element, this.options);
+		return () => {
+			this._listeners.delete(element);
+			this._observer.unobserve(element); // this line can probably be removed
+		};
+	}
+
+	static readonly entries: WeakMap<Element, ResizeObserverEntry> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+
+	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+	private _observer?: ResizeObserver;
+	private _getObserver() {
+		return this._observer ?? (this._observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				ResizeObserverSingleton.entries.set(entry.target, entry);
+				this._listeners.get(entry.target)?.(entry);
+			}
+		}));
+	}
+}
+
+type Listener = (entry: ResizeObserverEntry)=>any;
+
+// TODO: Remove this
+interface ResizeObserverSize {
+    readonly blockSize: number;
+    readonly inlineSize: number;
+}
+
+interface ResizeObserverEntry {
+    readonly borderBoxSize: readonly ResizeObserverSize[];
+    readonly contentBoxSize: readonly ResizeObserverSize[];
+    readonly contentRect: DOMRectReadOnly;
+    readonly devicePixelContentBoxSize: readonly ResizeObserverSize[];
+    readonly target: Element;
+}
+
+type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
+
+interface ResizeObserverOptions {
+    box?: ResizeObserverBoxOptions;
+}
+
+interface ResizeObserver {
+    disconnect(): void;
+    observe(target: Element, options?: ResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
+
+interface ResizeObserverCallback {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+
+declare let ResizeObserver: {
+    prototype: ResizeObserver;
+    new(callback: ResizeObserverCallback): ResizeObserver;
+};

src/runtime/internal/dom.ts

@@ -1,3 +1,4 @@
+import { ResizeObserverSingleton } from './ResizeObserverSingleton';
 import { contenteditable_truthy_values, has_prop } from './utils';
 
 // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
@@ -698,7 +699,7 @@ export function is_crossorigin() {
 	return crossorigin;
 }
 
-export function add_resize_listener(node: HTMLElement, fn: () => void) {
+export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) {
 	const computed_style = getComputedStyle(node);
 
 	if (computed_style.position === 'static') {
@@ -746,6 +747,11 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	};
 }
 
+export const resize_observer_content_box = new ResizeObserverSingleton({ box: 'content-box' });
+export const resize_observer_border_box = new ResizeObserverSingleton({ box: 'border-box' });
+export const resize_observer_device_pixel_content_box = new ResizeObserverSingleton({ box: 'device-pixel-content-box' });
+export { ResizeObserverSingleton };
+
 export function toggle_class(element, name, toggle) {
 	element.classList[toggle ? 'add' : 'remove'](name);
 }