diff --git a/frontend/src/lib/components/FilesetEditor.svelte b/frontend/src/lib/components/FilesetEditor.svelte index da365922ad..a811e1e363 100644 --- a/frontend/src/lib/components/FilesetEditor.svelte +++ b/frontend/src/lib/components/FilesetEditor.svelte @@ -8,18 +8,16 @@ let { args = $bindable({}) }: Props = $props() - // Internal files map uses /-prefixed keys (matching tree node paths) - let files: Record = $state( - Object.fromEntries( - Object.entries(args ?? {}).map(([k, v]) => ['/' + k, String(v ?? '')]) - ) + // Internal files map uses /-prefixed keys (matching tree node paths). + // Compute initial files + selection together to avoid referencing $state outside reactive context. + const initialFiles = Object.fromEntries( + Object.entries(args ?? {}).map(([k, v]) => ['/' + k, String(v ?? '')]) ) + const initialFile = Object.keys(initialFiles).find((k) => !k.endsWith('/')) - // Initialize selection synchronously so SimpleEditor mounts with correct content - const initialKeys = Object.keys(files) - const initialFile = initialKeys.find((k) => !k.endsWith('/')) - let selectedPath: string | undefined = $state(initialFile ?? (initialKeys.length > 0 ? '/' : '/')) - let editContent: string = $state(initialFile ? (files[initialFile] ?? '') : '') + let files: Record = $state(initialFiles) + let selectedPath: string | undefined = $state(initialFile ?? '/') + let editContent: string = $state(initialFile ? (initialFiles[initialFile] ?? '') : '') // The selected file path (/-prefixed, not a folder) const selectedFileKey: string | undefined = $derived.by(() => { diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte index 73e4782314..bf1c1b2251 100644 --- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte @@ -477,16 +477,17 @@ } } - async function resourceNameToFileExt(resourceName: string) { - await loadResourceNameToFileExtMap() + function resourceNameToFileExt(resourceName: string): string | undefined { return resourceNameToFileExtMap?.[resourceName] } - async function resourceNameIsFileset(resourceName: string) { - await loadResourceNameToFileExtMap() + function resourceNameIsFileset(resourceName: string): boolean { return resourceNameToIsFilesetMap?.[resourceName] ?? false } + // Eagerly load the map + loadResourceNameToFileExtMap() + // Current resources based on tab let currentResources = $derived( tab == 'cache' ? cacheResources : tab == 'states' ? stateResources : resources