Keyed elements disappear

Question

Keyed elements disappear

canadaduane opened this issue a year ago · comments

Version 0.5.5 introduced a bug where keyed elements disappear when a sibling element is removed. I'm not sure yet if there are more complex conditions, as it's happening in my app but I have not yet narrowed it down to a small reproducible case.

Update: Here is a reproduction:

<!DOCTYPE html>
<script type="importmap">
  {
    "imports": {
      "@b9g/crank/dom": "https://cdn.jsdelivr.net/npm/@b9g/crank@0.5.5/dom/+esm",
      "@b9g/crank/standalone": "https://cdn.jsdelivr.net/npm/@b9g/crank@0.5.5/standalone/+esm"
    }
  }
</script>
<script type="module">
  import { createElement, jsx as html } from "@b9g/crank/standalone";
  import { renderer } from "@b9g/crank/dom";

  function* Box({ id }) {
    console.log("mounted Box", id);
    try {
      for (const { message } of this) {
        yield html`
          <div style="border: 2px solid orange; border-radius: 5px">
            ${message}
          </div>
        `;
      }
    } finally {
      console.log("unmounted Box", id);
    }
  }

  function* App() {
    let items = [];
    window.refresh = () => this.refresh();

    setTimeout(() => {
      items.push({ id: 1, message: "hi!" });
      this.refresh();
    }, 200);

    setTimeout(() => {
      items.push({ id: 2, message: "well, hello!" });
      this.refresh();
    }, 400);

    setTimeout(() => {
      items.splice(0, 1);
      this.refresh();
    }, 600);

    for (const {} of this) {
      yield html`${items.map(
        (item) =>
          html`<${Box} $key=${item.id} id=${item.id} message=${item.message} />`
      )}`;
    }
  }

  renderer.render(createElement(App), document.body);
</script>

In 0.5.4 the console will log (correctly):

mounted Box 1
mounted Box 2
unmounted Box 1

But in 0.5.5, the console will log the following:

mounted Box 1
mounted Box 2
unmounted Box 1
unmounted Box 2

Brian Kim · Answer 1 · Thu Nov 09 2023 14:42:41 GMT+0800 (China Standard Time)

I'm so sorry! This is probably a hamfisted attempt at correcting the other bug you mentioned (#254). I will look into this as soon as I get home.

Duane Johnson · Answer 2 · Thu Nov 09 2023 23:14:16 GMT+0800 (China Standard Time)

Thanks for caring! It's a delight to work with crank.js, and evident that you've put care into crafting it.

Darryl Cousins · Answer 3 · Fri Nov 10 2023 07:21:45 GMT+0800 (China Standard Time)

Not a social media site, but I'm compelled to vote up Duane's comment about care and craft.

Cheers, Darryl.

Brian Kim · Answer 4 · Sat Dec 09 2023 05:51:31 GMT+0800 (China Standard Time)

Sorry about the slow response on this bug. Been going through some life stuff and wasn’t thinking clearly. I appreciate the kind words.