windmill-components 1.493.10 → 1.501.4

package/package/components/apps/components/display/AppCarouselList.svelte

@@ -12,39 +12,37 @@ import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-svelte';
 import { Button } from '../../../common';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let customCss = undefined;
-export let render;
-export let initializing;
-export let componentContainerHeight;
+let { id, componentInput, configuration, customCss = undefined, render, initializing = $bindable(), componentContainerHeight } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
-let everRender = render;
-$: render && !everRender && (everRender = true);
+let everRender = $state(render);
+$effect.pre(() => {
+    render && !everRender && (everRender = true);
+});
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false,
     inputs: {}
 });
-const resolvedConfig = initConfig(components['carousellistcomponent'].initialData.configuration, configuration);
+const resolvedConfig = $state(initConfig(components['carousellistcomponent'].initialData.configuration, configuration));
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
         subGridIndex: 0
     };
 }
-let css = initCss($app.css?.carousellistcomponent, customCss);
-let result = undefined;
-let inputs = {};
-let carousel;
-$: $selectedComponent?.includes(id) &&
-    $focusedGrid === undefined &&
-    ($focusedGrid = {
-        parentComponentId: id,
-        subGridIndex: 0
-    });
-let currentPageIndex = 0;
+let css = $state(initCss($app.css?.carousellistcomponent, customCss));
+let result = $state(undefined);
+let inputs = $state({});
+let carousel = $state();
+$effect.pre(() => {
+    $selectedComponent?.includes(id) &&
+        $focusedGrid === undefined &&
+        ($focusedGrid = {
+            parentComponentId: id,
+            subGridIndex: 0
+        });
+});
+let currentPageIndex = $state(0);
 </script>
 
 {#each Object.keys(components['carousellistcomponent'].initialData.configuration) as key (key)}
@@ -100,41 +98,45 @@ let currentPageIndex = 0;
 								}
 							}}
 						>
-							<div slot="prev" class="h-full flex justify-center flex-col p-2">
-								<div>
-									<Button
-										color="light"
-										on:click={() => {
-											const pagesCount = result?.length ?? 0
+							{#snippet prev()}
+								<div class="h-full flex justify-center flex-col p-2">
+									<div>
+										<Button
+											color="light"
+											on:click={() => {
+												const pagesCount = result?.length ?? 0
 
-											if (currentPageIndex > 0) {
-												carousel.goTo(currentPageIndex - 1)
-											} else {
-												carousel.goTo(pagesCount - 1)
-											}
-										}}
-									>
-										<ArrowLeftCircle size={16} />
-									</Button>
+												if (currentPageIndex > 0) {
+													carousel.goTo(currentPageIndex - 1)
+												} else {
+													carousel.goTo(pagesCount - 1)
+												}
+											}}
+										>
+											<ArrowLeftCircle size={16} />
+										</Button>
+									</div>
 								</div>
-							</div>
-							<div slot="next" class="h-full flex justify-center flex-col p-2">
-								<div>
-									<Button
-										color="light"
-										on:click={() => {
-											const pagesCount = result?.length ?? 0
-											if (currentPageIndex < pagesCount - 1) {
-												carousel.goTo(currentPageIndex + 1)
-											} else {
-												carousel.goTo(0)
-											}
-										}}
-									>
-										<ArrowRightCircle size={16} />
-									</Button>
+							{/snippet}
+							{#snippet next()}
+								<div class="h-full flex justify-center flex-col p-2">
+									<div>
+										<Button
+											color="light"
+											on:click={() => {
+												const pagesCount = result?.length ?? 0
+												if (currentPageIndex < pagesCount - 1) {
+													carousel.goTo(currentPageIndex + 1)
+												} else {
+													carousel.goTo(0)
+												}
+											}}
+										>
+											<ArrowRightCircle size={16} />
+										</Button>
+									</div>
 								</div>
-							</div>
+							{/snippet}
 							{#each result ?? [] as value, index}
 								<div class="overflow-auto w-full">
 									<ListWrapper

package/package/components/apps/components/display/AppCarouselList.svelte.d.ts

@@ -1,28 +1,14 @@
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 import type { AppInput } from '../../inputType';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppCarouselList: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     componentInput: AppInput | undefined;
     configuration: RichConfigurations;
-    customCss?: ComponentCustomCSS<"carousellistcomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'carousellistcomponent'> | undefined;
     render: boolean;
     initializing: boolean | undefined;
     componentContainerHeight: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppCarouselList = InstanceType<typeof AppCarouselList>;
+}
+declare const AppCarouselList: import("svelte").Component<Props, {}, "initializing">;
+type AppCarouselList = ReturnType<typeof AppCarouselList>;
 export default AppCarouselList;

package/package/components/apps/components/display/AppChartJs.svelte

@@ -8,27 +8,22 @@ import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
+let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render } = $props();
 const { app, worldStore } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
 ChartJS.register(...registerables);
-let result = undefined;
-const resolvedConfig = initConfig(components['chartjscomponent'].initialData.configuration, configuration);
-$: options = {
+let result = $state(undefined);
+const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, configuration));
+let options = $derived({
     responsive: true,
     animation: false,
     maintainAspectRatio: false,
     ...(resolvedConfig.options ?? {})
-};
-let css = initCss($app.css?.chartjscomponent, customCss);
+});
+let css = $state(initCss($app.css?.chartjscomponent, customCss));
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppChartJs.svelte.d.ts

