1 00:00:00,980 --> 00:00:06,820 The next thing I would like to do inside of our index, not to fail is refactor out all the stuff around 2 00:00:06,830 --> 00:00:10,920 us, build or at least as much as possible right now inside of our app component. 3 00:00:10,940 --> 00:00:13,860 We have a tremendous amount of code dedicated to starting up. 4 00:00:13,870 --> 00:00:18,320 It's built and then eventually using it to actually build up our bundle. 5 00:00:18,660 --> 00:00:22,850 Remember, at some point in time, we were going to allow multiple code EDS to be visible on the screen 6 00:00:22,850 --> 00:00:23,750 at any given time. 7 00:00:24,080 --> 00:00:28,910 And that means that we might have to execute all this bundling logic inside of many different components. 8 00:00:29,370 --> 00:00:33,140 So I think that we need to kind of pull this stuff out around all the bundling stuff so we can use it 9 00:00:33,140 --> 00:00:38,570 from many different locations inside of our app to get started inside my SIRC directory, I'm going 10 00:00:38,570 --> 00:00:44,090 to make a new file or a new file, but a new folder where we go old bundler. 11 00:00:44,870 --> 00:00:48,980 And inside there I'll make a new file called Index Dots. 12 00:00:49,580 --> 00:00:55,340 So the whole goal of this thing is to essentially wrap up all that logic around us build. 13 00:00:55,820 --> 00:00:59,840 We might want to spend a little bit of time to think about what kind of API we want to expose from this 14 00:00:59,840 --> 00:01:00,200 file. 15 00:01:00,230 --> 00:01:02,600 So in other words, what are we really exporting here? 16 00:01:02,600 --> 00:01:04,879 What are we going to make available to the outside world? 17 00:01:05,360 --> 00:01:07,790 Well, I think that we might just want to stay kind of simple. 18 00:01:07,790 --> 00:01:12,350 Maybe we should try to export default some kind of function. 19 00:01:13,700 --> 00:01:21,050 That receives some code as a string, so this would be maybe code, maybe we should rename it to code. 20 00:01:21,290 --> 00:01:23,760 That's kind of like the input to our bundler. 21 00:01:23,780 --> 00:01:26,270 This is whatever code the user wrote into that. 22 00:01:27,120 --> 00:01:27,870 Code editor. 23 00:01:28,870 --> 00:01:33,040 So we're going to receive that into this function and then inside of here, we should attempt to probably 24 00:01:33,040 --> 00:01:38,440 initialize its build and then after making sure that it has been initialized, we can then run the bundle 25 00:01:38,620 --> 00:01:40,540 and send back whatever result we got. 26 00:01:40,960 --> 00:01:44,710 So kind of straightforward, but I just want to think a little bit about how we're going to really assemble 27 00:01:44,710 --> 00:01:45,340 that API. 28 00:01:46,430 --> 00:01:50,820 So now we've got a better idea of what's going to go on inside this file, let's start to cut and paste 29 00:01:50,820 --> 00:01:53,460 once again, some stuff out of our index file. 30 00:01:54,370 --> 00:01:56,130 Go back inside of Index DOT TSX. 31 00:01:57,450 --> 00:02:01,680 I'm going to first cut out that important star as it's built. 32 00:02:03,060 --> 00:02:04,200 And paste out the top. 33 00:02:05,700 --> 00:02:08,009 Next up, we can probably take all these plug ins. 34 00:02:09,259 --> 00:02:13,310 So plug in one plug into and cut those and paste those. 35 00:02:14,240 --> 00:02:16,370 We have some broken import statements here. 36 00:02:16,880 --> 00:02:23,180 That's because we are now inside the bundler directory, so we have to go up one folder and up one folder. 37 00:02:28,460 --> 00:02:32,950 All right, after that, we can probably start to move over some of the stuff around initializing s 38 00:02:32,960 --> 00:02:34,070 build and whatnot. 39 00:02:34,910 --> 00:02:39,410 I'm going to first extract this, await us, build, start service. 40 00:02:39,440 --> 00:02:40,480 I'm going to cut all that. 41 00:02:41,300 --> 00:02:45,620 I'm not going to take along the current and I'm going to move it on over here. 42 00:02:48,160 --> 00:02:52,330 And right away, you'll notice that we've got a little air around a so let's make sure we wrap the or 43 00:02:52,330 --> 00:02:54,520 marked inclosing function as a async. 44 00:02:55,350 --> 00:02:59,730 Now, a quick reminder here, something that we didn't super clearly discuss, but I bet you could definitely 45 00:02:59,730 --> 00:03:02,130 guess we only really have to initialize. 46 00:03:02,130 --> 00:03:03,570 Yes, build one single time. 47 00:03:04,110 --> 00:03:09,060 When we call start service, we get back that kind of bundler thing that we can use to actually bundle 48 00:03:09,060 --> 00:03:12,990 a user's code so we don't need to call start service. 49 00:03:12,990 --> 00:03:18,540 Every single time someone calls this function, we might instead want to take the result of this and 50 00:03:18,540 --> 00:03:22,400 maybe assign it to some variable defined right above our function. 51 00:03:23,010 --> 00:03:27,330 So if we take a look or mouseover start service right here, you'll notice that we get back something 52 00:03:27,330 --> 00:03:27,930 of type. 53 00:03:28,320 --> 00:03:29,940 Yes, build service. 54 00:03:30,300 --> 00:03:38,760 So I'm going to define a variable up here of service and I'm going to markets type as build dot service 55 00:03:39,330 --> 00:03:39,870 like so. 56 00:03:40,870 --> 00:03:45,160 Then inside of our function, I'm going to do a little check whenever it gets called, I'm going to 57 00:03:45,160 --> 00:03:47,800 say, if not service. 58 00:03:47,800 --> 00:03:51,910 In other words, if that thing is not defined, if this is the very first time we have ran this function, 59 00:03:52,390 --> 00:03:57,880 then I'm going to go ahead and attempt to start the service and assign the result to the service variable. 60 00:03:58,030 --> 00:04:00,520 So I'll say service is like so. 61 00:04:02,300 --> 00:04:06,200 So now the very first time that we call this function, we're going to check to see if this service 62 00:04:06,200 --> 00:04:07,100 has already been started. 63 00:04:07,100 --> 00:04:10,070 If it has fantastic, we'll skip over the entire statement. 64 00:04:10,230 --> 00:04:14,300 Otherwise, we'll go through the process of starting up the service and then end up after the statement. 65 00:04:14,300 --> 00:04:19,640 Either way, then down here, we are guaranteed to have a fully initialized service and we can start 66 00:04:19,640 --> 00:04:22,160 to use it to do our bundling or whatever else. 67 00:04:23,810 --> 00:04:29,120 OK, now we've got the service taken care of, we can clean up all this stuff back inside of our component 68 00:04:29,120 --> 00:04:34,550 around that start service function, we can clean up everything around owling, start service from the 69 00:04:34,680 --> 00:04:35,120 effect. 70 00:04:37,100 --> 00:04:41,630 And then finally, last thing I think we really need to move over is all the stuff that does the actual 71 00:04:41,630 --> 00:04:42,110 bundling. 72 00:04:42,860 --> 00:04:46,520 So I'm going to take this a weight, blah, blah, blah, cut all that. 73 00:04:48,020 --> 00:04:50,010 Go back over to inducts. 74 00:04:50,030 --> 00:04:51,950 So this is our Bandler file. 75 00:04:53,450 --> 00:04:55,040 I'm going to paste everything right there. 76 00:04:56,020 --> 00:05:01,270 We no longer have a current thing because we're no longer inside of our component, so instead we want 77 00:05:01,270 --> 00:05:05,170 to reference service Duck-billed, we'll change that to service. 78 00:05:07,160 --> 00:05:11,780 We need to make sure that we update that input variable right there so we're no longer we're no longer 79 00:05:11,780 --> 00:05:13,100 have access to anything called input. 80 00:05:13,100 --> 00:05:16,520 Instead, the that we want to try to transpire and bundle is called raw code. 81 00:05:16,880 --> 00:05:18,740 It's going to rename that to code. 82 00:05:20,950 --> 00:05:24,250 When we call build, we're going to get back that result object, you might recall. 83 00:05:24,280 --> 00:05:25,920 So I'm going to sign that to result. 84 00:05:26,440 --> 00:05:31,780 And then after we do all that bundling, hopefully successfully at the very bottom, we can then return. 85 00:05:33,070 --> 00:05:37,540 The same kind of thing right here, remember, we got a result that's an object, it has an output output 86 00:05:37,540 --> 00:05:43,930 files, property, and inside that array, the first element as a text property, and that is the actual 87 00:05:43,930 --> 00:05:46,360 output of all of our bundling and transporting stuff. 88 00:05:47,180 --> 00:05:48,730 So we can't really return. 89 00:05:49,800 --> 00:05:54,600 Result got out, put files at zero dot text. 90 00:05:55,600 --> 00:06:01,090 And that should be it now, whenever you want to bundle our coat, all we got to do all this function, 91 00:06:01,900 --> 00:06:04,330 if we have not initialized our service, it will be done. 92 00:06:04,750 --> 00:06:08,140 We're then going to bundle our code, return the result, and that's pretty much it. 93 00:06:09,280 --> 00:06:10,480 OK, so let's save this. 94 00:06:11,770 --> 00:06:13,270 I'll go back over to my app component. 95 00:06:13,300 --> 00:06:17,770 We have to do a little bit more clean up inside of here, so we no longer need anything around that 96 00:06:17,770 --> 00:06:22,360 roof that we had created previously to store a reference to that service so we can delete all that stuff 97 00:06:22,360 --> 00:06:22,950 around ref. 98 00:06:23,680 --> 00:06:25,060 We can't delete the ref itself. 99 00:06:27,420 --> 00:06:31,140 We're still going to need our set code function, so I'm going to leave that around for just a moment. 100 00:06:31,470 --> 00:06:33,660 At the top, let's import our bundler. 101 00:06:35,810 --> 00:06:39,080 I'll call it simply bundle from bundler. 102 00:06:39,410 --> 00:06:41,390 So this is our function that's going to create a bundle. 103 00:06:42,570 --> 00:06:43,920 Then inside of unclick. 104 00:06:45,760 --> 00:06:53,110 We'll do const output is a weight bundle, and that will pass in the input that the user typed into 105 00:06:53,110 --> 00:06:54,010 the code editor. 106 00:06:54,010 --> 00:06:57,130 So that's going to be that input variable or that input piece of state right there. 107 00:06:57,560 --> 00:07:02,290 We're going to bundle input, will then take the output, which is remember the actual code that is 108 00:07:02,290 --> 00:07:08,500 coming out of our bundling process and use that to update our code piece of state output in output like 109 00:07:08,500 --> 00:07:08,800 so. 110 00:07:09,660 --> 00:07:15,540 And that should be it will now have a component is looking much more straightforward, a lot cleaner, 111 00:07:15,930 --> 00:07:18,240 definitely pulled out a lot of logic very successfully. 112 00:07:18,420 --> 00:07:21,450 Of course, we should probably still do a test to make sure everything works as expected. 113 00:07:22,050 --> 00:07:26,100 So back inside my browser, click refresh, everything still loads up. 114 00:07:26,250 --> 00:07:29,900 It looks like I do have a couple of warnings here, so probably some stuff to take care of. 115 00:07:29,910 --> 00:07:30,510 No problem. 116 00:07:31,050 --> 00:07:35,490 I'm going to update the text inside the code editor to once again a console log of one, two, three. 117 00:07:36,270 --> 00:07:38,400 And if I submit that, yep. 118 00:07:38,400 --> 00:07:42,810 Looks like I'm still able to build up that bundle and then execute it if I do. 119 00:07:42,810 --> 00:07:45,990 And import of react from react. 120 00:07:46,980 --> 00:07:50,790 And then maybe Konza logorrhea, let's just make sure that all that bundling logic still works as well. 121 00:07:51,540 --> 00:07:53,520 I can submit that still works too. 122 00:07:54,170 --> 00:07:56,820 OK, I'd say that this is definitely a pretty good success. 123 00:07:57,530 --> 00:07:58,620 Let's take a pause right here. 124 00:07:58,620 --> 00:08:02,700 Like we saw, we do have to do a little bit of cleanup here and there, but that should only take a 125 00:08:02,700 --> 00:08:04,050 moment or two in the next video.