1
00:00:00,960 --> 00:00:04,800
We might now have a reasonable idea of what's going on, but we need to figure out how to write out

2
00:00:04,800 --> 00:00:06,340
some code to actually solve this.

3
00:00:06,360 --> 00:00:08,290
How do we actually put together the implementation?

4
00:00:08,850 --> 00:00:11,310
Let's just break this down into a series of different steps.

5
00:00:11,640 --> 00:00:17,160
The first thing that very clearly needs to occur, we need to detect whenever we get redirected while

6
00:00:17,160 --> 00:00:18,640
attempting to fetch a file.

7
00:00:19,110 --> 00:00:24,000
So if we attempt to fetch something like nested test package and we get redirected to something like

8
00:00:24,000 --> 00:00:27,370
this right here, how do we detect that and how do we actually get that path?

9
00:00:27,960 --> 00:00:33,330
Let's just try to console log out this redirecting you URL and then maybe move from there.

10
00:00:34,140 --> 00:00:36,450
So for that, I'm going to go back over to my plug in.

11
00:00:37,170 --> 00:00:40,710
I'm going to find my onload function down here.

12
00:00:42,530 --> 00:00:46,130
I'm going to go down to where we make this request to actually fetch a file.

13
00:00:47,040 --> 00:00:51,690
And then in addition to pulling off the data from the response we get back, I'm going to also pull

14
00:00:52,290 --> 00:00:53,640
a property called Request.

15
00:00:54,210 --> 00:00:57,570
And right now, let's do a log of request.

16
00:00:59,190 --> 00:01:03,360
And then going to go back over to my browser, refresh and submit.

17
00:01:05,290 --> 00:01:08,380
So eventually I should see the council log or that request.

18
00:01:09,400 --> 00:01:14,610
Sometimes unpackaged hangs up just a little bit, so request is still hanging, yep, there it is.

19
00:01:14,620 --> 00:01:15,850
There's the response right there.

20
00:01:16,220 --> 00:01:17,850
So here's the console request.

21
00:01:18,160 --> 00:01:19,300
I'm going to expand that.

22
00:01:19,630 --> 00:01:23,440
And then inside of here, you can scroll down a little bit and notice that inside of here there is a

23
00:01:23,440 --> 00:01:24,160
response.

24
00:01:24,160 --> 00:01:29,530
You RL property, this property right here describes where we were redirected to.

25
00:01:29,980 --> 00:01:33,850
And so inside this URL very clearly is that path that we need.

26
00:01:34,370 --> 00:01:36,150
This is the Sarsae.

27
00:01:36,160 --> 00:01:39,910
We've also got the full package name and the version that we're actually getting as well.

28
00:01:40,450 --> 00:01:47,410
So we need to somehow extract that part of the euro right there and then somehow provide that to the

29
00:01:47,410 --> 00:01:50,480
resolution of the next file inside this package.

30
00:01:50,680 --> 00:01:51,730
That's what we really have to do.

31
00:01:52,620 --> 00:01:58,140
Let's first focus on just extracting that one single part of the URL to do so.

32
00:01:58,170 --> 00:01:59,310
I'm going to copy this URL.

33
00:02:03,110 --> 00:02:09,320
You're my counsel, and once again, I'm going to build up a new umbrella object and paste that URL

34
00:02:09,320 --> 00:02:09,979
in like some.

35
00:02:11,190 --> 00:02:16,520
So if I run that as it stands right now, you'll see that I do get out a path name right here that has

36
00:02:16,520 --> 00:02:21,410
just that part portion, but the name also includes the file that I fetched right there at the very

37
00:02:21,410 --> 00:02:21,670
end.

38
00:02:21,890 --> 00:02:23,540
I don't really want to include the file name.

39
00:02:23,540 --> 00:02:28,400
I want to get just the path where we fetch this file that I want to get just that part right there.

40
00:02:29,000 --> 00:02:34,030
So to make sure that we get just that part, we can update this new URL so I can do a little up arrow.

41
00:02:34,790 --> 00:02:40,520
But now, as the first argument to this, I'm going to put in a dot inside of a string like some.

42
00:02:42,550 --> 00:02:43,330
Now, if I were on that.

43
00:02:44,380 --> 00:02:50,470
My path name will now be just the directory that we found the main file of this package at, so just

44
00:02:50,470 --> 00:02:54,700
the nested test package, Sarsae, definitely what we want right there.

45
00:02:56,050 --> 00:03:00,730
Now that we have extracted this very particular part of the URL, we need to figure out how to take

46
00:03:00,730 --> 00:03:04,750
that part and somehow provide it to the resolution of this next file.

47
00:03:05,200 --> 00:03:12,010
Like I mentioned, there is kind of a tool inside of us build for facilitating this back inside my editor.

48
00:03:13,820 --> 00:03:21,230
I'm going to find this object returning and I'm going to add in a Resolve Dir property resolve directory

49
00:03:21,260 --> 00:03:24,440
is going to be provided to the next file that we tried to require.

50
00:03:24,740 --> 00:03:28,310
And it's going to describe where we found this original file.

51
00:03:28,340 --> 00:03:34,790
In other words, where did we find nested test package so we can communicate where we found nested nested

52
00:03:34,790 --> 00:03:40,310
test package at to the next file that we tried to resolve this resolved property right here.

53
00:03:40,460 --> 00:03:44,450
We are using it exactly as intended, essentially, if resolved.

54
00:03:44,660 --> 00:03:46,010
I'm going to put in new U.

55
00:03:46,040 --> 00:03:46,700
RL.

56
00:03:48,350 --> 00:03:50,600
Slash response.

57
00:03:50,780 --> 00:03:58,130
We got to do request dot response well, and then remember, we want only the name property of their.

