Keyed elements disappear

canadaduane commented 1 year ago

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

brainkim commented 1 year ago

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.

canadaduane commented 1 year ago

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

darrylcousins commented 1 year ago

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

Cheers, Darryl.

brainkim commented 11 months ago

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

bikeshaving / crank

Keyed elements disappear #270