fix: added Svelte version check to runes widget in Playground (sveltejs#1072)

add pre-v5 runes notice

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

Author: ThePaSch

packages/repl/src/lib/Input/RunesInfo.svelte

@@ -4,7 +4,8 @@
 
 	let { runes }: { runes: boolean } = $props();
 
-	const { workspace } = get_repl_context();
+	const { workspace, svelteVersion } = get_repl_context();
+	const majorVersion = Number(svelteVersion.split(".")[0]);
 </script>
 
 <Dropdown align="right">
@@ -16,7 +17,12 @@
 
 	{#snippet dropdown()}
 		<div class="popup">
-			{#if workspace.current.name.endsWith('.svelte.js')}
+			{#if Number.isInteger(majorVersion) && majorVersion < 5}
+				<p>
+					<a href="/blog/runes">Runes</a> are available from Svelte 5 onwards, and this playground is
+					using Svelte {svelteVersion}.
+				</p>
+			{:else if workspace.current.name.endsWith('.svelte.js')}
 				<p>
 					Files with a <code>.svelte.js</code> extension are always in
 					<a href="/blog/runes">runes mode</a>.

packages/repl/src/lib/Repl.svelte

@@ -87,7 +87,8 @@
 	set_repl_context({
 		bundle,
 		toggleable,
-		workspace
+		workspace,
+		svelteVersion
 	});
 
 	let current_token: Symbol;

packages/repl/src/lib/types.d.ts

@@ -47,4 +47,5 @@ export type ReplContext = {
 	bundle: Writable<ReplState['bundle']>;
 	toggleable: Writable<ReplState['toggleable']>;
 	workspace: Workspace;
+	svelteVersion: string;
 };