### Async and Sync Function Examples

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/SpawnDev.BlazorJS.Demo/wwwroot/index.html

Demonstrates basic async/await patterns and synchronous function returns.

```javascript
async function WillFail() { console.log('> WillFail'); await Sleep(2000); var b = gg(); return b; } function NotAsync() { console.log('> NotAsync'); return null; } async function WaitForIt(task) { console.log('> WaitForIt', task); var ret = await task; console.log('> WaitForIt', ret); }
```

--------------------------------

### Use LocalStorage with BlazorJS

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

This example demonstrates how to interact with the browser's LocalStorage API using BlazorJS. It shows how to get a Storage object, set an item, and retrieve an item.

```cs
[Inject] 
BlazorJSRuntime JS { get; set; }

override void OnInitialized()
{
    using Storage localStorage = JS.Get<Storage>("localStorage");
    localStorage.SetItem("myKey", "myValue");
    var myValue = localStorage.GetItem("myKey");
    // myValue == "myValue"
}
```

--------------------------------

### Basic JavaScript Interop Examples

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Demonstrates common JavaScript interop operations using BlazorJSRuntime, including getting and setting properties, calling methods, and handling events. Ensure BlazorJSRuntime is properly injected and initialized.

```cs
// Get and Set
var innerHeight = JS.Get<int>("window.innerHeight");
JS.Set("document.title", "Hello World!");

// Call
var item = JS.Call<string?>("localStorage.getItem", "itemName");
JS.CallVoid("addEventListener", "resize", Callback.Create(() => Console.WriteLine("WindowResized"), _callBacks));

// Attach events
using var window = JS.Get<Window>("window");
window.OnOffline += Window_OnOffline;

// AddEventListener and RemoveEventListener are supported on all EventTarget objects
window.AddEventListener("resize", Window_OnResize, true);

window.RemoveEventListener("resize", Window_OnResize, true);
```

--------------------------------

### Interact with HTMLVideoElement in Blazor

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

This example shows how to use the HTMLVideoElement class from SpawnDev.BlazorJS to control and get information from a video element in Blazor. It includes handling metadata loading and errors.

```cs
@page "/HTMLVideoElementExample"
@implements IDisposable

<div>
    <video style="width: 640px; height: 480px;" controls autoplay muted @ref=videoElRef></video>
</div>
<div>
    Source: @videoName
</div>
<div>
    Duration: @duration.ToString()
</div>
<div>
    Metadata: @metadata
</div>
<div>
    @foreach (var video in videos)
    {
        <button onclick="@(() => SetSource(video.Key, video.Value))">@video.Key</button>
    }
</div>
<pre>
    @((MarkupString)log)
</pre>

@code {
    [Inject]
    BlazorJSRuntime JS { get; set; }
    ElementReference? videoElRef;
    HTMLVideoElement? videoEl = null;
    TimeSpan duration = TimeSpan.Zero;
    string videoName = "";
    string metadata = "";
    string log = "";
    Dictionary<string, string> videos = new Dictionary<string, string>
    {
        { "Elephants Dream", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" },
        { "Big Buck Bunny", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" },
        { "Tears Of Steel", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" },
        { "Sintel", "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" },
        { "None", "" },
    };
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            videoEl = (HTMLVideoElement)videoElRef!;
            videoEl.OnLoadedMetadata += VideoEl_OnLoadedMetadata;
            videoEl.OnAbort += VideoEl_OnAbort;
            videoEl.OnError += VideoEl_OnError;
        }
    }
    void SetSource(string name, string source)
    {
        if (videoEl == null) return; 
        Log($"SetSource: {name}");
        videoName = name;
        videoEl.Src = source;
        StateHasChanged();
    }
    void VideoEl_OnLoadedMetadata()
    {
        Log("VideoEl_OnLoadedMetadata");
        metadata = $"{videoEl!.VideoWidth}x{videoEl!.VideoHeight}";
        duration = TimeSpan.FromSeconds(videoEl!.Duration ?? 0);
        StateHasChanged();
    }
    void VideoEl_OnError()
    {
        Log("VideoEl_OnError");
    }
    void VideoEl_OnAbort()
    {
        Log("VideoEl_OnAbort");
        metadata = $"{videoEl!.VideoWidth}x{videoEl!.VideoHeight}";
        duration = TimeSpan.FromSeconds(videoEl!.Duration ?? 0);
        StateHasChanged();
    }
    public void Dispose()
    {
        if (videoEl != null)
        {
            videoEl.OnLoadedMetadata -= VideoEl_OnLoadedMetadata;
            videoEl.OnAbort -= VideoEl_OnAbort;
            videoEl.OnError -= VideoEl_OnError;
            videoEl.Dispose();
            videoEl = null;
        }
    }
    void Log(string message)
    {
        log += $"{message}<br/>";
    }
}
```

--------------------------------

### Add and Initialize BlazorJSRuntime in Program.cs

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Configure your Blazor application to use BlazorJSRuntime by adding the service and initializing it with BlazorJSRunAsync. This setup is required for all BlazorJS functionalities.

```cs
// ... other usings
using SpawnDev.BlazorJS;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// Add SpawnDev.BlazorJS.BlazorJSRuntime
builder.Services.AddBlazorJSRuntime();

// build and Init using BlazorJSRunAsync (instead of RunAsync)
await builder.Build().BlazorJSRunAsync();
```

--------------------------------

### Serialize Func for JavaScript

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Example of passing a Func to JavaScript and reading it back, ensuring proper disposal of created objects.

```csharp
int testValue = 42;
var origFunc = new Func<int, int>((val) =>
{
    return val;
});
// set a global Javascript var to our Func<int>
// if this is the first time this Func is passed to Javascript a Callback will be created and associated to this Func for use in future serialization
// the auto created Callback must be disposed by calling the extension method Func.DisposeJS()
JS.Set("_funcCallback", origFunc);
// read back in our Func as an Func 
// internally a Javascript Function reference is created and associated with this Func.
// the auto created Function must be disposed by calling the extension method Func.DisposeJS()
var readFunc = JS.Get<Func<int, int>>("_funcCallback");
var readVal = readFunc(testValue);
if (readVal != testValue) throw new Exception("Unexpected result");
// dispose the Function created and associated with the read Func
readFunc.DisposeJS();
// dispose the Callback created and associated with the original Func
origFunc.DisposeJS();
```

--------------------------------

### Performing HTTP Requests with Fetch API

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Shows how to perform GET and POST requests, handle JSON responses, and download binary data as Blobs or ArrayBuffers.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task FetchExample()
{
    // Simple GET request
    using var response = await JS.Fetch("https://api.example.com/data");
    if (response.Ok)
    {
        var text = await response.Text();
        Console.WriteLine(text);
    }

    // GET request with response as JSON
    using var jsonResponse = await JS.Fetch("https://api.example.com/users");
    var users = await jsonResponse.Json<List<User>>();

    // POST request with options
    using var postResponse = await JS.Fetch("https://api.example.com/users", new FetchOptions
    {
        Method = "POST",
        Headers = new Dictionary<string, string>
        {
            { "Content-Type", "application/json" }
        },
        Body = JsonSerializer.Serialize(new { name = "John", email = "john@example.com" })
    });

    // Download as Blob
    using var blobResponse = await JS.Fetch("https://example.com/image.png");
    using var blob = await blobResponse.Blob();
    var url = URL.CreateObjectURL(blob);

    // Download as ArrayBuffer
    using var bufferResponse = await JS.Fetch("https://example.com/binary");
    using var buffer = await bufferResponse.ArrayBuffer();
    var bytes = buffer.ToArray();
}

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}
```

--------------------------------

### Custom JSObject Wrapper for Audio

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Example of creating a custom C# class that wraps a JavaScript object, providing strongly-typed methods for interaction.

```cs
public class Audio : JSObject
{
    // deserialization constructor
    public Audio(IJSInProcessObjectReference _ref) : base(_ref) { }
    
    // constructor that accepts a string url
    public Audio(string url) : base(JS.New("Audio", url)) { }
    
    // method decalaration
    public void Play() => JSRef.CallVoid("play");
}
```

```cs
var audio = new Audio("https://some_audio_online");
audio.Play();
```

--------------------------------

### Serialize Action for JavaScript

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Example of passing an Action to JavaScript and disposing of the associated Callback.

```csharp
var tcs = new TaskCompletionSource<bool>();
var callback = () =>
{
    tcs.TrySetResult(true);
};
JS.CallVoid("setTimeout", callback, 100);
await tcs.Task;
callback.DisposeJS();
```

--------------------------------

### Access Camera and Microphone with MediaDevices

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Access the user's camera and microphone using the Navigator.MediaDevices API. Enumerate available devices and request media streams for video and audio. Includes an example for requesting screen capture.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task MediaDevicesExample()
{
    using var navigator = JS.Get<Navigator>("navigator");
    using var mediaDevices = navigator.MediaDevices;

    // Enumerate all media devices
    var devices = await mediaDevices.EnumerateDevices();
    foreach (var device in devices)
    {
        Console.WriteLine($"{device.Kind}: {device.Label} (ID: {device.DeviceId})");
        device.Dispose();
    }

    // Request webcam access
    try
    {
        using var stream = await mediaDevices.GetUserMedia(new MediaStreamConstraints
        {
            Video = true,
            Audio = true
        });

        // Get video tracks
        var videoTracks = stream.GetVideoTracks();
        foreach (var track in videoTracks)
        {
            Console.WriteLine($"Video track: {track.Label}");
            track.Dispose();
        }

        // Assign stream to video element
        using var videoEl = JS.Get<HTMLVideoElement>("document.querySelector('video')");
        videoEl.SrcObject = stream;
        await videoEl.Play();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error accessing camera: {ex.Message}");
    }

    // Request screen capture
    try
    {
        using var displayStream = await mediaDevices.GetDisplayMedia(new DisplayMediaStreamOptions
        {
            Video = true
        });
        // Use displayStream for screen recording/sharing
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Screen capture denied: {ex.Message}");
    }
}
```

--------------------------------

### Define JSObject Class Members

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Example of defining properties and methods within a class derived from JSObject or its subclasses.

