Hydration

[srghma]

I have mentioned it here https://github.com/purescript-halogen/purescript-halogen/issues/610#issuecomment-614393683

just like for:

1. https://reactjs.org/docs/react-dom.html#hydrate
2. https://github.com/snabbdom/snabbdom/blob/master/src/tovnode.ts

The second link is just for reference. It builds VDOM from DOM node, but our hydrate method should

1. take DOM element
2. take VDOM element that contains event handlers
3. add event handlers to the DOM elements recursively AND throw error if the content of the DOM element is different from the VDOM (for example the text or class property)

[natefaubion]

This would be possible by having alternative build functions to initialize the vdom machines. For example: https://github.com/purescript-halogen/purescript-halogen-vdom/blob/8b91e55019060f50779dba20959f47cf4b60678d/src/Halogen/VDom/DOM.purs#L71-L75 This creates a text node, but a hypothetical hydration implementation would check the DOM for an existing node first and reuse that.

[srghma]

elm implementation https://github.com/elm/virtual-dom/blob/master/src/Elm/Kernel/VirtualDom.js#L1531

react implementation

https://github.com/facebook/react/blob/43063fd8442c5dfa927b4cc423bae1bdbeac7132/packages/react-dom/src/client/ReactDOMLegacy.js#L256

e.g. here warning for text difference https://github.com/facebook/react/blob/823dc581fea8814a904579e85a62da6d18258830/packages/react-dom/src/client/ReactDOMComponent.js#L1072

also warned for extra attributes https://github.com/facebook/react/blob/823dc581fea8814a904579e85a62da6d18258830/packages/react-dom/src/client/ReactDOMComponent.js#L222

warnForPropDifference

[srghma]

I have found that prerendered html should not contain any newlines

because

with

  <div id="app">
    <div class="component">
      <div class="label1">test label 1</div>
      <div class="label2">test label 2</div>
    </div>
  </div>

componentNode.childNodes will return newspaces too

the correct version is

  <div id="app">
    <div class="component"><div class="label1">test label 1</div><div class="label2">test label 2</div></div>
  </div>

react does the same https://jsbin.com/majoxoqoje/edit?html,js,console,output

---

extraAttributeNames are defined here https://github.com/facebook/react/blob/823dc581fea8814a904579e85a62da6d18258830/packages/react-dom/src/client/ReactDOMComponent.js#L1029-L1050

unknown props are downcased and removed https://github.com/facebook/react/blob/823dc581fea8814a904579e85a62da6d18258830/packages/react-dom/src/client/ReactDOMComponent.js#L1134