From 6c367252b4bd5604af387288a147f5add1452f50 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 11 Nov 2023 09:12:57 -0500
Subject: [PATCH 1/2] fix runes mode indicator

---
 .../src/lib/Input/ComponentSelector.svelte         |  5 ++++-
 .../src/lib/Input/RunesInfo.svelte                 |  9 ++++++---
 sites/svelte-5-preview/src/lib/Repl.svelte         | 14 ++++++++------
 sites/svelte-5-preview/src/lib/types.d.ts          |  2 --
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
index f41f58cd4adf..71cd9241b8f8 100644
--- a/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
@@ -7,6 +7,9 @@
 	/** @type {boolean}  */
 	export let show_modified;
 
+	/** @type {boolean} */
+	export let runes;
+
 	/** @type {ReturnType<typeof createEventDispatcher<{
 	 * remove: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
 	 * add: { files: import('$lib/types').File[]; diff: import('$lib/types').File },
@@ -292,7 +295,7 @@
 		</svg>
 	</button>
 
-	<div class="runes-info"><RunesInfo /></div>
+	<div class="runes-info"><RunesInfo {runes} /></div>
 </div>
 
 <style>
diff --git a/sites/svelte-5-preview/src/lib/Input/RunesInfo.svelte b/sites/svelte-5-preview/src/lib/Input/RunesInfo.svelte
index cdef22f0db8f..fcca1bf8e353 100644
--- a/sites/svelte-5-preview/src/lib/Input/RunesInfo.svelte
+++ b/sites/svelte-5-preview/src/lib/Input/RunesInfo.svelte
@@ -1,9 +1,12 @@
 <script>
 	import { get_repl_context } from '$lib/context.js';
 
+	/** @type {boolean} */
+	export let runes;
+
 	let open = false;
 
-	const { selected_name, runes_mode } = get_repl_context();
+	const { selected_name } = get_repl_context();
 </script>
 
 <svelte:window
@@ -13,7 +16,7 @@
 />
 
 <div class="container">
-	<button class:active={$runes_mode} class:open on:click={() => (open = !open)}>
+	<button class:active={runes} class:open on:click={() => (open = !open)}>
 		<svg viewBox="0 0 24 24">
 			<path d="M9.4,1H19l-5.9,7.7h8L8.3,23L11,12.6H3.5L9.4,1z" />
 		</svg>
@@ -40,7 +43,7 @@
 					extension to <code>.svelte.js</code>.
 				</p>
 			{:else if $selected_name.endsWith('.svelte')}
-				{#if $runes_mode}
+				{#if runes}
 					<p>
 						This component is in
 						<a href="https://svelte.dev/blog/runes">runes mode</a>.
diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index 1c02d9ca76cd..df6763c8ba65 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -29,6 +29,8 @@
 	export let showAst = false;
 	export let autocomplete = true;
 
+	let runes = false;
+
 	export function toJSON() {
 		return {
 			imports: $bundle?.imports ?? [],
@@ -113,9 +115,6 @@
 	/** @type {ReplContext['toggleable']} */
 	const toggleable = writable(false);
 
-	/** @type {ReplContext['runes_mode']} */
-	const runes_mode = writable(false);
-
 	/** @type {ReplContext['bundler']} */
 	const bundler = writable(null);
 
@@ -133,7 +132,6 @@
 		cursor_pos,
 		module_editor,
 		toggleable,
-		runes_mode,
 
 		EDITOR_STATE_MAP,
 
@@ -256,8 +254,12 @@
 
 		if ($selected.type === 'svelte' || $selected.type === 'js') {
 			compiled = await compiler.compile($selected, $compile_options, false);
-			$runes_mode = compiled.metadata?.runes ?? false;
+			runes = compiled.result.metadata?.runes ?? false;
+		} else {
+			runes = false;
 		}
+
+		console.error({ runes })
 	}
 
 	$: recompile($selected, $compile_options);
@@ -324,7 +326,7 @@
 			max="-4.1rem"
 		>
 			<section slot="a">
-				<ComponentSelector show_modified={showModified} on:add on:remove />
+				<ComponentSelector show_modified={showModified} {runes} on:add on:remove />
 				<ModuleEditor
 					{autocomplete}
 					error={compiled?.result.error}
diff --git a/sites/svelte-5-preview/src/lib/types.d.ts b/sites/svelte-5-preview/src/lib/types.d.ts
index 1add64c0efbb..7f978aec699c 100644
--- a/sites/svelte-5-preview/src/lib/types.d.ts
+++ b/sites/svelte-5-preview/src/lib/types.d.ts
@@ -47,7 +47,6 @@ export type ReplState = {
 	cursor_pos: number;
 	toggleable: boolean;
 	module_editor: import('./CodeMirror.svelte').default | null;
-	runes_mode: boolean;
 };
 
 export type ReplContext = {
@@ -61,7 +60,6 @@ export type ReplContext = {
 	cursor_pos: Writable<ReplState['cursor_pos']>;
 	toggleable: Writable<ReplState['toggleable']>;
 	module_editor: Writable<ReplState['module_editor']>;
-	runes_mode: Writable<ReplState['runes_mode']>;
 
 	EDITOR_STATE_MAP: Map<string, EditorState>;
 

From 1fbc560cd1a1523026c469e911dc1b96446b56b2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 11 Nov 2023 09:13:48 -0500
Subject: [PATCH 2/2] tidy up

---
 sites/svelte-5-preview/src/lib/Repl.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/sites/svelte-5-preview/src/lib/Repl.svelte b/sites/svelte-5-preview/src/lib/Repl.svelte
index df6763c8ba65..5922a63ea85d 100644
--- a/sites/svelte-5-preview/src/lib/Repl.svelte
+++ b/sites/svelte-5-preview/src/lib/Repl.svelte
@@ -258,8 +258,6 @@
 		} else {
 			runes = false;
 		}
-
-		console.error({ runes })
 	}
 
 	$: recompile($selected, $compile_options);