Automating Svelte tooling with Quarto

[jimjam-slam]

I've been getting into Svelte lately, and I've had some nice early success compiling Svelte components as ES bundles and embedding them in Quarto documents:

svelte-quarto.mov

I'd really like to expand on this and use Svelte more often for charts that animate or transition in response to OJS reactivity. There are two approaches I could take (or, more likely, a combination of them):

1. A compiled library of common chart components that is published on npm or similar, imported and used wholesale in Quarto; or
2. A .svelte file (perhaps one that uses sub-components imported as above) that sits alongside my Quarto doc and is compiled and bundled on render.

The way forward for the first option is pretty clear to me. The second is what I've done in the example above, but I've essentially included an entire Svelte project bootstrap as a sub-directory (configured to produce one JS bundle for each .svelte file in a /charts directory), compiled it separately and then rendered with the bundled JS included. That's not terrible, but one of the things I love about Quarto is how much of the JS tooling it abstracts away.

I'd love to get to a place where I can set up a Quarto doc with myChart.svelte sitting alongside document.qmd. I'm still a novice when it coms to bundle tooling, but I'm imagining there're a few tasks involved:

• Detecting require statements with .svelte extensions and swapping them for the equivalent expected .js bundle output;
• Running the Svelte compiler on those .svelte files and placing the .js bundle in either the document _files folder or the website site_libs (contrast my approach above, where I listed the .js bundle in the project YAML under resources)
  • Could a Deno pre-render script handle this? It can't connect to remote servers, so I'm guessing you'd need Svelte already in there with some kind of bootstrap script that basically runs npm install

Basically, I'm just trying to work out how to keep my project spaces fairly clean and avoid them spiralling into full-blown web dev projects! Just thinking out loud here, but any guidance from pros would be welcome!

[jimjam-slam]

I'd initially ruled a Quarto extension out, since I'd been thinking about it in terms of run-time dependencies. But I suppose you could write one that includes stuff like a package.json...

[jimjam-slam]

Oh! I'll have to read through this Svelte + Deno article, and its prequel, a bit more. It looks promising!

[cscheid]

(There's a feature in quarto which we don't advertise because we haven't had the chance to make sure it's solid, so keep that caveat in mind)

If you import a javascript module from your OJS tags and render with self-contained: true, quarto will automatically bundle those for you (we use esbuild, fwiw). You can also import from typescript and we'll actually check your typescript types.

wrt Svelte: I would rather not involve the Svelte compiler, since it's my understanding that their process is a lot more involved.

[jimjam-slam]

Yeah, that's fair - it'd be a lot to bring into Svelte! I'm hoping I can rig something up with a Deno project pre-render script that calls Svelte (or snel, perhaps) if it's pre-installed. I'll have a tinker!

[zachcp]

woah. I was just coming to check see if this self-bundling capability exists and.... it already does! You guys are amazing. Will kick the tires....

Quick q: where do you specify self-contained:true ?

[cscheid]

Quick q: where do you specify self-contained:true ?

in your document YAML.

[jimjam-slam]

@cscheid Hoping I can pick your brain a little bit more on this!

I'm powering on with trying to automate Svelte compilation using an external Svelte compiler (not trying to mess with Quarto's Deno!). My current assumption is that I would have a pre-render script and a post-render script:

1. Pre-render script:
   • Identify Svelte component references in Quarto docs
   • Call Rollup + Svelte plugin on each Svelte reference, compiling it to a ES bundle (.js)
   • (Optional: write to disk a map of Svelte refs to ES bundle refs)
2. Post-render script:
   • Identify same Svelte references in output docs (using map, or manually?)
   • Convert them to ES bundle references

Regarding that last step: by the time the rendered HTML is opened, I generally need to end up with a statement like:

Circles = import("/Circles.js");

So it could start (in the Quarto doc) with something as simple as:

Circles = import("/Circles.svelte");

So I need to turn the latter (or some other statement that identified the Svelte component) into the former post-render.

Would a statement like the latter cause a problem with Quarto's build process (in between my two scripts)? I'm thinking particularly of it getting sucked into esbuild if self-contained: true, but I don't have enough knowledge of Quarto's build process to know if it does other static code analysis that might trip on it.

(I can also have my post-render script identify some other magic syntax or a commented statement that would get ignored by Quarto's render, so it's not a showstopper for me!)

[cscheid]

I'm a bit lost on what you're trying to do here, but I want to help. Send email to me at [email protected] and maybe we can set up a meeting to talk this over in real time?

[jimjam-slam]

We have a first working version of this up at https://github.com/360-info/sverto! Here's a barchart you can control in OJS, for example.

I think it's about ready for some feedback from external users. Thanks very much for the guidance, @cscheid!

[palewire]

This is very cool! Has anyone on the thread tried the reverse: Embedding a rendered quarto block into a SvelteKit page?

[jimjam-slam]

Mmm, I'm not sure! 🤔 I know that in Quarto OJS blocks, you can import objects from OJS blocks elsewhere in the doc or in other docs using `import { example } from "./otherdoc.qmd", but I'm not sure if that's built on some standardised tech like ES modules, or if it requires the OJS engine to be running on the importing end. @cscheid would be the one to ask!