1
00:00:00,740 --> 00:00:06,430
All right, my friends, let's try updating this plugin and allow it to fetch a module live off of Unpackaged,

2
00:00:07,070 --> 00:00:11,030
the first thing we're going to do is make a little update or two to the unresolved function.

3
00:00:11,280 --> 00:00:16,640
Remember, unresolved is going to be called whenever Eskild is trying to figure out a path to a particular

4
00:00:16,640 --> 00:00:17,150
module.

5
00:00:18,100 --> 00:00:19,900
We currently have a consulate inside of here.

6
00:00:20,590 --> 00:00:24,590
The consulate is currently staying on Resul, I'm going to just fix that up really quickly.

7
00:00:25,450 --> 00:00:28,350
There we go, unresolved and then printing out the arguments dysfunction.

8
00:00:28,720 --> 00:00:34,570
Let's go back over to our browser really quick and see what arguments we get whenever Eskild is attempting

9
00:00:34,570 --> 00:00:40,330
to figure out a path to a module back inside of my browser, I'll refresh, submit, still get there

10
00:00:40,330 --> 00:00:41,500
to define what?

11
00:00:41,500 --> 00:00:44,390
I'm going to take a look at the console log for unresolved.

12
00:00:44,870 --> 00:00:47,470
It looks like the very first time unresolved gets called.

13
00:00:47,560 --> 00:00:51,370
We've got arguments of importer namespace Pappe and Resolve Directory.

14
00:00:51,970 --> 00:00:55,590
This is the console log for on result for the index as file.

15
00:00:55,900 --> 00:00:57,840
We don't really care about that quite so much right now.

16
00:00:58,000 --> 00:01:00,150
Instead, we really care about the second console log.

17
00:01:00,550 --> 00:01:03,880
This is the unresolved call for tiny test package.

18
00:01:04,470 --> 00:01:10,240
So in this case, we are told which file is attempting to import this package, the namespace of that

19
00:01:10,240 --> 00:01:17,080
file and then the current path or what we think of the path to this file is so right now it's build

20
00:01:17,080 --> 00:01:17,410
things.

21
00:01:17,410 --> 00:01:19,330
The path to it is tiny test package.

22
00:01:19,660 --> 00:01:20,920
That's not really a valid path.

23
00:01:20,920 --> 00:01:22,300
We can only use that for anything.

24
00:01:22,510 --> 00:01:25,000
That's not a URL that we can fetch some resource from.

25
00:01:25,150 --> 00:01:27,420
It's not a path to some file on the file system.

26
00:01:27,910 --> 00:01:33,910
So you and I have to read in this path right here and somehow convert it into an actual path that can

27
00:01:33,910 --> 00:01:35,490
be fetched at some point in time.

28
00:01:36,920 --> 00:01:43,670
So our ultimate goal inside of unresolved is to detect whenever we are trying to get the path for tiny

29
00:01:43,670 --> 00:01:49,790
test a package, and if we are, rather than just returning back the current path that was provided

30
00:01:49,790 --> 00:01:56,660
to our resolve, we want to instead provide a path to unpackaged dotcom, tiny test package.

31
00:01:56,900 --> 00:01:58,250
That's what we need to do inside of here.

32
00:01:58,790 --> 00:02:01,580
So right now, we're going to take a very naive approach.

33
00:02:02,060 --> 00:02:05,630
We're going to say if our path.

34
00:02:06,670 --> 00:02:08,210
Is indexed, James.

35
00:02:09,690 --> 00:02:14,250
Let's just keep doing what we're doing, so I'm going to cut and paste the return statement inside their.

36
00:02:15,380 --> 00:02:23,870
And then going to put in and else if and I'll say our exact path is tiny test package and we need to

37
00:02:23,870 --> 00:02:25,400
do something slightly different.

38
00:02:25,790 --> 00:02:28,010
So in this case, I'm going to return.

39
00:02:28,980 --> 00:02:34,650
A path to and we want to put inside of here the unpackaged path to our module.

40
00:02:35,830 --> 00:02:45,280
So that would be the unpackaged dotcom, so just to be precise, unpackaged dotcom, a tiny test package,

