From fe338e201c1a39f658919aca17502df9368f1489 Mon Sep 17 00:00:00 2001
From: Francesco <francesco@leaningtech.com>
Date: Mon, 2 Jun 2025 16:03:48 +0200
Subject: [PATCH 1/2] moved code to different files, iframe still there

---
 src/lib/CheerpJ.svelte                | 63 +++++++++++++++++
 src/lib/Repl.svelte                   | 15 ++--
 src/lib/repl/Menu.svelte              |  3 +-
 src/lib/repl/Output.svelte            | 53 ++++++++++++--
 src/lib/repl/state.ts                 | 19 ++---
 src/lib/settings/SettingsPanel.svelte |  2 +-
 src/lib/settings/store.ts             |  2 -
 src/routes/(app)/output/+page.svelte  | 99 +--------------------------
 8 files changed, 127 insertions(+), 129 deletions(-)

diff --git a/src/lib/CheerpJ.svelte b/src/lib/CheerpJ.svelte
index ac4234e..008d9bb 100644
--- a/src/lib/CheerpJ.svelte
+++ b/src/lib/CheerpJ.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { browser } from '$app/environment';
+	import { tryPlausible } from './plausible';
+	import { files, loading, type File } from './repl/state';
 
 	const dispatch = createEventDispatcher<{ ready: undefined }>();
 
 	export let display: HTMLElement;
