Hey friends, welcome to the Swelt 5

course. This course was made for new and

existing Swelt developers. In this

course, you're going to get hands-on

experience starting from the basics to

more advanced topics. You're not only

going to learn how to use Swelt, but

also how it works. I believe that

knowing how things work gives you

greater joy by being more competent at

what you do. This course was a lot of

work. So before we get started, I would

appreciate it if you subscribed and

engaged with the video by liking and

leaving a comment for the algorithm and

listening to the message from our

sponsor. This video is sponsored by

Sentry. If you want to see all of the

errors in your application and have more

insight when things go wrong instead of

guessing, you want to check out Sentry

at sentry.io. The worst case scenario is

when something goes wrong in your app

and you don't know about it, costing you

a potential customer. Sentry gives you

complete visibility in case something

goes wrong with error monitoring to get

actionable insights to resolve the most

important code related issues and other

features like log so you can see what

happened and why. Session replace to get

to the root cause of an issue faster by

watching actual replays of real user

sessions. Tracing to find out why an API

is slow or where a crash came from. And

Sentry even has a new AI debugging

agent, Sier, that can debug the root

cause of an issue and open a pull

request with a fix for you. Sentry

supports almost everything and makes it

incredibly easy to get started with SW.

If you're using Swellit, you can use

their installation wizard to set

everything up for you or you can do a

manual setup. Thanks to Sentry, Sulki

now has even first class support for

observability with built-in open

telemetry tracing and a dedicated

instrumentation setup file that ensures

your monitoring tools work seamlessly.

If you're a solo developer, you can get

started today for free with Sentry's

generous free tier. So, make sure your

user experience remains great by using

Sentry at sentry.io. Thank you, Sentry,

for sponsoring the video. All right,

before we get started, you're going to

need Node.js JS to run and install npm

packages. So you can go to the node

website and under get NodeJS, you can

pick your target platform. For the code

editor, I'm going to use Visual Studio

Code, but any VIP coding fork of VS Code

is going to work. And of course, we're

going to need the swelt for VS Code

extension for syntax highlighting and

other features. If you're using another

editor like Jet Brains or Vim, you can

find the Swelt language server for your

editor.

Usually to set up swelt you would use

the vit C cli by saying npm create vit

at latest and then you would get a bunch

of options for other frameworks but you

could pick swelt and you can pick if you

want typescript or javascript in this

course I want to focus on swelt and I

think that types are just visual noise

so I'm not going to be using typescript

but if you care about types I'm going to

include a link to a post where all of

the examples are going to be typed and

this course is also not going to be

focused on swell kit the meta framework

for swell If you want something with

more opinions that has routing,

serverside rendering and so on, then

once you're done with the course, I

encourage you to look at swell kit. In

this case, we're not going to use the

vit CLI, but a swel starter that I

prepared. The swell starter includes the

assets, styles, and packages that you're

going to need through the course. It

also uses the minimal CSS framework,

Picos CSS, so everything looks great out

of the box. This way, we can focus on

what's really important. To get started

with the SWEL template in your terminal,

you can type npx dit the name of the

repo which is going to be joys of code

/arn-swelt.

And you can name the folder whatever you

want, but I'm going to name it

learn-swelt.

This is just going to copy the repo

without a commit history and it should

take a second. All right, let's cd into

learn swelt. All right, so now that

we're inside learnswelt, we have to

install the dependencies. So we can say

npmi and this should take a second. Once

it's done, you can run the development

server by saying npm rundev. All right,

let's go to the browser. Now you can

open a new tab and let's navigate to

localhost 5173 which should open the

default example. Now you should have

swelt running on your machine. All

right. So what is swelt? If we go to the

swelt web page, we can see that swelt is

a word that means attractively thin,

graceful, and stylish. And here we have

the definition. Swelt is a UI framework

that uses a compiler to let you write

breathtakingly concise components that

do minimal work in the browser using

languages you already know, HTML, CSS,

and JavaScript. So, let's actually

investigate this claim before you even

start learning about swelt. So, here I

am inside of VS Code and I already

opened the learn Swelt project and this

is just a minimal VI project so we keep

everything simple. And if you aren't

familiar with Vit, here we have index

html which is the entry point of our

application. Here we have the public

folder so you can put your assets inside

of here and the most important source

folder where we're going to keep our

code. So let's open the app.swel file.

Let me bump the font size up. As you can

see here, we have something that looks

like regular JavaScript and HTML. But

unlike regular JavaScript, this count

value here is reactive. So if we go to

our example here, and we can just

increment the count and you're going to

see it's going to be reactive. So the

advantage of cell being a compiler is

that you can take the syntax of

JavaScript and change the semantics for

a better developer experience. In this

example where we have count++ here we're

actually using reassignment to update

the value reactively. So you can also

say plus= 1. And this is the same thing

of course and we can actually see the

compiled output. If you have the spelt

extension you can press control shift p

and you can type show compiled code here

and it's going to show you the compiled

code. As you can see, this is human

readable JavaScript. Of course, I

cleaned it up a bit so we can actually

examine it more. So, let me just open

this empty tab and I'm going to copy

paste some code here. So, here we have

this function app which accepts a

target. And then we're creating this

reactive value which is actually a

signal under the hood. And then here

we're creating the DOM elements which is

the button in this case. And then we're

going to append it to the DOM. And here

we're just retrieving the text node from

the button. And then this is the

reactive part. So we can update the DOM

when state changes using this template

effect. And later we're going to learn

more how this works. But as you can see,

what we learned from this exercise is

that swell doesn't have a virtual DOM.

It doesn't rerender the entire component

when your state updates like React. It

does granular updates to the DOM when

the state changes. This is what makes

SWEL fast and performant and what it

means to do minimal work in the browser.

All right, let's start from the

beginning. Every file that ends with the

dotselt extension is considered a swelt

component. To be more precise, it's a

single file component. As the name

implies, a single file component means

that all of your logic, markup, and

styles are inside of a single component.

So, for example, here we can create this

logic block. We have markup

and styles. So, let's create a script

tag here. And then we create a variable

named title that has the value of inside

of the markup. You can put anything you

want. You don't need a special template

tag or anything like this. You can just

create elements directly. So let's

create a heading and then we can use an

expression inside of it. So we can use

the opening and closing curly boys. Now

we can press save and we can see swelt

in the output. But of course we can add

some styles. So let me create a style

block. We're going to target the h1

element. Let's say color orange red.

Same as swelt. And that's basically it.

I'm going to save it. And now we're

going to see we have this orange text as

well. And of course, the order of the

blocks isn't important. For example,

even if I take this style block and I

put it at the top, I'm using prettier.

So when I'm going to save it, it's going

to reorder it for me. So I'm pressing

save. And as you can see, it reordered

the blocks. So the order of the blocks

isn't important at all. Of course, you

can also use TypeScript. You can specify

here leng. And then you can say

TypeScript here. And of course, this is

inferred, but we can use types here. We

can say string. And you can even use

TypeScript because it's natively

supported in the template. So we can say

title as string. But of course, I'm not

going to focus on TypeScript in this

course because I actually think it's

very distracting when you're learning.

It's just visual noise. But if you care

about types, I'm going to link to an

accompanying post in the description.

All right. So lowerase tags behave

exactly like regular HTML elements, and

so do attributes. So let's for example

create an image here. We can pass it a

source attribute.

Let's say image GIF. And we're going to

see something also very cool. So when we

do this, we're going to get a warning

from cell that says image element should

have an alt attribute. So let's do that.

Let's add a description. We're going to

say alt

person nodes. Let's save this and we're

going to see the output. How wonderful

is this friends? All right. So going

back, we also have the power of

JavaScript. So we can create the script

tag. Let's create a variable source.

We're going to say image.give.

And let's also create another one. Name

it alt. And we can also give it a

description.

Awesome. So now we can use an expression

here. We can say source.

And we can say alt. Another cool thing

is if the attribute name and the value

have the same name, you can just use the

shortand. So in this case, instead of

source equals the source expression, we

can just say source. But let me actually

show you something cool. Because I'm

using prettier, it's automatically going

to do that for me. All right. So, I'm

going to save right now. And you're

going to see it works the same as

before. But of course, we can also use

an object. So, I can say let object,

let's say source

image.g. And then let's give it a

description. And we can say person not.

So now we no longer need this. And of

course, this would be really tedious if

you had to do something like this.

source equals object source alt equals

object alt. Of course, it works as

expected if you look here, but there's a

simple way to do this and we can spread

this object on this element. So, we can

just remove all of this, use the curly

boys and we can just use the spread

syntax. So, we can spread this object

and everything works as expected.

There is one more thing regarding

attributes that I want to show you and

that is how to conditionally render

them. So, often people make this

mistake. they define some piece of state

like lazy let's say false and then maybe

you want to conditionally render this

attribute loading here so we can pass an

expression and then you can say okay

lazy in that case we can use short

circuit evaluation and then we can say

lazy all right anyway we think since

this is false this isn't going to be

rendered but that is wrong and also