41
00:02:45,580 --> 00:02:49,600
at one point zero indexed -- can take that full URL right there.

42
00:02:51,310 --> 00:02:52,990
And pasted in like so.

43
00:02:53,980 --> 00:02:58,270
I'm also going to apply a namespace of a right now as well.

44
00:02:59,300 --> 00:03:00,320
And they're going to save this.

45
00:03:02,770 --> 00:03:06,880
OK, so again, this is still a very naive approach, but it's going to help us just kind of gently

46
00:03:07,270 --> 00:03:12,910
refactor this code into over time and making sure that we can eventually get some path for any arbitrary

47
00:03:12,910 --> 00:03:13,360
module.

48
00:03:14,060 --> 00:03:15,120
So not going to save this.

49
00:03:15,130 --> 00:03:18,310
Go back to the browser, refresh again, click on submit.

50
00:03:19,240 --> 00:03:24,810
And now, while we still get an air, but take a look at the air that we have now, this air now says

51
00:03:24,900 --> 00:03:29,440
file could not be loaded and we are attempting to load that file right there.

52
00:03:30,810 --> 00:03:35,730
So this here means that we are still falling into our onload function at some point in time, but we

53
00:03:35,730 --> 00:03:42,540
don't have any case inside of here to handle loading up something besides the index --.

54
00:03:44,140 --> 00:03:51,940
So we now need to somehow make a request off to unpackaged or essentially whatever the args half property

55
00:03:51,940 --> 00:03:55,870
is, we need to somehow fetch the contents of the file at that URL.

56
00:03:56,290 --> 00:03:57,790
Let me just clarify what I mean by that.

57
00:03:58,450 --> 00:03:59,530
Let's go back inside the browser.

58
00:03:59,980 --> 00:04:01,860
We're going to find the OnLoad console log.

59
00:04:02,290 --> 00:04:07,840
You'll see that OnLoad console log now has the path to the file that this OnLoad is trying to fetch

60
00:04:08,590 --> 00:04:15,250
right now are onload doesn't have any case inside of it for trying to deal with a request to fetch that

61
00:04:15,250 --> 00:04:15,640
file.

62
00:04:16,060 --> 00:04:20,620
So all we have to do is add in some code to make a network request to that URL.

63
00:04:20,920 --> 00:04:26,200
That's the contents of that file and then return it from this onload in just the same way that we're

64
00:04:26,200 --> 00:04:27,940
doing for the index, such as file.

65
00:04:30,170 --> 00:04:36,050
So for this, we're going to make use of Axios, we're going to install Axios into our project if we

66
00:04:36,050 --> 00:04:42,890
ever try to fetch a file with a path besides index stocks and we'll make a request with Axios to our

67
00:04:42,890 --> 00:04:43,660
exact path.

68
00:04:44,060 --> 00:04:49,040
And that should give us back the contents of whatever file is at that URL right there.

69
00:04:50,000 --> 00:04:51,770
I'm going to first begin by going over to my terminal.

70
00:04:52,700 --> 00:04:59,000
I'm going to open up a second window still inside my project and do a very quick NPM install Axios.

71
00:05:04,920 --> 00:05:09,390
Once that is installed, I'm going to let it do its thing back inside of my plug and file at the very

72
00:05:09,390 --> 00:05:13,260
top, I will import Axios from Axios.

73
00:05:16,120 --> 00:05:18,430
Then back down after the statement.

74
00:05:19,480 --> 00:05:20,350
I'm going to add in.

75
00:05:21,770 --> 00:05:23,420
A concert data.

76
00:05:24,350 --> 00:05:30,240
Is a wait Axios docket, and I'm going to get whatever is at our exact path.

77
00:05:30,350 --> 00:05:34,790
Remember, we just on the council log our exact path is that you are right there.

78
00:05:36,080 --> 00:05:37,190
We're going to get that path.

79
00:05:39,210 --> 00:05:44,940
And hopefully data now should contain whatever the text content is of that file.

80
00:05:45,380 --> 00:05:49,130
Let's just do a log of that data just to make sure we're actually fetching the code we're looking for.

81
00:05:50,440 --> 00:05:54,070
So I'll save that you flip back over to another simit.

