fix slot with context overflow + without let (#4862)

Author: tanhauhau

src/compiler/compile/render_dom/wrappers/Slot.ts

@@ -172,10 +172,7 @@ export default class SlotWrapper extends Wrapper {
 
 		const slot_update = b`
 			if (${slot}.p && ${renderer.dirty(dynamic_dependencies)}) {
-				${slot}.p(
-					@get_slot_context(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn}),
-					@get_slot_changes(${slot_definition}, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn})
-				);
+				@update_slot(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn}, ${get_slot_context_fn});
 			}
 		`;
 		const fallback_update = has_fallback && fallback_dynamic_dependencies.length > 0 && b`

src/runtime/internal/utils.ts

@@ -103,6 +103,14 @@ export function get_slot_changes(definition, $$scope, dirty, fn) {
 	return $$scope.dirty;
 }
 
+export function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
+	const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
+	if (slot_changes) {
+		const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+		slot.p(slot_context, slot_changes);
+	}
+}
+
 export function exclude_internal_props(props) {
 	const result = {};
 	for (const k in props) if (k[0] !== '$') result[k] = props[k];

test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte

@@ -0,0 +1,15 @@
+<script>
+	let open = false;
+	function toggle() {
+		open = !open;
+	}
+</script>
+
+<div on:click={toggle}>
+ <slot name="target" {open}></slot>
+	
+	<!-- This actually isn't necessary to reproduce. -->
+	{#if open}
+ 	  <slot name="content"></slot>
+	{/if}
+</div>

test/runtime/samples/bitmask-overflow-slot-6/_config.js

@@ -0,0 +1,32 @@
+// overflow bitmask + slot missing `let:`
+export default {
+	html: `
+		<div>
+			<button slot="target">Toggle inside 1</button>
+		</div>
+		<button>Toggle outside</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelectorAll('button')[1];
+		const div = target.querySelector('div');
+		await div.dispatchEvent(new window.MouseEvent('click'));
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<button slot="target">Toggle inside 1</button>
+				<div slot="content">Open</div>
+			</div>
+			<button>Toggle outside</button>
+		`);
+		
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<button slot="target">Toggle inside 2</button>
+				<div slot="content">Open</div>
+			</div>
+			<button>Toggle outside</button>
+		`);
+	}
+};

test/runtime/samples/bitmask-overflow-slot-6/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Slotted from './Slotted.svelte';
+	let lotsOfNumbers = Array.from({length: 50}, () => 1);
+	
+	let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, aa, ab, ac, ad, ae, af, ag, ah] = lotsOfNumbers;
+	
+	let last = 1;
+	function toggle () {
+		last = 2;
+	}
+</script>
+
+<Slotted>
+	<button slot="target">
+		Toggle inside {last} 
+	</button>
+	
+	<div slot="content">
+		Open
+	</div>
+</Slotted>
+
+<button on:click={toggle}>Toggle outside</button>