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

[hiccup, hdom](examples/commit-table-ssr) - react-like hydrate? #39

Closed
den1k opened this issue Aug 31, 2018 · 5 comments
Closed

[hiccup, hdom](examples/commit-table-ssr) - react-like hydrate? #39

den1k opened this issue Aug 31, 2018 · 5 comments

Comments

@den1k
Copy link

den1k commented Aug 31, 2018

Just got around to reading the code and it looks like the browser and SSR version are separate in the sense that unlike react's hydrate we get either one or the other but not the best of both worlds. hydrate is what I meant to express (admittedly, through a handshake emoji) in this tweet.

Is there a hydration story for hiccup / hdom?
@postspectacular
Copy link
Member

Fundamentally, yes there is, but you must understand that hdom is not like react because hdom never diffs against the real DOM, but only against another hdom tree/array. So in a way hydrate already is there, but the updateUI() transducer doesn't currently support it as it always assumes an empty initial DOM state (under the chosen root element). It's trivial to add a hydrate flag though, and if enabled would simply need to skip diffing the very first received tree.

There's one other difference which needs to be taken care of: @thi.ng/hiccup doesn't wrap text nodes in <span> whereas hdom does by default (in order to better diff them). So I'd need to add an option for the server code to emit these too or else there will be inconsistencies when mutating the DOM.

But other than those 2 small things it should just work...

@postspectacular
Copy link
Member

Actually, reading more about react's hydrate, the above is not sufficient :( The first client tree would still need to be processed (partially at least) to attach missing event handlers, that would be not be too hard either though...

postspectacular added a commit that referenced this issue Aug 31, 2018
@postspectacular
feat(hiccup): add optional support for spans & auto keying (#39)
1b0deb2
postspectacular added a commit that referenced this issue Aug 31, 2018
@postspectacular
feat(hdom): add DOM hydration support (SSR), update start() (#39)
9f8010d 
- add HDOMOpts interface
- add hydrateDOM()
- update start() to support hydration
- re-use migrated NO_SPANS const from hiccup
- switch all fn to arrow fns

BREAKING CHANGE: start() args now as options object
postspectacular added a commit that referenced this issue Aug 31, 2018
@postspectacular
feat(transducers-hdom): add DOM hydration support, rename (#39)
0f39694 
- replace args with HDOMOpts
- add support for `hydrate`
- reflect same logic as w/ hdom `start()` re: null values

BREAKING CHANGE: rename transducer: `updateUI` => `updateDOM`, new API
@postspectacular
Copy link
Member

postspectacular commented Sep 1, 2018 •
edited
Loading

So I've just updated hiccup, hdom & transducers-hdom to support hydration more clearly & directly and pushed @thi.ng/hdom@4.0.2 (major version change due to other breaking API changes). I've also created a new example to better test this. Updating the commit-table-ssr demo will take me a bit longer...

Also see:
https://github.com/thi-ng/umbrella/blob/master/packages/hdom/src/dom.ts#L58
https://github.com/thi-ng/umbrella/blob/master/packages/hdom/src/start.ts#L29

@den1k
Copy link
Author

den1k commented Sep 1, 2018 •
edited
Loading

Great. Thank you! Digging in!

@postspectacular
Copy link
Member

Closing this for now. Please open a new issue if you run into any probs with hydrateDOM...

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

No branches or pull requests
2 participants
@postspectacular @den1k