Morph and explicitly maintaining state when initial state unknown

[samwillis]

I'm currently implementing something using the Morph plugin, we don't know when "morphing" the Dom containing Alpine components what the initial state was when they were created. So when we receive the html fragment from the server its x-data will be different from that initially set, this results in the Alpine component be reinitiated and state lost. If we did know the initial x-data and it was the same the state is maintained.

I would like to propose something like a x-data-maintain attribute that can be provided in place of x-data, the morph plugin can then watch for this and ensure the current component state is kept. I have implemented this with the lifecycle hooks using the very simple code below, however I think this is probably a useful enough feature that having it as standard and documented would be good:

Alpine.morph(el, newHtml, {
  updating(el, toEl, childrenOnly, skip) {
    if (toEl.hasAttribute && toEl.hasAttribute('x-data-maintain') && el.hasAttribute && el.hasAttribute('x-data')) {
      toEl.setAttribute('x-data', el.getAttribute('x-data'));
      toEl.removeAttribute('x-data-maintain');
    }
  }
});