1
00:00:01,030 --> 00:00:05,920
Back inside my editor, I'm going to find that HTML string that we had put together to no longer are

2
00:00:05,920 --> 00:00:09,190
we going to just directly try to inject some code into the string.

3
00:00:09,320 --> 00:00:13,780
Instead, we're going to communicate all of our bundled code through that post message thing.

4
00:00:14,410 --> 00:00:15,850
So I'm going to remove that.

5
00:00:16,910 --> 00:00:22,160
I'm going to replace it with a little bit more HTML than what we had before inside this HTML, we're

6
00:00:22,160 --> 00:00:24,530
going to show kind of a skeleton of an HTML document.

7
00:00:24,770 --> 00:00:30,140
We're also going to write in a little bit of code inside there to start listening for events or messages

8
00:00:30,320 --> 00:00:32,380
coming from the parent document.

9
00:00:32,840 --> 00:00:36,050
If we ever receive an event from the parent document, we're going to assume that there are some kind

10
00:00:36,050 --> 00:00:37,160
of code inside there.

11
00:00:37,340 --> 00:00:40,190
We're then going to take that code and try to execute it all.

12
00:00:40,190 --> 00:00:40,460
The code.

13
00:00:40,490 --> 00:00:44,270
We're about to write inside of this string is going to be well, there's going to be a pretty good amount

14
00:00:44,270 --> 00:00:44,540
of it.

15
00:00:44,880 --> 00:00:48,290
We're going to eventually start to extract all this stuff into separate helper files.

16
00:00:48,480 --> 00:00:50,420
Just better organize our project in general.

17
00:00:51,300 --> 00:00:56,080
OK, so to get started, I'm going to put in an HTML element, was it off?

18
00:00:56,790 --> 00:00:58,080
I'm going to put in a head.

19
00:01:00,600 --> 00:01:02,130
I'll put in a body.

20
00:01:04,840 --> 00:01:07,720
I'm going to put in a div with an ID of root.

21
00:01:09,130 --> 00:01:12,010
We'll come back and discuss why we're adding that in in just a little bit.

22
00:01:12,100 --> 00:01:15,460
Well, just to tell you right away, this is really just a convenience thing.

23
00:01:15,580 --> 00:01:19,540
Remember, at some point in time, we probably want to allow our users to write in real components and

24
00:01:19,540 --> 00:01:20,660
render them very easily.

25
00:01:21,010 --> 00:01:25,510
So we're going to put this in just to give all of our users of our application some place to easily

26
00:01:25,510 --> 00:01:27,550
rendering components after they've created them.

27
00:01:27,910 --> 00:01:29,330
We'll make use of that in just a little bit.

28
00:01:29,350 --> 00:01:30,760
I just want to add it in right away.

29
00:01:31,890 --> 00:01:36,870
Well, then put in a script tag, and this is where we are going to set up some event listeners and

30
00:01:36,870 --> 00:01:42,210
listen for a message coming from the parent document and hopefully that message might contain some code

31
00:01:42,210 --> 00:01:42,740
inside of it.

32
00:01:43,760 --> 00:01:50,000
So I'm going to add in window dot, add event listener, we're going to listen for a message.

33
00:01:50,790 --> 00:01:52,310
We're going to receive the event.

34
00:01:55,300 --> 00:01:59,470
I'm going to put in my ear function and immediately add in false as that third argument.

35
00:02:01,760 --> 00:02:07,040
So inside this event object, this is an event object that is coming from our parent document.

36
00:02:08,110 --> 00:02:11,760
There's going to be inside there, hopefully some data property.

37
00:02:11,810 --> 00:02:15,370
Remember, we just saw that in the last video, all the information communicated with this event or

38
00:02:15,380 --> 00:02:18,750
like the data that we're trying to pass along is inside of event data.

39
00:02:19,150 --> 00:02:23,400
So we're going to assume that event data contains the code that we're trying to execute right now.

40
00:02:23,410 --> 00:02:26,440
Let's just do a console log of event data.

41
00:02:30,570 --> 00:02:32,490
OK, so that's all we need for right now.

42
00:02:33,850 --> 00:02:39,580
After that, I'm going to go down to my iFrame, I'm going to add in a ref to it, so we're going to

43
00:02:39,580 --> 00:02:45,850
get a reference to this iFrame then whenever we do our bundling process and get some new code out.

44
00:02:46,480 --> 00:02:47,800
So here's our bundling process.

45
00:02:48,100 --> 00:02:53,080
Whenever this bundling process is complete, rather than updating some code piece of states, we're

46
00:02:53,080 --> 00:02:58,390
going to take that reference to the iFrame and use it to emit a message down into the iFrame.

47
00:02:59,380 --> 00:03:05,290
So I'm going to first go up to the very top of the file, I'm going to add in a new ref that I'll call

48
00:03:05,320 --> 00:03:05,830
iFrame.

49
00:03:07,280 --> 00:03:09,110
I'm going to markets type as any right now.

50
00:03:11,940 --> 00:03:15,630
I'm then going to make sure that I assign that ref to my iFrame element.

51
00:03:17,360 --> 00:03:20,180
iFrame say Raif is Efraim.

52
00:03:22,910 --> 00:03:27,830
And then again, right after our bundling process is complete, rather than updating any code piece

53
00:03:27,830 --> 00:03:31,700
of states, we don't really care about that anymore because we're not going to use that code value at

