Dynamically add Panels with @corvu/resizable

[npg418]

How can I dynamically add panels using @corvu/resizable?

I'm trying to dynamically add panels using @corvu/resizable, but the panels added later do not display.

Here's the code I'm working with:

import Resizable from "@corvu/resizable";
import { For, Show, createEffect, createSignal } from "solid-js";

export default function DynamicResizable() {
  const [sizes, setSizes] = createSignal<number[]>([]);
  const [children, setChildren] = createSignal<string[]>([
    "Foo",
    "Bar",
    "Baz",
  ]);

  createEffect(() => {
    const count = children().length;
    setSizes(Array(count).fill(1 / count));
  });

  function Handle() {
    return (
      <Resizable.Handle class="group basis-1">
        <div class="size-full bg-zinc-900 transition-[background-color,transform] corvu-group-active:scale-x-150 corvu-group-active:bg-zinc-950" />
      </Resizable.Handle>
    );
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setChildren([...children(), "Appended"])}
      >
        add child
      </button>
      <Resizable sizes={sizes()} onSizesChange={setSizes} class="size-full">
        <For each={children()}>
          {(child, idx) => {
            return (
              <>
                <Resizable.Panel>{child}</Resizable.Panel>
                <Show when={idx() !== children().length - 1}>
                  <Handle />
                </Show>
              </>
            );
          }}
        </For>
      </Resizable>
    </>
  );
}

Initial display:

When button pressed:

The elements are missing rather than just not being displayed due to styling issues. I'm not very familiar with the memorization process in Solid.js, so any insights or guidance on this would be greatly appreciated.

[GiyoMoon]

Wow, now that's a bug in corvu. Thanks a lot for bringing this to my attention. The issue is that <For> returns a function and corvu treats it as if the children your passing is a children callback. I need to investigate possible fixes for this.

In the meantime, this solves it for you (By wrapping <For> inside a callback for corvu to consume):
Additionally, you don't have to control the sizes as you can just pass initialSize on every panel :)

import Resizable from '@corvu/resizable';
import { For, Show, createSignal } from 'solid-js';

export default function DynamicResizable() {
  const [children, setChildren] = createSignal<string[]>(['Foo', 'Bar', 'Baz']);

  function Handle() {
    return (
      <Resizable.Handle class="group basis-1">
        <div class="size-full bg-zinc-900 transition-[background-color,transform] corvu-group-active:scale-x-150 corvu-group-active:bg-zinc-950" />
      </Resizable.Handle>
    );
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setChildren([...children(), 'Appended'])}
      >
        add child
      </button>
      <Resizable class="size-full">
        {() => (
          <For each={children()}>
            {(child, idx) => (
              <>
                <Resizable.Panel initialSize={1 / children().length}>
                  {child}
                </Resizable.Panel>
                <Show when={idx() !== children().length - 1}>
                  <Handle />
                </Show>
              </>
            )}
          </For>
        )}
      </Resizable>
    </>
  );
}

Stackblitz repro

[GiyoMoon]

Alright I released a fix! Make sure to update @corvu/utils which @corvu/resizable depends on to 0.3.1 and your example will work :)

[npg418]

Thanks!!!!