1
00:00:00,750 --> 00:00:05,250
We've now hit a pretty major checkpoint inside of reapplication, we've got an excellent code editor

2
00:00:05,250 --> 00:00:05,820
put together.

3
00:00:05,939 --> 00:00:10,770
We have the ability to take the code out of that ED, bundle it executed and eventually show it inside

4
00:00:10,770 --> 00:00:12,240
of an iFrame somewhere down here.

5
00:00:13,050 --> 00:00:17,190
So now we're going to start to do, as I've kind of long hinted at, but really been putting off a little

6
00:00:17,190 --> 00:00:19,080
bit of code cleanup right now.

7
00:00:19,080 --> 00:00:24,030
Our index DOT TSX file, the app component in particular, has a tremendous amount of code inside of

8
00:00:24,030 --> 00:00:26,280
it that should probably not be inside of here.

9
00:00:26,770 --> 00:00:32,400
So all this stuff about maybe bundling all this stuff around, generating some HTML and showing it inside

10
00:00:32,400 --> 00:00:36,930
that iframe, that's all stuff that we should probably extract into some other location inside of our

11
00:00:36,930 --> 00:00:37,440
project.

12
00:00:38,010 --> 00:00:42,300
Let's first begin this big refactor by creating a new prevue component.

13
00:00:42,750 --> 00:00:48,120
This Prevue component will be responsible for receiving some bundled code and then it will show that

14
00:00:48,120 --> 00:00:49,980
iframe somewhere down on the screen.

15
00:00:50,140 --> 00:00:54,420
So somewhere down here which are bundled code inside there and execute it.

16
00:00:55,170 --> 00:00:59,490
OK, so to get started I'm going to find my components directory, create a new file inside there called

17
00:00:59,490 --> 00:01:00,060
Prevue.

18
00:01:00,420 --> 00:01:02,700
That's right away.

19
00:01:02,700 --> 00:01:06,330
I know that I want to create some component called something like Prevue.

20
00:01:09,440 --> 00:01:10,550
I'm going to export it.

21
00:01:13,870 --> 00:01:16,870
And we can start thinking about the different props that preview is going to receive.

22
00:01:17,230 --> 00:01:22,000
Well, without a doubt we probably won't preview to probably just receive some bundled code and then

23
00:01:22,000 --> 00:01:24,810
just take that code, throw it into the iFrame and execute it.

24
00:01:25,540 --> 00:01:30,320
So I'm going to define an interface that's going to define all the props that preview is going to receive.

25
00:01:31,060 --> 00:01:33,640
I'll do interface review props.

26
00:01:34,390 --> 00:01:37,930
And I'm going to say that this is going to receive some code as a string.

27
00:01:38,920 --> 00:01:41,110
I'll then annotate the type of our preview component.

28
00:01:41,140 --> 00:01:41,770
So once again.

29
00:01:42,640 --> 00:01:47,080
Functional component angle brackets, preview ROPS.

30
00:01:48,790 --> 00:01:49,870
We can then receive.

31
00:01:53,560 --> 00:01:57,970
And then inside of here right now, we'll just show essentially an empty iFrame.

32
00:01:58,940 --> 00:02:02,390
We'll come back and add in a lot more stuff to that iframe essentially all the stuff we have currently

33
00:02:02,390 --> 00:02:03,910
inside TSX file.

34
00:02:04,100 --> 00:02:08,729
But first, let's just do a little bit of copy paste or cut and paste from our app component over here

35
00:02:08,729 --> 00:02:10,669
to start moving a couple of different things over.

36
00:02:12,130 --> 00:02:18,460
So first, back inside of index tsks I'm going to go down and find that big old HTML snippet that we

37
00:02:18,460 --> 00:02:22,120
currently have inside their is that big old bit of HTML.

38
00:02:22,690 --> 00:02:24,250
I'm going to take this entire thing.

39
00:02:25,100 --> 00:02:25,940
I'm going to cut it.

40
00:02:27,390 --> 00:02:33,750
Go over to our preview TSX file and then I can really paste it anywhere inside of here, I might decide

41
00:02:33,750 --> 00:02:36,030
to just put it right above the component itself.