```csharp
public class Window : EventTarget {
    // all JSObject types must have this constructor
    public Window(IJSInProcessObjectReference _ref) : base(_ref) { }
    // here is a property with both getter and setter
    public string? Name { get => JSRef.Get<string>("name"); set => JSRef.Set("name", value); }
    // here is a read only property that returns another JSObject type
    public Storage LocalStorage => JSRef.Get<Storage>("localStorage");
    // here are methods
    public long SetTimeout(Callback callback, double delay) => JSRef.Call<long>("setTimeout", callback, delay);
    public void ClearTimeout(long requestId) => JSRef.CallVoid("clearTimeout", requestId);    
    // ... 
}
```

--------------------------------

### Retrieve JavaScript Properties

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Use Get<T> to access properties via dot notation, including support for null-conditional access and type checking.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void GetPropertiesExample()
{
    // Get simple property values
    var innerHeight = JS.Get<int>("window.innerHeight");
    var innerWidth = JS.Get<int>("window.innerWidth");
    var title = JS.Get<string>("document.title");
    var href = JS.Get<string>("window.location.href");

    // Get property as JSObject wrapper
    using var window = JS.Get<Window>("window");
    using var document = JS.Get<Document>("document");
    using var localStorage = JS.Get<Storage>("localStorage");

    // Null-conditional access - returns null if path doesn't exist
    var size = JS.Get<int?>("fruit.options?.size");
    // size == null if fruit.options is undefined

    // Check if property is undefined
    var isUndefined = JS.IsUndefined("window.someUndefinedProperty");
    // isUndefined == true

    // Get typeof a property
    var typeOf = JS.TypeOf("window.localStorage");
    // typeOf == "object"
}
```

--------------------------------

### Register and Initialize BlazorJSRuntime

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Register the service in Program.cs and use BlazorJSRunAsync to initialize the runtime.

```csharp
using SpawnDev.BlazorJS;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// Add the BlazorJSRuntime service
builder.Services.AddBlazorJSRuntime();

// Build and initialize using BlazorJSRunAsync (instead of RunAsync)
await builder.Build().BlazorJSRunAsync();
```

--------------------------------

### Managing Browser Storage

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Demonstrates using the Storage wrapper for localStorage and sessionStorage, including JSON serialization for complex objects.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void StorageExample()
{
    // Get localStorage
    using var localStorage = JS.Get<Storage>("localStorage");

    // Basic string storage
    localStorage.SetItem("username", "John");
    var username = localStorage.GetItem("username");

    // Check if key exists
    if (localStorage.ItemExists("username"))
    {
        Console.WriteLine($"User: {localStorage.GetItem("username")}");
    }

    // Store and retrieve JSON objects
    var settings = new AppSettings
    {
        Theme = "dark",
        Language = "en",
        FontSize = 14
    };
    localStorage.SetJSON("settings", settings);
    var loadedSettings = localStorage.GetJSON<AppSettings>("settings");

    // Get all keys
    var keys = localStorage.GetItemKeys();
    Console.WriteLine($"Stored keys: {string.Join(", ", keys)}");

    // Get number of items
    var count = localStorage.Length;

    // Remove specific item
    localStorage.RemoveItem("username");

    // Clear all items
    localStorage.Clear();

    // SessionStorage works the same way
    using var sessionStorage = JS.Get<Storage>("sessionStorage");
    sessionStorage.SetItem("tempData", "session value");
}

public class AppSettings
{
    public string Theme { get; set; }
    public string Language { get; set; }
    public int FontSize { get; set; }
}
```

--------------------------------

### Working with JavaScript Promises

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Demonstrates wrapping JavaScript Promises, creating Promises from .NET Tasks, and handling timeouts or Web Locks.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task PromiseExample()
{
    // Call async JavaScript method that returns a Promise
    var result = await JS.CallAsync<string>("fetchData", "https://api.example.com");

    // Work with Promise<T> directly
    using var promise = JS.Call<Promise<string>>("fetch", "https://api.example.com")
        .Then(response => response.Text());
    var text = await promise.ThenAsync();

    // Create Promise from .NET async method
    var netPromise = new Promise<string>(async () => {
        await Task.Delay(1000);
        return "Hello from .NET async!";
    });
    JS.Set("window.myPromise", netPromise);

    // Create Promise from Task
    var taskSource = new TaskCompletionSource<int>();
    var taskPromise = new Promise<int>(taskSource.Task);
    JS.Set("window.taskPromise", taskPromise);
    // Later resolve it:
    taskSource.TrySetResult(42);

    // Promise with timeout
    using var timedPromise = JS.Call<Promise<Response>>("fetch", "https://slow-api.com");
    try
    {
        var response = await timedPromise.ThenAsync(timeoutMS: 5000);
    }
    catch (Exception ex)
    {
        Console.WriteLine("Request timed out");
    }

    // Use Promise for Web Locks API
    using var navigator = JS.Get<Navigator>("navigator");
    using var locks = navigator.Locks;
    using var lockPromise = locks.Request("my_lock",
        Callback.CreateOne((Lock lockObj) => new Promise(async () => {
            Console.WriteLine("Lock acquired");
            await Task.Delay(2000);
            Console.WriteLine("Lock released");
        })));
}
```

--------------------------------

### JS.New - Creating JavaScript Objects

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Explains how to instantiate new JavaScript objects and classes directly from Blazor using the `New<T>` method.

```APIDOC
## JS.New - Creating JavaScript Objects

