Feature Request: Svelte Support

As a visualization author, I want to be able to author my work in Svelte.

Svelte looks top! How might that work?

Right?! I’m thinking there could be a toggle to “turn on” Svelte somewhere in the VizHub sidebar UI. That would trigger loading of the Svelte compiler, which would generate bundle.js in place of the current Rollup setup. Technically this should be feasible since Svelte works with Rollup, and works in the browser (based on a quick look at the Svelte REPL).

This brings into question whether JSX support also should have some sort of toggle. After all, it’s a Rollup plugin as well, and there’s no sense in loading the JSX transpiler if it’s not used. Food for thought once this is working…

Now that I think of it, maybe there is no need for a UI toggle at all. The presence of any .svelte files (or particularly index.svelte or whatever the convention is) could “turn on” the Svelte compiler (and exclude the JSX transpilation).

1 Like

Automatic / zero config sounds good :slight_smile:

1 Like

The way I’d like to do this: if there’s a file called App.svelte present (this looks to be the established convention), then use it with the Svelte Rollup plugin to build bundle.js. In this case, index.js would be ignored if present.

Implementation note: the Svelte compiler should be lazy-loaded outside of the main VizHub app (just like how CodeMirror is lazy-loaded only when you open the editor).

Approach: use this package to build the bundle: https://github.com/sveltejs/rollup-plugin-svelte

Opened an issue there for Browser support https://github.com/sveltejs/rollup-plugin-svelte/issues/92

Also of note: Svelte REPL code implements its own plugin https://github.com/sveltejs/svelte-repl/blob/master/src/workers/bundler/index.js#L101

Digging in a bit deeper, it appears the best approach will probably be to craft our own Rollup plugin based on this area of the Svelte REPL code https://github.com/sveltejs/svelte-repl/blob/master/src/workers/bundler/index.js#L184

OK, so for those of us getting p to speed…

What is svelte-REPL?

…Well REPL is described on Wikipedia as

A read–eval–print loop ( REPL ), also termed an interactive toplevel or language shell , is a simple, interactive computer programming environment that takes single user inputs (i.e., single expressions), evaluates (executes) them, and returns the result to the user.

…and svelte-repl seems to be a svelte playgound on the svelte website - also available in npm.

Thanks for that background! Great stuff.