Make Frame an iFrame possible

[stolinski]

This seems pretty crutial to how many of this type of tool works. I need to figure out how to share state between svelte and iframe. If you have exp with this, I'd love to explore.

[stolinski]

I might need some help with this. I've been looking at https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/Output/Viewer.svelte

and have a prototype where it's kinda working, it's just html rn. No css or JS.

[oneezy]

here's an example of a REPL inside a REPL (which makes use of an iframe)
https://svelte.dev/repl/eefc5b3e2311457693f153dcdf3ece2f?version=3.31.0

it has the html / css / js being applied

[stolinski]

Oh dang. This is exactly what I need. Thank you for the link!

[oneezy]

no problemo homie! looking forward to boo 👻 coming through

[stolinski]

So now it feels like I'm completely re-implementing the REPL now that I'm getting into dealing with imports and nested components. I really want this iframe aspect to work but it's def a big beast beyond just getting a single component rendered into the iframe.

I might need to fork large parts of the repl repo and use their bundler as it's already taking care of the hard stuff (imports) Def feels like a lot of work. 😅

[stolinski]

I've been hacking on this all day and have now really hit some bumps with Typescript and this approach . Kinda feels like this approach of dealing with Svelte compiling inside of Bookit might not be the right approach. I did have a working prototype that used a portal with an iframe but need to find some way to get component state to update.

Maybe, rather than passing code to the iframe, generate a page from the code and add that route to the iframe. Svelte will take care of the rest JS or TS.

Maybe a preprocessor would be the way to handle the generation ?