The `New<T>` method creates new instances of JavaScript classes. Pass the class name and constructor arguments to instantiate objects directly from Blazor.

### Method
`JS.New<T>(string className, params object[] args)`
`JS.New(string className, params object[] args)`

### Description
This method allows you to create new JavaScript objects. `New<T>` returns a strongly-typed reference of type `T`. If `T` is not specified, it returns an untyped `IJSObjectReference`.

### Request Example (C#)
```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void CreateObjectsExample()
{
    // Create a new Date object
    using var date = JS.New<Date>("Date");
    Console.WriteLine($"Current time: {date.ToISOString()}");

    // Create with constructor arguments
    using var specificDate = JS.New<Date>("Date", 2024, 0, 15); // Month is 0-indexed

    // Create a Worker
    using var worker = JS.New<Worker>("Worker", "/js/myWorker.js");

    // Create a Blob
    byte[] data = System.Text.Encoding.UTF8.GetBytes("Hello World");
    using var blob = JS.New<Blob>("Blob", new object[] { data }, new { type = "text/plain" });

    // Create an Audio element
    using var audio = JS.New<Audio>("Audio", "https://example.com/sound.mp3");
    audio.Play();

    // Create using IJSInProcessObjectReference (untyped)
    using var objRef = JS.New("Object");
    objRef.Set("property1", "value1");
    var prop = objRef.Get<string>("property1");
}
```

### Response Example (Conceptual)
Returns an `IJSObjectReference` or a strongly-typed reference (`T`) representing the newly created JavaScript object.
```

--------------------------------

### Web Locks API with Promises

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Demonstrates using Promises to interact with the Web Locks API. Note: This is for demonstration; see WebWorkerService.Locks for recommended usage.

```cs
using var navigator = JS.Get<Navigator>("navigator");
using var locks = navigator.Locks;

Console.WriteLine($"lock: 1");

using var waitLock = locks.Request("my_lock", Callback.CreateOne((Lock lockObj) => new Promise(async () => {
    Console.WriteLine($"lock acquired 3");
    await Task.Delay(5000);
    Console.WriteLine($"lock released 4");
})));

using var waitLock2 = locks.Request("my_lock", Callback.CreateOne((Lock lockObj) => new Promise(async () => {
    Console.WriteLine($"lock acquired 5");
    await Task.Delay(5000);
    Console.WriteLine($"lock released 6");
})));

Console.WriteLine($"lock: 2");
```

--------------------------------

### Create new JavaScript objects

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Instantiate JavaScript objects using JS.New.

```cs
IJSInProcessObjectReference worker = JS.New("Worker", myWorkerScript);
```

--------------------------------

### Pass Method Callbacks to JavaScript

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Using Callback.CreateOne to pass a standard method to JavaScript.

```csharp
string SomeNetFn(string input){
    return $"Recvd: {input}";
}

JS.Set("someNetFn", Callback.CreateOne(SomeNetFn));
```

```javascript
// in Javascript
someNetFn('Hello callback!');

// prints
Recvd: Hello callback!
```

--------------------------------

### Cache API Storage

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Shows how to open a cache, add a request, and retrieve a response using the CacheStorage interface.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

public async Task CacheExample()
{
    using var caches = JS.Get<CacheStorage>("caches");
    using var cache = await caches.Open("my-cache");
    
    // Add to cache
    await cache.Add("https://example.com/data.json");
    
    // Match request
    using var response = await cache.Match("https://example.com/data.json");
    if (response != null)
    {
        var text = await response.Text();
        Console.WriteLine(text);
    }
}
```

--------------------------------

### Access MediaDevices in BlazorJS

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Enumerate available media devices and request user media streams using the MediaDevices API.

```csharp
using var navigator = JS.Get<Navigator>("navigator");
using var mediaDevices = navigator.MediaDevices;

// List devices
var devices = await mediaDevices.EnumerateDevices();
foreach (var d in devices)
{
    Console.WriteLine($"{d.Kind}: {d.Label}");
}

// Get user media (Webcam)
try 
{
    using var stream = await mediaDevices.GetUserMedia(new { video = true, audio = true });
    // use stream (e.g. assign to HTMLVideoElement or send via WebRTC)
}
catch (Exception ex)
{
    Console.WriteLine($"Error getting stream: {ex.Message}");
}
```

--------------------------------

### Instantiate JavaScript Objects with JS.New

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Create new instances of JavaScript classes using the New method. Always dispose of the returned object references to prevent memory leaks.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void CreateObjectsExample()
{
    // Create a new Date object
    using var date = JS.New<Date>("Date");
    Console.WriteLine($"Current time: {date.ToISOString()}");

    // Create with constructor arguments
    using var specificDate = JS.New<Date>("Date", 2024, 0, 15);

    // Create a Worker
    using var worker = JS.New<Worker>("Worker", "/js/myWorker.js");

    // Create a Blob
    byte[] data = System.Text.Encoding.UTF8.GetBytes("Hello World");
    using var blob = JS.New<Blob>("Blob", new object[] { data }, new { type = "text/plain" });

    // Create an Audio element
    using var audio = JS.New<Audio>("Audio", "https://example.com/sound.mp3");
    audio.Play();

    // Create using IJSInProcessObjectReference (untyped)
    using var objRef = JS.New("Object");
    objRef.Set("property1", "value1");
    var prop = objRef.Get<string>("property1");
}
```

--------------------------------

### Union Type Operations (Match, Map, Reduce)

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Illustrates advanced usage of the Union type, including Match for conditional execution, Map for transforming values, and Reduce for simplifying types.

```cs
// Example usage of Union type
// Create a Union<string, int, long> with an int value using implicit conversion
Union<string, int, long> result = 6;

