windmill-components 1.642.0 → 1.655.0

package/package/components/apps/components/display/AppCustomComponent.svelte

@@ -5,9 +5,9 @@ import { sendUserToast } from '../../../../toast';
 import { Loader2 } from 'lucide-svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 let { id, render, componentInput, customComponent } = $props();
-let divId = `custom-component-${id}`;
+let divId = `custom-component-${untrack(() => id)}`;
 const { worldStore, workspace } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     output: undefined,
     loading: false
@@ -15,7 +15,7 @@ const outputs = initOutput($worldStore, id, {
 let setInput = $state();
 let setRender = $state();
 let ccProps = {
-    render,
+    render: untrack(() => render),
     id: divId,
     passSetters: (setter) => {
         setInput = setter.onInput;

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import DisplayResult from '../../../DisplayResult.svelte';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
@@ -14,17 +14,17 @@ let { id, componentInput, initializing = $bindable(undefined), customCss = undef
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore, componentControl, workspace, appPath } = getContext('AppViewerContext');
 let result = $state(undefined);
-const resolvedConfig = $state(initConfig(components['displaycomponent'].initialData.configuration, configuration));
-$componentControl[id] = {
+const resolvedConfig = $state(initConfig(components['displaycomponent'].initialData.configuration, untrack(() => configuration)));
+$componentControl[untrack(() => id)] = {
     setValue(value) {
         result = value;
     }
 };
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
-let css = $state(initCss($app.css?.displaycomponent, customCss));
+let css = $state(initCss($app.css?.displaycomponent, untrack(() => customCss)));
 let loading = $state(false);
 </script>
 

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -13,14 +13,14 @@ import { userStore } from '../../../../stores';
 let { id, initializing = $bindable(undefined), customCss = undefined, configuration, render } = $props();
 const { app, worldStore, workspace, appPath } = getContext('AppViewerContext');
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
-let resolvedConfig = $state(initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['jobiddisplaycomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
 initializing = false;
-let css = $state(initCss($app.css?.jobiddisplaycomponent, customCss));
+let css = $state(initCss($app.css?.jobiddisplaycomponent, untrack(() => customCss)));
 let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);

package/package/components/apps/components/display/AppDownload.svelte

@@ -13,10 +13,10 @@ import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { userStore } from '../../../../stores';
 import { isPartialS3Object, getS3File } from '../../editor/appUtilsS3';
 let { id, configuration, customCss = undefined, render, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false } = $props();
-const resolvedConfig = $state(initConfig(components['downloadcomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['downloadcomponent'].initialData.configuration, untrack(() => configuration)));
 const { app, worldStore, appPath, workspace, isEditor } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+initOutput($worldStore, untrack(() => id), {});
 let beforeIconComponent = $state();
 let afterIconComponent = $state();
 let downloadUrl = $state(undefined);
@@ -63,7 +63,7 @@ async function loadSource() {
         downloadUrl = transformBareBase64IfNecessary(resolvedConfig.source);
     }
 }
-let css = $state(initCss($app.css?.downloadcomponent, customCss));
+let css = $state(initCss($app.css?.downloadcomponent, untrack(() => customCss)));
 $effect(() => {
     resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon());
 });

package/package/components/apps/components/display/AppHtml.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore, mode } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
 let result = $state(undefined);
-let css = $state(initCss($app.css?.htmlcomponent, customCss));
+let css = $state(initCss($app.css?.htmlcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -24,6 +24,7 @@ let css = $state(initCss($app.css?.htmlcomponent, customCss));
 {/each}
 
 {#if render}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		onpointerdown={(e) => {
 			if ($mode !== 'preview') {

package/package/components/apps/components/display/AppIcon.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import { loadIcon } from '../icon';
@@ -10,16 +10,16 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 let { id, horizontalAlignment = 'left', verticalAlignment = undefined, configuration, customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['iconcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['iconcomponent'].initialData.configuration, untrack(() => configuration)));
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+initOutput($worldStore, untrack(() => id), {});
 let iconComponent = $state();
 async function handleIcon(conf, comp) {
     if (conf.icon && comp) {
         await loadIcon(conf.icon, iconComponent, conf.size, conf.strokeWidth, conf.color);
     }
 }
-let css = $state(initCss($app.css?.iconcomponent, customCss));
+let css = $state(initCss($app.css?.iconcomponent, untrack(() => customCss)));
 $effect(() => {
     handleIcon(resolvedConfig, iconComponent);
 });

package/package/components/apps/components/display/AppImage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createBubbler, preventDefault } from 'svelte/legacy';
 const bubble = createBubbler();
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
@@ -12,7 +12,7 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { userStore } from '../../../../stores';
 import { isPartialS3Object, getS3File } from '../../editor/appUtilsS3';
 let { id, configuration, customCss = undefined, render } = $props();
-const resolvedConfig = $state(initConfig(components['imagecomponent'].initialData.configuration, configuration));
+const resolvedConfig = $state(initConfig(components['imagecomponent'].initialData.configuration, untrack(() => configuration)));
 const { app, appPath, worldStore, workspace, isEditor } = getContext('AppViewerContext');
 const fit = {
     cover: 'object-cover',
@@ -20,8 +20,8 @@ const fit = {
     fill: 'object-fill'
 };
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
-let css = $state(initCss($app.css?.imagecomponent, customCss));
+initOutput($worldStore, untrack(() => id), {});
+let css = $state(initCss($app.css?.imagecomponent, untrack(() => customCss)));
 let imageUrl = $state(undefined);
 let token = getContext('AuthToken');
 async function loadImage() {

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
@@ -14,14 +14,14 @@ $effect.pre(() => {
     }
 });
 const { app, worldStore, workspace } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['jobidlogcomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['jobidlogcomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
 initializing = false;
-let css = $state(initCss($app.css?.jobidflowstatuscomponent, customCss));
+let css = $state(initCss($app.css?.jobidflowstatuscomponent, untrack(() => customCss)));
 let jobId = $derived(resolvedConfig.jobId);
 </script>
 

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -15,14 +15,14 @@ $effect.pre(() => {
     }
 });
 const { app, worldStore, workspace } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['jobidlogcomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['jobidlogcomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
 initializing = false;
-let css = $state(initCss($app.css?.jobidlogcomponent, customCss));
+let css = $state(initCss($app.css?.jobidlogcomponent, untrack(() => customCss)));
 let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);

package/package/components/apps/components/display/AppJobProgressBar.svelte

@@ -16,14 +16,14 @@ $effect.pre(() => {
     }
 });
 const { app, worldStore, workspace } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['jobprogressbarcomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['jobprogressbarcomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false,
     jobId: undefined
 });
 initializing = false;
-let css = $state(initCss($app.css?.jobprogressbarcomponent, customCss));
+let css = $state(initCss($app.css?.jobprogressbarcomponent, untrack(() => customCss)));
 let jobLoader = $state(undefined);
 let testIsLoading = $state(false);
 let testJob = $state(undefined);

package/package/components/apps/components/display/AppMap.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initCss } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import { Map, View, Feature } from 'ol';
@@ -20,8 +20,8 @@ const LAYER_NAME = {
 };
 let { id, configuration, customCss = undefined, render, extraKey = undefined } = $props();
 const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['mapcomponent'].initialData.configuration, configuration));
-let outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['mapcomponent'].initialData.configuration, untrack(() => configuration)));
+let outputs = initOutput($worldStore, untrack(() => id), {
     mapRegion: {
         topLeft: { lat: 0, lon: 0 },
         bottomRight: { lat: 0, lon: 0 }
@@ -110,7 +110,7 @@ function updateInteractions(map) {
     });
     map.changed();
 }
-let css = $state(initCss($app.css?.mapcomponent, customCss));
+let css = $state(initCss($app.css?.mapcomponent, untrack(() => customCss)));
 function updateRegionOutput() {
     if (map && !resolvedConfig.lock) {
         let extent = map.getView().calculateExtent(map.getSize());
@@ -219,6 +219,7 @@ $effect(() => {
 
 {#if render}
 	<div class="relative h-full w-full component-wrapper">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			onpointermove={updateRegionOutput}
 			onwheel={updateRegionOutput}
@@ -230,6 +231,7 @@ $effect(() => {
 		></div>
 
 		{#if $mode !== 'preview'}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
 				onpointerdown={handleSyncRegion}

package/package/components/apps/components/display/AppMarkdown.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -17,13 +17,13 @@ const plugins = [
     { rehypePlugin: [rehypeGithubAlerts] }
 ];
 const { app, worldStore, mode } = getContext('AppViewerContext');
-const resolvedConfig = $state(initConfig(components['mardowncomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+const resolvedConfig = $state(initConfig(components['mardowncomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
 let result = $state(undefined);
-let css = $state(initCss($app.css?.mardowncomponent, customCss));
+let css = $state(initCss($app.css?.mardowncomponent, untrack(() => customCss)));
 const proseMapping = {
     sm: 'prose-sm',
     Default: 'prose-base',
@@ -53,6 +53,7 @@ const proseMapping = {
 {/each}
 
 {#if render}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		onpointerdown={(e) => {
 			if ($mode != 'preview') {

package/package/components/apps/components/display/AppMenu.svelte

@@ -13,13 +13,13 @@ import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import { Menubar, Menu, MeltButton } from '../../../meltComponents';
 let { id, configuration, customCss = undefined, render, horizontalAlignment = undefined, verticalAlignment = undefined, menuItems } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     result: {
         latestButtonClicked: undefined
     }
 });
-const resolvedConfig = $state(initConfig(components['menucomponent'].initialData.configuration, configuration));
-let css = $state(initCss($app.css?.menucomponent, customCss));
+const resolvedConfig = $state(initConfig(components['menucomponent'].initialData.configuration, untrack(() => configuration)));
+let css = $state(initCss($app.css?.menucomponent, untrack(() => customCss)));
 let beforeIconComponent = $state();
 let afterIconComponent = $state();
 async function handleBeforeIcon() {
@@ -120,6 +120,7 @@ let menu = $state();
 						{#if menuItems.length > 0}
 							{#each menuItems as actionButton, actionIndex (actionButton?.id)}
 								{#if actionButton.type == 'buttoncomponent'}
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
 									<div
 										onpointerup={() => {
 											outputs?.result.set({

package/package/components/apps/components/display/AppNavbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createBubbler, preventDefault } from 'svelte/legacy';
 const bubble = createBubbler();
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import { components } from '../../editor/component';
@@ -12,13 +12,13 @@ import { twMerge } from 'tailwind-merge';
 import AppNavbarItem from './AppNavbarItem.svelte';
 let { id, configuration, customCss = undefined, render, navbarItems = [] } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['navbarcomponent'].initialData.configuration, configuration));
-let output = $state(initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['navbarcomponent'].initialData.configuration, untrack(() => configuration)));
+let output = $state(initOutput($worldStore, untrack(() => id), {
     result: {
         currentPath: undefined
     }
 }));
-let css = $state(initCss($app.css?.navbarcomponent, customCss));
+let css = $state(initCss($app.css?.navbarcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(components['navbarcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppPdf.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
@@ -9,7 +9,7 @@ import { userStore } from '../../../../stores';
 import { isPartialS3Object, getS3File } from '../../editor/appUtilsS3';
 let { id, configuration, customCss = undefined, render } = $props();
 const { app, worldStore, appPath, workspace, isEditor } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     loading: false
 });
 let source = $state(undefined);
@@ -51,7 +51,7 @@ async function loadSource() {
 $effect(() => {
     source && loadSource();
 });
-let css = $state(initCss($app.css?.pdfcomponent, customCss));
+let css = $state(initCss($app.css?.pdfcomponent, untrack(() => customCss)));
 </script>
 
 <InputValue key="source" {id} input={configuration.source} bind:value={source} />

package/package/components/apps/components/display/AppPieChart.svelte

@@ -3,13 +3,13 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { initCss } from '../../utils';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -38,7 +38,7 @@ let data = $derived({
         }
     ]
 });
-let css = $state(initCss($app.css?.piechartcomponent, customCss));
+let css = $state(initCss($app.css?.piechartcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}

package/package/components/apps/components/display/AppRecomputeAll.svelte

@@ -10,12 +10,12 @@ import RecomputeAllWrapper from '../../editor/RecomputeAllWrapper.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 let { id, initializing = $bindable(undefined), customCss = undefined, configuration, render, horizontalAlignment = undefined } = $props();
 const { app, worldStore, policy, recomputeAllContext } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['recomputeallcomponent'].initialData.configuration, configuration));
-initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['recomputeallcomponent'].initialData.configuration, untrack(() => configuration)));
+initOutput($worldStore, untrack(() => id), {
     loading: undefined
 });
 initializing = false;
-let css = $state(initCss($app.css?.recomputeallcomponent, customCss));
+let css = $state(initCss($app.css?.recomputeallcomponent, untrack(() => customCss)));
 function handleRefreshInterval() {
     if (resolvedConfig.defaultRefreshInterval !== undefined) {
         const newInterval = typeof resolvedConfig.defaultRefreshInterval === 'number'

package/package/components/apps/components/display/AppScatterChart.svelte

@@ -3,7 +3,7 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import { initCss } from '../../utils';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
@@ -12,7 +12,7 @@ let { id, componentInput, configuration, initializing = $bindable(undefined), cu
 let zoomable = $state(false);
 let pannable = $state(false);
 const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -41,7 +41,7 @@ let options = $derived({
 let data = $derived({
     datasets: result ?? []
 });
-let css = $state(initCss($app.css?.scatterchartcomponent, customCss));
+let css = $state(initCss($app.css?.scatterchartcomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}

package/package/components/apps/components/display/AppStatCard.svelte

@@ -13,9 +13,9 @@ import Loader from '../helpers/Loader.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 let { id, configuration, customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['statcomponent'].initialData.configuration, configuration));
-initOutput($worldStore, id, {});
-let css = $state(initCss($app.css?.statcomponent, customCss));
+let resolvedConfig = $state(initConfig(components['statcomponent'].initialData.configuration, untrack(() => configuration)));
+initOutput($worldStore, untrack(() => id), {});
+let css = $state(initCss($app.css?.statcomponent, untrack(() => customCss)));
 let iconComponent = $state();
 async function handleIcon() {
     if (resolvedConfig?.media?.configuration?.icon?.icon) {

package/package/components/apps/components/display/AppText.svelte

@@ -14,26 +14,28 @@ import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { initCss } from '../../utils';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, horizontalAlignment = 'left', verticalAlignment = undefined, configuration, initializing = $bindable(undefined), customCss = undefined, render, editorMode = $bindable(false) } = $props();
-let resolvedConfig = $state(initConfig(components['textcomponent'].initialData.configuration, configuration));
+let resolvedConfig = $state(initConfig(components['textcomponent'].initialData.configuration, untrack(() => configuration)));
 function onEditorMode() {
     autosize();
     setTimeout(() => autosize(), 50);
 }
 const { app, worldStore, mode, componentControl } = getContext('AppViewerContext');
-let css = $state(initCss($app.css?.textcomponent, customCss));
+let css = $state(initCss($app.css?.textcomponent, untrack(() => customCss)));
 let result = $state(undefined);
-if (componentInput?.type == 'template' ||
-    (componentInput?.type == 'templatev2' && !isCodeInjection(componentInput.eval))) {
-    result = componentInput.eval;
+const untrackedComponentInput = untrack(() => componentInput);
+if (untrackedComponentInput?.type == 'template' ||
+    (untrackedComponentInput?.type == 'templatev2' &&
+        !isCodeInjection(untrackedComponentInput.eval))) {
+    result = untrackedComponentInput.eval;
     initializing = false;
 }
-$componentControl[id] = {
-    ...$componentControl[id],
+$componentControl[untrack(() => id)] = {
+    ...$componentControl[untrack(() => id)],
     setValue(value) {
         result = value;
     }
 };
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: untrack(() => result),
     loading: initializing
 });

package/package/components/apps/components/display/AppTimeseries.svelte

@@ -4,14 +4,14 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { Scatter } from '../../../chartjs-wrappers/chartJs';
 import InputValue from '../helpers/InputValue.svelte';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { initCss } from '../../utils';
 import { initOutput } from '../../editor/appUtils';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -51,7 +51,7 @@ let options = $derived({
 let data = $derived({
     datasets: result ?? []
 });
-let css = $state(initCss($app.css?.timeseriescomponent, customCss));
+let css = $state(initCss($app.css?.timeseriescomponent, untrack(() => customCss)));
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}

package/package/components/apps/components/display/InsertRowDrawerButton.svelte

@@ -13,7 +13,7 @@ const onConfirm = async () => {
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
 			onConfirm()
 		}

package/package/components/apps/components/display/PlotlyHtml.svelte

@@ -8,8 +8,8 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 let { id, componentInput, configuration, initializing = $bindable(undefined), render } = $props();
 const { worldStore, darkMode } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['plotlycomponent'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['plotlycomponent'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -89,6 +89,7 @@ $effect.pre(() => {
 					</Alert>
 				</div>
 			{/if}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>

package/package/components/apps/components/display/PlotlyHtmlV2.svelte

@@ -8,8 +8,8 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 let { id, componentInput, configuration, datasets, xData, initializing = $bindable(undefined), render } = $props();
 const { worldStore, darkMode } = getContext('AppViewerContext');
-let resolvedConfig = $state(initConfig(components['plotlycomponentv2'].initialData.configuration, configuration));
-const outputs = initOutput($worldStore, id, {
+let resolvedConfig = $state(initConfig(components['plotlycomponentv2'].initialData.configuration, untrack(() => configuration)));
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -154,6 +154,7 @@ $effect(() => {
 					</Alert>
 				</div>
 			{/if}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>

package/package/components/apps/components/display/ResolveNavbarItemPath.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import {} from '../../editor/component';
+<script lang="ts">import { untrack } from 'svelte';
+import {} from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { initConfig } from '../../editor/appUtils';
 let { navbarItem, id, index, resolvedPath = $bindable(undefined) } = $props();
-let resolvedConfig = $state(initConfig({ path: navbarItem.path }, { path: navbarItem.path }));
+let resolvedConfig = $state(initConfig({ path: untrack(() => navbarItem).path }, { path: untrack(() => navbarItem).path }));
 $effect.pre(() => {
     resolvedPath = (resolvedConfig?.path?.selected === 'href'
         ? resolvedConfig?.path?.configuration?.href?.href

package/package/components/apps/components/display/VegaLiteHtml.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
-import { getContext, onMount } from 'svelte';
+import { getContext, onMount, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -8,7 +8,7 @@ let { id, componentInput, configuration, initializing = $bindable(undefined), re
 let result = $state(undefined);
 let divEl = $state(null);
 const { worldStore } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, untrack(() => id), {
     result: undefined,
     loading: false
 });
@@ -55,6 +55,7 @@ $effect(() => {
 {#if render}
 	<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 		<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div onpointerdown={bubble('pointerdown')} bind:this={divEl}></div>
 		</RunnableWrapper>
 	</div>