54
00:03:31,700 --> 00:03:31,950
all.

55
00:03:32,630 --> 00:03:36,740
We were only using it before to print out the bundle code on the screen and all that stuff not really

56
00:03:36,740 --> 00:03:37,590
necessary anymore.

57
00:03:38,000 --> 00:03:42,260
I'm going to instead take a look at iframe that current.

58
00:03:43,100 --> 00:03:44,720
That's going to be our iFrame element.

59
00:03:45,730 --> 00:03:50,140
I'm going to attempt to post a message to it, so we're going to do a.

60
00:03:51,870 --> 00:03:53,790
Post message.

61
00:03:54,880 --> 00:03:59,770
We're going to provide all the code that was just created, so that's going to be a result that output

62
00:04:00,430 --> 00:04:02,530
files at zero text.

63
00:04:04,290 --> 00:04:07,380
And then again, the second argument here is going to be a star.

64
00:04:10,290 --> 00:04:11,490
OK, let's save this.

65
00:04:12,350 --> 00:04:15,200
I'm going to flip back over and again, we'll do a very quick test.

66
00:04:17,300 --> 00:04:21,260
I'm going to add in the state council log of one, two, three.

67
00:04:22,180 --> 00:04:27,550
And then submit, once I submit we're going to bundle a coat, we're going to emit an event down into

68
00:04:27,550 --> 00:04:30,790
that iframe, our iFrame should receive that event.

69
00:04:31,180 --> 00:04:33,010
That event should contain all of our code.

70
00:04:33,040 --> 00:04:38,160
And right now our iFrame is set up to just log that code so we should see the bundled result of council

71
00:04:38,200 --> 00:04:40,300
log one, two, three unclogged over here.

72
00:04:40,790 --> 00:04:41,370
They'll submit.

73
00:04:42,130 --> 00:04:44,980
And I made a very small mistake here.

74
00:04:45,430 --> 00:04:51,970
I forgot one little line of code we got iframe current we need iframe current content window.

75
00:04:52,000 --> 00:04:52,510
My mistake.

76
00:04:52,510 --> 00:04:53,530
I apologize for that.

77
00:04:53,950 --> 00:04:56,560
So I frame current content window post message.

78
00:04:57,800 --> 00:04:58,550
Let's try that again.

79
00:05:00,670 --> 00:05:02,410
Submit a there we go.

80
00:05:03,820 --> 00:05:07,720
So this is a council log coming from inside the iFrame, and without a doubt, we have received this

81
00:05:07,720 --> 00:05:09,760
code that we now want to somehow execute.

82
00:05:10,240 --> 00:05:14,050
So to execute this code, we're going to fall back on that same technique that we took a look at a little

83
00:05:14,050 --> 00:05:14,500
bit ago.

84
00:05:14,810 --> 00:05:16,990
All we have to do is eval that code.

85
00:05:17,020 --> 00:05:17,490
That's it.

86
00:05:17,500 --> 00:05:18,180
That's all we have to do.

87
00:05:18,190 --> 00:05:19,000
We're going to eval it.

88
00:05:19,000 --> 00:05:20,620
That's going to cause that code to be executed.

89
00:05:20,870 --> 00:05:22,660
We're going to see some result printed up.

90
00:05:22,810 --> 00:05:24,490
We're going to see the result of it being executed.

91
00:05:25,310 --> 00:05:26,770
Let's add that very last step in.

92
00:05:28,190 --> 00:05:32,150
It's going to find our big snippet right here, rather than console logging the code.

93
00:05:32,390 --> 00:05:35,750
I'm going to instead eval event data.

94
00:05:38,440 --> 00:05:42,310
We'll eventually come back and wrap this with some try catches and some other stuff to better handle

95
00:05:42,310 --> 00:05:44,350
errors, but right now this will be good enough.

96
00:05:46,190 --> 00:05:53,060
OK, refresh on the log, one, two, three, an estimate, and there is our control log.

97
00:05:54,620 --> 00:06:01,550
If I click on or this link over here will be taken to the execution context, essentially saying we

98
00:06:01,550 --> 00:06:08,930
see that link right there, it is a execution or eval result from Evalyn, this code inside of our iFrame.

99
00:06:09,790 --> 00:06:12,790
So this definitely looks good, means everything is working as expected.

100
00:06:13,720 --> 00:06:18,850
So now we can start to do some really interesting things first, let's make sure that we can still or

101
00:06:18,850 --> 00:06:22,030
that we can actually import react now without getting some kind of error message.

102
00:06:22,570 --> 00:06:24,640
I'm going to import react, Dom.

103
00:06:26,010 --> 00:06:33,030
From React, Dom, I'll just do a console log of React Dom to remember before when we were trying to

104
00:06:33,180 --> 00:06:38,190
pass code down through that attribute, this code right here caused us to get a really nasty error message.

105
00:06:38,820 --> 00:06:42,870
This will be a real check to make sure that everything is now working as expected by Simit.

106
00:06:43,970 --> 00:06:49,730
There's a concern, logoff, react, um, so we can now use react on to a render components if we write

107
00:06:49,730 --> 00:06:54,200
out a full component side of your let's try that out in the next video and make sure that we can actually

108
00:06:54,410 --> 00:06:59,450
put this little kind of not so great code editor through its paces and make sure that it works, as

109
00:06:59,450 --> 00:07:02,510
we would expect in creating stuff like reactor components and whatnot.