42
00:02:40,190 --> 00:02:44,610
They will eventually make use of that snippet and push it into our iFrame.

43
00:02:45,350 --> 00:02:49,880
Let's continue doing a little bit more cut and paste to back inside of Index TSX.

44
00:02:50,300 --> 00:02:57,950
The next thing I would like to do is find you might recall we've got that ref right here.

45
00:02:58,850 --> 00:03:00,380
Or the Efrem right there.

46
00:03:00,700 --> 00:03:03,140
I want to move that ref over so I'll do a cut.

47
00:03:04,490 --> 00:03:06,170
And then a paste into our component.

48
00:03:08,080 --> 00:03:11,950
We're getting an air around USRAP, let's make sure that we import USRAP at the very top.

49
00:03:17,250 --> 00:03:18,000
OK, that's good.

50
00:03:18,930 --> 00:03:24,570
Next up, we need to make sure that whenever we receive some new code inside of that Prevue component,

51
00:03:24,750 --> 00:03:26,970
we push it down into our iFrame.

52
00:03:27,360 --> 00:03:32,910
Remember right now, inside of unclick, whenever we do that bundling stuff, we set that HTML inside

53
00:03:32,910 --> 00:03:36,120
the iFrame by directly assigning the SC property.

54
00:03:36,270 --> 00:03:39,360
And this is what allowed us to kind of reset the contents of that frame.

55
00:03:39,960 --> 00:03:43,430
So we don't really have access to our frame anymore inside of our app component.

56
00:03:43,830 --> 00:03:45,690
So I'm going to cut that out.

57
00:03:46,760 --> 00:03:53,120
Go over to a preview and then inside of here, I'm going to add in a use effect.

58
00:03:54,850 --> 00:03:59,590
So we're going to say that any time that we get some new code, so that is going to go into our dependency

59
00:03:59,590 --> 00:04:02,820
list, I want to take a look at our iFrame.

60
00:04:03,460 --> 00:04:07,990
I want to update the property and reset the HTML inside their.

61
00:04:09,790 --> 00:04:12,790
Then right away, once again, we're getting some air around U.S. fact.

62
00:04:13,730 --> 00:04:16,850
I'll go up to the top, make sure I import use effect.

63
00:04:23,320 --> 00:04:27,150
OK, so that's only going to reset the iFrame, but we do need to make sure that we eventually remember

64
00:04:27,160 --> 00:04:30,550
we need to emit or kind of post a message into that frame.

65
00:04:31,030 --> 00:04:37,300
So our code for that is back inside of index dot to go right after where we were bundling all of our

66
00:04:37,300 --> 00:04:37,660
code.

67
00:04:38,790 --> 00:04:42,810
I'm going to take all the stuff about posting that message, we're going to cut all that.

68
00:04:44,250 --> 00:04:50,940
Look back over and put it right inside of that fact function, and you might recall that we were accessing

69
00:04:50,940 --> 00:04:53,160
the results coming out, that bundling process directly.

70
00:04:53,310 --> 00:04:57,060
But now, in theory, our previous component is going to be just receiving some kind of code prop.

71
00:04:57,450 --> 00:04:59,760
So we don't really have access to this whole result thing anymore.

72
00:05:00,040 --> 00:05:02,610
We're going to push down our code directly inside.

73
00:05:06,260 --> 00:05:07,240
OK, that looks good.

74
00:05:07,810 --> 00:05:11,600
I think the last immediate thing we should probably do is make sure that we add a couple of different

75
00:05:11,600 --> 00:05:13,640
props to our iFrame element inside of here.

76
00:05:13,910 --> 00:05:15,680
We need to make sure we wire up that roof.

77
00:05:15,860 --> 00:05:17,290
A couple of other things as well.

78
00:05:17,300 --> 00:05:22,670
So just as a quick reminder, inside of index, not the different things we need to really provide to

79
00:05:22,670 --> 00:05:26,240
that iframe are probably initialized that inside there.

80
00:05:26,480 --> 00:05:30,740
We need to add that sandbox stuff, set up the roof and then to make a little warning go away, we need

81
00:05:30,740 --> 00:05:32,300
to also assign that title property.

