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.

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

Suspended portal targets #341

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from

Conversation

HoldYourWaffle
Copy link

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-router into not immediately unmounting my portals, so instead I need portal-vue to 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 create VNode'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 suspended is true, all teleportation will cease. The portal-target render function will keep re-using cached children, only recalculating once suspended is no longer true.

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.

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.
@HoldYourWaffle
Copy link
Author

In case anyone is interested, I published this as @holdyourwaffle/portal-vue while awaiting this PR.

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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant