Is there a way to make an iframe reactively render with state/signals from its parent?
Stuff that I tried:
- Set state/setState in the iframe.window.someGlobal and access it in the iframe from there
- Wrap createState in createRoot
- Render the iframe solid app with runWithOwner with the owner of the parent app
I know there are alternatives, but each of them have drawbacks:
a. Send state changes between parent/iframe and update state with reconcile (Drawback: Performance)
b. Render the iframe content directly in the parent (Drawback: CSS inconsistency, certain libraries with document side effects break, event delegation has to be manually registered)
Currently I use the a.) alternative, but I'd really like to get rid of the state reconcilation somehow 🙈
8 Replies
what about
window.postMessage?Jupp thats what I do in a.), I currently use postMessage and reconcile the state changes between parent<->iframe 😅
i'm not sure if it's applicable in this scenario, but if you can get the two apps use the same instance of solid, reactivity can work. https://solid-playground.netlify.app/?version=1.6.2#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EogcuPXgCpeUMrxdyFy1Ru16LVm9x8ABa4MGqy8ooqdN66BiFhKlZWMvQQzLhotBC8AMIMELjiABQAlPxWvLzM2WR8wDVpuFiucLj5TQC6vAC8rgB0zEJQRQDKaADm0GrFAAylljnVtXwYQ3Dwhb28Zb0AfK3tBbjFjYW7ANS8AIwLlbxqbbxocrBwAISIvAASACoAsgAZACSADFGG8AKKPTa4e4AR3ocCR-zQQ1ouGcAGtirsegcQPcqgB5Ew6OAZfrOMiTCDFF4Q+CDbJFQoAdQwIlohhahKWVSqZBaQlE4haCTUWCJArOzWlgraHUKUv5UlK90k6qWQlwTByxWlAB49kaTPRcLhsrwCMQeiozRbsipeNlchpmFieiA1kJYZITaqqiBZWVJEb9A7LRAAwLeIaGW9BHAZF6E-BpGQWFzmF7s9J9DGBYaC-c7hAwxArDUIHVeNntgADKyGshDNCEPg2uB2lC0ET0R4qAOpdKZK0AQUIhF2fKq1dra22eIOZEVx2KADd9rwt1dbvcdXreBKlEoG4bI1bsohmO7PaeACTe9L+x-B46SYuX6Onpvl5IQCKYiMMUk6EC02b0LC-QmH2+BasWraMO2uABn+VhASUy5xkqRQSAWEG0MwUHCLg-QTG00IbKRABC+DAiIBpgFAU4qKU7xlmAkidEAA
coool
Ohh veerrry interesting 😮! Thank you for the demo 👍! Sadly in my case both sides need to work with "generic" solid components properly importing their dependencies. But atleast now i know that its definitely a tradeoff in the solid core, and not a problem with iframe security 🙂.
I know this was 3 years ago. But, on the off chance you still need this.
I've been playing around with this idea for a library too, and, this component seems to work pretty consistently: https://github.com/solid-medley/camera-context/blob/cc48c3260ae5c355d57bdc5d68805cd84f443da0/lib/src/components/component-frame.tsx
It creates a new root, and attaches it to the iframe's body element.
You can use it like this:
Hope it helps.
If you're using the
sandbox property, it's important to use both allow-same-origin allow-scripts in it.
Because, the allow-scripts runs solid, and, the allow-same-origin is necessary to access the document inside of the iframe.Thank you for sharing your solution 🙂❤️! Looks great for some use cases 👍.
I also came up with something a couple months ago. Though it is a bit different in that it uses a second Solid instance in the iframe. If you are curious, I wrote an article about it back then:
https://nitropage.org/blog/nitropage-v0-68#reworked-editor-state-synchronization
I think your solution is probably better, I've been tinkering and mine just renders the components in the frame but the solid context is in the parent document.
I guess it's useful for style separation, but you can also do that with a Portal set to use shadow dom.
I'll have a closer look at your article, thanks!