.NET JS interop article updates

[guardrex]

Fixes #32660

Marek ... UPDATE: Making progress ...

• Version-specific language updates. Version new coverage for .NET 8+.
• Change from the Microsoft.NET.Sdk SDK to the Microsoft.NET.Sdk.WebAssembly SDK.
• Update code and language for .NET 8+.
• Update guidance for workload and template installation.

See my latest comments on three items of concern 👇.

---

Internal previews

📄 File	🔗 Preview link
aspnetcore/client-side/dotnet-interop.md	Run .NET from JavaScript

[guardrex]

UPDATE: I'm going to try and fix my broken workload 😈 situation. If successful, I can proceed to set this PR up fully.

[guardrex]

BTW @maraf ... Can the wasm-experimental workload be installed for VS? I was able to install the .NET WebAssembly build tools (wasm-tools) workload in VS, and I'm wondering if I can get the wasm-experimental workload as well? If so, I think our guidance in this article should be updated to include the use of VS.

Anyway ... thus far ... the CLI is a total failure here. The command output makes no sense. Installing the workload yields ...

Successfully installed workload(s) wasm-tools android aspire ios maccatalyst maui-windows.

Then, I list the installed workloads, and that workload doesn't show up in the list.

[guardrex]

I finally came up with this ...

> dotnet new search wasmbrowser

Searching for the templates...
Matches from template source: NuGet.org
These templates matched your input: 'wasmbrowser'

Template Name       Short Name   Language  Package Name / Owners                                                     Trusted  Downloads
------------------  -----------  --------  ------------------------------------------------------------------------  -------  ---------
WebAssembly Bro...  wasmbrowser  [C#]      Microsoft.NET.Runtime.WebAssembly.Templates / dotnetframework, Microsoft     ✓        112k


To use the template, run the following command to install the package:
   dotnet new install [<package>...]
Example:
   dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

> dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

The following template packages will be installed:
   Microsoft.NET.Runtime.WebAssembly.Templates

Success: Microsoft.NET.Runtime.WebAssembly.Templates::8.0.6 installed the following templates:
Template Name            Short Name   Language  Tags
-----------------------  -----------  --------  -----------------------
Wasi Console App         wasiconsole  [C#]      Wasi/WasiConsole
WebAssembly Browser App  wasmbrowser  [C#]      Web/WebAssembly/Browser
WebAssembly Console App  wasmconsole  [C#]      Web/WebAssembly/Console

... so things are shaping up here.

I was then able to create an 8.0 wasmbrowser app, so I can now proceed to fix up the rest of the PR ... I hope. 🤞🍀

[guardrex]

Publishing seems to be broken. The target location is different from where the app is actually published. I'll place guidance that's explained using generic language or based on what VS is doing here.

Target location:

Actual publish location:

[guardrex]

@maraf ... I've been partially successful in updating the content.

Here are the problem areas:

1. I can't get the workload install commands to work here.

   What was successful for me was to use the VS installer with the .NET WebAssembly build tools option. Then, I used the NuGet package to get the templates ...

   dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates
   

   After that, I was able to create the projects from either the command line or from VS.

   I've updated the guidance to explain both approaches; but note that AFIACT from here, there's a problem with the CLI workload install command approach for both the tools and the templates ... at least on my system there's some kind of problem. I'm 👂 on how you want to handle it in the article.

2. The dotnet serve command doesn't seem to be a command. It's not documented, and it's not available on my system ...

   

3. The publish output location doesn't match the Target location in VS during publishing. The SDK uses bin/Release/net8.0/publish, but the target location shows bin/Release/net8.0/browser-wasm/publish (see my last comment that has screenshots ☝️) ... and note that the default was always for the "publish" folder, not a folder named "AppBundle," so IDK if that was a custom path that was set by the original author of the content that came over or not. I've updated the guidance on the PR to match the actual published assets path.

[maraf]

I'm sorry for later reply, I'm leaving for next two weeks and I'm a bit under the water .

1. The approach with installing just templates is possible, but installing wasm-experimental workload seems working on my machine™️. Could you try some VM or sandbox or DevBox? In .NET 9 P4 (or P3) I have changed the code in the template and it would be good to reference the changed code in the docs.
2. The dotnet serve is a .NET tool and needs to be installed separatelly https://github.com/natemcmaster/dotnet-serve. Anyway, in .NET 9 and also 8 and 7 you can do just dotnet run for the wasmbrowser template app and it will spin up a built-in server.
3. Yes, the publish from VS is broken. We are tracking it in [browser] Publish wasmbrowser app from Visual Studio doesn't respect "include RID in output path" runtime#99159

[guardrex]

Me, too ... I'm OOF all of next week. I'll try to wrap this up now and get it merged.

1. Ok ... but I need to find the changes on the repo because it might be difficult for me to get the preview template installed locally given the trouble that I'm having with this workload. I'll look in the repo at the template to see if I can make the updates. As for using a VM to test commands, I don't think I'll have time. I only have three hours today before my annual contract ends, then I'll be back to work on July 1. It's best to merge this PR now before I go.
2. Thanks ... got it ... PR updated.
3. I'll go with what the SDK does now on the PR, and I've added a tracking item to my .NET 9 issue to change this article when the publish path problem is fixed.

[guardrex]

I see you changed over to a stopwatch example.

https://github.com/dotnet/runtime/blob/main/src/mono/wasm/templates/templates/browser/wwwroot/main.js

[guardrex]

@maraf ... I wrote that up fairly fast given that I'm leaving in just a couple of hours. Hopefully, it's correct or not too far off.

[guardrex]

I'm going to go ahead and merge this, and we can circle back around in a couple of weeks for additional updates.