Deno + Svelte (Part 2): Using Deno functions in Svelte ❤️🦕.Last time I wrote on this topic, the Svelte-Deno ecosystem was still in it’s infancy. We could compile a Svelte script using Deno, but that was about it. My thoughts on how to interact with Deno from Svelte have matured. We’ve come a long way from version 1.0 of this setup in my previous article about Deno + Svelte with a simple compile step.
Last time I wrote on this topic, the Svelte-Deno ecosystem was still in it’s infancy. We could compile a Svelte script using Deno, but that was about it.
Since the original article, a couple nice improvements have happened:
Let’s describe my coding experiences in these sections:
Section A: Snel — Build Svelte app using Deno!
Section B: Snel — Connect Svelte to Deno remotely
Section C: Using Deno methods from Svelte
Section A — Snel
Now we have a budding framework for building Svelte apps in Deno: Snel. I wanted to try building the Svelte app 100% in Deno without any Nodejs interaction at all. Snel was the most promising answer.
TL;DR: *Essentially, it works! *For the most part.
Following the Snel instructions using their embedded Trex tool gets you scaffolded up with a project pretty fast. However, if you want to do some of the _fancier _Rollup work (like
json file in your Svelte code) the support of
rollup plugins and
drollup ( Deno Rollup) is not quite mature enough yet. But importing a
jsonfile was the only thing Snel really wouldn’t let me do, so far. Unfortunately it appears that Snel doesn’t let you call Deno.readFile() from within your Svelte code either, so I was kind of stuck as to a workaround for this. In the end, I just copied and pasted the
json config data I was looking for and moved on. I imagine there will be a way forward for little things like this shortly.
Part B: Snel — Deno Connection
Ok, so we have a working front end that we can build with Deno. Now for the exciting part!
We want to execute other peoples’ code (OPC) in Deno, but outside the CLI, so we need a front end to interact with Deno —since there is no Deno standard GUI —we can use Svelte for our GUI and spin up a client-server relationship to interact with each other.
But we need a way to get our commands and data to/from Deno from our Svelte browser code.
Deno did away with the NPM and the infamous node_modules, how do we write server-side applications that require native performance on Deno? WebAssembly is here to help! We will write high performance functions in Rust, compile them into WebAssembly, and run them inside your Deno application. WebAssembly provides a way to run high performance code in Deno apps. WebAssembly is a safe, portable, and lightweight container for server-side applications. The Rust compiler toolchain provides great support for WebAssembly.
In this Svelte tutorial we'll be taking a look at creating a Svelte project using the Svelte template. We'll go over the file structure, install a VS Code extension and look at starting the built-in development server.