// Use Match to handle each type and return a single type result
string message = result.Match(
    str => $"String: {str}",
    num => $"Int Number: {num}",
    num => $"Long Number: {num}"
);
// message will be "Int Number: 6" here

// Use Map (or MapAsync) to process the Union based on the type and return a new Union optionally holding different types than the original
Union<string, ulong, long> t1 = result.Map((string v) => 99).Map<ulong>((int v) => (ulong)(v * 5));
Union<string, int, long> t2 = await result.MapAsync(async (string v) => v + "1");
Union<string, int, long> t3 = await result.MapAsync(async (int v) => v * 5 + "");

// Reduce allows processing a single type value into one of the other types reducing the possible types by 1
// Here Reduce is used to get a single type result by reducing int to string and then long to string
// Ex. Union<string, int, long> => Union<string, long> => string
string finalValue = result.Reduce((int v) => v.ToString()).Reduce((long v) => v.ToString());
// finalValue will be "6" here
```

--------------------------------

### Create Promise from Task

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Wrap an existing .NET Task in a JavaScript Promise. The Promise will resolve or reject based on the Task's completion.

```cs
var taskSource = new TaskCompletionSource<string>();
var promise = new Promise<string>(taskSource.Task);
// pass to Javascript api

// then later resolve
taskSource.TrySetResult("Hello world!");
```

--------------------------------

### Call Promise-returning JavaScript functions

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Use CallAsync for methods that return a Promise.

```js
// Javascript
function AddNum(num1, num2){
    return new Promise((resolve, reject)=>{
        resolve(num1 + num2);
    });
}
```

```cs
// C#
var total = await JS.CallAsync<int>("AddNum", 20, 22);
// total == 42 here
```

--------------------------------

### JS.Call - Calling JavaScript Methods

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Demonstrates how to invoke JavaScript functions synchronously from Blazor, with options for methods returning values, void methods, and asynchronous calls.

```APIDOC
## JS.Call - Calling JavaScript Methods

The `Call<T>` method invokes JavaScript functions synchronously and returns the result. Use `CallVoid` for methods that don't return a value. For async JavaScript methods or Promises, use `CallAsync<T>`.

### Method
`JS.Call<T>(string functionName, params object[] args)`
`JS.CallVoid(string functionName, params object[] args)`
`JS.CallAsync<T>(string functionName, params object[] args)`

### Description
These methods allow Blazor components to execute JavaScript functions. `Call<T>` is for synchronous calls expecting a return value of type `T`. `CallVoid` is for synchronous calls that do not return a value. `CallAsync<T>` is used for asynchronous JavaScript functions or Promises, returning a Task that resolves to a value of type `T`.

### Request Example (C#)
```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task CallMethodsExample()
{
    // Synchronous call with return value
    var result = JS.Call<int>("Math.max", 5, 10);
    // result == 10

    // Synchronous call with no return value
    JS.CallVoid("console.log", "Hello from Blazor!");

    // Call localStorage methods
    JS.CallVoid("localStorage.setItem", "myKey", "myValue");
    var value = JS.Call<string?>("localStorage.getItem", "myKey");

    // Async call for JavaScript async functions or Promises
    var response = await JS.CallAsync<Response>("fetch", "https://api.example.com/data");
    var text = await response.Text();

    // Call setTimeout with callback
    JS.CallVoid("setTimeout", Callback.CreateOne(() => {
        Console.WriteLine("Timeout executed!");
    }), 1000);

    // Parse JSON
    var obj = JS.Call<JsonObject>("JSON.parse", "{\"name\":\"test\"}");
}
```

### Response Example (Conceptual)
- `Call<T>` returns the value from the JavaScript function.
- `CallVoid` returns `void`.
- `CallAsync<T>` returns a `Task<T>`.
```

--------------------------------

### Manage .NET Callbacks for JavaScript

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Use Callback.Create for persistent methods or Callback.CreateOne for single-use functions. CallbackGroup allows for batch disposal of multiple event listeners.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void CallbackExample()
{
    // Single-use callback (auto-disposes after first call)
    JS.CallVoid("setTimeout", Callback.CreateOne(() => {
        Console.WriteLine("Timeout fired!");
    }), 1000);

    // Persistent callback with parameters
    var callback = Callback.Create((string eventType, int x, int y) => {
        Console.WriteLine($"Event: {eventType} at ({x}, {y})");
    });
    JS.Set("window.myHandler", callback);
    // Remember to dispose when done: callback.Dispose();

    // Callback with return value
    var sumCallback = Callback.Create((int a, int b) => a + b);
    JS.Set("window.addNumbers", sumCallback);
    // JavaScript can now call: window.addNumbers(5, 3) // returns 8

    // Async callback (returns Promise to JavaScript)
    var asyncCallback = Callback.Create(async (string url) => {
        await Task.Delay(100);
        return $"Processed: {url}";
    });
    JS.Set("window.processAsync", asyncCallback);

    // CallbackGroup for managing multiple callbacks
    var callbacks = new CallbackGroup();
    JS.CallVoid("addEventListener", "resize",
        callbacks.Add(Callback.Create(() => Console.WriteLine("Resized!"))));
    JS.CallVoid("addEventListener", "scroll",
        callbacks.Add(Callback.Create(() => Console.WriteLine("Scrolled!"))));
    // Dispose all at once: callbacks.Dispose();
}
```

