bdom-keep-order - a tool to add/remove sibling elements whilst keeping them in order
Motivation:
React handles fast dom updates by virtual dom comparison. This tool is part of an aim to eliminate the need for that and write fast and small single page apps utilising only the standard dom, by solving the very specific problem of keeping sibling elements in order by holding on to them even while they're not attached to the dom and adding them back in when needed.
A good example is routing. When a route matches a component should show. and when it doesn't it should be detached from the dom. If you have many elements in a list that show on same routes you run into the problem of losing the order of the components and you will need to keep the order in memory and then add/remove the elements accordingly. That's exactly what this tool does.
Installation
npm install --save bdom-keep-order
Usage
// or if you only need to support es6 compatible browsers // import { keepOnParentStart } from 'bdom-keep-order/es6' const parent = document document0 const children = show === 'show a' document show === 'show b' document show === 'show a' || show === 'show b' document const keeper = keeper // SHOWING A // SHOW ON A AND B // Always show this keeper // SHOWING B // SHOW ON A AND B // Always show this keeper // Always show this children keeper // SHOWING A // SHOW ON A AND B const reorderedChildren = children2 children1 children0 document // reset will try and perform the reordering of the nodes with minimal dom // edits, but it's alwasy better to reorder the original list manually if // possible and avoid the comparison routine keeper // you will need to call keep after reset to see the expected result keeper // SHOW ON A AND B // SHOWING A // I'm new!
build
npm run build
test
npm test