patrick-steele-idem / morphdom

Fast and lightweight DOM diffing/patching (no virtual DOM needed)
MIT License
3.21k stars 129 forks source link

Support for Plugins #102

Closed lzilioli closed 5 years ago

lzilioli commented 7 years ago

We've been using morphdom at RetailMeNot, and it has worked great for our needs. Thanks to morphdom we are developing with a flux-like workflow without tying ourselves to an opinionated framework such as react.

Although for the most part, the switch to morphdom has gone smoothly, we found we lost the ability to easily code jquery-based animations, since morphdom can alter the dom with the state coming out of our templates whenever our state changes.

I set out to solve this problem, and quickly found that doing so in a sane way with morphdom's existing configuration options would prove to be challenging–so I set out to create a "plugin system" for morphdom. In practice, what I came up with is more of a composable config pattern, but it works great for our needs and I thought you may be interested in being such config composibility to morphdom itself. Find that code here.

I have open sourced the code we use to do animations with morphdom, as well as the code that composes multiple morphdom configurations into a single configuration. You can find it in the RetailMeNotSandbox github account here: https://github.com/RetailMeNotSandbox/morphdom-plugins.

I am curious if there is any interest in introducing the ability to compose configs to morphdom. If so, is there anyway I can help make that happen? Let me know if you have any questions. I would be more than willing to help answer them.

AutoSponge commented 7 years ago

There's an existing pattern you can use for your jQuery needs. You can read the background here. Choo (before replacing morphdom) used this for components.

Essentially, you want to attach an isSameNode method to your toNode that points to the existing fromNode. This will tell the render engine to skip that element. Obviously, if you have custom heuristics (like only re-render when attribute foo="bar") you can make the equivalence conditional.

Let me know if that helps.

EDIT:

here's the relevant test: https://github.com/patrick-steele-idem/morphdom/blob/test/browser/test.js#L787

here's a note in the docs: https://github.com/patrick-steele-idem/morphdom/blob/master/docs/virtual-dom.md

lzilioli commented 7 years ago

It looks like the aforementioned jquery solution would have helped solve what I set out to solve prior to creating morphdom-plugins, however I solved it in a different way with the plugin approach discussed above.

I think that, regardless of application, being able to compose together multiple morphdom configs would be very valuable, which was the original ask of this issue.

snewcomer commented 5 years ago

closing for now. Feel free to reopen!