►
From YouTube: PWA Studio Community Sync 23 Oct, 2020
Description
Topics this week include: new documentation for extensibility, demo of the the new Targetables API, and MageCONF 2020.
A
All
right
welcome,
welcome,
welcome
it
is
october
23rd
2020.
I
think
it's
been
300
days
since
I've
had
a
haircut
and
today
is
pwa
community
sync.
We
have
a
a
relatively
light
agenda,
but
I
think
it's
with
enough
effort.
We
can
consume
all
of
the
time
with
these
two
amazing
topics,
so
let's
go
ahead
and
just
dive
right
into
the
demos
and
then
I'll
do
all
the
fun
metrics
stuff
and
then
we'll
talk
about
the
contribution
day.
B
B
B
How
do
you
yeah
how
to
intercept
the
target?
Just
in
general
goes
over
what
you
know
intercept
file.
Is
you
know
the
name
and
location
and
just
a
high
level
overview
of
how
the
interception
process
works,
and
you
know
what
order
it's
in
more
interesting
topic?
Is
this
this
tutorial
on
how
to
modify
a
tongue
results
which
is
a
deeper
dive
in
how
to
intercept
a
specific
talon
in
this
tutorial?
It's
the
use
product,
full
detail,
talent,
and
I
can
wrap
that
function.
Call
with
your
own
logic.
B
I
provide
you,
know
specific
code
samples
for
each
step
of
this.
In
this
tutorial
you
know
even
what
the
package.json
file
is,
what
this
the
tutorial
actually
does.
Is
it
teaches
you
how
to
create
an
extension
that
you
can
install
local
on
a
local,
in
instance,
of
your
storefront
project,
so
yeah?
I
provide
you
know
the
code
samples
and
you
know
some
explanation
what
the
code
actually
does.
You
know
if.
B
Yeah
define
intercept
file,
make
a
data
fetch
hook.
You
know
all
the
steps
are
here
with
explanations
and
then
at
the
bottom
instructions
how
to
test
on
local
instance
of
your
storefront.
The
other
one
I
wanted
to
present
was
an
in-progress
tutorial
that
I'm
currently
working
on,
and
it's
on
how
to
add
a
new
environment
variable.
This
has
been
something
that
the
community
has
been
asking
for
on.
B
You
know
how
to
actually
get
a
value
that
you
set
in
your
env
file
into
a
front
end
component,
a
react
component,
and
this
tutorial
does
that
it
follows
the
same
kind
of
pattern
as
the
modified
talon
results,
one
yeah
it
gives
you
all
the
the
source
code
that
you
need
in
your
project.
Some
explanations
for
this
tutorial:
it'll
teach
you
how
to
create
a
placeholder
image
component,
which
reads
a
environment
variable
that
you
set
and
just
renders
an
image.
B
B
So
yes,
so
I
go
over
the
steps
on
how
to
export
it
from
the
package
and
then
intercept
the
intercept
file.
The
interesting
thing
about
this
tutorial
is
at
the
bottom.
You
can
actually
check
out
the
full
solution
in
code,
sandbox
and
you'll
see
that
loads
you'll
see
the
structure
that
I
defined
that
I
described
in
the
tutorial
with
the
actual
samples
and
you
can
actually
navigate
to.
B
The
demo
page
that
the
tutorial
explains
on
how
to
create
and
you'll
see
the
solar
image
here
and
right
now,
it's
getting
it
from
this
source,
which
is
defined
in
this
environment.
Variable
I've
also
provided
other
values
that
you
can
play
around
with,
since
it's
a
code
sandbox,
you
can,
you
know,
fork
this
and
then
replace
this
and
restart
the
server.
B
The
one
thing
I
do
want
to
note
is
the
code.
Sandbox
uses
an
iframe
to
render
venue,
and
since
we
send
specific
security
headers,
you
won't
be
able
able
to
access
certain
pages
like,
for
example,
this
doesn't
work.
But
how?
But,
if
you
open
it
up
in
a
new
window
like
this,
it
will
it'll.
It
works
fine,
so
yeah
whoops.
A
B
A
B
Be
on
the
lookout
for
this
next
week.
I
think
it's
when
we'll
be
able
to
publish
it,
it
still
needs
to
be
reviewed
and
all
that
but
yeah.
I
think
this
will
be
a
neat
little
neat
little
tool
for
developers
to
actually
get
their
hands
on
the
code
and
play
around
with
the
tutorial.
You
know
if
they
don't
have
access
to
an
actual
running
instance
of
venue
and
also
just
a
demo
in
general.
A
B
And
then
you
got
your
phil
murray
now
yep
there
you
go
still
murray,
see,
and
then
you
know
there
it
is
but
yeah
you
can
either
look
for
the
pr
or
branch
that
I'm
working
on.
If
you
want
to
really
access
it
right
now,
because
this
goes
sandbox
is
live
yeah
this
the
content
just
has
to
be
reviewed
but
yeah,
that's
all
on
my
end,.
A
C
Sure
yeah,
it
should
be
interesting,
so
I
know
some
of
you
tend
to
look
around
the
open,
pr's
and
see
what
interesting
things
are
coming
down
the
pipe.
So
you
may
have
seen
this
one,
but
I'm
going
to
show
it
off
in
action.
This
is
the
new
targetables
api,
which
is
essentially
a
new
layer
on
top
of
the
existing
targets.
Api
that
we
already
have-
and
the
goal
of
this
is
to
add
a
lot
more
power
and
move
the
apis
a
lot
higher
level.
C
But
in
the
meantime,
if
you
have
a
scaffolded
app
and
you
want
to
make
changes
without
having
to
copy
over
the
source
code
of
a
bunch
of
files
like
you
currently
have
to,
then
this
is
going
to
be
a
lot
better.
So
what
we're
going
to
do
here?
What
I'm
going
to
show
is
how
to
take
a
single
component
such
as
our
select
list
and
replace
it
with
another
one
through
extension,
so
this
is
develop
up
here.
C
Then
see
that
we're
in
the
select
component
here,
so
this
is
the
country
component
and
inside
of
that
we've
got
our
select
component,
which
is
wrapped
with
a
couple
of
hscs,
but
essentially
our
select
component
just
takes
in
what
field
it
is
so
that
it
can
participate
in
the
form
context
and
it
gets
the
api
for
a
field.
It
gets
the
state
of
the
field,
the
ref,
but
most
importantly
here,
we've
got
the
items.
These
are
all
these
are
all
the
states.
C
C
C
So
if
we
were
to
replace
this
component
with
something
like
react,
select
which
is
a
popular
non-default
select
list
write
a
javascript
drop
down
then,
where
we
would
do
that
is
right
here.
We
would
probably
want
to
say,
cut
out
the
field,
icons
and
all
its
children
here
and
put
in
react
select,
and
then
we
would
probably
have
to
do
some
sort
of
thin
mapping
of
the
props
and
state
that
we
have,
on
our
own
end
to
the
exact
props
that
react
select,
expects
for
its
component.
C
It'll
open
up
some
methods,
just
because
it's
a
module
but
it'll
also
allow
us
to
start
manipulating
the
jsx
directly,
adding
imports
and
performing
all
of
these
different
operations,
such
as
appending,
jsx
elements,
prepending
them
inserting.
Before
and
after
removing
a
jsx
node,
replacing
a
jsx
not
even
surrounding
one
or
editing
the
individual
props
of
the
jsx
net.
C
And
I'm
going
to
target
a
particular
file
in
veneer
ui,
in
this
case
the
select
the
select
component
that
we
saw
these
targets
targetables.react
component.
That's
going
to
give
me
these
methods
we
just
looked
through
and
then
I'm
going
to
add
an
import
to
that
file
with
this
string
here
that
says,
import
fancy
select
from
a
component.
I've
defined
locally
here
called
fancy
solar
and
then
in
my
original
select
file,
I'm
going
to
replace
all
instances
of
jsx
that
match
this
string
here.
Field
icons
with
the
second
argument
here,
which
is.
C
C
And
then
using
the
binding,
we
got
back
from
ad
import,
that's
the
type
of
element
we'll
render,
and
that
should
do
the
exact
operation
that
we
were
just
asking
for
so
come
in
here.
Look
at
what
fancy
select
is
this.
Is
that
thin
mapping
between
the
file
as
we
implemented
it
in
select
and
what
react
select
is
going
to
expect
here
so
we're
basically
just
taking
in
the
props
that
I
just
gave
it
and
we're
going
to
do
some
wiring
up
of
the
change
in
the
blur
handlers
and
whatever
else.
C
C
C
So
if
I
strip
out
the
header
here,
even
though
it's
imported
in
this
file,
if
I
don't
actually
render
header,
because
my
my
targetable
call-
has
removed
and
replaced
it
with
something
else,
it's
not
actually
going
to
import
header.
Even
though
this
statement
is
here,
it's
actually
going
to
discard
it
from
the
bundle
and
not
serve
it
until
it's
imported
and
actually
used
somewhere
else.
C
C
A
A
Like
that,
that's
the
demo
right
there,
but
that
was
really
impressive.
I
think
anybody
with
a
scaffold
adapt,
probably
it's
much
clearer,
now
kind
of
what
what
the
vision
is
like
what
it
means
that
vinnie,
a
concept
is
like
a
template
and
you
kind
of
build,
build
upon
it
from
there
all
right.
We
got
some
activity
in
the
chat,
less
lines
of
code,
less
overrides
the
better,
so
yeah,
yes
yeah.
This
is
also
yeah,
the
kind
of
first
step
into
like
us,
identifying
targets
as
well
like
this.
A
A
C
A
C
Right,
it's
going
to
be
it's
going
to
be
an
effort
to
try
and
bring
this
to
extensions
because
we
have
to
take
you
know
some
subset
of
this
power
and
expose
it,
but
not
all
of
it,
so
that
we
are
not.
You
know
so
that
we're
not
in
a
place
where
extensions
are
all
just
completely
incompatible
with
one
another
right.
So
we're
definitely
gonna
need
people
dive
in
use
it,
and
you
know,
help
us
out,
get
it
right
for
extensions.
A
Crazy
yep,
but
I
know
lars
has
kind
of
already
taken
the
helm
there
and
he's
taking
a
stab
at
like
payment
methods,
like
that's
a
very
a
very
simple
entry
point
that
probably
every
implementer
will
need
to
access.
So
lars
is
kind
of
like
taking
that
first
step,
helping
us
identify
where
these
extension
points
need
to
live.
We
kind
of
like
all,
have
a
general
idea,
but
like
we
want
to
be
sensitive,
that,
like
every
file
in
the
app
isn't
like
a
target
or
an
interceptor
right.
D
Yeah
from
my
point
of
view,
this
pull
request
makes
things
so
much
easier,
because
I
can,
I
know
how
complex
it
was
before
to
register
a
target,
and
now
I
was
able
in
30
lines
to
add
a
new
target
for
payment
methods
and
move
out
braintree.
Okay,
I
have
one
or
two
things
to
solve
about
tests,
because
now
I
need
to
solve
testing
additionally,
because
there
is
no
payment
method
on
tests,
but
yeah.
This
is
the
thing
what
I
need
to
solve
and
then
I'm
I'm
fine.
D
D
D
A
So
to
round
things
out,
I
will
try
to
return
some
of
your
day
to
you
right
now.
Happening
is
magekov
contribution
day
so
a
24
hour,
not
quite
in
person
like
the
pictures
here,
but
all
virtual
go
and
sign
up
and
register.
I
think
there's
a
hop-in
link
where
some
pwa
studio
folks
will
be
sitting
around
fielding
questions.
A
A
Stories
or
features
that
we
are
willing
to
support
like
meaning.
If
you
have
questions
about
how
to
implement,
we
will
be
there
to
support
you
on
implementation,
details
or
any
questions
you
might
have,
and
also
just
that,
it's
like
a
priority
for
us.
We
we
want.
We
want
high
value
work
to
be
hitting
our
work
stream,
so
we
curated
a
ton
of
work
here.
I
think
some
of
it
I
probably
should
come
in
here
and
maintain
this
a
little
better.
A
A
If
you're
unfamiliar
with
that
process,
you
kind
of
just
come
into
the
ticket.
You
say:
hey,
I'm
working
on
this
and
then
it'll
assign
it
to
you.
You
might
have
to
go
through
some
contribution.
You
have
to
be
added
to
the
contributors
list,
but
that's
really
easy.
It
walks
you
through
that.
So
if
anybody
is
interested
in
picking
up
contribution
day,
work
go
to
our
pwa
studio,
repo
head
into
the
community
backlog
in
the
prioritized
column.
We've
got
labels
in
here,
but
pretty
much.
A
If
there's
anything
in
this
column
that
looks
interesting
or
if
there's
anything
not
in
this
column.
That
looks
interesting
and
you
you
want
to
work
on
it.
Just
ping
ping,
somebody
on
the
pwa
team
and
we'll
make
sure
that
we
we
provide
you
the
support
to
do
that
thing.
You're
interested
in
lars
anything
to
add
about
contribution
day
I've.
It
was
5
a.m.
For
me,
so
I
didn't
quite
jump
on
first
thing
in
the
morning.
No.
D
A
So
yeah
yeah
pick
pick
one
or
two
of
those
24
hours
and
lars
will
probably
be
there,
but
no
it's
good
to
see.
This
is
like
way
more
movement
than
we've
had
on
past
contribution
days,
like
even
just
the
three
people
so
far
in
the
past.
Five
hours
who
have
picked
up
tasks
is
a
huge
win
for
us
already,
so
continue
grinding
away.
If
you
have
any
questions,
the
pwa
team
is
available.
A
Okay,
that's
the
events
and
then
I
kind
of
just
want
to
round
out
with
metrics
I'd.
I
like
to
do
like
a
past.
Let's
do
like
a
year
to
date,
just
so
we
can
put
wires
on
there,
so
lars
is
still
killing
it
year.
To
date,
I'm
sure
his
nice
payment
method,
extensibility
pr,
we'll
we'll
we'll
help
you
like
generate
some
huge
snaps
or
something
mars,
and
you
can.
A
But
this
is
a
year
to
date,
past
30
days
we
is
our
is
killing
it.
So
I
think
we've
gotten
a
bunch
of
prs
from
hui
who
we've
just
been
working
through
again
we're
always
the
bottleneck
just
trying
to
review
things
and
make
sure
that
we
maintain
a
good
level
of
quality
for
all
the
contributions
that
we
get,
but
those
contributions
have
largely
looked
really
awesome,
and
then
we
have
a
couple
kind
of
docs,
pr's
and
stuff
trickle
in
from
brendan
james,
john
and
max.
A
A
Cool
all
right,
so
I
think
that's
all
I
had.
I
should
be
able
to
return
about
15
minutes
to
everybody
really
quick.
Let
me
take
a
peek
at
the
chat,
eric
link
to
you
to
the
hop
in
if
you
want
to
go
check
out
contribution
day,
there's
already
our
first
pr,
maybe
from
lars,
I
might
have
seen
two.
I
think
we
got
two
pr's
already
and
yes
more
lines
removed
than
added
and
hi
andy.
A
Let's
see,
can
we
can
we
actually
see
that
I'm
up
there
all
right,
anyways?
That's
all
I
have.
If
there's
any
questions,
we
are
always
available
in
the
slack.
If
you
want
to
contribute
contribution
days
going
on.
If
you
want
to
contribute
outside
of
contribution
day,
we
are
also
open
to
that.
Just
go
to
the
community
backlog
project
in
our
github
organization
and
you
can
find
work
there
that
is
groomed
and
ready
to
go
all
right.
Well,
that
is
all
I
have
onwards
and
upwards
smash
like
and
subscribe
honk.