feat(raw-apps): enable hash-based routing with URL sync for shareable URLs (#7624)

2026-08-24 16:01:42 +00:00 · 2026-01-20 13:19:29 +00:00
parent a2bee4738e
commit 7adfb0310d
2 changed files with 120 additions and 24 deletions
@@ -3,6 +3,7 @@
 	import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte'
 	import type { Runnable } from './rawAppPolicy'
 	import { htmlContent } from './utils'
+	import { onMount } from 'svelte'

 	interface Props {
 		workspace: string
@@ -15,13 +16,58 @@
 	let { workspace, user, secret, path, runnables }: Props = $props()

 	let iframe = $state() as HTMLIFrameElement | undefined
+
+	// Get initial hash from parent URL to pass to iframe
+	let initialHash = $state('')
+
+	onMount(() => {
+		initialHash = window.location.hash || ''
+	})
+
+	// Use blob URL instead of srcDoc to give the iframe a proper origin.
+	// srcDoc iframes have "null" origin which breaks URL constructor in routers.
+	let blobUrl = $derived.by(() => {
+		if (!secret) return undefined
+		const baseUrl = typeof window !== 'undefined' ? window.location.origin : ''
+		const html = htmlContent(workspace, secret, { ctx: user, workspace }, baseUrl, initialHash)
+		const blob = new Blob([html], { type: 'text/html' })
+		return URL.createObjectURL(blob)
+	})
+
+	// Cleanup blob URL when it changes or component unmounts
+	$effect(() => {
+		const url = blobUrl
+		return () => {
+			if (url) URL.revokeObjectURL(url)
+		}
+	})
+
+	// Listen for hash changes from iframe and update parent URL
+	$effect(() => {
+		function handleMessage(event: MessageEvent) {
+			console.log('[Parent] Received message:', event.data)
+			if (event.data?.type === 'windmill:hashchange') {
+				const newHash = event.data.hash || ''
+				console.log('[Parent] Updating hash to:', newHash)
+				// Update parent URL without triggering navigation
+				if (window.location.hash !== newHash) {
+					history.replaceState(null, '', newHash || window.location.pathname)
+				}
+			}
+		}
+
+		window.addEventListener('message', handleMessage)
+		return () => window.removeEventListener('message', handleMessage)
+	})
 </script>

 <RawAppBackgroundRunner {workspace} editor={false} {iframe} {runnables} {path} />

-<iframe
-	bind:this={iframe}
-	title="raw-app"
-	srcDoc={htmlContent(workspace, secret, { ctx: user, workspace })}
-	class="w-full h-full min-h-screen bg-white border-none"
-></iframe>
+{#if blobUrl}
+	<iframe
+		bind:this={iframe}
+		title="raw-app"
+		src={blobUrl}
+		class="w-full h-full min-h-screen bg-white border-none"
+	></iframe>
+{/if}
@@ -15,24 +15,74 @@ export type RawApp = {
 	files: string[]
 }

-export function htmlContent(workspace: string, secret: string | undefined, ctx: any) {
-	return `
-        <!DOCTYPE html>
-        <html>
-            <head>
-                <meta charset="UTF-8" />
-                <title>App Preview</title>
-                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${secret}.css" />
-				<script>
-					window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'}
-				</script>
-            </head>
-            <body>
-                <div id="root"></div>
-                <script src="/api/w/${workspace}/apps/get_data/v/${secret}.js"></script>
-            </body>
-        </html>
-    `
+export function htmlContent(
+	workspace: string,
+	secret: string | undefined,
+	ctx: any,
+	baseUrl: string = '',
+	initialHash: string = ''
+) {
+	return `<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>App Preview</title>
+	<link rel="stylesheet" href="${baseUrl}/api/w/${workspace}/apps/get_data/v/${secret}.css" />
+	<script>
+		window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'};
+
+		// Sync hash with parent window for shareable URLs
+		(function() {
+			// Set initial hash from parent URL
+			var initialHash = ${JSON.stringify(initialHash)};
+			if (initialHash && initialHash !== '#' && !window.location.hash) {
+				history.replaceState(null, '', initialHash);
+			}
+
+			// Notify parent when hash changes
+			function notifyParent() {
+				var hash = window.location.hash;
+				console.log('[HashSync] notifyParent called, hash:', hash);
+				if (window.parent !== window) {
+					window.parent.postMessage({
+						type: 'windmill:hashchange',
+						hash: hash
+					}, '*');
+				}
+			}
+
+			// Listen for hash changes
+			window.addEventListener('hashchange', function() {
+				console.log('[HashSync] hashchange event');
+				notifyParent();
+			});
+
+			// Also notify on pushState/replaceState
+			var originalPushState = history.pushState;
+			var originalReplaceState = history.replaceState;
+
+			history.pushState = function() {
+				console.log('[HashSync] pushState called with:', arguments[2]);
+				originalPushState.apply(this, arguments);
+				notifyParent();
+			};
+
+			history.replaceState = function() {
+				console.log('[HashSync] replaceState called with:', arguments[2]);
+				originalReplaceState.apply(this, arguments);
+				notifyParent();
+			};
+
+			// Notify parent of initial hash after load
+			setTimeout(notifyParent, 0);
+		})();
+	</script>
+</head>
+<body>
+	<div id="root"></div>
+	<script src="${baseUrl}/api/w/${workspace}/apps/get_data/v/${secret}.js"></script>
+</body>
+</html>`
 }

 function removeStaticFields(schema: Schema, fields: Record<string, { type: string }>): Schema {