Wanted to use and customize REPL - still a bit confused

[0gust1]

I wanted to use and extend the REPL with the purpose of integrating it in a backoffice application, allowing content contributors (familiar with HTML and a little JS) to edit and create content.

I did some reading in svelte.dev website code : embed.svelte
and ReplWidget.svelte

to see how it's implemented, but I still struggle to get the "big picture" between the widget, the embed component, the REPL component itself and the webworkers.

If I achieve something, I'll be glad to contribute back some documentation.

[mjgartendev]

I think the easiest way to follow what's happening is to start with Example.svelte and work your way back. ReplWidget.svelte is mostly processing data from various sources into the shape <Repl> expects and can process either a gist or an example, which can make the embed component a bit confusing to start with.

If 'hello-world' is passed as the example prop, the ReplWidget would just fetch https://svelte.dev/examples/hello-world.json:

{
    "title":"Hello world",
    "files":[
        {
            "name":"App.svelte", 
            "source":"<script>\n\tlet name = 'world';\n</script>\n\n<h1>Hello {name}!</h1>"
        }
    ]
}

then transform the files array into components with {name, type, source} keys and update <Repl>'s component store programmatically:

fetch(`examples/${example}.json`).then(async response => {
    if (response.ok) {
        const data = await response.json();
	repl.set({
	    components: process_example(data.files)
	});
    }
});

repl.set() is one of the functions exported by <Repl>. Which you would access in your app by binding to the <Repl> component instance, like the site does in ReplWidget.svelte:

<Repl bind:this={repl}/>

You shouldn't need to do anything with the workers except copy them from the imported svelte-repl module to a static/public directory like the svelte/site does:

"copy-workers": "rm -rf static/workers && cp -r node_modules/@sveltejs/svelte-repl/workers static"

Then the workersUrl prop passed to <Repl> would just be 'workers', and the Bundler/Compiler/iframe handlers will be able to manage communication with the workers automatically.

If you reuse ReplWidget.svelte then you mostly just need to worry about navigating between different examples/gists and updating the <Repl>'s component store.

If you want to add preprocessors and such, there's a good example here: mdsvex-playground