fix(frontend): Prepare app scripts code for export (#1123)

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -2,11 +2,11 @@
 	import { Badge } from '$lib/components/common'
 	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
-	import type { AppComponent, AppEditorContext } from '../../types'
+	import type { AppEditorContext } from '../../types'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
+	import { getAppScripts } from './utils'
 
 	export let selectedScriptComponentId: string | undefined = undefined
-
 	const { app, selectedComponent, lazyGrid } = getContext<AppEditorContext>('AppEditorContext')
 
 	function selectInlineScript(id: string) {
@@ -16,63 +16,7 @@
 		}
 	}
 
-	$: runnablesByName = $lazyGrid.reduce((acc, gridComponent) => {
-		const component: AppComponent = gridComponent.data
-
-		if (component.type === 'tablecomponent') {
-			component.actionButtons.forEach((actionButton) => {
-				if (actionButton.componentInput?.type === 'runnable') {
-					if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-						acc.push({
-							name: actionButton.componentInput.runnable.name,
-							id: actionButton.id
-						})
-					}
-				}
-			})
-		}
-
-		const componentInput = component.componentInput
-
-		if (componentInput?.type === 'runnable') {
-			if (componentInput.runnable?.type === 'runnableByName') {
-				acc.push({
-					name: componentInput.runnable.name,
-					id: gridComponent.id
-				})
-			}
-		}
-		return acc
-	}, [] as { name: string; id: string }[])
-
-	$: runnablesByPath = $lazyGrid.reduce((acc, gridComponent) => {
-		const component: AppComponent = gridComponent.data
-
-		if (component.type === 'tablecomponent') {
-			component.actionButtons.forEach((actionButton) => {
-				if (actionButton.componentInput?.type === 'runnable') {
-					if (actionButton.componentInput.runnable?.type === 'runnableByPath') {
-						acc.push({
-							name: actionButton.componentInput.runnable.path,
-							id: actionButton.id
-						})
-					}
-				}
-			})
-		}
-
-		const componentInput = component.componentInput
-
-		if (componentInput?.type === 'runnable') {
-			if (componentInput.runnable?.type === 'runnableByPath') {
-				acc.push({
-					name: componentInput.runnable.path,
-					id: gridComponent.id
-				})
-			}
-		}
-		return acc
-	}, [] as { name: string; id: string }[])
+	$: runnables = getAppScripts($lazyGrid)
 
 	// When seleced component changes, update selectedScriptComponentId
 	$: {
@@ -85,9 +29,9 @@
 <div class="min-h-full flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByName.length > 0}
+			{#if runnables.inline.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByName as { name, id }, index (index)}
+					{#each runnables.inline as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(
@@ -123,17 +67,17 @@
 				</div>
 			{/if}
 
-			{#if runnablesByName.length == 0 && $app.unusedInlineScripts?.length == 0}
+			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
 				<div class="text-sm text-gray-500">No inline scripts</div>
 			{/if}
 		</div>
 	</PanelSection>
 
-	<PanelSection title="Others" smallPadding>
+	<PanelSection title="Imported scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByPath.length > 0}
+			{#if runnables.imported.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByPath as { name, id }, index (index)}
+					{#each runnables.imported as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(

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

@@ -0,0 +1,43 @@
+import type { Runnable } from "../../inputType"
+import type { AppComponent, GridItem } from "../../types"
+
+export interface AppScriptsList {
+	inline: { name: string; id: string }[],
+	imported: { name: string; id: string }[]
+}
+
+export function getAppScripts(grid: GridItem[]) {
+	return grid.reduce((acc, gridComponent) => {
+		const component: AppComponent = gridComponent.data
+		const componentInput = component.componentInput
+
+		if (component.type === 'tablecomponent') {
+			component.actionButtons.forEach((actionButton) => {
+				if (actionButton.componentInput?.type !== 'runnable') { return }
+				processRunnable(
+					actionButton.componentInput.runnable,
+					actionButton.id,
+					acc
+				)
+			})
+		}
+		if (componentInput?.type === 'runnable') {
+			processRunnable(
+				componentInput.runnable,
+				gridComponent.id,
+				acc
+			)
+		}
+
+		return acc
+	}, {inline: [], imported: []} as AppScriptsList)
+}
+
+function processRunnable(runnable: Runnable, id: string, list: AppScriptsList) {
+	if(runnable?.type === undefined) { return }
+	const type: keyof AppScriptsList = runnable.type === 'runnableByPath' ? 'imported' : 'inline'
+	list[type].push({
+		name: runnable[runnable.type === 'runnableByPath' ? 'path' : 'name'],
+		id
+	})
+}