Cache hashed assets forever in fullstack (#3928)

* Cache hashed assets forever in fullstack

* fix clippy

* fix fullstack test port

* fix fullstack clippy

* fix double insertion of meta in fullstack test

* pull out head element changes

* Fix cli-optimization test when interrupted

* remove tests for raw assets

* fix playwright tests

* look for hash in asset name instead of building a manifest

* undo changes to cli

* fix clippy

* fix test_file_name_looks_immutable

packages/playwright-tests/cli-optimization/.gitignore

@@ -1,3 +1,4 @@
 dist
 target
-monaco-editor-0.52.2
+monaco-editor
+partial-monaco-editor

packages/playwright-tests/cli-optimization/build.rs

@@ -2,7 +2,7 @@ use std::path::PathBuf;
 
 fn main() {
     // If the monaco editor folder doesn't exist, download it
-    let monaco_path = PathBuf::from("monaco-editor-0.52.2");
+    let monaco_path = PathBuf::from("monaco-editor");
     if monaco_path.exists() {
         return;
     }
@@ -10,5 +10,7 @@ fn main() {
     let url = "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz";
     let bytes = reqwest::blocking::get(url).unwrap().bytes().unwrap();
     let mut archive = tar::Archive::new(flate2::read::GzDecoder::new(bytes.as_ref()));
-    archive.unpack(&monaco_path).unwrap();
+    let monaco_path_partial = PathBuf::from("partial-monaco-editor");
+    archive.unpack(&monaco_path_partial).unwrap();
+    std::fs::rename(monaco_path_partial, monaco_path).unwrap();
 }

packages/playwright-tests/cli-optimization/src/main.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 
-const MONACO_FOLDER: Asset = asset!("/monaco-editor-0.52.2/package/min/vs");
+const MONACO_FOLDER: Asset = asset!("/monaco-editor/package/min/vs");
 const SOME_IMAGE: Asset = asset!("/images/toasts.png", ImageAssetOptions::new().with_avif());
 const SOME_IMAGE_WITH_THE_SAME_URL: Asset =
     asset!("/images/toasts.png", ImageAssetOptions::new().with_jpg());

packages/playwright-tests/fullstack.spec.js

@@ -69,6 +69,46 @@ test("document elements", async ({ page }) => {
   await expect(main).toHaveCSS("font-family", "Roboto");
 });
 
+test("assets cache correctly", async ({ page }) => {
+  // Wait for the hashed image to be loaded
+  const hashedImageFuture = page.waitForResponse((resp) => {
+    console.log("Response URL:", resp.url());
+    return resp.url().includes("/assets/image-") && resp.status() === 200;
+  });
+
+  // Navigate to the page that includes the image.
+  await page.goto("http://localhost:3333");
+
+  const hashedImageResponse = await hashedImageFuture;
+
+  // Make sure the hashed image cache control header is set to immutable
+  const cacheControl = hashedImageResponse.headers()["cache-control"];
+  console.log("Cache-Control header:", cacheControl);
+  expect(cacheControl).toContain("immutable");
+
+  // TODO: raw assets support was removed and needs to be restored
+  // https://github.com/DioxusLabs/dioxus/issues/4115
+  // // Wait for the asset image to be loaded
+  // const assetImageResponse = await page.waitForResponse(
+  //   (resp) => resp.url().includes("/assets/image.png") && resp.status() === 200
+  // );
+  // // Make sure the asset image cache control header does not contain immutable
+  // const assetCacheControl = assetImageResponse.headers()["cache-control"];
+  // console.log("Cache-Control header:", assetCacheControl);
+  // expect(assetCacheControl).not.toContain("immutable");
+
+  // // Wait for the nested asset image to be loaded
+  // const nestedAssetImageResponse = await page.waitForResponse(
+  //   (resp) =>
+  //     resp.url().includes("/assets/nested/image.png") && resp.status() === 200
+  // );
+  // // Make sure the nested asset image cache control header does not contain immutable
+  // const nestedAssetCacheControl =
+  //   nestedAssetImageResponse.headers()["cache-control"];
+  // console.log("Cache-Control header:", nestedAssetCacheControl);
+  // expect(nestedAssetCacheControl).not.toContain("immutable");
+});
+
 test("websockets", async ({ page }) => {
   await page.goto("http://localhost:3333");
   // wait until the websocket div is mounted

packages/playwright-tests/fullstack/Dioxus.toml

@@ -0,0 +1,3 @@
+[application]
+# resource (public) file folder
+asset_dir = "assets"

packages/playwright-tests/fullstack/src/main.rs

@@ -50,6 +50,7 @@ fn app() -> Element {
         OnMounted {}
         DefaultServerFnCodec {}
         DocumentElements {}
+        Assets {}
         WebSockets {}
     }
 }
@@ -165,6 +166,24 @@ fn DocumentElements() -> Element {
     }
 }
 
+/// Make sure assets in the assets folder are served correctly and hashed assets are cached forever
+#[component]
+fn Assets() -> Element {
+    rsx! {
+        img {
+            src: asset!("/assets/image.png"),
+        }
+        // TODO: raw assets support was removed and needs to be restored
+        // https://github.com/DioxusLabs/dioxus/issues/4115
+        // img {
+        //     src: "/assets/image.png",
+        // }
+        // img {
+        //     src: "/assets/nested/image.png",
+        // }
+    }
+}
+
 #[server(protocol = Websocket<JsonEncoding, JsonEncoding>)]
 async fn echo_ws(
     input: BoxedStream<String, ServerFnError>,