1
00:00:00,620 --> 00:00:04,490
It's been a while since we've been able to execute any code inside of our preview window, so I want

2
00:00:04,490 --> 00:00:09,050
to point out some little issue that came up as you're starting to put together that preview window,

3
00:00:09,140 --> 00:00:12,160
especially around how we are actually executing our code inside there.

4
00:00:12,680 --> 00:00:20,870
So inside of my code editor, I can replace that const A equals one with a const root is document query

5
00:00:20,870 --> 00:00:21,440
selector.

6
00:00:23,390 --> 00:00:29,390
Ound route to remember inside of our default HTML that is being displayed inside of our iFrame, there

7
00:00:29,390 --> 00:00:34,400
is a Div with an idea of route and we put that in there just so our user would have some kind of target

8
00:00:34,400 --> 00:00:36,920
element that they could render content into very easily.

9
00:00:37,550 --> 00:00:43,010
I'm going to put in a root dot in our HTML and then assigned to it whatever string I want.

10
00:00:43,580 --> 00:00:48,800
And when you do so, you might notice that when your code gets executed, you can see ASDF appear for

11
00:00:48,800 --> 00:00:51,050
a fraction of a second in some cases.

12
00:00:51,600 --> 00:00:54,450
So I'm seeing it up here and then immediately disappear.

13
00:00:54,980 --> 00:00:55,910
So what's going on here?

14
00:00:56,360 --> 00:00:59,330
Well, let's go back over to our preview window and figure out what is happening.

15
00:01:00,970 --> 00:01:06,220
OK, I'm going to find my preview file inside of here, you might recall we have a U.S. effect function

16
00:01:06,220 --> 00:01:12,940
inside the component and inside there we update the source of the iFrame and then we immediately post

17
00:01:12,940 --> 00:01:14,260
a message into the iFrame.

18
00:01:14,770 --> 00:01:19,750
Right now, when we put some content into that iFrame, we are not giving it enough time to sometimes

19
00:01:19,750 --> 00:01:24,280
initialize and actually set up this event listener to start watching for messages.

20
00:01:24,700 --> 00:01:30,190
So right now when we set the source dock and then immediately post a message, it is actually the current

21
00:01:30,190 --> 00:01:31,210
HTML document.

22
00:01:31,220 --> 00:01:35,860
In other words, the previous one that was in the iFrame that is receiving the message and processing

23
00:01:35,860 --> 00:01:36,370
our code.

24
00:01:36,820 --> 00:01:42,310
Then a half second later, essentially a very small fraction of a second later, all the current content

25
00:01:42,310 --> 00:01:46,560
of the window is updated or replaced with the previous line of code.

26
00:01:47,260 --> 00:01:49,320
So that's exactly what the inside of our browser right now.

27
00:01:49,750 --> 00:01:54,790
If I put in some content to run, I see the update because we are posting a message into the current

28
00:01:54,790 --> 00:02:00,220
version or the current content side, the iFrame, and then a millisecond later the browser then replaces

29
00:02:00,220 --> 00:02:03,070
the content in the iFrame and everything inside there goes away.

30
00:02:03,790 --> 00:02:10,060
So to fix this up, we can arbitrarily delay our post message right here so we can wrap that with a

31
00:02:10,090 --> 00:02:10,870
set time out.

32
00:02:13,420 --> 00:02:19,150
And then move our post message inside there and then put on a very small time out on this thing, something

33
00:02:19,150 --> 00:02:24,220
like maybe 50 milliseconds or so, that's just going to make sure that our browser has enough time to

34
00:02:24,220 --> 00:02:28,900
update the source stock and set up a message listener inside there or really an event listener inside

35
00:02:28,900 --> 00:02:33,640
there and watch for our post message attempt that's going to come about 50 milliseconds later.

36
00:02:34,270 --> 00:02:39,250
This 50 milliseconds is not going to have any negative impact on our user experience whatsoever.

37
00:02:39,430 --> 00:02:43,000
They're not going to notice that it is incredibly short and it's really just going to be kind of baked

38
00:02:43,000 --> 00:02:46,590
into the code execution or the code bundling time anyways.

39
00:02:47,570 --> 00:02:48,660
So now if we go back over.

40
00:02:49,530 --> 00:02:53,940
And I copy my code, I'm going to copy what's inside my editor right now, do a quick refresh.

41
00:02:54,810 --> 00:02:56,310
And then paste what I had before.

42
00:02:56,440 --> 00:02:58,860
Now we'll see our content staying inside there.

43
00:02:59,790 --> 00:03:00,260
Perfect.

44
00:03:00,660 --> 00:03:01,890
That's exactly what we want.

45
00:03:03,000 --> 00:03:06,990
OK, so like I said, just a little thing, we had to go back and fix up now that we can more easily

46
00:03:06,990 --> 00:03:08,630
run our code and see the results.

47
00:03:09,210 --> 00:03:10,440
So let's take another pause right here.

48
00:03:10,470 --> 00:03:15,570
There is one or two other very small improvements I want to make around code execution before we move

49
00:03:15,570 --> 00:03:15,840
on.