1
00:00:01,050 --> 00:00:05,580
In this video, we're going to take a look at one more breaking case with our current path resolution

2
00:00:05,580 --> 00:00:08,520
algorithm to get started inside my unresolved function.

3
00:00:08,760 --> 00:00:11,440
I've left a comment at the bottom of that function for quite a while now.

4
00:00:11,610 --> 00:00:12,890
Don't really need this comment anymore.

5
00:00:12,900 --> 00:00:14,370
I'm going to clean it up very quickly.

6
00:00:15,150 --> 00:00:17,160
After that, I'm going to find the OnLoad function.

7
00:00:17,280 --> 00:00:21,150
Remember, inside of here, we have a hard coded index file inside.

8
00:00:21,150 --> 00:00:24,240
There we are attempting to require in medium test package.

9
00:00:24,690 --> 00:00:27,540
I've published yet another package off to NPM.

10
00:00:27,780 --> 00:00:32,729
We're going to try to require in this third package and attempt to include it inside of our bundle.

11
00:00:33,310 --> 00:00:38,730
So I'm going to find the required medium test package right here and update it to nested test package.

12
00:00:39,360 --> 00:00:44,460
So this new package that we're going to try to bundle up has a slightly different file and folder structure

13
00:00:44,490 --> 00:00:47,730
that's going to cause some problems with our current path resolution algorithm.

14
00:00:48,490 --> 00:00:50,970
Let's say this file now go back to the browser.

15
00:00:52,640 --> 00:00:57,890
I'm going to refresh Zimet, and once again, we're going to start to see some big error messages,

16
00:00:58,490 --> 00:01:00,860
so we need to figure out what's going wrong now.

17
00:01:01,100 --> 00:01:02,960
Why is our path resolution failing?

18
00:01:03,530 --> 00:01:07,430
Well, to really understand this, I want to first take a look at some of the different files and folders

19
00:01:07,580 --> 00:01:10,430
that are inside of this new nested test package.

20
00:01:10,840 --> 00:01:14,870
So inside this diagram, I've got the file and folder structure of medium test package.

21
00:01:14,870 --> 00:01:19,860
On the left hand side, there was one folder that had index tags and utils dogs inside of it.

22
00:01:20,390 --> 00:01:25,130
So when we were trying to bundle this file and folder structure, everything worked as expected.

23
00:01:25,670 --> 00:01:31,340
But now we are trying to bundle up a slightly different file and folder structure, this nested test

24
00:01:31,340 --> 00:01:34,520
package as an Sarsae folder inside of it.

25
00:01:34,870 --> 00:01:39,110
It is the presence of this SIRC folder that is causing us problems now.

26
00:01:39,450 --> 00:01:44,000
So I'm going to show you a couple of diagrams and help you understand why the presence of that folder

27
00:01:44,030 --> 00:01:45,110
is giving us trouble.

28
00:01:46,400 --> 00:01:50,990
Inside of SIRC is the index dog's file, which is what we are ultimately trying to require.

29
00:01:51,470 --> 00:01:55,250
There's also a helper's folder with the utils dogs file inside there as well.

30
00:01:56,240 --> 00:01:59,150
So why is the SIRC folder giving us trouble?

31
00:01:59,720 --> 00:02:01,460
Well, let's take a look at a diagram once again.

32
00:02:03,190 --> 00:02:07,510
This same structure, we've seen this once before, we're going to walk through and really imagine the

33
00:02:07,510 --> 00:02:10,030
entire resolution algorithm file by file.

34
00:02:10,860 --> 00:02:15,390
So, again, we start off with our index dogs while we go through unresolved, unload the load up the

35
00:02:15,390 --> 00:02:19,040
contents of that file, kind of it's all hardcoded right now.

36
00:02:19,800 --> 00:02:24,810
We passed the contents of that file after we build us build passes the contents it sees that we are

37
00:02:24,810 --> 00:02:27,360
trying to require in nested test package.

38
00:02:28,170 --> 00:02:33,600
It's built then creates an object that looks like this right here and provides it to work on Resul function.