typescript gives you a warning here

because the types don't match so here

for example if I save and then I go here

and inspect the element you're going to

see we're going to get loading equals

false which might be completely

unexpected Or you might do something

like this. You might use a turnary. So

let's say lazy. And then in that case,

we can actually show lazy. Otherwise,

you might be thinking to yourself, okay,

let's just use an empty string here. And

again, we get this warning in our

editor, which is super useful. In this

case, when I save this, we're going to

see we're going to get an orphan

attribute loading. All right. So the

solution to this is to never use short

circuit evaluation like this or this

turnary where you return an empty

string. Always use null or undefined. So

for example, if I say no here, you're

going to see TypeScript is going to be

happy. So now if I save this, you're

going to see this behaves exactly as you

would expect and the attribute isn't

rendered.

All right, so let's talk about component

styles. Let's create a script block with

a color variable. So let's say orange,

red. Let's create a heading with some

text inside. And I heard a bunch of you

like some inline styles with this thing

called tailing CSS. So, of course, you

can just use the style attribute and you

can include all of your styles inside of

here, right? I'm just joking. But the

style attribute is really cool in SW and

I'm going to show you why. So, we can

just use a regular CSS property. And

here we can use an expression. So, you

can pass color and you're going to see

it works as expected. But there is also

a shortand you can use. So, instead of

saying style equals, we can just use the

CSS property using colon color. Then we

can remove this and we can just leave

the expression in like this. Boom. And

since the variable name is the same name

as the CSS property, we can also omit

this part. So you can remove this. And

I'm going to save this. And you're going

to see it works as expected. The only

thing you can do with a style attribute

like in another framework, you can't

really pass an object. So something like

this isn't going to work. If you say

style equals, and then you may want to

pass a color. That being said, I don't

think I actually ever needed this use

case. And if you want something like

this yourself, you can write a simple

utility function. The style attribute is

also great for using CSS variables. Let

me show you how cool that is. So here we

can create a style block. Let's just say

H1. And then we're going to define the

color. Let's use a CSS variable. By

default, we're going to pass color. If

that doesn't exist, we can specify a

default value as white. And here we can

just use a CSS variable

dash color.

And we can just use our color as before.

And of course we can also use the

shortand. So here we can say d-color.

And then you can say equals. And we can

pass in the expression or a color. All

right. So if I save this, you're going

to see everything is going to work the

same as before. And this is something

that I absolutely love about swelt.

Thankfully, you're not just limited to

the style attribute. So let me just

remove all of this code.

And we're going to say that color should

be orange red.

And this leads us to another awesome

thing about SWEL. By default, any styles

that you define inside of a SWEL

component are going to be scoped to that

component. That means that the color we

define here is only going to affect the

heading inside this component and not

globally. So if we go here to our

example and open the developer tools, we

can go to the head and see what swell

generated. So we can see that swell

generated a unique class name. So this

way your styles aren't going to clash

with anything else. You can also of

course import CSS inside of your

component. So for example, if you have a

script tag here, you can say import and

then you can say something like app.css

and then you're going to import styles

that apply to this component. But of

course you can also have global styles.

So if I remove this, I'm going to go to

the root of my app which is main.js.

And here I can import app.t CSS which

I'm already using. So let's actually

look at app.tss. So here I have just

some basic imports and some CSS

variables. So if you want to define

something global here, you can just go

here and you can say for example H1

color red and now we have global styles.

That's how easy peasy lemon squeezy that

is. But of course I'm not going to do

that. So now you know how to apply

global styles if you have to. So

speaking of global styles, you can also

have global styles in your component. So

let's say for example that you receive a

post from a content management system

and maybe you don't have control over

it. So here I have some piece of content

and let's say I want to render it. I can

use H group and then we can use the

special at HTML tag in SW to render raw

HTML. So we can say HTML content. Let's

save it. And you're going to see it

works as expected. So let's add some

styles. So we can say style. Let's

target the H1. Let's say text transform.

And we can say capitalize. What you're

going to see, we immediately get a

warning in the editor by SWelt undue CSS

selector H1. And that is because in

quotes SWelt can't see that this style

is being applied here. So, it's going to

be removed.

And for this reason, we can use the

global style modifier. So, we can say

colon global. Let's use parenthesis

like this. Save. And you're going to see

everything works as expected. All right.

But this would be really tedious if you

had to do this for every element. So for

example, if you had to do global P and

etc. Now it's really annoying, right? So

let's say we have some styles here,

whatever. And we can actually get around

this by just using global. So here's

what we can do. We can say global. Then

we can just use the curly boys. And then

we can just move the styles inside of

here.

And of course, we don't have to use

global.

Let's just do this. Remove it

like here. And now we're going to see if

we save this everything is going to work

as expected. And this is only

complaining because we don't have any

styles here. But we can for example say

color orange red.

And now we're going to see it works as

expected. Of course, one downside of

this approach is that these styles can

clash with your global styles. But we

can also fix this. You can have global

scope styles. So what do I mean by that?

So here we have this HG groupoup

element. before global we can actually

just say H group and it's going to be

scoped just to this element. So let's

save this. All right. So we can open the

developer tools to see what SW

generated. Let's go to the head. We can

open the style block and we can actually

see here SW generated this unique class

name but it's prefixed with H group. So

this way you can have globally scoped

styles. You can also have global key

frames. So, for example, inside of here,

if you use a key frame, it won't really

work. But you can do this. You can say

add key frames.

And now you can just preface this with

global. And you can just use the name of

your animation. You can say animation.

And then you can define your animation

inside of here if you want to make it

global for whatever reason. And there is

one more cool thing about the style

block and that is that you can use a

different pre-processor. So similar to

TypeScript, you can define a lang

attribute here and you can define SCSS

for SAS or you can use post CSS and it's

going to work out of the box. How cool

is that? All right, so let me show you

another cool feature of SWEL which are

dynamic classes. So for example, let's

say we have an accordion here. We can

say open false and then we can create

button with a class button and then

we're going to have a span item A and

then another span. So we can say point

let's see use this emoji. So this is

going to be our trigger

and then of course we can use an

expression inside of here. All right if

open is true then we can say apply an

open class otherwise do nothing and then

we can create some styles. So we can say

trigger. We have to say that this is

display inline block. So our animation

works

and let's just say transition. We're

going to use rotate. So we can say

rotate 2 seconds

ease

and then we can say hey if this has an

open class then we're going to animate

it. So let's say rotate

minus 90°.

All right but in this case this isn't

reactive yet. We're going to learn about

reactivity in the next section. But for

right now we can just say state false.

And then here we can just say on click.

And then we can just set open to the

opposite.

All right. So let's save this. And we

should see, let me just zoom in. We

should see this works as expected.

Awesome. All right. But applying classes

like this can be really tedious. So

there's actually a better way. We can

use the class directive to conditionally

apply classes. So we can remove all of

this and we can say class colon and then

we can say open. And of course you can

base this on some other expression. But

in this case we can just remove this.

And now I can save this. And you're

going to see it works the same as

before.

You can also pass an object or array to

the class attribute. So let me show you

how cool this is. So we can say class.

And let's first start with an object. So

we can say trigger. And if this is true

then this is going to apply this class.

We can also just pass open. So now this

is going to be trigger and open

conditionally. All right. Let's save

this and it should work the same as

before. Of course, you can also pass an

array. So, for example, if I pass an

array here, we can first define our base

styles. So, it's going to be trigger and

then we can apply open conditionally.

So, we can say if open is true, then

this is going to be open. Let's save

this. And you're going to see it works

the same as before. Or instead of this,

you can pass an object, which is a lot

simpler in my opinion. So, you can just

say open

and it works the same as before. And

under the hood, this uses the CLSX

library to merge all of these styles

together. And this is really useful if

you're working with Tailwind and you

need to apply a bunch of classes. So for

example, here again we have our base

styles, we can say transition transform.

And if you want to apply some tailwind

class like for example rotate 90, we can

just make it conditional like this and

it's going to work beautifully. All

right, but there's something else that

you should consider. So instead of

applying a bunch of classes, if you have

something more complicated, use data

attributes instead. So for example,

instead of this being a boolean, we can

say status and this can be open or

closed. So in this case, this on click

really doesn't matter. Let me just

remove this and then we can just go

here. We can say class trigger. So we

are separating our styles for styles and

our logic for data attributes, which is

really cool. So we can say data status

and then we can just say status. And now

if you have something more complicated,

now it's way easier to orchestrate your

transitions. So instead of using a bunch

of classes, we can just go here and we

can say data

status

and we can say open. And now if you have

more of these styles, of course, now

it's way easier. You can do whatever you

want. It's way more explicit.

All right, let's talk about soil

reactivity. In the context of JavaScript

frameworks, application state refers to

values that are essential to your

application working and cause the

framework to update the UI when changed.

All right, so let's look at a counter

example. I'm going to create a script

tag. Let's say count equals zero. Then

I'm going to create a button. We can use

an expression inside. Let's add an

onclick event handler.

And we can say count equals count + one.

