From 6c82371670a7f781a794f55efea33fa81fc905a5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 27 Mar 2023 17:41:37 +0200
Subject: [PATCH] feat(frontend): add recompute as a primitive

---
 .../apps/components/helpers/InputValue.svelte          |  8 +++++---
 .../apps/components/helpers/RunnableComponent.svelte   |  6 ++++--
 .../src/lib/components/apps/components/helpers/eval.ts | 10 +++++++---
 .../editor/inlineScriptsPanel/EmptyInlineScript.svelte |  3 +--
 frontend/src/lib/components/apps/utils.ts              |  1 +
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 46ae351409..b67d90f030 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -16,7 +16,7 @@
 	export let extraContext: Record<string, any> = {}
 	export let key: string = ''
 
-	const { componentControl } = getContext<AppViewerContext>('AppViewerContext')
+	const { componentControl, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	const dispatch = createEventDispatcher()
 
@@ -90,7 +90,8 @@
 				$state,
 				$mode == 'dnd',
 				$componentControl,
-				$worldStore
+				$worldStore,
+				$runnableComponents
 			)
 			error = ''
 			return r
@@ -111,7 +112,8 @@
 					$state,
 					$mode == 'dnd',
 					$componentControl,
-					$worldStore
+					$worldStore,
+					$runnableComponents
 				)
 				error = ''
 				return r
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 1c292c942b..e1ebdbc504 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -155,7 +155,8 @@
 					$state,
 					$mode == 'dnd',
 					$componentControl,
-					$worldStore
+					$worldStore,
+					$runnableComponents
 				)
 				await setResult(r)
 				$state = $state
@@ -260,7 +261,8 @@
 				$state,
 				$mode == 'dnd',
 				$componentControl,
-				$worldStore
+				$worldStore,
+				$runnableComponents
 			)
 
 			if (hasRes && res === undefined) {
diff --git a/frontend/src/lib/components/apps/components/helpers/eval.ts b/frontend/src/lib/components/apps/components/helpers/eval.ts
index 97abb70627..cba8ab92d4 100644
--- a/frontend/src/lib/components/apps/components/helpers/eval.ts
+++ b/frontend/src/lib/components/apps/components/helpers/eval.ts
@@ -24,7 +24,7 @@ export function computeGlobalContext(
 
 function create_context_function_template(eval_string, context, noReturn: boolean) {
 	return `
-return async function (context, state, goto, setTab) {
+return async function (context, state, goto, setTab, recompute) {
 "use strict";
 ${
 	Object.keys(context).length > 0
@@ -40,7 +40,7 @@ function make_context_evaluator(
 	eval_string,
 	context,
 	noReturn: boolean
-): (context, state, goto, setTab) => Promise<any> {
+): (context, state, goto, setTab, recompute) => Promise<any> {
 	let template = create_context_function_template(eval_string, context, noReturn)
 	let functor = Function(template)
 	return functor()
@@ -85,7 +85,8 @@ export async function eval_like(
 	state: Record<string, any>,
 	editor: boolean,
 	controlComponents: Record<string, { setTab?: (index: number) => void }>,
-	worldStore: World | undefined
+	worldStore: World | undefined,
+	runnableComponents: Record<string, { cb?: () => void }>
 ) {
 	const proxiedState = new Proxy(state, {
 		set(target, key, value) {
@@ -120,6 +121,9 @@ export async function eval_like(
 		},
 		(id, index) => {
 			controlComponents[id]?.setTab?.(index)
+		},
+		(id) => {
+			runnableComponents[id]?.cb?.()
 		}
 	)
 }
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index 78d0ad2a43..721da28f2f 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -208,8 +208,7 @@ console.log(ctx.email)
 if (!state.foo) { state.foo = 0 }
 state.foo += 1
 
-// you can also navigate to another page
-//await goto("?foo=bar")
+// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
 
 return state.foo`,
 					language: 'frontend',
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 93f1e569bb..182af71b89 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -216,6 +216,7 @@ ${
 	goto
 		? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
 declare function setTab(id: string, index: string): void;
+declare function recompute(id: string): void;
 `
 		: ''
 }