Skip to content

Commit 66b7b60

Browse files
committed
Improvements to JS-SPA frameworks article
1 parent 6a37df4 commit 66b7b60

File tree

1 file changed

+28
-17
lines changed

1 file changed

+28
-17
lines changed

aspnetcore/blazor/components/js-spa-frameworks.md

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,25 @@ This article covers how to render Razor components from JavaScript, use Blazor c
2020
<!-- UPDATE 11.0 - The `blazor.web.js` (Blazor Web App) portions of
2121
this article have been commented out for the time being to
2222
facilitate reconstituting the guidance later when support lands.
23-
It was under consideration for .NET 10 on
24-
https://github.com/dotnet/AspNetCore.Docs/issues/35653, but
25-
it didn't make the cut and was backlogged. -->
23+
The PU work is tracked by https://github.com/dotnet/aspnetcore/issues/53920. -->
2624

2725
## Angular sample apps
2826

29-
<!-- UPDATE 10.0 Add migration instructions for 9.0 to 10.0 -->
27+
* [CustomElementsBlazorSample (Blazor Server) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-server`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-server)
28+
* [CustomElementsBlazorSample (Blazor WebAssembly) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-wasm`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-wasm)
3029

31-
* [CustomElementsBlazorSample (Blazor Server) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-server`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-server): Blazor Server is supported in .NET 8/9. To migrate this .NET 7 sample, see <xref:migration/70-to-80#update-a-blazor-server-app> and <xref:migration/80-to-90>.
32-
* [CustomElementsBlazorSample (Blazor WebAssembly) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-wasm`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-wasm): To migrate this .NET 7 sample, see <xref:migration/70-to-80#update-a-blazor-webassembly-app> and <xref:migration/80-to-90>.
30+
To migrate either of these .NET 7 samples, see the following resources:
31+
32+
* <xref:migration/70-to-80>
33+
* <xref:migration/80-to-90>
34+
* <xref:migration/90-to-100>
35+
36+
The principle updates to make are:
37+
38+
* Update the [target framework monikers (TFMs)](/dotnet/standard/frameworks) to the latest version.
39+
* Update the .NET package references and Angular dependencies to their latest versions.
40+
41+
[!INCLUDE[](~/includes/package-reference.md)]
3342

3443
## Render Razor components from JavaScript
3544

@@ -340,24 +349,22 @@ builder.Services.AddServerSideBlazor(options =>
340349

341350
### Blazor WebAssembly registration
342351

343-
Take the following steps to register a root component as a custom element in a Blazor WebAssembly app.
352+
Register a root component as a custom element in a Blazor WebAssembly app. In the following example, the code:
344353

345-
Add the <xref:Microsoft.AspNetCore.Components.Web?displayProperty=fullName> namespace to the top of the `Program` file:
346-
347-
```csharp
348-
using Microsoft.AspNetCore.Components.Web;
349-
```
350-
351-
Add a namespace for the app's components. In the following example, the app's namespace is `BlazorSample` and the components are located in the `Pages` folder:
354+
* Adds a namespace for the app's components. In the example, the app's namespace is `BlazorSample`, and the components are located in the `Pages` folder.
355+
* Provides access to the API in the <xref:Microsoft.AspNetCore.Components.Web?displayProperty=fullName> namespace.
356+
* Calls <xref:Microsoft.AspNetCore.Components.Web.CustomElementsJSComponentConfigurationExtensions.RegisterCustomElement%2A> on <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> to register the `Counter` component with the custom HTML element `my-counter`.
352357

353358
```csharp
354359
using BlazorSample.Pages;
355-
```
360+
using Microsoft.AspNetCore.Components.Web;
361+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
356362

357-
Call <xref:Microsoft.AspNetCore.Components.Web.CustomElementsJSComponentConfigurationExtensions.RegisterCustomElement%2A> on <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents>. The following example registers the `Counter` component with the custom HTML element `my-counter`:
363+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
358364

359-
```csharp
360365
builder.RootComponents.RegisterCustomElement<Counter>("my-counter");
366+
367+
await builder.Build().RunAsync();
361368
```
362369

363370
### Use the registered custom element
@@ -475,3 +482,7 @@ Generate JavaScript (JS) components from Razor components for JavaScript technol
475482

476483
> [!WARNING]
477484
> The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements.
485+
486+
## Additional resources
487+
488+
<xref:blazor/host-and-deploy/index>

0 commit comments

Comments
 (0)