It's been a while since we've been able to execute any code inside of our preview window, so I want
to point out some little issue that came up as you're starting to put together that preview window,
especially around how we are actually executing our code inside there.
So inside of my code editor, I can replace that const A equals one with a const root is document query
selector.
Ound route to remember inside of our default HTML that is being displayed inside of our iFrame, there
is a Div with an idea of route and we put that in there just so our user would have some kind of target
element that they could render content into very easily.
I'm going to put in a root dot in our HTML and then assigned to it whatever string I want.
And when you do so, you might notice that when your code gets executed, you can see ASDF appear for
a fraction of a second in some cases.
So I'm seeing it up here and then immediately disappear.
So what's going on here?
Well, let's go back over to our preview window and figure out what is happening.
OK, I'm going to find my preview file inside of here, you might recall we have a U.S. effect function
inside the component and inside there we update the source of the iFrame and then we immediately post
a message into the iFrame.
Right now, when we put some content into that iFrame, we are not giving it enough time to sometimes
initialize and actually set up this event listener to start watching for messages.
So right now when we set the source dock and then immediately post a message, it is actually the current
HTML document.
In other words, the previous one that was in the iFrame that is receiving the message and processing
our code.
Then a half second later, essentially a very small fraction of a second later, all the current content
of the window is updated or replaced with the previous line of code.
So that's exactly what the inside of our browser right now.
If I put in some content to run, I see the update because we are posting a message into the current
version or the current content side, the iFrame, and then a millisecond later the browser then replaces
the content in the iFrame and everything inside there goes away.
So to fix this up, we can arbitrarily delay our post message right here so we can wrap that with a
set time out.
And then move our post message inside there and then put on a very small time out on this thing, something
like maybe 50 milliseconds or so, that's just going to make sure that our browser has enough time to
update the source stock and set up a message listener inside there or really an event listener inside
there and watch for our post message attempt that's going to come about 50 milliseconds later.
This 50 milliseconds is not going to have any negative impact on our user experience whatsoever.
They're not going to notice that it is incredibly short and it's really just going to be kind of baked
into the code execution or the code bundling time anyways.
So now if we go back over.
And I copy my code, I'm going to copy what's inside my editor right now, do a quick refresh.
And then paste what I had before.
Now we'll see our content staying inside there.
Perfect.
That's exactly what we want.
OK, so like I said, just a little thing, we had to go back and fix up now that we can more easily
run our code and see the results.
So let's take another pause right here.
There is one or two other very small improvements I want to make around code execution before we move
on.