windmill-components 1.642.0 → 1.655.0

package/package/components/apps/editor/AppPreview.svelte

@@ -16,8 +16,8 @@ import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import { BG_PREFIX } from './appUtilsCore';
 let { app, appPath = '', breakpoint = writable('lg'), policy = {}, summary = '', workspace = $workspaceStore, isEditor = false, context, noBackend = false, isLocked = $bindable(false), hideRefreshBar = false, class: classNames = '', replaceStateFn = (path) => window.history.replaceState(null, '', path), gotoFn = (path, opt) => window.history.pushState(null, '', path) } = $props();
-migrateApp(app);
-const appStore = writable(app);
+migrateApp(untrack(() => app));
+const appStore = writable(untrack(() => app));
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
 const connectingInput = writable({
@@ -27,11 +27,11 @@ const connectingInput = writable({
 });
 const allIdsInPath = writable([]);
 let ncontext = {
-    ...context,
-    workspace,
+    ...untrack(() => context),
+    workspace: untrack(() => workspace),
     mode: 'viewer',
-    summary: summary,
-    author: policy.on_behalf_of_email
+    summary: untrack(() => summary),
+    author: untrack(() => policy).on_behalf_of_email
 };
 function resizeWindow() {
     !isEditor && ($breakpoint = window.innerWidth < 769 ? 'sm' : 'lg');
@@ -39,7 +39,7 @@ function resizeWindow() {
 resizeWindow();
 const parentWidth = writable(0);
 let previousDarkMode = document.documentElement.classList.contains('dark');
-const darkMode = writable(app?.darkMode ?? previousDarkMode);
+const darkMode = writable(untrack(() => app)?.darkMode ?? previousDarkMode);
 onDestroy(() => {
     setTheme(previousDarkMode);
 });
@@ -73,7 +73,7 @@ function hashchange(e) {
         return x;
     });
 }
-let writablePath = writable(appPath);
+let writablePath = writable(untrack(() => appPath));
 function onPathChange() {
     writablePath.set(appPath);
 }
@@ -85,21 +85,21 @@ setContext('AppViewerContext', {
         runnableInitialized: {}
     }),
     app: appStore,
-    summary: writable(summary),
+    summary: writable(untrack(() => summary)),
     selectedComponent,
     bgRuns: writable([]),
     mode,
     connectingInput,
-    breakpoint,
+    breakpoint: untrack(() => breakpoint),
     runnableComponents: writable({}),
     appPath: writablePath,
-    workspace,
+    workspace: untrack(() => workspace),
     onchange: undefined,
-    isEditor,
+    isEditor: untrack(() => isEditor),
     jobs: parentContext?.jobs ?? writable([]),
     jobsById: parentContext?.jobsById ?? writable({}),
     staticExporter: writable({}),
-    noBackend,
+    noBackend: untrack(() => noBackend),
     errorByComponent: writable({}),
     openDebugRun: writable(undefined),
     focusedGrid: writable(undefined),
@@ -113,9 +113,9 @@ setContext('AppViewerContext', {
     cssEditorOpen: writable(false),
     previewTheme: writable(undefined),
     debuggingComponents: writable({}),
-    replaceStateFn,
-    gotoFn,
-    policy,
+    replaceStateFn: untrack(() => replaceStateFn),
+    gotoFn: untrack(() => gotoFn),
+    policy: untrack(() => policy),
     recomputeAllContext: writable({
         loading: false,
         componentNumber: 0,
@@ -251,6 +251,7 @@ let maxRow = $derived(maxHeight($appStore.grid, appHeight, $breakpoint));
 				<GridViewer allIdsInPath={$allIdsInPath} items={app.grid} {maxRow} breakpoint={$breakpoint}>
 					{#snippet children({ dataItem })}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={'h-full w-full center-center'}
 							onpointerdown={() => ($selectedComponent = [dataItem.id])}

package/package/components/apps/editor/ComponentHeader.svelte

@@ -257,7 +257,7 @@ let hoverHeader = $state(false);
 			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer'
 		)}
 	>
-		<Popover notClickable placement="bottom" contentClasses="!bg-surface border w-96 p-4">
+		<Popover placement="bottom" contentClasses="!bg-surface border w-96 p-4">
 			{#snippet trigger()}
 				<Bug size={14} />
 			{/snippet}

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -2,7 +2,7 @@
 const bubble = createBubbler();
 import Dropdown from '../../DropdownV2.svelte';
 import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { isDebugging } from './settingsPanel/decisionTree/utils';
 import { X, Bug } from 'lucide-svelte';
 let { nodes = [], id, isSmall = false, componentIsDebugging = $bindable(false) } = $props();
@@ -11,7 +11,7 @@ $effect(() => {
 });
 const { componentControl, debuggingComponents, worldStore } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-let currentNodeId = $state($worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a');
+let currentNodeId = $state($worldStore.outputsById[untrack(() => id)]?.currentNodeId?.peak() ?? 'a');
 function subscribeToCurrentNode(id) {
     return $worldStore.outputsById[id]?.currentNodeId?.subscribe({
         id: `id-${id}-${currentNodeId}`,
@@ -20,7 +20,7 @@ function subscribeToCurrentNode(id) {
         }
     }, currentNodeId);
 }
-let subscription = subscribeToCurrentNode(id);
+let subscription = subscribeToCurrentNode(untrack(() => id));
 function onDebugNode(debuggedNodeIndex) {
     if (debuggedNodeIndex === undefined) {
         return;
@@ -35,7 +35,7 @@ $effect(() => {
     onDebugNode($debuggingComponents[id]);
 });
 let renderCount = $state(0);
-let lastNodes = nodes;
+let lastNodes = untrack(() => nodes);
 function onNodesChange(newNodes) {
     if (JSON.stringify(newNodes) !== JSON.stringify(lastNodes)) {
         lastNodes = newNodes;

package/package/components/apps/editor/GridEditor.svelte

@@ -131,6 +131,7 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 		</div>
 	</div>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge(

package/package/components/apps/editor/GridViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { columnConfiguration, WIDE_GRID_COLUMNS } from '../gridUtils';
 import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
-import { onMount, createEventDispatcher, getContext } from 'svelte';
+import { onMount, createEventDispatcher, getContext, untrack } from 'svelte';
 import { getColumn, throttle } from '../svelte-grid/utils/other';
 import { getContainerHeight } from '../svelte-grid/utils/container';
 import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
@@ -13,7 +13,7 @@ let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRI
 let container = $state();
 let [gapX, gapY] = $derived(gap);
 let xPerPx = $state(0);
-let yPerPx = rowHeight;
+let yPerPx = untrack(() => rowHeight);
 let containerHeight = $derived(getContainerHeight(items, yPerPx, getComputedCols));
 const onResize = throttle(() => {
     if (!getComputedCols)
@@ -25,7 +25,7 @@ const onResize = throttle(() => {
         yPerPx,
         width: containerWidth
     });
-}, throttleUpdate);
+}, untrack(() => throttleUpdate));
 onMount(() => {
     setTimeout(() => {
         showSkeleton = true;

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,15 +1,13 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { getContext, onMount } from 'svelte';
 import RecomputeAllButton from './RecomputeAllButton.svelte';
 import { allItems, BG_PREFIX } from './appUtilsCore';
 const { runnableComponents, app, initialized, recomputeAllContext } = getContext('AppViewerContext');
 const appEditorContext = getContext('AppEditorContext');
 let timeout = undefined;
 let shouldRefresh = false;
-let firstLoad = false;
+let firstLoad = $state(false);
 let progressTimer = undefined;
-$: !firstLoad &&
-    canInitializeAll($initialized?.initializedComponents, $app) &&
-    refresh('all initialized');
 // $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)
 function canInitializeAll(initialized, app) {
     // console.log(
@@ -41,8 +39,6 @@ function canInitializeAll(initialized, app) {
             app.lazyInitRequire?.every((x) => initialized?.includes(x)));
     }
 }
-$: $recomputeAllContext.componentNumber =
-    Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0;
 onMount(() => {
     if (appEditorContext) {
         appEditorContext.refreshComponents.set(() => refresh('onClick global'));
@@ -96,7 +92,7 @@ function setInter(inter, source) {
     $recomputeAllContext.interval = inter;
     onRefresh(!inter, 'setInter ' + source);
 }
-let refreshing = [];
+let refreshing = $state([]);
 function refresh(reason, excludeId = undefined) {
     let isFirstLoad = false;
     if (!firstLoad && reason == 'all initialized') {
@@ -159,6 +155,15 @@ onMount(() => {
         setInter: (n) => setInter(n, 'all context')
     };
 });
+run(() => {
+    !firstLoad &&
+        canInitializeAll($initialized?.initializedComponents, $app) &&
+        refresh('all initialized');
+});
+run(() => {
+    $recomputeAllContext.componentNumber =
+        Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0;
+});
 </script>
 
 <RecomputeAllButton

package/package/components/apps/editor/RecomputeAllComponents.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RecomputeAllComponents: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RecomputeAllComponents = InstanceType<typeof RecomputeAllComponents>;
+declare const RecomputeAllComponents: import("svelte").Component<Record<string, never>, {}, "">;
+type RecomputeAllComponents = ReturnType<typeof RecomputeAllComponents>;
 export default RecomputeAllComponents;

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { push } from '../../../history.svelte';
 import { classNames } from '../../../utils';
-import { getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
@@ -16,7 +16,7 @@ const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth,
 const editorContext = getContext('AppEditorContext');
 let isActive = $state(false);
 let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x));
-let everVisible = $state(visible);
+let everVisible = $state(untrack(() => visible));
 $effect.pre(() => {
     visible && !everVisible && (everVisible = true);
 });
@@ -94,6 +94,7 @@ export function moveToRoot(componentId, position) {
 <!-- {visible}
 {everVisible} -->
 {#if everVisible || $app.eagerRendering}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="translate-x-0 translate-y-0 w-full subgrid {visible
 			? 'visible'
@@ -224,6 +225,7 @@ export function moveToRoot(componentId, position) {
 				>
 					{#snippet children({ dataItem })}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							onpointerdown={stopPropagation((e) =>
 								selectComponent(e as PointerEvent, dataItem.id)

package/package/components/apps/editor/appPolicy.js

@@ -1,4 +1,3 @@
-import { Sha256 } from '@aws-crypto/sha256-js';
 import { getCountInput } from '../components/display/dbtable/queries/count';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 import { getInsertInput } from '../components/display/dbtable/queries/insert';
@@ -178,6 +177,7 @@ async function hash(message) {
     }
     catch {
         //subtle not available, trying pure js
+        const { Sha256 } = await import('@aws-crypto/sha256-js');
         const hash = new Sha256();
         hash.update(message ?? '');
         const result = Array.from(await hash.digest());

package/package/components/apps/editor/commonAppUtils.d.ts

@@ -1,4 +1,4 @@
-import type { StaticAppInput } from "../inputType";
+import type { StaticAppInput } from '../inputType';
 export declare function collectStaticFields(fields: Record<string, StaticAppInput>): {
     [k: string]: any;
 };

package/package/components/apps/editor/commonAppUtils.js

@@ -1,4 +1,3 @@
-import { Sha256 } from '@aws-crypto/sha256-js';
 export function collectStaticFields(fields) {
     return Object.fromEntries(Object.entries(fields ?? {})
         .filter(([k, v]) => v.type == 'static')
@@ -16,6 +15,7 @@ export async function hash(message) {
     }
     catch {
         //subtle not available, trying pure js
+        const { Sha256 } = await import('@aws-crypto/sha256-js');
         const hash = new Sha256();
         hash.update(message ?? '');
         const result = Array.from(await hash.digest());

package/package/components/apps/editor/component/Component.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import ComponentInner from './ComponentInner.svelte';
 import ComponentRendered from './ComponentRendered.svelte';
 const { app } = getContext('AppViewerContext');
 let { component, selected, locked = false, render, fullHeight, overlapped = undefined, componentDraggedId = undefined } = $props();
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect(() => {
     render && !everRender && (everRender = true);
 });

package/package/components/apps/editor/component/components.d.ts

@@ -3781,7 +3781,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly value: "yyyy-MM-dd";
                     readonly fieldType: "text";
-                    readonly markdownTooltip: "### Output format\nSee date-fns format for more information. By default, it is 'yyyy-MM-dd'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| dd \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| d \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| yyyy \t\t\t\t| 2021, 2022, ... | Year |\n";
+                    readonly tooltip: "<b>Output format</b><br>See date-fns format for more information. Default: <code>yyyy-MM-dd</code><table class=\"mt-1 text-2xs\"><tr><th class=\"pr-2 text-left\">Format</th><th class=\"pr-2 text-left\">Result</th><th class=\"text-left\">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr></table>";
                     readonly documentationLink: "https://date-fns.org/v2.30.0/docs/format";
                     readonly placeholder: "yyyy-MM-dd";
                 };
@@ -3832,7 +3832,7 @@ export declare const components: {
                     readonly fieldType: "text";
                     readonly documentationLink: "https://date-fns.org/v2.30.0/docs/format";
                     readonly placeholder: "dd.MM.yyyy HH:mm";
-                    readonly markdownTooltip: "### Output format\nSee date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| dd \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| d \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| yyyy \t\t\t\t| 2021, 2022, ... | Year |\n| HH \t\t\t\t| 00, 01, ..., 23 | Hours |\n| mm \t\t\t\t| 00, 01, ..., 59 | Minutes |\n| ss \t\t\t\t| 00, 01, ..., 59 | Seconds |\n\t\t\t\t\t";
+                    readonly tooltip: "<b>Output format</b><br>See date-fns format for more information. Default: <code>dd.MM.yyyy HH:mm</code><table class=\"mt-1 text-2xs\"><tr><th class=\"pr-2 text-left\">Format</th><th class=\"pr-2 text-left\">Result</th><th class=\"text-left\">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr><tr><td><code>HH</code></td><td>00, 01, ..., 23</td><td>Hours</td></tr><tr><td><code>mm</code></td><td>00, 01, ..., 59</td><td>Minutes</td></tr><tr><td><code>ss</code></td><td>00, 01, ..., 59</td><td>Seconds</td></tr></table>";
                 };
                 readonly defaultValue: {
                     readonly type: "static";
@@ -4857,6 +4857,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly ms_sql_server: {
@@ -4867,6 +4868,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly snowflake: {
@@ -4877,6 +4879,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly bigquery: {
@@ -4887,6 +4890,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly ducklake: {
@@ -4897,6 +4901,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                         readonly datatable: {
@@ -4907,6 +4912,7 @@ export declare const components: {
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
+                                readonly allowTypeChange: false;
                             };
                         };
                     };

package/package/components/apps/editor/component/components.js

@@ -2494,18 +2494,7 @@ This is a paragraph.
                     type: 'static',
                     value: 'yyyy-MM-dd',
                     fieldType: 'text',
-                    markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'yyyy-MM-dd'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-`,
+                    tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>yyyy-MM-dd</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr></table>`,
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'yyyy-MM-dd'
                 },
@@ -2553,21 +2542,7 @@ See date-fns format for more information. By default, it is 'yyyy-MM-dd'
                     fieldType: 'text',
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'dd.MM.yyyy HH:mm',
-                    markdownTooltip: `### Output format
-See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
-
-| Format      | Result | Description |
-| ----------- | ----------- | ----------- |
-| dd 				| 01, 02, ..., 31 | Day of the month |
-| d 				| 1, 2, ..., 31 | Day of the month |
-| MM 				| 01, 02, ..., 12 | Month |
-| MMM 				| Jan, Feb, ..., Dec | Month |
-| MMMM 				| January, February, ..., December | Month |
-| yyyy 				| 2021, 2022, ... | Year |
-| HH 				| 00, 01, ..., 23 | Hours |
-| mm 				| 00, 01, ..., 59 | Minutes |
-| ss 				| 00, 01, ..., 59 | Seconds |
-					`
+                    tooltip: `<b>Output format</b><br>See date-fns format for more information. Default: <code>dd.MM.yyyy HH:mm</code><table class="mt-1 text-2xs"><tr><th class="pr-2 text-left">Format</th><th class="pr-2 text-left">Result</th><th class="text-left">Description</th></tr><tr><td><code>dd</code></td><td>01, 02, ..., 31</td><td>Day of the month</td></tr><tr><td><code>d</code></td><td>1, 2, ..., 31</td><td>Day of the month</td></tr><tr><td><code>MM</code></td><td>01, 02, ..., 12</td><td>Month</td></tr><tr><td><code>MMM</code></td><td>Jan, Feb, ..., Dec</td><td>Month</td></tr><tr><td><code>MMMM</code></td><td>January, ..., December</td><td>Month</td></tr><tr><td><code>yyyy</code></td><td>2021, 2022, ...</td><td>Year</td></tr><tr><td><code>HH</code></td><td>00, 01, ..., 23</td><td>Hours</td></tr><tr><td><code>mm</code></td><td>00, 01, ..., 59</td><td>Minutes</td></tr><tr><td><code>ss</code></td><td>00, 01, ..., 59</td><td>Seconds</td></tr></table>`
                 },
                 defaultValue: {
                     type: 'static',
@@ -3573,14 +3548,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'mysql',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         ms_sql_server: {
@@ -3588,14 +3565,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'ms_sql_server',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         snowflake: {
@@ -3603,14 +3582,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'snowflake',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         bigquery: {
@@ -3618,14 +3599,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'resource',
                                 subFieldType: 'bigquery',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         ducklake: {
@@ -3633,14 +3616,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'ducklake',
                                 subFieldType: 'ducklake',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         },
                         datatable: {
@@ -3648,14 +3633,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 type: 'static',
                                 fieldType: 'datatable',
                                 subFieldType: 'datatable',
-                                value: ''
+                                value: '',
+                                allowTypeChange: false
                             },
                             table: {
                                 fieldType: 'select',
                                 subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
-                                value: undefined
+                                value: undefined,
+                                allowTypeChange: false
                             }
                         }
                     }

package/package/components/apps/editor/componentsPanel/CssHelperPanel.svelte

@@ -55,7 +55,7 @@ const entries = [
     }))
 ];
 entries.sort((a, b) => (b.order ?? 0) - (a.order ?? 0) + a.name.localeCompare(b.name));
-let search = '';
+let search = $state('');
 </script>
 
 <div class="p-2">
@@ -77,12 +77,15 @@ let search = '';
 					}
 				}}
 			>
-				<div slot="titleSlot" class="flex items-center">
-					<svelte:component this={icon} size={18} />
-					<span class="ml-1">
-						{name}
-					</span>
-				</div>
+				{#snippet titleSlot()}
+								{@const SvelteComponent = icon}
+				<div  class="flex items-center">
+						<SvelteComponent size={18} />
+						<span class="ml-1">
+							{name}
+						</span>
+					</div>
+							{/snippet}
 				{#if description}
 					<div class="py-2 text-xs text-gray-500">{description}</div>
 				{/if}

package/package/components/apps/editor/componentsPanel/CssHelperPanel.svelte.d.ts

@@ -15,6 +15,6 @@ declare const CssHelperPanel: $$__sveltets_2_IsomorphicComponent<Record<string,
     insertSelector: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type CssHelperPanel = InstanceType<typeof CssHelperPanel>;
 export default CssHelperPanel;

package/package/components/apps/editor/componentsPanel/CustomComponentsList.svelte

@@ -9,8 +9,8 @@ import CustomComponentRow from './CustomComponentRow.svelte';
 import Skeleton from '../../../common/skeleton/Skeleton.svelte';
 import Toggle from '../../../Toggle.svelte';
 import { createEventDispatcher } from 'svelte';
-let customcomponents = [];
-let loading = false;
+let customcomponents = $state([]);
+let loading = $state(false);
 async function getCustomComponents() {
     loading = true;
     customcomponents = await ResourceService.listResourceNames({
@@ -34,7 +34,7 @@ async function addCustomComponent(nameField) {
                         }
                     },
                     name: nameField,
-                    js: await files[0].text()
+                    js: await files?.[0]?.text?.()
                 }
             }
         });
@@ -48,10 +48,10 @@ async function addCustomComponent(nameField) {
     getCustomComponents();
     nameField = '';
 }
-let nameField = '';
-let reactVersion = '18.2.0';
-let files;
-let useReact = true;
+let nameField = $state('');
+let reactVersion = $state('18.2.0');
+let files = $state();
+let useReact = $state(true);
 getCustomComponents();
 </script>
 

package/package/components/apps/editor/componentsPanel/CustomComponentsList.svelte.d.ts

@@ -15,6 +15,6 @@ declare const CustomComponentsList: $$__sveltets_2_IsomorphicComponent<Record<st
     reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type CustomComponentsList = InstanceType<typeof CustomComponentsList>;
 export default CustomComponentsList;