diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 0f1faa8f5e49..cefebfcff35f 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -765,20 +765,33 @@ export default class ElementWrapper extends Wrapper { `); binding_group.events.forEach(name => { - const resizeListenerFunctions = { - 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) { + if (['elementresize', 'elementresizecontentbox', 'elementresizeborderbox', 'elementresizedevicepixelcontentbox'].indexOf(name) !== -1) { const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`); block.add_variable(resize_listener); - block.chunks.mount.push( - b`${resize_listener} = @${resizeListenerFunctions[name]}(${this.var}, ${callee}.bind(${this.var}));` - ); + // Can't dynamically do `@fn[name]`, code-red doesn't know how to resolve it + switch (name) { + case 'elementresize': + block.chunks.mount.push( + b`${resize_listener} = @add_iframe_resize_listener(${this.var}, ${callee}.bind(${this.var}));` + ); + break; + case 'elementresizecontentbox': + block.chunks.mount.push( + b`${resize_listener} = @resize_observer_content_box.observe(${this.var}, ${callee}.bind(${this.var}));` + ); + break; + case 'elementresizeborderbox': + block.chunks.mount.push( + b`${resize_listener} = @resize_observer_border_box.observe(${this.var}, ${callee}.bind(${this.var}));` + ); + break; + case 'elementresizedevicepixelcontentbox': + block.chunks.mount.push( + b`${resize_listener} = @resize_observer_device_pixel_content_box.observe(${this.var}, ${callee}.bind(${this.var}));` + ); + break; + } block.chunks.destroy.push( b`${resize_listener}();` diff --git a/src/runtime/internal/ResizeObserverSingleton.ts b/src/runtime/internal/ResizeObserverSingleton.ts index 6d1e5b567b39..773f68e4ffd9 100644 --- a/src/runtime/internal/ResizeObserverSingleton.ts +++ b/src/runtime/internal/ResizeObserverSingleton.ts @@ -1,3 +1,5 @@ +import { globals } from './globals'; + /** * Resize observer singleton. * One listener per element only! @@ -15,19 +17,19 @@ export class ResizeObserverSingleton { }; } - static readonly entries: WeakMap = 'WeakMap' in globalThis ? new WeakMap() : undefined; - - private readonly _listeners: WeakMap = 'WeakMap' in globalThis ? new WeakMap() : undefined; + private readonly _listeners: WeakMap = 'WeakMap' in globals ? 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); + (ResizeObserverSingleton as any).entries.set(entry.target, entry); this._listeners.get(entry.target)?.(entry); } })); } } +// Needs to be written like this to pass the tree-shake-test +(ResizeObserverSingleton as any).entries = 'WeakMap' in globals ? new WeakMap() : undefined; type Listener = (entry: ResizeObserverEntry)=>any; diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 4ffa9e47425e..c025313c157d 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -747,9 +747,9 @@ export function add_iframe_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 const resize_observer_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'content-box' }); +export const resize_observer_border_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'border-box' }); +export const resize_observer_device_pixel_content_box = /* @__PURE__ */ new ResizeObserverSingleton({ box: 'device-pixel-content-box' }); export { ResizeObserverSingleton }; export function toggle_class(element, name, toggle) { diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js index 8966e57c9ca0..287c1b95b8eb 100644 --- a/test/js/samples/bind-width-height/expected.js +++ b/test/js/samples/bind-width-height/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { SvelteComponent, + add_iframe_resize_listener, add_render_callback, - add_resize_listener, detach, element, init, @@ -23,7 +23,7 @@ function create_fragment(ctx) { }, m(target, anchor) { insert(target, div, anchor); - div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div)); + div_resize_listener = add_iframe_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div)); }, p: noop, i: noop, diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js index fe30240bfce4..4ef1c2f7d8e1 100644 --- a/test/js/samples/video-bindings/expected.js +++ b/test/js/samples/video-bindings/expected.js @@ -1,8 +1,8 @@ /* generated by Svelte vX.Y.Z */ import { SvelteComponent, + add_iframe_resize_listener, add_render_callback, - add_resize_listener, detach, element, init, @@ -42,7 +42,7 @@ function create_fragment(ctx) { }, m(target, anchor) { insert(target, video, anchor); - video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video)); + video_resize_listener = add_iframe_resize_listener(video, /*video_elementresize_handler*/ ctx[7].bind(video)); if (!mounted) { dispose = [