82
00:05:32,810 --> 00:05:39,350
So I'll just go ahead and cut all these things and cut them all, go back over to preview and just paste

83
00:05:39,350 --> 00:05:40,670
them directly into that iframe.

84
00:05:43,710 --> 00:05:45,390
OK, so this looks pretty good.

85
00:05:45,780 --> 00:05:51,930
The last thing we really need to do is import our prevue component back over into indexed TSX and try

86
00:05:51,930 --> 00:05:53,010
to use it inside their.

87
00:05:54,160 --> 00:06:01,210
So back inside of index, I can go up to the very top, I'm going to import prevue from components,

88
00:06:01,900 --> 00:06:02,350
prevue.

89
00:06:05,970 --> 00:06:07,500
Let's scroll down a little bit.

90
00:06:09,110 --> 00:06:11,460
We do not need the iFrame directly inside of here anymore.

91
00:06:11,480 --> 00:06:13,490
Instead, we're going to make use of preview.

92
00:06:14,300 --> 00:06:17,960
And the last thing we really need to do here is something that we had previously, but we removed at

93
00:06:17,960 --> 00:06:18,860
some point in time.

94
00:06:18,860 --> 00:06:22,120
We need to communicate our bundled code down into this component.

95
00:06:22,580 --> 00:06:28,040
So that means that after we complete our entire bundling process with result right here, we need to

96
00:06:28,040 --> 00:06:32,770
update a piece of state inside of our app component that will cause our component to render.

97
00:06:32,780 --> 00:06:37,190
And we can then pass that new updated piece of state down into that preview thing.

98
00:06:37,580 --> 00:06:41,720
So, again, we had previously had a piece of state to kind of handle all this stuff in the form of

99
00:06:41,720 --> 00:06:42,770
that code piece of state.

100
00:06:42,770 --> 00:06:44,390
But at some point in time, we deleted that.

101
00:06:44,780 --> 00:06:46,640
I still have a comment here around it.

102
00:06:47,450 --> 00:06:49,820
But like I said, we had removed the state declaration.

103
00:06:50,380 --> 00:06:54,020
So I'm going to recreate that code piece of state at the top up here.

104
00:06:54,830 --> 00:06:57,260
I'll do code and set code.

105
00:07:02,730 --> 00:07:07,320
Then right after we finish all of our bundling, I'm going to comment that set code we had previously

106
00:07:07,320 --> 00:07:07,590
had.

107
00:07:10,100 --> 00:07:14,900
And then down at Prevue, we'll make sure that after we create that bundle, after we update that piece

108
00:07:14,900 --> 00:07:18,020
of state, we will pass it down into our preview component.

109
00:07:18,770 --> 00:07:19,910
OK, so let's save this.

110
00:07:20,660 --> 00:07:23,720
I think that we've got something that probably should work at this point in time.

111
00:07:24,210 --> 00:07:27,920
I'm going to go back over to my browser, make sure I do a refresh.

112
00:07:28,990 --> 00:07:34,090
I'll add in a very simple right now on the blog of one, two, three.

113
00:07:35,140 --> 00:07:40,390
And then I'm going to try to execute this stuff, so I'll click on Submit right there and sure enough,

114
00:07:40,390 --> 00:07:41,460
I see one, two, three.

115
00:07:41,500 --> 00:07:45,520
So that means we are, in fact, successfully executing that bundled code.

116
00:07:46,060 --> 00:07:46,780
This looks pretty good.

117
00:07:48,660 --> 00:07:52,620
Last little bit of cleanup I want to do, we're no longer really making use of that text area inside

118
00:07:52,620 --> 00:07:58,290
of our app component so I can remove that text area because everything all that text input is really

119
00:07:58,290 --> 00:08:00,030
coming now out of our code editor.

120
00:08:01,560 --> 00:08:02,980
OK, so good change.

121
00:08:03,000 --> 00:08:08,010
I know it was kind of all over the place as we did this refactor, but we definitely have a much better

122
00:08:08,010 --> 00:08:11,700
way of actually executing some code through the use of our preview component now.

123
00:08:12,190 --> 00:08:14,610
So let's take a pause right here and continue in just a minute.