Javascript interop in Blazor Web assembly - Part 3

...

This should be a quick post. In our last article we ended up with the index page using Javascript isolation to import our javascript module and call some code on it. We are going to pretend that theres a reason we may want to reuse that button on multiple pages, so we'll extract it into a component and then we'll use it more than once. It's a bit contrived and very simple, but we need this in place for the subsequent articles. So lets proceed...

Create a new folder called Components. Create a new Razor Component. I've called mine MyJavascriptComponent.

 

Copy the button and the corresponding code from index.razor and paste it into the new component. The new component should look like 

<h3>MyJavascriptComponent</h3>
 
<button type="button" class="btn btn-info" @onclick="CallSomeJavascript">Call Some Javascript</button>
 
@code
{
 
    [Inject]
    public IJSRuntime JSRuntime { get; set; }
    public async Task CallSomeJavascript()
    {
 
            var    module = await JSRuntime.InvokeAsync<IJSObjectReference>(
                        "import", "/js/index.js");     
              
        await module.InvokeVoidAsync("showJavascriptAlertExported", "Congratulations! You called some Javascript from .NET");
 
    }
 
}

now add the component to index.razor which should now look like

@page "/"
 
 
<h1>Hello, world!</h1>
 
 
 
<MyJavascriptComponent></MyJavascriptComponent>

Add the relevant using statement to _Imports.razor

@using BlazorInteropExample.Components

Run the app and it should work.

Now lets add it to the Counter page (Counter.razor)

Open counter.razor and add the component to it twice. Overwrite the existing code except the heading just so we know what page we're on.

@page "/counter"
 
<h1>Counter</h1>
 
<MyJavascriptComponent></MyJavascriptComponent>
 
<MyJavascriptComponent></MyJavascriptComponent>

Run the app again. Use the nav bar to navigate between the pages. All the components should display and show the pop up when pressed.

Ok, so it didn't take much work to extract it into a component. But consider the fact that if we were working in a team, our fellows could use this component and never know anything about Javascript. They wouldn't even know it used javascript if we hadn't given it away in the name of the component.

So far we've only used our own javascript file. This is great and allows us to solve many problems, but there are lots of javascript libraries out there that have already solved many of the problems already. It would be really great if we could resuse some of those on our component. Well we can. The tricky part about them is that a lot of those libraries depend on other libraries which in turn depend on other libraries. It's not as simple as just importing the one file we need. Fortunately the javascript world has a whole bunch of tools to assist in this. In the next article we will use NPM (Node Package Manager) to install a third party library and it's dependencies. We'll then use Snowpack to bundle them to a file that we can consume from our interop code on our component. 

This may have been a short article, but the next one is going to be much meatier!