Fix playground

packages/site/package.json

@@ -5,8 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "sapper dev --ext '.svelte .svx'",
-		"build:site": "sapper build --legacy --ext '.svelte .svx'",
-		"export": "sapper export --legacy --ext '.svelte .svx'",
+		"build:site": "sapper build --ext '.svelte .svx'",
+		"export": "sapper export --ext '.svelte .svx'",
 		"start": "node __sapper__/build",
 		"cy:run": "cypress run",
 		"cy:open": "cypress open",
@@ -40,10 +40,10 @@
 		"rehype-slug": "^2.0.3",
 		"remark-syntax-highlight": "^0.1.3",
 		"rollup": "^2.58.0",
-		"rollup-plugin-svelte": "^7.1.0",
+		"rollup-plugin-svelte": "^7.1.6",
 		"rollup-plugin-terser": "^7.0.2",
 		"sapper": "^0.29.3",
-		"svelte": "^3.7.1",
+		"svelte": "^4.0.0",
 		"svelte-json-tree": "^0.0.7",
 		"typeface-catamaran": "^0.0.72",
 		"typeface-roboto": "^0.0.75",

packages/site/src/components/Repl/CodeMirror.svelte

@@ -1,4 +1,4 @@
-[<script>
+<script>
   import './codemirror.css';
   import { onMount, createEventDispatcher } from "svelte";
   import Message from "./Message.svelte";

packages/site/src/components/Repl/Input/ComponentSelector.svelte

@@ -4,7 +4,7 @@
   export let handle_select;
   export let funky;
 
-  const { components, selected, request_focus, rebundle } = getContext("REPL");
+  let { components, selected, request_focus, rebundle } = getContext("REPL");
 
   let editing = null;
 

packages/site/src/components/Repl/Output/Viewer.svelte

@@ -10,6 +10,7 @@
 
   const { bundle } = getContext("REPL");
 
+
   export let error; // TODO should this be exposed as a prop?
   let logs = [];
 
@@ -160,6 +161,12 @@
   function clear_logs() {
     logs = [];
   }
+
+  onMount(() => {
+    if (iframe) {
+      ready = true;
+    }
+  });
 </script>
 
 <style>

packages/site/src/components/Repl/Repl.svelte

@@ -10,7 +10,7 @@
 
   export let workersUrl;
   export let packagesUrl = "https://unpkg.com";
-  export let svelteUrl = `${packagesUrl}/svelte`;
+  export let svelteUrl = `${packagesUrl}/svelte@3.59.2`;
   export let orientation = "columns";
   export let relaxed = false;
   export let fixed = false;

packages/site/src/routes/_source.js

@@ -98,6 +98,8 @@ export const code_2 = `
 
 	<div class="boingers">
 		{#each boingers.filter(v => !v.boinged) as {val} (val)}
+
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div animate:flip
 					 in:receive="{{key: val}}"
 					 out:send="{{key: val}}"
@@ -108,6 +110,7 @@ export const code_2 = `
 
 	<div class="boingers">
 		{#each boingers.filter(v => v.boinged) as {val} (val)}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<div animate:flip
 					 in:receive="{{key: val}}"
 					 out:send="{{key: val}}"