1
00:00:00,870 --> 00:00:04,590
Our applications looking great, but there is one last little problem I want to show you before we move

2
00:00:04,590 --> 00:00:04,860
on.

3
00:00:05,280 --> 00:00:09,720
Let me first give you a quick demonstration of what is not quite right and we'll figure out a way to

4
00:00:09,720 --> 00:00:10,170
fix it.

5
00:00:10,620 --> 00:00:14,640
So to help you understand what is wrong right now, I'm going to go to my element tab.

6
00:00:14,810 --> 00:00:18,990
I'm going to do my element, inspector, and then take a look at the iFrame.

7
00:00:19,620 --> 00:00:26,040
So here's the HTML document inside the iFrame, I'm going to expand html expand body and there is that

8
00:00:26,040 --> 00:00:27,780
div with ID root right there.

9
00:00:28,710 --> 00:00:33,720
So remember, we put that element in there just for utility purposes for our users, just so they would

10
00:00:33,720 --> 00:00:38,130
have a place to render something like a react element or whatever else they want to show inside the

11
00:00:38,130 --> 00:00:38,490
dome.

12
00:00:39,280 --> 00:00:44,700
So now here's a little problem, something that I want you to see that is entirely possible to happen

13
00:00:44,700 --> 00:00:45,650
in the real world.

14
00:00:46,170 --> 00:00:51,630
Let's imagine for a second that a user, for whatever crazy reason, who knows why does something like

15
00:00:51,630 --> 00:00:55,790
document autobody in our HTML is empty string.

16
00:00:56,520 --> 00:01:01,880
If I run that, that is going to delete everything inside of the body element inside of our iFrame.

17
00:01:02,430 --> 00:01:07,530
Let's imagine that the user runs that code right there and then they say for whatever reason, oh that's

18
00:01:07,530 --> 00:01:13,230
not what I meant to write, what I meant to write something that would create a react component and

19
00:01:13,230 --> 00:01:15,690
then show that inside that did with its root.

20
00:01:16,460 --> 00:01:19,350
Let's imagine the user then runs this code right here.

21
00:01:19,900 --> 00:01:21,840
So we're going to take this code as usual.

22
00:01:21,840 --> 00:01:24,990
We're going to transpire, bundle, push it down into that iframe.

23
00:01:25,470 --> 00:01:26,430
Let's try that right now.

24
00:01:26,430 --> 00:01:30,900
A click on submit and if I open up my console, I'll see a nasty error message.

25
00:01:30,900 --> 00:01:34,270
Cannot set property in HTML of No.

26
00:01:35,040 --> 00:01:36,720
So what is going on here.

27
00:01:38,110 --> 00:01:43,390
Well, right now, whenever we submit our code, whenever we bundle it and push this code into the iFrame,

28
00:01:43,660 --> 00:01:48,120
we are not resetting the contents of the frames HTML document.

29
00:01:48,730 --> 00:01:55,090
So whenever we execute code, we are reusing the exact same HTML structure as the last one.

30
00:01:55,510 --> 00:02:02,140
So when I ran this code right here, there is no document or no div inside there with an idea of root

31
00:02:02,380 --> 00:02:04,500
because I deleted it during the previous run.

32
00:02:05,080 --> 00:02:11,860
This is not at all how just about any kind of online code execution tool works instead just about every

33
00:02:11,860 --> 00:02:13,410
single code execution tool out there.

34
00:02:13,630 --> 00:02:20,200
Make sure that after running your code, before executing it again, after you make some change or whatever

35
00:02:20,200 --> 00:02:24,520
else before Acción, your code again, it resets the entire HTML document.

36
00:02:24,760 --> 00:02:26,530
It dumps all global variables.

37
00:02:26,920 --> 00:02:30,060
It dumps anything tied or any properties you tied to window.

38
00:02:30,100 --> 00:02:33,920
Essentially, it's equivalent to a full refresh of the contents of that iFrame.

39
00:02:34,630 --> 00:02:36,420
So we need to make sure that we do something very similar.

40
00:02:36,580 --> 00:02:40,990
We need to make sure that maybe right before we try to execute a user's code.

41
00:02:40,990 --> 00:02:41,500
Some other words.

42
00:02:41,500 --> 00:02:46,180
Right when they click on submit right there, we need to somehow reload this entire iFrame and make

43
00:02:46,180 --> 00:02:52,090
sure that we get some fresh HTML inside there so that a user is going to always have a very consistent

44
00:02:52,090 --> 00:02:56,830
environment and to make sure that we don't get any kind of leakage of variables or state or anything

45
00:02:56,830 --> 00:02:59,410
like that between different executions of their code.

46
00:03:00,390 --> 00:03:05,700
OK, so that's a little thing we need to fix the last little thing around code execution, let's figure

47
00:03:05,700 --> 00:03:07,680
out some kind of solution for this in the next video.