But of course this isn't reactive. And

we even get a warning from swelt. Count

is updated but is not declared with

state. And we can see it ourselves that

count is not going to reactively update.

To create a reactive piece of state in

swelt, we use the dollar sign state

rune. So we can see it looks like this.

State we can say zero. Now it no longer

complains. If you look at our example,

we can increment the count. And this

might look like a function, but it's

just part of the language. So, Selt is

actually going to turn this rune into a

signal under the hood. And because this

looks like a regular function, if you're

using something like TypeScript, you can

just pass your type in here and it's

going to work.

As you can see here, we reactively

update this value by using assignments.

So, we can reassign count by saying

count + one. Of course, you can be much

simpler about this. So you can say count

plus equals 1 or you can just say count

++. We can save this and we're going to

see that it's going to be reactive.

We can also have deeply reactive state.

And what do we mean by that? Well, let's

say for example that you're working on

something like an editor. So we can say

editor state. And now if you pass an

array or object inside of editor, it's

going to become a deeply reactive state

proxy. So what does that mean? But that

means if you for example change

something like editor content, it's

going to reactively update. Same is true

if the editor is an array. So we can say

editor push one and it's going to

reactively update. And that is really

cool. So here we can create a theme.

We can say dark by default. Let's add

some content.

And now we can render the content. So

you can use curly boys HTML editor

content and this works as you might

expect.

All right, but let's actually change the

content by using a text area. I'm going

to remove this.

Let's say class is going to be editor.

And now we can say value equals

editor content.

And now we want to update. So we can use

on input. we get access to the event and

now we can say editor content equals e

target value and we can also disable

spell check.

All right, so let's save this and now we

can see it works. Okay, but something

like an editor might become quickly

complex and maybe you don't want to

reactively update the entire editor

object when a property changes. In that

case, you can use the state raw rune.

And now when you save it, you're going

to see it's not going to reactively

update. The only time it's going to

reactively update is when you reassign

the entire object or array if you're

using that. So for example, here we can

take this.

Let's just like this. So this isn't

going to work.

It's only going to work if you reassign

the object. So we can say reassignment.

And then let's say editor equals.

We can spread all of the old values and

we can say content e target value. Let's

save this and we're going to see now

it's going to work. All right, but I

want to show you another useful state

room. So let's actually undo this and

make it just state. So we can log editor

and we can see that this is a proxy. So

if we open the developer tools, we can

see the proxy object is here. And this

is a bit awkward because we have this

target and we have to dig our way

through this content. But this might be

even worse if you pass this to some API

that doesn't expect a proxy. So let's

say for example that you want to save

the state of the editor

and now we can define const editor state

and maybe we want to clone the object.

So we can use structure clone and we can

pass the editor. But now if we try to

save the editor so you can say save

editor state.

So now we get this error that it failed

to execute the structure clone because

it expects a regular object and we

passed a proxy. To fix this problem, we

can use the state.napshot rule. So we

just have to go here. We can just say

state snapshot and then we can pass our

editor. And this is going to give us the

actual value. So we can even console log

editor state. Let's save it. Now if you

refresh it, we're going to see that we

just get a regular object. And what's

also interesting is that swell does this

under the hood. So let me just delete

this and previously we said console log

editor.

Now you can see that actually swell

detected that you're using console log.

So it actually did state.napshot for

you. So you get the actual value and

that's really cool.

And the last thing I want to show you is

that you can actually destructure the

value from this deeply reactive proxy.

So we can go here and we can use curly

boys. We can pluck theme and content.

Yoink. Now we can remove all the

references with editor dot.

Great. We can remove this. And of course

we can delete this code. And this works

right now. All right. So we can save and

we should see that this is reactive.

Awesome. But it's not going to work if

you try to dstructure these values where

they weren't defined. So for example,

let's keep this. But we're going to name

it editor. And if you for example go

here and say let and we structure these

values from editor, this isn't going to

work.

But if you want to do this, you can use

the derived rune which we're going to

learn about next. We're going to see is

going to be reactive.

All right, let's talk about derived

state. So I'm going to create this count

here. Let's initialize it as zero. We're

going to have a multiplication factor.

And then let's also create the result

which is going to be the outcome of

count multiplied by the factor.

And we can already see that swell gives

us a warning. This reference only

captures the initial value of count.

Reference it inside a derived instead.

And this is where the derived rune comes

in. So this has different names

depending on the framework you're using.

Some frameworks call this computed

values. Some frameworks call this

derived values. In case of state to

derive the value we can just use the

derived rule and that's it. Now each

time count or factor changes result is

going to update. So let's actually do

that. Let's create a container.

Now inside of here we can say count

times factor

is going to be equal to the result. And

let's also create the buttons so we can

change the values. So we can say count.

Let's add an event handler.

We can say count plus+. We can do the

same for the factor. Say factor.

All right. And now we can save this. So

now we can go to the example and we can

see that everything works as expected.

And that's how simple it is to create

derived values.

There's one important thing to know

about derives and that they're lazy

evaluated. And what do I mean by that?

Well, let's actually just first delete

all of this code. So we can just keep

count here.

And that's it. So let's say you have

some value max which is a derived. So we

can say derived and we can say count is

greater than or equal to four. And we

can go here and add a disabled

attribute. For example,

what's really important to know is that

the right values only run when they're

read like in this example where we pass

max to disabled and they only update

when they change and not when their

dependency change to avoid unnecessary

work. So in this example here where we

have this derived max value even though

it depends on count max isn't going to

update when count changes is going to

update if it changes due to count

changing. So we can actually see this by

using the inspect rule which is a really

useful way to log when a reactive value

changes. So you can say inspect max and

this is only going to log when max

changes. So when we go 1 2 3 4, we

should not see max being logged. So

let's save this. Let's go to our

example, open the developer tools,

you're going to see first we get init

false and we're going to see 1 2 3 4.

Nothing happens until we reach the

number four. Only then is the derived

value going to update.

What's actually cool about signals is

that they only have to be read to become

a dependency. So let me show you what

this means. I'm going to delete this and

let's simplify this expression. Under

the hood, actually turns this derive

into a function. And count is actually

something like this. Count get greater

than four. But the cool part is that we

can just create a function with some

state inside of it and it's going to be

reactive. So let me actually show you.

Let's create a function limit and then

let's say we're passing count and we can

say return count greater than four. But

this actually doesn't work how you might

expect. So for example, if we say here

limit and we pass count, count is going

to be get count. So this function is

going to be tracked inside of this

derived. This is what's actually going

to rerun when count updates and max

updates. Count is not some magic

reactive container. And I can prove this

to you by showing you that passing count

is completely optional. So we can

actually remove count.

And now inside of our function I can

just take this remove count. And now

this is going to be get count. As long

as the signal is red is going to become

a dependency. So this limit function is

going to rerun when max changes. If you

just pass count to limit here, it

doesn't mean anything because it's just

a regular value. The only thing that

matters is that count is red. So if you

want to be explicit, you can pass it as

an argument, but you don't have to.

All right, but what if you have

something more complex? So for example,

let's create a card here. We're going to

say state, and we're going to pass an

array of items. So we can say item,

and let's pick a juicy apple. And let's

say the total is 10.

Now let's pick a banana.

Now let's say that we want to derive the

total sum. We can use the derived rune.

So we can say total derived. But how can

we actually do this? We can only pass an

expression inside of here. You could

actually use an array method like reduce

or map. But let's say that you just want

to loop over the items and return a sum.

In that case, we can use derived by and

we can just pass a function inside of

here.

And now we can say let sum equals zero.

And now we can loop over the items and

get the sum

and let's return the sum.

That's it. So now in the template we can

create a paragraph tag. We can say total

and as you can see it works as expected.

The only thing you shouldn't do is use

the drives for side effects and swelt

isn't even going to let you change state

inside of them to save you from

yourself. So for example, if I want to

push something to the cart here. So let

me actually just copy over this apple

and let's see what happens. And now we

should get an error in our console. It

says updating state inside arrived or a

template expression is forbidden and

swelt even tells you that if the value

should not be reactive you should

declare it without state but I think

some use cases are fine like for example

let's say that you want to fetch some

data inside of derived you're actually

not doing any side effects so if you

wanted you could do something like that

since everything is contained inside of

that function

all right so to finish the holy trinity

of reactivity in swelt let's talk about

the effect rune eventually you're going

to have to do some side effects like

fetching data from an API or

manipulating the DOM directly. In that

case, you want to use an effect.

So, let's create account here

and then we can create a button.

We can say count++. All right. So, to

create an effect, we just use the dollar

sign effect rune.

And really effects are just functions

that run when their dependencies change

or when the component is removed from

the DOM. Any state that is read inside

of an effect is going to be tracked. So

we can say console log count and now

count is going to be tracked. As you can

see there is no dependency array.

Now we can open the developer tools and

when we increment count we're going to

see the value log to the console.

One important thing to keep in mind is

because how of signals work values are

only tracked when they're read. What

does this mean? Well, let's say for

example that we have a condition here

and let's say this is false. So we can

copy over this button

and we can say toggle.

So now we can say condition equals the

opposite of condition. And let's also

add a container here.

So now inside of the effect if we use a

conditional block like an if. So if we

say if condition

and then we log the value of count in

this case since condition is false only

condition is going to be tracked since

it's red and not the count.

So going back to the example if we

increment the value of count

you're going to see it's not going to be

logged as expected but also your effect

isn't going to rerun. But of course, if

we change the condition from false to

true, then it's going to log.

In this example, if condition is false,

then the only value that's going to be

tracked is condition. And if condition

is true, then both condition and count

are going to be read and tracked inside

of the effect.

That being said, there's an exception to

the rule what gets tracked. If a value

is read a synchronously, like inside a

promise or a timer inside of an effect,

it's not going to be tracked. So, let's

look at an interval example.

Let's say count the same as before.

And let's copy this over. This is going

to be our delay.

And this is going to be 1 second or

1,000 milliseconds. So now in the

template, let's create a div. We can say

count. And let's create the buttons to

control the interval speed.

So this is going to slow down the

interval. So let's say on click.

So we can say delay times equals 2. All

right. So let's copy the button.

So to make it faster, we can just divide

it by two. And let's add a container.

Great. Now let's create an effect.

Let's create the interval.

So now we can pass a call back to the

interval and we can say count plus+. So

we want count to be incremented every

second. So you can also pass a delay. So

in this case because we're reading this

value in an asynchronous function like

set interval. It's not going to be

tracked. But what is going to be tracked

is going to be the delay. So let's go to

our example. And you can see it works as

expected. Well kind of. Let's try to

make the interval faster.

And that works. Okay. So, let's make it

slower.

Uh, but that just makes it go faster.

And of course, that is because this

effect runs each time delay updates and

it creates new intervals. Thankfully, we

can return a cleanup function from the

effect. So, we can say return

and we can say clear interval and we can

pass our interval and this function is

going to run each time its dependencies

change or when the component is removed

from the DOM. So now we can go back to

our example. We can see it works as

expected. So let's speed it up.

All right. So let's see if we can slow

it down. As you can see, it works as

expected.

If you don't want to track a value

inside of an effect, then you can use

the unttrack function from SW. So let's

look at an example. So let's create two

pieces of state A and B.

Let's copy it over.

Then let's create the button to

increment them.

And we can copy this over. Let's say B.

All right. So now we can create the

effect.

Let's say that we want to log the sum of

A and B.

Also, let me add a container here.

All right. So now if you look at the

example, if we increment the value of

count is going to log the sum.

And if we increment the value of B, it's

also going to log the sum.

But what if we don't want to track A? We

only want to log the sum when B updates.

In that case, we can use the unttrack

function from swelt.

Let's start typing a track. And if you

press enter, it should autoimp import

for you. The unttrack function accepts a

call back. So we can just pass it a call

back. And then we can pass the piece of

state that we don't want to track. And

that's it. Now a isn't going to be

tracked. So now if you go back to our

example, if we increment the value of

count, of course, it's going to update

in the background, but it's not going to

log the sum.

But if we increment B, then it's going

to log the sum.

All right, let's talk more about

dependency tracking inside of an FX. So

let's say for example that you have an

object and array. So we can create an

object state.

Let's pass current and then let's say we

have an array

and this is just going to be an empty

array. So now we're going to have a

button so we can update these values.

So inside of here, we're just going to

say object current++

and array push one. All right. So let's

create an effect.

Now if we say console log object and

let's also copy this effect.

So we can say array. You're probably

expecting that this is now going to

track the object and array, but that's

really not the case. So, we can see if

we update these values, nothing is going

to happen. And that is because the

effect is only going to rerun when the

object changes and not its properties.

So, we have to be more explicit. We have

to say that we want to track object

current. And in the case of arrays, this

isn't going to be enough. We have to

track array length. Now, the FX should

run.

As you can see, it works as expected.

But of course, we can get around this.

Let's say, for example, that we want to

store this object value inside of local

storage.

And we say JSON stringify

object, then we actually don't have to

track object.curren for it to be

tracked. The entire object is going to

be tracked. And this is a pretty cool

hack if you want to react to this object

changing. So for example, you don't even

have to use JSON stringify directly. You

can just use it to track this dependency

and then you can do something else when

this object deeply changes. But of

course, if you only want to track

reactive values updating, then you

should use the dollar sign inspect rune.

So now we can just say object array and

it should work. And you can also

customize what happens when you inspect

a value. So you can say width and then

you get the values. But of course you

can also do other things like run

console trace and etc. You can do inside

of here whatever you want.

In general, effects are something that

you're rarely going to use, but you

should especially avoid using effects to

synchronize state. So, let's look at an

example.

So, let's create count

and then let's create double.

Next, we're going to create a button.

Let's add one click.

And then we can increment count.

All right. So let's create an effect.

So let's update double when count

changes.

Unless you have to, you should

absolutely avoid using effects to

synchronize state like this because you

might run into unexpected results like

your state being out of sync. So let me

actually show you this in practice here

where we increment count. Let's say that

we depend on double updating.

So we can console log

count and double. And now in our example

when we increment count you're going to

see the value of double is going to be

out of sync.

And that is because effects run last. To

be more precise, Swelt cues your effects

and runs them on the next microtask

before the DOM updates. So, we can

actually test this claim. So, let's go

here and we can say console log. We're

going to say script. Let's copy the

console log.

Let's say effect.

And then we can say on click.

So now in the example when I increment

the value you're going to see that on

click runs before the effect that is why

double is not updated. So we can see the

first thing that ran was the script

block then the effect when the component

was added to the DOM then we pressed on

click to increment count and then the

effect ran after it to update double.

The lesson here is that you should

always derive state instead. So we can

just remove this effect. We don't need

this. And instead of state here, we can

just use derived. And we can say count

times 2. And now everything should work

as expected.

Another reason why you might not need

effects is because of the onmount life

cycle function. So let's say that you

want to run something once and then run

a cleanup function when the component is

removed from the DOM. In that case you

can use the onmount life cycle function.

So we can say onmount and then we can

import it from self and we can just pass

a call back to it. So now we can say

console log

component addit. Let's use a wave emoji

and we can also return a cleanup

function. So we can say return

And we can say component removed. And

this is also great because you don't

have to worry about tracking some state

inside of an effect on accident. You can

also use the on destroy life cycle

function from swelt to run a cleanup

when the component is removed from the

DOM.

So we can import on destroy from swelt.

And then inside of here you can run

whatever cleanup you want. Also keep in

mind that you can put this life cycle

functions in other functions. So you can

import them in your component. They

don't have to be declared at the top

level of the script block.

All right. So when should you use

effects? Effect should only be used as a

last resort when you need to synchronize

with some external system that doesn't

understand swell's reactivity. For

example, fetching data from an API or

working with the DOM directly. All

right. So to show this, we can create a

simple Pokémon search.

All right. So, let's create the search

query which is going to be Pokemon.

Let's say it should be Charizard by

default. And then we're going to get the

Pokemon image.

And then let's create the input.

So, this is going to be of type search.

Let's make this more readable.

And let's say placeholder should be

enter

Pokemon name. And then on input we're

going to update the search query. So we

get access to the event and then we can

say Pokemon

equals E target value. Now we just need

to add the image.

So the source is going to be image and

the description is going to be Pokémon.

Let's also add a container.

And that's it. And now for convenience,

I'm going to copy paste this get Pokemon

function. So this is just using fetch

and the Pokémon API to get the Pokémon.

But now this makes sense to use an

effect because this is a side effect. We

want to rerun this function each time

Pokemon updates. So we can create an

effect

and we can just pass a function inside

of here. One common mistake I see people

do is pass a promise here. So for

example, if you say async, Selt is also

going to give you a warning because

these types don't match. So for example,

if inside of an effect you were to say

cones data await get Pokémon, this would

actually work. But the problem is that

since you're passing a promise, your

cleanup function is never going to run.

So instead of passing a promise here,

you can reassign state inside of this

function get Pokemon and then you can

just say get Pokemon and that's it. Or

you can use an immediately invoked

function expression. So you just need

two round boys. Here is our logic. Then

we can invoke the function inside. And

you just need to pass a function inside.

And now you can make this async. But of

course this isn't readable. In this

example, we're just going to do get

Pokémon.

Pass the Pokémon. Then we can say then,

and we get the data.

And now we can update the image.

So we can say image equals data sprites

prompt default. So let's be more

responsible and not spam the Pokémon

API. So one of the options that fetch

accepts is an abort signal that's going

to cancel the request. So we can pass it

as an option here. So you can say signal

and swelt provides a useful function get

abort signal which is going to cancel

the request as we type. So we can say

get abort signal is going to be

important from swelt. We can just invoke

it and that's it. So now in our example

we can see that we already fetch

Charizard. So we can try fetching

Pikachu.

So you can see it works as expected.

All right friends, one last thing I want

to talk about when it comes to effects

is the effect. Pre-rune. So for example,

you might need to do something before

the dome updates like measuring some

elements or the scroll position. In that

case, you can use the effect pre-rune.

For the sake of time, I'm going to copy

and paste this example here.

So, here we're using the gap animation

library and the flip plugin. So, we just

register the plugin and then we're going

to create 10 elements and then we're

just going to shuffle them. So, in the

markup, we're just looping over these

elements. Nothing special. And then

we're going to shuffle them.

In this example, I want to use the gap

flip plugin to animate the view changes

when we update state. So instead of

these numbers teleporting around, I want

them to smoothly animate their change in

position. For that to happen, we have to

record the previous and after state. So

let's create an effect.

All right. So whenever we shuffle the

items, we want to run this effect. So

let's add items as a dependency. For

this, we can just say items. All right.

Now we need to measure the elements

before the DOM updates. So we can say

const state equals flip

get state and then we can give it the

class of the item.

So this is going to be dot item. All

right. So now we can transition the

elements. So we can say flip rom. We can

pass it a state with some animation

options. We can say duration 1 second

stagger

0.01 second. And then we can specify an

easing.

So we can say power one in out. But as

you can see this isn't going to work. If

we save this for example and go back

here we can shuffle the item but nothing

is working. And that is because this

effect runs too late. We need to measure

these elements before the dome updates

and then we need to run flip after that

fact. So we can measure the elements

again and do the flip. So to do this we

can use the effect pre- rune. So, we can

just go here and say effect pre. And now

we can save this. But you're going to

see this still isn't going to work. So,

if we shuffle, nothing happens. And that

is because this all happens at once. We

need to measure the dome before it

updates. And then we need to measure it

again after it updates. So, we need to

somehow schedule this function. So,

there's a couple of ways that we can do

this. We can use request animation frame

or Q microtask. So for example, if I go

here and say Q micro test

and this is actually what Selt uses

under the hood to cue your FX but in

this case we can use this to schedule

this task to run. Now you can see when

we go here it should work

and SWEL actually provides a function

that does this for you and uses Q

microtask under the hood. So let me just

remove this and we can import tick from

Selt. So now tick is imported from Selt

and tick returns a promise. So we can

invoke it and we can say then

and you can do the same thing.

How cool is that? All right, so keep

this in mind if you ever need to do

something before the DOM updates.

So far we only use state at the top

level of the component. But we can use

state inside the functions and classes

including derives and effects. So let's

look at an example. Let's create a

function named create counter which

accepts a initial value. So let's create

some state inside of it. So we can say

count equals state and let's pass the

initial value and let's return count.

So we can create the counter

and let's create the button

and also let's increment the count.

But this isn't going to work. So if you

go to the example and try incrementing

count, nothing is going to happen. And

that is because count here is just a

regular value. So when we define a piece

of state with the state rune, this isn't

some magic reactive container. The value

of count is going to be the same value

as when it was evaluated. Sville doesn't

change how JavaScript works. So we

actually need some mechanism to always

get the latest value of count. So for

example, we can use functions. So we can

say count and then we can return the

latest value of count. To update count,

we can say set count. we can get the

value and then we can say count equals

value. But the downside of using

functions is that it's very verbose. So

for example, now we have to use

functions everywhere. We have to invoke

count here. It's not simple anymore. We

have to say counter set count. Now you

have to say counter count have to invoke

this and then we can increment it. All

right. So let's save everything. Now we

can try incrementing the count.

As you can see, it works as expected.

All right. But there is actually a

better way. Instead of using functions,

we can use getters and setters to create

property accessorers. Instead of this

count function, we can just say get

count. And instead of set count, we can

say set count. And that's it. So now

instead of doing all of this,

we can remove this. We can say counter

count plus. and we don't have to invoke

this anymore. So, let's save this and

let's try incrementing the count.

As you can see, using accessors is a way

cleaner syntax. All right, but even this

approach isn't perfect. And speaking of

magic reactive containers, we can use

deeply reactive state. So here, instead

of initial, we can pass in an object. So

this becomes a deeply reactive proxy. So

now we can say count and we can pass

initial. Now let's rename count to

counter. And instead of returning this

junk, we can just return counter.

So let's try incrementing the count.

As you can see, it works as expected.

All right. But if you want, you can

create your own reactive container. And

another reason you might want to do that

is because of type safety. So let's say

for example that you're using

TypeScript.

So let's create a reactive container. So

you can say function reactive but you

can name this whatever you want. Let's

say value and then let's create state.

So we can say state equals state and now

we can pass the value. So this can be

regular or deep state.

Let's return the state and that's it. So

now you can actually type this function.

So we can say t or the generic and you

can do whatever you want here.

So now we can just replace dollar sign

state with reactive and everything is

going to work the same as before.

All right, so this reactive utility

looks really useful. So why doesn't

swelt ship something like this out of

the box? Well, there are actually two

reasons. The first reason is because

it's only a couple of lines of code as

you can see. But another reason is that

swelt encourages you to use classes.

Because when you use state inside of

classes, it unlocks some superpowers.

So, let me actually remove this

and let's yink all of this. So, we can

create a class named counter. We're

going to create a constructor

same as the function is going to accept

an initial value. And the only thing

that we have to do is create this count

field. And we can say equals state and

pass initial. So let's create the

counter

new counter. Let's pass the initial

value. All right. So let's try

incrementing the count.

As you can see, it works as expected. So

what kind of black magic is going on

here? Well, let's actually look at the

compiled code. As you can see under the

hood, Swelt is going to turn this into a

private field and is going to create the

getters and setters for you. Of course,

at the end of the day, it doesn't matter

if you use functions or classes as long

as you understand how swelt reactivity

works. All right, so let me show you

another cool thing. Swelt has this

concept of universal reactivity. That

means that not only can we use state

inside of functions and classes, we can

also use it in a regular JavaScript

module. So let's do that. I'm going to

open the sidebar and inside of the

source folder, I'm going to say new

file. Let's create a lip folder and then

we're going to create the counter. So

you can say counter and the only caveat

is that the file name has to end with

swelt.js

or ts for TypeScript. So this way the

swell compiler knows that this is a

special file and it doesn't have to do

unnecessary work.

All right. So let's create the file.

So I'm going to close the sidebar and

let's just copy the code. So we can take

our beautiful counter.

Let's go back to counter.swwelljs.

We can paste the code in and we just

need to export it.

Now in app.swelt Well, we can just start

typing counter and it should autoimp

import from lib. All right. So now we

have our beautiful counter

and everything works as expected.

All right. So let's talk about something

very important and that is passing state

to functions and classes. So let's say

for example that we have a doubler

class. So we can say doubler.

We can create a constructor.

So we can say this count equals

we're going to derive count time two. So

let's create count using regular state

and then let's create the doubler. So we

can say let doubled new doubler and then

we can pass count. All right trick

question. Is this going to work? The

answer is no. And why it is? Well,

because as we learned before, count is

just a regular value. And we can

actually see this if we create the

button.

So let's say doubled count. Let's create

on click.

So we can say count plus+. And we can

look at our example. We can see that

nothing works. So again we have to use

some mechanism to get the latest value

of count. And usually that is a

function. So instead of just passing the

plain value of count, we can pass in a

function. So because this is a function,

we need to invoke this. Let's try

incrementing the count. And you're going

to see it works as expected. So we

learned that we can use deep state if we

pass an object inside of here for

example or we can use a reactive

utility. But in our case, we already

created a count class which is already

reactive. So we can use it. So we can

just say new

counter. So we can import it from

lib/counter.swelt.

We can pass in the initial value. And

now we can just pass the count

and this is actually going to be

counter. So we can rename this to

counter.

Let's say counter dot count. And here we

just need to change count to counter.

And we can just say counter dot count

times two. So we can derive the value.

All right. So let's try incrementing the

count.

All right. So now when you increment the

count, the doubled value is also going

to update.

You can also have reactive global state

thanks to swell's universal reactivity.

So for example, let's say that you have

a global config. So we can create a new

file inside of the lip folder. We can

name it config.swelt.js.

Let's close the sidebar and we can

export const config equals state and the

only thing you have to do is pass in an

object to create a deeply reactive state

proxy. So for example we can say theme

and of course it's going to be dark by

default and that's all you need to have

reactive global state. Of course you can

just use a class. So let's create a

config class. We don't even need a

constructor. We can just say theme

equals

state

and let's say dark. I'm also going to

add a method to toggle the theme. So

let's say toggle theme.

So we're going to say this theme equals

let's check what the current theme is.

So we can say this theme.

If it's light then we're going to set it

to dark otherwise it should be light.

All right. So now we can create a

singleton. So we can say const config

equals new config. And of course we

should export it. Now let's go back to

app.swelt. Let's create a button. So we

can say config. Let's import it. We can

say config. And now we can also add an

onclick event handler.

So we can say config toggle theme.

All right. So now we can toggle the

theme.

And there is only one gotcha with

classes. So we have to do something like

this inside of an anonymous function

because the context of this depends on

where it was called. For example, if you

just pass config.ggle theme, this isn't

going to work

because in this case this refers to the

button. But you can also use an arrow

function since it doesn't bind this. So

we can go back to the config. So we can

use an arrow function here.

All right, so let's see if it works.

Awesome.

All right, friends. So, let me show you

how you can avoid using effects. And I

honestly don't want to scare you from

using effects. If you sometimes use an

effect when you shouldn't, it's not a

big deal. It's not about performance or

anything like that. If effects were that

bad, they wouldn't be part of the

framework. Effects are necessary. The

problem is that it's easy to over

complicate your code with effects

because it seems like the right thing to

do. So let's look at an example how you

can make your life hell using effects

when you don't even need to use them.

All right, so let's use the same counter

class that we used before.

So we can say let counter equals new

counter

and then let's set zero as the default.

All right, let's create a button.

And then let's increment the count.

All right. So let's say that you maybe

want to read and write to local storage

when you update count. That sounds like

a side effect, right? So that's a

perfect use case for an effect. So let's

go to counter and inside of this

constructor, I'm going to copy and paste

this effects for sake of time. So here

we have two effects. one that is going

to read a value from local storage and

if it exists is going to update count.

The second effect is going to track when

count updates and is going to update the

value in local storage. So if we go to

the example and let's open the developer

tools, we can go here to application and

local storage. We're going to see that

the count is zero. So let's try

incrementing the count.

As you can see, it works as expected.

But let's see if the count value

persists when we refresh the page. And

it does. All right. So, what is the

problem? Well, let's go back to our

example. So, let's say that you have a

favorite counter that you want to share

with everyone. So, we can say export

cons counter equals new counter.

So, we can go back to app.2 12 and we

can import the counter. We can remove

this counter that we created and

everything should work the same as

before, right? Well, if we go back to

our example, we can see that we have a

bunch of errors. So, let's go to the

console

and we get this mysterious effect orphan

error. Effect can only be used inside of

an effect, for example, during component

initialization. What does this actually

mean? Well, your entire Swelt app is

actually a root effect and your

component is just a nested effect inside

of it. This way, Swell can keep track of

the effects and run the cleanup

automatically for you. So, what this

error is saying is that you're trying to

create an effect outside of that root

effect.

So, let's go back to counter.swell.

All right. So, this is how you enter the

first circle of hell. We can actually

create our own root effect. To do this,

SW provides an advanced rune called

effect.root.

So we can go here at the top. Let's say

effect.root. And now we can pass a call

back. So let's move effects inside of

the callback.

The major downside of effect.root is

that you have to do cleanups manually.

So for example, at the top we can

declare a private field called cleanup

and then we can assign it here.

All right. Then at some point you're

going to have a destroy method

and inside of it we can call the

cleanup.

As you can see this is starting to

become convoluted. So now let's enter

the second circle of hell. Let's remove

all of this.

We no longer need a root effect.

and let's remove this cleanup.

All right, so there is another advanced

rune that we can use and that is the

effect. Rune. This rune is going to

check if you're inside of a tracking

context like the template. So maybe

that's the solution. All right, let's

try it. So we can go here. Let's say if

effect tracking

and then let's also move effects inside

of it.

And if we go to our example, we can see

we have no errors. So let's go to

application

local storage. We can see count is 10.

That looks good. That's the default

value that we picked. So let's go up to

20. We can see the count increments, but

the value is never updated even if we

refresh the page. And why that is? Well,

that is because our effects are never

going to run because this counter was

created outside of a tracking context.

All right. So how can we start escaping

this hell? Well, it would make more

sense that we only create this effect

when we read the value and we can write

to local storage when we write to count.

So this effect is completely

unnecessary. So let's start by creating

a private field count

and then we can rename count to use the

private field count. And now we can

create the getter and setter.

All right. So let's go here and let's

say get count

and we can return this count. All right.

So we can do the same thing for setting

the count.

We get the value and then we can say

this count equals value. So now we can

yink this local storage line. We can

just place it here. We don't even need

this count. We can just say the current

value and then we can yink this effect

just delete it and we can copy this

entire effect where we read the count

value

and as you can see things are a lot

simpler. All right. So now when we go to

our example let's increment the count

and we should see that everything works

as expected. So let's see if the value

persists and it does. But there's

actually one problem. If we read this

count in multiple places, we're going to

create an effect. But we can easily fix

this. So we can create a new variable at

the top. Let's say first. And this is

going to be true. So now inside of the

effect, we can actually check if this

ran the first time. So we can say, hey,

if you already ran, then return.

Otherwise, we're going to retrieve the

value from local storage once. And then

we're going to set first to false.

So now we can increment the value and

everything works as expected.

All right, we've been through many

circles of hell, but we're still not

done. As you might have noticed, we

don't even need an effect here. So we

can just remove this effect.

And let's say if this is the first time

this ran

then we can run this

and we can set first to false. As you

can see this is much simpler. So you

should always avoid using fx. So now if

you go to our example and if we

increment the count we're going to see

that everything works as expected. Let's

see if the count value persists.

And it does. As you can see, this is why

you should avoid using effects. You can

do side effects inside of event handlers

like on click. So, always avoid using

effects if you can.

All right, friends. So far, I've been

constantly talking about signals, how

values are being read, and etc. But what

does this actually mean? So, in this

section, you can get the popcorn out

because we're actually going to learn

how signals work. So, let's look at this

example. So far we learned that we can

declare reactive state using this rune

and to update state we can use

reassignment but this equal sign isn't

anything special. If we look at the

compiled code we're going to see that

this just gets turned into a function

call. So this gets turned into set. So

we pass the signal and we pass the new

value. But how does this actually get

updated? And this is a true Scooby-Doo

moment because you're usually

discouraged from using effects in swel

but actually under the hood swelt

compiles this template into effects. So

you can see here is a template effect

and that is how swelt updates the dom.

So in this section I actually want to

implement a simple version of signals so

you understand how they work and swelt

isn't the only framework that uses

signals. You have angular solid quick

and so on. You're going to see that

signals aren't just hype, but they're

the perfect primitive for building user

interfaces.

All right, friends, let's pretend that

this is just regular JavaScript.

So, what is a signal? A signal is

basically a container that holds a value

and subscribers. So, we can create

function called state. Let's pass in a

value and let's create a signal which is

going to hold the value and subscribers.

So we're going to use a set. So the

subscribers are unique and then let's

return the signal. As you can see, a

signal doesn't do anything on its own.

For signals to be actually useful, we

need effects. So let's create an effect.

So effects accept callback functions. So

we can accept the function. And now we

need to track the active effect. So

we're going to say active effect equals

this function.

And then we're going to invoke the

effect. So let's create this active

effect.

By default, it's going to be null.

All right. So the actual magic happens

when we invoke the effect and we read a

signal. So let's create a function

called get. So we're just going to pass

a signal.

So now inside of get we can check, hey,

who called me? Then we can say signal

subscribers add the active effect and

then we can return the value. So you can

say signal do value. All right. So now

when we update the signal we notify it

subscribers.

So we can say function set we're going

to pass in the signal and a new value.

So we're going to say signal value

equals the new value. And now we can

notify the subscribers that the value

has changed. So we can say signal

subscribers

for each

effect. We can invoke the effect.

And that's pretty much it. And that's

really how simple a basic signals

implementation is. So let's actually use

it. In this case, since we're not using

swelt in particular, we're just going to

create a button. But of course since

we're still in SWEL I'm going to use

onmount to query the element

and then we can create the state. So we

can say let count equals

state. Let's pass the initial value. Now

let's query the button.

All right. So let's update the count by

saying button on click.

So we can use our set function which

accepts a signal. So we can pass count

and we need to use get to get the latest

value from the signal and we can

increment it and that's cool. But the

actual magic happens is when you use an

effect.

So again we're going to pass a call back

to this effect. So we want to update the

button text node. So we can say button

text content. we can say equals and we

have to say get count. So when we read

the signal, it's going to rerun this

effect. All right? So I hope you're

starting to understand how cool this is

because when this effect runs, this

callback is going to run. This is going

to become the active effect. Then we're

going to read the signal. And when we

read the signal, it's going to ask

itself, hey, who called me? Is there an

active effect? If so, let's add it to

our subscribers. And then when we update

the signal, we can notify the

subscribers. Of course, this is very

oversimplified, but this is a basic

example of how signals work. All right,

but let's actually see if this works at

all. So, we can save this. So, let's go

to our example and let's see if we can

increment count.

How beautiful is this, Rens? All right.

So, not only did we learn how signals

work, but we also learned that doesn't

compile reactivity. This is what it's

called runtime reactivity because this

happens each time you update a value. It

runs the signals and recreates the

dependency graph. The only thing that

swell compiles for is developer

experience because it hides this method

set get and etc. And that is the reason

why you can use signals like regular

values in swelt. As the react people

love to say it's just JavaScript.

All right, friends. So, I hope you

understand now why signals are so

powerful. Instead of having to do all

the manual setup to update values,

anyone that is interested about a value

updating can just subscribe to the

signal. Once you understand how signals

work, you're going to understand them in

other frameworks. And there's even a

proposal to add signals to JavaScript.

And now that you understand how

dependency tracking works in Swelt is

going to give you more confidence in

your own projects. And now you also

understand that this isn't some magic

under the hood where swell compiles

reactivity. It's just JavaScript. And

this is also important when you read in

the docs. So for example, here they

mention something that's called the

tracking context. And they say that's

the effect. So your user effects and

things inside your template. But what

they don't explain here is that your

templates get compiled to effects. So

that is the tracking context. And

speaking of effects, the ride values are

also effects. A derived value has its

own tracking context and it returns a

signal. Unlike user effects, when a

derived updates, it gets immediately

evaluated. All right, so I hope this was

helpful. All right, so let's talk about

using logic in your template. HTML

doesn't have conditionals and loops, but

in Swelt, we can use control flow blocks

and even blocks to deal with data

loading and promises. So let's look at

an example how we can conditionally

render content in Swelt.

I'm going to create a piece of state

called status

and this is by default going to be

loading. So this state can be loading

success or error. Now inside of our

template we can start by opening the

curly voice. We can say pound if and now

here we can use an expression. So we can

say status

does it equal to loading.

So we can use a paragraph tag and we can

say loading. All right. So let's close

the if block again. We're going to use

the curly boys slash if let's take care

of other state such as success and

error. So we can go here and we can add

another block. So we can use curly boys

again. We can say colon else if and now

we can use another expression. We can

say if status is equal to success. Let's

also use a paragraph. Then we can say

success. All right. So let's copy this

block over. So we're going to say if

status is error, then we're going to say

error.

We can also add another else block. So

we can say curly boys colon else and we

can say paragraph tag impossible state.

All right. So let's add some buttons.

Let's say loading. And then we're going

to add an on click event handler.

So we can say status equals loading.

All right. So let's copy this over a

bunch of times.

So we can say success.

Here we can say error.

And then here we can say other.

All right. Let's also add a container.

All right. So let's go to the example.

So let's go from the loading state to

the success state. And then we can go to

the error state. And if we go to other,

we should see impossible state. And that

is how we can conditionally render

content in SW.

All right. So let's look at how we can

loop over data in SW. So let's say that

you have a list of items such as to-dos.

We can say state. This is going to be an

array of to-dos.

So let's say ID1

the text is going to be to-do

and we can say done false. So let's copy

this over a bunch of times.

So now we can say to-do 2 three or we

can also bump the ID

and that's it. All right. So in the

template we're going to create a list.

All right. So let's use the curly boys.

Then we can say pound each in this case.

So now we can say each to-dos as to-do.

We can also close the each block by

using curly boys slash each. Now inside

the each block, we're going to create a

list item. Inside of the list item,

we're going to have an input and a span.

So we can say input type checkbox. And

then we can set the checked value. So we

can say checked equals to to-do done.

And then let's add a span for the text.

So we can say to-do.ext. text. All

right. So, we can add one more thing. If

the list is empty, so we can go here. We

can open the curly boys. We can say

else.

So, if the list is empty, we're going to

render this paragraph that's going to

say no items. As you can see, we

successfully iterated over the items. We

can also destructure the values from the

item we're currently iterating over. So

instead of to-do here we can use curly

boys and we can the structure ID text

and done. We can even get the index here

and you can name this whatever you want

like index but I'm just going to say I

and then we can also pass a unique key

like the ID. So this is as well can keep

track of changes. So we can use the

round voice and then we can just pass

the ID. In this case it's unnecessary

but in general it's a good practice to

provide a unique key so can keep track

of changes. All right. So now we have to

remove to-do dot and let's also do

something more fun with the index. So we

can color odd and even rows. So here we

have our span. We can use the style

attribute and we can say colon color.

So we can say I modulo to if there is no

remainder then we can say that the color

is going to be orange red otherwise

we're going to use the default color.

So now if we go to example you can see

that every odd row is colored.

All right. So let's say that you want to

loop over an arbitrary amount of items

like creating a grid for example. In

that case we can even omit the s part in

the each block. So let me show you. In

this example we're going to create a

10x10 grid. So let's say cells and then

we can start with the curly boys. We can

say each. And now we want to create an

array of 10 items. So we can just say

array and then we can pass the amount of

items that we want to create. So let's

close the each

and here we don't have to specify as

anymore. We're only interested in the

index. So we can name this index row.

All right. So now that we created the

rows, we can create the columns. So

let's just copy this code here

and we can rename row to call. Now let's

create a div. We're going to name this

cell and we can just output the row and

column number. So let's use curly boys.

We can say row

and then let's say column. As you can

see we created a 10x10 grid of rows and

columns.

All right. So what's really cool about

the each block is that you can iterate

over any value that supports array from.

So for example, we can create a map.

Let's say let items map. We can say new

map. Let's pass in some default values.

We can use an array of arrays to do so.

So we just need to pass a value. Let's

say apple.

Then let's copy this over. We can say

banana.

All right. So now let's create a set.

New set.

Let's pass in an array. So again, we're

going to have an apple and a banana.

And let's also create a generator. So we

can just say function and we can use a

star. So this is a generator. So we can

say items generator. And then we can

just yield the apple and the banana. So

we can say yield.

So we can yield the apple. And then

let's seal the banana.

All right. So let's loop over these

items. So now in the template, let's

create a list. All right. So this is how

we can loop over the map. We can use

curly boys each. We can say items map as

and then we can the structure the key

and the value.

All right. So let's close the each block

and then let's just output the key and

the value.

So we can say key colon value. All

right. So next let's loop over the set

which will be the same as looping over a

regular array. So we can copy this list.

Instead of items map we can say items

set

and then we can just say item.

All right. So the last one is going to

be the generator. So we can copy over

this block

and this is also really simple. The only

thing we have to do is invoke the

generator. So we can say items generator

and that's it. All right. So let's go to

the example. As you can see we iterated

successfully over a map set and even

generators.

Awesome. So keep that in mind. You can

loop over basically anything as long as

it works with array. Swelt even has

reactive versions of some built-in

JavaScript objects that we're going to

look at later.

All right, so let me show you a simpler

way of dealing with promises using the

await block.

So previously we fetched some Pokémon

data using this get Pokemon function. As

you can see the function is mostly the

same. The only thing I changed is that I

explicitly returned the name and sprites

from the response. But in that example

where we used an effect, we didn't even

account for any loading success or error

state which becomes quickly tedious. So

to make that simpler, we can use the

await block in swelt to deal with

promises like a synchronous data

loading. So let's go to the template and

we can use the curly voice, we can use

the pound side and then we can say

await. If you want you can store a

promise in a variable or you can invoke

a function like this directly. So we can

say get Pokemon

and then let's say Charizard and then

let's close the await block by using

curly boys/await.

All right. So let's show the loading

state. So we can just say loading but

then when the promise is resolved we can

use the then block.

Let's use the curly boys. We can say

colon then and we can name the return

result. So this is going to be Pokemon.

All right. So inside of here, let's

create a container named Pokemon

details. And now we can create an image.

So the source is going to be Pokemon

image and the description is going to be

the Pokemon name.

And let's also add a paragraph here. So

we can say Pokemon name. All right. So

now we can also handle the error state

by using the catch block. So we can go

here and we can again use a curly voice

colon

catch

and we can say error. All right. So now

that we get the error we can display the

error message.

So we can say error dot message. All

right. So let's see if it works. And

awesome we got Charizard. All right. So

if you don't care about errors you can

omit the catch block and you can also

omit the den block if you only care

about the result. So let's just take the

markup.

We can delete this. We can paste our

markup here. And the only thing we have

to do is use then here. So we can say

then Pokemon.

And everything works the same as before.

Hey friends, I wanted to let you know

that there's an experimental async

feature that you can enable in Swelt. By

the time you're watching this video, it

might no longer be experimental. But

currently, if you enable this

experimental flag, you can use a weight

at the top level of your component

inside state and inside your markup. So

the only thing you have to do is enable

the async feature in your swel config.

And then you have to include this

boundary at the root of your app.

Basically, this is like react suspense

if you're familiar with that. And now

you can use await directly in your

component. So in this example, we're

adding A and B. As you can see, we can

use it directly in the markup. And you

can find more information in the

documentation like indicating loading

state. So you can use this

effect.pending rune. But yeah, there's a

lot more information in the SW

documentation.

All right. Sometimes you might want to

recreate some elements when a piece of

state changes. In that case, you can use

the key block. So let's look at an

example.

Let's create this value. I'm going to

set it at zero. And then we can create a

cute ghost. I mean a spooky ghost.

We're going to learn more about

transitions later, but for right now we

can just say in colon fate. And we can

just import fate from swelt /t

transition. All right. So now let's

create a button.

So now we can create a spook on demand

service by adding an on click event

handler.

So let's just increment the value. So

now we want to play the fade transition

each time value updates. So we can use

the key block for that. So we can go

here and we can use the curly boys pound

key. So now we can pass any expression

here like value and now we can close the

key block. So let's use the curly boys /

key and that's it. Now we can save it

and now we have a spook on demand

service. All right. So now when we click

on the button it should recreate the

ghost element and play the transition.

Spooky.

How spooky is that, friends?

All right, friends. The last cool thing

I want to show you is local constants.

Basically, local constants lets you

define variables in your template. So,

when would it be useful? Let's actually

look at an example. So, let me just copy

this example. So, this is the same

example that we used in the loop section

where we structured ID, done, and text.

But this approach kind of sucks because

now we lost the original reference to

the to-do, right? And what if we want to

use the to-do as a key here? Now we

can't anymore. We have to pass ID. Well,

we can actually fix this with local

constants. To create a local constant,

it has to be a child of any of the

blocks like if each and so on. And it

can also be a child of a component. So

in this case, we can just go here. We

can use the curly boys. Then we use the

at sign and then we can say const. So

now we can define a variable that is

scope to this block. But in our example,

we just want to structure these values

from to-do. So we can just take that and

we can say equals to-do.

Now we can just say to-dos as to-do. And

now we preserve the original reference

to to-do. So now we can pass that as the

unique ID. And we can also rename done

to checked.

And we're not using ID anywhere. So we

can just remove it actually. And we can

go here and we can just say checked. And

we already the structured text. As you

can see, local constants are very

useful.

So let's look at another example that

creates an SVG grid.

As you can see, we can define the size

and tiles in the script block. And now

we can pass them to the SVG. So now we

can combine what we learned before on

how to create a grid. So in this

example, we're creating a chessboard.

And now we can use local constants to

keep everything tidy and legible. And

this also helps us avoid creating

unnecessary components. And it's also a

benefit to performance if we compute the

value once if we use it in multiple

places. But in this case, we're just

creating the tile X and Y coordinates

with height and the fill. So we just

pass them here to W. And now we can look

at the example. As you can see, we're

creating this chessport. Local constants

are a very useful tool in your arsenal.

All right, let's talk about event

listeners in SW. So far, we used a

button with an on click event listener.

In swelt events are just regular

attributes. So you can say on and the

name of the event and you can pass an

inline function like this

and we can say console log click. So if

we open the developer tools and click on

the button, we should see click. And

what's really cool about events in swelt

is that they mirror JavaScript events.

So what do I mean by that? Well, you

might be familiar with something like

this. So where we have element add event

listener

and now we can pass the event listener

and we get access to the event. So we

can do whatever we want. But there's

also an alternative syntax where you can

say element on click and we also get the

event and we can do whatever we want.

And of course we also get access to the

event here. And instead of using an

inline function, we can create a handle

click function. So let's take this and

we can name this handle click.

So let's remove this yoink. Let's name

this function handle click.

And we get the event implicitly. So we

don't have to pass it. And then we can

just put our console log here. And now

if we click on the button, we should see

click again. And also because events are

just regular attributes if they have the

same name then we can use a shortand. So

in this case we can rename handle click

to on click and if I save and format the

file is going to use the short hand and

because events are just regular

attributes we can also spread them. So

let's take this console log here and

let's create this object called events.

So you can have on click

and then let's copy it over. And this is

going to be on double click.

And then we can just spread the events.

So now when we click on the button,

we're going to get click. And if we

double click the button, we're going to

get double click.

All right, let's do a more fun example

where we track the mouse coordinates

using the on mouse move event.

So we need to track the X and Y mouse

coordinates. So let's create mouse

equals state and then let's pass in an

object here. So we can say X is equal to

zero and the Y coordinate is also going

to be zero. So let's create this

container. I'm going to use this mouse

class. So this container is going to

take the entire width and height and

then we can say the mouse position is

and we can use the coordinates. So we

can say mouse x

and mouse y. All right. So let's create

the function to track the mouse

coordinates.

So let's name this on mouse move. Then

we can accept the event. Now we just

need to update the mouse position. So we

can say mouse x equals e client x and

let's also update the y-coordinate.

So mouse y equals client y. And that's

it. Now we just need to add the event

handler. So we can just go here and we

can use the curly boys and let's just

say on mouse move and we're going to get

an accessibility warning, but we can

just ignore it by clicking on quick fix

and then we can disable it.

All right. So let's go to our example.

And now we can see that the mouse

position is being tracked. How cool is

this? And that's how simple that was.

All right. So in the last example, I

want to show you that you can actually

use forms to get the user submitted data

instead of always using state. So let me

show you. Let's create a form. It's not

going to have any action because this is

going to be purely client side. When

you're using cell by default, you're

building client side applications. So

everything is handled on a single page

using JavaScript. So let's say for

example create an input which is going

to be email. So to get the data from the

form we have to give it an identifier

such as a name. So we can say email and

then let's create a submit button. So we

can say type submit.

So for example this might be your

newsletter. So we can say subscribe. All

right. So usually where you would use

state to get the email we can actually

just create a function and we can listen

to the onsubmit event. So let's say

function onsubmit. We get the event as

the argument. And now this is the most

important part. We have to prevent the

default behavior because the form is

trying to post to the server. To avoid

that we can use event prevent default.

So now we can control the form using

JavaScript and avoid a page reload. All

right. To get the form data we can say

cons data equals new form data and we

can pass the form. In this case we can

just use this to reference the form

element. And then we can say con email

equals data get. And this is where our

unique name identifier comes in. So we

can say email and that's it. So now we

can console log the email.

All right. So now we can go to the form

and we can use onsubmit.

All right. So let's enter an email like

test.com

and let's open the developer tools. And

now we're going to see if we subscribe

is going to output the email. As you can

see, sometimes a form can be enough and

you don't need any extra state.

All right, let's talk about data binding

in SWEL. So here I have a special

example for you. I'm going to copy and

paste for sake of time, but it's really

just a simple search. Here we have a

list of JavaScript frameworks. Here

we're using a derive to filter the list

based on the search. And this is how we

update the search using this input. So

we assign the value to search and then

we use on input to update the value. And

here we're just looping over the list.

Nothing special. All right. So for

example, if we type in s now we're going

to get solid and swelt. And of course in

the example I would also make this to

lowerase where you have item and search.

So it's case insensitive. All right. So

in previous examples where we used

events like on input, there were

probably some people yelling at the

screen that already know SWelt. What are

you doing? This can be so much simpler.

And yes, that is true. This is part of

the plan. What we're doing here is

called one-way data binding because

we're using the input to update some

state in our application, but the state

in the application doesn't reflect in

the input. What's worse is that you do

something like this all the time. So,

this is just boilerplate. Thankfully,

Swelt supports two-way data binding

using the bind directive. So let's see

how we can use the bind directive to

improve this experience. All right, so

let me show you how cool this is. So we

can just delete all of this junk and we

just need to say bind colon value and

what do we want to bind it to? So we can

say search and that's it. Now we can

save. And now if we go to our example,

we can see that it works the same as

before.

And swell has many writable and readable

bindings that you can use. Let me show

you one of the more useful bindings

which is going to be bind colon this to

get a reference to a DOM element. So

let's look at an example. Let's say that

we have a canvas and we can give it some

styles.

So let's say canvas width 200 pixels by

200 pixels.

And then let's give it a white

background. And now we have a simple

canvas with a white background. All

right. So let's say that we want to

reference this canvas. Maybe we can go

inside of here and create an effect

and then we can say const canvas

document query selector and let's select

the canvas and then we can get the

context. So we can say const ctx equals

canvas get context

2D. And if we log the context,

so if we open the developer tools, we

can see that it works. But the downside

of this is that you're targeting any

canvas in your app. So you could have

multiple canvases and etc. So you

actually don't know what you're

selecting. So instead of doing this, we

can remove this line and we can go here

and we can say let canvas. And this is

going to be undefined until your

component is added to the DOM. So now we

can go to our canvas element and we can

get a reference to it by saying bind

colon this. And now we can bind it to

canvas.

As you can see now we get a reference to

the canvas. And of course instead of

using an effect here if you don't care

about tracking any values you can use

onmount

and you're going to get the same result.

All right. So let me show you another

cool feature when it comes to bindings.

Let's say that you want to make a

mocking Spongebob case converter. So in

this example, I have a simple function

which is called to Spongebob case which

accepts some text and then it converts

it to the mocking Spongebob case meme.

And here is our state. All right. So how

do we make this work? Well, we learned

that we can bind a value. So we can say

bind value and then we can just maybe

pass text. But we have to convert the

case. So maybe we can pass a function

here. So we can say to Spongebob case

and then we can pass text and we

immediately get an error because we

can't bind to a function of course. All

right. So maybe you're thinking let's

create a derived. So we can say mocking

spongrol case

and then let's say derived. So we can

say to spawn case and you can pass in

the text. All right. So let's go here.

So maybe this is going to work. Well,

let's save it and we can go to our

example. So it seems that it works at

first, but we're going to see if we type

in anything else, nothing is going to

work. And that is because we can't bind

to derives. All right. So if we can't do