fix runes mode indicator (#9388)

* fix runes mode indicator

* tidy up

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

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>

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

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,7 +254,9 @@
 
 		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;
 		}
 	}
 
@@ -324,7 +324,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}

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