[Blazor] JS isolation improvement - Colocate CS, CSS and JS files

[daniel-p-tech]

Hi,

When the work on JS isolation was first announced, I was expecting something similar to CSS isolation where I would be able to create ComponentXYZ.razor.js file. Apparently other developers are in favor of this idea as well:

#23560

I'd like to take this approach further as suggested in a separate ticket:
https://github.com/dotnet/aspnetcore/issues/24943

I really believe there is a great benefit in organizing a large project this way, it's a lot more convenient to find JS/CSS files related to a component rather than chasing them down in a separate folder. This is exactly how we organize our large WebForms projects as well, so I'm speaking from experience.

Thank you for your consideration!

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[lonix1]

Some context from that other issue.

@SteveSandersonMS wrote:

The limitation is 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 for now put the .js file into some directory structure within wwwroot.

@Amine-Smahi wrote:

The problem is 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.

@egil provided a temporary workaround:

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

[git-net]

maybe we can use vs webcompiler plugin.
compilerconfig.json {
"outputFile": "wwwroot/js/a.razor.js",
"inputFile": "Pages/a.razor.js"
}

[EngstromJimmy]

We can use the Library Manager to copy the files, I just wrote a blog post on that =)

The only down-side I have found is that the files are copied on Build, if you don't change any files that are actually built, the files won't get updated.

[GeorgeS2019]

Any feedback on making Blazor JavaScript Isolation to work with importing module consisting of a list of require statements for NodeModules (CommonJS)? Is it possible to use Browserify to bundle it for import in the case of JS Isolation? Kind of new to this.

How to make Browserify compatible with Blazor JavaScript Isolation?

[SteveSandersonMS]

@GeorgeS2019 Thanks for contacting us. Your support question is separate from this issue, so rather than having this thread get side-tracked, could you please post a new issue? Thanks!

[GeorgeS2019]

@SteveSandersonMS Got it :-)

FYI => I found this, the plan to bridge the CSJ and ESM gap

[paulguz]

+1 for this. In addition to co-location, I'd like to see the module defined in the razor.js being automatically available as a Module property in the C# razor code.

[LaughingJohn]

It would be great to have this in Razor Pages as well. Consistency is always good for productivity.
I know CSS isolation in Razor Pages is coming in 6.0 but if JavaScript could be supported in a similar way in both Razor Pages and Blazor it would be perfect. Apologies if this is planned and I missed it...

[javiercn]

This is in the works for both Blazor and MVC/Razor pages

[LaughingJohn]

This is in the works for both Blazor and MVC/Razor pages

This is very good news indeed! Thanks @javiercn!

[javiercn]

done in dotnet/sdk#19270