Workflows for optimized blazor builds for nimble and spright

[msmithNI]

📌 User Story

Split off from #440

There's a few ways that clients may want to utilize Nimble in Blazor apps that are advanced/ we don't think will be common.

• Pull in source from CDN Do we actually want clients to do this? The nimble-components Readme already covers getting the Nimble bundle via unpkg, but the JS bundle (all-components-bundle.min.js) is equivalent to the one already included in the Nimble Blazor NuGet, so I don't think we actually need to document/suggest this.
• Manually pull in files of interest by using npm directly and a bundler
• Better workflow of including SCSS files (include them in the Nimble Blazor NuGet, switch tokens SCSS to use @use, use sass npm package so we can import the tokens SCSS via node_module resolution, ...)

For the above points, we think the suggested workflow will be to add a package.json to the consuming Blazor project, have it add a dependency on nimble-tokens, potentially sass, and a bundler package like Parcel or Webpack, and then probably adding some npm build commands as part of the Blazor project build.

We think we can defer this in the short term.

[msmithNI]

Another slightly improved (debatably) way for clients to manually pull in the SCSS would be to include it in the Nuget, with a .targets file with an MSBuild task to copy the files. In the csproj:

    <Content Include="..\..\nimble-components\dist\tokens.scss" Link="tokens.scss" PackagePath="files/nimble-tokens/tokens.scss" />
    <Content Include="..\..\nimble-components\dist\tokens-internal.scss" Link="tokens-internal.scss" PackagePath="files/nimble-tokens/tokens-internal.scss" />
    <None Include="NimbleBlazor.Components.targets">
      <Pack>True</Pack>
      <PackagePath>build/NimbleBlazor.Components.targets</PackagePath>
    </None>

.targets file:

<Project>
    <Target Name="CopyNimbleTokensScss">
        <Copy SourceFiles="$(MSBuildThisFileDirectory)../files/nimble-tokens/tokens.scss" DestinationFolder="$(ProjectDir)/NimbleTokens" />
        <Copy SourceFiles="$(MSBuildThisFileDirectory)../files/nimble-tokens/tokens-internal.scss" DestinationFolder="$(ProjectDir)/NimbleTokens" />
    </Target>
</Project>

Then, once clients add a reference to the NuGet, if they want to copy the token SCSS into their project they just run dotnet msbuild -t:CopyNimbleTokensScss. It's still a manual step they have to run any time the NuGet version changes, but maybe a little better than downloading them from unpkg. It also ensures that they're getting the token SCSS file version that matches with the nimble-tokens/nimble-components versions included in their NuGet.

[rajsite]

Blazor has this concept of ASP.NET Core Single Page App Templates where they show integrating Angular and React projects. We should see if that helps"

1. Give a pattern for optimized Blazor builds (compiling just the needed JS from nimble and maybe also using SCSS)
2. Maybe we should have docs describing how to use the Angular SPA Template with Nimble to lower the overhead to leveraging Angular UIs in predominately C# code bases.