(async-loader): Use reference in vnode for current node #1308
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
|
note: I haven't tested this yet, not actually sure if it works. It's also scary. |
Member
Author
|
I did test this out on all the possible demos 😁 |
prateekbh
requested changes
Jul 9, 2020
Member
prateekbh
left a comment
prateekbh
left a comment
There was a problem hiding this comment.
I can see the flash again because of this PR. I'll find a way to add a test around this tonight
developit
added a commit
that referenced
this pull request
Jul 9, 2020
I finally (FINALLY) found a solution for #1293, #1308, etc etc. This doesn't use DOM hacks or anything - it just crawls up the tree of VNodes and performs a Depth-First-Search backwards from the position of AsyncComponent in order to find the most recently hydrated DOM element. Essentially, the first populated `vnode._dom` reference it finds is guaranteed to be the previous sibling of the parent element AsyncComponent is about to get rendered into. As long as AsyncComponent isn't being used load a component that renders a Fragment, the nextSibling of that discovered element is the exact node Preact will try to hydrate. In the case of an AsyncComponent wrapping a Fragment, only the first Fragment child will be hydrated. This means the remaining children will have the flicker effect, but that's pretty reasonable: ```js // app.js import Foo from 'async!./foo'; export default () => <div><Foo /></div> // foo.js export default () => <Fragment> <h1>Hello</h1> <p>world!</p> // will be culled+reinserted during hydration </Fragment> ```
Member
Author
|
Closing this in favour of #1309 |
reznord
added a commit
that referenced
this pull request
Jul 9, 2020
* Fix async-loader for Preact X I finally (FINALLY) found a solution for #1293, #1308, etc etc. This doesn't use DOM hacks or anything - it just crawls up the tree of VNodes and performs a Depth-First-Search backwards from the position of AsyncComponent in order to find the most recently hydrated DOM element. Essentially, the first populated `vnode._dom` reference it finds is guaranteed to be the previous sibling of the parent element AsyncComponent is about to get rendered into. As long as AsyncComponent isn't being used load a component that renders a Fragment, the nextSibling of that discovered element is the exact node Preact will try to hydrate. In the case of an AsyncComponent wrapping a Fragment, only the first Fragment child will be hydrated. This means the remaining children will have the flicker effect, but that's pretty reasonable: ```js // app.js import Foo from 'async!./foo'; export default () => <div><Foo /></div> // foo.js export default () => <Fragment> <h1>Hello</h1> <p>world!</p> // will be culled+reinserted during hydration </Fragment> ``` * Stop searching if we hit an element parent Co-authored-by: Anup <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Use the vnode to get access the DOM node (for getting the current element).
@developit 's magic 😄
Fixes #1293