Pompo 1.2.0
dotnet add package Pompo --version 1.2.0
NuGet\Install-Package Pompo -Version 1.2.0
<PackageReference Include="Pompo" Version="1.2.0" />
<PackageVersion Include="Pompo" Version="1.2.0" />
<PackageReference Include="Pompo" />
paket add Pompo --version 1.2.0
#r "nuget: Pompo, 1.2.0"
#addin nuget:?package=Pompo&version=1.2.0
#tool nuget:?package=Pompo&version=1.2.0
Pompo
The brige to create and use .NET objects in JS code via WebAssembly.
Intro
We are going to create a WebAssembly module using the Blazor framework and the C# programming language. Then we will create a React application and embed the WebAssembly module in it so that we can use the functionality of the module in the application.
Creating a WebAssembly Module
- In the Visual Studio create Blazor WebAssembly Standalone App. Name it WasmModule.
- We don't need any pages in this project, it will contain only the functional service. So clear the wwwroot folder. Remove Layout and Pages folders. Remove _Imports.razor and App.razor files.
- Remove the Microsoft.AspNetCore.Components.WebAssembly.DevServer package reference.
- Add Pompo package reference:
nuget install Pompo
- Add the service class:
using Microsoft.JSInterop;
using Pompo;
using System.Text.Json;
namespace WasmModule
{
[PompoAlias("demo")]
public class DemoService
{
private readonly string _id;
public DemoService(string id)
{
if (string.IsNullOrWhiteSpace(id))
throw new ArgumentNullException(nameof(id));
_id = id;
Console.WriteLine($"DemoService created with id: {_id}");
}
[JSInvokable("do")]
public async Task DoSomeWork()
{
var rnd = new Random();
var progress = 0;
while (progress < 100)
{
await Task.Delay(TimeSpan.FromSeconds(rnd.Next(1, 3)));
progress += rnd.Next(5, 20);
if (progress > 100)
progress = 100;
Console.WriteLine($"{_id} work progress: {progress}%");
}
}
[JSInvokable("sum")]
public SumResponce? Sum(JsonElement request)
{
var response = request.Deserialize<SumResponce>();
response ??= new SumResponce();
response.Calculate();
response.serviceId = _id;
return response;
}
}
public class SumResponce
{
public string? serviceId { get; set; }
public int x { get; set; }
public int y { get; set; }
public int sum { get; set; }
public void Calculate() => sum = x + y;
}
}
As you can see, the service class is marked with an attribute PompoAlias with a parameter "demo". This means that the service will be available in the JS under the demo name. The PompoAlias attribute is optional. If the alias is not specified, the service name in JS will look like {NAMESPACE}__{CLASSNAME}. Class methods that are available for calling from JS are marked with the JSInvokable attribute. The attribute parameter specifies the name of the method by which it will be available in JS. If the parameter is not specified, the method will be available by its real name.
- Edit Program.cs.
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using WasmModule;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
var host = builder.Build();
await host.UsePompoAsync();
await host.RunAsync();
Here we just create the WebAssembly host, initialize the Pompo JS factory and launch the host.
- Build the application.
- Create the folder publish profile with default parameters and publish the application.
Creating a React application and embeding in it the WebAssembly module
- Create a React application:
npx create-react-app@latest react-app
- Copy the _framework folder and the _pompo.js file from the WebAsswmbly module publish folder to the public folder of the React application.
- Add tags in the head section of the index.html file in the public folder of the React application:
<head>
...
<base href="/" />
<script src="_framework/blazor.webassembly.js"></script>
</head>
- Run the React application:
npm start
If everything is fine, a message will appear in the browser console:
Pompo factory initialized.
Explicit .NET object creation from JS code.
Now we have a factory available to create an instance of our service implemented in the WebAssembly module:
let demo = await window.dotNetObjectFactory.create_demo('foo');
As you can see, to explicit create the instance of the service, we use the create_demo method. The method takes one argument, just like the service constructor. Method names for creating objects are formed as follows: create_{SERVICENAME}. SERVICENAME is either an alias defined in the PompoAlias attribute or a real class name with namespace. For example, if we didn't use the PompoAlias attribute for the DemoService class, the name of the method to create an instance of the service would look like this: create_WasmModule_DemoService. In any case, you can always look into the _pompo.js file and find out the name of a particular method.
Resolving services from DI
You can get a service object from the DI container. In order to have this opportunity, you need to register the service in DI. Let's create another service class:
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Pompo;
using System.Text.Json;
namespace WasmModule
{
[PompoAlias("fromdi")]
public class DiService(UtilityService utilityService)
{
private readonly UtilityService _ctorInitializedSvc = utilityService;
[Inject]
public UtilityService? InjectedSvc { get; set; }
[JSInvokable("check")]
public void Checking(JsonElement data)
{
Console.WriteLine($"Initialized via ctor service: {_ctorInitializedSvc.GetCreationTime()}");
Console.WriteLine($"Injected via property service: {InjectedSvc?.GetCreationTime()}");
Console.WriteLine($"data: prompt - {data.GetProperty("prompt").GetString()}, val - {data.GetProperty("val").GetDouble()}");
}
}
}
and one more:
namespace WasmModule
{
public class UtilityService
{
private readonly DateTime _creation;
public UtilityService()
{
_creation = DateTime.Now;
Console.WriteLine("Utility service has created");
}
public DateTime GetCreationTime() => _creation;
}
}
Insert lines in the Program.cs file before the host building:
builder.Services.AddTransient<UtilityService>();
builder.Services.AddTransient<DiService>();
Then in React application we can get the DiService object like this:
let diService = await window.dotNetObjectFactory.resolve_di('fromdi');
Injecting services
Using the Inject attribute, it is possible to inject some service into the property of other service. Mark the property with an attribute (as done above in the DiService code):
[Inject]
public UtilityService? InjectedSvc { get; set; }
Dependency injection via constructor parameters is also available. Of course, the service being injected must also be registered in DI. More info about using DI see here.
In conclusion
Sample projects for the WebAssembly module and the React application can be found in the Samples folder of this repo.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. |
-
net9.0
- No dependencies.
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.