39
00:02:34,110 --> 00:02:37,610
So our path is nested test package and the importer is index.

40
00:02:38,790 --> 00:02:43,170
As usual, you can see that on the log right here.

41
00:02:44,650 --> 00:02:47,800
So path massive tax package importers, index dogs.

42
00:02:48,990 --> 00:02:56,430
You and I then take that path, we realize that we are attempting to to import some kind of module off

43
00:02:56,430 --> 00:02:58,710
of NPM or some kind of NPE module.

44
00:02:59,190 --> 00:03:05,010
So we joined the module name together with unpackaged dotcom, and we come up with a path that looks

45
00:03:05,010 --> 00:03:05,790
like this right here.

46
00:03:06,410 --> 00:03:09,630
So an object that looks like this is provided to our onload function.

47
00:03:09,630 --> 00:03:10,690
And this is the basis.

48
00:03:10,710 --> 00:03:16,590
This is what we have to go on for, fetching this file or this package off of NPM or trying to match

49
00:03:16,590 --> 00:03:17,670
the contents of that file.

50
00:03:17,670 --> 00:03:17,970
Really?

51
00:03:19,490 --> 00:03:22,220
Again, we can see a consultive for that very easily right here.

52
00:03:23,870 --> 00:03:29,960
So we go and fetch that file, we go and fetch that index file or essentially the root file of this

53
00:03:29,960 --> 00:03:30,470
package.

54
00:03:31,190 --> 00:03:35,000
Now, quick reminder, whenever we go to unpackaged dotcom.

55
00:03:35,950 --> 00:03:43,090
So unpackaged dotcom flash, say, nested test EKG, if I just navigate directly to that path right

56
00:03:43,090 --> 00:03:48,930
there on package, dot com is going to automatically redirect me to the main file of this package.

57
00:03:49,270 --> 00:03:53,450
In this case, the main file is SIRC indexed.

58
00:03:53,950 --> 00:03:55,090
That is the main file.

59
00:03:55,090 --> 00:03:56,590
That is where we get redirected to.

60
00:03:56,890 --> 00:03:58,710
Just keep that in your mind for just a moment.

61
00:04:00,420 --> 00:04:05,880
So we make a request to that you are all right there, we get the contents of that file and during that

62
00:04:05,880 --> 00:04:08,850
process, remember, the actual file is not at that URL.

63
00:04:09,000 --> 00:04:11,090
It's actually at SIRC Index.

64
00:04:12,030 --> 00:04:14,540
Regardless, we load up the file, we return the contents.

65
00:04:14,820 --> 00:04:19,800
Yes, bill passes it and sees once again that we are trying to require in some other file, in this

66
00:04:19,800 --> 00:04:23,490
case, the requires for helpers utils.

67
00:04:24,520 --> 00:04:30,280
So an object that looks like this right here is provided to our unresolved function, again, as usual,

68
00:04:30,280 --> 00:04:32,230
we can see that along very easily.

69
00:04:33,240 --> 00:04:41,310
Here it is right here, the path is Helper's utils and the importer is very clearly nested test package.

70
00:04:41,820 --> 00:04:42,710
But here's the problem.

71
00:04:42,990 --> 00:04:46,380
The importer is not actually nested test package.

72
00:04:46,680 --> 00:04:50,460
The actual importer is nested test package.

73
00:04:50,610 --> 00:04:53,080
SIRC index, James.

74
00:04:54,110 --> 00:04:59,330
So we have an incorrect importer, the importer is not correct, it thinks that we are getting the file

75
00:04:59,510 --> 00:05:03,530
from here or the index as file is the one that is importing utils.

76
00:05:03,680 --> 00:05:04,550
That is not correct.

77
00:05:04,550 --> 00:05:07,400
It is actually nested test package SIRC.

78
00:05:07,400 --> 00:05:08,630
Index dot deez.

79
00:05:09,760 --> 00:05:15,580
Regardless, we then apply our path resolution algorithm, which essentially just says, take this importer.

80
00:05:17,140 --> 00:05:23,050
Join on that path, turn into your URL and try to go and fetch it so you and I are generating a path

