From abb1cbb8ac9d39b4523542b35f0323be2a7db3ff Mon Sep 17 00:00:00 2001 From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com> Date: Fri, 11 Apr 2025 17:17:42 +0200 Subject: [PATCH] svelte 5 dispatch fixes (#5604) * dispatchIfMounted * fixed all warnings * typo * fix another infinite loop * buggy date time input on runs page when changing search params --- frontend/src/lib/components/ArgInput.svelte | 4 +++- .../src/lib/components/DateTimeInput.svelte | 5 +++-- frontend/src/lib/components/DiffEditor.svelte | 2 +- .../src/lib/components/DisplayResult.svelte | 4 +++- .../lib/components/EditableSchemaForm.svelte | 4 +++- frontend/src/lib/components/JsonEditor.svelte | 4 +++- .../LightweightResourcePicker.svelte | 6 ++++-- .../src/lib/components/ResourceEditor.svelte | 4 +++- .../src/lib/components/ResourcePicker.svelte | 6 +++--- .../src/lib/components/ScriptEditor.svelte | 4 +++- .../src/lib/components/WorkerGroup.svelte | 16 ++++++++-------- .../apps/components/helpers/InputValue.svelte | 6 +++++- .../helpers/RunnableComponent.svelte | 4 +++- .../apps/editor/ComponentHeader.svelte | 7 ++----- .../apps/editor/DecisionTreeDebug.svelte | 1 + .../editor/componentsPanel/CssProperty.svelte | 4 +++- .../editor/componentsPanel/ListItem.svelte | 4 +++- .../componentsPanel/QuickStyleMenu.svelte | 3 ++- .../componentsPanel/QuickStyleProperty.svelte | 4 +++- .../decisionTree/DecisionTreePreview.svelte | 4 +++- .../inputEditor/ColorInput.svelte | 4 +++- .../apps/svelte-select/lib/Select.svelte | 6 ++++-- .../components/common/button/Button.svelte | 4 +++- .../clearableInput/ClearableInput.svelte | 4 +++- .../common/drawer/Disposable.svelte | 5 ++++- .../components/common/menu/ResolveOpen.svelte | 10 +++------- .../lib/components/common/tabs/Tabs.svelte | 13 +++---------- .../lib/components/copilot/IteratorGen.svelte | 4 +++- .../lib/components/copilot/MetadataGen.svelte | 6 +++--- .../components/copilot/StepInputGen.svelte | 10 ++++++---- .../schema/FlowPropertyEditor.svelte | 4 +++- .../components/schema/PropertyEditor.svelte | 6 ++++-- .../src/lib/components/table/DataTable.svelte | 4 +++- frontend/src/lib/createDispatcherIfMounted.ts | 19 +++++++++++++++++++ .../(logged)/runs/[...path]/+page.svelte | 4 +++- 35 files changed, 129 insertions(+), 70 deletions(-) create mode 100644 frontend/src/lib/createDispatcherIfMounted.ts diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index 554de1ae1f..b737ed21cd 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -38,6 +38,7 @@ import type { Script } from '$lib/gen' import type { SchemaDiff } from '$lib/components/schema/schemaUtils' import type { ComponentCustomCSS } from './apps/types' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' export let label: string = '' export let value: any @@ -150,6 +151,7 @@ } const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) let ignoreValueUndefined = false let error: string = '' @@ -388,7 +390,7 @@ function compareValues(value) { if (!deepEqual(oldValue, value)) { oldValue = value - dispatch('change') + dispatchIfMounted('change') } } diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte index 3386a0241e..cee3250db1 100644 --- a/frontend/src/lib/components/DateTimeInput.svelte +++ b/frontend/src/lib/components/DateTimeInput.svelte @@ -3,6 +3,7 @@ import { Button } from './common' import { Clock, X } from 'lucide-svelte' import { twMerge } from 'tailwind-merge' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' // import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte' // import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte' @@ -43,14 +44,13 @@ let initialTime = time function parseDateAndTime(date: string | undefined, time: string | undefined) { - console.log(date, time) if (date && time && (initialDate != date || initialTime != time)) { let newDate = new Date(`${date}T${time}`) if (newDate.toString() === 'Invalid Date') return if (newDate.getFullYear() < 2000) return value = newDate.toISOString() - dispatch('change', value) + dispatchIfMounted('change', value) } } @@ -61,6 +61,7 @@ } const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) function setTimeLater(mins: number) { let newDate = new Date() diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte index 1ffe6714fc..92acf052e6 100644 --- a/frontend/src/lib/components/DiffEditor.svelte +++ b/frontend/src/lib/components/DiffEditor.svelte @@ -131,7 +131,7 @@ bind:this={diffDivEl} class="{$$props.class} editor nonmain-editor" bind:clientWidth={editorWidth} - /> + > {#if showButtons}
1000000 const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) function parseJson() { try { @@ -21,7 +23,7 @@ return } value = JSON.parse(code ?? '') - dispatch('changeValue', value) + dispatchIfMounted('changeValue', value) error = '' } catch (e) { error = e.message diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte index d1ad6eae80..8f8e77c158 100644 --- a/frontend/src/lib/components/LightweightResourcePicker.svelte +++ b/frontend/src/lib/components/LightweightResourcePicker.svelte @@ -10,8 +10,10 @@ import { Plus, Loader2, Link2Off } from 'lucide-svelte' import type { AppViewerContext } from './apps/types' import { sendUserToast } from '$lib/toast' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) export let initialValue: string | undefined = undefined export let value: string | undefined = initialValue @@ -29,7 +31,7 @@ ? { value: value ?? initialValue, label: value ?? initialValue - } + } : undefined let collection = [valueSelect] @@ -64,7 +66,7 @@ $: $workspaceStore && loadResources(resourceType) - $: dispatch('change', value) + $: dispatchIfMounted('change', value) let darkMode: boolean = false diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte index 576d6cf25b..10f6086b83 100644 --- a/frontend/src/lib/components/ResourceEditor.svelte +++ b/frontend/src/lib/components/ResourceEditor.svelte @@ -18,6 +18,7 @@ import autosize from '$lib/autosize' import GfmMarkdown from './GfmMarkdown.svelte' import TestTriggerConnection from './triggers/TestTriggerConnection.svelte' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' export let canSave = true export let resource_type: string | undefined = undefined @@ -52,8 +53,9 @@ let viewJsonSchema = false const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) - $: watchChanges && dispatch('change', { path, args, description }) + $: watchChanges && dispatchIfMounted('change', { path, args, description }) let rawCode: string | undefined = undefined diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte index 502cfe1014..42e93eab6e 100644 --- a/frontend/src/lib/components/ResourcePicker.svelte +++ b/frontend/src/lib/components/ResourcePicker.svelte @@ -12,8 +12,10 @@ import DarkModeObserver from './DarkModeObserver.svelte' import { Pen, Plus, RotateCw } from 'lucide-svelte' import { sendUserToast } from '$lib/toast' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) export let initialValue: string | undefined = undefined export let value: string | undefined = initialValue @@ -97,9 +99,7 @@ $: $workspaceStore && loadResources(resourceType) - let oldValue = value - $: (oldValue !== value) && dispatch('change', (oldValue = value)) - + $: dispatchIfMounted('change', value) let appConnect: AppConnect let resourceEditor: ResourceEditorDrawer diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte index 296276a0c2..67943052b8 100644 --- a/frontend/src/lib/components/ScriptEditor.svelte +++ b/frontend/src/lib/components/ScriptEditor.svelte @@ -43,6 +43,7 @@ import HideButton from './apps/editor/settingsPanel/HideButton.svelte' import { base } from '$lib/base' import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/core' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' // Exported export let schema: Schema | any = emptySchema() @@ -87,10 +88,11 @@ } const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) $: watchChanges && (code != undefined || schema != undefined) && - dispatch('change', { code, schema }) + dispatchIfMounted('change', { code, schema }) let width = 1200 diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte index 00230b7255..fbb6154e19 100644 --- a/frontend/src/lib/components/WorkerGroup.svelte +++ b/frontend/src/lib/components/WorkerGroup.svelte @@ -78,10 +78,10 @@ ? config : { worker_tags: [] - } + } : { worker_tags: [] - } + } if (nconfig.priority_tags === undefined) { nconfig.priority_tags = new Map() } @@ -215,7 +215,7 @@ Workers can still have their WORKER_TAGS, INIT_SCRIPT and WHITELIST_ENVS passed as env. Dedicated workers are an enterprise only feature. -
+
{/if} {#if nconfig !== undefined} -
+
+
-
+
{/if}
-
+
@@ -731,7 +731,7 @@ bind:config={nconfig.autoscaling} />
-
+
| undefined @@ -76,8 +77,11 @@ debounceTemplate() const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) if (input == undefined) { + // How did this ever do anything at the top level in svelte 4 if + // events were not being picked up before the component fully mounted? dispatch('done') } @@ -244,7 +248,7 @@ } await tick() - dispatch('done') + dispatchIfMounted('done') } function onEvalChange(previousValueKey: string) { diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index a6cafda2b9..d1f191fe08 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -27,6 +27,7 @@ import { ctxRegex } from '../../utils' import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3' import SchemaForm from '$lib/components/SchemaForm.svelte' + import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted' // Component props export let id: string @@ -88,6 +89,7 @@ const groupContext = getContext('GroupContext') const dispatch = createEventDispatcher() + const dispatchIfMounted = createDispatcherIfMounted(dispatch) $runnableComponents = $runnableComponents @@ -139,7 +141,7 @@ resultJobLoader && refreshIfAutoRefresh('arg changed') - $: runnableInputValues && dispatch('argsChanged') + $: runnableInputValues && dispatchIfMounted('argsChanged') $: refreshOn = runnable && runnable.type === 'runnableByName' ? (runnable.inlineScript?.refreshOn ?? []) : [] diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte index a4a516b06f..fb56501b97 100644 --- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte +++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte @@ -59,9 +59,6 @@ return Object.values(componentOptions).some((value) => value) } - let connectingPopupHover = false - $: connectingPopupHover && dispatch('mouseover') - let hoverHeader = false @@ -126,8 +123,8 @@ selected ? 'bg-blue-600/90 text-white' : $connectingInput.opened - ? 'bg-[#f8aa4b]/90 text-white' - : 'bg-blue-400/90 text-white' + ? 'bg-[#f8aa4b]/90 text-white' + : 'bg-blue-400/90 text-white' )} >
{`${isSmall ? '' : 'Debugging node'} ${nodes[$debuggingComponents[id] ?? 0]?.id}`} +