1
00:00:01,260 --> 00:00:06,060
This bundle variable is showing up inside of our code cell component as undefined sometimes that's what

2
00:00:06,060 --> 00:00:07,250
we're seeing at our console.

3
00:00:07,710 --> 00:00:12,270
So as we were discussing at the end of the last video, we might want to apply a better, tight definition

4
00:00:12,270 --> 00:00:16,280
somewhere just to help TypeScript tell us that, hey, bundle might be undefined.

5
00:00:16,740 --> 00:00:21,990
The reason that this is so important is that if we go down to our preview component right now, uncommented

6
00:00:22,320 --> 00:00:27,030
and then try to make use of that bundle variable, so let's say let's pass in the code and air from

7
00:00:27,030 --> 00:00:30,870
bundle, it would be something like bundle code and bundle air.

8
00:00:31,110 --> 00:00:35,070
Right now, as far as TypeScript is concerned, bundle will always be defined.

9
00:00:35,070 --> 00:00:38,400
But you and I know based on that console log that we just saw, that this is not the case.

10
00:00:39,060 --> 00:00:44,160
So although TypeScript says there's no problem here if we save this and then go back over to the browser

11
00:00:44,580 --> 00:00:47,280
and refresh, we're going to very quickly see an error.

12
00:00:47,670 --> 00:00:51,320
And the error message says that we are trying to read property code of undefined.

13
00:00:52,170 --> 00:00:57,000
So, again, this is a location where we would normally expect TypeScript to jump in and say that bundle

14
00:00:57,000 --> 00:00:58,590
thing, it might not be defined.

15
00:00:59,570 --> 00:01:05,510
So to fix this up, we're going to go back over to our reducer, our bundles reducer inside the reducers

16
00:01:05,510 --> 00:01:05,960
directory.

17
00:01:07,130 --> 00:01:11,210
We're going to find our Bundall state interface right here and we're going to make a very small change

18
00:01:11,210 --> 00:01:15,950
to it, although this interface might eventually hold up for our state object.

19
00:01:16,190 --> 00:01:16,970
Right now it doesn't.

20
00:01:17,000 --> 00:01:22,190
There are periods of time where we can look up a cell ID inside of your and knock it back an object

21
00:01:22,190 --> 00:01:22,970
that looks like this.

22
00:01:22,970 --> 00:01:24,830
Instead, we get back undefined.

23
00:01:25,750 --> 00:01:31,060
So we're going to update this type definition to express that I'm going to put in whenever we look up

24
00:01:31,060 --> 00:01:36,620
a key, we're going to get back an object that looks like that or undefined.

25
00:01:37,420 --> 00:01:41,980
So this is going to account for when our application is first booting up and we do not yet have a bundle

26
00:01:41,980 --> 00:01:43,180
for some particular cell.

27
00:01:44,480 --> 00:01:49,480
It's going to save this all, then go back over to our Kozel and now down at our preview component,

28
00:01:49,640 --> 00:01:54,920
now we can very easily see that there is an error message says here that we can't look up code on the

29
00:01:54,920 --> 00:01:57,540
bundle variable because that might be undefined.

30
00:01:58,100 --> 00:02:00,680
That is exactly the error message I would expect to see.

31
00:02:01,670 --> 00:02:05,150
So now to fix this up, we can say, well, you know what, let's just not show the preview component

32
00:02:05,150 --> 00:02:07,460
at all until we actually have a bundle.

33
00:02:07,950 --> 00:02:13,520
So I'm going to wrap preview with some curly braces and then put in a bundle and like so.

34
00:02:15,860 --> 00:02:20,060
Now, this will definitely fix the air, but I just want to mention really quickly as well, this is

35
00:02:20,060 --> 00:02:24,000
not going to or it's currently not making use of that loading flag, which we added in.

36
00:02:24,290 --> 00:02:28,610
So there's really two cases now in which we will want to show that loading spinner.

