add hub compatible json export to apps

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -42,7 +42,8 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils'
 	import type { AppInput } from '../inputType'
-	import type { App, AppComponent, AppEditorContext } from '../types'
+	import type { AppComponent, AppEditorContext } from '../types'
+	import { toStatic } from '../utils'
 	import AppExportButton from './AppExportButton.svelte'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 
@@ -76,17 +77,6 @@
 		saveDrawerOpen = false
 	}
 
-	function toStatic(): { app: App; summary: string } {
-		const newApp: App = JSON.parse(JSON.stringify($app))
-		newApp.grid.forEach((x) => {
-			let c: AppComponent = x.data
-			if (c.componentInput?.type == 'runnable') {
-				c.componentInput.value = $staticExporter[x.id]()
-			}
-		})
-		return { app: newApp, summary: $summary }
-	}
-
 	async function computeTriggerables() {
 		const allTriggers = await Promise.all(
 			$app.grid
@@ -421,16 +411,23 @@
 					displayName: 'JSON',
 					icon: faFileExport,
 					action: () => {
-						appExport.open()
+						appExport.open($app)
 					}
 				},
 				{
 					displayName: 'Publish to Hub',
 					icon: faGlobe,
 					action: () => {
-						const url = appToHubUrl(toStatic())
+						const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
 						window.open(url.toString(), '_blank')
 					}
+				},
+				{
+					displayName: 'Hub compatible JSON',
+					icon: faFileExport,
+					action: () => {
+						appExport.open(toStatic($app, $staticExporter, $summary).app)
+					}
 				}
 			]}
 		>
@@ -447,7 +444,7 @@
 				<span class="hidden md:inline">Debug Runs</span>
 			</Button>
 		</span>
-		<AppExportButton bind:this={appExport} app={$app} />
+		<AppExportButton bind:this={appExport} />
 		<Button
 			on:click={() => (publishDrawerOpen = true)}
 			color="light"

frontend/src/lib/components/apps/editor/AppExportButton.svelte

@@ -12,11 +12,12 @@
 
 	let jsonViewerDrawer: Drawer
 
-	export function open() {
+	let app: App | undefined = undefined
+
+	export function open(app_l: App) {
+		app = app_l
 		jsonViewerDrawer?.toggleDrawer()
 	}
-
-	export let app: App
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
@@ -32,7 +33,7 @@
 			>
 				Copy content
 			</Button>
-			<Highlight language={json} code={JSON.stringify(app, null, 4)} />
+			<Highlight language={json} code={JSON.stringify(app ?? {}, null, 4)} />
 		</div>
 	</DrawerContent>
 </Drawer>

frontend/src/lib/components/apps/utils.ts

@@ -24,7 +24,7 @@ import {
 	SlidersHorizontal
 } from 'lucide-svelte'
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
-import type { AppComponent } from './types'
+import type { App, AppComponent } from './types'
 
 export async function loadSchema(
 	workspace: string,
@@ -233,3 +233,15 @@ export function clearResultAppInput(appInput: ResultAppInput): ResultAppInput {
 	}
 	return appInput
 }
+
+
+export function toStatic(app: App, staticExporter: Record<string, () => any>, summary: string): { app: App; summary: string } {
+	const newApp: App = JSON.parse(JSON.stringify(app))
+	newApp.grid.forEach((x) => {
+		let c: AppComponent = x.data
+		if (c.componentInput?.type == 'runnable') {
+			c.componentInput.value = staticExporter[x.id]()
+		}
+	})
+	return { app: newApp, summary }
+}