• Stars
    star
    331
  • Rank 126,690 (Top 3 %)
  • Language
    C#
  • License
    MIT License
  • Created almost 3 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This project converts TypeScript type declarations into C# representations, and use C# source generators to expose automatic JavaScript interop functionality.

Blazorators: Blazor C# Source Generators

Thank you for perusing my Blazor C# Source Generator repository. I'd really appreciate a โญ if you find this interesting.

build

All Contributors

A C# source generator that creates fully functioning Blazor JavaScript interop code, targeting either the IJSInProcessRuntime or IJSRuntime types. This library provides several NuGet packages:

Core libraries

NuGet package NuGet version Description
Blazor.SourceGenerators NuGet Core source generator library.
Blazor.Serialization NuGet Common serialization library, required in some scenarios when using generics.

WebAssembly libraries

NuGet package NuGet version Description
Blazor.LocalStorage.WebAssembly NuGet Blazor WebAssembly class library exposing DI-ready IStorageService type for the localStorage implementation (relies on IJSInProcessRuntime).
Blazor.SessionStorage.WebAssembly NuGet Blazor WebAssembly class library exposing DI-ready IStorageService type for the sessionStorage implementation (relies on IJSInProcessRuntime).
Blazor.Geolocation.WebAssembly NuGet Razor class library exposing DI-ready IGeolocationService type (and dependent callback types) for the geolocation implementation (relies on IJSInProcessRuntime).
Blazor.SpeechSynthesis.WebAssembly NuGet Razor class library exposing DI-ready ISpeechSynthesisService type for the speechSynthesis implementation (relies on IJSInProcessRuntime).

Targets the IJSInProcessRuntime type.

Server libraries

NuGet package NuGet version Description
Blazor.LocalStorage NuGet Blazor Server class library exposing DI-ready IStorageService type for the localStorage implementation (relies on IJSRuntime)
Blazor.SessionStorage NuGet Blazor Server class library exposing DI-ready IStorageService type for the sessionStorage implementation (relies on IJSRuntime)
Blazor.Geolocation NuGet Razor class library exposing DI-ready IGeolocationService type (and dependent callback types) for the geolocation implementation (relies on IJSRuntime).
Blazor.SpeechSynthesis NuGet Razor class library exposing DI-ready ISpeechSynthesisService type for the speechSynthesis implementation (relies on IJSRuntime).

Targets the IJSRuntime type.

Note
The reason that I generate two separate packages, one with an async API and another with the synchronous version is due to the explicit usage of IJSInProcessRuntime when using Blazor WebAssembly. This decision allows the APIs to be separate, and easily consumable from their repsective consuming Blazor apps, either Blazor server or Blazor WebAssembly. I might change it later to make this a consumer configuration, in that each consuming library will have to explicitly define a preprocessor directive to specify IS_WEB_ASSEMBLY defined.

Using the Blazor.SourceGenerators package ๐Ÿ“ฆ

As an example, the official Blazor.LocalStorage.WebAssembly package consumes the Blazor.SourceGenerators package. It exposes extension methods specific to Blazor WebAssembly and the localStorage Web API.

Consider the IStorageService.cs C# file:

// Copyright (c) David Pine. All rights reserved.
// Licensed under the MIT License.

namespace Microsoft.JSInterop;

[JSAutoGenericInterop(
    TypeName = "Storage",
    Implementation = "window.localStorage",
    Url = "https://developer.mozilla.org/docs/Web/API/Window/localStorage",
    GenericMethodDescriptors = new[]
    {
        "getItem",
        "setItem:value"
    })]
public partial interface IStorageService
{
}

This code designates itself into the Microsoft.JSInterop namespace, making the source generated implementation available to anyone consumer who uses types from this namespace. It uses the JSAutoGenericInterop to specify:

  • TypeName = "Storage": sets the type to Storage.
  • Implementation = "window.localStorage": expresses how to locate the implementation of the specified type from the globally scoped window object, this is the localStorage implementation.
  • Url: sets the URL for the implementation.
  • GenericMethodDescriptors: Defines the methods that should support generics as part of their source-generation. The localStorage.getItem is specified to return a generic TResult type, and the localStorage.setItem has its parameter with a name of value specified as a generic TArg type.

