The next thing I would like to do inside of our index, not to fail is refactor out all the stuff around
us, build or at least as much as possible right now inside of our app component.
We have a tremendous amount of code dedicated to starting up.
It's built and then eventually using it to actually build up our bundle.
Remember, at some point in time, we were going to allow multiple code EDS to be visible on the screen
at any given time.
And that means that we might have to execute all this bundling logic inside of many different components.
So I think that we need to kind of pull this stuff out around all the bundling stuff so we can use it
from many different locations inside of our app to get started inside my SIRC directory, I'm going
to make a new file or a new file, but a new folder where we go old bundler.
And inside there I'll make a new file called Index Dots.
So the whole goal of this thing is to essentially wrap up all that logic around us build.
We might want to spend a little bit of time to think about what kind of API we want to expose from this
file.
So in other words, what are we really exporting here?
What are we going to make available to the outside world?
Well, I think that we might just want to stay kind of simple.
Maybe we should try to export default some kind of function.
That receives some code as a string, so this would be maybe code, maybe we should rename it to code.
That's kind of like the input to our bundler.
This is whatever code the user wrote into that.
Code editor.
So we're going to receive that into this function and then inside of here, we should attempt to probably
initialize its build and then after making sure that it has been initialized, we can then run the bundle
and send back whatever result we got.
So kind of straightforward, but I just want to think a little bit about how we're going to really assemble
that API.
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
once again, some stuff out of our index file.
Go back inside of Index DOT TSX.
I'm going to first cut out that important star as it's built.
And paste out the top.
Next up, we can probably take all these plug ins.
So plug in one plug into and cut those and paste those.
We have some broken import statements here.
That's because we are now inside the bundler directory, so we have to go up one folder and up one folder.
All right, after that, we can probably start to move over some of the stuff around initializing s
build and whatnot.
I'm going to first extract this, await us, build, start service.
I'm going to cut all that.
I'm not going to take along the current and I'm going to move it on over here.
And right away, you'll notice that we've got a little air around a so let's make sure we wrap the or
marked inclosing function as a async.
Now, a quick reminder here, something that we didn't super clearly discuss, but I bet you could definitely
guess we only really have to initialize.
Yes, build one single time.
When we call start service, we get back that kind of bundler thing that we can use to actually bundle
a user's code so we don't need to call start service.
Every single time someone calls this function, we might instead want to take the result of this and
maybe assign it to some variable defined right above our function.
So if we take a look or mouseover start service right here, you'll notice that we get back something
of type.
Yes, build service.
So I'm going to define a variable up here of service and I'm going to markets type as build dot service
like so.
Then inside of our function, I'm going to do a little check whenever it gets called, I'm going to
say, if not service.
In other words, if that thing is not defined, if this is the very first time we have ran this function,
then I'm going to go ahead and attempt to start the service and assign the result to the service variable.
So I'll say service is like so.
So now the very first time that we call this function, we're going to check to see if this service
has already been started.
If it has fantastic, we'll skip over the entire statement.
Otherwise, we'll go through the process of starting up the service and then end up after the statement.
Either way, then down here, we are guaranteed to have a fully initialized service and we can start
to use it to do our bundling or whatever else.
OK, now we've got the service taken care of, we can clean up all this stuff back inside of our component
around that start service function, we can clean up everything around owling, start service from the
effect.
And then finally, last thing I think we really need to move over is all the stuff that does the actual
bundling.
So I'm going to take this a weight, blah, blah, blah, cut all that.
Go back over to inducts.
So this is our Bandler file.
I'm going to paste everything right there.
We no longer have a current thing because we're no longer inside of our component, so instead we want
to reference service Duck-billed, we'll change that to service.
We need to make sure that we update that input variable right there so we're no longer we're no longer
have access to anything called input.
Instead, the that we want to try to transpire and bundle is called raw code.
It's going to rename that to code.
When we call build, we're going to get back that result object, you might recall.
So I'm going to sign that to result.
And then after we do all that bundling, hopefully successfully at the very bottom, we can then return.
The same kind of thing right here, remember, we got a result that's an object, it has an output output
files, property, and inside that array, the first element as a text property, and that is the actual
output of all of our bundling and transporting stuff.
So we can't really return.
Result got out, put files at zero dot text.
And that should be it now, whenever you want to bundle our coat, all we got to do all this function,
if we have not initialized our service, it will be done.
We're then going to bundle our code, return the result, and that's pretty much it.
OK, so let's save this.
I'll go back over to my app component.
We have to do a little bit more clean up inside of here, so we no longer need anything around that
roof that we had created previously to store a reference to that service so we can delete all that stuff
around ref.
We can't delete the ref itself.
We're still going to need our set code function, so I'm going to leave that around for just a moment.
At the top, let's import our bundler.
I'll call it simply bundle from bundler.
So this is our function that's going to create a bundle.
Then inside of unclick.
We'll do const output is a weight bundle, and that will pass in the input that the user typed into
the code editor.
So that's going to be that input variable or that input piece of state right there.
We're going to bundle input, will then take the output, which is remember the actual code that is
coming out of our bundling process and use that to update our code piece of state output in output like
so.
And that should be it will now have a component is looking much more straightforward, a lot cleaner,
definitely pulled out a lot of logic very successfully.
Of course, we should probably still do a test to make sure everything works as expected.
So back inside my browser, click refresh, everything still loads up.
It looks like I do have a couple of warnings here, so probably some stuff to take care of.
No problem.
I'm going to update the text inside the code editor to once again a console log of one, two, three.
And if I submit that, yep.
Looks like I'm still able to build up that bundle and then execute it if I do.
And import of react from react.
And then maybe Konza logorrhea, let's just make sure that all that bundling logic still works as well.
I can submit that still works too.
OK, I'd say that this is definitely a pretty good success.
Let's take a pause right here.
Like we saw, we do have to do a little bit of cleanup here and there, but that should only take a
moment or two in the next video.