+	export let consoleEl: HTMLPreElement;
 
 	async function onLoad() {
 
@@ -19,4 +22,64 @@
 	if (browser) {	// so it doesn't run server-side
 		onLoad();
 	}
+
+	export async function compileAndRun() {
+		if (!browser) return;
+
+		console.info('compileAndRun');
+
+		// custom event tracking for analytics
+		tryPlausible('Compile');
+
+		consoleEl.innerHTML = '';
+
+		const classPath = '/app/tools.jar:/app/lwjgl-2.9.0.jar:/app/lwjgl_util-2.9.0.jar:/files/';
+
+		const sourceFiles = $files.map((file) => '/str/' + file.path);
+		const code = await cheerpjRunMain(
+			'com.sun.tools.javac.Main',
+			classPath,
+			...sourceFiles,
+			'-d',
+			'/files/',
+			'-Xlint'
+		);
+		const compileLog = consoleEl.innerText;
+		if (code != 0) {
+			$loading = false;
+			window.top?.postMessage({ action: 'compile_error', compileLog }, window.location.origin);
+			throw new Error('Compilation failed');
+		}
+
+		consoleEl.innerHTML = '';
+		cheerpjRunMain(deriveMainClass($files[0]), classPath);
+		$loading = false;
+		window.top?.postMessage({ action: 'running', compileLog }, window.location.origin);
+	}
+
+	function deriveMainClass(file: File) {
+		const className = file.path.split('/').pop()!.replace('.java', '');
+		const match = file.content.match(/package\s+(.+);/);
+		if (match && match.length > 1) {
+			const packageName = match[1];
+			return `${packageName}.${className}`;
+		} else {
+			return className;
+		}
+	}
+
+	// Persist files to CheerpJ filesystem
+	files.subscribe(($files) => {
+		if ('cheerpjAddStringFile' in globalThis) {
+			try {
+				const encoder = new TextEncoder();
+				for (const file of $files) {
+					cheerpjAddStringFile('/str/' + file.path, encoder.encode(file.content));
+				}
+				console.info('wrote files');
+			} catch (error) {
+				console.error('Error writing files to CheerpJ', error);
+			}
+		}
+	});
 </script>
diff --git a/src/lib/Repl.svelte b/src/lib/Repl.svelte
index d438f7e..cad5f8b 100644
--- a/src/lib/Repl.svelte
+++ b/src/lib/Repl.svelte
@@ -2,11 +2,11 @@
 	import Menu from './repl/Menu.svelte';
 	import Sidebar from './repl/Sidebar.svelte';
 	import Editor from './repl/Editor.svelte';
-	import { files } from './repl/state';
+	import { files, autoRun, loading } from './repl/state';
 	import FileTabs from './repl/FileTabs.svelte';
 	import Loading from './Loading.svelte';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import { autoRun, theme } from './settings/store';
+	import { theme } from './settings/store';
 	import { onMount } from 'svelte';
 	import { tryPlausible } from './plausible';
 
@@ -17,7 +17,6 @@
 	let isSaved = true;
 
 	let iframe: HTMLIFrameElement;
-	let loading = false;
 	let compileLog = '';
 
 	files.subscribe(() => {
@@ -32,8 +31,8 @@
 	});
 
 	function run() {
-		if (!loading) {
-			loading = true;
+		if (!$loading) {
+			$loading = true;
 			iframe?.contentWindow?.postMessage(
 				{
 					action: 'reload'
@@ -57,7 +56,7 @@
 				},
 				window.location.origin
 			);
-			loading = false; // once files are sent, any changes to files will trigger a reload
+			$loading = false; // once files are sent, any changes to files will trigger a reload
 		} else if (action === 'running') {
 			compileLog = event.data.compileLog;
 		} else if (action === 'compile_error') {
@@ -113,14 +112,14 @@
 					<Editor {compileLog} />
 				</section>
 				<section slot="b" class="border-t border-stone-200 dark:border-stone-700 overflow-hidden">
-					<div class="w-full h-full" class:hidden={!loading}>
+					<div class="w-full h-full" class:hidden={!$loading}>
 						<Loading />
 					</div>
 					<iframe
 						bind:this={iframe}
 						src={outputUrl}
 						class="w-full h-full"
-						class:hidden={loading}
+						class:hidden={$loading}
 						title="Output"
 						allowtransparency={true}
 						frameborder={0}
diff --git a/src/lib/repl/Menu.svelte b/src/lib/repl/Menu.svelte
index 1e5cec8..efadeab 100644
--- a/src/lib/repl/Menu.svelte
+++ b/src/lib/repl/Menu.svelte
@@ -4,10 +4,9 @@
 	import { relativeTime } from 'svelte-relative-time';
 	import FiddleTitle from './menu/FiddleTitle.svelte';
 	import SettingsButton from './menu/SettingsButton.svelte';
-	import { autoRun } from '$lib/settings/store';
 	import { blur } from 'svelte/transition';
 	import FavouriteButton from './menu/FavouriteButton.svelte';
-	import { files, fiddleTitle, fiddleUpdated, favouriteIndex } from './state';
+	import { files, fiddleTitle, fiddleUpdated, favouriteIndex, autoRun } from './state';
 	import { defaultFiddle } from '$lib/compress-fiddle';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores'
diff --git a/src/lib/repl/Output.svelte b/src/lib/repl/Output.svelte
index b8ea9a9..3cabbf8 100644
--- a/src/lib/repl/Output.svelte
+++ b/src/lib/repl/Output.svelte
@@ -1,12 +1,53 @@
 <script lang="ts">
+	import CheerpJ from '$lib/CheerpJ.svelte';
 	import Icon from '@iconify/svelte';
+	import { files, loading, type File } from './state';
+	import { theme } from '$lib/settings/store';
+	import Loading from '$lib/Loading.svelte';
 
-	export let console: HTMLPreElement;
-	export let display: HTMLElement;
-	export let lwjglCanvas: HTMLCanvasElement;
 	export let showLink: boolean;
+	let consoleEl: HTMLPreElement;
+	let display: HTMLElement;
+	let lwjglCanvas: HTMLCanvasElement;
+
+	$: if (lwjglCanvas) window.lwjglCanvasElement = lwjglCanvas;
+
+	let cheerpj: CheerpJ;
+
+	async function ready() {
+		if (window.parent !== window && window.parent) {
+			// Tell parent frame we are ready to recieve files
+			window.parent.postMessage({ action: 'ready' }, window.location.origin);
+		} else {
+			// Load files from load function
+			files.set($files); // Force file write
+			cheerpj?.compileAndRun();
+		}
+	}
+
+	function onMessage(event: MessageEvent) {
+		if (event.origin !== window.location.origin) return;
+
+		const { action } = event.data;
+		console.log('recv from top', event.data);
+
+		if (action === 'reload') {
+			window.location.reload();
+		} else if (action === 'run') {
+			files.set(event.data.files);
+			cheerpj?.compileAndRun();
+		} else if (action === 'theme_change') {
+			$theme = JSON.parse(localStorage['theme']);
+		}
+	}
 </script>
 
+<svelte:window on:message={onMessage} />
+
+<div class="w-screen h-screen" class:hidden={!$loading}>
+	<Loading />
+</div>
+
 <div class="grid grid-cols-2 grow">
 	<section class="border-r border-stone-200 dark:border-stone-700">
 		<div class="p-3 h-full overflow-scroll text-stone-800 dark:text-stone-100">
@@ -15,14 +56,14 @@
 
 				<button
 					class="ml-auto text-xs hover:underline text-stone-400 dark:text-stone-600"
-					on:click={() => (console.innerText = '')}
+					on:click={() => (consoleEl.innerText = '')}
 				>
 					Clear
 				</button>
 			</div>
 
 			<!-- CheerpJ implicitly looks for a #console to write to -->
-			<pre class="font-mono text-sm h-0" bind:this={console} id="console" />
+			<pre class="font-mono text-sm h-0" bind:this={consoleEl} id="console" />
 		</div>
 	</section>
 	<section class="flex flex-col">
@@ -48,3 +89,5 @@
 		box-shadow: none;
 	}
 </style>
+
+<CheerpJ bind:this={cheerpj} on:ready={ready} {display} {consoleEl} />
diff --git a/src/lib/repl/state.ts b/src/lib/repl/state.ts
index 0606d09..33da37a 100644
--- a/src/lib/repl/state.ts
+++ b/src/lib/repl/state.ts
@@ -13,21 +13,6 @@ export type File = {
 
 export const files = writable<File[]>([]);
 
-// Persist files to CheerpJ filesystem
-files.subscribe(($files) => {
-	if ('cheerpjAddStringFile' in globalThis) {
-		try {
-			const encoder = new TextEncoder();
-			for (const file of $files) {
-				cheerpjAddStringFile('/str/' + file.path, encoder.encode(file.content));
-			}
-			console.info('wrote files');
-		} catch (error) {
-			console.error('Error writing files to CheerpJ', error);
-		}
-	}
-});
-
 export const selectedFilePath = writable<string>('Main.java');
 
 export const isSidebarOpen = persist(writable(true), createLocalStorage(), 'isSidebarOpen');
@@ -41,3 +26,7 @@ export const favourites = persist(writable<Fiddle[]>([]), createIndexedDBStorage
 export const favouriteIndex = writable<number>(-1);
 
 export const description = writable<string>('JavaFiddle is an online, browser-based Java IDE. Create and share Swing applications for free!');
+
+export const autoRun = persist(writable<boolean>(false), createLocalStorage(), 'autoRun');
+
+export const loading = writable<boolean>(false);
diff --git a/src/lib/settings/SettingsPanel.svelte b/src/lib/settings/SettingsPanel.svelte
index 77dddba..4b5e77e 100644
--- a/src/lib/settings/SettingsPanel.svelte
+++ b/src/lib/settings/SettingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ThemeSwitcher from './ThemeSwitcher.svelte';
-	import { autoRun } from './store';
+	import { autoRun } from '$lib/repl/state';
 </script>
 
 <!-- triangle pointing above -->
diff --git a/src/lib/settings/store.ts b/src/lib/settings/store.ts
index 3fd02e4..480e0ac 100644
--- a/src/lib/settings/store.ts
+++ b/src/lib/settings/store.ts
@@ -18,5 +18,3 @@ export const effectiveTheme = derived(theme, ($theme) => {
 	}
 	return $theme;
 });
-
-export const autoRun = persist(writable<boolean>(false), createLocalStorage(), 'autoRun');
diff --git a/src/routes/(app)/output/+page.svelte b/src/routes/(app)/output/+page.svelte
index 0cc25a1..7c9dc0b 100644
--- a/src/routes/(app)/output/+page.svelte
+++ b/src/routes/(app)/output/+page.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import CheerpJ from '$lib/CheerpJ.svelte';
 	import Output from '$lib/repl/Output.svelte';
-	import { files, type File } from '$lib/repl/state';
-	import Loading from '$lib/Loading.svelte';
-	import { theme } from '$lib/settings/store';
+	import { loading } from '$lib/repl/state';
 	import { onMount } from 'svelte';
-	import { tryPlausible } from '$lib/plausible';
 
 	let isTop = false;
 	let isShared = false;
@@ -14,96 +9,8 @@
 		isTop = window.top === window;
 		isShared = window.location.pathname !== '/output';
 	});
-
-	let loading = true;
-
-	async function ready() {
-		if (window.parent !== window && window.parent) {
-			// Tell parent frame we are ready to recieve files
-			window.parent.postMessage({ action: 'ready' }, window.location.origin);
-		} else {
-			// Load files from load function
-			files.set($files); // Force file write
-			compileAndRun();
-		}
-	}
-
-	function onMessage(event: MessageEvent) {
-		if (event.origin !== window.location.origin) return;
-
-		const { action } = event.data;
-		console.log('recv from top', event.data);
-
-		if (action === 'reload') {
-			window.location.reload();
-		} else if (action === 'run') {
-			files.set(event.data.files);
-			compileAndRun();
-		} else if (action === 'theme_change') {
-			$theme = JSON.parse(localStorage['theme']);
-		}
-	}
-
-	let consoleEl: HTMLPreElement;
-	let display: HTMLElement;
-	let lwjglCanvas: HTMLCanvasElement;
-
-	$: if (lwjglCanvas) window.lwjglCanvasElement = lwjglCanvas;
-
-	async function compileAndRun() {
-		if (!browser) return;
-
-		console.info('compileAndRun');
-
-		// custom event tracking for analytics
-		tryPlausible('Compile');
-
-		consoleEl.innerHTML = '';
-
-		const classPath = '/app/tools.jar:/app/lwjgl-2.9.0.jar:/app/lwjgl_util-2.9.0.jar:/files/';
-
-		const sourceFiles = $files.map((file) => '/str/' + file.path);
-		const code = await cheerpjRunMain(
-			'com.sun.tools.javac.Main',
-			classPath,
-			...sourceFiles,
-			'-d',
-			'/files/',
-			'-Xlint'
-		);
-		const compileLog = consoleEl.innerText;
-		if (code != 0) {
-			loading = false;
-			window.top?.postMessage({ action: 'compile_error', compileLog }, window.location.origin);
-			throw new Error('Compilation failed');
-		}
-
-		consoleEl.innerHTML = '';
-		cheerpjRunMain(deriveMainClass($files[0]), classPath);
-		loading = false;
-		window.top?.postMessage({ action: 'running', compileLog }, window.location.origin);
-	}
-
-	function deriveMainClass(file: File) {
-		const className = file.path.split('/').pop()!.replace('.java', '');
-		const match = file.content.match(/package\s+(.+);/);
-		if (match && match.length > 1) {
-			const packageName = match[1];
-			return `${packageName}.${className}`;
-		} else {
-			return className;
-		}
-	}
 </script>
 
-<svelte:window on:message={onMessage} />
-
-<div class="w-screen h-screen" class:hidden={!loading}>
-	<Loading />
-</div>
-
-<div class="flex flex-col w-screen h-screen overflow-hidden" class:hidden={loading}>
-	<Output bind:console={consoleEl} bind:display bind:lwjglCanvas showLink={!isTop && isShared} />
+<div class="flex flex-col w-screen h-screen overflow-hidden" class:hidden={$loading}>
+	<Output showLink={!isTop && isShared} />
 </div>
-
-<CheerpJ on:ready={ready} {display} />

From 4f7d4e1e21a2a5351a201c9713150409e50a2c9f Mon Sep 17 00:00:00 2001
From: Francesco <francesco@leaningtech.com>
Date: Mon, 2 Jun 2025 17:46:03 +0200
Subject: [PATCH 2/2] dropped iframe

---
 src/lib/CheerpJ.svelte                | 106 +++++++++++++++++---------
 src/lib/Repl.svelte                   |  93 +++-------------------
 src/lib/plausible.ts                  |   5 --
 src/lib/repl/Editor.svelte            |  14 +---
 src/lib/repl/Output.svelte            |  60 +++------------
 src/lib/repl/state.ts                 |   8 +-
 src/lib/settings/SettingsPanel.svelte |   7 +-
 src/lib/utilities.ts                  |  13 ++++
 src/routes/(app)/+page.svelte         |   4 +-
 src/routes/(app)/+page.ts             |   8 --
 src/routes/(app)/embed/+page.svelte   |   4 +-
 src/routes/(app)/embed/+page.ts       |   8 --
 src/routes/(app)/output/+page.svelte  |  13 +---
 13 files changed, 121 insertions(+), 222 deletions(-)
 delete mode 100644 src/lib/plausible.ts
 create mode 100644 src/lib/utilities.ts
 delete mode 100644 src/routes/(app)/+page.ts
 delete mode 100644 src/routes/(app)/embed/+page.ts

diff --git a/src/lib/CheerpJ.svelte b/src/lib/CheerpJ.svelte
index 008d9bb..98cb43a 100644
--- a/src/lib/CheerpJ.svelte
+++ b/src/lib/CheerpJ.svelte
@@ -1,40 +1,30 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { browser } from '$app/environment';
-	import { tryPlausible } from './plausible';
-	import { files, loading, type File } from './repl/state';
+	import { onDestroy, onMount } from 'svelte';
+	import { autoRun, compileLog, files, isRunning, isSaved, runCode, type File } from './repl/state';
+	import { debounceFunction } from './utilities';
 
-	const dispatch = createEventDispatcher<{ ready: undefined }>();
-
-	export let display: HTMLElement;
-	export let consoleEl: HTMLPreElement;
-
-	async function onLoad() {
+	let cjConsole: HTMLElement;
+	let cjOutput: HTMLElement;
+	let cjOutputObserver: MutationObserver;
 
+	async function startCheerpj() {
 		await cheerpjInit({
 			status: 'none',
 			javaProperties: ['java.library.path=/app/cheerpj-natives/natives']
 		});
+		const display = document.getElementById("output");
 		cheerpjCreateDisplay(-1, -1, display);
-		dispatch('ready');
-	}
-
-	if (browser) {	// so it doesn't run server-side
-		onLoad();
 	}
 
-	export async function compileAndRun() {
-		if (!browser) return;
+	async function runCheerpj() {
+		if ($isRunning) return;
 
 		console.info('compileAndRun');
-
-		// custom event tracking for analytics
-		tryPlausible('Compile');
-
-		consoleEl.innerHTML = '';
+		$isRunning = true;
+		cjConsole.innerHTML = '';
+		cjOutput.innerHTML = '';
 
 		const classPath = '/app/tools.jar:/app/lwjgl-2.9.0.jar:/app/lwjgl_util-2.9.0.jar:/files/';
-
 		const sourceFiles = $files.map((file) => '/str/' + file.path);
 		const code = await cheerpjRunMain(
 			'com.sun.tools.javac.Main',
@@ -44,17 +34,12 @@
 			'/files/',
 			'-Xlint'
 		);
-		const compileLog = consoleEl.innerText;
-		if (code != 0) {
-			$loading = false;
-			window.top?.postMessage({ action: 'compile_error', compileLog }, window.location.origin);
-			throw new Error('Compilation failed');
-		}
+		if (code === 0) await cheerpjRunMain(deriveMainClass($files[0]), classPath);
 
-		consoleEl.innerHTML = '';
-		cheerpjRunMain(deriveMainClass($files[0]), classPath);
-		$loading = false;
-		window.top?.postMessage({ action: 'running', compileLog }, window.location.origin);
+		// in case nothing is written on cjConsole and cjOutput
+		// manually unflag $isRunning
+		if ($isRunning) $isRunning = false;
+		$compileLog = cjConsole.innerText;
 	}
 
 	function deriveMainClass(file: File) {
@@ -68,18 +53,65 @@
 		}
 	}
 
-	// Persist files to CheerpJ filesystem
-	files.subscribe(($files) => {
-		if ('cheerpjAddStringFile' in globalThis) {
+	const debounceRunCheerpj = debounceFunction(runCheerpj, 500);
+
+	let unsubSaveFiles: () => void;
+	let unsubRunCode: () => void;
+
+	onMount(async () => {
+		await startCheerpj();
+
+		cjConsole = document.getElementById("console");
+		cjOutput = document.getElementById("cheerpjDisplay");
+		// remove useless loading screen
+		cjOutput.classList.remove("cheerpjLoading");
+
+		unsubSaveFiles = files.subscribe(() => {
+		if ($isRunning) {
+			$isSaved = false;
+		} else {
 			try {
 				const encoder = new TextEncoder();
 				for (const file of $files) {
 					cheerpjAddStringFile('/str/' + file.path, encoder.encode(file.content));
 				}
-				console.info('wrote files');
+				$isSaved = true;
+				if ($autoRun) $runCode = true;
 			} catch (error) {
 				console.error('Error writing files to CheerpJ', error);
 			}
 		}
+		});
+		unsubRunCode = runCode.subscribe(() => {
+			if ($runCode) {
+				$runCode = false;
+			($autoRun) ? debounceRunCheerpj() : runCheerpj();
+			}
+		});
+
+		// code execution (flagged by isRunning) is considered over
+		// when cjConsole or cjOutput are updated
+		cjOutputObserver = new MutationObserver(() => {
+			if ($isRunning && (cjConsole.innerHTML || cjOutput.innerHTML)) {
+				$isRunning = false;
+				if (!$isSaved) files.update((files) => files);
+			}
+		});
+		cjOutputObserver.observe((cjConsole), {
+			childList: true,
+			subtree: true,
+		});
+		cjOutputObserver.observe((cjOutput), {
+			childList: true,
+			subtree: true,
+		});
+
+		await runCheerpj();
+	});
+
+	onDestroy(() => {
+		if (unsubSaveFiles) unsubSaveFiles();
+		if (unsubRunCode) unsubRunCode();
+		if (cjOutputObserver) cjOutputObserver.disconnect();
 	});
 </script>
diff --git a/src/lib/Repl.svelte b/src/lib/Repl.svelte
index cad5f8b..83377e9 100644
--- a/src/lib/Repl.svelte
+++ b/src/lib/Repl.svelte
@@ -2,86 +2,24 @@
 	import Menu from './repl/Menu.svelte';
 	import Sidebar from './repl/Sidebar.svelte';
 	import Editor from './repl/Editor.svelte';
-	import { files, autoRun, loading } from './repl/state';
+	import { isSaved, runCode } from './repl/state';
 	import FileTabs from './repl/FileTabs.svelte';
-	import Loading from './Loading.svelte';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import { theme } from './settings/store';
-	import { onMount } from 'svelte';
-	import { tryPlausible } from './plausible';
+	import { tryPlausible } from './utilities';
+	import Output from './repl/Output.svelte';
 
-	export let outputUrl: string;
 	export let enableSidebar: boolean = true;
 	export let enableMenu: boolean = true;
 
-	let isSaved = true;
-
-	let iframe: HTMLIFrameElement;
-	let compileLog = '';
-
-	files.subscribe(() => {
-		isSaved = false;
-		if ($autoRun) run();
-	});
-
-	// files is set by +layout.svelte on load, but we want to keep isSaved true on load
-	// i.e. undo above subscription
-	onMount(() => {
-		isSaved = true;
-	});
-
-	function run() {
-		if (!$loading) {
-			$loading = true;
-			iframe?.contentWindow?.postMessage(
-				{
-					action: 'reload'
-				},
-				window.location.origin
-			);
-		}
-	}
-
-	function onMessage(event: MessageEvent) {
-		if (event.origin !== window.location.origin) return;
-
-		const { action } = event.data;
-		console.log('recv from iframe', event.data);
-
-		if (action === 'ready') {
-			iframe?.contentWindow?.postMessage(
-				{
-					action: 'run',
-					files: $files
-				},
-				window.location.origin
-			);
-			$loading = false; // once files are sent, any changes to files will trigger a reload
-		} else if (action === 'running') {
-			compileLog = event.data.compileLog;
-		} else if (action === 'compile_error') {
-			compileLog = event.data.compileLog;
-		}
-	}
-
 	async function share() {
-
-		// custom event tracking for analytics
 		tryPlausible('Share');
-
-		isSaved = true;
 		await navigator.clipboard.writeText(window.location.toString());
 	}
 
-	// Notify iframe of theme changes so it can reload its theme from localStorage
-	$: {
-		$theme;
-		iframe?.contentWindow?.postMessage(
-			{
-				action: 'theme_change'
-			},
-			window.location.origin
-		);
+	// only used when the users presses the button RUN
+	async function run() {
+		tryPlausible('Compile');
+		$runCode = true;
 	}
 
 	function onBeforeUnload(evt: BeforeUnloadEvent) {
@@ -92,7 +30,7 @@
 	}
 </script>
 
-<svelte:window on:message={onMessage} on:beforeunload={isSaved ? undefined : onBeforeUnload} />
+<svelte:window on:beforeunload={$isSaved ? undefined : onBeforeUnload} />
 
 <div class="w-full h-screen font-sans flex flex-col overflow-hidden">
 	{#if enableMenu}
@@ -109,21 +47,10 @@
 						<FileTabs />
 					</div>
 
-					<Editor {compileLog} />
+					<Editor />
 				</section>
 				<section slot="b" class="border-t border-stone-200 dark:border-stone-700 overflow-hidden">
-					<div class="w-full h-full" class:hidden={!$loading}>
-						<Loading />
-					</div>
-					<iframe
-						bind:this={iframe}
-						src={outputUrl}
-						class="w-full h-full"
-						class:hidden={$loading}
-						title="Output"
-						allowtransparency={true}
-						frameborder={0}
-					/>
+					<Output />
 				</section>
 			</SplitPane>
 		</div>
diff --git a/src/lib/plausible.ts b/src/lib/plausible.ts
deleted file mode 100644
index 5388663..0000000
--- a/src/lib/plausible.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// for adblockers protection
-export function tryPlausible(msg: string) {
-	if (self.plausible)
-		plausible(msg)
-}
\ No newline at end of file
diff --git a/src/lib/repl/Editor.svelte b/src/lib/repl/Editor.svelte
index ff7cae6..37f83ae 100644
--- a/src/lib/repl/Editor.svelte
+++ b/src/lib/repl/Editor.svelte
@@ -7,7 +7,7 @@
 	import { indentUnit } from '@codemirror/language';
 	import { lintGutter } from '@codemirror/lint';
 	import { java } from '@codemirror/lang-java';
-	import { files, fiddleTitle, fiddleUpdated, selectedFilePath, type File } from './state';
+	import { files, fiddleTitle, fiddleUpdated, selectedFilePath, type File, compileLog } from './state';
 	import './codemirror.css';
 	import { compartment, diagnostic, parseCompileLog } from './linter';
 	import { effectiveTheme } from '$lib/settings/store';
@@ -111,15 +111,6 @@
 			editorView?.destroy();
 		};
 	});
-	/*
-	beforeNavigate(() => {
-		skipReset = true;
-	});
-	afterNavigate(() => {
-		skipReset = false;
-		editorStates.clear();
-		reset(files);
-	});*/
 
 	// Look at the selected file
 	$: {
@@ -130,9 +121,8 @@
 	}
 
 	// Linter
-	export let compileLog: string;
 	$: {
-		const diagnostics = parseCompileLog(compileLog, $files);
+		const diagnostics = parseCompileLog($compileLog, $files);
 		for (let fileIndex = 0; fileIndex < diagnostics.length; fileIndex++) {
 			const diagnosticsForFile = diagnostics[fileIndex];
 			const path = $files[fileIndex].path;
diff --git a/src/lib/repl/Output.svelte b/src/lib/repl/Output.svelte
index 3cabbf8..6469609 100644
--- a/src/lib/repl/Output.svelte
+++ b/src/lib/repl/Output.svelte
@@ -1,54 +1,20 @@
 <script lang="ts">
 	import CheerpJ from '$lib/CheerpJ.svelte';
 	import Icon from '@iconify/svelte';
-	import { files, loading, type File } from './state';
-	import { theme } from '$lib/settings/store';
+	import { isRunning } from './state';
 	import Loading from '$lib/Loading.svelte';
 
-	export let showLink: boolean;
-	let consoleEl: HTMLPreElement;
-	let display: HTMLElement;
+	let cjConsole: HTMLPreElement;
 	let lwjglCanvas: HTMLCanvasElement;
 
 	$: if (lwjglCanvas) window.lwjglCanvasElement = lwjglCanvas;
-
-	let cheerpj: CheerpJ;
-
-	async function ready() {
-		if (window.parent !== window && window.parent) {
-			// Tell parent frame we are ready to recieve files
-			window.parent.postMessage({ action: 'ready' }, window.location.origin);
-		} else {
-			// Load files from load function
-			files.set($files); // Force file write
-			cheerpj?.compileAndRun();
-		}
-	}
-
-	function onMessage(event: MessageEvent) {
-		if (event.origin !== window.location.origin) return;
-
-		const { action } = event.data;
-		console.log('recv from top', event.data);
-
-		if (action === 'reload') {
-			window.location.reload();
-		} else if (action === 'run') {
-			files.set(event.data.files);
-			cheerpj?.compileAndRun();
-		} else if (action === 'theme_change') {
-			$theme = JSON.parse(localStorage['theme']);
-		}
-	}
 </script>
 
-<svelte:window on:message={onMessage} />
-
-<div class="w-screen h-screen" class:hidden={!$loading}>
+<div class="w-full h-full" class:hidden={!$isRunning}>
 	<Loading />
 </div>
 
-<div class="grid grid-cols-2 grow">
+<div class="w-full h-full grid grid-cols-2 grow">
 	<section class="border-r border-stone-200 dark:border-stone-700">
 		<div class="p-3 h-full overflow-scroll text-stone-800 dark:text-stone-100">
 			<div class="flex text-stone-500 text-sm select-none pb-3">
@@ -56,19 +22,19 @@
 
 				<button
 					class="ml-auto text-xs hover:underline text-stone-400 dark:text-stone-600"
-					on:click={() => (consoleEl.innerText = '')}
+					on:click={() => (cjConsole.innerText = '')}
 				>
 					Clear
 				</button>
 			</div>
 
 			<!-- CheerpJ implicitly looks for a #console to write to -->
-			<pre class="font-mono text-sm h-0" bind:this={consoleEl} id="console" />
+			<pre class="font-mono text-sm h-0" bind:this={cjConsole} id="console" />
 		</div>
 	</section>
 	<section class="flex flex-col">
 		<div class="p-3 text-stone-500 text-sm select-none">Result</div>
-		<div class="grow relative" bind:this={display}>
+		<div class="grow relative" id="output">
 			<canvas bind:this={lwjglCanvas} class="absolute inset-0 w-full h-full" />
 			<!-- #cheerpjDisplay will be inserted here -->
 		</div>
@@ -76,12 +42,10 @@
 </div>
 
 <div class="absolute top-0 right-0 text-stone-500 text-sm flex items-center select-none">
-	{#if showLink}
-		<!-- svelte-ignore a11y-invalid-attribute -->
-		<a href="" target="_blank" rel="noreferrer" class="px-2 py-2" title="Open in new tab">
-			<Icon icon="mi:external-link" class="w-5 h-5" />
-		</a>
-	{/if}
+	<!-- svelte-ignore a11y-invalid-attribute -->
+	<a href="" target="_blank" rel="noreferrer" class="px-2 py-2" title="Open in new tab">
+		<Icon icon="mi:external-link" class="w-5 h-5" />
+	</a>
 </div>
 
 <style>
@@ -90,4 +54,4 @@
 	}
 </style>
 
-<CheerpJ bind:this={cheerpj} on:ready={ready} {display} {consoleEl} />
+<CheerpJ/>
diff --git a/src/lib/repl/state.ts b/src/lib/repl/state.ts
index 33da37a..5356b58 100644
--- a/src/lib/repl/state.ts
+++ b/src/lib/repl/state.ts
@@ -29,4 +29,10 @@ export const description = writable<string>('JavaFiddle is an online, browser-ba
 
 export const autoRun = persist(writable<boolean>(false), createLocalStorage(), 'autoRun');
 
-export const loading = writable<boolean>(false);
+export const isRunning = writable<boolean>(false);
+
+export const isSaved = writable<boolean>(true);
+
+export const runCode = writable<boolean>(false);
+
+export const compileLog = writable<string>('');
diff --git a/src/lib/settings/SettingsPanel.svelte b/src/lib/settings/SettingsPanel.svelte
index 4b5e77e..0285ed7 100644
--- a/src/lib/settings/SettingsPanel.svelte
+++ b/src/lib/settings/SettingsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ThemeSwitcher from './ThemeSwitcher.svelte';
-	import { autoRun } from '$lib/repl/state';
+	import { autoRun, isRunning, runCode } from '$lib/repl/state';
 </script>
 
 <!-- triangle pointing above -->
@@ -27,7 +27,10 @@
 
 	<h3 class="font-semibold">Behaviour</h3>
 	<div class="flex items-center gap-1.5">
-		<input type="checkbox" bind:checked={$autoRun} id="auto-run" />
+		<input type="checkbox" bind:checked={$autoRun} on:change={() => {
+			// if autorun is set force re-run by updating files
+			$runCode = $autoRun && !$isRunning;
+		}} id="auto-run" />
 		<label for="auto-run" class="grow">Run code automatically</label>
 	</div>
 </div>
diff --git a/src/lib/utilities.ts b/src/lib/utilities.ts
new file mode 100644
index 0000000..c6a914b
--- /dev/null
+++ b/src/lib/utilities.ts
@@ -0,0 +1,13 @@
+// for adblockers protection
+export function tryPlausible(msg: string) {
+	if (self.plausible)
+		plausible(msg)
+}
+
+export function debounceFunction(fn: () => void, delay: number) {
+	let timeoutId: number;
+	return(() => {
+		clearInterval(timeoutId);
+		timeoutId = setTimeout(() => fn(), delay);
+	});
+}
\ No newline at end of file
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index f85007b..c1ad302 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Repl from '$lib/Repl.svelte';
-
-	export let data;
 </script>
 
-<Repl outputUrl={data.outputUrl} />
+<Repl/>
diff --git a/src/routes/(app)/+page.ts b/src/routes/(app)/+page.ts
deleted file mode 100644
index 32df18f..0000000
--- a/src/routes/(app)/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function load({ url }) {
-	let outputUrl = url.pathname;
-	if (!outputUrl.endsWith('/')) outputUrl += '/';
-	outputUrl += 'output';
-	return {
-		outputUrl
-	};
-}
diff --git a/src/routes/(app)/embed/+page.svelte b/src/routes/(app)/embed/+page.svelte
index 9aa0e20..bfd0066 100644
--- a/src/routes/(app)/embed/+page.svelte
+++ b/src/routes/(app)/embed/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Repl from '$lib/Repl.svelte';
-
-	export let data;
 </script>
 
-<Repl outputUrl={data.outputUrl} enableMenu={false} enableSidebar={false} />
+<Repl enableMenu={false} enableSidebar={false} />
diff --git a/src/routes/(app)/embed/+page.ts b/src/routes/(app)/embed/+page.ts
deleted file mode 100644
index 3401798..0000000
--- a/src/routes/(app)/embed/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export function load({ url }) {
-	let outputUrl = url.pathname.replace('/embed', '');
-	if (!outputUrl.endsWith('/')) outputUrl += '/';
-	outputUrl += 'output';
-	return {
-		outputUrl
-	};
-}
diff --git a/src/routes/(app)/output/+page.svelte b/src/routes/(app)/output/+page.svelte
index 7c9dc0b..917adc3 100644
--- a/src/routes/(app)/output/+page.svelte
+++ b/src/routes/(app)/output/+page.svelte
@@ -1,16 +1,5 @@
 <script lang="ts">
 	import Output from '$lib/repl/Output.svelte';
-	import { loading } from '$lib/repl/state';
-	import { onMount } from 'svelte';
-
-	let isTop = false;
-	let isShared = false;
-	onMount(() => {
-		isTop = window.top === window;
-		isShared = window.location.pathname !== '/output';
-	});
 </script>
 
-<div class="flex flex-col w-screen h-screen overflow-hidden" class:hidden={$loading}>
-	<Output showLink={!isTop && isShared} />
-</div>
+<Output />