Cannot index keys when using Svelte Actions `use:value.array[0]` or `use:value['nested']`

[Refzlund]

Describe the bug

Is this designed not to work, or a bug? REPL

<script>
    function example(node) {}
    const value = {
        array: [
            example,
            example
        ]
    }
</script>

{typeof value.array[0]}
<span use:value.array[0]></span>
<!-- Error: value.array[0] is not a function -->

I assume it's a bug since this REPL works:

<script>
    function example(node) {}
    const value = {
        nested: {
            thing: example
        }
    }
</script>

{typeof value.nested.thing}
<span use:value.nested.thing></span>

This is a simplified example to demonstrate the problem.

Discord forum: help-svelte-and-kit   Bug or intended design?

Reproduction

✖️   Not working Svelte REPL use:value.array[0]

✖️   Not working Svelte REPL use:value['nested']

✔️   Working Svelte REPL use:value.nested.thing

Logs

Error: value.array[0] is not a function
message: "value.array[0] is not a function"
stack: "TypeError: value.array[0] is not a function\n" +
" at eval (playground:output:2122:45)\n" +
" at eval (playground:output:2086:32)\n" +
" at untrack (playground:output:1484:11)\n" +
" at eval (playground:output:2086:18)\n" +
" at update_reaction (playground:output:1121:57)\n" +
" at update_effect (playground:output:1245:19)\n" +
" at flush_queued_effects (playground:output:1332:5)\n" +
" at flush_queued_root_effects (playground:output:1313:5)\n" +
" at process_deferred (playground:output:1359:3)"

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 19.63 GB / 31.93 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.34 - ~\.bun\bin\bun.EXE
  Browsers: {}

Vivaldi	7.0.3495.10 (Stable channel) (Pending update 7.0.3495.11) (64-bit) 
Revision	46177f82db4977c295fe8a3bdecb6a552df0838d
OS	Windows 11 Version 23H2 (Build 22631.4317)
JavaScript	V8 13.0.245.18
User Agent	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Severity

annoyance

[brunnerh]

This is expected. At first arbitrary expressions were possible but this has been restricted since access to state did not work properly and it also increases the amount of stuff the compiler would need to be able to deal with.

You can use $derived or {@const} to put the action you need into a simple variable first.

[Refzlund]

This is expected. At first arbitrary expressions were possible but this has been restricted since access to state did not work properly and it also increases the amount of stuff the compiler would need to be able to deal with.

You can use $derived or {@const} to put the action you need into a simple variable first.

Ah! Thanks for the clarification.

I was trying something like this out

<form use:userForm>
	<div>
		<button
			type='button'
			onclick={() => ($userForm.children ??= []).push({} as Person)}
		>
			Add child
		</button>
		{#each $userForm.children ?? [] as child, i}
			<input use:userForm.$.children[i].name />
		{/each}
	</div>
</form>

{@const] it is. Thanks for the quick answer!