https://github.com/chucker/blazortscomponentsample

A sample project of a Blazor component that wraps a TypeScript/JavaScript library, but interops with .NET
https://github.com/chucker/blazortscomponentsample

blazor csharp typescript webassembly

Last synced: 4 months ago
JSON representation

A sample project of a Blazor component that wraps a TypeScript/JavaScript library, but interops with .NET

• Host: GitHub
• URL: https://github.com/chucker/blazortscomponentsample
• Owner: chucker
• License: mit
• Created: 2019-03-09T19:08:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-10T20:15:13.000Z (over 7 years ago)
• Last Synced: 2025-04-14T10:47:27.723Z (about 1 year ago)
• Topics: blazor, csharp, typescript, webassembly
• Language: HTML
• Size: 214 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# blazortscomponentsample

A sample project of a Blazor component that wraps a TypeScript/JavaScript library, but interops with .NET.

(As a rule of thumb, avoid this wherever possible. Interop between Blazor/C# and TypeScript is slow, and loses you many features such as type safety and data binding.)

# Available features

This example shows you how to:

* use an existing JS/TS component (in this example case, [bootstrap-slider](https://github.com/seiyria/bootstrap-slider)) from a Blazor app

* take advantage of Razor and strong typing when building the initial markup

* pass a reference to the element (`ElementRef`) as well as to the object (`DotNetObjectRef`) on to TS

* use TS-side events to pass information back to the Blazor side

# Bugs / poor design

* some modules/imports/packages are redundant. For example, portions of Bootstrap come via libman, and others via npm.

* on a related level, there should probably be a single TS entry point so WebPack only creates a single bundle, rather than one bundle per component.

# Missing features

* the naming of the init functions is merely a convention; there should instead be a proper abstraction to make this cleaner

* there are no real affordances to help with data binding or change events

* it should be possible to share state using local storage