--------------------------------

### Pass Async Method Callbacks to JavaScript

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Using Callback.CreateOne to pass an async method to JavaScript, which returns a Promise.

```csharp
async Task<string> SomeNetFnAsync(string input)
{
    await Task.Delay(1000);
    return $"Recvd: {input}";
}

JS.Set("someNetFnAsync", Callback.CreateOne(SomeNetFnAsync));
```

```javascript
// in Javascript
await someNetFnAsync('Hello callback!');

// prints
Recvd: Hello callback!
```

--------------------------------

### Attach and Detach Event Handlers

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Demonstrates attaching and detaching event handlers using standard C# event syntax. Optional arguments can be omitted to improve performance.

```csharp
void AttachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    window.OnStorage += Window_OnStorage;
}
void DetachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    window.OnStorage -= Window_OnStorage;
}
// The method below is not using the optional StorageEvent argument
void Window_OnStorage()
{
    Console.WriteLine($"StorageEvent");
}
```

--------------------------------

### Set JavaScript Properties and Callbacks

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Use Set to assign values to properties or register .NET methods as global JavaScript functions.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void SetPropertiesExample()
{
    // Set simple values
    JS.Set("document.title", "New Page Title");
    JS.Set("window.myGlobalVar", 42);
    JS.Set("window.myObject", new { name = "test", value = 123 });

    // Set a .NET callback as a global JavaScript function
    JS.Set("window.myCallback", Callback.Create((string message) => {
        Console.WriteLine($"JavaScript called with: {message}");
    }));

    // Set using a Window JSObject
    using var window = JS.Get<Window>("window");
    window.Name = "MyWindowName";

    // Delete a property
    JS.Delete("window.myGlobalVar");
}
```

--------------------------------

### Using Union Type for JavaScript Interop

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Demonstrates how to use the Union<T1, T2, ...> type to pass values of different types to JavaScript, ensuring proper serialization.

```cs
void UnionTypeTestMethod(string varName, Union<bool?, string?>? unionTypeValue)
{
    // unionTypeValue.Value will be either a bool? or string? depending on what was passed in
    // and will be properly serialized to Javascript as boolean | string | null
    JS.Set(varName, unionTypeValue);
}

var stringValue = "Hello world!";
UnionTypeTestMethod("_stringUnionValue", stringValue);
if (stringValue != JS.Get<string?>("_stringUnionValue")) throw new Exception("Unexpected result");

var boolValue = true;
UnionTypeTestMethod("_boolUnionValue", boolValue);
if (boolValue != JS.Get<bool?>("_boolUnionValue")) throw new Exception("Unexpected result");
```

--------------------------------

### IndexedDB Tuple Key Usage

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Demonstrates using a C# ValueTuple as a key in an IndexedDB object store and index, including range queries and cursor iteration.

```csharp
[Inject] 
BlazorJSRuntime JS { get; set; }

