From 7834ca3c5badb8f4833bdcf59623cbc27195b3ff Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 20 May 2020 09:52:27 +0800
Subject: [PATCH] fix slot with context overflow + without let (#4862)

---
 .../compile/render_dom/wrappers/Slot.ts       |  5 +--
 src/runtime/internal/utils.ts                 |  8 +++++
 .../bitmask-overflow-slot-6/Slotted.svelte    | 15 +++++++++
 .../bitmask-overflow-slot-6/_config.js        | 32 +++++++++++++++++++
 .../bitmask-overflow-slot-6/main.svelte       | 23 +++++++++++++
 5 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
index 55ed031381..268875acaf 100644
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/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`
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index 487116b655..d752c9de9d 100644
--- a/src/runtime/internal/utils.ts
+++ 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];
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte b/test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte
new file mode 100644
index 0000000000..322a31359e
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/_config.js b/test/runtime/samples/bitmask-overflow-slot-6/_config.js
new file mode 100644
index 0000000000..8cd8c07a65
--- /dev/null
+++ b/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>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/main.svelte b/test/runtime/samples/bitmask-overflow-slot-6/main.svelte
new file mode 100644
index 0000000000..8845cb2ef5
--- /dev/null
+++ b/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>
\ No newline at end of file