37
00:02:28,640 --> 00:02:30,530
The first one is if we don't have a bundle.

38
00:02:30,710 --> 00:02:34,070
The second is if this bundle thing has a loading flag of true.

39
00:02:34,520 --> 00:02:38,720
So just keep it in mind, because as we start to go and implement that Spiner something to say, hey,

40
00:02:38,720 --> 00:02:41,390
we're currently processing your bundle, we're creating one for you.

41
00:02:41,700 --> 00:02:43,730
We're going to have to consider those two different cases.

42
00:02:45,710 --> 00:02:46,040
All right.

43
00:02:46,100 --> 00:02:49,760
Now back up towards the top, I just want a very quickly clean up that console log right there.

44
00:02:51,630 --> 00:02:54,720
Let's say this go back over to a quick refresh.

45
00:02:56,860 --> 00:03:02,110
And now no more air, let's actually test out the entire bundling process, so I'm going to put inside

46
00:03:02,110 --> 00:03:08,830
of this first code editor about a console log of one, two, three, if I then paused for a very brief

47
00:03:08,830 --> 00:03:09,640
period of time.

48
00:03:09,670 --> 00:03:13,570
So about seven hundred fifty milliseconds, you might say, we eventually see that console log.

49
00:03:14,080 --> 00:03:15,210
That is very good.

50
00:03:15,220 --> 00:03:20,470
That means we are successfully bundling our code inside that action creator updating our bundles, piece

51
00:03:20,470 --> 00:03:25,330
of states and then getting the completed bundle back inside of our code cell component and passing it

52
00:03:25,330 --> 00:03:26,080
down to preview.

53
00:03:26,570 --> 00:03:27,730
This is very good.

54
00:03:28,840 --> 00:03:33,220
Let's do another quick test here, remember inside of our preview frame right there.

55
00:03:33,340 --> 00:03:36,130
There is an element that has an ID of root.

56
00:03:36,620 --> 00:03:39,470
Let's try to access that thing and add in some content inside of it.

57
00:03:39,490 --> 00:03:40,570
So I'll do a document.

58
00:03:41,490 --> 00:03:43,710
Where he selecter and Drut.

59
00:03:45,190 --> 00:03:45,670
TML.

60
00:03:46,620 --> 00:03:48,510
Equals whatever.

61
00:03:52,040 --> 00:03:56,180
So once again, this means that we were correctly generating the bundle, getting it down into prevue

62
00:03:56,300 --> 00:03:58,640
and then executing that bundled code inside there.

63
00:03:59,230 --> 00:04:02,240
I'm going to make sure that also works for our other code sell down here as well.

64
00:04:03,330 --> 00:04:06,210
I'm going to go and piece that Sinco down will change in the text.

65
00:04:08,810 --> 00:04:09,600
Yep, looks good.

66
00:04:10,160 --> 00:04:13,790
And then finally, one more quick test at the very top are going to add in another Kozel.

67
00:04:14,920 --> 00:04:18,920
Is something inside there, you update that text as well.

68
00:04:19,339 --> 00:04:19,910
Very good.

69
00:04:21,120 --> 00:04:22,990
All right, well, this is fantastic.

70
00:04:23,010 --> 00:04:28,350
It means we have moved our entire bundling process over to the dark side of our application.

71
00:04:29,200 --> 00:04:35,800
However, as usual, still one or two things to take care of in this case, we got a couple of warnings

72
00:04:35,800 --> 00:04:36,040
here.

73
00:04:36,430 --> 00:04:38,170
I just want to handle these warnings really quickly.

74
00:04:39,060 --> 00:04:43,740
To the warnings for these two right here are absolutely benign, we'll fix this up very quickly, but

75
00:04:43,740 --> 00:04:46,080
the other one is going to be a little bit more of an issue.

76
00:04:46,530 --> 00:04:48,770
So let's take a pause right here and then come back in just a moment.