Skip to content

Commit cfd160d

Browse files
authored
Enhance JS initializer remarks (#34474)
1 parent 1977128 commit cfd160d

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

aspnetcore/blazor/javascript-interoperability/static-server-rendering.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,14 @@ export function onDispose() {
9797
}
9898
```
9999

100-
In a [Razor Class Library (RCL)](xref:blazor/components/class-libraries) (the example RCL is named `BlazorPageScript`), add the following module.
100+
In a [Razor Class Library (RCL)](xref:blazor/components/class-libraries) (the example RCL is named `BlazorPageScript`), add the following module, which is a [JS initializer](xref:blazor/fundamentals/startup#javascript-initializers).
101101

102102
`wwwroot/BlazorPageScript.lib.module.js`:
103103

104104
[!INCLUDE[](~/blazor/includes/js-interop/blazor-page-script.md)]
105105

106+
Do ***not*** add a `<script>` tag to the app's root component, typically the `App` componennt, for `BlazorPageScript.lib.module.js` because the module in this case is a [JS initializer (`afterWebStarted`)](xref:blazor/fundamentals/startup#javascript-initializers). JS initializers are detected and loaded automatically by the Blazor framework.
107+
106108
In the RCL, add the following `PageScript` component.
107109

108110
`PageScript.razor`:
@@ -129,6 +131,8 @@ To reuse the same module among pages, but have the `onLoad` and `onDispose` call
129131

130132
To monitor changes in specific DOM elements, use the [`MutationObserver`](https://developer.mozilla.org/docs/Web/API/MutationObserver) pattern in JS on the client. For more information, see <xref:blazor/js-interop/index#dom-cleanup-tasks-during-component-disposal>.
131133

132-
## Example implementation without using an RCL
134+
## Implementation without using an RCL
135+
136+
The approach described in this article can be implemented directly in a Blazor Web App without using a Razor class library (RCL) by moving the assets of the RCL into the app. However, the use of an RCL is convenient because the RCL can be packaged into a NuGet package for consumption by Blazor apps across an organization.
133137

134-
The approach described in this article can be implemented directly in a Blazor Web App without using a Razor class library (RCL). For an example, see <xref:blazor/security/qrcodes-for-authenticator-apps>.
138+
If you move the assets into a Blazor Web App, be sure to rename the module (`BlazorPageScript.lib.module.js`) to match the app per the file naming rules for [JS initializers](xref:blazor/fundamentals/startup#javascript-initializers). If the file isn't named correctly, Blazor can't detect and load the module, and the `afterWebStarted` event doesn't execute automatically when the app starts.

0 commit comments

Comments
 (0)