Sylvain Lesage

Observable

This is a great notebook... thanks for putting it together. I realize that your intent here was to show how to use non-observable controls to control the graphic, but it may be worth also mentioning that you could just use the controls in the notebook in the Svelte app by just including them in the runtime.module call:

onMount(() => {
	(new Runtime).module(notebook, name => {
		if (name === "animation") return Inspector.into(".animation")();
		if (name === "viewof speed") return Inspector.into(".viewof-speed")();
		if (name === "viewof boost") return Inspector.into(".viewof-boost")();
		return ["max_speed","speed"].includes(name) || null;
	})
});

and then adding those divs:

<div class="animation"></div>
<div class="viewof-speed"></div>
<div class="viewof-boost"></div>

I suspect for many people they can just use more of what is in the notebook (and the reactivity is taken care of by the runtime already) rather than pulling them out as separate controls that then has to redefine the cells in the notebook.

Thanks again for this very helpful notebook!

Cobus Theunissen

Thanks for the idea, you're right, it's surely what most people want to do.

To be honest, my "intent" was just to adapt https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app from React to Svelte, and I didn't change the story or the examples. I added an introduction to make it clearer.

Maybe we could work on a different notebook where the integration of an Observable notebook in Svelte would use more than just one cell, nearly like https://observablehq.com/@observablehq/introduction-to-embedding, but without the iframe.