From d9c7aac97665fad7200a66f2ecd4ebee5a420c18 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 26 Jun 2023 13:38:12 +0200 Subject: [PATCH] fix: improve list component force recompute --- .../components/apps/components/buttons/AppButton.svelte | 2 +- .../apps/components/buttons/AppFormButton.svelte | 2 +- .../apps/components/helpers/HiddenComponent.svelte | 2 +- .../apps/components/helpers/RefreshButton.svelte | 2 +- .../apps/components/helpers/RunnableComponent.svelte | 7 +++++-- .../apps/components/helpers/RunnableWrapper.svelte | 2 +- .../src/lib/components/apps/components/helpers/eval.ts | 4 ++-- .../components/apps/components/inputs/AppCheckbox.svelte | 2 +- .../components/apps/components/inputs/AppSelect.svelte | 2 +- .../components/apps/editor/RecomputeAllComponents.svelte | 4 ++-- .../editor/inlineScriptsPanel/InlineScriptEditor.svelte | 6 ++++-- .../apps/editor/inlineScriptsPanel/RunButton.svelte | 8 ++++---- frontend/src/lib/components/apps/types.ts | 2 +- frontend/src/lib/components/apps/utils.ts | 2 +- 14 files changed, 26 insertions(+), 21 deletions(-) diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte index d9636d9f25..272cfcd47d 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte @@ -85,7 +85,7 @@ } if (!runnableComponent) { - runnableWrapper?.onSuccess?.() + runnableWrapper?.handleSideEffect(true) } else { await runnableComponent?.runComponent() } diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte index 0028b12dae..991ce500e0 100644 --- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte +++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte @@ -110,7 +110,7 @@ }} on:click={async () => { if (!runnableComponent) { - runnableWrapper?.onSuccess() + runnableWrapper?.handleSideEffect(true) } else { await runnableComponent?.runComponent() } diff --git a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte index 1128305299..3cdaeeb91d 100644 --- a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte @@ -16,7 +16,7 @@ export function onSuccess() { if (runnable.recomputeIds) { - runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb()) + runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb())) } } diff --git a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte index f0f3c202be..6961407bcc 100644 --- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte @@ -8,7 +8,7 @@ const { runnableComponents } = getContext('AppViewerContext') async function refresh() { - await $runnableComponents[componentId]?.cb?.() + await $runnableComponents[componentId]?.cb?.map((cb) => cb()) } diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index a7e27a57ea..677033d34d 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -377,7 +377,7 @@ $runnableComponents[id] = { autoRefresh: autoRefresh && recomputableByRefreshButton, refreshOnStart: refreshOnStart, - cb: cancellableRun + cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun] } if (!$initialized.initializedComponents.includes(id)) { @@ -388,7 +388,10 @@ onDestroy(() => { $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id) $errorByComponent = clearErrorByComponentId(id, $errorByComponent) - delete $runnableComponents[id] + $runnableComponents[id] = { + ...$runnableComponents[id], + cb: $runnableComponents[id].cb.filter((cb) => cb !== cancellableRun) + } $runnableComponents = $runnableComponents }) diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte index 364cae93b0..5121cb7d6f 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte @@ -84,7 +84,7 @@ const sideEffect = success ? doOnSuccess : doOnError if (recomputeIds && success) { - recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb()) + recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb.map((cb) => cb())) } if (!sideEffect) return diff --git a/frontend/src/lib/components/apps/components/helpers/eval.ts b/frontend/src/lib/components/apps/components/helpers/eval.ts index 36a040b69f..54c3f40573 100644 --- a/frontend/src/lib/components/apps/components/helpers/eval.ts +++ b/frontend/src/lib/components/apps/components/helpers/eval.ts @@ -99,7 +99,7 @@ export async function eval_like( } >, worldStore: World | undefined, - runnableComponents: Record void }> + runnableComponents: Record void)[] }> ) { const proxiedState = new Proxy(state, { set(target, key, value) { @@ -136,7 +136,7 @@ export async function eval_like( controlComponents[id]?.setTab?.(index) }, (id) => { - runnableComponents[id]?.cb?.() + runnableComponents[id]?.cb?.forEach((f) => f()) }, (id) => { return controlComponents[id]?.agGrid diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte index 81ca528dcd..6ccba8ac49 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte @@ -63,7 +63,7 @@ listInputs(id, value) } if (recomputeIds) { - recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb()) + recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) } } diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte index 003b120207..dd6a187ed8 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte @@ -113,7 +113,7 @@ listInputs(id, result) } if (recomputeIds) { - recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb()) + recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f())) } } diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte index a2106c2bef..c86479cdb2 100644 --- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte +++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte @@ -50,7 +50,7 @@ loading = true const promises = Object.keys($runnableComponents) - .map((id) => { + .flatMap((id) => { if ( !$runnableComponents?.[id]?.autoRefresh && (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart) @@ -58,7 +58,7 @@ return } - return $runnableComponents?.[id]?.cb?.() + return $runnableComponents?.[id]?.cb?.map((f) => f()) }) .filter(Boolean) diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index 57b42a3059..44bff2bb0d 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -214,7 +214,7 @@ inlineScript.content = editor?.getCode() ?? '' } runLoading = true - await $runnableComponents[id]?.cb?.(inlineScript) + await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? []) runLoading = false }} on:change={async (e) => { @@ -241,7 +241,9 @@ lang="javascript" cmdEnterAction={async () => { runLoading = true - await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined) + await await Promise.all( + $runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined)) + ) runLoading = false }} on:change={() => { diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte index 84101e686c..9e3a4d7a9b 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte @@ -11,7 +11,7 @@ export let hideShortcut = false const { runnableComponents } = getContext('AppViewerContext') - let cancelable: CancelablePromise | undefined = undefined + let cancelable: CancelablePromise[] | undefined = undefined {#if $runnableComponents[id] != undefined} @@ -25,8 +25,8 @@ on:click={async () => { runLoading = true try { - cancelable = $runnableComponents[id]?.cb?.(inlineScript) - await cancelable + cancelable = $runnableComponents[id]?.cb?.map((f) => f(inlineScript)) + await Promise.all(cancelable) } catch {} runLoading = false }} @@ -48,7 +48,7 @@ variant="border" btnClasses="!px-2 !py-1.5" on:click={async () => { - cancelable?.cancel() + cancelable?.forEach((f) => f.cancel()) runLoading = false }} > diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts index 3ad8b1c6da..bb94d395a3 100644 --- a/frontend/src/lib/components/apps/types.ts +++ b/frontend/src/lib/components/apps/types.ts @@ -176,7 +176,7 @@ export type AppViewerContext = { { autoRefresh: boolean refreshOnStart?: boolean - cb: (inlineScript?: InlineScript) => CancelablePromise + cb: ((inlineScript?: InlineScript) => CancelablePromise)[] } > > diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts index eda6378c8e..f8fdba44df 100644 --- a/frontend/src/lib/components/apps/utils.ts +++ b/frontend/src/lib/components/apps/utils.ts @@ -227,7 +227,7 @@ declare const iter: {index: number, value: any}; } export function getAllScriptNames(app: App): string[] { - const names = app.grid.reduce((acc, gridItem: GridItem) => { + const names = allItems(app.grid, app?.subgrids).reduce((acc, gridItem: GridItem) => { const { componentInput } = gridItem.data if (