58
00:04:00,380 --> 00:04:02,420
And then going to your comment at that blog.

59
00:04:03,830 --> 00:04:06,500
OK, let's now save this look back over.

60
00:04:07,700 --> 00:04:09,350
I'm going to do another simit.

61
00:04:11,270 --> 00:04:16,519
Again, it's going to hang here for just a minute, like I said, sometimes unpackaged things ever so

62
00:04:16,519 --> 00:04:17,000
slightly.

63
00:04:18,320 --> 00:04:21,800
We're going to be eventually adding some code to kind of handle that case, so don't sweat it.

64
00:04:22,620 --> 00:04:23,330
All right, there we go.

65
00:04:23,360 --> 00:04:30,620
So now here's the unresolved for our helper's utils file, and you'll notice the result dir property

66
00:04:30,620 --> 00:04:32,600
that is shown up inside of an resolve.

67
00:04:33,200 --> 00:04:36,200
So that is inside of our ED, just to be really clear.

68
00:04:37,760 --> 00:04:38,840
That is unresolved.

69
00:04:38,870 --> 00:04:45,470
We're looking at this council right here for our utils file, and there is on there a resolved property

70
00:04:45,620 --> 00:04:49,440
that describes where we found the last file that we were looking for.

71
00:04:49,940 --> 00:04:51,110
That's exactly what we want.

72
00:04:51,560 --> 00:04:56,480
So we're now being told during the resolution of this process or this file right here, we're being

73
00:04:56,480 --> 00:04:59,180
told where we found the last file.

74
00:04:59,580 --> 00:05:03,880
So now all we have to do is update our generation of the path for this file.

75
00:05:04,040 --> 00:05:10,580
We need to update it to unpackaged outcome, plus where we found the last file, plus the relative directory.

76
00:05:12,850 --> 00:05:13,810
OK, so for that.

77
00:05:14,720 --> 00:05:15,830
Back inside of our Ed.

78
00:05:17,830 --> 00:05:23,020
This if statement right here is where we handled the resolution of relative files, because, remember,

79
00:05:23,020 --> 00:05:26,570
we've got that includes and includes dogs.

80
00:05:27,490 --> 00:05:30,100
So we have to update our generation right here.

81
00:05:31,240 --> 00:05:33,490
We're going to update it to.

82
00:05:34,720 --> 00:05:39,590
Our export path, and then we're going to take as a second argument, I'm going to delete that important

83
00:05:39,590 --> 00:05:45,770
stuff and we'll update it to Boleyn's unpackaged dotcom.

84
00:05:47,360 --> 00:05:49,650
Plus, Argott resolved.

85
00:05:50,300 --> 00:05:55,190
That's where we found the last file or the one that is attempting to require in this current file,

86
00:05:56,060 --> 00:05:58,250
plus a forward slash at the very end.

87
00:06:01,240 --> 00:06:02,020
Let's save this.

88
00:06:03,530 --> 00:06:08,670
Go back over, refresh, submit a it worked.

89
00:06:08,690 --> 00:06:09,620
Take a look at that.

90
00:06:10,510 --> 00:06:17,270
So now we are correctly resolving the path to that utils file so we can see the very last onload, here

91
00:06:17,960 --> 00:06:22,930
is the URL that we're trying to fetch utils at and it correctly has that entire SIRC threshold.

92
00:06:23,060 --> 00:06:24,890
There's utils inside of it.

93
00:06:25,690 --> 00:06:26,240
This looks good.

94
00:06:26,250 --> 00:06:27,620
This is exactly what we want.

95
00:06:27,630 --> 00:06:33,170
We are now bundling and module that has some nested in a file inside of it.

96
00:06:34,920 --> 00:06:39,870
The last very small change that off the top of my head, I think we can make here, I don't quite recall.

97
00:06:40,380 --> 00:06:41,340
I think this will work.

98
00:06:42,090 --> 00:06:46,740
It's kind of nasty to have to put on this trailing forwards right here in that code that we just wrote.

99
00:06:46,920 --> 00:06:51,330
I think we can actually remove that and have it just be unpackaged dotcom plus the result.

100
00:06:51,360 --> 00:06:53,910
Or if we also go down to the very bottom.

101
00:06:54,720 --> 00:06:59,910
And when we get this new URL right here, rather than doing a I think we can do just a dot.

102
00:07:01,490 --> 00:07:06,580
So if we do that and then flip back over, let's try doing this again now, OK, never mind.

103
00:07:06,590 --> 00:07:07,220
Totally wrong.

104
00:07:07,850 --> 00:07:09,020
I was just off the top of my head.

105
00:07:09,360 --> 00:07:10,820
It's going to undo both those changes.

106
00:07:11,600 --> 00:07:16,310
I want to have the slash down here, and I do want the slash right there as well.

107
00:07:17,090 --> 00:07:18,090
Make sure that still works.

108
00:07:18,470 --> 00:07:18,820
Yep.

109
00:07:18,830 --> 00:07:19,250
There we go.

110
00:07:20,430 --> 00:07:24,720
OK, I apologize for that last little digression, I was pretty sure we could do that, but no, I guess

111
00:07:24,720 --> 00:07:24,990
not.

112
00:07:26,250 --> 00:07:31,860
Well, that's pretty much it, we've now got the ability to bundle up some nested package stuff, so

113
00:07:31,860 --> 00:07:37,260
now I think that we're in a pretty good state and we can start to test out possibly some real packages,

114
00:07:37,560 --> 00:07:40,410
like things like react and maybe axios as well.

115
00:07:40,770 --> 00:07:41,790
Let's take a pause right here.

116
00:07:41,910 --> 00:07:46,170
Make sure some other different random packages work as well, and then eventually come back into this

117
00:07:46,170 --> 00:07:48,770
file and do some code cleanup on our plug in as well.