82
00:05:54,980 --> 00:05:59,690
And there's the council log that we are now definitely loading up the contents of a file directly from

83
00:05:59,690 --> 00:06:00,320
Unpackaged.

84
00:06:00,830 --> 00:06:05,630
Now, the last thing we have to do is make sure that we take that data, that we have fetched the contents

85
00:06:05,630 --> 00:06:10,510
of that file and return an object from OnLoad that looks just like this right here.

86
00:06:11,030 --> 00:06:14,480
This object is essentially, remember, going to tell us build.

87
00:06:14,780 --> 00:06:15,500
Hey, don't worry.

88
00:06:15,500 --> 00:06:16,970
Don't try to access the file system.

89
00:06:17,150 --> 00:06:18,600
We loaded up the file for you.

90
00:06:18,650 --> 00:06:20,170
Here's the contents of that file.

91
00:06:20,960 --> 00:06:22,070
So I'm going to return.

92
00:06:23,680 --> 00:06:30,190
An object, I'm going to say apply a loader of gas and remember, that just means it's billed is going

93
00:06:30,190 --> 00:06:35,920
to understand it might have to pass some gas inside that file and then the contents will be data.

94
00:06:37,850 --> 00:06:38,990
OK, let's save this.

95
00:06:39,350 --> 00:06:44,080
Go back over, refresh and do another test, eh?

96
00:06:44,330 --> 00:06:45,130
There we go.

97
00:06:45,910 --> 00:06:49,030
You'll notice that there's a lot more stuff going on here than we had before.

98
00:06:49,310 --> 00:06:52,040
That is because we are now mixing and matching.

99
00:06:52,370 --> 00:06:54,290
Yes, to me, yes.

100
00:06:54,290 --> 00:06:56,060
Modules and common modules.

101
00:06:56,060 --> 00:06:57,820
That's why there's so much code inside of here.

102
00:06:58,040 --> 00:07:01,520
You'll notice that there are a couple of functions like, say, common gas and stuff like that.

103
00:07:01,740 --> 00:07:06,080
Again, the tiny module that I just provided to you is making use of common gas.

104
00:07:06,260 --> 00:07:11,510
But the index JS file that is hard coded inside of our plug and right now is making use of its modules.

105
00:07:11,810 --> 00:07:16,880
I bet you if we actually convert them both to be the same module type, we might see the actual total

106
00:07:16,880 --> 00:07:18,180
bundle size start to go down.

107
00:07:18,620 --> 00:07:19,730
Let's try that out really quickly.

108
00:07:20,420 --> 00:07:27,470
Back inside my editor, I'm going to update the hardcoded indexed JS file to instead be constant message

109
00:07:28,070 --> 00:07:29,210
is require.

110
00:07:31,970 --> 00:07:34,220
Tiny test package.

111
00:07:35,650 --> 00:07:38,840
Let's save that, let's do a refresh submit.

112
00:07:39,420 --> 00:07:44,740
All right, I guess a little bit less, definitely still more than we were only using Eskild, but I

113
00:07:44,740 --> 00:07:46,090
think this is definitely good progress.

114
00:07:46,480 --> 00:07:52,630
We have now really proved that we can have some amount of code that is provided by our user like you

115
00:07:52,630 --> 00:07:54,640
or me writing inside of a code editor.

116
00:07:54,640 --> 00:07:59,560
Not quite just yet, but we're very close to that and we've proved that we can somehow live.

117
00:07:59,650 --> 00:08:03,880
That's a file off of unpackaged dot com and include it inside of some bundle.

118
00:08:04,710 --> 00:08:06,190
So this is definitely good progress.

119
00:08:06,520 --> 00:08:11,440
But of course, right now we've got some code that's just, well, still a little bit hard coded.

120
00:08:11,920 --> 00:08:17,290
We need to make sure that we generate a year like this on the fly rather than always just hard coding

121
00:08:17,290 --> 00:08:19,450
in some kind of like our exact path check.

122
00:08:19,890 --> 00:08:21,400
So still a little bit more progress.

123
00:08:21,700 --> 00:08:23,200
Let's continue on in the next video.