feat: add support for resize observer bindings

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';
@@ -89,6 +89,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

@@ -11,7 +11,7 @@ import StyleDirective from './StyleDirective';
 import Text from './Text';
 import { namespaces } from '../../utils/namespaces';
 import map_children from './shared/map_children';
-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, regex_border_box_size, regex_content_box_size } from '../../utils/patterns';
 import fuzzymatch from '../../utils/fuzzymatch';
 import list from '../../utils/list';
 import Let from './Let';
@@ -907,7 +907,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.js';
 
 export default class BindingWrapper {
 	node: Binding;
@@ -413,6 +414,17 @@ function get_value_from_dom(
 		return x`$$value`;
 	}
 
+	// <div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>
+	if (regex_box_size.test(name)) {
+		const functionName = {
+			"contentRect": "get_content_rect",
+			"contentBoxSize": "get_content_box_size",
+			"borderBoxSize": "get_border_box_size",
+			"devicePixelContentBoxSize": "get_device_pixel_content_box_size",
+		}
+		return x`@${functionName}(this)`;
+	}
+
 	// <select bind:value='selected>
 	if (node.name === 'select') {
 		return node.get_static_attribute_value('multiple') === true ?

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 } 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';
@@ -70,6 +70,22 @@ const events = [
 			regex_dimensions.test(name)
 	},
 
+	{
+		event_names: ['elementresizeobserveborderbox'],
+		filter: (_node: Element, name: string) =>
+			regex_border_box_size.test(name)
+	},
+	{
+		event_names: ['elementresizeobservecontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_content_box_size.test(name)
+	},
+	{
+		event_names: ['elementresizeobservedevicepixelcontentbox'],
+		filter: (_node: Element, name: string) =>
+			regex_device_pixel_content_box_size.test(name)
+	},
+
 	// media events
 	{
 		event_names: ['timeupdate'],
@@ -688,13 +704,19 @@ export default class ElementWrapper extends Wrapper {
 		`);
 
 		binding_group.events.forEach(name => {
-			if (name === 'elementresize') {
-				// special case
+			if (name.startsWith('elementresize')) {
 				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
 				block.add_variable(resize_listener);
 
+				const functionName = ({
+					"elementresize": "add_iframe_resize_listener",
+					"elementresizeobservecontentbox": "add_content_box_observer",
+					"elementresizeobserveborderbox": "add_border_box_observer",
+					"elementresizeobservedevicepixelcontentbox": "add_device_pixel_content_box_observer",
+				})[name];
+
 				block.chunks.mount.push(
-					b`${resize_listener} = @add_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+					b`${resize_listener} = @${functionName}(${this.var}, ${callee}.bind(${this.var}));`
 				);
 
 				block.chunks.destroy.push(

src/compiler/utils/patterns.ts

@@ -22,3 +22,8 @@ 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_box_size = /^(?:contentRect|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,60 @@
+const MapImplementation = "WeakMap" in window ? WeakMap : Map;
+
+/**
+ * Resize observer singleton
+ * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ */
+export class ResizeObserverSingleton {
+	constructor(readonly options?: ResizeObserverOptions) {}
+
+	addListener(element: Element, callback: Callback) {
+		if (!this._subscriptions.has(element)) {
+			this._subscriptions.set(element, new Subscription(new Set([callback])));
+			this._getObserver().observe(element, this.options);
+		} else {
+			const subscription = this._subscriptions.get(element)!;
+			subscription.listeners.add(callback);
+			callback.call(element, subscription.lastEntry!);
+		}
+	}
+
+	removeListener(element: Element, callback: Callback) {
+		const subscription = this._subscriptions.get(element);
+		if (!subscription) return;
+		if (subscription.listeners.size > 1) {
+			subscription.listeners.delete(callback);
+		} else {
+			this._subscriptions.delete(element);
+			this._getObserver().unobserve(element);
+		}
+	}
+
+	getLastEntry(element: Element) {
+		return this._subscriptions.get(element)?.lastEntry;
+	}
+
+	private readonly _subscriptions: WeakMap<Element, Subscription> = new MapImplementation();
+	private _observer: ResizeObserver|undefined = undefined;
+	private _getObserver() {
+		return this._observer ?? (this._observer = new ResizeObserver((entries)=>{
+			for (const entry of entries) {
+				const element = entry.target;
+				const subscription = this._subscriptions.get(element);
+				if (!subscription) continue;
+				subscription.lastEntry = entry;
+				for (const callback of subscription.listeners) callback.call(element, entry);
+			}
+		}));
+	}
+}
+
+type Callback = (this: Element, entry: ResizeObserverEntry)=>any;
+
+class Subscription {
+	// TODO: consider using Array instead of Set?
+	// If we can guarantee one listener per element, we can simplify even more.
+	constructor(
+		readonly listeners: Set<Callback>,
+		public lastEntry?: ResizeObserverEntry,
+	) {}
+}

src/runtime/internal/dom.ts

@@ -1,3 +1,4 @@
+import { ResizeObserverSingleton } from './ResizeObserverSingleton.js';
 import { has_prop } from './utils';
 
 // Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
@@ -596,7 +597,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') {
@@ -640,6 +641,42 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	};
 }
 
+const resize_observer_content_box = new ResizeObserverSingleton({ box: "content-box" });
+const resize_observer_border_box = new ResizeObserverSingleton({ box: "border-box" });
+const resize_observer_device_pixel_content_box = new ResizeObserverSingleton({ box: "device-pixel-content-box" });
+
+export function add_content_box_observer(node: Element, fn: () => void) {
+	resize_observer_content_box.addListener(node, fn);
+	return ()=> resize_observer_content_box.removeListener(node, fn);
+}
+
+export function add_border_box_observer(node: Element, fn: () => void) {
+	resize_observer_border_box.addListener(node, fn);
+	return ()=> resize_observer_border_box.removeListener(node, fn);
+}
+
+export function add_device_pixel_content_box_observer(node: Element, fn: () => void) {
+	resize_observer_device_pixel_content_box.addListener(node, fn);
+	return ()=> resize_observer_device_pixel_content_box.removeListener(node, fn);
+}
+
+export function get_content_rect(node: Element) {
+	return resize_observer_content_box.getLastEntry(node)?.contentRect;
+}
+
+export function get_content_box_size(node: Element) {
+	return resize_observer_content_box.getLastEntry(node)?.contentBoxSize;
+}
+
+export function get_border_box_size(node: Element) {
+	return resize_observer_border_box.getLastEntry(node)?.borderBoxSize;
+}
+
+export function get_device_pixel_content_box_size(node: Element) {
+	return resize_observer_device_pixel_content_box.getLastEntry(node)?.devicePixelContentBoxSize;
+}
+
+
 export function toggle_class(element, name, toggle) {
 	element.classList[toggle ? 'add' : 'remove'](name);
 }