Show HN: DOM registry for a better DOM Manipulation

Hello Everyone.

I’ve been working on a project called DFlex: https://github.com/jalal246/dflex that contains multiple packages all written in Pure JavaScript to manipulate DOM elements in a completely new way depends on creating a DOM registry.

The ultimate result is moving every element from destination to target with CSS animation. This means all possible operations should be done in 60fps.

It is also extendable. In most existing solutions the more elements you are trying to manipulate the more lagging you get. Here, no matter how many elements you are dealing with it’s always going to interpret each movement to CSS transform without asking the browser to get the node for each request. It is not restricted to any frameworks I have examples for React and Vue with some explanations inside each package. And maybe add more later. It includes:

  • DOM Generator DOM relations generator algorithm.
  • DOM Store Traverse through the DOM tree using element id.
  • Drag & Drop Lightweight Solution for a Drag & Drop App based on enhanced store algorithm.
  • Draggable High-performance draggable elements.
  • Unit test & end to end test
  • Packages are decoupled and work separately. Each package has it own universe including test and playground

There's a lot to add and improve with new packages. I am looking for contributors who like to get involved in open source. So, if you are interested, open an issue, or pull request. I need your support. Thank you!