Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hydration #37

Open
srghma opened this issue May 13, 2020 · 3 comments · May be fixed by #38 or #54
Open

Hydration #37

srghma opened this issue May 13, 2020 · 3 comments · May be fixed by #38 or #54

Comments

@srghma
Copy link

srghma commented May 13, 2020 •
edited
Loading

I have mentioned it here purescript-halogen/purescript-halogen#610 (comment)

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
Copy link
Collaborator

This would be possible by having alternative build functions to initialize the vdom machines. For example:

purescript-halogen-vdom/src/Halogen/VDom/DOM.purs

Lines 71 to 75 in 8b91e55

buildText ∷ ∀ a w. VDomBuilder String a w
buildText = EFn.mkEffectFn3 \(VDomSpec spec) build s → do
node ← EFn.runEffectFn2 Util.createTextNode s spec.document
let state = { build, node, value: s }
pure $ mkStep $ Step node state patchText haltText

This creates a text node, but a hypothetical hydration implementation would check the DOM for an existing node first and reuse that.

@srghma
Copy link
Author

srghma commented May 13, 2020

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 srghma linked a pull request May 13, 2020 that will close this issue
Open
@srghma
Copy link
Author

srghma commented May 14, 2020 •
edited
Loading

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

2020-05-14-20:59:55-screenshot

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

@purefunctor purefunctor linked a pull request Jun 15, 2024 that will close this issue
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Hydration srghma/purescript-halogen-vdom
Re:Hydration purefunctor/purescript-halogen-vdom
2 participants
@natefaubion @srghma