Allow transitions to work within iFrames

[jacwright]

Sometimes your app needs to run within an iframe. For example, Intercom's chat widget which needs to be style-sandboxed from the rest of the page is run in an iFrame. My app wraps a navigation component inside an iFrame for better performance in the rest of the page.

The only thing that can't be worked around in this situation is Svelte's CSS transitions. They add the animation styles to the global (top-level) document and not the component's document.

For Svelte's transitions to work, Svelte will need to support adding styles to the document a component lives in.

I've created a solution which works well and avoids memory leaks. I reference this ticket in the PR.

[simeydotme]

@jacwright , do you have a simple REPL to demo how to render content in an iFrame ? I wanted to do this but I couldn't figure it out :)

[jacwright]

Unfortunately because the REPL sandboxes it's iframe, any iframes within it are sandboxed and it doesn't work. In the test I added as part of the pull request I include a Frame.svelte component which you can use. You'll need to add the styles to the body in the onload event, but it should work.

I did try to get it working with the REPL.

[simeydotme]

ok, I'll look , thanks...

Just in case you were unaware; www.codesandbox.io also has a Svelte template, and you can "pop out" the preview pane in to a separate (non-framed) window, maybe that'll help your PR 🙂

[jacwright]

Unless I can load a branch of Svelte into www.codesandbox.io I don't know if that will help determine the PR correctly fixes any issues.

[2beers]

I'm also in a similar situation.
From what I saw the compiler returns the javascript and css code for every .svelte component, then the bundler just bundles the code in 2 separate files: bundle.js and bundle.css
I think we need something similar to <svelte:head> but for iframes.
Maybe <svelte:iframe target={myiFrame}>css code</svelte:iframe>

@jacwright I'm also interested on how to add content to an iFrame. I managed to do this by manually creating a component, but I don't think this is the best solution.
Here is code, let me know if your solution is better. My problem is the name is not updated in the FrameBody component and I need to use component.$set(props) se update properties, which is against svelte framework.

<script>
    import FrameBody from './FrameBody.svelte';
    let name = "Jim";

    function frameLoaded(ev) {
        const iframe = ev.target;
        const component = new FrameBody({
            target: iframe.contentWindow.document.body,
            props: {
                name: name
            }
        });
    }

    function changeName() {
        name = 'Tim';
    }
</script>

<h2>{name}</h2>
<iframe on:load="{frameLoaded}"></iframe>
<div>
    <button on:click={changeName}>Change name</button>
</div>

[Tzelon]

I also need this feature implemented.
@jacwright is there a way to use your pull requests inside my project?

[jacwright]

@2beers I use a Svelte component to simplify the iframe. See https://gist.github.com/jacwright/7003916d7ae402b528dbaaca3061ca92#file-app-svelte-L6 as an untested example.

[jacwright]

@Tzelon you could clone my branch locally, then:

1. build svelte
2. link svelte (for local use)
3. link inside your project

npm run build
npm link
cd ../path/to/your/project
npm link svelte

That's how I'm using it right now.

[jacwright]

Oh yeah, that gist is from the REPL. It just didn't work in the REPL because of sandboxing issues. https://svelte.dev/repl/7003916d7ae402b528dbaaca3061ca92?version=3.12.1

[Tzelon]

@Tzelon you could clone my branch locally, then:

1. build svelte
2. link svelte (for local use)
3. link inside your project

npm run build
npm link
cd ../path/to/your/project
npm link svelte

That's how I'm using it right now.

Works perfectly

[jtormey]

Is this specific to transitions and animations, or is this an issue for all styles? I'm trying to render a component with an iframe document body as the target, and all component styles get appended to the root document head.

It looks like Svelte briefly had support for styles in an iframe by accessing ownerDocument (added in #362), but was removed later (in #377).

[jacwright]

@jtormey This PR is specific to transitions and animations. It would be great to get another PR for component styles.