Hacking SvelteLab

Welcome everyone to Hacking Svelte Lab, behind the scenes of the supercharged
Ripple for Svelte. So first things first, who we are? Paolo Ricciuti and Antonio Sarceric.
You can find us on Twitter @PaoloRicciuti or @SarcericAntonio. We are both full-stack
developers and we both love Svelte and open source. So how everything started? Well, Svelte Society
announced the hackathon and we as members of the Svelte community were pretty hyped,
like everyone in the community, so a small little innocent tweet about Antonio who said
"who's down to team up?" to which I replied with a cute gif of a baby raising his hands and so in
a matter of minutes we were brainstorming on things that we could do to help the Svelte
community because we are part of it and we want to help the community.
And so we realized that we both loved something inside the Svelte ecosystem
that could have been enhanced. So we decided and we realized that we both loved the Svelte
REPL because it's Svelte one click away, it's wonderful for prototyping, you can share
really really easily, it's fast, it's lightweight, and it's very cool. But it has some problem.
For example, it has no TypeScript support. You can use Lang TypeScript, but as soon as you use
a type inside your script, it will error out. You can't have access to the Deltakit stores,
or method, or hooks. And this is very important because Deltakit is the recommended way to create
a Svelte application nowadays. There are also other little things like no dark mode, which is crazy,
no formatting, etc. And so we decided and we created SvelteLab. You can try on sveltelab.dev.
What it is, it's a REPL for Svelte made for Svelte with Svelte by Svelte lovers. So it's
is very important because first thing first,
it's feature packed.
So it has light and dark mode, it has code formatting,
it has Beam key bindings, so I'm not a Beam user,
but if you are, you can write SvelteKit blazingly fast.
You can install packages,
so you have the whole NPM ecosystem at your dispose.
And also very importantly is SvelteKit tailored.
So being made by SvelteKit developers,
it's SvelteKit-tailored,
and so you can search the SvelteKit docs
right inside your IDE.
You have specific file icons that will tell you
if you are inside a layout or a page or a server.
It has SvelteKit's root generation.
It's just like the Svelte extension for VS Code,
but inside your browser.
It has a Svelte add, so you can very quickly
with this wonderful community maintained project,
add integration to your SvelteKit project.
You can even hide the config clutter,
because let's be honest, we spent most of our times
in the source folder.
So you can hide all those bit config,
Svelte config file once you have touched it.
So let's take a look.
This is SvelteLab.
It's your typical IDE, you have your files, your npm script, your editor, your console,
and hopefully in a while your preview.
So let's just do something.
I can create a new file, for example a plus layout dot stelt.
This will obviously break the preview because we don't have a slot, so I can add a slot
this will come back to the preview and now right here I can use NMAT and import navigating
from dollar sign up slash stores and then I can use my snippet to check if we are navigating
and if we are navigating, we are just printing a div.
I will copy a bit of styles just to make it pretty.
And hopefully now we will have a loading indicator
when we navigate away from this page.
But we need to navigate away from this page.
So I can do Control + Shift + P
to bring this command palette
and I can create a route, start summit.
I can create a page.svelte and a page.server and I will have my files here and here I will
just await a new promise r setTimeout to r 5000 to wait 5 seconds and in my page.svelte
I will need the script that I need on page ref to home.
I will copy these, I will go to page.svelte and I will add a link to summit, to svelte/summit.
I can even go here and I'll shift F and format the code.
And now if I click summit, hopefully we will get a loading indicator, five seconds.
And then we come back to home.
So let's say that I forgot how to load,
how our load function works.
I can search the documentation here,
and this will open the official SvelteKit documentation.
But also, for example, I can add one of these integration
to my SvelteKit project.
I can enable Vim key bindings.
So now I have Vim.
I can exit Vim with a click.
Also, I can install a package.
For example, I can do sveltekit search params,
shameless blog is mine, and I can add it.
And once it finishes installing, I can just use it.
I can export zip and I can start a new template,
for example, a new project with TypeScript
and Tailwind already set up, very, very cool.
and I can share my code.
If it's not saved, you can share just a snapshot,
which will create this super long URL
with a snapshot of your code, but I can also save,
and I can have this very easily to share URL,
and I can visit, for example, my profile,
and these are all my REPL,
and I can change these, for example,
and have another REPL open.
So let's go back to the presentation
because the time is tight
and we want to specify
what are, where the main dependencies of this project
because obviously there is SvelteKit that we all know.
We use GitHub as an auto-provider,
but also to share our code.
We use Web Container API by StackBlitz.
You should definitely check out
because it's a very good project
that allows you to run node inside your browser.
We hosted on Vercel, which was very, very sweet
because we had preview branches, very, very cool.
Host on Vercel because it's very cool.
And we also use fly.io plus PocketBase
as our database plus authenticator.
So what's next for the future?
Oh, this is the wrong, back to the future GIF,
at least I hope.
this is the correct Back to the Future GIF.
And for the future, we for sure want to add proper support
for TypeScript, because right now you can use TypeScript,
but you don't get errors, auto-completion,
and we want to add that.
We also want to add the proper way to open a GitHub folder
or project inside Svelte Lab.
We also want to provide you for the ability
to upload your files, for example, for assets.
We have a lot of plans for the future, so keep an eye on.
And finally, we want to thank you, everyone,
because we want to thank, obviously, Svelte Society
for organizing the hackathon,
because it was a very, very cool experience.
The Svelte community as a whole,
because we had a wonderful response to this project
from the community.
We want to thank the Svelte maintainers and contributors
because it's for your work that we were able to do
all of these in two months.
And Svelte and SvelteKit are just wonderful.
We want to thank the StackBlitz team
for open sourcing the Web Container API
because it's a very cool concept.
And obviously we want to thank you
for listening to this presentation.
Bye.