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 🙈
5 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 🙂.