81
00:05:23,050 --> 00:05:24,300
right now that looks like this.

82
00:05:24,730 --> 00:05:32,830
We take the importer, which is just nested test package, and then we add on the dot helper's utils

83
00:05:33,040 --> 00:05:35,320
and we end up with the URL like this right here.

84
00:05:36,010 --> 00:05:38,050
Our file is not at that URL.

85
00:05:38,530 --> 00:05:40,270
If I tried to navigate to that URL.

86
00:05:41,560 --> 00:05:42,520
Inside my browser's.

87
00:05:44,600 --> 00:05:45,360
Doesn't exist.

88
00:05:45,950 --> 00:05:51,320
Instead, what we really want to do is generate, if you like, this, something that includes where

89
00:05:51,320 --> 00:05:56,270
we actually found that root file, where we actually found that indexed JS file.

90
00:05:56,600 --> 00:05:59,060
So we need to somehow get that SIRC inside there.

91
00:05:59,420 --> 00:06:00,740
That's what we really need to do.

92
00:06:01,190 --> 00:06:03,350
Now, you might think, OK, Stephen, whatever.

93
00:06:03,740 --> 00:06:05,840
Let's just go ahead and hard code in.

94
00:06:07,700 --> 00:06:12,350
Back up here where we've got our special case, let's just hard coding like SC, no, that's not going

95
00:06:12,350 --> 00:06:16,000
to work because remember, we're not always walking into some SC directory.

96
00:06:16,010 --> 00:06:19,430
You might actually be like a live folder or a disk folder or something like that.

97
00:06:19,440 --> 00:06:23,720
We don't really know what the name of this file or that folder is ahead of time.

98
00:06:24,260 --> 00:06:26,300
So we really need to get all that more clever here.

99
00:06:26,480 --> 00:06:31,160
We need to figure out some better way of resolving this path, really considering where we found that

100
00:06:31,160 --> 00:06:32,960
initial file inside the package.

101
00:06:33,800 --> 00:06:38,570
With all this in mind, I've come up with a slightly better approach here, something to kind of explain

102
00:06:38,570 --> 00:06:40,100
the logic that we really need to apply.

103
00:06:40,730 --> 00:06:43,250
Let's take a look at one or two more very quick diagrams.

104
00:06:44,920 --> 00:06:49,150
OK, so here's what we really need to encode inside of our path resolution algorithm.

105
00:06:50,270 --> 00:06:54,830
Whenever we are fetching the main file of a package, so in other words, if we ever require statement

106
00:06:54,830 --> 00:07:00,230
for something like Axios or require a statement for something like react or react or something like

107
00:07:00,230 --> 00:07:04,190
that, we are attempting to fetch the main file of a package.

108
00:07:04,500 --> 00:07:06,320
So that would be like when we are attempting to.

109
00:07:07,840 --> 00:07:13,780
Find this file, if we are attempting to find nested test package, that means that we are trying to

110
00:07:13,780 --> 00:07:15,300
get the main file of a package.

111
00:07:15,640 --> 00:07:22,000
If that's the case and we need to make a request to unpackaged dot com slash plus the package name.

112
00:07:23,010 --> 00:07:28,860
However, if we are attempting to match any other file inside that package, so any other file besides

113
00:07:28,860 --> 00:07:34,210
that main initial file of a package, then our resolution algorithm is going to be slightly different.

114
00:07:34,530 --> 00:07:42,780
It needs to be unpackaged dotcom slash, plus the directory that the last file was found in, plus the

115
00:07:42,780 --> 00:07:44,220
require statement for this file.

116
00:07:45,030 --> 00:07:47,520
Now, these little steps right here might not be super clear.

117
00:07:47,520 --> 00:07:49,680
So let me show you a more practical example.

118
00:07:52,060 --> 00:07:56,920
So at some point in time, we had to require statement for nested test package, that is the initial

119
00:07:56,920 --> 00:07:59,430
import or the initial required for this package.

120
00:07:59,830 --> 00:08:02,020
So we are going to apply this first rule to it.

121
00:08:02,320 --> 00:08:08,590
We would find this URL by making request you unpackaged dot com slash plus nested test package.