@@ -1,27 +1,13 @@
 import type { AppInput } from '../../inputType';
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppChartJs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     componentInput: AppInput | undefined;
     configuration: RichConfigurations;
     initializing?: boolean | undefined;
-    customCss?: ComponentCustomCSS<"chartjscomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'chartjscomponent'> | undefined;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppChartJs = InstanceType<typeof AppChartJs>;
+}
+declare const AppChartJs: import("svelte").Component<Props, {}, "initializing">;
+type AppChartJs = ReturnType<typeof AppChartJs>;
 export default AppChartJs;

package/package/components/apps/components/display/AppChartJsV2.svelte

@@ -9,30 +9,23 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { deepMergeWithPriority } from '../../../../utils';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-export let datasets;
-export let xData;
-let resolvedDatasets;
-let resolvedDatasetsValues = [];
-let resolvedXData = [];
+let { id, componentInput, configuration, initializing = $bindable(undefined), customCss = undefined, render, datasets, xData } = $props();
+let resolvedDatasets = $state(undefined);
+let resolvedDatasetsValues = $state([]);
+let resolvedXData = $state([]);
 const { app, worldStore, darkMode } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
 ChartJS.register(...registerables);
-let result = undefined;
-const resolvedConfig = initConfig(components['chartjscomponent'].initialData.configuration, configuration);
+let result = $state(undefined);
+const resolvedConfig = $state(initConfig(components['chartjscomponent'].initialData.configuration, configuration));
 function hasScales() {
     const type = resolvedConfig?.type;
     return type === 'bar' || type === 'line' || type === 'scatter' || type === 'bubble';
 }
