Interop Interfaces

Instead of manually authoring a binding for each method, let Bootsharp generate them automatically using the [JSImport] and [JSExport] assembly attributes.

For example, say we have a JavaScript UI (frontend) that needs to be notified when data is mutated in the C# domain layer (backend), so it can render the updated state. Additionally, the frontend may have a setting (e.g., stored in the browser cache) to temporarily mute notifications, which the backend needs to retrieve. You can create the following interface in C# to describe the expected frontend APIs:

csharp

interface IFrontend
{
    bool IsMuted { get; set; }
    void NotifyDataChanged (Data data);
}

Now, add the interface type to the JS import list:

csharp

[assembly: JSImport([
    typeof(IFrontend)
])]

Bootsharp will automatically implement the interface in C#, wiring it to JavaScript, while also providing you with a TypeScript spec to implement on the frontend:

export namespace Frontend {
    export let isMuted: boolean;
    export const onDataChanged: Event<[Data]>;
}

Now, say we want to provide an API for the frontend to request a mutation of the data:

csharp

interface IBackend
{
    Data? Current { get; set; }
    void AddData (Data data);
}

Export the interface to JavaScript:

csharp

[assembly: JSExport([
    typeof(IBackend)
])]

This will produce the following spec to be consumed on the JavaScript side:

export namespace Backend {
    export let current: Data | null;
    export function addData(data: Data): void;
}

To make Bootsharp automatically inject and initialize the generated interop implementations, use the dependency injection extension.

Example

Find an example of using interop interfaces in the React sample.

Interop Interfaces ​

Interop Interfaces