Components not being removed if they're extending fragment

[doorgan]

I've noticed that when you have a list of components extending fragment, if you remove items from the list and re-render it, the list won't get updated.

I've made a reproduction in this codesandbox

import { define, ref, html } from "heresy";

const Item = {
  name: "Item",
  extends: "fragment",

  onclick() {
    this.dispatchEvent(new CustomEvent("remove", { detail: this.item }));
  },

  render() {
    this.html`
    <p>
      This is item <strong>${this.item.id}</strong>
      <button onclick=${this}>Remove me!</button>
    </p>
    `;
  }
};

const ItemList = {
  name: "ItemList",
  extends: "fragment",

  includes: { Item },

  mappedAttributes: ["items"],

  oninit() {
    this.items = [];
  },

  add_item() {
    this.items.push({ id: Math.random() });
    this.items = this.items;
  },

  onitems() {
    this.render();
  },

  onremove({ detail: item }) {
    this.items = this.items.filter(x => x != item);
  },

  render() {
    this.html`
    <div class="number-list">
      ${this.items.map(
        item => html.for(this, item.id)`
          <Item .item=${item} onremove=${this} />
        `
      )}
    </div>
    `;
  }
};

const MainComponent = {
  name: "MainComponent",
  extends: "element",

  includes: { ItemList },

  oninit() {
    this.item_list = ref();
  },

  onclick() {
    this.item_list.current.add_item();
  },

  render() {
    this.html`
      <ItemList ref=${this.item_list}/>
      <button onclick=${this}>Add item!</button>
    `;
  }
};

define(MainComponent);

Adding Items works fine, but they don't get removed from the dom. This doesn't happen if the component extends some element, like div.

Maybe it has to do with the fact that fragments are not dom nodes, and the dom diffing breaks?

[WebReflection]

While this might be a bug due the fact fragments are swapped once inserted, because these cannot exist on the DOM, fragments should be the last resource you need in heresy.

The Item, as example, should be:

const Item = {
  name: "Item",
  extends: "p",

  onclick() {
    this.dispatchEvent(new CustomEvent("remove", { detail: this.item }));
  },

  render() {
    this.html`
      This is item <strong>${this.item.id}</strong>
      <button onclick=${this}>Remove me!</button>
    `;
  }
};

While the ItemList should like be:

const ItemList = {
  name: "ItemList",
  extends: "div",

  includes: { Item },

  mappedAttributes: ["items"],

  oninit() {
    this.items = [];
    this.classList.add('number-list');
  },

  add_item() {
    this.items = this.items.concat({ id: Math.random() });
  },

  onitems() {
    this.render();
  },

  onremove({ detail: item }) {
    this.items = this.items.filter(x => x != item);
  },

  render() {
    this.html`${this.items.map(
      item => html.for(this, item.id)` <Item .item=${item} onremove=${this} />`
    )}`;
  }
};

That being said, I'll try to investigate how to solve the initial issue, as the removal shouldn't indeed, break, but it might take a little while, so I hope the workaround can help in the meanwhile.

[doorgan]

Yes, I'm currently using the workaround.
I'm perfectly fine doing it that way, no need to rush a fix :)