Skip to content

Latest commit

 

History

History
82 lines (57 loc) · 2.62 KB

README.md

File metadata and controls

82 lines (57 loc) · 2.62 KB
Raw

BrowserInterop

Build Status NuGet Badge

This library provides access to browser API in a Blazor App.

The following criteria are taken into account for choosing if an API must be handled :

  • Is it already doable with Blazor (like XHR, DOM manipulation or already managed event ) ?
  • Is that part of the standard ?
  • Is that implemented by most browsers ? (> 75% in caniuse)

This library aim at providing some added value which are :

  • Better deserialization than default : DomString, Infinity, Array-like map ...
  • Better typing : duration as TimeSpan, string as enum ...
  • Use IAsyncDisposable for method call that must be executed around a code block (like profiling) or event subscription
  • Func for event subscription

I use the following website for discovering API description https://developer.mozilla.org/en-US/docs/Web/API and this one for finding out if it is implemented https://caniuse.com/.

Quick Start

First install the package

dotnet add package BrowserInterop

Reference the needed JS in your index.html after the blazor.webassembly.js (or in your js bundling tool)

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/BrowserInterop/scripts.js"></script>

Then in your template enter the API with the Window() extension method like this :

@using BrowserInterop.Extensions
...
@code {
    protected override async Task OnInitialized()
    {
        var window = await jsRuntime.Window();
        await window.Console.Log("this is a {0}","Log message");
      
    }
}

==> More documentation and information on the wiki

Development

If you wish to improve this library here are a couple of things that might help you

Environment

For working on this project you need the following tools installed on your machine :

  • .NET SDK 3.1.202
  • npm

Projects

This repo is organised in 3 projects :

  • src/BrowserInterop : the C# project for the netsstandard2.0 library
  • sample/SampleApp : a sample app showing how to use BrowserInterop
  • tests/BrowserInterop.E2ETests : the test suite, done with cypressio. All tests are located in cypress/integration folder.

Run the test suite

  • Run the app in sample/SampleApp :
dotnet watch run
  • Open cypress Console in tests/BrowserInterop.E2ETests :
npm install
npm run-script start