The generic method descriptors syntax is: "methodName" for generic return type and "methodName:parameterName" for generic parameter type.

The file needs to define an interface and it needs to be partial, for example; public partial interface. Decorating the class with the JSAutoInterop (or `JSAutoGenericInterop) attribute will source generate the following C# code, as shown in the source generated IStorageServiceService.g.cs:

using Blazor.Serialization.Extensions;
using System.Text.Json;

#nullable enable
namespace Microsoft.JSInterop;

/// <summary>
/// Source generated interface definition of the <c>Storage</c> type.
/// </summary>
public partial interface IStorageServiceService
{
    /// <summary>
    /// Source generated implementation of <c>window.localStorage.length</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/length"></a>
    /// </summary>
    double Length
    {
        get;
    }

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.clear</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/clear"></a>
    /// </summary>
    void Clear();

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.getItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/getItem"></a>
    /// </summary>
    TValue? GetItem<TValue>(string key, JsonSerializerOptions? options = null);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.key</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/key"></a>
    /// </summary>
    string? Key(double index);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.removeItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/removeItem"></a>
    /// </summary>
    void RemoveItem(string key);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.setItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/setItem"></a>
    /// </summary>
    void SetItem<TValue>(string key, TValue value, JsonSerializerOptions? options = null);
}

These internal extension methods rely on the IJSInProcessRuntime to perform JavaScript interop. From the given TypeName and corresponding Implementation, the following code is also generated:

  • IStorageService.g.cs: The interface for the corresponding Storage Web API surface area.
  • LocalStorgeService.g.cs: The internal implementation of the IStorageService interface.
  • LocalStorageServiceCollectionExtensions.g.cs: Extension methods to add the IStorageService service to the dependency injection IServiceCollection.

Here is the source generated LocalStorageService implementation:

// Copyright (c) David Pine. All rights reserved.
// Licensed under the MIT License:
// https://github.com/IEvangelist/blazorators/blob/main/LICENSE
// Auto-generated by blazorators.

#nullable enable

using Blazor.Serialization.Extensions;
using Microsoft.JSInterop;
using System.Text.Json;

namespace Microsoft.JSInterop;

/// <inheritdoc />
internal sealed class LocalStorageService : IStorageService
{
    private readonly IJSInProcessRuntime _javaScript = null;

    /// <inheritdoc cref="P:Microsoft.JSInterop.IStorageService.Length" />
    double IStorageService.Length => _javaScript.Invoke<double>("eval", new object[1]
    {
        "window.localStorage.length"
    });

    public LocalStorageService(IJSInProcessRuntime javaScript)
    {
        _javaScript = javaScript;
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IStorageService.Clear" />
    void IStorageService.Clear()
    {
        _javaScript.InvokeVoid("window.localStorage.clear");
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IStorageService.GetItem``1(System.String,System.Text.Json.JsonSerializerOptions)" />
    TValue? IStorageService.GetItem<TValue>(string key, JsonSerializerOptions? options)
    {
        return _javaScript.Invoke<string>("window.localStorage.getItem", new object[1]
        {
            key
        }).FromJson<TValue>(options);
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IStorageService.Key(System.Double)" />
    string? IStorageService.Key(double index)
    {
        return _javaScript.Invoke<string>("window.localStorage.key", new object[1]
        {
            index
        });
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IStorageService.RemoveItem(System.String)" />
    void IStorageService.RemoveItem(string key)
    {
        _javaScript.InvokeVoid("window.localStorage.removeItem", key);
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IStorageService.SetItem``1(System.String,``0,System.Text.Json.JsonSerializerOptions)" />
    void IStorageService.SetItem<TValue>(string key, TValue value, JsonSerializerOptions? options)
    {
        _javaScript.InvokeVoid("window.localStorage.setItem", key, value.ToJson<TValue>(options));
    }
}

Finally, here is the source generated service collection extension methods:

using Microsoft.JSInterop;

namespace Microsoft.Extensions.DependencyInjection;

/// <summary></summary>
public static class LocalStorageServiceCollectionExtensions
{
    /// <summary>
    /// Adds the <see cref="IStorageService" /> service to the service collection.
    /// </summary>
    public static IServiceCollection AddLocalStorageServices(
        this IServiceCollection services) =>
        services.AddSingleton<IJSInProcessRuntime>(serviceProvider =>
            (IJSInProcessRuntime)serviceProvider.GetRequiredService<IJSRuntime>())
            .AddSingleton<IStorageService, LocalStorageService>();
}

Putting this all together, the Blazor.LocalStorage.WebAssembly NuGet package is actually less than 15 lines of code, and it generates full DI-ready services with JavaScript interop.

The Blazor.LocalStorage package, generates extensions on the IJSRuntime type.

// Copyright (c) David Pine. All rights reserved.
// Licensed under the MIT License.

namespace Microsoft.JSInterop;

[JSAutoInterop(
    TypeName = "Storage",
    Implementation = "window.localStorage",
    HostingModel = BlazorHostingModel.Server,
    OnlyGeneratePureJS = true,
    Url = "https://developer.mozilla.org/docs/Web/API/Window/localStorage")]
public partial interface IStorageServiceService
{
}

Generates the following:

// Copyright (c) David Pine. All rights reserved.
// Licensed under the MIT License:
// https://github.com/IEvangelist/blazorators/blob/main/LICENSE
// Auto-generated by blazorators.

using System.Threading.Tasks;

#nullable enable
namespace Microsoft.JSInterop;

public partial interface IStorageServiceService
{
    /// <summary>
    /// Source generated implementation of <c>window.localStorage.length</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/length"></a>
    /// </summary>
    ValueTask<double> Length
    {
        get;
    }

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.clear</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/clear"></a>
    /// </summary>
    ValueTask ClearAsync();

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.getItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/getItem"></a>
    /// </summary>
    ValueTask<string?> GetItemAsync(string key);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.key</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/key"></a>
    /// </summary>
    ValueTask<string?> KeyAsync(double index);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.removeItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/removeItem"></a>
    /// </summary>
    ValueTask RemoveItemAsync(string key);

    /// <summary>
    /// Source generated implementation of <c>window.localStorage.setItem</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Storage/setItem"></a>
    /// </summary>
    ValueTask SetItemAsync(string key, string value);
}

Notice, that since the generic method descriptors are not added generics are not supported. This is not yet implemented as I've been focusing on WebAssembly scenarios.

Design goals ๐ŸŽฏ

I was hoping to use the TypeScript lib.dom.d.ts bits as input. This input would be read, parsed, and cached within the generator. The generator code would be capable of generating extension methods on the IJSRuntime. Additionally, the generator will create object graphs from the well know web APIs.

Using the lib.dom.d.ts file, we could hypothetically parse various TypeScript type definitions. These definitions could then be converted to C# counterparts. While I realize that not all TypeScript is mappable to C#, there is a bit of room for interpretation.

Consider the following type definition:

/**
An object can programmatically obtain the position of the device.
It gives Web content access to the location of the device. This allows
a Web site or app to offer customized results based on the user's location.
*/
interface Geolocation {

    clearWatch(watchId: number): void;

    getCurrentPosition(
        successCallback: PositionCallback,
        errorCallback?: PositionErrorCallback | null,
        options?: PositionOptions): void;
    
    watchPosition(
        successCallback: PositionCallback,
        errorCallback?: PositionErrorCallback | null,
        options?: PositionOptions): number;
}

This is from the TypeScript repo, lib.dom.d.ts file lines 5,498-5,502.

Example consumption of source generator โœ”๏ธ

Ideally, I would like to be able to define a C# class such as this:

// Copyright (c) David Pine. All rights reserved.
// Licensed under the MIT License.

namespace Microsoft.JSInterop;

[JSAutoInterop(
    TypeName = "Geolocation",
    Implementation = "window.navigator.geolocation",
    Url = "https://developer.mozilla.org/docs/Web/API/Geolocation")]
public partial interface IGeolocationService
{
}

The source generator will expose the JSAutoInteropAttribute, and consuming libraries will decorate their classes with it. The generator code will see this class, and use the TypeName from the attribute to find the corresponding type to implement. With the type name, the generator will generate the corresponding methods, and return types. The method implementations will be extensions of the IJSRuntime.

The following is an example resulting source generated IGeolocationService object:

namespace Microsoft.JSInterop;

public partial interface IGeolocationService
{
    /// <summary>
    /// Source generated implementation of <c>window.navigator.geolocation.clearWatch</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Geolocation/clearWatch"></a>
    /// </summary>
    void ClearWatch(double watchId);

    /// <summary>
    /// Source generated implementation of <c>window.navigator.geolocation.getCurrentPosition</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Geolocation/getCurrentPosition"></a>
    /// </summary>
    /// <param name="component">The calling Razor (or Blazor) component.</param>
    /// <param name="onSuccessCallbackMethodName">Expects the name of a <c>"JSInvokableAttribute"</c> C# method with the following <c>System.Action{GeolocationPosition}"</c>.</param>
    /// <param name="onErrorCallbackMethodName">Expects the name of a <c>"JSInvokableAttribute"</c> C# method with the following <c>System.Action{GeolocationPositionError}"</c>.</param>
    /// <param name="options">The <c>PositionOptions</c> value.</param>
    void GetCurrentPosition<TComponent>(
        TComponent component,
        string onSuccessCallbackMethodName,
        string? onErrorCallbackMethodName = null,
        PositionOptions? options = null)
        where TComponent : class;

    /// <summary>
    /// Source generated implementation of <c>window.navigator.geolocation.watchPosition</c>.
    /// <a href="https://developer.mozilla.org/docs/Web/API/Geolocation/watchPosition"></a>
    /// </summary>
    /// <param name="component">The calling Razor (or Blazor) component.</param>
    /// <param name="onSuccessCallbackMethodName">Expects the name of a <c>"JSInvokableAttribute"</c> C# method with the following <c>System.Action{GeolocationPosition}"</c>.</param>
    /// <param name="onErrorCallbackMethodName">Expects the name of a <c>"JSInvokableAttribute"</c> C# method with the following <c>System.Action{GeolocationPositionError}"</c>.</param>
    /// <param name="options">The <c>PositionOptions</c> value.</param>
    double WatchPosition<TComponent>(
        TComponent component, 
        string onSuccessCallbackMethodName, 
        string? onErrorCallbackMethodName = null, 
        PositionOptions? options = null) 
        where TComponent : class;
}

The generator will also produce the corresponding APIs object types. For example, the Geolocation API defines the following:

  • GeolocationService
  • PositionOptions
  • GeolocationCoordinates
  • GeolocationPosition
  • GeolocationPositionError
namespace Microsoft.JSInterop;

/// <inheritdoc />
internal sealed class GeolocationService : IGeolocationService
{
    private readonly IJSInProcessRuntime _javaScript = null;

    public GeolocationService(IJSInProcessRuntime javaScript)
    {
        _javaScript = javaScript;
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IGeolocationService.ClearWatch(System.Double)" />
    void IGeolocationService.ClearWatch(double watchId)
    {
        _javaScript.InvokeVoid("window.navigator.geolocation.clearWatch", watchId);
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IGeolocationService.GetCurrentPosition``1(``0,System.String,System.String,Microsoft.JSInterop.PositionOptions)" />
    void IGeolocationService.GetCurrentPosition<TComponent>(
        TComponent component, 
        string onSuccessCallbackMethodName, 
        string? onErrorCallbackMethodName, 
        PositionOptions? options)
    {
        _javaScript.InvokeVoid("blazorators.getCurrentPosition", DotNetObjectReference.Create<TComponent>(component), onSuccessCallbackMethodName, onErrorCallbackMethodName, options);
    }

    /// <inheritdoc cref="M:Microsoft.JSInterop.IGeolocationService.WatchPosition``1(``0,System.String,System.String,Microsoft.JSInterop.PositionOptions)" />
    double IGeolocationService.WatchPosition<TComponent>(
        TComponent component, 
        string onSuccessCallbackMethodName, 
        string? onErrorCallbackMethodName, 
        PositionOptions? options)
    {
        return _javaScript.Invoke<double>("blazorators.watchPosition", new object[4]
        {
            DotNetObjectReference.Create<TComponent>(component),
            onSuccessCallbackMethodName,
            onErrorCallbackMethodName,
            options
        });
    }
}
using System.Text.Json.Serialization;

namespace Microsoft.JSInterop;

/// <summary>
/// Source-generated object representing an ideally immutable <c>GeolocationPosition</c> value.
/// </summary>
public class GeolocationPosition
{
    /// <summary>
    /// Source-generated property representing the <c>GeolocationPosition.coords</c> value.
    /// </summary>
    [JsonPropertyName("coords")]
    public GeolocationCoordinates Coords
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPosition.timestamp</c> value.
    /// </summary>
    [JsonPropertyName("timestamp")]
    public long Timestamp
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPosition.timestamp</c> value, 
    /// converted as a <see cref="T:System.DateTime" /> in UTC.
    /// </summary>
    [JsonIgnore]
    public DateTime TimestampAsUtcDateTime => Timestamp.ToDateTimeFromUnix();
}

/// <summary>
/// Source-generated object representing an ideally immutable <c>GeolocationCoordinates</c> value.
/// </summary>
public class GeolocationCoordinates
{
    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.accuracy</c> value.
    /// </summary>
    [JsonPropertyName("accuracy")]
    public double Accuracy
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.altitude</c> value.
    /// </summary>
    [JsonPropertyName("altitude")]
    public double? Altitude
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.altitudeAccuracy</c> value.
    /// </summary>
    [JsonPropertyName("altitudeAccuracy")]
    public double? AltitudeAccuracy
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.heading</c> value.
    /// </summary>
    [JsonPropertyName("heading")]
    public double? Heading
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.latitude</c> value.
    /// </summary>
    [JsonPropertyName("latitude")]
    public double Latitude
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.longitude</c> value.
    /// </summary>
    [JsonPropertyName("longitude")]
    public double Longitude
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationCoordinates.speed</c> value.
    /// </summary>
    [JsonPropertyName("speed")]
    public double? Speed
    {
        get;
        set;
    }
}

/// <summary>
/// Source-generated object representing an ideally immutable <c>GeolocationPositionError</c> value.
/// </summary>
public class GeolocationPositionError
{
    /// <summary>
    /// Source-generated property representing the <c>GeolocationPositionError.code</c> value.
    /// </summary>
    [JsonPropertyName("code")]
    public double Code
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPositionError.message</c> value.
    /// </summary>
    [JsonPropertyName("message")]
    public string Message
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPositionError.PERMISSION_DENIED</c> value.
    /// </summary>
    [JsonPropertyName("PERMISSION_DENIED")]
    public double PERMISSION_DENIED
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPositionError.POSITION_UNAVAILABLE</c> value.
    /// </summary>
    [JsonPropertyName("POSITION_UNAVAILABLE")]
    public double POSITION_UNAVAILABLE
    {
        get;
        set;
    }

    /// <summary>
    /// Source-generated property representing the <c>GeolocationPositionError.TIMEOUT</c> value.
    /// </summary>
    [JsonPropertyName("TIMEOUT")]
    public double TIMEOUT
    {
        get;
        set;
    }
}

// Additional models omitted for brevity...

In addition to this GeolocationExtensions class being generated, the generator will also generate a bit of JavaScript. Some methods cannot be directly invoked as they define callbacks. The approach the generator takes is to delegate callback methods on a given T instance, with the JSInvokable attribute. Our generator should also warn when the corresponding T instance doesn't define a matching method name that is also JSInvokable.

const getCurrentLocation =
    (dotnetObj, successMethodName, errorMethodName, options) =>
    {
        if (navigator && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    dotnetObj.invokeMethodAsync(
                        successMethodName, position);
                },
                (error) => {
                    dotnetObj.invokeMethodAsync(
                        errorMethodName, error);
                },
                options);
        }
    };

// Other implementations omitted for brevity...
// But we'd also define a "watchPosition" wrapper.
// The "clearWatch" is a straight pass-thru, no wrapper needed.

window.blazorator = {
    getCurrentLocation,
    watchPosition
};

The resulting JavaScript will have to be exposed to consuming projects. Additionally, consuming projects will need to adhere to extension method consumption semantics. When calling generated extension methods that require .NET object references of type T, the callback names should be marked with JSInvokable and the nameof operator should be used to ensure names are accurate. Consider the following example consuming Blazor component:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Microsoft.JSInterop.Extensions;

namespace Example.Components;

// This is the other half of ConsumingComponent.razor
public sealed partial class ConsumingComponent
{
    [Inject]
    public IJSRuntime JavaScript { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JavaScript.GetCurrentPositionAsync(
                this,
                nameof(OnCoordinatesPermitted),
                nameof(OnErrorRequestingCoordinates));
        }
    }

    [JSInvokable]
    public async Task OnCoordinatesPermitted(
        GeolocationPosition position)
    {
        // TODO: consume/handle position.

        await InvokeAsync(StateHasChanged);
    }

    [JSInvokable]
    public async Task OnErrorRequestingCoordinates(
        GeolocationPositionError error)
    {
        // TODO: consume/handle error.

        await InvokeAsync(StateHasChanged);
    }
}

Pseudocode and logical flow โžก๏ธ

  1. Consumer decorates a static partial class with the JSAutoInteropAttribute.
  2. Source generator is called:
    • JavaScriptInteropGenerator.Initialize
    • JavaScriptInteropGenerator.Execute
  3. The generator determines the TypeName from the attribute of the contextual class.
    1. The TypeName is used to look up the corresponding TypeScript type definition.
    2. If found, and a valid API - attempt source generation.

Future work

Known limitations โš ๏ธ

At the time of writing, only pure JavaScript interop is supported. It is a stretch goal to add the following (currently missing) features:

  • Source generate corresponding (and supporting) JavaScript files.
    • We'd need to accept a desired output path from the consumer, JavaScriptOutputPath.
    • We would need to append all JavaScript into a single builder, and emit it collectively.
  • Allow for declarative and custom type mappings, for example; suppose the consumer wants the API to use generics instead of string.
    • We'd need to expose a TypeConverter parameter and allow for consumers to implement their own.
    • We'd provide a default one for standard JSON serialization, StringTypeConverter (maybe make this the default).

References and resources ๐Ÿ“‘

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

Weihan Li
Weihan Li

๐Ÿ’ป
David Pine
David Pine

๐Ÿ’ป ๐ŸŽจ ๐Ÿ‘€ ๐Ÿค” โš ๏ธ
Robert McLaws
Robert McLaws

๐Ÿ’ป ๐Ÿ› ๐Ÿค”
Colin Dembovsky
Colin Dembovsky

๐Ÿš‡ ๐Ÿ“ฆ
Tanay Parikh
Tanay Parikh

๐Ÿ“–
Andreas Mรผller
Andreas Mรผller

๐Ÿ› ๐Ÿ’ป
Mahmudul Hasan
Mahmudul Hasan

๐Ÿ’ป
fabiansanchez18
fabiansanchez18

๐Ÿ›
Sean Feldman
Sean Feldman

๐Ÿ›
daver77
daver77

๐Ÿค”

This project follows the all-contributors specification. Contributions of any kind are welcome!

More Repositories

1

azure-cosmos-dotnet-repository

Wraps the .NET SDK for Azure Cosmos DB abstracting away the complexity, exposing a simple CRUD-based repository pattern
C#
298
star
2

signalr-chat

A chat app built with Blazor WebAssembly, hosted on ASP.NET Core, with the latest C# and SignalR -- need I say more?
C#
160
star
3

learning-blazor

The application for the "Learning Blazor: Build Single Page Apps with WebAssembly and C#" O'Reilly Media book by David Pine.
C#
125
star
4

blazor-azure-openai

The Blazor WebAssembly app that inspired the Microsoft //Build 2023 demo app.
C#
87
star
5

IEvangelist.VideoChat

Imagine two Twilio SDKs, ASP.NET Core/C#, Angular/TypeScript, SignalR, etc... Yeah, amazing!
CSS
67
star
6

dotnet-github-actions-sdk

The unofficial GitHub ToolKit for developing GitHub Actions with .NET.
C#
55
star
7

resource-translator

A GitHub Action that automatically creates machine-translated PRs of translation files. Supported file formats include, .ini, .po, .restext, .resx, .xliff .json.
TypeScript
52
star
8

Mirror

Magic mirror application. Written with C# .NET, UWP. For presentation @ MKE DOT NET 2016.
C#
46
star
9

MvcAngular2

JavaScript
32
star
10

pwned-client

A .NET 8.0 HTTP client library for the "';-- Have I Been Pwned" API: https://haveibeenpwned.com/api/v3
C#
32
star
11

Blazing.Twilio.Video

A Blazor Wasm video chat app, built using the Twilio SDK for .NET and TypeScript.
C#
26
star
12

IEvangelist.BlazoR.TwitterStreaming

Yes, #Blazor which is C# in the web browser + SignalR real-time army + Live @Twitter streaming... holy cats batman!
C#
22
star
13

IEvangelist.Blazing.Chuck

If you like #Blazor, C# .NET running on the browser and Chuck Norris -- look no further.
CSS
21
star
14

DotNetDocs.Show

The .NET docs stream / show website
C#
20
star
15

IEvangelist.SignalR.Streaming

TypeScript
20
star
16

Blazing.DotNet.Tweets

Yes, #Blazor which is C# in the web browser + SignalR real-time army + Live @Twitter streaming... holy cats batman!
C#
20
star
17

profanity-filter

Potty Mouth: A GitHub Action profanity filter written in .NET, leveraging Native AOT compilation.
C#
19
star
18

IEvangelist.PhotoBooth

An Angular application with ASP.NET Core/C# and a bit of magic -- enter the photo booth, and share your animated images on social media!
C#
18
star
19

orleans-shopping-cart

C#
15
star
20

GitHub.ProfanityFilter

An Azure function to handle a GitHub webhook, which will take action on issues/pull requests that contain profanity.
C#
10
star
21

orleans-on-container-apps

C#
9
star
22

IEvangelist

7
star
23

actions-demo

A demo repository showing GitHub Actions that build and deploy a Blazor app.
HTML
6
star
24

pathological.globbing

.NET globbing libraryโ€”built atop Microsoft.Extensions.FileSystemGlobbing.
C#
6
star
25

DocFX.Repository.Sweeper

C#
6
star
26

IEvangelist.BlazingTranslations

C#
5
star
27

IEvangelist.DotNet.Miglifier

HTML
5
star
28

color-game

TypeScript
5
star
29

IEvangelist.AspNetCore.Optimization

C#
4
star
30

IEvangelist.Slack.SlashCommands

C#
3
star
31

csharp-eight

C#
3
star
32

orleans-template

GitHub repository template for Microsoft Orleans
C#
3
star
33

IEvangelist.Retweet

C#
2
star
34

learn-hugo

HTML
2
star
35

asp.net-core-minimal-apis-course

Learn how to create ASP.NET Core Minimal APIs.
2
star
36

alias-any-type

A demo app, intended to demonstrate "alias any type" from C# 12.
C#
2
star
37

nasa-mobile

C#
2
star
38

IEvangelist.Web.Api

C#
1
star
39

dmp-in-three-debounce

DMP in 3: RxJS Debounce Example Project
TypeScript
1
star
40

CreamCityCodeEmcee

CSS
1
star
41

aspnetcore-workshop

HTML
1
star
42

IEvangelist.TypeScript

TypeScript
1
star
43

SignalR-Talk

CSS
1
star
44

BlazoR.Board

C#
1
star
45

Mentor.Coding.Challenge

C#
1
star
46

profanity-filter-aspire

C#
1
star