122
00:08:09,130 --> 00:08:11,350
We would end up with URLs like this right here.

123
00:08:12,100 --> 00:08:17,560
We would make a request that URL and behind the scenes Unpackaged would redirect us to where you URL

124
00:08:17,560 --> 00:08:18,880
that actually looks like this.

125
00:08:19,940 --> 00:08:28,670
So nested test package, Sarsae, that is the directory that we found indexed JS file in, when we fetch

126
00:08:28,670 --> 00:08:34,159
that index file, then inside there is a required statement for that Helper's utility JS file.

127
00:08:34,850 --> 00:08:40,340
That is when we are going to start to apply the second rule, we are now attempting to find some other

128
00:08:40,340 --> 00:08:41,860
file inside that package.

129
00:08:41,870 --> 00:08:45,410
In this case, it is the utils or helper's.

130
00:08:46,820 --> 00:08:48,230
Utils, not just file.

131
00:08:48,860 --> 00:08:52,760
Now we're going to apply this different rule because we are not trying to affect the main file of a

132
00:08:52,760 --> 00:08:53,290
package.

133
00:08:53,990 --> 00:09:00,980
So in this case, we would generate our URL by doing unpackaged dotcom plus wherever we got the last

134
00:09:00,980 --> 00:09:07,250
file from the directory of the last fetched file or the one that is trying to import this, the path

135
00:09:07,250 --> 00:09:08,930
to the last fetched file.

136
00:09:10,240 --> 00:09:16,330
Is that right there, that is the directory, the last fetched file, so we need to somehow get access

137
00:09:16,330 --> 00:09:21,340
to that and we're going to join that together with the require statement that we are currently trying

138
00:09:21,340 --> 00:09:21,820
to resolve.

139
00:09:21,850 --> 00:09:23,350
So pretty much that string right there.

140
00:09:23,990 --> 00:09:27,460
So if we join these three things together, we end up with you.

141
00:09:27,610 --> 00:09:29,200
All of this right here.

142
00:09:29,210 --> 00:09:36,310
We end up with unpackaged dotcom nested test package, Sarsae Helper's utils dojos, which is the correct

143
00:09:36,310 --> 00:09:36,720
URL.

144
00:09:37,150 --> 00:09:38,890
We try to visit that inside of our browser.

145
00:09:41,660 --> 00:09:47,270
We do, in fact, load up the correct file, so that's it, this is kind of like the final version of

146
00:09:47,270 --> 00:09:48,080
our algorithm.

147
00:09:48,590 --> 00:09:49,790
This is what we really need to do.

148
00:09:50,390 --> 00:09:56,720
The big stretch here is making sure that we can somehow communicate this last fetched directory to the

149
00:09:56,720 --> 00:09:58,460
next file that we are attempting to fetch.

150
00:09:58,700 --> 00:09:59,530
That is the hard part.

151
00:09:59,540 --> 00:10:04,700
We need to essentially, whenever we get the file or any subsequent file out of a package, we need

152
00:10:04,700 --> 00:10:10,760
to find where we got that file from and somehow provide it to the resolution of the next require statement.

153
00:10:10,970 --> 00:10:12,050
That is the challenge here.

154
00:10:12,590 --> 00:10:16,970
Fortunately, this is going to be pretty easy because this is a feature that is built into built or

155
00:10:17,000 --> 00:10:19,430
there's kind of something inside of SBL that's going to make this easy.

156
00:10:19,820 --> 00:10:23,000
But it's understanding what we have to do here that makes this really challenging.

157
00:10:23,360 --> 00:10:27,560
Hopefully now you can start to understand why if we just wrote out all the code for this, it would

158
00:10:27,560 --> 00:10:29,630
have just been like, OK, no idea what's going on here.

159
00:10:29,780 --> 00:10:34,430
You really have to go through all this stuff step by step, see the kind of failing cases and fix the

160
00:10:34,430 --> 00:10:35,860
code up step by step.

161
00:10:36,500 --> 00:10:40,130
So now that we've got a better idea of what's going on, implementation in the next video.