►
Description
In this session we dive into reimplementing BrowserFS's OverlayFS for the Web IDE Remake.
A
Is
it
a
remaster?
Is
that
what
they
would
call
it
in
video
games
land?
It's
not
a
remaster,
because
it's
more
than
that,
it's
a
remake!
It's
a
remake
of
the
web
ID
using
vs
code
as
the
main
engine,
and
so
that's
really
exciting,
but
there's
parts
that
we
get
to
touch,
namely
creating
an
in-memory
file
system,
creating
in-memory,
Source
control
and
so
I
have
gone
down
this
route
and
discovered
an
issue
with
our
existing
file
system
implementation.
A
So,
thankfully,
the
third
party
module
that
we
were
using
isn't
doing
a
whole
lot
and
so
we're
just
gonna
copy
over
that
module
and
implement
it
ourselves,
potentially
in
a
in
a
nicer
way,
because
there
were
some
the
code
that
that
third
party
was
using
was
a
little
dated.
I
had
callbacks
everywhere,
so
we
could
make
I
know
my
internet's
a
little
laggy.
We
can
make
things
nicer
by
using
promises
and
hopefully
not
run
into
issues.
So
let
me
share
my
screen.
Hopefully
the
internet
stops
being
a
little
wonky.
B
A
All
right,
let's
try
it
out
so
there's
an
interesting
situation
here
with
the
BS
code
web
ID
and
this
path
that
we've
gone
down
to
implement
both
in-memory
file
system
and
keeping
track
of
changes.
It's
not
just
keeping
track
of
changes.
We
want
to
be
able
to
calculate
changes
at
any
time.
We
want
to
get
a
correct
calculation
of
what
has
actually
changed
since
when
you
first
opened
this
up
and
we
came
across
this
really
neat.
A
A
They
have
a
lot
of
different,
though
like
file
systems
like
they,
they
provide
an
in-memory
file
system.
They
provide
a
file
system
that
can
communicate
over
different
protocols
or
whatever,
but
they
also
provide
this
one
file
system
called
overlay,
FS
or
overlay
file
system
and
I
hadn't
heard
of
this
before.
A
A
That
would
be
cool,
I
I
don't
know.
So
it
is
interesting
to
see
like
how
this
is.
This
is
referenced.
A
lot
in
the
wild
I
think
part
of
it
foreign
part
of
the
reason
why
this
gets
referenced.
A
lot
is
because
it's
a
pretty
mature
and
sophisticated
implementation
of
nodes
file
system
API,
which
is
nice.
A
The
things
that
it's
not
nice
is
that
no
there's
not
a
lot
of
activity.
You
can
see
the
last
commit
was
a
while
ago,
so,
but
but
then
like
one,
could
one
could
question
of
well?
Is
there
not
a
lot
of
activity,
because
is
there
not
a
lot
of
activity
because
hey
we
implemented
the
API,
we're
done
or
is
there
normal
activity
because
I
don't
know-
or
maybe
there
is
more
stuff
to
do?
I
clearly
ran
into
some
bugs
we're
only
using
like
a
subset
of
this.
A
This
Library
so
like
maybe
down
the
road.
We
don't
even
need
it
right
now
we're
not
we're
trying
to
push
out
our
first
iteration.
We
have
a
timeline
that
we're
trying
to
push
this
first
iteration
forward.
So
we're
not
super
eager
on
changing
a
lot
of
things.
So
definitely
someone
eventually
maybe
will
move
away
from
browser.
A
A
Does
that
sound
fun
I've
already
done
a
number
of
these.
We
also
already
have
some
tests
for
this,
so
we
have
like
some
integration
tests
for
all
of
this,
too,
of
like
hey,
interacting
with
the
main
file
system,
we're
using
I
would
expect
you
know
these
things
to
change,
so
we
don't
have
unit
tests
for
this
new
unit
that
I'm
introducing,
but
we
do
have
some
like
unit
some
tests
for
some
of
these
things
in
integration,
which
is
nice
as
well.
A
A
And
so
a
lot
of
these
functions
kind
of
looking
at
what
was
the
business
Logic,
the
previous
the
third
party
library,
was
trying
to
do
here,
and
how
can
we
recreate
that?
But
with
rename
specifically,
that
was
one
of
the
buggy
scenarios
that
I
think
we
have
to
do
with
something
somewhat
different
and
I've
already
started
on
it.
A
I
do
want
to
ask
your
all
opinion
on
one
other
thing,
so
this
is
all
very
much
inspired
from
the
original
implementation
of
this
thing,
so
this
module
is
very
similar,
we're
exporting
a
class
which
extends
their
locked
file
system
thing.
This
is
all
browser
at
best
stuff
which
turns
on
locks
when
you're
making
operations
or
whatever.
A
But
then
they
have
this
like
internal
class,
which
is
actually
doing
the
main
implementation.
But
this
is
the
old
school
node
file
system
API,
so
everything
works
off
of
callbacks
and
it's
just
man,
it's
so
gnarly
I,
don't
want
to
work
with
bottlebacks,
so
I
took
this
pattern
and
this
pattern
feels
somewhat
somewhat
natural
to
me.
Dealing
with
you
know,
having
some
experience
with
like
languages
like
C,
plus,
where
often
like
implementation
and
headers
are
like
separated,
so
I
put
in
a
totally
separate
class.
A
A
I,
don't
think
this
is
the
first.
This
is
not
the
first
time
we
use
typescript,
but
the
other
one
of
the
other
more
prominent
places
we're
using
typescript
is
in
the
vs
code
extension,
our
official
gitlab
vs
code
extension
vs
code
typescript
and
we're
interfacing
with
all
these
we're
interfacing
with
deeply
with
the
vs
code
Library.
A
It
just
gets
so
much
benefit
using
typescript,
because
these
are
all
typed,
and
so
that's
that's
been
for
this
specific
problem,
especially
because
we're
not
a
lot
of
this
is
that
I
hate
this
term.
But
back
of
the
front
end
thing,
typescript
has
been
really
appropriate
and
helpful,
so
yeah
yeah
we're
in
typescript
land.
So
it's
kind
of
fun.
Have
you
have
you
done
typescript
before.
B
A
Okay,
yeah
well,
yeah,
that's
where
all
these
red
lines
are
coming
from
too
all
besides
also
just
having
errors
is
sometimes
these
aren't
I'm
not
adhering
to
the
types
which
is
great,
so
I
can
just
get
to
resolve
these
errors.
So,
let's
see,
let's
see
what
it's
like
thanks
for
thanks
for
helping
me
with
my
work.
A
A
A
If
it's
a
file
and
it
it
exists
in
readable
or
it
does
exist
in
writable
and
in
readable,
then
we
can
still
just
rename
the
writable
one,
but
we
do
need
to
make
sure
that
we've
marked
as
deleted
the
readable
one,
and
so
we
have
internal
methods
for
doing
this,
where
we
can
Mark
things
as
a
lead.
So
that's
where
here
we're
marking
as
deleted
the
old
path
for
the
readable
system.
A
So
this
this
thing
we've
we've
handled.
That's
great
this
one.
If
it
doesn't
exist
in
writable
yet
and
it
does
exist
in
readable
and
it's
a
file,
we
need
to
basically
create
a
new
file
on
the
writable
system,
with
the
readables
content
and
stuff
and
still
mark
it
as
the
leader.
So
that's
where
this,
if
condition,
is
basically
trying
to
implement
these
different
paths
but
marking
as
deleted
is
what
needs
to
happen?
No
matter
what
but
write
file.
A
I
I
need
more
arguments,
because
I
need
to
also
read
the
content,
so
I
think
I'm
going
to
I
need
to
get
the
content
from
the
readable
file
yeah.
Let
me
read
the
file
the
old
pass
and
we
won't
pass
an
encoding
there's
a
thing
where
I
can
say
where
these
file
flags
are
like
how
I'm
opening
the
file?
It's
weird,
the
weird
file
system,
API
stuff.
This
is
stuff
Beyond,
My,
Control,.
A
Can
that's
yes,
yes
and
I
can
actually
do
this.
I
can
so
here's
the
other
interesting
thing
since
the
original
file
system
is
read,
only
I
need
to
make
it
a
writable
mode
which
we
actually
have.
We
have
a
function
for
this
is
lovingly
borrowed
from
the
that's
lovingly
borrowed
from
the
original
implementation
to
great
cool.
A
So
this
we've
we've
completed
this
block.
The
last
block
which
we
have
not
completed
is
that
these
are
directories
and
we're
renaming
that's
where
things
get
next
level,
but
let's
see
if
we
can
get
our
feedback
loop
going,
that's
be
great,
but
I'm
still
not
able
to
run
anything
yet
because
here
I
have
this
open
method
which
I
haven't
implemented,
I'm,
not
entirely
sure
what
this
open
method
needs
to
do,
I'm
pretty
sure
this
is
going
to
be
way
easier
than
the
rename.
A
B
A
A
B
B
B
C
A
B
A
So,
honestly,
those
like,
if
something
isn't
making
sense
like
that's,
really
good
feedback,
I,
really
want
it's
right
now.
The
strategy
is
so
right
now
the
task
at
hand
is
this
method
which
this
is
the
old
implementation,
and
you
can
see
the
Callback
stuff
and
we
got
you
know
some
switching
happening.
B
B
A
You
know
the
command
palette,
extensions
down
the
line,
so
much
usability
lens.
On
top
of
that,
the
abstraction
that
it
requires
of,
like
reading
from
a
file
system
is
and
reading
from
a
source
control
provider
is,
is
gonna,
be
miles
more
reliable
than
what
we
currently
have
in
the
web
ID
because
of
the
web
ID.
A
We
we've
built
this
in-memory
file
system
as
a
glorious
map
of
path
to
it's,
either
a
tree
or
a
blob
and
there's
a
lot
of
duplicated
data
there
and
we
keep
track
of
our
changes,
which
is
causes
lots
of
lots
of
weird
quirks
when
someone
like
creates
a
new
direct
new
directory,
renames
it
and
then
like
deletes
it.
The
renames
and
old
things
are
there.
Keeping
track
of
those
changes
is
a
really
hard
problem,
as
opposed
to
calculating
the
change
between
your
old
and
new
file
system.
A
C
A
Nelson
well
I
think,
what's
cool
is
adhering
to
this
interface
like
vs
code
has
a
number
of
like
internal
stuff
for
those
kind
of
situations.
So
we
just
kind
of
adhere
to
that
interface
and
provide
what
vs
code
wants
and
we'll
potentially
gets
things
like
that
out
of
the
box.
I
know
for
sure
we
won't
get.
Maybe
the
whole
file
system
change.
A
We
could
like.
We
can
Implement
that,
but
that
level
of
protection,
but
I
do
know
like
out
of
the
box.
It
tries
to
recover
and
protect
your
like
active
file.
If
that
was
open
or
something
which
is
awesome,
which
is
interesting,
there's
there's
still
a
lot
of
growth
that
we
had
here,
so
we're
definitely
in
the
first
iteration
phase,
but
there's
so
much
promise.
It
is
quite
an
enjoyable
experience
using
it
so
far,
but
clearly
we're
still
implementing
it.
So
I'll
try
to
stop
selling
this
on
it.
A
A
B
A
A
A
A
A
A
C
A
A
A
But
I
can
understand
that
I
I
think
it's
probably
better
not
to
optimize
too
early,
so
I'm
fine
with
so
then
I
can
just
return
yeah.
We
can
just
return
I,
guess
right.
It
will
open
there's
no
callbacks
yay
great.
So
then,
if
we're
not
creating
a
file,
oh
wait,
but
this
is
if
it
now
exists,
yeah,
that's
how
buds
get
introduced.
A
A
A
C
A
Cool
to
see
I
don't
know,
but
then
also
like
variable
decorations.
Inside
of
these
can
I
I,
don't
think
variable
decorations
are
scoped
within
a
case
I
think
they
they
kind
of
complete
the
whole
block
as
well
I'm
going
to
translate
I'm
going
to
transform
it
to
an
if,
because
I
just.
This
is
a
lot
of
body
for
I'm.
C
A
C
A
A
A
C
A
A
C
A
A
B
A
B
I'm
I'm
not
not
expert
enough
as
I'd
like
to
be,
and
the
the
stuff
that
I've
been
working
on
in
the
past
is
quite
dated
so
like
running
on
Android,
four
five,
that
kind
of
thing
so
quite
old
audience
of
java
and
it
doesn't
support
like
xamarin
or
kotlin
or
or
all
the
things
that
would
make
my
life
a
lot
easier.
Yeah,
yeah,
hey.
A
B
B
Like
the
original,
like
Visual
Basic,
six
I
think
it
got
up
to
before.
It
then
went
to
visual
basic.net
and
then
you
kind
of
had
your
C
sharp
and
VB
different
sort
of
flavors
I.
Guess
if
that's
the
right
term
and
you
used
to
have
the
immediate
window
and
the
immediate
window,
you
could
could
do
that
kind
of
eyebrows.
B
A
A
A
C
B
A
A
A
Okay,
it
looks
like
they're
doing
something
to
to
update
its
size,
so
stats
not
size.
How
interesting
I
guess
negative
one
then
they're
going
to
update
the
size.
I
look
at
see.
This
is
also
an
issue
with
their
callback
approach.
Like
look
how
many
of
these
like
exclamation
marks
they
had
to
add.
This
is
like
telling
typescript
forget
the
fact
that
this
thing
can
be
nullable.
A
Okay,
we're
just
following
following
the
thing
here
and
then
they
they
have.
This
thing
called
the
overlay
file.
So
that's
the
one
weird
thing:
let's
see
if
we
can
find
that's
got
to
be
okay,
so
they
just
created
this
thing
called
an
overlay
file
which
implements
their
file
interface,
so
I'm
thinking
I'm
just
going
to
create
a
new,
a
new
class
for
this.
A
A
A
B
A
A
A
A
B
I
I
think
it's
just
like
I
I
realize
that
you're
trying
to
just
kind
of
recreate
you
know
just
I
was
word
adapt
my
gray,
whatever
the
term
is
but
I
struggle
without
the
context
like
I
said,
I,
don't
really
know
what
the
purpose
of
overlap,
what
what
is
an
overlay
for?
What
is
a
preload
file?
What
is
it
so
I.
B
Know
I've
I've
done
something
like
this
before,
where
I
I
thought
that
I
only
needed
to
take
like
a
few
pieces
across
and
I
brought
a
few
pieces
and
I
was
like
that's
not
a
reference
to
this,
and
that's
got
reference
to
these
two
things
and
before
I
knew
it.
I
was
rewriting
the
entire
thing
which
I
didn't
really
intend
to
do,
but
I'm
not
sure
how
far
down
the
rabbit
hole,
you're
intending
or
prepared
or
expecting
to
go.
A
A
A
This
is
just
this
one
module
that
implements
these
interfaces
and
stuff
so
I
want
to
just
instead
of
using
their
module,
which
had
some
issues
we're
gonna
we're
going
to
do
this
ourselves,
which
isn't
you
know,
is
less
than
ideal,
but
it's
just
the
situation
we're
in
and
thankfully
we
can
have
tests
for
this
thing,
and
now
we
have
a
little
bit
more
control
over
it
and
stuff
like
that.
But.
C
A
B
A
And
so
that's
also
one
of
the
things.
One
of
the
approaches
we
take
with
this
pack
with
this
project
too,
is
these
are
the
different
things
that
make
this
all
work
are
sub
packages
awesome
awesome.
It
is
all
in
its
own
package,
which
is
going
to
be
really
powerful
because
we
could
reuse
the
same
file
system
that
would
run
the
web
ID.
It's
the
same
file
system
that
could
run
Snippets
or
any
other
kind
of
in
editing
in
browser
file
system,
editing
experience.
We
could
reuse
these
things
as
well,
which
would
be
really
great.
A
B
B
A
A
This
module
from
the
third
party
and
I
myself
have
just
kind
of
chosen
like
there's
a
lot
here
that
we
don't
need
to
control,
because
we
just
need
to
implement
this
interface
and
so
I'm
not
really
thinking
about
details
too
much,
except
for
the
operations
like
rename
our
buggy.
We,
we
did
have
to
readdress
that,
but
this
has
been
super
helpful
for
me,
so
I
appreciate.
B
A
A
A
A
We
obviously
have
the
feature
flag
off,
but
if
you
wanted
to
locally
turn
on
vs
code,
web
ID
feature
flag,
you,
you
would
see
it,
but
this
is
a
standalone
repository
which
has
been
really
powerful
because
it
lets
us
make,
because
this
is
really
a
standalone
application
that
integrates
with
gitlab
so
right
now,
I'm
in
our
projects,
Pages
website-
and
we
these
are
like
the
parameters
that
really
just
kick
off
the
web.
Id
is
like
hey:
what's
your
project
path
and
ref,
and
there
you
go
yeah
so
and.
A
Anyone
can
see
this
right
now,
and
so
we
have
a
nice
little
modal
saying
that
nice,
but
we
load
it
up
the
file
system.
This
is
using.
This
is
using
the
third
party
overlay
FS,
which
I'm
now
re-implementing.
Thankfully,
there's
like
integration
tests
for
this
stuff,
so
I
feel
a
level
of
like
security
with
that.
So.
A
Yeah,
so
here's
the
situation,
here's
the
situation
is
like,
but
man
there's
so
much
works
out
of
the
box
so
nicely
like
even
loading
images
was
like
knowing
the
history
of
the
web.
Ide
like
this
was
a
situation
of
like
how
do
you
tell
what's
a
binary
file
and,
what's
not
like
don't,
have
to
worry
about
any
stuff,
it's
working
really
nicely
the
one
thing
so
I
have
an
MR
open
to
register
the
source
control,
because
when
we
have
a
separation
between
readable
and
writable
file
systems,
that's
great.
A
A
The
situation
with
overlay
FS
was
a
surprise,
but
what
has
happened
is
if
you're
doing
something
like
a
directory,
rename
it
wasn't
working
and
then,
when
I
fixed,
that,
if
I
did
a
directory,
rename
back
that
wasn't
working
and
I'm
glad
to
have
discovered
that
and
thankfully
it's
just
a
implementation
pivot.
It's
not
like
a
big
architectural
pivot,
but
we
just
have
to
when
I
dug
into
why
it
wasn't
working.
A
It
was
clear
to
me
yeah.
This
is
why
you
don't
write
callback.
How
code,
because
there's
there's
bugs
like
we
called
the
Callback
multiple
times
accidentally
and
like
that,
wasn't
our
code,
that's
the
third
party,
so
I
was
like
all
right.
We
need
to
I,
don't
I,
don't
feel
optimistic
about
this
module,
so
we're
gonna
try
to
do
it
ourselves,
because
it's
not
that
algorithm
is
like
that's
all
it's
doing
and
there's
a
lot
of
operations
are
really
trivial.