feat: smaller destructor chunk (#8763)

technically a breaking change because someone with a mutation observer could rely on the order of operations --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
sveltejs · Jun 20, 2023 · 914529f · 914529f
1 parent 88504ee
commit 914529f
Show file tree

Hide file tree

Showing 83 changed files with 523 additions and 243 deletions.
diff --git a/.changeset/eighty-tigers-rhyme.md b/.changeset/eighty-tigers-rhyme.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: smaller minified output for destructor chunks
diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md
@@ -154,3 +154,4 @@ The order in which preprocessors are applied has changed. Now, preprocessors are
 - people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750))
 - `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947))
 - type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5
+- Removal of DOM nodes is now batched which slightly changes its order, which might affect the order of events fired if you're using a MutationObserver on these elements ([#8763](https://github.com/sveltejs/svelte/pull/8763))
diff --git a/packages/svelte/src/compiler/compile/render_dom/Block.js b/packages/svelte/src/compiler/compile/render_dom/Block.js
@@ -1,6 +1,7 @@
 import { b, x } from 'code-red';
 import { is_head } from './wrappers/shared/is_head.js';
 import { regex_double_quotes } from '../../utils/patterns.js';
+import { flatten } from '../../utils/flatten.js';
 
 export default class Block {
 	/**
@@ -380,8 +381,27 @@ export default class Block {
 		if (this.chunks.destroy.length === 0) {
 			properties.destroy = noop;
 		} else {
+			const dispose_elements = [];
+			// Coalesce if blocks with the same condition
+			const others = flatten(this.chunks.destroy).filter(
+				/** @param {import('estree').Node} node */
+				(node) => {
+					if (
+						node.type === 'IfStatement' &&
+						node.test.type === 'Identifier' &&
+						node.test.name === 'detaching'
+					) {
+						dispose_elements.push(node.consequent);
+						return false;
+					} else {
+						return true;
+					}
+				}
+			);
+
 			properties.destroy = x`function #destroy(detaching) {