public class Fruit
{
    public (byte[], long) MyKey { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
}

override void OnInitialized()
{
    var dbName = "garden_tuple";
    var dbStoreName = "fruit";
    // Get the global IDBFactory (equivalent to 'JS.Get<IDBFactory>("indexedDB")')
    using var idbFactory = new IDBFactory();    
    var idb = await idbFactory.OpenAsync(dbName, 2, (evt) =>
    {
        // upgrade needed
        using var request = evt.Target;
        using var db = request.Result;
        var stores = db.ObjectStoreNames;
        if (!stores.Contains(dbStoreName))
        {
            using var store = db.CreateObjectStore<string, Fruit>(dbStoreName, new IDBObjectStoreCreateOptions { KeyPath = "name" });
            store.CreateIndex<(byte[], long)>("tuple_index", "myKey");
        }
    });

    // transaction
    using var tx = idb.Transaction(dbStoreName, "readwrite");
    using var objectStore = tx.ObjectStore<string, Fruit>(dbStoreName);

    // add some data
    await objectStore.PutAsync(new Fruit { Name = "apple", Color = "red", MyKey = (new byte[] { 1, 2, 3 }, 5) });
    await objectStore.PutAsync(new Fruit { Name = "orange", Color = "orange", MyKey = (new byte[] { 1, 2, 5 }, 5) });
    await objectStore.PutAsync(new Fruit { Name = "lemon", Color = "yellow", MyKey = (new byte[] { 1, 2, 5 }, 5) });
    await objectStore.PutAsync(new Fruit { Name = "lime", Color = "green", MyKey = (new byte[] { 33, 33, 45 }, 5) });

    // get an IDBIndex
    using var myIndex = objectStore.Index<(byte[], long)>("tuple_index");

    // create a range using ValueTuple type
    using var range = IDBKeyRange<(byte[], long)>.Bound((new byte[] { 0, 0, 0 }, 0), (new byte[] { 5, 5, 5 }, long.MaxValue));

    var included = range.Includes((new byte[] { 1, 2, 4 }, 5));

    var cmpRet0 = idbFactory.Cmp<(byte[], long)>((new byte[] { 1, 2, 3 }, 6), (new byte[] { 1, 2, 3 }, 5));
    var cmpRet1 = idbFactory.Cmp<(byte[], long)>((new byte[] { 1, 2, 3 }, 5), (new byte[] { 1, 2, 3 }, 5));
    var cmpRet2 = idbFactory.Cmp<(byte[], long)>((new byte[] { 1, 2, 2 }, 5), (new byte[] { 1, 2, 3 }, 5));
    var cmpRet3 = idbFactory.Cmp<(byte[], long)>((new byte[] { 1, 2, 4 }, 5), (new byte[] { 1, 2, 3 }, 4));

    // getAll on IDBIndex using the above range
    using var getAll = await myIndex.GetAllAsync(range);

    // below prints "apple", "orange", "lemon"
    // the "lime" entry's byte[] is outside of our range and therefore not included
    foreach (var item in getAll.ToArray())
    {
        JS.Log(item.Name);
    }

    // get on IDBIndex. returns null if not found.
    var get = await myIndex.GetAsync((new byte[] { 1, 2, 5 }, 5));
    JS.Log("get", get);

    // getAll on ObjectStore
    var getAllStore = await objectStore.GetAllAsync();
    JS.Log("getAllStore", getAllStore);

    // IDBCursor iteration
    using var cursor = await myIndex.OpenCursorAsync();
    var hasData = cursor != null;
    while (hasData)
    {
        var canCont1 = await cursor.CanContinue();
        JS.Log("Entry", cursor!.Value);
        hasData = await cursor!.ContinueAsync();
        var canCont2 = await cursor.CanContinue();
        var nmt = true;
    }
    JS.Log("Done");
}
```

--------------------------------

### Perform Dynamic Module Imports

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Use the Import method to load ES modules at runtime or load traditional script files conditionally.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task ImportModuleExample()
{
    // Dynamic import of a module
    using var module = await JS.Import("https://cdn.example.com/library.js");

    // Call exported functions from the module
    var result = module.Call<string>("exportedFunction", "arg1");

    // Import and assign to a global variable
    using var acorn = await JS.Import("acorn", "https://cdn.jsdelivr.net/npm/acorn/+esm");
    // Now accessible as window.acorn

    // Import with typed wrapper
    using var myLib = await JS.Import<MyLibrary>("./js/myLibrary.js");
    myLib.Initialize();
    var data = myLib.GetData();

    // Load traditional script files
    await JS.LoadScript("https://cdn.example.com/legacy-library.js");

    // Load script only if global var doesn't exist
    await JS.LoadScript("https://cdn.example.com/jquery.min.js", "jQuery");
}
```

--------------------------------

### Create Promise with Return Value

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Create a JavaScript Promise that wraps an asynchronous .NET method returning a value. The return value will be resolved by the Promise.

```cs
var promise = new Promise<string>(async () => {
    await Task.Delay(5000);
    return "Hello world!";
});
// pass to Javascript api
```

--------------------------------

### Pass Lambda Callbacks to JavaScript

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Using Callback.Create to pass a lambda expression to JavaScript.

```csharp
JS.Set("testCallback", Callback.Create((string strArg) => {
    Console.WriteLine($"Javascript sent: {strArg}");
    // this prints "Hello callback!"
}));
```

```javascript
// in Javascript
testCallback('Hello callback!');
```

--------------------------------

### Invoke JavaScript Methods with BlazorJSRuntime

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Use Call, CallVoid, and CallAsync to execute JavaScript functions synchronously or asynchronously. Ensure appropriate generic types are provided for return values.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

async Task CallMethodsExample()
{
    // Synchronous call with return value
    var result = JS.Call<int>("Math.max", 5, 10);
    // result == 10

    // Synchronous call with no return value
    JS.CallVoid("console.log", "Hello from Blazor!");

    // Call localStorage methods
    JS.CallVoid("localStorage.setItem", "myKey", "myValue");
    var value = JS.Call<string?>("localStorage.getItem", "myKey");

    // Async call for JavaScript async functions or Promises
    var response = await JS.CallAsync<Response>("fetch", "https://api.example.com/data");
    var text = await response.Text();

    // Call setTimeout with callback
    JS.CallVoid("setTimeout", Callback.CreateOne(() => {
        Console.WriteLine("Timeout executed!");
    }), 1000);

    // Parse JSON
    var obj = JS.Call<JsonObject>("JSON.parse", "{\"name\":\"test\"}");
}
```

--------------------------------

### Implement ActionEvent

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Define ActionEvent properties for handling JavaScript events in .NET.

```cs
// This is how ActionEvent is implemented in the Window class
public ActionEvent<StorageEvent> OnStorage { get => new ActionEvent<StorageEvent>("storage", AddEventListener, RemoveEventListener); set { } }
```

--------------------------------

### Create and Manipulate TypedArrays in C#

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Demonstrates creating and manipulating various JavaScript TypedArray types (Uint8Array, Int32Array, Float32Array, Float64Array) from C# byte arrays, integers, and floats. Shows accessing elements, copying data, and creating views on ArrayBuffers. Also includes usage with Blob.

```csharp
[Inject]
BlazorJSRuntime JS { get; set; }

void TypedArrayExample()
{
    // Create Uint8Array from byte array
    byte[] data = { 1, 2, 3, 4, 5, 10, 20, 30 };
    using var uint8 = new Uint8Array(data);

    // Access elements by index
    uint8[0] = 100;
    var firstValue = uint8[0];
    // firstValue == 100

    // Get length
    var length = uint8.Length;

    // Copy back to .NET array
    byte[] copiedData = uint8.ToArray();

    // Create other typed arrays
    using var int32Array = new Int32Array(new int[] { -1, 0, 1, 2, 3 });
    using var float32Array = new Float32Array(new float[] { 1.5f, 2.5f, 3.5f });
    using var float64Array = new Float64Array(new double[] { 1.1, 2.2, 3.3 });

    // Create from ArrayBuffer
    using var buffer = new ArrayBuffer(16);
    using var view = new Uint8Array(buffer);

    // Create with offset and length
    using var partialView = new Uint8Array(buffer, 4, 8);

    // Slice array
    using var sliced = uint8.Slice(2, 5);

    // Use with Blob
    byte[] fileData = System.Text.Encoding.UTF8.GetBytes("Hello World!");
    using var textArray = new Uint8Array(fileData);
    using var blob = new Blob(new object[] { textArray }, new BlobOptions { Type = "text/plain" });
}
```

--------------------------------

### Implement Custom JSObject Wrapper

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Create a class inheriting from JSObject to provide strongly typed access to JavaScript objects.

```csharp
// create a class for your Javascript object that inherits from JSObject
public class Window : JSObject 
{
    // required constructor
    public Window(IJSInProcessObjectReference _ref) : base(_ref) { }
    public string Name { get => JSRef.Get<string>("name"); set => JSRef.Set("name", value); }
    public void Alert(string msg = "") => JSRef.CallVoid(msg);
    // ...
}

// use the JSObject class to interact with the Javascript object
public void JSObjectClassTest() {
    var w = JS.Get<Window>("window");
    var randName = Guid.NewGuid().ToString();
    // directly set the window.name property
    w.Name = randName;
    // verify the read back
    if (w.Name != randName) throw new Exception("Interface property set/get failed");
}
```

--------------------------------

### Configure Blazor Web App for Interactive WebAssembly Render Mode

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Configure Blazor components to use Interactive WebAssembly render mode, optionally with prerendering disabled. This is necessary for components requiring BlazorJSRuntime functionality in a Blazor Web App.

```html
<Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
```

--------------------------------

### Attach and Detach Events using On and Off

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Alternative approach for attaching and detaching event handlers using the On and Off methods.

```csharp
void AttachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    window.OnStorage.On(Window_OnStorage);
}
void DetachEventHandlersExample()
{
    using var window = JS.Get<Window>("window");
    window.OnStorage.Off(Window_OnStorage);
}
// The method below is not using the optional StorageEvent argument
void Window_OnStorage()
{
    Console.WriteLine($"StorageEvent");
}
```

--------------------------------

### Call asynchronous JavaScript functions via Promise

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Use Call with Promise<T> and ThenAsync for async JavaScript functions.

```cs
// C#
var totalPromise = JS.Call<Promise<int>>("AddNum", 20, 22);
var total = await totalPromise.ThenAsync();
// total == 42 here
```

--------------------------------

### Inject and Use BlazorJSRuntime in Components

Source: https://context7.com/lostbeard/spawndev.blazorjs/llms.txt

Inject the service into components to interact with browser APIs like window properties, document settings, and localStorage.

```csharp
@page "/example"
@using SpawnDev.BlazorJS

