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>

Author: gtm-nayan

.changeset/eighty-tigers-rhyme.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: smaller minified output for destructor chunks

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))

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) {

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();
 }

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();
 }

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();
 }

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();
 }
 };

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);
 }

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();
 }

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 };