zsarnett / lit-grid-layout Goto Github PK
View Code? Open in Web Editor NEWGrid Layout using Lit Element
Home Page: https://lit-grid-layout.netlify.app/
License: MIT License
Grid Layout using Lit Element
Home Page: https://lit-grid-layout.netlify.app/
License: MIT License
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
Lit-Grid-Layout/src/lit-grid-layout.ts
Lines 78 to 84 in 54c5df7
Then, the elements are attached to the DOM here, which forcefully detaches them from their previous position in the DOM.
Lit-Grid-Layout/src/lit-grid-layout.ts
Lines 158 to 160 in 54c5df7
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
npm run start
and go to 127.0.0.1:8000Notice 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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.