We've got our blood service available inside of unclick.
I'm going to remove that comes log.
Well, then do a ref current transform.
This transfer function, as I mentioned back when we looked at that console log, is only going to do
some transport.
It will not do any bundling or join up any different modules, handle import statements or anything
like that.
The first argument to transform is going to be the code that we want to transport.
So I'm going to put in our what do we call it?
Do we call it code?
Now we call the input that is the X that we want to transpire.
That's going be our first argument.
The second argument is going to be a couple of options to use during the transpiring process.
We're going to first put in an option of loader, which is going to tell us build what kind of code
we are providing to it.
Yes, build can handle different types of code, such as JavaScript, JavaScript, with JS, X and TypeScript
as well.
So we're going to specifically say that this is going to be a JavaScript that has just inside of it.
And we do that by providing X as a string.
Then we're also going to put in a target of twenty fifteen.
This is used for the transpiring process, it's built can do that transporting stuff which remember
is going to handle taking advanced or fancy JavaScript syntax like spread syntax inside of an object
or async, await stuff like that and turn it into other code that can be easily interpreted by any kind
of modern browser.
This target right here is going to specify exactly what options we want to assume that it needs to transpire.
So should it do spreads and syntax, should it transpired based in Kuwait and stuff like that?
We'll take a look at the documentation around this target property in just a little bit.
This entire transform operation is asynchronous in nature.
I'm going to make sure that I marked the enclosing function with async I'll put in and a wait right
there.
And then finally, I'm going to sign the result to a variable that I will just call result.
So once again, right now, we'll just do a council log of results and see what we get back.
OK, another save look back over refresh.
I'm going to click submit right away, and there's a result.
So the result object, as any warnings that came out, a map, which is a source map and code, which
is the transpired code, the actual output of the entire process.
So we're going to take that code right there and use it to update our code of state.
I'm going to take console log, I'm going to remove it and replace it with that code result, that code.
So after we do the transpiring, we're going to update the code piece of state that will cause our component
to render.
And we should show that code inside that element.
Let's save this and do one last test.
All right, so I'm going to do a quick refresh and then going to write in some amount of juice inside
of here, so I'll put in some kind of, like, app component, maybe a div.
That says hi there.
I'll then submit and hey, look at that.
So there is the transpired code, all that jazz has been removed and replaced with the equivalent JavaScript
lets you recreate element.
We can also try other advanced forms of JavaScript.
So like I just mentioned, yes, build can handle async awaits and it will chans Pilet because we put
in a target here of twenty fifteen.
So if I write out some kind of arrow function and market as async.
And then transpired that this is the result.
So this is what is needed to handle async a wait inside of an environment that does not natively support
it.
We can do something very similar with spread syntax as well, so if I put in some object and then that
spread syntax, which is dot, dot, dot, and then put in something like a..
Color red.
And submit that.
I probably need to actually assign this to a variable.
There we go.
So it will also handle spreads into a lot of other things like that.
So pretty clear that Eskild is handling transpiring pretty darn well, but we still have to make sure
there were also able to do some bundling, too.
If we put in any kind of import statement like, let's say import, react from react and then submit
that.
Well, that is clearly not really handled right now.
So we need to add in some additional code to make sure that we deal with this bundling aspect as well.
That's going to be a little bit more involved.
Let's take a pause right here and figure out how to deal with bundling with us.
Build in just a moment.