1
00:00:01,690 --> 00:00:04,689
We've got our blood service available inside of unclick.

2
00:00:05,320 --> 00:00:06,490
I'm going to remove that comes log.

3
00:00:07,360 --> 00:00:10,870
Well, then do a ref current transform.

4
00:00:11,810 --> 00:00:16,250
This transfer function, as I mentioned back when we looked at that console log, is only going to do

5
00:00:16,250 --> 00:00:16,790
some transport.

6
00:00:17,240 --> 00:00:22,490
It will not do any bundling or join up any different modules, handle import statements or anything

7
00:00:22,490 --> 00:00:23,030
like that.

8
00:00:23,810 --> 00:00:27,210
The first argument to transform is going to be the code that we want to transport.

9
00:00:27,950 --> 00:00:30,510
So I'm going to put in our what do we call it?

10
00:00:30,510 --> 00:00:31,250
Do we call it code?

11
00:00:31,610 --> 00:00:35,440
Now we call the input that is the X that we want to transpire.

12
00:00:36,500 --> 00:00:37,660
That's going be our first argument.

13
00:00:38,480 --> 00:00:42,650
The second argument is going to be a couple of options to use during the transpiring process.

14
00:00:43,320 --> 00:00:48,680
We're going to first put in an option of loader, which is going to tell us build what kind of code

15
00:00:48,680 --> 00:00:49,610
we are providing to it.

16
00:00:49,940 --> 00:00:56,180
Yes, build can handle different types of code, such as JavaScript, JavaScript, with JS, X and TypeScript

17
00:00:56,180 --> 00:00:56,720
as well.

18
00:00:57,110 --> 00:01:01,670
So we're going to specifically say that this is going to be a JavaScript that has just inside of it.

19
00:01:01,940 --> 00:01:04,819
And we do that by providing X as a string.

20
00:01:06,680 --> 00:01:10,070
Then we're also going to put in a target of twenty fifteen.

21
00:01:11,950 --> 00:01:18,100
This is used for the transpiring process, it's built can do that transporting stuff which remember

22
00:01:18,100 --> 00:01:24,040
is going to handle taking advanced or fancy JavaScript syntax like spread syntax inside of an object

23
00:01:24,190 --> 00:01:29,590
or async, await stuff like that and turn it into other code that can be easily interpreted by any kind

24
00:01:29,590 --> 00:01:30,370
of modern browser.

25
00:01:30,850 --> 00:01:36,760
This target right here is going to specify exactly what options we want to assume that it needs to transpire.

26
00:01:36,910 --> 00:01:42,100
So should it do spreads and syntax, should it transpired based in Kuwait and stuff like that?

27
00:01:42,460 --> 00:01:45,640
We'll take a look at the documentation around this target property in just a little bit.

28
00:01:46,700 --> 00:01:49,910
This entire transform operation is asynchronous in nature.

29
00:01:50,300 --> 00:01:54,500
I'm going to make sure that I marked the enclosing function with async I'll put in and a wait right

30
00:01:54,500 --> 00:01:54,800
there.

31
00:01:55,490 --> 00:01:59,270
And then finally, I'm going to sign the result to a variable that I will just call result.

32
00:02:00,560 --> 00:02:04,220
So once again, right now, we'll just do a council log of results and see what we get back.

33
00:02:06,120 --> 00:02:09,479
OK, another save look back over refresh.

34
00:02:10,350 --> 00:02:13,110
I'm going to click submit right away, and there's a result.

35
00:02:14,330 --> 00:02:22,460
So the result object, as any warnings that came out, a map, which is a source map and code, which

36
00:02:22,460 --> 00:02:25,850
is the transpired code, the actual output of the entire process.

37
00:02:26,570 --> 00:02:32,300
So we're going to take that code right there and use it to update our code of state.

38
00:02:35,960 --> 00:02:41,870
I'm going to take console log, I'm going to remove it and replace it with that code result, that code.

39
00:02:42,710 --> 00:02:47,210
So after we do the transpiring, we're going to update the code piece of state that will cause our component

40
00:02:47,210 --> 00:02:47,840
to render.

41
00:02:48,080 --> 00:02:51,020
And we should show that code inside that element.

42
00:02:52,190 --> 00:02:54,110
Let's save this and do one last test.

43
00:02:56,290 --> 00:03:01,270
All right, so I'm going to do a quick refresh and then going to write in some amount of juice inside

44
00:03:01,270 --> 00:03:06,160
of here, so I'll put in some kind of, like, app component, maybe a div.

45
00:03:07,680 --> 00:03:08,610
That says hi there.

46
00:03:10,370 --> 00:03:13,340
I'll then submit and hey, look at that.

47
00:03:14,180 --> 00:03:19,970
So there is the transpired code, all that jazz has been removed and replaced with the equivalent JavaScript

48
00:03:20,210 --> 00:03:21,860
lets you recreate element.

49
00:03:22,730 --> 00:03:25,380
We can also try other advanced forms of JavaScript.

50
00:03:25,400 --> 00:03:30,230
So like I just mentioned, yes, build can handle async awaits and it will chans Pilet because we put

51
00:03:30,230 --> 00:03:32,240
in a target here of twenty fifteen.

52
00:03:32,820 --> 00:03:36,680
So if I write out some kind of arrow function and market as async.

53
00:03:37,710 --> 00:03:40,260
And then transpired that this is the result.

54
00:03:40,800 --> 00:03:46,380
So this is what is needed to handle async a wait inside of an environment that does not natively support

55
00:03:46,380 --> 00:03:46,560
it.

56
00:03:47,620 --> 00:03:53,740
We can do something very similar with spread syntax as well, so if I put in some object and then that

57
00:03:53,750 --> 00:03:58,020
spread syntax, which is dot, dot, dot, and then put in something like a..

58
00:03:58,060 --> 00:03:59,080
Color red.

59
00:04:00,560 --> 00:04:01,460
And submit that.

60
00:04:03,040 --> 00:04:06,230
I probably need to actually assign this to a variable.

61
00:04:06,760 --> 00:04:07,260
There we go.

62
00:04:08,490 --> 00:04:11,890
So it will also handle spreads into a lot of other things like that.

63
00:04:12,600 --> 00:04:17,760
So pretty clear that Eskild is handling transpiring pretty darn well, but we still have to make sure

64
00:04:17,790 --> 00:04:20,490
there were also able to do some bundling, too.

65
00:04:21,060 --> 00:04:27,120
If we put in any kind of import statement like, let's say import, react from react and then submit

66
00:04:27,120 --> 00:04:27,470
that.

67
00:04:27,750 --> 00:04:29,970
Well, that is clearly not really handled right now.

68
00:04:30,360 --> 00:04:34,770
So we need to add in some additional code to make sure that we deal with this bundling aspect as well.

69
00:04:35,370 --> 00:04:36,630
That's going to be a little bit more involved.

70
00:04:36,990 --> 00:04:40,250
Let's take a pause right here and figure out how to deal with bundling with us.

71
00:04:40,290 --> 00:04:41,490
Build in just a moment.