by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 21 2018 14:33
    choumx closed #27
  • Aug 21 2018 18:52
    choumx commented #27
  • Aug 21 2018 15:27
    choumx commented #27
  • Aug 20 2018 22:34
    DylanPiercey commented #27
  • Aug 20 2018 21:39
    coveralls commented #27
  • Aug 20 2018 21:36
    choumx opened #27
  • Aug 19 2018 02:14
    DylanPiercey commented #26
  • Aug 19 2018 02:13
    DylanPiercey closed #26
  • Aug 19 2018 02:13
    DylanPiercey commented #26
  • Aug 19 2018 02:05
    coveralls commented #26
  • Aug 19 2018 02:04
    coveralls commented #26
  • Aug 19 2018 02:03
    syarul synchronize #26
  • Aug 19 2018 02:00
    syarul opened #26
  • Aug 18 2018 12:07
    syarul commented #25
  • Jul 29 2018 09:33
    syarul closed #25
  • Jul 29 2018 09:33
    syarul commented #25
  • Jul 28 2018 16:33
    DylanPiercey commented #25
  • Jul 28 2018 07:28
    syarul edited #25
  • Jul 28 2018 07:05
    coveralls commented #25
  • Jul 28 2018 07:02
    syarul opened #25
Nelson Pecora
@nelsonpecora
which means I don't think it has anything to do with dragula (which, phew)
Dylan Piercey
@DylanPiercey
It's a little hard for me to tell exactly whats going on from the picture alone. Do you want to describe a bit more what your seeing and what you are expecting to see?
Nelson Pecora
@nelsonpecora
If I'm re-rendering the whole thing, then won't all nodes !== their equivalent old node?
yeah, sorry
Dylan Piercey
@DylanPiercey
Depends what the re-render looks like
the goal of set-dom is to reuse as much nodes as possible
Nelson Pecora
@nelsonpecora
the re-render is straight-up handlebars template → elements, which means it's not using any of the old nodes at all
Dylan Piercey
@DylanPiercey
the only time nodes are replaced is if their data-key no longer exists or they are at the end of the list that has been removed from.
Right but what set dom does is compares the new nodes to the old nodes and tries to update the old nodes if possible. If not (i.e: different tag name, node type, or data key, it replaces them).
The end result is is that there are as few mutations as possible to the actual dom.
Nelson Pecora
@nelsonpecora
Yep, makes sense
Dylan Piercey
@DylanPiercey
I may be misunderstanding what you are trying to say though
Nelson Pecora
@nelsonpecora
haha same. one sec, lemme find the part of the code I'm thinking of
ohh, foundNode is a reference to the old node with that same key, right?
Dylan Piercey
@DylanPiercey
So basically whats going on is in https://github.com/DylanPiercey/set-dom/blob/master/src/index.js#L146 it loops over all old nodes and find's any with keys and creates a map. Then the second while loop goes over each newNode and oldNode again but if the new node has a key it tries to find it in the old key map. If it finds a node in the old key map then it checks to see if the foundNode is the same as the current old node we are on (this means that the node has not moved) if they aren't the same then in shifts the node before updating it.
Nelson Pecora
@nelsonpecora
ah, ok. I think I get it now
When I looked over that bit of code before I thought it was comparing the new node with the old node
Dylan Piercey
@DylanPiercey
Nelson Pecora
@nelsonpecora
so my re-rendering / creating entirely new nodes shouldn't be an issue
Dylan Piercey
@DylanPiercey
If there was a key
and yes
Nelson Pecora
@nelsonpecora
ok, hmm
doing the diff without keys worked, but I assume it wasn't as optimized correct?
Dylan Piercey
@DylanPiercey
@nelsonpecora that is correct.
It'd be nice to find out why it isn't working with keys, but ultimately you only have perf issues if you're list contains large nodes or is huge since it has to diff them all the way down.
Nelson Pecora
@nelsonpecora
yup
the main reason I'm going down this path is that I'm trying to fix my event listener problem (that 'adding stuff' I do between rendering and diffing includes adding the event handlers, which are getting thrown out). I was thinking of hooking into the "mounted" event
Dylan Piercey
@DylanPiercey
I personally use the 'mount' and 'dismount' events constantly. It's the best way to build components with set-dom.
For things like drag and drop, google maps, embeds, etc.
Nelson Pecora
@nelsonpecora
haha yeah, but that would necessitate me solving my key issue :sweat_smile:
(those events aren't triggered if I don't have keys/ids, correct?)
Dylan Piercey
@DylanPiercey
Yes you are right, and a key thing to remember is that you must capture these events though delegation.
Nelson Pecora
@nelsonpecora
yep
I'm thinking (if I can't solve this data-key issue) that I should just destroy all events on my components before re-render and add all of them back after the diffing
Dylan Piercey
@DylanPiercey
Couldn't you just use delegation for the events so that you don't have to destroy the listeners?
Nelson Pecora
@nelsonpecora
...
ok so I just had an epiphany about how event delegation worked
Dylan Piercey
@DylanPiercey
:p
Nelson Pecora
@nelsonpecora
for some reason I thought it was more like a syntactical sugar around regular events, and that I'd have to re-bind them every time
but the whole point is that they're actually bound to the root element / document / delegator / etc
Dylan Piercey
@DylanPiercey
Exactly, and then every time the event fires if finds the node based on the selector for you.
Nelson Pecora
@nelsonpecora
ok I think my life just got a whole lot easier, haha
Dylan Piercey
@DylanPiercey
lol
Nelson Pecora
@nelsonpecora
hmm. so dumb question: if the handler only handles the event after it has bubbled up, I can't do something like e.preventDefault() on delegated events (unless the delegation library is doing some special stuff), right?
Dylan Piercey
@DylanPiercey
Depends on the delegation library. The ones I use allow for both e.stopPropagation and e.preventDefault.
All of them still should support preventDefault
Nelson Pecora
@nelsonpecora
hmm ok
Dylan Piercey
@DylanPiercey
The bubbling is synchronous which is why you can do that.
Nelson Pecora
@nelsonpecora
oh! that makes sense