fix: observer PR cleanup (sveltejs#8484)

leftovers from sveltejs#8022
JSStudioIst · Apr 11, 2023 · 9425f18 · 9425f18
1 parent cd690e0
commit 9425f18
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 22 deletions.
diff --git 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
@@ -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<Element, ResizeObserverEntry> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
-
-	private readonly _listeners: WeakMap<Element, Listener> = 'WeakMap' in globalThis ? new WeakMap() : undefined;
+	private readonly _listeners: WeakMap<Element, Listener> = '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
@@ -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
@@ -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
@@ -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 = [