New tool to use Svelte with Observable

1

In the spirit of @j-f1’s New tool to use React with Observable - #7 by j-f1 :slight_smile:

I’ve created a notebook that provides a way to write and render Svelte components with Observable

Here’s what it does:

  • There’s a svelte function that uses the Svelte compiler to use Svelte syntax directly in Observable. It returns a standard Svelte component.
  • You can call render to render a Svelte component to the page.
  • You can use the generatedPromises, observe and readableInput methods to adapt Observable idioms to the Svelte store interface. (See the notebook for examples.)
  • Finally, virtually all the Svelte exports have been re-exported for easy use:
import {
  svelte, render,
  readable, writable, derived, get,
  generatedPromises, observe, readableInput,
} from '@ajbouh/svelte'

Thoughts?

4 Likes
2

I’ve managed to clean up the import of Svelte via a fetch+Function combo:

But I have to wonder if it wouldn’t make more sense to built upon @sveltejs/svelte-repl?

3

That cleans things up a lot, thanks!

I based this on the repl backend, but using this approach also allows interpolation of arbitrary JavaScript values into the import statements of svelte components. It also provides basic error reporting that observable should be able to pick up and show the line/column markers.

Is there something specific in the repl package that you think is a better fit?

1 Like
4

Nope, I only saw the amount of custom code, remembered that the REPL already works client-side, and thought that it might be a good fit. Didn’t realize that you had based your implementation on it.

I’m planning to set more time aside to familiarize myself with Svelte 3 in the coming days. Hopefully with a tighter grasp of its concepts and implementation I will be able to suggest some more simplifications.

5

Thanks for your changes!

I’ve merged them all and re-published the original notebook

1 Like