Cross platform asset resolver (#4521)

* add initial web resolver

* re-export resolver and add playwright test

* add documentation

* fix clippy

* fix docs + clippy

packages/playwright-tests/cli-optimization.spec.js

@@ -45,3 +45,15 @@ test("unused external assets are bundled", async ({ page }) => {
   // make sure the response is an image
   expect(response.headers()["content-type"]).toBe("image/png");
 });
+
+test("assets are resolved", async ({ page }) => {
+  await page.goto("http://localhost:8989");
+
+  // Expect the page to contain an element with the id "resolved-data"
+  const resolvedData = page.locator("#resolved-data");
+  await expect(resolvedData).toBeVisible();
+  // Expect the element to contain the text "List: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
+  await expect(resolvedData).toContainText(
+    "List: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"
+  );
+});

packages/playwright-tests/cli-optimization/Cargo.toml

@@ -8,6 +8,8 @@ publish = false
 
 [dependencies]
 dioxus = { workspace = true, features = ["web"] }
+serde = { workspace = true, features = ["derive"] }
+serde_json.workspace = true
 
 [build-dependencies]
 reqwest = { workspace = true, features = ["blocking"] }

packages/playwright-tests/cli-optimization/assets/data.json

@@ -0,0 +1,3 @@
+{
+  "list": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+}

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

@@ -56,5 +56,36 @@ fn App() -> Element {
             id: "some_image_without_hash",
             src: "{SOME_IMAGE_WITHOUT_HASH}"
         }
+        LoadsAsset {}
+    }
+}
+
+const JSON: Asset = asset!("/assets/data.json");
+
+#[derive(Debug, Clone, serde::Deserialize)]
+struct Data {
+    list: Vec<i32>,
+}
+
+#[component]
+fn LoadsAsset() -> Element {
+    let data = use_resource(|| async {
+        let bytes = dioxus::asset_resolver::read_asset_bytes(&JSON)
+            .await
+            .unwrap();
+        serde_json::from_slice::<Data>(&bytes).unwrap()
+    });
+    match data() {
+        Some(data) => rsx! {
+            div {
+                id: "resolved-data",
+                "List: {data.list:?}"
+            }
+        },
+        None => rsx! {
+            div {
+                "Loading..."
+            }
+        },
     }
 }