About EventHorizon Blazor TypeScript Interop Generator

This project generates a C# Blazor Interop proxy using a TypeScript definition file.

Details

The generated project can be used with Blazor WASM to interface with JavaScript from C#, this gives most JavaScript libraries an easy to use interface from C#. It uses the JSRuntime to interop directly with the underlying JavaScript from C#, this is done with a custom interop abstraction.

The interop project can be found in the canhorn/EventHorizon.Blazor.Interop repository, it gives the generated code access to a common set of access patterns it then uses to interface with the JavaScript.

Tech Used

Supported API's Generated

Below is a list of API that will be generated.

API	Details	Example	Support
Constructor	You can use the default constructor of Classes, causes new call in JavaScript.	`new BabylonJS.Engine()`	✔️
Constructor with arguments	Same as Constructor, but can also pass in arguments.	`new BabylonJS.Engine("canvas-window-id")`	✔️
Property	You can get or set properties supplied by the object.	`var isDisabled = engine.disableManifestCheck` and `engine.disableManifestCheck = true`	✔️
Property	You can set properties supplied by created objects.	`engine.disableManifestCheck = true`	✔️
Static Property	You can get Static properties of a Class.	`var isDisabled = Engine.ALPHA_DISABLE`	✔️
Method	You can call a method supplied by an object.	`var ratio = engine.getScreenAspectRatio()`	✔️
Static Method	You can call a Static method provided by a Class.	`engine.DefaultLoadingScreenFactory(canvas)`	✔️
Callback Method	You can supply a callback action to a method supplied by an object.	`observer.add(() => doSomething())`	✔️
Static Callback Method	You can call a Static method provided by a Class.	`Engine.AudioEngineFactory()`	✔️
Get Instance Accessor	You can have access to the get accessor on an object.	`var check = engine.disableManifestCheck`	✔️
Set Instance Accessor	You can use the set accessor on an objects.	`engine.onCanvasPointerOutObservable.add(() => doSomething())`	✔️
Action Callback	You can run Async based code.	`meshLoader.OnSuccess(new ActionCallback<Mesh>(mesh => { return Task.CompletedTask; }))`	✔️
Action Callback in Literal	You can run Async based code.	`new HeightMapMesh({ onReady = new ActionCallback<Mesh>(mesh => { return Task.CompletedTask; }) })`	✔️

Notes on the framework, it might not have the exact API supplied by a TypeScript definition file, in that it might transform the API into something more general and friendly to C#. I used C# as my main source of inspiration for the generated code.

Future Planned Work

Promise Result Types -> Ability to async/await Promised response typed Methods.

Example