Merge pull request #208 from TimeWarpEngineering/Cramer/2025-01-20/UpdatePackages

StevenTCramer · web-flow · commit 6fb5e44dacd5 · 2025-01-24T15:19:22.000+07:00
Cramer/2025 01 20/update packages
diff --git a/TimeWarp.Architecture/CSS Bundle Hash Management in Blazor with Tailwind.md b/TimeWarp.Architecture/CSS Bundle Hash Management in Blazor with Tailwind.md
@@ -0,0 +1,81 @@
+# CSS Bundle Hash Management in Blazor with Tailwind
+
+## Overview
+When using Blazor components like FluentUI and QuickGrid alongside Tailwind CSS, you may encounter build issues related to CSS bundle hashing. This document explains the issue and provides solutions.
+
+## The Problem
+Modern Blazor component libraries use content hashing for their CSS bundles to enable cache busting. These hashes are generated based on the content of the CSS files and appear in the bundle filenames, e.g.:
+- `Microsoft.FluentUI.AspNetCore.Components.{hash}.bundle.scp.css`
+- `Microsoft.AspNetCore.Components.QuickGrid.{hash}.bundle.scp.css`
+
+The challenge arises when Tailwind needs to process these files during build time, as the hash values can change with package updates.
+
+## Current Solution
+The current solution involves creating dummy CSS files with the correct hash values to satisfy the build process:
+
+```xml
+<Target Name="CreateDummyFluentUICSS" BeforeTargets="Build">
+  <ItemGroup>
+    <DummyCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.FluentUI.AspNetCore.Components\Microsoft.FluentUI.AspNetCore.Components.{hash}.bundle.scp.css" />
+  </ItemGroup>
+  <MakeDir Directories="$(ProjectDir)obj\css\_content\Microsoft.FluentUI.AspNetCore.Components" />
+  <WriteLinesToFile File="@(DummyCSSFile)" Lines="/* Dummy file to satisfy build requirement */" Overwrite="true" />
+</Target>
+
+<Target Name="CreateDummyQuickGridCSS" BeforeTargets="Build">
+  <ItemGroup>
+    <DummyQuickGridCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.AspNetCore.Components.QuickGrid\Microsoft.AspNetCore.Components.QuickGrid.{hash}.bundle.scp.css" />
+  </ItemGroup>
+  <MakeDir Directories="$(ProjectDir)obj\css\_content\Microsoft.AspNetCore.Components.QuickGrid" />
+  <WriteLinesToFile File="@(DummyQuickGridCSSFile)" Lines="/* Dummy file to satisfy build requirement */" Overwrite="true" />
+</Target>
+```
+
+## What to Do When Updating Packages
+When updating FluentUI, QuickGrid, or other component packages that use CSS bundles:
+
+1. Build the project after the update
+2. Watch for build errors mentioning missing CSS bundles
+3. Note the new hash values from the error messages
+4. Update the corresponding hash values in your CreateDummy targets
+5. Rebuild the project
+
+Example error message to look for:
+```
+Error: Failed to find '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.{hash}.bundle.scp.css'
+```
+
+## Alternative Solutions
+
+### 1. Runtime CSS Loading
+Move component CSS loading to runtime by adding links in index.html:
+```html
+<head>
+    <link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
+    <link href="/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css" rel="stylesheet" />
+    <link href="/_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css" rel="stylesheet" />
+</head>
+```
+
+### 2. Exclude Bundle Processing
+Configure Tailwind to ignore all scoped CSS bundles:
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    // ... other content ...
+    "!**/*.bundle.scp.css",
+  ],
+}
+```
+
+## Recommendations
+1. Document current hash values in a comment within the csproj file
+2. Add a reminder comment about checking hash values when updating packages
+3. Consider implementing one of the alternative solutions for longer-term maintainability
+
+## Future Considerations
+The need for hash management might be eliminated in future versions of the component libraries or Tailwind CSS. Keep an eye on:
+- Updates to FluentUI and QuickGrid that might change how CSS is bundled
+- Tailwind CSS updates that might better handle dynamic imports
+- Blazor's CSS isolation and bundling strategies
diff --git a/TimeWarp.Architecture/Directory.Build.props b/TimeWarp.Architecture/Directory.Build.props
@@ -19,7 +19,7 @@
     <LangVersion>latest</LangVersion>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <Nullable>disable</Nullable>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
   </PropertyGroup>
 
diff --git a/TimeWarp.Architecture/Directory.Packages.props b/TimeWarp.Architecture/Directory.Packages.props
diff --git a/TimeWarp.Architecture/Source/Analyzers/TimeWarp.Architecture.Analyzers/TimeWarp.Architecture.Analyzers.csproj b/TimeWarp.Architecture/Source/Analyzers/TimeWarp.Architecture.Analyzers/TimeWarp.Architecture.Analyzers.csproj
@@ -14,6 +14,6 @@
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.CodeAnalysis.Common" />
-    <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" />
+    <PackageReference Include="Microsoft.CodeAnalysis.CSharp" />
   </ItemGroup>
 </Project>
diff --git a/TimeWarp.Architecture/Source/Common/Common.Server/CommonServerModule.cs b/TimeWarp.Architecture/Source/Common/Common.Server/CommonServerModule.cs
@@ -87,9 +87,9 @@ string swaggerApiTitle
       );
   }
 
-  private static void ConfigureAzureAppConfig(IConfigurationManager aConfigurationManager)
+  private static void ConfigureAzureAppConfig(IConfigurationManager configurationManager)
   {
-    string? connectionString = aConfigurationManager.GetConnectionString("AppConfig");
+    string? connectionString = configurationManager.GetConnectionString("AppConfig");
     if (string.IsNullOrEmpty(connectionString))
     {
       Console.WriteLine("No AppConfig ConnectionString");
@@ -98,18 +98,18 @@ private static void ConfigureAzureAppConfig(IConfigurationManager aConfiguration
 
     Console.WriteLine($"connectionString: {connectionString}");
 
-    aConfigurationManager.AddAzureAppConfiguration
+    configurationManager.AddAzureAppConfiguration
     (
-      aAzureAppConfigurationOptions =>
-        aAzureAppConfigurationOptions
+      azureAppConfigurationOptions =>
+        azureAppConfigurationOptions
           .Connect(connectionString)
           .UseFeatureFlags()
           .ConfigureRefresh
           (
-            aAzureAppConfigurationRefreshOptions =>
-              aAzureAppConfigurationRefreshOptions
+            azureAppConfigurationRefreshOptions =>
+              azureAppConfigurationRefreshOptions
                 .Register("Sentinel", refreshAll: true)
-                .SetCacheExpiration(TimeSpan.FromMinutes(5))
+                .SetRefreshInterval(TimeSpan.FromMinutes(5))
           )
           .ConfigureKeyVault
           (
@@ -119,7 +119,7 @@ private static void ConfigureAzureAppConfig(IConfigurationManager aConfiguration
       optional: false
     );
 
-    string? testValue = aConfigurationManager.GetValue<string>("TestValue");
+    string? testValue = configurationManager.GetValue<string>("TestValue");
     Console.WriteLine($"App Config value TestValue: {testValue}");
   }
 
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Aspire/Aspire.AppHost/Aspire.AppHost.csproj b/TimeWarp.Architecture/Source/ContainerApps/Aspire/Aspire.AppHost/Aspire.AppHost.csproj
@@ -1,8 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
-
+  <Sdk Name="Aspire.AppHost.Sdk" Version="9.0.0" />
   <PropertyGroup>
     <OutputType>Exe</OutputType>
-    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsAspireHost>true</IsAspireHost>
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Aspire/Aspire.ServiceDefaults/Aspire.ServiceDefaults.csproj b/TimeWarp.Architecture/Source/ContainerApps/Aspire/Aspire.ServiceDefaults/Aspire.ServiceDefaults.csproj
@@ -1,7 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsAspireSharedProject>true</IsAspireSharedProject>
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Server/Components/App.razor b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Server/Components/App.razor
@@ -48,7 +48,6 @@ window.passwordless = new Client({ apiKey: "timewarp:public:b00cdd667db547de90de
 </script>
 
 <script src="_framework/blazor.web.js"></script>
-<script src="js/downloadFile.js"></script>
 
 @*TODO: Cramer review PWA block*@
 <!--#if PWA -->
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Layouts/FluentUIRequiredFeatures.razor b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Layouts/FluentUIRequiredFeatures.razor
@@ -0,0 +1,8 @@
+@namespace TimeWarp.Architecture.Components
+
+<FluentDialogProvider />
+<FluentKeyCodeProvider />
+<FluentMenuProvider />
+<FluentMessageBarProvider />
+<FluentToastProvider />
+<FluentTooltipProvider />
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Layouts/MainLayout.razor b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Layouts/MainLayout.razor
@@ -5,3 +5,5 @@
   protected const string HeadingHeight = "52px";
 }
 @Body
+
+<FluentUIRequiredFeatures />
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Routes.razor b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Components/Routes.razor
@@ -1,6 +1,6 @@
 <CascadingAuthenticationState>
   <Router
-    AppAssembly="@typeof(AssemblyMarker).Assembly"
+    AppAssembly=@typeof(AssemblyMarker).Assembly
     AdditionalAssemblies=@(new[] { typeof(AssemblyMarker).Assembly })>
     <Found Context="routeData">
       <AuthorizeRouteView RouteData=@routeData DefaultLayout=@typeof(MainLayout)>
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/GlobalUsings.cs b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/GlobalUsings.cs
@@ -1,4 +1,5 @@
 ﻿global using Ardalis.GuardClauses;
+global using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 global using TimeWarp.State;
 global using Blazored.LocalStorage;
 global using Blazored.SessionStorage;
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Web.Spa.csproj b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/Web.Spa.csproj
@@ -85,8 +85,6 @@
   </ItemGroup>
 
   <ItemGroup>
-    <AdditionalFiles Include="Features\Account\Pages\LoginPage\RegisterPasskey.razor" />
-    <AdditionalFiles Include="Features\Authentication\AuthenticationStateListener.razor" />
     <AdditionalFiles Include="Features\Base\StateAccessMixin.mixin"/>
     <AdditionalFiles Include="Mixins\Page.mixin"/>
   </ItemGroup>
@@ -114,15 +112,15 @@
 
   <Target Name="CreateDummyFluentUICSS" BeforeTargets="Build">
     <ItemGroup>
-      <DummyCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.FluentUI.AspNetCore.Components\Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css" />
+      <DummyCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.FluentUI.AspNetCore.Components\Microsoft.FluentUI.AspNetCore.Components.dibzmir27r.bundle.scp.css" />
     </ItemGroup>
     <MakeDir Directories="$(ProjectDir)obj\css\_content\Microsoft.FluentUI.AspNetCore.Components" />
     <WriteLinesToFile File="@(DummyCSSFile)" Lines="/* Dummy file to satisfy build requirement */" Overwrite="true" />
   </Target>
 
   <Target Name="CreateDummyQuickGridCSS" BeforeTargets="Build">
     <ItemGroup>
-      <DummyQuickGridCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.AspNetCore.Components.QuickGrid\Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css" />
+      <DummyQuickGridCSSFile Include="$(ProjectDir)obj\css\_content\Microsoft.AspNetCore.Components.QuickGrid\Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css" />
     </ItemGroup>
     <MakeDir Directories="$(ProjectDir)obj\css\_content\Microsoft.AspNetCore.Components.QuickGrid" />
     <WriteLinesToFile File="@(DummyQuickGridCSSFile)" Lines="/* Dummy file to satisfy build requirement */" Overwrite="true" />
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/_Imports.razor b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/_Imports.razor
@@ -1,5 +1,5 @@
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
-
+@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons
 @using Ardalis.GuardClauses
 @using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.Components.Forms
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/source/Web.Spa.lib.module.ts b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/source/Web.Spa.lib.module.ts
@@ -3,12 +3,18 @@ import { Spa } from "./Spa.js";
 import { Counter } from "./features/Counter.js";
 import { timeWarpState } from "/_content/TimeWarp.State/js/TimeWarpState.js";
 import { log, LogAction } from "/_content/TimeWarp.State/js/Logger.js";
-import { TimeWarpStateName, InitializeJavaScriptInteropName, ReduxDevToolsFactoryName, ReduxDevToolsName } from "/_content/TimeWarp.State/js/Constants.js";
+import {
+  TimeWarpStateName,
+  InitializeJavaScriptInteropName,
+  ReduxDevToolsFactoryName,
+  ReduxDevToolsName,
+} from "/_content/TimeWarp.State/js/Constants.js";
+import "/_content/TimeWarp.State.Plus/js/downloadFile.js";
 
 // https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-7.0&source=docs
 // at this point the blazor is not yet initialized
 // initialize the items you want attached to window here.
- 
+
 function initializeEnvironment() {
   console.log("****initializeEnvironment Web.Spa ****");
   Spa.Counter = Counter;
diff --git a/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/wwwroot/css/fluent.css b/TimeWarp.Architecture/Source/ContainerApps/Web/Web.Spa/wwwroot/css/fluent.css
@@ -1,3 +1,3 @@
 @import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';
-@import '/_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';
+@import '/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.dibzmir27r.bundle.scp.css';
+@import '/_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';
diff --git a/TimeWarp.Architecture/Tests/Analyzers/TimeWarp.Architecture.Analyzers.Tests/TimeWarp.Architecture.Analyzers.Tests.csproj b/TimeWarp.Architecture/Tests/Analyzers/TimeWarp.Architecture.Analyzers.Tests/TimeWarp.Architecture.Analyzers.Tests.csproj
@@ -1,7 +1,6 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>
@@ -10,6 +9,7 @@
     <PackageReference Include="Fixie.TestAdapter" />
     <PackageReference Include="FluentAssertions" />
     <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Analyzer.Testing" />
+    <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" />
     <PackageReference Include="TimeWarp.Fixie" />
   </ItemGroup>
 
diff --git a/TimeWarp.Architecture/Tests/ContainerApps/Aspire/Aspire.csproj b/TimeWarp.Architecture/Tests/ContainerApps/Aspire/Aspire.csproj
@@ -1,7 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
diff --git a/TimeWarp.Architecture/TimeWarp.Architecture.sln b/TimeWarp.Architecture/TimeWarp.Architecture.sln
@@ -28,6 +28,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "03-Solution Items", "03-Sol
 		UNLICENSE.md = UNLICENSE.md
 		Watch.ps1 = Watch.ps1
 		RunRelease.ps1 = RunRelease.ps1
+		CSS Bundle Hash Management in Blazor with Tailwind.md = CSS Bundle Hash Management in Blazor with Tailwind.md
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "04-Tests", "04-Tests", "{2902FDFD-016E-4BF7-8B41-53D674FA53DD}"
diff --git a/TimeWarp.Architecture/global.json b/TimeWarp.Architecture/global.json
@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "8.0.100",
+    "version": "9.0.102",
     "allowPrerelease": false,
     "rollForward": "latestMinor"
   }

Original file line number	Diff line number	Diff line change
`@@ -87,9 +87,9 @@ string swaggerApiTitle`
`87`	`87`	`);`
`88`	`88`	`}`
`89`	`89`
`90`		`- private static void ConfigureAzureAppConfig(IConfigurationManager aConfigurationManager)`
	`90`	`+ private static void ConfigureAzureAppConfig(IConfigurationManager configurationManager)`
`91`	`91`	`{`
`92`		`- string? connectionString = aConfigurationManager.GetConnectionString("AppConfig");`
	`92`	`+ string? connectionString = configurationManager.GetConnectionString("AppConfig");`
`93`	`93`	`if (string.IsNullOrEmpty(connectionString))`
`94`	`94`	`{`
`95`	`95`	`Console.WriteLine("No AppConfig ConnectionString");`
`@@ -98,18 +98,18 @@ private static void ConfigureAzureAppConfig(IConfigurationManager aConfiguration`
`98`	`98`
`99`	`99`	`Console.WriteLine($"connectionString: {connectionString}");`
`100`	`100`
`101`		`- aConfigurationManager.AddAzureAppConfiguration`
	`101`	`+ configurationManager.AddAzureAppConfiguration`
`102`	`102`	`(`
`103`		`- aAzureAppConfigurationOptions =>`
`104`		`- aAzureAppConfigurationOptions`
	`103`	`+ azureAppConfigurationOptions =>`
	`104`	`+ azureAppConfigurationOptions`
`105`	`105`	`.Connect(connectionString)`
`106`	`106`	`.UseFeatureFlags()`
`107`	`107`	`.ConfigureRefresh`
`108`	`108`	`(`
`109`		`- aAzureAppConfigurationRefreshOptions =>`
`110`		`- aAzureAppConfigurationRefreshOptions`
	`109`	`+ azureAppConfigurationRefreshOptions =>`
	`110`	`+ azureAppConfigurationRefreshOptions`
`111`	`111`	`.Register("Sentinel", refreshAll: true)`
`112`		`- .SetCacheExpiration(TimeSpan.FromMinutes(5))`
	`112`	`+ .SetRefreshInterval(TimeSpan.FromMinutes(5))`
`113`	`113`	`)`
`114`	`114`	`.ConfigureKeyVault`
`115`	`115`	`(`
`@@ -119,7 +119,7 @@ private static void ConfigureAzureAppConfig(IConfigurationManager aConfiguration`
`119`	`119`	`optional: false`
`120`	`120`	`);`
`121`	`121`
`122`		`- string? testValue = aConfigurationManager.GetValue<string>("TestValue");`
	`122`	`+ string? testValue = configurationManager.GetValue<string>("TestValue");`
`123`	`123`	`Console.WriteLine($"App Config value TestValue: {testValue}");`
`124`	`124`	`}`
`125`	`125`
Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,5 @@`
`5`	`5`	`protected const string HeadingHeight = "52px";`
`6`	`6`	`}`
`7`	`7`	`@Body`
	`8`	`+`
	`9`	`+<FluentUIRequiredFeatures />`