Improve JavaScript colocation guidance

[Ricardoaraujo00]

JavaScript collocated file with a component isn't loading automaticaly in Blazor. shouldn't it be like with css wich loads automatically being named like the component with css extension? If not, that information is not clear on this page..

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 57ed3088-2f9b-f51a-fd17-0c0de2949c57
• Version Independent ID: 49fa31d8-72a6-01a1-027d-6edeac9e0fc4
• Content: Blazor JavaScript interoperability (JS interop)
• Content Source: aspnetcore/blazor/javascript-interoperability/index.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @Ricardoaraujo00 ... The scripts aren't loaded automatically. You still need to do that. Also, the JS file(s) aren't copied locally for debug. They're moved on publish. I agree that this new content needs additional work. I'll schedule it now. Until then, take a look at the PU issue/PR and the original blog post announcement ...

• Issue: [Blazor] JS isolation improvement - Colocate CS, CSS and JS files aspnetcore#26145 [ASP.NET] Add support for JS modules and initializers sdk#19270
• Blog Post: https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-rc-1/#collocate-javascript-files-with-pages-views-and-components

[guardrex]

@Ricardoaraujo00 ... The main idea is that you place the file SxS with the component and reference the script AT THAT PATH (e.g., in the Pages folder, include Pages in the path to the script when you're loading it).

Then ... later ... when you publish the app, the framework will take care of getting all of these JS files from around the app and placing them into wwwroot and you don't need to worry about updating those paths to the scripts.

I'm not sure if Blazor physically updates the path for the scripts on publish or if Blazor leaves the path alone on publish but figures out when the component instantiates and executes that these colocation paths should be ignored and just requests the script from the web root.

Either way tho, the effect is the same: You can colocate the script file with the component and reference it at that location. Everything else (debug or publish) is transparent, automatic, and should ✨ Just Work!™ ✨ ............ in theory! 😄

If 😈 are breaking something for you, then you'll need to open a bug report with the PU and give them a minimal GH repro and explanation of what's breaking ...

https://github.com/dotnet/aspnetcore/issues

If you do end up having to open an issue with them, please CC me by placing the following at the bottom of your opening comment of your PU issue ...

cc: @guardrex https://github.com/dotnet/AspNetCore.Docs/issues/24637

[Ricardoaraujo00]

Ok, thank you for that explanation. Maybe you should add that explanation to this functionality page. Although for me it makes very little sense the dev team came up with this colocation, like with css, but not working like it(I suppose they didn't had time to finish it before .net6 launch)
It would be nice for the scripts to be loaded with the component like css (maybe that will be present in .net 7). The ones that don't like the functionality just don't follow the convention.
I've also checked from where the colocated script is being loaded and it is from a directory in wwwroot which must be created by visual studio on compilation("https://localhost:44375/pages/Counter.razor.js")

Suggestion:
In the secction "Load a script from an external JavaScript file (.js) collocated with a component" i sugest mentioning the steps for actually getting it to work. I had to watch third patry videos on youtube.
Steps:
//Add JS runtime on blazor component
@Inject IJSRuntime JS

//Create a variable to hold the Js script
private IJSObjectReference jsModule;

//Get the JS file (This one is there)
jsModule = await JS.InvokeAsync("import","./pages/Counter.razor.js");

//Call the javascript function
if(jsModule!=null)
{
await jsModule.InvokeVoidAsync("ShowModal");
}

Thank you