AutoObject should display arrays

[mingfang]

Given an object like with an array field, e.g.

let test = {
    array: ['a', 'b', 'c']
}

AutoObject prints this error

No matching controller for 'array'

Ideally AutoObject can display the array like this

This is the possible code change in AutoObject

svelte-tweakpane-ui/src/lib/extra/AutoObject.svelte

Line 174 in 1b17dcb

{#each Object.keys(object) as key (key)}

{#each Object.keys(object) as key (key)}
    {#if object[key].constructor === Object}
        <Folder title={prettify(key)}>
            <AutoObject bind:object={object[key]}/>
        </Folder>
    {:else if typeof object[key] === 'string'}
        <Text
                bind:value={object[key]}
                label={prettify(key)}
        />
    {:else if Array.isArray(object[key])}
        <Folder title={prettify(key)}>
            {#each object[key].map((value, i)=> ({[i]: value})) as value}
                <AutoObject bind:object={value}/>
            {/each}
        </Folder>
    {:else}
        <Binding
                bind:object
                {key}
                label={prettify(key)}
        />
    {/if}
{/each}

[kitschpatrol]

Hi mingfang, thanks for using the library and for this suggestion.

See #3 for a somewhat-related discussion on what to do with arrays, though I see that your suggestion is different.

It's worth noting that vanilla Tweakpane ignores arrays, for example this results in an empty pane:

import { Pane } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js'

const params = {
  array: ['a', 'b', 'c'],
}

const pane = new Pane({})
pane.addBinding(params, 'array')

There's also some confusing precedent from the rest of Svelte Tweakpane UI, where certain controls can accept tuple values.

So I'm not sure at the moment of the "least surprising" way to handle this case.

[mingfang]

The code that I have works locally so this is not urgent.
Feel free to close if there's no plans to add this feature.
I suggest at least ignore unknown types to avoid erroring out by default.

[mingfang]

Another option is for AutoObject to use slots, like this

{#each Object.keys(object) as key (key)}
    {#if object[key].constructor === Object}
        <slot name="object" {object} {key}>
            <Folder title={prettify(key)}>
                <AutoObject bind:object={object[key]}/>
            </Folder>
        </slot>
    {:else if typeof object[key] === 'string'}
        <slot name="string" {object} {key}>
            <Text bind:value={object[key]} label={prettify(key)}/>
        </slot>
    {:else if Array.isArray(object[key])}
        <slot name="array" {object} {key}>
            <Folder title={prettify(key)}>
                {#each object[key].map((value, i) => ({[i]: value})) as value}
                    <AutoObject bind:object={value}/>
                {/each}
            </Folder>
        </slot>
    {:else}
        <slot {object} {key}>
            <Binding bind:object {key} label={prettify(key)}/>
        </slot>
    {/if}
{/each}

Then the user can override, say array like this

<AutoObject object={object}>
    <svelte:fragment slot="array" let:object let:key>
        <Text value={object[key].toString()} label={key}/>
    </svelte:fragment>
</AutoObjec>

The only downside is you can't bind to a let variable.

[kitschpatrol]

Thanks! The slot approach is very interesting — though losing the let binding is tough.

I'll leave this issue open as I'd like to implement something when I have a moment.