-$: options = deepMergeWithPriority(resolvedConfig.options, {
+let options = $derived(deepMergeWithPriority(resolvedConfig.options, {
     responsive: true,
     animation: false,
     maintainAspectRatio: false,
@@ -57,18 +50,17 @@ $: options = deepMergeWithPriority(resolvedConfig.options, {
             }
         }
         : {})
-});
-$: data =
-    datasets && xData && resolvedDatasets
-        ? {
-            labels: resolvedXData,
-            datasets: resolvedDatasets?.map((d, index) => ({
-                label: d.name,
-                data: Array.isArray(resolvedDatasetsValues[index]) ? resolvedDatasetsValues[index] : []
-            }))
-        }
-        : result;
-let css = initCss($app.css?.chartjscomponent, customCss);
+}));
+let data = $derived(datasets && xData && resolvedDatasets
+    ? {
+        labels: resolvedXData,
+        datasets: resolvedDatasets?.map((d, index) => ({
+            label: d.name,
+            data: Array.isArray(resolvedDatasetsValues[index]) ? resolvedDatasetsValues[index] : []
+        }))
+    }
+    : result);
+let css = $state(initCss($app.css?.chartjscomponent, customCss));
 </script>
 
 {#if datasets}
@@ -122,7 +114,7 @@ let css = initCss($app.css?.chartjscomponent, customCss);
 		{#if data && resolvedConfig.type}
 			{#key resolvedConfig.type}
 				{#key options}
-					<Chart type={resolvedConfig.type} {data} {options} />
+					<Chart type={resolvedConfig.type} data={$state.snapshot(data)} {options} />
 				{/key}
 			{/key}
 		{/if}

package/package/components/apps/components/display/AppChartJsV2.svelte.d.ts

@@ -1,29 +1,15 @@
 import type { AppInput } from '../../inputType';
 import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppChartJsV2: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     componentInput: AppInput | undefined;
     configuration: RichConfigurations;
     initializing?: boolean | undefined;
-    customCss?: ComponentCustomCSS<"chartjscomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'chartjscomponent'> | undefined;
     render: boolean;
     datasets: RichConfiguration | undefined;
     xData: RichConfiguration | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppChartJsV2 = InstanceType<typeof AppChartJsV2>;
+}
+declare const AppChartJsV2: import("svelte").Component<Props, {}, "initializing">;
+type AppChartJsV2 = ReturnType<typeof AppChartJsV2>;
 export default AppChartJsV2;

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

@@ -1,13 +1,10 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount, untrack } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { sendUserToast } from '../../../../toast';
 import { Loader2 } from 'lucide-svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let render;
-export let componentInput;
-export let customComponent;
+let { id, render, componentInput, customComponent } = $props();
 let divId = `custom-component-${id}`;
 const { worldStore, workspace } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
@@ -15,8 +12,8 @@ const outputs = initOutput($worldStore, id, {
     output: undefined,
     loading: false
 });
-let setInput;
-let setRender;
+let setInput = $state();
+let setRender = $state();
 let ccProps = {
     render,
     id: divId,
@@ -28,7 +25,7 @@ let ccProps = {
         outputs.output.set(output);
     }
 };
-let loaded = false;
+let loaded = $state(false);
 let renderer = undefined;
 // $: renderer && divEl && renderer(ccProps)
 onMount(async () => {
@@ -68,16 +65,20 @@ onMount(async () => {
     }
     console.log('mounted', render, setRender);
 });
-let result;
-$: render != undefined && setRender && handleRender();
+let result = $state();
 function handleRender() {
     setRender?.(render);
 }
-$: result != undefined && setInput && handleResult();
 function handleResult() {
     setInput?.(result);
 }
 // $: result && setInput && setInput(result)
+$effect(() => {
+    render != undefined && setRender && untrack(() => handleRender());
+});
+$effect(() => {
+    result != undefined && setInput && untrack(() => handleResult());
+});
 </script>
 
 <InitializeComponent {id} />

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

@@ -1,25 +1,11 @@
 import type { AppInput } from '../../inputType';
 import type { CustomComponentConfig } from '../../editor/component';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppCustomComponent: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     render: boolean;
     componentInput: AppInput | undefined;
     customComponent: CustomComponentConfig;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppCustomComponent = InstanceType<typeof AppCustomComponent>;
+}
+declare const AppCustomComponent: import("svelte").Component<Props, {}, "">;
+type AppCustomComponent = ReturnType<typeof AppCustomComponent>;
 export default AppCustomComponent;

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

@@ -9,16 +9,11 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { userStore } from '../../../../stores';
-export let id;
-export let componentInput;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-export let configuration;
+let { id, componentInput, initializing = $bindable(undefined), customCss = undefined, render, configuration } = $props();
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore, componentControl, workspace, appPath } = getContext('AppViewerContext');
-let result = undefined;
-const resolvedConfig = initConfig(components['displaycomponent'].initialData.configuration, configuration);
+let result = $state(undefined);
+const resolvedConfig = $state(initConfig(components['displaycomponent'].initialData.configuration, configuration));
 $componentControl[id] = {
     setValue(value) {
         result = value;
@@ -28,7 +23,7 @@ const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
-let css = initCss($app.css?.displaycomponent, customCss);
+let css = $state(initCss($app.css?.displaycomponent, customCss));
 </script>
 
 {#each Object.keys(components['displaycomponent'].initialData.configuration) as key (key)}

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

@@ -1,27 +1,13 @@
 import type { AppInput } from '../../inputType';
 import { type ComponentCustomCSS, type RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppDisplayComponent: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     componentInput: AppInput | undefined;
     initializing?: boolean | undefined;
-    customCss?: ComponentCustomCSS<"displaycomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'displaycomponent'> | undefined;
     render: boolean;
     configuration: RichConfigurations;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppDisplayComponent = InstanceType<typeof AppDisplayComponent>;
+}
+declare const AppDisplayComponent: import("svelte").Component<Props, {}, "initializing">;
+type AppDisplayComponent = ReturnType<typeof AppDisplayComponent>;
 export default AppDisplayComponent;

package/package/components/apps/components/display/AppDisplayComponentByJobId.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 { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
@@ -10,29 +10,32 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import DisplayResult from '../../../DisplayResult.svelte';
 import { userStore } from '../../../../stores';
-export let id;
-export let initializing = false;
-export let customCss = undefined;
-export let configuration;
-export let render;
+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 = initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration);
+let resolvedConfig = $state(initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration));
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false,
     jobId: undefined
 });
 initializing = false;
-let css = initCss($app.css?.jobiddisplaycomponent, customCss);
-let testJobLoader = undefined;
-let testIsLoading = false;
-let testJob = undefined;
-$: if (resolvedConfig.jobId) {
-    outputs.loading.set(true);
-    testJobLoader?.watchJob(resolvedConfig?.['jobId']);
-}
-let result = undefined;
+let css = $state(initCss($app.css?.jobiddisplaycomponent, customCss));
+let testJobLoader = $state(undefined);
+let testIsLoading = $state(false);
+let testJob = $state(undefined);
+$effect(() => {
+    if (resolvedConfig.jobId) {
+        untrack(() => {
+            outputs.loading.set(true);
+            const jobId = resolvedConfig?.['jobId'];
+            if (jobId) {
+                testJobLoader?.watchJob(jobId);
+            }
+        });
+    }
+});
+let result = $state(undefined);
 </script>
 
 {#each Object.keys(components['jobiddisplaycomponent'].initialData.configuration) as key (key)}
@@ -68,7 +71,6 @@ let result = undefined;
 />
 
 <InitializeComponent {id} />
-
 {#if render}
 	<div class="flex flex-col w-full h-full component-wrapper">
 		<div

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

@@ -1,25 +1,11 @@
 import { type ComponentCustomCSS, type RichConfigurations } from '../../types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppDisplayComponentByJobId: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     id: string;
     initializing?: boolean | undefined;
-    customCss?: ComponentCustomCSS<"jobiddisplaycomponent"> | undefined;
+    customCss?: ComponentCustomCSS<'jobiddisplaycomponent'> | undefined;
     configuration: RichConfigurations;
     render: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppDisplayComponentByJobId = InstanceType<typeof AppDisplayComponentByJobId>;
+}
+declare const AppDisplayComponentByJobId: import("svelte").Component<Props, {}, "initializing">;
+type AppDisplayComponentByJobId = ReturnType<typeof AppDisplayComponentByJobId>;
 export default AppDisplayComponentByJobId;

package/package/components/apps/components/display/AppDownload.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 { components } from '../../editor/component';
@@ -10,21 +10,13 @@ import { loadIcon } from '../icon';
 import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-export let noWFull = false;
-const resolvedConfig = initConfig(components['downloadcomponent'].initialData.configuration, configuration);
+let { id, configuration, customCss = undefined, render, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false } = $props();
+const resolvedConfig = $state(initConfig(components['downloadcomponent'].initialData.configuration, configuration));
 const { app, worldStore } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
 initOutput($worldStore, id, {});
-let beforeIconComponent;
-let afterIconComponent;
-$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
-$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
+let beforeIconComponent = $state();
+let afterIconComponent = $state();
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
         beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
@@ -35,7 +27,13 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
-let css = initCss($app.css?.downloadcomponent, customCss);
+let css = $state(initCss($app.css?.downloadcomponent, customCss));
+$effect(() => {
+    resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon());
+});
+$effect(() => {
+    resolvedConfig.afterIcon && afterIconComponent && untrack(() => handleAfterIcon());
+});
 </script>
 
 <InitializeComponent {id} />