Trigger a full PHANTOM re—render when Redux state changes but no individual nodes were swapped

[sidiousvic]

In order for a re—render to be triggered, an element must be bound to its data via the data-phantom attribute.

      <h1 data-phantom="${slices}" id="slices-h1">${slices}</h1>

In the example above, the element is wrapping around the slices variable. Thus, if slices were to change, we desire a re—render. Phantom will know to do so via data-phantom.

The issue:

      <h1 id="slices-h1">${slices}</h1>

User has forgotten to bind a stateful element. Phantom does not know this element is bound to slices. It will not re—render upon a Redux state change. This may be confusing to the user.

Solutions

1. Throw an error when a user neglects data-phantom
Not all nodes need to be bound via data-phantom.

2. Throw an error when an element depends on a state variable and user neglects to bind it with data-phantom
If there was a way to know of this dependency, the data-phantom would already be unnecessary. This will also become an issue.

3. Trigger a full PHANTOM re—render when Redux state changes but no individual nodes were swapped

phantom tries to be efficient by using the PseudoDOM to compare and change swapped nodes. If no nodes were swapped but state updated, user may have forgotten to bind a stateful element.

This should probably be done within the renderPseudoElement() function, which is ran on reduxStore.subscribe().

Set a flag for whether swapElement() has run. If not, run a full re—render.