3 ms·

This was always possible in React. I used it to render the redux-devtools in its own window (before there was a browser plugin): https://gist.github.com/tlrobin

This was always possible in React. I used it to render the redux-devtools in its own window (before there was a browser plugin): https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7 https://gist.github.com/tlrobinson/1e63d15d3e5f33410ef7

pygy_ 9y ago
Yes, I didin't read the whole thing so I don't know if it applies here, but portals have an additional property: Events fired in the portal bubble up the vdom tree up to the component that mounted the portal (and then further upwards to the main vdom root), rather than up the real dom up to the popup window root.
timdorr 9y ago
That's establishing a separate component tree. This is one single component tree, hosted in the parent window. That was never possible until portals landed.
- pygy_ 9y ago
  You could have it like this: <Parent> <MyPortal root={element}> <h1>Howdy!</h1> </MyPortal> </Parent> Where MyPortal actually renders its children in another element. Single component tree, multiple DOM roots. What portals add is the propagation of events through the portal.
  - pygy_ 9y ago
    I'm out of my edit window, so here's an example of what I mean: https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgBMIA3AAgjYF4sGCGgB8LAPQdOogDpp2XXgIAOtAE7EMUcVK5y08kAF8K6bLkQEAVgip0GTYnjABXNNWIR63AAoatKAgALxgAChV1WhU4AEpuYHlubgAlGAxPABEAeQBZfHUmNhh1CKiY-GpCaDZCtApuSOi4AtpaYlik7kLiV3U0bjRXKCh5Y3l5Nw8vHwBBVwAPbjLm+MSB7phe-sbylqqauoBuMZPDD3o4Ym5Cbn5U9M9KwoxGAFFYHAYJtCnPbwGKTaxDCay6PT6A0IYXmCwaQxGFC6yWhAHIVKj4cMoA1USJuEIRKjYkiNslkTcwv5NNoQjAGsAou1EI0AtpTBSUWF0ZjBtjcfi1DSoMTSclkiSup00ONzmkMsQcvk6sVStCge0SQThGhpSYzCBMDg8JU4HYaPRGMwrNJEBgwIx1AkugAjDIAawA5lF3GwALR0KAaFkAd2qjDOyRdGlVLIATColmx2ow2Js2JHuNH1Kq-eoMBxXHAWQBGAAMibOXQcVuILNexFKfFiVY2YCDrxZ6ggnpImbAlr9IZgPZILOjUAzXRUBY4aE9LLL3HLlbGP2kzo22dj3AAzInuHBaEE04Up1uYyU8wWIEXSxWFpnqLAMOpx+1CJmhOpPSJ76uNhnNg5wXZcHzOWUTAAXSoII0HdBAUHMY0rBeJ5ik4GAgxUL5iHwWxKBAPpyCsEhiBiRAJAkdwVC9SpaCwCQ0OIAABEsADZ8BLfAy2orA2CYx48IwrDolw-DzWIABPFRLBAAjTGQuTmL9ZMsHwETsPEgiqGIvAyIoqiaLouhGJUtS2M47jeNcfjBIVVSGI0mBMK0pwJMI6TZLwBSoOMIA https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAG...

pygy_ 9y ago

Yes, I didin't read the whole thing so I don't know if it applies here, but portals have an additional property: Events fired in the portal bubble up the vdom tree up to the component that mounted the portal (and then further upwards to the main vdom root), rather than up the real dom up to the popup window root.

timdorr 9y ago

That's establishing a separate component tree. This is one single component tree, hosted in the parent window. That was never possible until portals landed.

pygy_ 9y ago
You could have it like this: <Parent> <MyPortal root={element}> <h1>Howdy!</h1> </MyPortal> </Parent> Where MyPortal actually renders its children in another element. Single component tree, multiple DOM roots. What portals add is the propagation of events through the portal.
- pygy_ 9y ago
  I'm out of my edit window, so here's an example of what I mean: https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgBMIA3AAgjYF4sGCGgB8LAPQdOogDpp2XXgIAOtAE7EMUcVK5y08kAF8K6bLkQEAVgip0GTYnjABXNNWIR63AAoatKAgALxgAChV1WhU4AEpuYHlubgAlGAxPABEAeQBZfHUmNhh1CKiY-GpCaDZCtApuSOi4AtpaYlik7kLiV3U0bjRXKCh5Y3l5Nw8vHwBBVwAPbjLm+MSB7phe-sbylqqauoBuMZPDD3o4Ym5Cbn5U9M9KwoxGAFFYHAYJtCnPbwGKTaxDCay6PT6A0IYXmCwaQxGFC6yWhAHIVKj4cMoA1USJuEIRKjYkiNslkTcwv5NNoQjAGsAou1EI0AtpTBSUWF0ZjBtjcfi1DSoMTSclkiSup00ONzmkMsQcvk6sVStCge0SQThGhpSYzCBMDg8JU4HYaPRGMwrNJEBgwIx1AkugAjDIAawA5lF3GwALR0KAaFkAd2qjDOyRdGlVLIATColmx2ow2Js2JHuNH1Kq-eoMBxXHAWQBGAAMibOXQcVuILNexFKfFiVY2YCDrxZ6ggnpImbAlr9IZgPZILOjUAzXRUBY4aE9LLL3HLlbGP2kzo22dj3AAzInuHBaEE04Up1uYyU8wWIEXSxWFpnqLAMOpx+1CJmhOpPSJ76uNhnNg5wXZcHzOWUTAAXSoII0HdBAUHMY0rBeJ5ik4GAgxUL5iHwWxKBAPpyCsEhiBiRAJAkdwVC9SpaCwCQ0OIAABEsADZ8BLfAy2orA2CYx48IwrDolw-DzWIABPFRLBAAjTGQuTmL9ZMsHwETsPEgiqGIvAyIoqiaLouhGJUtS2M47jeNcfjBIVVSGI0mBMK0pwJMI6TZLwBSoOMIA https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAG...