►
From YouTube: Svelte Workshop 9 25
Description
Svelte 101 Workshop
Join Tom Wilson of hyper63 for a 3-hour workshop learning Svelte, a web framework that provides both a great developer experience and a great user experience. Svelte is the web framework that gets out of the way, literally it is a compiler and only ships a tiny footprint to the browser. Learn a different approach to frontend development. https://svelte.dev
Learning Objectives
In this workshop you will learn to:
* use the basics of components in Svelte
* use reactivity in Svelte
* use stores for application state in Svelte
* use actions in Svelte
* do transitions
* unit testing with cypress
Prerequisites
In order to get the best experience you should:
* be knowledgeable about JavaScript
* be knowledgeable about Web (HTML/CSS/DOM)
* be knowledgeable about git version control
* have NodeJS v12 - https://nodejs.org
* have a Code Editor - https://code.visualstudio.com/
* two monitors, one for the video feed and one for your work area
Here is the workshop github repo - https://github.com/hyper63/weather
For more on Svelte check out this repo: https://github.com/hyper63/svelte101-workshop
About the Instructor
Tom Wilson has been in the software development industry for over 25 years. Continuous learning and teaching have been a part of his journey. Since 2007, Tom has participated in the tech community hosting and running meetups and providing workshops focused on software development. In 2016, Tom launched a coding school in Charleston, SC, JRS Coding School, focused on full-stack javascript. In 2020, Tom founded hyper63; a company focused on leading engineers from beginner to expert.
A
A
Part
of
my
southern
accent
makes
it
really
hard
to
announce
those
types
of
words,
but
just
power
through
it
with
so
what
we're
gonna
do
today
is
we're
gonna
really
immerse
ourselves
with
smoke,
and
we
won't
be
really
diving
too
much
into
explaining.
Why
and
what?
But
just
how
do
you
use
it?
How
do
you
really
take
advantage
of
it
and
and
try
to
walk
everyone
through
an
actual
application,
even
though
it'll
be
limited,
but
basically
we're
going
to
build
a
weather
application?
A
That
application
will
show
the
current
weather
and
have
a
favorites
page,
where
you
can
add
multiple
locations
that
you
want
to
watch
the
weather
from
and
we'll
do
a
little
modal
dialogue.
But
you
know
after
this
workshop
as
you
go
through
it,
I
encourage
you
to.
You
know,
continue
to
hack
on
it
and
continue
to
improve
it.
So
there'll
be
little
pieces
that
you
may
want
to
take
on
and
and
the
reason
for
that
is
a
lot
of
times.
A
Learning
things
is,
is,
you
know,
comes
in
spaces
right,
so
so
you
get
introduced
to
something
and
then
you
revisit
again
and
and
again
and
it'll
start
to
make
sense.
So
svelt
does
a
great
job
at
an
intro
tutorial
of
just
sort
of
giving
you
a
tour
of
all
of
the
features
and
also
has
some
great
documentation.
That
will
point
everyone
to.
A
But
the
purpose
of
this
workshop
is
to
kind
of
show
you
how
you
would
use
a
kind
of
a
test
drive
if
you
will,
as
you
would
be
building
it
day
in
and
day
out,
so
I've
posted
in
the
chat,
but
if
you
do
get
a
chance
go
ahead
and
get
yourself
an
api
key
at
weatherbit.io,
I
won't
say
that
anymore.
I
I
promise
and
and
they'll
say
that
it's
gonna
take
a
bit
of
time,
but
it
should
be
fairly
quick.
A
At
least
that's
been
most
everyone's
experience
with
that
site.
That
is
provisioned
pretty
quickly
and
we
don't
need
it
like
right
away
we'll
get
into
it
in
kind
of
less
than
three
or
four.
I
can't
remember
so
the
way
that
we're
gonna
do
this
is
we're
gonna.
Do
this
in
kind
of
three
kind
of
sessions
the
the
first
session
we're
gonna
go
over
the
basics
of
swell
the
second
session,
we're
going
to
get
into
you,
know,
routing
transitions
and.
A
Stores
and
then
the
the
third
session,
we're
gonna
cover
actions,
actually
build
a
modal
dialogue
which
will
be
fun
and
then
testing,
which
will
be
really
cool
and
we're
gonna.
Do
that
in,
like
you
know,
kind
of
40
to
50
minute
blocks,
so
we'll
go
a
bit
and
then
have
a
five
minute
break
and
then
I'll
review
any
questions
and
we'll
go
through
those
questions
for
five
minutes
and
then
we'll
start
the
next
session.
A
A
A
A
And
hopefully
it
won't
take
too
long
to
install
the
dependencies
if,
if
you're
not
using
yarn
npm
will
work,
but
I
still
find
yarn
to
be
faster
and
we're
not
going
to
go
over
how
to
create
a
swell
project.
Today,
it's
pretty
easy
to
do
that
in
the
notes.
I've
got
a
link
here
and
there's
several
different
ways
to
do
it.
A
So
there's
several
different
ways,
and
and
actually
later
on,
I'm
gonna.
I've
got
a
a
video
that
that
I'm
gonna
do
that.
I'll.
Just
show
you
how
to
kind
of
build
a
spelt
project
from
scratch,
so
it'll
explain
kind
of
all
the
pieces
that
go
together
to
assemble
it
because
then
the
day
spell
is
just
a
module.
A
Then
you've
got
common
js,
which
will
deal
with
any
challenges
with
the
node
ecosystem
and
then
with
a
serve
function.
That'll
actually
serve
a
web
server
and
then
a
live
reload
function,
that'll
just
give
us
kind
of
old
school
hot
module
reloading.
So
every
time
we
make
a
change
and
save
it,
it'll
refresh
the
browser
and
then
finally,
if
you
marked
it
to
go
to
production
that
uses
terser,
which
will
minify
your
javascript,
so
that's
the
and
then
the
two
directories
to
pay
attention
to
is
the
public
directory.
A
A
That's
pretty
much
all
you
need
in
in
your
html
file.
You
can
put
in
all
other
stuff,
but
that's
all
you
need
to
run
spell
and
then
in
the
source
directory
is
where
all
your
source
code
lists,
and
you
can
see
the
main
js
the
app
spell
file
and
we
went
ahead
and
stubbed
out
some
files
that
we're
going
to
work
on
some
views
and
some
components
and
we've
got
a
little
helper
library.
That'll
help
us
make
a
sync
calls.
A
Just
save
us
some
typing
all
it
does
is
wrap
fetch,
so
that'll
just
save
us
some
typing
the
fetch
command
out
and
handling
the
you
know
to
the
response.json
for
us.
So
that's
it.
If,
if
you
do
prefer,
typescript
svelt
does
now
work
with
typescript
and
you
can
run
this
script
setup
typescript
in
your
project
and
it
will
configure
everything
for
typescript.
A
A
A
It
is
not
a
regular
dependency
and
that's
again
because
felt
kind
of
compiles
and
gets
out
of
the
way
I
think
early
on.
It
was
kind
of
called
the
disappearing
framework,
and
you
know
it's.
It's
really
an
interesting
concept
and-
and
I
think
you're
starting
to
see
a
lot
of
other
frameworks
starting
to
think
about
this
is
what
can
we
do
up
front
before
we
deliver
down
to
the
browser
to
create
a
more
optimized
experience
for
the
user,
but
continue
to
create
and
optimize
experience
for
the
developer
as
well.
A
A
A
A
A
I'm
going
to
go
ahead
and
put
my
terminal
just
before
I
do
before.
I
hide
it.
One
thing
to
keep
note:
when
you
run
it
you're
going
to
see
some
warnings,
and
these
warnings
is
one
of
the
advantages
of
a
compiler
is
it
can
provide
warnings
if
you've
used
typescript
one
of
the
advantages
or
vs
code?
Is
you
know
you
have
these
warnings
as
as
you
write
code
and
they
can
indicate
things
that
may
not
be
correct,
and
one
of
the
things
that
felt
built
in
is
a
simple
checker
on
accessibility.
A
So
here,
since
we've
got
this
mock-up
we're
not
necessarily
having
full
accessible
links
here
and
spelt's,
just
letting
us
know
that
that
you
know
an
href
attribute,
can't
be
empty,
so
you'll
see
those,
but
but
also,
if
you
have
a
bug
or
a
problem,
this
is
a
good
place
to
check
as
well,
because
swelt
does
identify
some
pretty
good
error
messages.
I
think
when
it
compiles
and
that's
one
of
the
advantages
of
being
a
compiler,
so.
B
A
A
So
as
we
get
started,
the
first
thing
we're
going
to
do
is
kind
of
go
into
current
spell
out
there
and
the
first
thing
you'll
notice
is
this
looks
just
like
an
html
page.
It's
just
name
dot
spell,
and
actually
it's
felt.
The
the
one
of
the
ways
I
like
to
describe
it
is
that
it's
really
designed
from
a
developer's
perspective,
to
be
very
much
like
html.
A
A
If
we
wanted
to
add
code
instead
of
you
know
linking
to
a
script
file,
we
can
just
create
a
script
file
or
script
tag,
and
we
just
type
in
a
script
tag
and
we
can
write
functions,
declare
variables,
import,
export
stuff,
all
in
the
script
tag
and
it's
localized
to
the
component.
So
a
splout
component
is
a
combination
of
markup
html,
a
style
block
and
a
script
block,
and
in
this
component,
what
we're
going
to
do
is
we're
going
to
simply
create
a
constant
in
the
script.
B
B
A
A
Definitely
raining.
I
don't
know
if
you
guys
can
hear
that
thunder
or
not
so
we've
defined
this
variable,
and
now
you
know
I
said
it's
very
much.
Html
like
it's.
If
you
use
template
languages
in
the
past,
it
is
pretty
much
like
handlebars,
so
you
use
these
curly
braces
and
then
you
just
type
in
your
javascript
expression
right.
So
I
could
type
one
plus
one
here
and
it
would
evaluate
to
two
and
show
two
as
the
alt.
So
if
we
save
this
and
inspect
the
image
that.
A
A
For
for
the
curly
braces
in
between
the
template,
so
in
this
case
we're
going
to
want
to
take,
I
want
to
take
weather
and
pull
in
the
description,
weather,
dot,
description
and
also
you
know
I
don't
have
to
give
a
whole
url.
I
can
embed
these
curly
braces
right
into
a
string
and
say
weather
dot,
icon.
A
A
A
A
A
Okay,
so
as
we
go
through
this,
if
you
do
get
stuck
or
are
lost,
then
you
can
easily
just
run
git
stash
and
then
just
pull
the
latest
branch
from
origin
so
paste
that
in
the
comments,
so
hopefully
you
know
you're
able
to
follow
along.
But
if
you
do
get
stuck,
you
can
always
catch
back
up
by
doing
that
command.
A
A
A
So
to
create
a
component.
We
just
create
a
new
file
and
we've
already
got
a
file
in
our
components:
folder
called
weather.
So
we
can
just
open
that
file
up
right
here
and
and
again
it's
it's
blank,
but
we
basically
can
just
start
adding
html
to
this
component
and
and
it's
a
component-
that's
that's
all
you've
got
to
do
now
in
in
this
component.
I
am
you
know,
looking
for
a
description
variable,
an
icon,
a
city
and
a
temp
again,
I
need
to
create
a
script
block
and.
A
Declare
all
of
those
things,
so
I
can
declare
them.
You
know:
icon
description,
city
and
temp,
but
in
this
component
I
want
to
register
or
call
this
component
from
my
weather
component,
and
I
want
to
pass
props
to
it.
So
I
need
to
export
these
local
variables
so
that
my
parent
component
knows
that
I
need
to
pass
props
to
this
local
component
or
this
this
component,
so
export
in
javascript
is
used
a
little
differently.
So
it
may
feel
weird.
A
But
with
spell
you
can
use
the
expert
or
keyword
to
identify
your
props
and
if
you
want
to
validate
props
at
runtime,
you
can
use
this
module
prop
types
in
your
component,
which
is
pretty
easy
to
use.
It
came
out
of
the
react
ecosystem
or
you
could
use
type
strip
well
and
with
the
new
typescript
stuff.
That
would
work
as
well,
but
in
this
case
we're
exporting
three
variables
in
our
weather
component
and
then
we've
basically
got
the
same
kind
of
template
that
we
were
using
in
current.
A
So
we're
going
to
want
to
use
that
in
our
current
component.
So
we'll
switch
back
over
to
the
current
component,
and
just
you
know
when
you
export
something
your
parent
needs
to
import
it.
So
we're
gonna,
import,
weather
from
and
we'll
go
to
components,
weather
and
we
have
to
use
the
dot
spelt
extension
and
with
formal
es
modules
you
you
want
to
start
using
extensions
more
and
more
because
that's
where
things
will
start
to
move
from
this
is
it
common
js
is
it
known?
A
Is
a
you
know
the
browser
kind
of
mess
that
we're
in
right
now.
So
it's
good
practice,
but
you
want
to
use
the
extension.
If
you
don't
use
dot,
spelled
it's
not
going
to
know
what
file
to
grab
so
we're
going
to
do
that
and
then
what
we're
going
to
do
is
come
down
here
to
our
template
and
we
can
get
rid
of
all
that
and
we
can
just
add
our
weather
component
and
like
with
other
frameworks,
to
specify
a
component.
A
You
type
the
capital
letter
of
the
component
and
that
lets
felt
know
that
it's
not
a
native
element.
But
it
is
a
spell
component
that
we're
wanting
to
register
and
if
we
go
ahead
and
save
that
we're
going
to
get
a
bunch
of
unknown
fines,
because
we
haven't
passed
our
values
down
to
the
the
child
component
right,
we
define
those
properties,
but
we
need
to
pass
them
down
and
we
can
do
that
several
different
ways.
One
way
is,
we
could
just
say,
city
equals.
A
And
just
do
curly
braces
city
like
that,
and
it
would
basically
write
out
the
city
name
equal
to
the
city
value.
So
that's
that's
kind
of
cool
and
then
the
other
thing
we
can
do
is
we
can
do
a
spread.
So
we
can
add
the
three
dots
and
spread
an
object
over
that
and
every
single
key
in
that
object
will
become
a
gain
value
pair.
B
B
B
B
A
We
just
went
over
the
basic
templates,
we've
created
a
component
and
just
showed
you
how
to
kind
of
pass
props
down
to
a
component
which
is
which
is
pretty
nice.
One
of
the
main
kind
of
features
of
swelt
is
its
built-in
reactivity,
so
just
out
of
the
box,
when
you
have
a
local
variable
defined
up
in
your
script,
it
becomes
reactive
out
of
the
box,
so
anytime
and
I'll
do
a
demo
really
quick.
What
name.
B
A
A
B
A
Whatever
and
it's
reactive
so
anytime,
the
input
changes,
the
variable
changes
and
the
presentation
changes.
So
that's
that's
really
cool
you
get
that
by
default,
but
there's
also
a
way
to
create
formulas
and
and
those
if
you
use
excel.
You
know
you
have
your,
you
know,
values
and
then
you
can
create
a
cell
in
excel
equals.
You
know
cell
one
plus
cell
two
and
then
any
time
of
volume
changes
in
cell
one
or
two.
A
So
we're
going
to
declare
a
temp
variable
and
a
unit
variable
and
we're
going
to
create
a
couple
of
handler
functions
to
handle
our
inversion
so
we'll
create
a
function,
invert
f
and
a
function
convert
to
c
and
in
these
functions.
We're
just
going
to
you
know,
modify
these
local
variables,
so
we're
going
to
call
celsius
to
fahrenheit
and
pass
in
the
temp
and
then
we're
going
to
change
the
unit
to
f
and
then
for
the
convert
to
celsius.
A
We're
going
to
do
the
same
thing
fahrenheit
to
celsius
with
the
temp
variable
change
the
unit
to
c.
So
these
are
handlers
and
we're
just
going
to
add
some
listen
events
to
our
anchor
tags
here,
f
and
c,
and
normally
you
wouldn't
necessarily
use
anchor
tags
and
do
on
clicks.
You
know
really
you'd
want
to
use
a
button,
but
for
this
demonstration
I'm
using
anchor
so
that
you
know
that
I
didn't
have
to
spend
a
lot
of
time
with
the
css
and
I
can
just
make
the
css
look.
A
Okay,
so
we're
going
to
use
a
directive
and
swell
spelt
called
the
on
directive
and
the
own
directive
takes
a
colon
and
then
any
event
on
an
element
or
a
custom
event.
You
can
listen
to
so
in
this
case
we're
going
to
listen
to
the
click
event
and
we're
clicking
on
fahrenheit.
So
we
want
to
call
convert
to
fahrenheit
and
then
for
the
celsius.
We
want
to
do
the
same
thing
and
do
on
click
and
convert
to
celsius
so
cool.
If
we
we
save
that
you
know
these
should
be
working
now.
A
A
So
if
I
click
fahrenheit
should
convert
to
fahrenheit,
if
I
click
celsius,
it'll
convert
celsius
and
you
know
our
display
because
it's
doing
math-
it's
showing
a
bunch
of
stuff-
and
we
may
want
to
round
that.
But
we
got
some
reactivity
going
but,
like
like,
I
said,
we
want
to
create
a
an
additional
reactive
element,
very
much
like
a
formula
in
a
spreadsheet
and
the
way
that
you
do
that
with
spelt.
A
But
with
spell
basically
what
it
does
is
it's
going
to
create
watchers
on
any
variables
on
the
right
side
of
the
equation
and
when
they
change
it's
going
to
update
the
left
side.
So
in
this
case
we're
going
to
create
a
display,
temp
variable
and
the
nice
thing
with
the
dollar
sign
colon.
Is
it
actually
declares
it
as
a
let
variable
for
us
and
then
on
the
right
side
of
the
equal
signs,
we're
going
to
give
it
our
formula
right?
So
we're
going
to
say
you
know
math.
A
B
A
That's
really
cool,
there's
a
lot
of
examples
out
there
of
reactivity.
The
traditional
counter
example
where
you
know
you
can
follow
along,
but
the
really
the
sense
with
this
reactivity
is
that
you
can
create
these
excel,
like
formulas
that
listens
to
all
your
values
and
then
composes
that
into
a
derived
value.
A
A
couple
of
things
that
you
can
do
with
this
is
that
you
can,
you
know,
add
if
blocks
right
in
here,
so
you
can
say
if
you
know
true
or
greater
than
20
or
something
like
that,
then
do
stuff.
So
you
can
add
an
if
block
or
you
can
just
add,
a
code
block
which
is
just
the
braces
and
then
anything
in
this
code
block
that
changes.
A
A
A
A
So
another
thing
is
with
these
directives:
here
we
have
own,
we
showed
the
bind
directive
too,
and
then
you
have
the
you
know,
kind
of
the
event
that
you're
listening
to
you
can
also
pass
modifiers.
So
when,
when
this
event,
fires
it'll
actually
create
an
argument
for
this
function
of
that
event
and
like
if
you
were
submitting
forms
or
you
know,
you
wanted
to
stop
propagating
the
event
so
something
above
it
didn't
catch
it
or
whatever.
A
You
know,
you
could
call
this
a
bit
and
say
prevent
default
or
whatever
and
then
do
your
code,
but
then
a
lot
of
times.
You
know
that's
super
easy
to
forget,
sometimes,
and
what
it's
about.
I
just
add
these
little
modifiers,
so
you
can
just
do
prevent
default
or
stop
propagation
or
whatever,
there's
several
little
modifiers
that
you
can
just
add
and
it'll
prevent
the
default
functionality
of
a
given
event
or
stop
propagation.
I
think
I'm
saying
that
right,
etc.
A
A
A
A
A
A
A
A
B
B
A
And
that
worked
right,
we
should
see
you
know
our
json
here
we
get
the
temperature
and
we
get
a
bunch
of
other
stuff.
The
city
name
country,
the
state,
and
you
get
this
little
weather
object
too,
and
this
weather
object
has
an
icon
and
a
description.
So
we're
going
to
want
to
kind
of
pluck
those
out
of
this
object
and
send
that
to
our
weather
component.
A
Now,
there's
a
couple
ways
you
can
do
a
sink
on
svelte
and
we'll
go
through
both
of
them.
The
first
one
is
all
mount.
So
spelt
comes
with
some
life
cycle
functions
in
import,
mount
on,
destroy
on
before
update
on
after
update.
So
all
mount
is
when
the
components
being
created
on
destroy
is
when
the
component
is
being
destroyed
and
on
before
update
is
before
an
update
is
about
to
happen
to
a
component
and
on
after
update
is
when
the
update
happened
right.
So
you
can
look
into
those
lifecycle.
A
Events
we're
going
to
hook
in
to
the
old
mount
and
put
that
down
here
and
basically
it's
a
function
and
it
takes
a
function
as
an
argument.
So
we're
gonna
put
a
function
in
and
we're
going
to
copy
this
in
we're
going
to
essentially
call
our
get
json
and
we'll
make
this
a
sync
and
we're
going
to
just
hard
code
weather.charleston,
and
then
we
get
those
results
and
then
we're
going
to
build
our
little
weather
object
and
we're
going
to
change
this
to
a
let
so
that
we
can
override
it.
A
A
A
A
And
we'll
go
back
to
our
template
here
and
what
we'll
do
is
we'll
use
the
curly
braces
and
use.
I
don't
even
know
if
there's
a
name
for
these
commands,
but
there's
three
commands
there's
an
if
and
each
and
a
way
and
they
are
like
template
tags.
So
you
start
with
a
pound
and
then
type
the
keyword
and
then
there's
an
expression
that
follows
and
then
that
just
like
an
html
tag,
you've
got
it
in
that
command.
A
So
you
use
a
slash
and
a
weight,
and
that
is
a
swell
kind
of
template
command,
and
this
await
actually
looks
for
a
promise.
And
then
it
gives
you.
You
know
kind
of
this
place
where
you
can
sort
of
display
loading.
While
the
sync
is
happening
and
when
the
promise
resolves
it'll
give
you
a
then
command
and
then
you
can
actually
do
a
catch
and
then
an
end.
So
here
we're
going
to
create
a
function
called
getweather.
A
That
function
is
going
to
return
a
promise
so
any
function.
You
call
in
this
away
needs
to
return
a
promise
and
while
that
function
is
running
we're
going
to
you
know
kind
of
just
display
loading
right.
You
can
put
your
favorite
spinner
here
or
do
whatever
you
want
to
do,
and
then
we
haven't
been
and
like
anything
in
here.
The
colon
separates
that.
A
A
A
A
B
B
B
B
A
There
we
go
so
so
refresh,
it
should
see
loading
for
a
second
and
then
it
was
off.
So
the
whole
point
of
that
was
to
just
kind
of
show
that
it's
pretty
easy
to
to
handle
asynchronous
loading
event
since
felt
by
just
using
this
a
weight
block,
and
you
can
do
loading
and
if
there's
an
error,
you
can
actually
do
catch
and
get
the
air
and
handle
the
error.
So
you've
got
some
nice
semantics
there
right
in
the
template
language
to
deal
with
some
of
those
things
pretty
cool.
A
B
A
A
A
Okay,
so
now
we're
on
each
and
dispatching
events,
and
what
we're
gonna
do
is
work
on
the
second
page
of
this
app,
the
favorites
page
and
we're
going
to
list
a
couple
of
cities.
So
if
we
want
to
open
up
favorites
dot,
spelt
again,
you'll
kind
of
see,
just
an
html
template
and
we'll
open
up
app.spelt
as
well
and
kind
of
switch
over
to
use
the
favorites
view.
A
A
A
A
A
B
B
A
A
A
And
we'll
just
pull
that
in
from
the
really
long
name,
and
basically
it's
going
to
create
a
handler
to
create
a
dispatch
function,
an
event
dispatch
function.
So
at
the
root
of
our
script,
we've
got
to
call
this
function,
can't
call
it
inside
an
all
amount
or
inside
any
other
function.
You
have
to
call
it
the
root,
so
we're
going
to
create
a
dispatch.
A
A
And
then
we're
going
to
pass
that
up
to
the
parent
component,
so
to
do
that,
we're
going
to
say,
dispatch
and
we're
going
to
say
click
and
we
could
give
it
any
kind
of
name.
So
this
is
a
custom
event,
so
we
could
say
you
know
change,
city
or
change
or
whatever
we
wanted
to
call
it,
and
then
we
can
give
it
some
data
here,
we're
just
going
to
give
it
the
current
city
like
so
now.
A
The
other
thing
you
could
do
is,
if
you
didn't
want
to
create
this
function,
as
you
could
just
do
a
side
on
click
and
that
would
bubble
up
to
the
parent
and
not
give
it
an
equals
and
it
would
bubble
up
as
the
click
event
of
the
card.
But
you
have
to
be
careful
with
that,
because
you
may
have
another
on
click
event
in
inside
your
same
component.
So
don't
want
it
to
get
super
confused
so
either
way.
But
this
is
to
show
you
you
have
to
create
an
event.
A
A
In
our
our
change,
current
city
function
right
now,
all
we're
going
to
do
is
just
log
to
the
console,
so
we
can
kind
of
see
it
in
action.
So
change
our
city,
we'll
take
the
city
and
in
this
case
we're
going
to
actually
create
a
higher
order
function
so
that
we
can
kind
of
capture
the
city
as
it's
painting
so
we'll
take
the
city
in
and
then
we'll
return
a
function.
That
will
actually
be
the
click
handler
and
then
we'll
console
log.
B
A
And
so
the
way
that
we
do
that,
with
the
higher
order
function
as
the
each
block
is
painting
each
city,
we're
going
to
call
this
function
and
pass
the
city
in
so
that
we
can
take
a
closure
and
kind
of
put
that
in
as
a
variable
and
then
return
this
handler
function
which
will
be
set
to
the
on
click.
So
then,
when
the
user
actually
clicks,
it
we'll
have
a
reference
to
the
city
like
so,
and
we
won't
be
kind
of
reading
it
from
the
click
event.
A
But
but
you
can
do
both
I'm
just
showing
you
how
you
can
do
it
as
a
higher
order.
So
hopefully,
if
that
works.
If
I
click
on
new
york,
I
get
new
york.
If
I
click
on
san
francisco
click
on
charleston,
so
that's
kind
of
cool.
And
basically
you
can.
You
know
list
out
things
with
the
and
you
can.
You
know
easily
create
custom
events
from
your
components
and
dispatching
backup.
A
A
B
A
A
A
So
in
order
to
do
that,
we're
going
to
go
over
to
our
app.spelt
file
and
we're
going
to
bring
in
the
page.js
module
it's
already
as
of
the
dependency
in
your
package.json,
so
we'll
import
that
we're
going
to
call
it
router,
mainly
because
I
want
to
use
a
page
variable
in
my
script
block.
So
we're
going
to
just
call
the
page
library
router
for
the
script
block
and
we'll
declare
a
page
variable
and
then
we'll
create
some
routes.
A
And
then
we're
going
to
go
ahead
and
start
our
router
start
and
we'll
create
this
function.
Another
higher
order
function,
which
is
you
know,
kind
of
a
function
that
can
either
take
a
function
as
an
argument
or
return
a
function
in
this
case,
going
to
return
a
function
so
we're
going
to
take
a
component
as
our
argument
and
then
we're
going
to
return
a
function
that
will
take
some
context.
A
Now
when,
when
we
get
the
new
route,
then
we
need
a
way
to
kind
of
tell
svelte
to
change
it.
So,
just
like
reactivity
that
we've
done
earlier
we're
going
to
use
this
local
page
variable
and
we're
going
to
use
a
special
svelt
kind
of
template
helper,
and
these
template
helpers
are
basically
like
custom
elements,
so
we've
got
and
they
they
all
start
with
the
prefix
spelt
and
they
have
a
colon
and
this
one's
called
component
and
with
the
component.
A
It
has
this
property
and
we
just
set
this
property
to
page,
and
what
swell
will
do
is
every
time
this
page
value
changes.
Then
it's
going
to
destroy
the
current
component
and
create
a
new
component
for
us.
So
with
that
now
we'll
have
routed
and-
and
it's
pretty
straightforward,
easy
to
follow
now,
some
of
the
things
you
may
run
into
like
with
with
the
page
router,
which
you
can
go
to
the
github
page
and
see
it
has
it's
it's
very
much
like
express.
A
A
A
So
we
go
into
current
spell
and
just
find
our
favorites
link
and
we
just
do
slash
favorites,
and
if
we
save
that
now
we
should
navigate
to
favorites
and
to
go
back.
We
want
to
navigate
when
we
click
on
one
of
these
cities.
We
want
to
navigate
back
to
the
current
page
and
again,
that's
pretty
easy
to
go
into
favorites
and
in
our
function
here.
Where
we're
logging,
each
city,
we
can
essentially
import
page.
A
A
A
A
And
again
is
is
one
of
those
things
I
think
this
felt
community
is
talking
about
kind
of
taking
the
router
out
of
sapper
and
and
making
that
the
official
router
which
is
kind
of
file
based,
but
there's
routify
and
there's
some
others
again
depending
on
your
project,
you
may
need
you
know
a
file
based
router,
which
I
would
just
say,
use,
zapper
or
or
something
like
that.
But
if
you're
just
creating
a
small
prototype
or
a
single
page
app,
you
know
give
page
a
try.
A
It's
you
know
it's
old
school,
but
it
works
and-
and
it
works
really
well,
it's
I
think
it's
like
three
or
four
k,
so
it
doesn't
hurt
the
download
size
at
all
and
yeah
worth
checking
out.
So
that's
routing
and
now
we're
gonna
talk
about
stores
and
and
stores
are
kind
of
fun.
Every
app,
I
think,
needs
some
sort
of
shared
state
in
the
app
there's.
Several
ways
that
you
can
do
that
was
felt.
You've
got
props
right.
A
You
can
pass
date
from
parent
to
his
children
and
then
you've
got
events
that
can
trickle
bubble
up
values
from
the
children
to
the
parent.
So
that's
very
explicit
that
can
get
very
painful
if
you
have
a
lot
of
components
and
you're
passing
a
lot
of
data
down
and
you've
got
to
get
a
lot
of
data
back
up
so,
but
it's
certainly
doable
and
then
there's
context
so
well
has
a
context
where
you
can
pull
in
context
and
essentially
set
it.
A
A
A
With
the
one
thing
you
have
to
keep
straight
with,
that
is
when
you
set
the
context,
that's
on
the
parent
and
you
set
the
value
at
that
level
and
then
any
of
its
children.
Any
children
that
you
import
can
go
and
call
get
contacts
with
that
key
and
get
the
value
and-
and
that's
like
I
said
it's
pretty
pretty
easy-
it's
not
reactive,
but
it's
easy
to
to
do
it,
and
but
what
I
want
to
do
is
go
through
stores
which
does
have
some
reactivity
to
it.
A
A
A
So
just
a
new
javascript
file
and
there's
kind
of
three
flavors
of
stores
and
spell
there's
a
writable
store,
a
readable
store
and
a
drive
store.
The
writeable
store
does
what
it
says
you
you
can
write
to
it
and
you
can
read
from
it.
The
readable
store
is
kind
of
read
only
so
you
can't
write
to
it
and
that's
kind
of
helpful
for
things
like
you
know.
A
If
you're
reading
unchanged
values
from
a
you
know,
websocket
or
a
favorite
example
is
what,
if
you
wanted
to
detect,
if
the
user
is
online
or
offline
right,
you
can
hook
into
the
the
window
event
and
when
it
you
know,
fires
that
the
user's
offline,
you
can
create
a
readable
store
and
and
make
that
reactive
and
show
like
a
little
offline
sign,
or
you
know,
a
toast
that
comes
up
and
says
sorry,
you're
you're
not
online.
This
app's
not
going
to
be
very
helpful,
but
then
the
writable.
A
A
So
we've
got
a
little
contrived
example
here,
but
I
think
it'll
help.
You
get
an
idea
of
how
stores
work
so
we're
going
to
import
writable
from
well
store
and
we're
going
to
create
a
store,
but
we're
going
to
also
export
it
at
the
same
time.
So
I'm
going
to
create
the
store
by
just
calling
writable
and
passing
in
a
value
in
this
case
we're
going
to
pass
in
an
object
for
the
current
property
and
then
we're
just
going
to
give
it
our
city.
So
we're
going
to
assume
charleston
soccer.
A
That's
a
our
current
value
of
our
store
and
then
we're
going
to
create
a
function
that
we're
going
to
call
dispatch,
and
this
dispatch
is
very
much
like
the
redux
dispatch.
So
we're
kind
of
creating
like
a
mini
redux
kind
of
state
management
tool
with
this
store.
But
it's
going
to
take
an
action
and
it's
just
going
to
return
a
promise.
B
A
A
A
A
map
function
on
an
array,
so
it's
kind
of
functional
the
update
method
takes
a
function
and
that
function
will
actually
have
the
value
from
the
store.
As
its
first
argument.
Let's
just
call
that
state
for
for
now
and
and
then
what
we're
going
to
do
is
we're
going
to
resolve
this
function
and
then
we're
going
to
basically
say
if
the
action.type
equals
set
current.
A
So
if
we
wanted
to
create
a
new
city,
we
would
call
dispatch
and
pass
it
an
object
that
had
a
type
with
a
set
current
and
a
payload
with
the
new
city
and
this,
if
we'll,
basically
update
the
store
with
that
new
state.
Otherwise,
if
dispatch
is
called
and
the
action
is
none
of
that,
we
just
don't
want
to
do
anything
and
we'll
just
return
state
and
that's
our
dispatch
method.
A
I
don't
think
I
have
any
errors
in
that.
So
what
we're
going
to
do
is,
in
our
favorites
hand
where,
when
we
click
the
new
city,
we're
actually
going
to
dispatch
that
to
the
store
and
it's
going
to
replace
this
current
value
with
the
new
city
value
and
then
that'll
allow
us
to
read
from
the
current
component.
A
B
A
And
our
payload
will
be
city
and
it's
going
to
return
a
promise
and
that's
that's
why
we
did
that
promise
in
the
store.
So
it'll
return
a
promise.
So
we
can
do
you
know
a
dot
then,
or
we
can
make
this
a
sync
and
we
can
just
do
an
await
and
then,
when
that
promise
returns,
then
we
can
do
our
redirect.
So
that's
how
we
can
kind
of
handle
our
redirect.
So
it's
not
going
to
redirect
to
current
until
our
store
has
the
actual
value
set
in
it,
which
is
cool.
A
A
A
A
And
when
a
store
is
called,
I
mentioned
that
it
has
three
methods
on
it.
It
has
the
set
method,
update
method
and
the
subscribe
method,
so
the
subscribe
method
basically
takes
a
function
and
then
every
time
something
changes
that
method
is
called.
That
function
is
called
that
that's
passed
into
the
subscribe
method.
Now,
when
you
call
the
subscribe
method,
it
returns
an
unsubscribe
function
that
you
need
to
handle.
So
if
we
wanted
to
implement
this
manually,
we
would
do
something
like
all
mouth
and
then
we
would
say
you
know
unsubscribe.
A
A
But
you
know
that's
that's
kind
of
a
lot
of
work
and
I'll
tell
you.
You
know
it's
easy
to
forget
this
unsubscribe
and
then
all
of
a
sudden
you've
got
a
ton
of
memory
leaks
and
you
don't
know
what's
going
on,
so
it's
felt
that
they,
you
know,
since
it's
a
compiler,
we
can
use
some
macros.
That
makes
this
easier
and
there's
a
macro
that
basically
takes.
If
we
take
this
property
store
and
we
put
a
dollar
sign
in
front
of
it,
what
the
spell
compiler
is
going
to
do.
A
A
You
know
have
all
of
this
stuff
and
we
really
need
it
to
be
all
lower
case
and
no
space
between
the
comma
for
our
api
to
work
now
probably
better
ways
to
deal
with
this,
but
this
works
for
now.
So
we'll
just
do
you
know
two
lower
case
and
we'll
just
do
a
replace
and
we'll
replace
a
comma
space
with
just
a
comma
and
that'll
set
our
current
value,
and
then
we
can
use
a
template.
A
And
cool
so
so,
hopefully,
everything
works
and
we
can
test
that
by
just
going
to
our
favorites
and
clicking
on
new
york
and
if
everything
works,
we've
got
the
weather
of
new
york
city
go
to
favorites
like
san
francisco.
We
got
san
francisco
and
we
got
charleston
pretty
cool.
It
went
from
heavy
rain
to
light
rain,
pretty
cool,
so
it
is,
it
is
pretty
accurate.
A
A
I
would
recommend,
from
an
architecture
standpoint
just
to
use
it
in
your
kind
of
your
logic,
components
and
don't
put
it
in
your
presentation
component,
so
I
kind
of
broke
out
the
structure
with
two
folders.
You
have
your
views
and
your
components,
and
I
would
highly
recommend
that
you
use
your
stores
like
in
your
views
and
then
make
these
components
very
much
a
pure
component.
A
So
that's
the
recommendation,
but
the
nice
thing
is:
is
this
is
reactive,
so
anytime
anywhere
it
changes.
This
will
change
in
in
real
time
and
react
to
it.
So
that's
pretty
cool
and
it's
real
easy
to
hook
into
third-party
libraries
like
rxjs
because
of
the
signature
of
the
store
is
a
subscribe
function,
an
update
function
and
a
set
function.
It's
just
super
easy
to
hook
into
other
libraries
and
give
them
all
this
kind
of
reactivity
kind
of
functionality
that
manages
state.
A
B
A
A
It
can
have
features
like
transitions
and
motion
and
animation,
but
it
will
only
put
those
libraries
or
those
modules
in
if
you
choose
to
use
them,
so
the
built-in
transitions
they
become
in
the
box.
But
if
you
don't
use
them,
they're
not
included
in
the
final
build
and
then,
if
you
do
use
them,
it
includes
them
and
that's
really
kind
of
neat.
So
you
know
it's
got
this
motion,
library
and
animation
library
and
all
these
other
things.
A
But
if
I'm
not
using
them,
it's
not
going
to
build
it
and
send
it
down
the
wire.
So
it's
able
to
have
those
kinds
of
things
built
in
and
then
you
as
the
developer,
you
know
don't
have
to
go
through
a
ton
of
third-party
library
research.
You
can
just
pull
in
the
the
piece
of
the
framework
you
need
when
you
need
it.
A
I
think
so.
We'll
give
it
a
shot.
So
there's
several
different
kind
of
transitions
built
in
we're
on
current.spelt
and
we're
just
going
to
import
we'll
import
fade.
So
we'll
import
fade
from
belt
transition
like
that
and
in
the
template.
You
use
these
by
basically
specifying
a
couple
of
directives
and.
A
If
you
want
to
do
this
transition
for
both
in
and
out
and
let's
say
for
main
we
when
it's
created,
we
want
to
fade
in
and
when
it's
destroyed,
we
want
to
fade
out.
So
we
can
just
use
the
keyword,
transition
and
then
use
colon
and
give
it
fade,
and
if
we
don't
give
it
anything
else,
it's
going
to
keep
the
default.
So
by
doing
that,
if
I
go
to
favorites
and
saw
it
fade
out
and
now
it
should
fade
in,
but
it
is
still
happening
kind
of
fast.
A
A
That
expression
is
just
a
javascript
object
and
we're
going
to
set
a
property
on
the
object,
duration
as
a
value
of
a
thousand
and
that
should
kind
of
slow
down
the
fade
in
and
fade
out.
So
if
we
fade
out,
then
we
go
and
fade
in
and
there's
other
properties
on
here
we
can
put
delays.
We
can
do
other
things
and
play
around
with
that.
A
A
A
A
Floors
in,
but
now,
if
I
click
on
new
york,
this
one
disappears
and
then
the
current
page
fades
in.
But
one
thing
that
I
noticed
about
this
is,
as
I
click
see,
that
favorites
an
ad
that
kind
of
pops
at
the
bottom
that's
see
if
we
can
improve
that
a
little
bit.
So
what
I
did
to
improve
it
was
move
this
transition
and
and
a
root
element
of
the
main
so
that
it
kind
of
includes
the
nav
as
well
so
just
created
the.
A
A
So
if
we
click
on
favorites
it
kind
of
fades
out
and
then
it
pours
in
then
we
go
to
new
york
and
that
kind
of
fades
in
for
the
current
page,
and
you
know
one
of
the
other
things
we
did,
that
I
did
that
was
kind
of
fun.
Was
we
go
to
favorites
added
a
little
animation
on
the
cards
or
transition
on
the
on
the
card?
So
if
we
go
to
the
our
component,
the
city
card
component.
A
We
can
also
import
a
transition,
so
we'll
import,
you
know,
fly
the
fun
one
from
spell
transition
and
what
we'll
do
is
just
on
these
cards,
we'll
just
call
in
fly
and
we're
gonna
give
it.
We
can
have
them
fly
in
from
the
left
or
fly
in
from
the
right
or
fly
in
from
the
top
or
the
bottom.
Since
these
are
vertically
we'll
go
in
from
the
left.
A
A
A
And
again,
you
can
kind
of
play
with
the
timing,
but
the
nice
thing
about
a
single
page
app
is
you
have
full
control
of
these
transitions
and
spell
makes
it
extremely
easy.
You
still
got
to
work
out
the
timing
and
you
know
figure
out
all
the
usability,
but
still
to
implement
them.
It's
pretty
easy
and
it's
if
you
want
to
go
custom,
you
certainly
can
and
and
spout's
got
a
motion
tool
and
an
animation
tool
where
you
can
go
full
custom
on
there.
A
Misspelled
it
okay,
so
we
push
that
and
now
we're
gonna
check
out
nine
and-
and
this
is
a
fun
piece,
so
we're
gonna
learn
about
actions
and
we're
gonna
create
a
little
modal
dialogue,
but
but
first
before
we
do
that,
I
think
it's
time
to
take
a
break.
So
we're
going
to
take
a
five
minute
break,
we'll
be
back
at
212
and
then
I'll
review
any
questions
and
then
we'll
get
into
modals
and
actions
and
then
wrap
up
with
testing.
So
we're
two-thirds
of
the
way
done.
A
A
B
A
A
Looks
like
you
got.
It
figured
out
everybody
else
doing.
Okay,
I
assume
you
are
so.
We've
got
two
final
lessons
to
go
and
this
one
is
a
little
bit
involved.
I
I
think,
though,
it's
really
worth
it
there'll
be
a
little
bit
of
typing
here,
but
I
think
it's
be
cool
and
I'm
going
to
try
to
step
us
through
it.
But
basically,
what
we're
going
to
do
is
create
a
modal
component
from
scratch.
A
A
If
we
show
the
modal,
sometimes
if
you've
shown
these
modals
and
you
scroll
on
the
it
can
scroll
behind
the
modal
right
and
then
when
you
close
it
you're,
you
know
like
in
a
different
spot,
you're
like
how
did
I
get
there?
That's
kind
of
confusing
with
this
modal
we're
going
to
use
an
action
to
actually
disable
overflow
on
the
document
and
then
we'll
re-enable
it
when
the
modal
goes
away.
So
I
think
that'll
be
kind
of
fun.
B
A
Okay,
so
we'll
open
a
modal
file
and
I
think
I've
already
got
one
to
find
yep
so
empty
file
and
it's
a
component
and
we
want
to
make
this
component
kind
of
a
wrapper
component.
So
it's
going
to
take
the
markup
as
as
kind
of
a
implicit
prop
and
then
we're
going
to
render
that
markup
wrapped
around
this
this
modal
component.
So
let's
go
ahead
and
declare
script
tag
and
let's
just
go
ahead
and
do
our
markup
down
here.
A
A
It
follows
the
kind
of
the
web
component
spec
and
it
uses
this
tag
called
a
slot,
and
this
slot
will
basically
inject
any
children
that
I
add
in
the
parent
component.
So
if
I
was
to
reference,
you
know
this
component
modal,
like
that,
and
anything
that
I
put
in
to
the
content
area
like
let's
say:
h1
hello,
world
right.
That
content
will
actually
go
into
this
slot
area.
A
Now
it
can
get
more
complicated
than
that,
like
you
can
create
name
slots
and
you
can
say
slot
name
header
and
then
then
you
could
actually
have
multiple
content
blocks
within
your
component
window
to
place
things
multiple
ways,
but
with
us
all
we
need
is
just
the
slot,
so
the
slot
that'll
allow
us
to
add.
You
know
like
the
the
ad
form
and
at
the
view,
level
and
and
make
this
component
more
generic
and
reusable,
so
that's
pretty
cool
and
we
want
to
handle
do
that
later.
A
And
we
want
that
open
variable
or
right,
we're
just
going
to
toggle
variable
on
the
parent,
saying
open
truth
and
that's
going
to
trigger
the
open.
So
we
want
to
export
that
out
and
and
what's
cool
is-
is
that
I
can
export
a
local
variable
and
it's
reactive
from
the
parent
so
anytime
the
parent
changes
it.
My
child
component
will
react
to
that
and
let's
see.
A
As
the
first
argument
will
be
the
actual
element
node
that
the
function
the
action
is
is
declared
on
and
that'll
make
sense
in
a
minute.
But
the
important
thing
is
is
this
is
just
an
html,
node
and
you're
kind
of
at
this
point
in
the
dom
right
you
are
in
the
dom.
The
component
has
been
created,
and
this
is
your
window
to
do
things
that
you
would
normally
do
in
vanilla,
javascript
land.
A
A
A
So
so,
basically,
this
function
array
is
gonna,
hold
a
a
list
of
functions
and
then,
when
our
action
is
done,
when
our
component
is
destroyed,
we
want
to
map
over
that
array
and
call
all
these
functions.
So
these
are
all
going
to
be
kind
of
our
exit
headlines
and
we're
just
using
one.
But
this
will
give
you
an
idea.
A
Then
the
last
thing
we
need
to
do
is
use
a
template
command
if
we
haven't
used.
If
and
and
it's
a
pretty
easy
one
so
we'll
just
say
if
open
open
is
true,
then
show
the
modal,
otherwise
hide
it
and
we've
got
our
scale.
So
let's
use
our
in
and
out
scale
on
the
actual
card,
so
we're
going
to
do
n
scale
and
out
scale
we're
going
to
set
it
equal
to
a
duration
of
500.
A
A
But
here
well
we'll
do
that
in
a
minute
because
we
may
we
may
not
want
to
do
that
either
way.
But
so,
let's
just
stick
with
this
for
right
now
and
let's
see
it
in
action.
So
so
we've
got
our
modal
component:
let's
go
into
favorites
where
we
want
to
react
to
it
and
we're
going
to
import
our
modal
component
into
favorites.
So
we'll.
A
And
let's
just
go
ahead
and
declare
a
variable
here,
let
open
and
we'll
say
equals
defaults,
and
what
we
want
to
do
is
define
this
modal
on
kind
of
the
main
section.
So
we
can
either
put
it
here
or
put
it
down
at
the
bottom,
but
we
just
want
to
define
it
on
the
root
level.
So
we'll
just
do
modal
and
let's
just
stick
something
in
there.
Hello
world.
B
B
B
A
A
A
A
B
B
A
A
A
Text
on
the
syllabus,
so
just
like
we
used
on
to
bind
with
buttons
and
elements
we
can
use
on
again
on
the
form
and
the
form
has
a
submit
event.
So
we
can
take
the
submit
and
we
can
actually
pass
the
modifier
prevent
default
so
that
we
don't
get
the
default
behavior
of
a
form
which
is
to
make
a
post
to
the
server.
A
And
then
we
can
just
give
it
the
handle,
submit
function
and
then
now,
if
we
typed
on
that
form,
it's
going
to
actually
bubble
up
an
event
to
the
parent
and
the
parent
would
need
to.
You
know,
do
it
on
to
handle
it,
but
we
need
a
way
to
bind
the
value
of
the
input
of
city
to
a
local
variable
and
we've
declared
up
here
city
so
that
we
use
the
bind
directive.
A
Just
like
I
showed
in
the
demo
earlier
today
for
the
value
property
we
just
set
that
to
city
and
that
will
give
us
our
two-way
binding.
So
now,
when
the
submits
hooked,
we
can
get
access
to
the
local
variable
city
and
dispatch
that
to
our
parent
component.
So
that's
that's
our
ad
guy
and
now
and
we
go
back
into
favorites
on
our
ad
component,
we're
going
to
say
on
add
and
then
we're
going
to
add.
A
And
when
that
function
is
called
it's
going
to
give
us
a
bit
and
in
that
event
it's
going
to
have
a
detailed
property.
So
we
can
basically
open
that
object
and
just
get
out
the
detail,
because
that's
all
that
we're
concerned
about
and
on
that
detail
will
be
our
city
node.
So
when
we
call
dispatch
this
object
becomes
the
detail,
object
when
the
custom
event
fires.
So
we
can
grab
that
detail,
and
now
we
have
access
to
the
city.
A
Everything
has
to
be
immutable
right.
So
if
I
was
to
just
do
cities
dot
push,
then
there's
no
way.
That
swell
would
know
that
this
array
changed
so
by
reassigning
it
because
all
the
reactivity
is
geared
towards
the
signing
assignment.
So
by
reassigning
it
that's
going
to
help
spell
be
reactive
and
and
react
to
that
change.
But
then,
when
I
add
that
it's
going
to
tell
this
each
command,
hey,
there's
a
new
item.
I
need
to
pop
that
new
item
in
here
and
add
this
city
card
component.
A
So
that's
something
worth
remembering
is
is
that
you
want
to
treat
all
your
assignments
as
immutable
so
that
you
can
trigger
the
reactivity.
If
you
just
mutate
things,
then
svelt
can't
help
you
and,
and
it's
not
gonna
work,
and
you
know
you're
gonna
get
frustrated.
So
the
last
last
thing
we
want
to
do
is
just
kind
of
close
the
modal
so.
A
A
Update
and
hit
add
and
that
flew
in
and
then,
if
we
click
we
get
the
temperature
of
chicago,
pretty
cool,
go
back
to
favorites
and
it's
gone
and
that's
because
we're
creating
local
state.
If
we
had
our
cities
in
a
store,
then
it
would
remember
that
we
added
the
city.
So
that's
another
assignment.
I
will
pass
to
you
to
figure
out.
A
A
But
unit
testing
on
the
front
end
is
is
kind
of
crazy,
there's
all
kinds
of
ways
to
do
it,
whether
it's
running
some
sort
of
virtual
or
some.
You
know
kind
of
node,
fake,
dom
type
of
thing
or
running
puppeteer
or
other
tools,
and
I
hope
no
one
has
to
use
selenium
anymore
because
that's
just
not
fun,
but
I
was
just
blown
away
by
cyprus
and
the
experience
and
really
want
to.
A
You
know,
encourage
everyone
to
to
check
it
out,
because
cyprus
has
got
this
great
end-to-end
testing
piece
where
you
can
do
integration
tests
and
full
end-to-end
testing
and
just
incredible
tooling.
But
what
glove
has
done
is?
Is
you
know
kind
of
created
this
way
to
do
unit
tests
with
it
and
anyway
it's
it's
definitely
worth
checking
out.
A
There's
a
couple
steps
that
we
have
to
do
to
set
it
up,
but
it's
no
nowhere
near
any
more
complex
than
than
other
things,
and
you
know
just
as
cool,
and
you
know
the
testing
library
is
cool,
but
but
it's
kitchen
sink
like
you're
pulling
all
this
in
and
you
don't
get
into
in
testing.
So
if
you
want
to
build
a
robust
production,
app
you're
going
to
want
end-to-end
testing
on
the
front
end
you're
going
to
want
it
to
test
multiple
browsers,
etc.
A
So
I
really
like
the
ability
of
having
a
powerful
end-to-end
system
like
cyprus,
be
able
to
run
some
unit
tests
and-
and
I
think
more
and
more
as
you
build
with
component
architectures
you're
going
to
want
to
you,
know,
test
more
integrations
and
you
know
do
some
unit
testing
for
things
like
this
ad
dialogue,
for
example.
That's
what
we'll
do
but
but
again
you
know,
I
think
things
are
moving
that
way
and
cyprus
is
definitely
kind
of
paving
the
path
in
that
direction.
A
A
Yeah,
okay
here,
that's
it
so
it'll
come
up
with
a
dialogue
and
it'll
put
some
examples
in
there.
You
can
just
hit
ok
to
that
dialog
and
then
just
close
that
right
now
and
then
what
we're
going
to
do
is
just
for
now
remove
the
integration
examples,
so
we're
going
to
call
the
remove
function
and
just
say
to
do
recursive
enforce
and
we're
going
to
type
cyprus,
integration,
examples
and
we're
just
going
to
get
rid
of
all
of
those
examples.
A
A
A
A
A
Those
are
the
two
lines
we
need
for
that
plugin
and
that's
going
to
you
know,
compile
our
smell
files
into
js
when
the
tests
are
running
and
then
the
next
thing
we
need
to
do
is
in
the
cyprus
json
file.
We
need
to
just
turn
on
experimental
component
testing
and
tell
cyprus
where
our
spec
files
will
be
so
experimental
component
testing
through
and
component
folder
source
and
test
files.
A
So
we're
going
to
name
our
files,
the
name
of
the
component,
dot,
spec
and
then
dot
js,
so
we'll
use
spec.js
and
we're
missing
an
asterisk
okay.
So
this
will
sort
search
recursively
through
all
the
folders
and
then
any
file
that
has
a
spec.js
is
going
to
say:
oh
that's
a
test
file
and
that
that
allows
us
to
put
our
test
side
by
side
to
each
component,
which
is
which
is
a
nice
pattern.
A
That's
why
it's
a
unit
test.
We
just
want
to
test
that
specific
component
and
we'll
pass
it
everything
it
needs
so
that
we
can
verify
that
it's
working.
So
in
this
add
spec
file.
The
first
thing
we
need
to
do
is
import
the
component.
We
want
to
test
so
we're
going
to
want
to
test,
add
and
we'll
pull
that
from
add.spelt
and
then
the
second
thing
we
want
to
do
is
import.
This
mount
function
from
the
cypress
svelt
unit,
test
library.
B
A
B
A
A
And
then
we
want
to
mount
our
component
so
we're
going
to
mount
the
add
component
and
then
we
can
do
some
stuff
using
the
cypress
command,
so
use
psi
and
we
can
get
like,
and
this
is
like
a
selector
and
we
can
say
you
know
what
we
want
to
get
the
input
element
and
then
we're
going
to
in
that
input
type.
You
know
boston
massachusetts
and
then
let's
get
the
button.
A
A
That's
so
cool,
so
we've
got
that,
but
but
we're
really
not
fully
testing
the
happy
path
right
because
we
need
to
you
know
it
the
add
component
dispatches
this
add
function.
So
what
we
want
to
do
is
capture
that
and
with
the
unit
test,
when
we
mount,
we
can
pass
props
or
we
can
pass
callback.
So
we
pass
this
options,
object
and
we're
going
to
pass
callbacks
to
the
component
and
the
one
callback
is
the
custom
event
ad.
A
We
want
to
capture
that
and
then
we're
going
to
stub
it
out
as
at
and
what
that
does
is
that
allows
us
to
reference
it
in
our
test
block
here.
So
we
can
say
side.get
and
say
at
add:
that's
going
to
get
that
event
and
we
can
do
our
assertion.
So
we
can
say
you
know
this
should
be
called
and
it's
first
call
args
index
zero
detail.
So
that's
the
custom
event
right.
So,
on
the
first
call
the
arguments,
the
first
one:
zero
position,
zero.
It's
detail.
A
A
Equal
city,
boston,
m.a,
okay,
so
that's
our
assertion
right.
So
we
set
the
input
and
we
click
the
button.
And
then
we
make
an
assertion
to
confirm
that
our
unit
pass
unit
test
is
passing
at
the
happy
path.
So
once
we
run
this
and
should
get
to
get
successful
because
we
you
know,
we
know
it's,
it's
working,
that's
really
cool!
You
can
hook
in.
A
And
it
should
fill
now,
maybe
you're,
working
on
components
where
you
don't
just
have
one
input
and
you
don't
just
have
one
button.
So
this
get
works
like
a
selector.
So
you
can,
you
know,
go
in
your
component
and
we
got
an
id
of
input,
an
id
of
city
in
our
input.
So
we
can,
you
know,
use
like
a
css
selector
and
do
pound
input,
so
you
can
see
that
it
failed
below
there.
So
we
could
say
city
right
and
it
would
find
that
and
the
same
thing
with
button.
A
Why
cyprus,
in
a
nutshell-
and
it
goes
through
all
the
commands
that
you
can
do
with
cypress
and
it
uses
tools
in
the
gis
ecosystem
or
apis
like
anything
from
mocha
or
cyan
or
chai,
so
you
can
get
very
clear
and
descriptive
kind
of
assertions
in
there
that
that
read
almost
like,
like
english.
So
that's
that's,
really
cool
all
right.
So
that's
the
final
checkpoint.