Snel 🦕

A Cybernetical compiler for svelte applications in deno (Snel = fast in Nederlands)

GitHub issues GitHub forks GitHub stars GitHub license

What is Snel?

It is a tool/framework to compile .svelte component to javascript files to create web application using deno and svelte

Main features

  • simple setup
  • quick compilation
  • hot reloading
  • import maps support
  • support for scss and less out of the box
  • support for typescript and sass out of the box (soon)
  • SSR (soon)

What do I need to start using Snel?

the only thing you need is to run the installation command.

deno run --allow-run https://deno.land/x/snel/install.ts

wait wait! Why should I run a script instead of using deno install to install Snel?

Snel uses several tools to create a better development experience, some of these tools are:

  • trex to handle scripts and compilation in watch mode.
  • bundler minify and package all files for production

the install.ts file is responsible for installing all these tools so that you only worry about creating your application.

how to create a project with Snel?

after running the installation script you just have to run the create command:

snel create [project name]

then you just have to enter the created project and start the development server

cd ./[project name]

trex run start

this starts your application on a development server in the port you entered in the configuration

Using svelte core libraries

to use svelte core libraries such as transition, store, motion etc. must be called using the following syntax:

import { cubicOut } from "svelte/easing";
import { tweened } from "svelte/motion";
import { onMount } from "svelte";

svelte tells the compiler that svelte core resources are being accessed.

Using svlc/svelte compiler

Snel uses the svelte compiler to transform the components to javacript, if you just want to use the compiler separately, we provide a compiler wrapper within a simple cli that you can install using deno install or transform it to an executable using deno compile.

install compiler

deno install -A --unstable https://deno.land/x/snel/compiler/svlc.ts

transform to executable

deno compile -A --unstable https://deno.land/x/snel/compiler/svlc.ts

If you are interested in using the low-level compiler tools, you only have to access the compiler.ts file, which is a bridge between the svelte compiler (already transformed to javascript see core.js) which provides typing and useful interfaces when using the compiler core.

Using import maps

You can use import maps to reference the dependencies you use, to use import maps from bes have an import_map.json file with the following structure:

{
  "imports": {
    "[package name]": "[package url]"
  }
}

In order for the compiler to know that you are using import maps, you need to import the dependencies as follows:

import moment from "map:moment";
import axios from "map:axios";

note this syntax is inspired by how node js 15 built in modules are imported

Manage import maps dependencies via trex

if you don't have an import map.json file you can create it using the trex install command, trex is mainly focused on handling dependencies for deno but this doesn't prevent you from being able to use it to handle your dependencies for snel/svelte. to install any dependency you just have to use the custom command from trex:

trex --custom axios=https://cdn.skypack.dev/axios

this will install axios and it will make it accessible in the import map file:

{
  "imports": {
    "axios": "https://cdn.skypack.dev/axios"
  }
}

note: You should know that your dependencies must be compatible with es modules and with the browser, if you refer to some import maps package and it is not found by the compiler, it will not be transformed, so an error will appear in your browser.

we recommend these sites for you to install your dependencies

Hot Reloading

Snel provides hot reload capability, it compiles and updates the application when changes are applied to it

example

img hot reload