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

Support for string targets for isomorphic createPortal #10711

Closed
thysultan opened this issue Sep 14, 2017 · 10 comments
Closed

Support for string targets for isomorphic createPortal #10711

thysultan opened this issue Sep 14, 2017 · 10 comments

Comments

@thysultan
Copy link

This is a proposal for the createPortal API to in addition to Nodes support strings for the second argument(container), which could pave a declarative way to achieve out of order server side rendering.

#createPortal(..., container: Node|String, ...)

The server could render a portals children in-place and have the client-side hydration process move it to the right location client-side using document.querySelector if the container is a string.

@gaearon
Copy link
Collaborator

gaearon commented Sep 14, 2017

See also discussion in #8386: #8386 (comment)

@thysultan
Copy link
Author

Have there been discussions on how this might translate to non-DOM environments that might not have the querySelector equivalent?

@gaearon
Copy link
Collaborator

gaearon commented Sep 14, 2017

Portal implementation itself is agnostic of what you pass as a second argument as long as it's a valid container (i.e. the thing you do the top level render into). For DOM it's a DOM node but for other environments it could be anything that top level render container could be.

@jquense
Copy link
Contributor

jquense commented Sep 14, 2017

Was there a reason the function arg approach wasn't used ? I see it being suggested but not discussed. Is the recommendation to use a canUseDOM guard in render()?

@thysultan
Copy link
Author

thysultan commented Sep 14, 2017

@gaearon Yes, Node/View objects would translate naturally to other environments, but the idea of the string argument might rely on the environments capabilities to query the view hierarchy with the specified selector; This exists as querySelector in the DOM but equivalent implementations might not exist outside of the DOM.

So that might affect this proposal as far as an isomorphic solution is concerned.

@aweary
Copy link
Contributor

aweary commented Sep 15, 2017

but the idea of the string argument might rely on the environments capabilities to query the view hierarchy with the specified selector; This exists as querySelector in the DOM but equivalent implementations might not exist outside of the DOM.

@thysultan it would be a selector for the DOM renderer, but the string could signify some other target in the other renderers. It would be up to the renderer to determine how to resolve the target based on the string, so there's no inherent coupling to querySelector or the DOM.

@gaearon gaearon changed the title [Feature] Support for strings in createPortal. Support for strings in createPortal Oct 4, 2017
@gaearon gaearon changed the title Support for strings in createPortal Support for string targets for isomorphic createPortal Oct 4, 2017
@gaearon
Copy link
Collaborator

gaearon commented Jan 2, 2018

Related: when we do this we might also want to consider renaming it to <React.Portal>.
#11586

@jburghardt
Copy link

Are there any new updates on this topic ?

@stale
Copy link

stale bot commented Jan 10, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Jan 10, 2020
@stale
Copy link

stale bot commented Jan 17, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

@stale stale bot closed this as completed Jan 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants