Replace Parcel with Vite for frontend builds

.github/workflows/ci.yml

@@ -110,13 +110,6 @@ jobs:
       - uses: actions/checkout@v7
         with:
           persist-credentials: false
-      - name: 'Windows only, set TEMP to the same drive'
-        if: ${{ matrix.os == 'windows-latest' }}
-        #  temporary waiting for https://github.com/parcel-bundler/parcel/pull/10095 to fix
-        run: |
-          mkdir "D:\\Temp"
-          echo "TEMP=D:\\Temp" >> $env:GITHUB_ENV
-
       - name: Bootstrap Action Workspace
         id: bootstrap
         uses: ./.github/actions/bootstrap

.github/workflows/release.yml

@@ -303,13 +303,6 @@ jobs:
         with:
           ref: ${{ needs.release-drafter.outputs.tag_name }}
           persist-credentials: false
-      - name: 'Windows only, set TEMP to the same drive'
-        if: ${{ matrix.os == 'windows-latest' }}
-        #  temporary waiting for https://github.com/parcel-bundler/parcel/pull/10095 to fix
-        run: |
-          mkdir "D:\\Temp"
-          echo "TEMP=D:\\Temp" >> $env:GITHUB_ENV
-
       - name: Bootstrap Action Workspace
         id: bootstrap
         uses: ./.github/actions/bootstrap

src/Elastic.Documentation.Site/.gitignore

@@ -1,5 +1,8 @@
 .parcel-cache/
 node_modules/
+_static/assets/
+_static/asset-*
+_static/chunk-*
 _static/*.css
 _static/*.css.map
 _static/*.ttf

src/Elastic.Documentation.Site/Assets/telemetry/instrumentation.ts

@@ -151,11 +151,7 @@ function registerFetchInstrumentation(): void {
                 propagateTraceHeaderCorsUrls: [
                     new RegExp(`${window.location.origin}/.*`),
                 ],
-                ignoreUrls: [
-                    /_api\/v1\/o\/.*/,
-                    /_api\/v1\/?$/,
-                    /__parcel_code_frame$/,
-                ],
+                ignoreUrls: [/_api\/v1\/o\/.*/, /_api\/v1\/?$/],
             }),
         ],
     })

src/Elastic.Documentation.Site/Elastic.Documentation.Site.csproj

@@ -11,6 +11,7 @@
     <InterceptorsPreviewNamespaces>$(InterceptorsPreviewNamespaces);Microsoft.AspNetCore.Http.Generated</InterceptorsPreviewNamespaces>
     <IsPublishable>true</IsPublishable>
     <EnableDefaultRazorSlices>false</EnableDefaultRazorSlices>
+    <SkipNpmBuild Condition="'$(SkipNpmBuild)' == ''">false</SkipNpmBuild>
   </PropertyGroup>
 
   <ItemGroup>
@@ -35,7 +36,17 @@
     The first time the task is executed. Then, it only runs when you change the package.json file.
     Documentation: https://learn.microsoft.com/en-us/visualstudio/msbuild/incremental-builds?WT.mc_id=DT-MVP-5003978
  -->
-  <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
+  <Target Name="EnsureSkipNpmBuildArtifacts"
+          BeforeTargets="NpmInstall;NpmRunBuild"
+          Condition="'$(SkipNpmBuild)' == 'true'">
+    <Error Condition="!Exists('_static/main.js') Or !Exists('_static/styles.css') Or !Exists('_static/assembler.css') Or !Exists('_static/isolated.css') Or !Exists('_static/codex.css')"
+           Text="SkipNpmBuild is set but one or more _static artifacts are missing. Run a full frontend build first." />
+  </Target>
+
+  <Target Name="NpmInstall"
+          Condition="'$(DesignTimeBuild)' != 'true' And '$(SkipNpmBuild)' != 'true'"
+          Inputs="package.json;package-lock.json"
+          Outputs="node_modules/.install-stamp">
     <Exec Command="npm ci" WorkingDirectory="$(MSBuildThisFileDirectory)" ConsoleToMsBuild="true" />
 
     <!-- Write the stamp file, so incremental builds work -->
@@ -57,8 +68,7 @@
     <NpmBuildInputFiles Include="package-lock.json" />
     <NpmBuildInputFiles Include="tsconfig.json" />
     <NpmBuildInputFiles Include="tailwind.config.js" />
-    <NpmBuildInputFiles Include=".parcelrc" />
-    <NpmBuildInputFiles Include=".postcssrc" />
+    <NpmBuildInputFiles Include="vite.config.ts" />
   </ItemGroup>
   <!-- Tailwind scans these directories for utility class usage (see tailwind.config.js content paths).
        Resolved inside a target so external cshtml files don't appear in the IDE's project tree. -->
@@ -73,44 +83,42 @@
   <Target Name="NpmRunBuild"
           DependsOnTargets="NpmInstall;MinVer;CollectExternalCshtmlInputs"
           BeforeTargets="BeforeBuild"
+          Condition="'$(DesignTimeBuild)' != 'true' And '$(SkipNpmBuild)' != 'true'"
           Inputs="@(NpmBuildInputFiles)"
           Outputs="_static/.build-stamp;_static/main.js;_static/styles.css">
     <Message Text="Building frontend with version: $(MinVerVersion)" Importance="high" />
+    <!-- Only remove content-hashed chunk/asset files from prior Vite runs so they
+         don't accumulate across builds. This runs inside NpmRunBuild so it only fires
+         when the build itself runs: a separate BeforeTargets target would also run when
+         NpmRunBuild is skipped as up to date, deleting chunks that nothing regenerates.
+         Do NOT list the stable named outputs here (main.js, styles.css, etc.). -->
+    <RemoveDir Directories="_static/assets" Condition="Exists('_static/assets')" />
+    <ItemGroup>
+      <ViteGeneratedFiles Include="_static/asset-*" />
+      <ViteGeneratedFiles Include="_static/chunk-*" />
+      <OldHashedBundles Include="_static/*.????????*.js" />
+      <OldHashedBundles Include="_static/*.????????*.css" />
+    </ItemGroup>
+    <Delete Files="@(ViteGeneratedFiles);@(OldHashedBundles)" ContinueOnError="true" />
     <Exec Command="npm run build"
           WorkingDirectory="$(MSBuildThisFileDirectory)"
-          ConsoleToMsBuild="true"
-          EnvironmentVariables="DOCS_BUILDER_VERSION=$(MinVerVersion)">
-      <Output TaskParameter="ConsoleOutput" PropertyName="OutputOfExec" />
-    </Exec>
+          EnvironmentVariables="DOCS_BUILDER_VERSION=$(MinVerVersion)"
+          IgnoreStandardErrorWarningFormat="true" />
     <!-- Write the stamp file, so incremental builds work -->
     <Touch Files="_static/.build-stamp" AlwaysCreate="true" />
   </Target>
 
-  <!-- Clean old hashed assets before each frontend build to avoid accumulating stale files.
-       Without this, multiple Parcel runs (e.g. across dotnet build vs dotnet run) can leave
-       old hashed filenames in _static; all get embedded and then copied to assembler output,
-       causing duplicated JS/CSS with different hashes in the final _static folder. -->
-  <Target Name="CleanOldHashedAssets" BeforeTargets="NpmRunBuild" Condition="'$(IsPublishing)' == 'true'">
-    <ItemGroup>
-      <OldHashedFiles Include="_static/*.????????*.js" />
-      <OldHashedFiles Include="_static/*.????????*.css" />
-      <OldHashedFiles Include="_static/*.????????*.js.map" />
-      <OldHashedFiles Include="_static/*.????????*.css.map" />
-    </ItemGroup>
-    <Delete Files="@(OldHashedFiles)" ContinueOnError="true" />
-  </Target>
-
-  <Target Name="EmbedGeneratedAssets" AfterTargets="NpmRunBuild">
+  <Target Name="EmbedGeneratedAssets" DependsOnTargets="NpmRunBuild" BeforeTargets="BeforeBuild">
     <ItemGroup>
-      <EmbeddedResource Include="_static/*.js" Watch="false" />
-      <EmbeddedResource Include="_static/*.js.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
-      <EmbeddedResource Include="_static/*.css" Watch="false" />
-      <EmbeddedResource Include="_static/*.css.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
-      <EmbeddedResource Include="_static/*.svg" Watch="false" />
-      <EmbeddedResource Include="_static/*.png" Watch="false" />
-      <EmbeddedResource Include="_static/*.ttf" Watch="false" />
-      <EmbeddedResource Include="_static/*.woff" Watch="false" />
-      <EmbeddedResource Include="_static/*.woff2" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.js" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.js.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
+      <EmbeddedResource Include="_static/**/*.css" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.css.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
+      <EmbeddedResource Include="_static/**/*.svg" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.png" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.ttf" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.woff" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.woff2" Watch="false" />
     </ItemGroup>
   </Target>
 

src/Elastic.Documentation.Site/Layout/_Head.cshtml

@@ -32,7 +32,7 @@
 	@* hx-history=false stops new snapshots but still restores sessionStorage
 	   leftovers from older pages, which keeps the previous island tree. *@
 	<script>try{sessionStorage.removeItem("htmx-history-cache")}catch(e){}</script>
-	<script src="@Model.Static("main.js")" defer></script>
+	<script type="module" src="@Model.Static("main.js")"></script>
 	@if (Model.BuildType == BuildType.Assembler && !Model.Features.AirGappedEnabled)
 	{
 		@* In <head> so head-support's merge keeps the identical tag across htmx navigations