JS Isolation in Blazor Components

[lonix1]

JS isolation has been discussed in many separate issues (example). I'm sure the team intends to tackle this at some point, but it hasn't been tracked as an independent issue, until now.

JS Isolation per Blazor component would be appreciated because:

• much easier
• much cleaner
• reduces lots of boilerplate
• those used to SPAs are expecting to work that way

[mkArtakMSFT]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we will planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[egil]

Hey folks,

Does this addition mean a custom attribute will be added to generated HTML markup like with scoped CSS?

[SteveSandersonMS]

No. The form of JS isolation we have added is the ability to load and invoke ES6 modules. They are not tied to specific components (except by the developer's own convention if they so choose).

[Amine-Smahi]

Hello,
First i want to thank the team for adding js module support to blazor.
But everyone was expecting to be able to use a component js isolation "component.razor.js"

This is the most suitable way for a angular devs

[SteveSandersonMS]

@Amine-Smahi You can have any naming convention you want. If you want to have one JS file per component, you can certainly do that.

The one limitation is that the .js file needs to go in wwwroot rather than side-by-side with the component. Perhaps that's something we could enhance in the future but I hope for now it doesn't inconvenience you too much to put the .js file into some directory structure within wwwroot.

[Amine-Smahi]

The problem is not in the naming convention specifically, but rather in the location of the js file.
It would be perfect if we had the ability to create a folder for each component that contain the css, js and razor together just like angular.

I would like to thank the team again for the amazing work but i think it’s a bit missy to have to switch between wwwroot and component location for each component (if you opt for the component style js isolation)

[egil]

@Amine-Smahi my first thought is that this should be doable by a build script/msbuild step, that finds all .js/.ts files in a Blazor class lib/app and copies them to wwwroot at build time.

[lonix1]

@egil That is a very good workaround, for now. But long-term I think most of us with previous SPA experience would strongly agree with @Amine-Smahi (discoverability of files in a complex solution is hard enough without splitting files across multiple directories).

Also agree with him that this is still v1, and awesome as is. Since @SteveSandersonMS is receptive to the idea, I'm sure (/hope 😄) we'll see something more streamlined in vNext.

[lonix1]

@Amine-Smahi I suppose you could copy your comment into a new backlog issue so no one forgets about it?

[lonix1]

Folks if you agree with @Amine-Smahi that we need colocated cs/css/js files per component, please upvote the new issue here.