Add embedding support to the REPL.

[Tropix126]

Describe the problem

At the moment, setting up code examples in documentation sites is rather tedious due to svelte's compiled nature. You have a few options:

• Use a static preprocessed solution that feeds an example string to the compiler during build time.
• Go through a nightmare of selfhosting https://github.com/sveltejs/svelte-repl.
• Create your own REPL using a browser version of rollup, package resolution hacks, web workers, and the svelte compiler.
• Just link to a repl on https://svelte.dev.

Describe the proposed solution

While all of these options are valid, I believe that this could be made easier. Similarly to sites such as YouTube that offer <iframe /> embedding, I think the site could offer an embeddable link to a specific REPL with just the input and output. This would have a few advantages:

• Users would have access to the site's community features, such as forking and sharing their versions rather than a selfhosted solution being entirely self-contained.
• The process for displaying interacitve examples would be made easier by a large magnitude, requiring very little setup and helping the ecosystem in the process.

Alternatives considered

Document https://github.com/sveltejs/svelte-repl and make it more easily adaptable to external environments.

Importance

would make my life easier

[Tropix126]

With a little bit of digging I've discovered that the repl actually already supports this, but the functionality for loading usermade gists is broken. Passing in something such as https://svelte.dev/repl/embed?gist=1d80b906abca49e697dde437fd57be0a will cause an internal error. I've tracked the gist fetching problem down to this line; investigating further.

[Tropix126]

I found the problem; the object being returned by Object.keys(files).map() is the wrong data.

const components = files.map(({ name, source }) => {
    const dot = name.lastIndexOf('.');
    if (!~dot) return;

    return {
        name: name.slice(0, dot),
        type: name.slice(dot + 1),
        source
    }
});

appears to return the correct data. Should I PR this?

[dummdidumm]

In sveltejs/svelte#4866 (comment) @Conduitry expressed concerns about this, and I'm not sure how much that has changed. We have open collective money now though so the situation is different now.

[Tropix126]

Ah, I see.