Suspended portal targets #341
Open
Conversation
This file contains 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
Avoids having to install Python 2: sass/node-sass#2877 Set sass-loader to 10.x instead of 11.x because it's incompatible with Vue 2: https://stackoverflow.com/a/66087132/10434371
Unfortunately $options is not properly handled by TypeScript in Vue 2, leaving me with this slightly cursed solution.
|
In case anyone is interested, I published this as |
This leads to more predictable behavior in combination suspension.
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.
Note that this PR is based off #340, as I couldn't set up a dev-environment with the outdated versions.
Let me know if I need to rebase this on
develop.I ran into trouble when using portals to implement custom "actions" for each route in a "toolbar".
When a user is navigating between routes, the page component (with
<portal>) is immediately unmounted, which means that the portal-ed "actions" are immediately switched. This makes sense, but due to various animations and transitions this led to an extremely jarring experience in my application.I can't (easily) trick
vue-routerinto not immediately unmounting my portals, so instead I needportal-vueto wait until all the bells and whistles have completed.Initially I tried to manually use the
Wormhole, but that didn't work out unfortunately. I don't remember the exact reason, I think it had something to do with not being able to createVNode's from$ref-elements, but it was a giant mess regardless.To fill this void I introduced a new mechanic to the
<portal-target>component:suspended.While
suspendedistrue, all teleportation will cease. The portal-target render function will keep re-using cachedchildren, only recalculating oncesuspendedis no longertrue.Based on my own use-case, which the implemented demo mimics, this implementation seems to work perfectly :)
I'm not that familiar with portal-vue's codebase though, so I wouldn't be surprised if this opens up wormholes for bugs in other places.
I'm eager to hear what you think of this feature!
Also, if applicable, please let me know what additional documentation/demo's should be adjusted.