From 380583804c3f8888315968812694749a860f031d Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 11 Nov 2022 00:29:17 +0800 Subject: [PATCH 01/15] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Use=20RO=20singleton?= =?UTF-8?q?=20instead=20of=20iframe=20if=20supported?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../internal/ResizeObserverSingleton.ts | 46 +++++++++++++++++++ src/runtime/internal/dom.ts | 28 ++++++++++- 2 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 src/runtime/internal/ResizeObserverSingleton.ts diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts new file mode 100644 index 000000000000..5492dfe07eaa --- /dev/null +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -0,0 +1,46 @@ +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: (element: Element)=>any) { + if (!this._callbacks.has(element)) { + this._callbacks.set(element, new Set([callback])); + this._getObserver().observe(element, this.options); + } else { + this._callbacks.get(element)!.add(callback); + callback(element); + } + } + + removeListener(element: Element, callback: (element: Element)=>any) { + const list = this._callbacks.get(element); + if (!list) return; + if (list.size > 1) { + list.delete(callback); + } else { + this._callbacks.delete(element); + this._getObserver().unobserve(element); + } + } + + // TODO: consider using Array instead of Set? + // If we can guarantee one listener per element, we can simplify even more. + private readonly _callbacks: WeakMapany>> = 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 callbacks = this._callbacks.get(element); + if (callbacks) { + for (const callback of callbacks) callback(element); + } + } + })); + } +} \ No newline at end of file diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index ca76b11ab3e9..02ae20b4d427 100644 --- a/src/runtime/internal/dom.ts +++ b/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) { +function add_iframe_resize_listener(node: HTMLElement, fn: () => void) { const computed_style = getComputedStyle(node); if (computed_style.position === 'static') { @@ -640,6 +641,31 @@ 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 SoleResizeObserver({ box: "border-box" }); +// export const resize_observer_device_pixel_content_box = new SoleResizeObserver({ box: "device-pixel-content-box" }); + +export function add_content_box_observer(node: HTMLElement, fn: () => void) { + resize_observer_content_box.addListener(node, fn); + return ()=> resize_observer_content_box.removeListener(node, fn); +} + +// export function add_border_box_observer(node: HTMLElement, 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: HTMLElement, fn: () => void) { +// resize_observer_device_pixel_content_box.addListener(node, fn); +// return ()=> resize_observer_device_pixel_content_box.removeListener(node, fn); +// } + + +export const add_resize_listener = "ResizeObserver" in window ? +add_content_box_observer : +add_iframe_resize_listener; + export function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } From 25dd06e791292bb7aeae3d032e0911c4021e7e28 Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 11 Nov 2022 03:30:48 +0800 Subject: [PATCH 02/15] =?UTF-8?q?=E2=9C=A8=20Added=20support=20for=20resiz?= =?UTF-8?q?e=20observer=20bindings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/compiler/compile/nodes/Binding.ts | 3 +- src/compiler/compile/nodes/Element.ts | 7 ++- .../render_dom/wrappers/Element/Binding.ts | 12 +++++ .../render_dom/wrappers/Element/index.ts | 30 +++++++++-- src/compiler/utils/patterns.ts | 5 ++ .../internal/ResizeObserverSingleton.ts | 50 ++++++++++++------- src/runtime/internal/dom.ts | 47 ++++++++++------- 7 files changed, 111 insertions(+), 43 deletions(-) diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts index f826df482850..f253d847a21b 100644 --- a/src/compiler/compile/nodes/Binding.ts +++ b/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? */); diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index ca9bcb8c4e8c..903de939bb79 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/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)); } }); diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index 9e2ec85f0fe8..46f1cfc04342 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/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`; } + //
+ 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)`; + } + // - regex_content_rect.test(name) - }, { event_names: ['elementresizeobservecontentbox'], filter: (_node: Element, name: string) => - regex_content_box_size.test(name) + regex_content_rect.test(name) ?? regex_content_box_size.test(name) }, { event_names: ['elementresizeobserveborderbox'], @@ -710,11 +705,10 @@ export default class ElementWrapper extends Wrapper { binding_group.events.forEach(name => { const resizeListenerFunctions = { - "elementresize": "add_iframe_resize_listener", - "elementresizeobservecontentrect": "add_content_rect_observer", - "elementresizeobservecontentbox": "add_content_box_observer", - "elementresizeobserveborderbox": "add_border_box_observer", - "elementresizeobservedevicepixelcontentbox": "add_device_pixel_content_box_observer", + elementresize: 'add_iframe_resize_listener', + elementresizeobservecontentbox: 'resize_observer_content_box.observe', + elementresizeobserveborderbox: 'resize_observer_border_box.observe', + elementresizeobservedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe' }; if (name in resizeListenerFunctions) { diff --git a/src/compiler/utils/patterns.ts b/src/compiler/utils/patterns.ts index e4cf3a85062e..f0fb08c7c9c5 100644 --- a/src/compiler/utils/patterns.ts +++ b/src/compiler/utils/patterns.ts @@ -27,4 +27,4 @@ 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)$/ \ No newline at end of file +export const regex_box_size = /^(?:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize)$/; diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index 8232e4fce111..bd459a39c241 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -1,4 +1,4 @@ -const MapImplementation = "WeakMap" in window ? WeakMap : ("Map" in window ? Map : undefined); +const MapImplementation = 'WeakMap' in window ? WeakMap : ('Map' in window ? Map : undefined); /** * Resize observer singleton @@ -7,35 +7,27 @@ const MapImplementation = "WeakMap" in window ? WeakMap : ("Map" in window ? Map export class ResizeObserverSingleton { constructor(readonly options?: ResizeObserverOptions) {} - addListener(element: Element, listener: Listener) { - this._subscriptions.set(element, {listener}); + observe(element: Element, listener: Listener) { + this._listeners.set(element, listener); this._getObserver().observe(element, this.options); - return ()=>{ - this._subscriptions.delete(element); - this._observer!.unobserve(element); // this line can probably be removed - } + return () => { + this._listeners.delete(element); + this._observer.unobserve(element); // this line can probably be removed + }; } - getLastEntry(element: Element) { - return this._subscriptions.get(element)?.lastEntry; - } + static readonly entries: WeakMap = MapImplementation ? new MapImplementation() : undefined; - private readonly _subscriptions: WeakMap = MapImplementation ? new MapImplementation() : undefined; + private readonly _listeners: WeakMap = MapImplementation ? new MapImplementation() : undefined; private _observer?: ResizeObserver; private _getObserver() { - return this._observer ?? (this._observer = new ResizeObserver((entries)=>{ + return this._observer ?? (this._observer = new ResizeObserver((entries) => { for (const entry of entries) { - const subscription = this._subscriptions.get(entry.target)!; - subscription.lastEntry = entry; - subscription.listener(entry); + ResizeObserverSingleton.entries.set(entry.target, entry); + this._listeners.get(entry.target)?.(entry); } })); } } type Listener = (entry: ResizeObserverEntry)=>any; - -interface Subscription { - readonly listener: Listener, - lastEntry?: ResizeObserverEntry, -} \ No newline at end of file diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 26af5cb6f3ae..f1b2a2bb140b 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -641,43 +641,11 @@ export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) { }; } -const resize_observer_content_rect = new ResizeObserverSingleton({ box: "content-box" }); -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_rect_observer(node: Element, fn: () => void) { - return resize_observer_content_rect.addListener(node, fn); -} - -export function add_content_box_observer(node: Element, fn: () => void) { - return resize_observer_content_box.addListener(node, fn); -} - -export function add_border_box_observer(node: Element, fn: () => void) { - return resize_observer_border_box.addListener(node, fn); -} - -export function add_device_pixel_content_box_observer(node: Element, fn: () => void) { - return resize_observer_device_pixel_content_box.addListener(node, fn); -} - -export function get_content_rect(node: Element) { - return resize_observer_content_rect.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 const resize_observer_content_rect = new ResizeObserverSingleton({ box: 'content-box' }); +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); From 524b74a456e36649d5c2b9874df024165c0229bf Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 11 Nov 2022 21:59:35 +0800 Subject: [PATCH 10/15] =?UTF-8?q?=F0=9F=8E=A8=20Clean=20up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compile/render_dom/wrappers/Element/index.ts | 15 +++++++++------ src/runtime/internal/ResizeObserverSingleton.ts | 3 ++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index d38fbf532d6c..e77e444266ea 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -64,6 +64,7 @@ const events = [ node.name === 'input' && node.get_static_attribute_value('type') === 'range' }, + // resize events { event_names: ['elementresize'], filter: (_node: Element, name: string) => @@ -71,17 +72,19 @@ const events = [ }, { - event_names: ['elementresizeobservecontentbox'], + event_names: ['elementresizecontentbox'], filter: (_node: Element, name: string) => regex_content_rect.test(name) ?? regex_content_box_size.test(name) }, + { - event_names: ['elementresizeobserveborderbox'], + event_names: ['elementresizeborderbox'], filter: (_node: Element, name: string) => regex_border_box_size.test(name) }, + { - event_names: ['elementresizeobservedevicepixelcontentbox'], + event_names: ['elementresizedevicepixelcontentbox'], filter: (_node: Element, name: string) => regex_device_pixel_content_box_size.test(name) }, @@ -706,9 +709,9 @@ export default class ElementWrapper extends Wrapper { binding_group.events.forEach(name => { const resizeListenerFunctions = { elementresize: 'add_iframe_resize_listener', - elementresizeobservecontentbox: 'resize_observer_content_box.observe', - elementresizeobserveborderbox: 'resize_observer_border_box.observe', - elementresizeobservedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe' + elementresizecontentbox: 'resize_observer_content_box.observe', + elementresizeborderbox: 'resize_observer_border_box.observe', + elementresizedevicepixelcontentbox: 'resize_observer_device_pixel_content_box.observe' }; if (name in resizeListenerFunctions) { diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index bd459a39c241..d0f824b8cff7 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -1,7 +1,8 @@ const MapImplementation = 'WeakMap' in window ? WeakMap : ('Map' in window ? Map : undefined); /** - * Resize observer singleton + * 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 { From 8a85b43210126e6aa7d4ff3a910c8f84f017751b Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 11 Nov 2022 22:43:44 +0800 Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=90=9B=20Fix=20ResizeObserverSingle?= =?UTF-8?q?ton.entries?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/runtime/internal/ResizeObserverSingleton.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index d0f824b8cff7..bfcacedf0433 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -1,5 +1,3 @@ -const MapImplementation = 'WeakMap' in window ? WeakMap : ('Map' in window ? Map : undefined); - /** * Resize observer singleton. * One listener per element only! @@ -17,9 +15,9 @@ export class ResizeObserverSingleton { }; } - static readonly entries: WeakMap = MapImplementation ? new MapImplementation() : undefined; + static readonly entries: WeakMap = 'WeakMap' in globalThis ? new WeakMap() : undefined; - private readonly _listeners: WeakMap = MapImplementation ? new MapImplementation() : undefined; + private readonly _listeners: WeakMap = 'WeakMap' in globalThis ? new WeakMap() : undefined; private _observer?: ResizeObserver; private _getObserver() { return this._observer ?? (this._observer = new ResizeObserver((entries) => { From fbd02ba03d8d007713738674a37078409fca5566 Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Wed, 23 Nov 2022 01:44:04 +0800 Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=94=A5=20Removed=20resize=5Fobserve?= =?UTF-8?q?r=5Fcontent=5Frect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/runtime/internal/dom.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index f1b2a2bb140b..e199a0d8eee9 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -641,7 +641,6 @@ export function add_iframe_resize_listener(node: HTMLElement, fn: () => void) { }; } -export const resize_observer_content_rect = new ResizeObserverSingleton({ box: 'content-box' }); 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' }); From c2151953a40c40440b8635c1ecd2919fd8be0f9d Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 25 Nov 2022 05:48:16 +0800 Subject: [PATCH 13/15] =?UTF-8?q?=F0=9F=92=A9=20Added=20ResizeObserver=20t?= =?UTF-8?q?ypes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/runtime/internal/ResizeObserverSingleton.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index bfcacedf0433..615f982e8d88 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -30,3 +30,9 @@ export class ResizeObserverSingleton { } type Listener = (entry: ResizeObserverEntry)=>any; + +// TODO: Remove this +type ResizeObserverEntry = any; +type ResizeObserverOptions = any; +type ResizeObserver = any; +declare const ResizeObserver: any; From a3f8507a7740e5ecc4c0f6b462cf28f5de69a442 Mon Sep 17 00:00:00 2001 From: TheCymaera <69355340+TheCymaera@users.noreply.github.com> Date: Fri, 25 Nov 2022 23:59:04 +0800 Subject: [PATCH 14/15] =?UTF-8?q?=F0=9F=8E=A8=20Copied=20ResizeObserver=20?= =?UTF-8?q?types=20from=20lib.dom.d.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../internal/ResizeObserverSingleton.ts | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index 615f982e8d88..6d1e5b567b39 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -32,7 +32,36 @@ export class ResizeObserverSingleton { type Listener = (entry: ResizeObserverEntry)=>any; // TODO: Remove this -type ResizeObserverEntry = any; -type ResizeObserverOptions = any; -type ResizeObserver = any; -declare const ResizeObserver: any; +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; +}; From 2c5b113774ffc62ed7e24154b33561bf74285864 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Thu, 23 Mar 2023 12:04:50 +0100 Subject: [PATCH 15/15] typings --- elements/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/elements/index.d.ts b/elements/index.d.ts index 4ad2f2880fee..cc4df770fd83 100644 --- a/elements/index.d.ts +++ b/elements/index.d.ts @@ -546,6 +546,11 @@ export interface HTMLAttributes 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;