-				${this.chunks.destroy}
+				${dispose_elements.length ? b`if (detaching) { ${dispose_elements} }` : null}
+				${others}
 			}`;
 		}
 		if (!this.renderer.component.compile_options.dev) {

diff --git a/packages/svelte/test/js/samples/action-custom-event-handler/expected.js b/packages/svelte/test/js/samples/action-custom-event-handler/expected.js
@@ -36,7 +36,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(button);
+			if (detaching) {
+				detach(button);
+			}
+
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/action/expected.js b/packages/svelte/test/js/samples/action/expected.js
@@ -35,7 +35,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(a);
+			if (detaching) {
+				detach(a);
+			}
+
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/bind-open/expected.js b/packages/svelte/test/js/samples/bind-open/expected.js
@@ -37,7 +37,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(details);
+			if (detaching) {
+				detach(details);
+			}
+
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/bind-width-height/expected.js b/packages/svelte/test/js/samples/bind-width-height/expected.js
@@ -29,7 +29,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) {
+				detach(div);
+			}
+
 			div_resize_listener();
 		}
 	};

diff --git a/packages/svelte/test/js/samples/bindings-readonly-order/expected.js b/packages/svelte/test/js/samples/bindings-readonly-order/expected.js
@@ -46,9 +46,12 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(input0);
-			if (detaching) detach(t);
-			if (detaching) detach(input1);
+			if (detaching) {
+				detach(input0);
+				detach(t);
+				detach(input1);
+			}
+
 			mounted = false;
 			run_all(dispose);
 		}

diff --git a/packages/svelte/test/js/samples/capture-inject-dev-only/expected.js b/packages/svelte/test/js/samples/capture-inject-dev-only/expected.js
@@ -52,9 +52,12 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(p);
-			if (detaching) detach(t1);
-			if (detaching) detach(input);
+			if (detaching) {
+				detach(p);
+				detach(t1);
+				detach(input);
+			}
+
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/capture-inject-state/expected.js b/packages/svelte/test/js/samples/capture-inject-state/expected.js
@@ -75,7 +75,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(p);
+			if (detaching) {
+				detach_dev(p);
+			}
 		}
 	};
 
@@ -197,4 +199,4 @@ class Component extends SvelteComponentDev {
 }
 
 export default Component;
-export { moduleLiveBinding, moduleConstantProps };
+export { moduleLiveBinding, moduleConstantProps };
diff --git a/packages/svelte/test/js/samples/collapse-element-class-name/expected.js b/packages/svelte/test/js/samples/collapse-element-class-name/expected.js
@@ -81,8 +81,11 @@ function create_fragment(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div);
-			if (detaching) detach(t);
+			if (detaching) {
+				detach(div);
+				detach(t);
+			}
+
 			destroy_component(component, detaching);
 		}
 	};

diff --git a/packages/svelte/test/js/samples/collapses-text-around-comments/expected.js b/packages/svelte/test/js/samples/collapses-text-around-comments/expected.js
@@ -38,7 +38,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(p);
+			if (detaching) {
+				detach(p);
+			}
 		}
 	};
 }
@@ -60,4 +62,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;
diff --git a/packages/svelte/test/js/samples/component-static-var/expected.js b/packages/svelte/test/js/samples/component-static-var/expected.js
@@ -74,11 +74,14 @@ function create_fragment(ctx) {
 			current = false;
 		},
 		d(detaching) {
+			if (detaching) {
+				detach(t0);
+				detach(t1);
+				detach(input);
+			}
+
 			destroy_component(foo, detaching);
-			if (detaching) detach(t0);
 			destroy_component(bar, detaching);
-			if (detaching) detach(t1);
-			if (detaching) detach(input);
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/component-store-access-invalidate/expected.js b/packages/svelte/test/js/samples/component-store-access-invalidate/expected.js
@@ -34,7 +34,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(h1);
+			if (detaching) {
+				detach(h1);
+			}
 		}
 	};
 }

diff --git a/packages/svelte/test/js/samples/component-store-reassign-invalidate/expected.js b/packages/svelte/test/js/samples/component-store-reassign-invalidate/expected.js
@@ -50,9 +50,12 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(h1);
-			if (detaching) detach(t1);
-			if (detaching) detach(button);
+			if (detaching) {
+				detach(h1);
+				detach(t1);
+				detach(button);
+			}
+
 			mounted = false;
 			dispose();
 		}

diff --git a/packages/svelte/test/js/samples/css-media-query/expected.js b/packages/svelte/test/js/samples/css-media-query/expected.js
@@ -30,7 +30,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) {
+				detach(div);
+			}
 		}
 	};
 }
@@ -42,4 +44,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;
diff --git a/packages/svelte/test/js/samples/css-shadow-dom-keyframes/expected.js b/packages/svelte/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -32,7 +32,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			if (detaching) {
+				detach(div);
+			}
 		}
 	};
 }

diff --git a/packages/svelte/test/js/samples/custom-svelte-path/expected.js b/packages/svelte/test/js/samples/custom-svelte-path/expected.js
@@ -39,7 +39,9 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(h1);
+			if (detaching) {
+				detach(h1);
+			}
 		}
 	};
 }

diff --git a/packages/svelte/test/js/samples/data-attribute/expected.js b/packages/svelte/test/js/samples/data-attribute/expected.js
@@ -37,9 +37,11 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div0);
-			if (detaching) detach(t);
-			if (detaching) detach(div1);
+			if (detaching) {
+				detach(div0);
+				detach(t);
+				detach(div1);
+			}
 		}
 	};
 }

diff --git a/packages/svelte/test/js/samples/debug-empty/expected.js b/packages/svelte/test/js/samples/debug-empty/expected.js
@@ -52,8 +52,10 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(h1);
-			if (detaching) detach_dev(t3);
+			if (detaching) {
+				detach_dev(h1);
+				detach_dev(t3);
+			}
 		}
 	};
 

diff --git a/packages/svelte/test/js/samples/debug-foo-bar-baz-things/expected.js b/packages/svelte/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -68,8 +68,10 @@ function create_each_block(ctx) {
 			}
 		},
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(span);
-			if (detaching) detach_dev(t1);
+			if (detaching) {
+				detach_dev(span);
+				detach_dev(t1);
+			}
 		}
 	};
 
@@ -152,9 +154,12 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(p);
+			}
+
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(p);
 		}
 	};
 

diff --git a/packages/svelte/test/js/samples/debug-foo/expected.js b/packages/svelte/test/js/samples/debug-foo/expected.js
@@ -62,8 +62,10 @@ function create_each_block(ctx) {
 			}
 		},
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(span);
-			if (detaching) detach_dev(t1);
+			if (detaching) {
+				detach_dev(span);
+				detach_dev(t1);
+			}
 		}
 	};
 
@@ -146,9 +148,12 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(p);
+			}
+
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(p);
 		}
 	};
 

diff --git a/packages/svelte/test/js/samples/debug-no-dependencies/expected.js b/packages/svelte/test/js/samples/debug-no-dependencies/expected.js
@@ -47,8 +47,10 @@ function create_each_block(ctx) {
 		},
 		p: noop,
 		d: function destroy(detaching) {
-			if (detaching) detach_dev(t0);
-			if (detaching) detach_dev(t1);
+			if (detaching) {
+				detach_dev(t0);
+				detach_dev(t1);
+			}
 		}
 	};
 
@@ -119,8 +121,11 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d: function destroy(detaching) {
+			if (detaching) {
+				detach_dev(each_1_anchor);
+			}
+
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach_dev(each_1_anchor);
 		}
 	};
 

diff --git a/packages/svelte/test/js/samples/deconflict-builtins/expected.js b/packages/svelte/test/js/samples/deconflict-builtins/expected.js
@@ -40,7 +40,9 @@ function create_each_block(ctx) {
 			if (dirty & /*createElement*/ 1 && t_value !== (t_value = /*node*/ ctx[1] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
-			if (detaching) detach(span);
+			if (detaching) {
+				detach(span);
+			}
 		}
 	};
 }
@@ -98,8 +100,11 @@ function create_fragment(ctx) {
 		i: noop,
 		o: noop,
 		d(detaching) {
+			if (detaching) {
+				detach(each_1_anchor);
+			}
+
 			destroy_each(each_blocks, detaching);
-			if (detaching) detach(each_1_anchor);
 		}
 	};
 }