In this lecture, we're going to import the WebAssembly file generated by a Web pack.
There are a couple of adjustments we're going to perform in our configuration files.
In the resource section of this lecture, I provide a link to a crate called W Asymm Bind Jen.
This crate will help us export robust functions into JavaScript.
We could write the code ourselves, but why reinvent the wheel?
This crate is the most popular package for helping us expose functions to JavaScript.
The same is true, vice versa.
We can expose JavaScript functions into rust.
You can think of it as the glue between Rust and JavaScript.
You may be thinking, What about the crate type option?
Any previous lecture?
We added the crate type setting to our configuration.
This setting allows us to communicate with any language other than rust.
However, Rust doesn't know which language we are trying to communicate with.
This crate will close that gap.
It allows direct communication between Rust and JavaScript.
We can download this crate by including it in our configuration file on the right side of the page.
There's a section called Install.
There's a code snippet we can click on to copy to our clipboard.
After copying this line, open the cargo configuration file.
We're going to paste this code below the dependences table.
Dependencies must be listed under the Dependencies Table.
The format for a dependency is the name, followed by the version number as of the recording of this
course.
The latest version is zero point two.
If you're using a newer version that's perfectly fine before compilation cargo will scan our configuration
file for dependencies.
If it finds a dependency, it'll automatically download the dependency before compiling our project.
We don't need to perform this step in the process manually.
Let's move on to importing WebAssembly.
Open the Minogue's file in your editor.
Importing a WebAssembly file is the same as importing a JavaScript file.
We can use the import function to import a file.
Importing a file is an asynchronous operation.
Therefore, we should add the async keyword to the initialize function.
Next, we're going to import the WebAssembly file at the top of the function, the fine a variable called
Rust AB, with an initial value of no.
Next, we're going to write a try catch block.
Importing a file can potentially fail.
We could stop the function from running before executing further code.
We are deciding to import rice before listening to events in our scripts.
It doesn't make sense to listen to events when Russ can't do anything with the data inside the try block.
Update the rust at variable to the import function with the await keyword.
The path to the file is the package directory.
The package directory is created by the Web assembly tools plug in one of the benefits of using this
plugin is exporting web assembly files inside this directory.
There's a file called Indexed on G.S., which is responsible for exporting WebAssembly.
It's an abstraction layer for importing WebAssembly as long as we import this file.
Our rust program will be imported into our function if this import fails.
We should handle the error inside the catch block log.
The error with the console port error function subsequently return the function.
Lastly, let's say the import is a success after the try catch block, log the rust at variable.
There's one final line of code we need to add to our project WebAssembly as an experimental feature
in web pack.
Keep in mind, it's a relatively new feature with slow adoption.
We're not entirely sure of the implications of WebAssembly yet.
We need to tell Pack to enable support for WebAssembly.
Open the Web Pack Configuration File.
At the bottom of the object at an object called experiments.
We can turn on experimental features from this object.
The feature we're interested in enabling is called async WebAssembly.
We can turn on a feature by setting the value to true.
After making those changes, we should be able to run our project in the command line.
Run the 21:00 Run Serve Command.
Compiling the project may take some time.
We added a new dependency to our Rust Project Cargo needs to download this dependency, compile it and
build it.
This process may take a while.
Be patient.
After the project has been compiled, let's check it out in the browser with the console opened.
Perfect.
The file has been successfully imported.
We can start calling functions from rust in our JavaScript code.
Let's begin setting up a function in the next lecture.