Javascript interop documentation

[michaelongithub]

Hi, where can I find that ? To use JS libraries for components (data table tools like tabulator.info, datatables.net or whatever)
Thanks

[rstropek]

Currently, Blazor does not contain any particular support for using such existing JavaScript components. I guess it is too early for that. However, you have JavaScript interop and you can use it to integrate Blazor with existing libraries. I am currently writing on an article about that. The sample is already done. It demonstrates how to fill a Telerik Kendo UI Autocomplete control from a Blazor page. Hope that helps.

[michaelongithub]

Thanks for the info

[danroth27]

@guardrex

[guardrex]

According to our current plan, JS/TS interop documentation will appear soon after the release of the preview docs (we don't have an issue yet; the issue will appear in a couple of weeks). In the meantime, I'll drop the section in here that we have in the draft introduction topic, which was derived from the @SteveSandersonMS blog post.

For apps that require third-party JavaScript libraries and browser APIs, WebAssembly is designed to interoperate with JavaScript. Blazor is capable of using any library or API that JavaScript is able to use.

To call JavaScript libraries or your own custom JavaScript/TypeScript code from .NET, the current approach is to register a named function in a JavaScript/TypeScript file:

Blazor.registerFunction('doPrompt', message => {
  return prompt(message);
});

Wrap the named function for calls from .NET:

public static bool DoPrompt(string message)
{
    return RegisteredFunction.Invoke<bool>("doPrompt", message);
}

[rstropek]

We now have a chapter on JS interop with an example of interacting with a UI library (Kendo UI) online: https://learn-blazor.com/architecture/interop/ Hope it helps getting started until Microsoft has more in-depth documentation available.

[SteveSandersonMS]

Thanks for the answers, @rstropek and @guardrex!

[superlloyd]

How does use a large third party API with a large number of methods? For example GoogleMap JS API?

Would there be better interop?
Or one should also rely on community made wrapper?

[danroth27]

@superlloyd The thinking is that we will have tooling that can generate the JS interop .NET wrapper for you from the library's typescript definitions. The community can then ship these JS interop APIs as NuGet packages. See https://github.com/mono/TsToCSharp for additional details.

[superlloyd]

Sounds like great thinking, awesome, thanks! :)
Plus most good library already have .d.ts file provided somewhere! :)