Create a Blazor web site allowing folks to write Core SDK code and press run

[jansenbe]

Category

• [x] Feature request

In the category of super cool things ~ living on the edge ~ to build: making a .NET Blazor (WASM) site that allows folks to write and run PnP Core SDK code. User would sign in to Azure AD consenting to an app and then write, compile and execute PnP Core SDK code. Having a live sample gallery would be a bonus ✨

For inspiration:

• https://alistairevans.co.uk/2020/02/03/blazor-webassembly-monaco-and-antlr-building-the-autostep-editor-as-a-blazor-app
• https://github.com/sapsari/website-blazor-demo
• https://github.com/serdarciplak/BlazorMonaco
• https://www.matblazor.com/

[pkbullock]

Another inspiration https://try.mudblazor.com/

[pkbullock]

Found a .net tool in private preview that might allow us to fork and create a PnP Core Specific one. https://github.com/dotnet/try

[s-KaiNet]

I spent some time playing around with this task. Below are my findings:

• it's not that difficult to have a monaco editor instance running in blazor with syntax highlighting and a button to run the code. Here is what I have:

https://user-images.githubusercontent.com/10658276/142866010-e10213ad-5207-4e7c-9df6-9150465f5ddf.mp4

• what is a lot more difficult is to have vscode-like experience with method completions, error highlights, hover info and so on. Monaco doesn't support this OOB, you can only either register a custom completion provider, hover provider, code checker, etc. or register monaco as a language server client and have a language protocol server on a backend with blazor. I found two samples using both approaches and added to my poc repo (below).
• dotnet try is a super cool thing, however it's not very clear how (it it's possible) to configure it to run locally to modify for our needs. Also it looks like this project is not heavily maintained, because for Blazor they use [email protected] modules. Microsoft.AspNetCore.Blazor was deprecated and marked as legacy a year ago. The current version is Microsoft.AspNetCore.Components.WebAssembly.

Just for reference created a repo with all my tests here.

[jansenbe]

Nice to see this in action @s-KaiNet, nice start for this effort. Reading above it seems that making this into an easy to use (like Graph Explorer) experience there's quite a lot of work to do...Still would be nice to have such a live test console, but feels like we currently can provide more value in other areas like documentation, tutorials, videos, samples etc... What do you think @s-KaiNet ?

[s-KaiNet]

Yeah, I made a similar conclusion. In theory, we can do it right now, but the efforts needed don't match the value (at least for now). Thus I added my findings just for reference if anybody will come back to that issue somewhere in the future. I hope that dotnet.try will make a progress and will publish a guide on how to modify their solution (I haven't found and was not even able to compile their project due to mystic errors, maybe because of the old packages).

[jansenbe]

Not exactly needed here but adding this one https://github.com/Elringus/DotNetJS as it's an easier way to expose a .NET library to JS

[jansenbe]

Closing for now, too complex/costly to implement versus the value it will bring