@code {
    [Inject]
    BlazorJSRuntime JS { get; set; }

    protected override void OnInitialized()
    {
        // Access window properties
        var innerHeight = JS.Get<int>("window.innerHeight");

        // Set document properties
        JS.Set("document.title", "My Blazor App");

        // Call JavaScript methods
        var item = JS.Call<string?>("localStorage.getItem", "myKey");

        // Log to browser console
        JS.Log("Hello from Blazor!", innerHeight);
    }
}
```

--------------------------------

### Call asynchronous JavaScript functions via CallAsync

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Use CallAsync for async JavaScript functions or functions returning a Promise.

```js
// Javascript
async function AddNum(num1, num2){
    return num1 + num2;
}
```

```cs
// C#
var total = await JS.CallAsync<int>("AddNum", 20, 22);
// total == 42 here
```

--------------------------------

### TypedArray Manipulation

Source: https://github.com/lostbeard/spawndev.blazorjs/blob/main/README.md

Illustrates creating, modifying, and converting between C# byte arrays and JavaScript Uint8Array objects.

```csharp
// Create a Uint8Array from a C# byte array
byte[] data = [1, 2, 3, 4, 5];
using var uint8 = new Uint8Array(data);

// Set a value at index 0
uint8[0] = 10;

// Get the value back
var val = uint8[0];
// val == 10

// Copy back to C# array
var readBack = uint8.ToArray();
```