zsarnett / lit-grid-layout Goto Github PK

First of all, thank you for creating this library and expanding the lit-element ecosystem.

I would like to discuss a problem I found trying to integrate this library into a lit-element project and the solution that we found to said problem.

lit-grid-layout loads elements from this.items or form this.children

Then, the elements are attached to the DOM here, which forcefully detaches them from their previous position in the DOM.

So if this.children is used, the elements will be detached from this.children in order to attach them under lit-grid-item.

This makes lit-element usage problematic. Let's say that the parent is in charge of rendering and passing the elements to lit-grid-layout,

  html`
    <lit-grid-layout
      .layout="this.layout">
      ${this.gridItems.map(gridItem => {
        return html`<div>${gridItem.title}</div>`;
      })}
    </lit-grid-layout>
  `;

Now when the parent re-renders, it finds that children of lit-grid-layout are missing. So lit-html cannot patch those nodes and has to create and initialize new nodes. Not only is this more expensive, but since the new nodes replace the old nodes, the internal state of the old nodes just disappears.

To improve reactivity and integration I thought about taking another approach. The idea is to delegate rendering to lit-grid-layout and avoid having to detach elements from a DOM position to attach them in another place.

              <lit-grid-layout
                .layout="${this.layout}"
                .dragHandle="${dragHandle}"
                .sortStyle="${sortStyle}"
                .itemRenderer="${this.itemRenderer}"
                @layout-changed="${this.onLayoutChanged}"
                @item-changed="${this.onLayoutChanged}">
              </lit-grid-layout>

The usage is similar, except that there are no this.items or children. Instead itemRenderer is used to create the elements from within lit-grid-layout and thanks to the repeat directive of lit-html re-renders will find old elements and patch them.

        itemRenderer (itemKey) {
          return html`<my-item
              title="${itemKey}">
            </my-item>`;
        }

Take a look at the demo of this working branch

1. npm run start and go to 127.0.0.1:8000
2. Click on the title/number of some items to activate them. They will turn green.
3. Click on "Switch to sunny mode" or "New Layout"

Notice also that code style becomes more friendly to lit-element and lit-html.

When going to the demo page I get this error:

Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../".

Checked on Chrome 84.0.4147.105 (Win10)