Optimize wasm bindgen asset with manganis (#3531)

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

@@ -0,0 +1,11 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+test("optimized scripts run", async ({ page }) => {
+  await page.goto("http://localhost:8989");
+
+  // Expect the page to load the script after optimizations have been applied. The script
+  // should add an editor to the page that shows a main function
+  const main = page.locator("#main");
+  await expect(main).toContainText("hi");
+});

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

@@ -0,0 +1,3 @@
+dist
+target
+monaco-editor-0.52.2

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

@@ -0,0 +1,15 @@
+[package]
+name = "dioxus-cli-optimization-test"
+version = "0.0.1"
+edition = "2021"
+description = "Playwright test for Dioxus CLI optimization"
+license = "MIT OR Apache-2.0"
+publish = false
+
+[dependencies]
+dioxus = { workspace = true, features = ["web"]}
+
+[build-dependencies]
+reqwest = { workspace = true, features = ["blocking"] }
+flate2 = "1.0.35"
+tar = "0.4.43"

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

@@ -0,0 +1,14 @@
+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");
+    if monaco_path.exists() {
+        return;
+    }
+
+    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();
+}

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

@@ -0,0 +1,34 @@
+// This test checks the CLI optimizes assets correctly without breaking them
+
+use dioxus::prelude::*;
+
+const MONACO_FOLDER: Asset = asset!("/monaco-editor-0.52.2/package/min/vs");
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let script = format!("(() => {{
+    require.config({{ paths: {{ vs: '{MONACO_FOLDER}' }} }});
+
+    require(['vs/editor/editor.main'], () => {{
+        var model = monaco.editor.createModel('fn main() {{\\n\\tprintln!(\\\"hi\\\")\\n}}', 'rust');
+        var editor = monaco.editor.create(document.getElementById('editor'));
+        editor.setModel(model);
+    }})
+}})()");
+    rsx! {
+        div {
+            id: "editor",
+            width: "100vw",
+            height: "100vw",
+        }
+        // Monaco script
+        script {
+            src: "{MONACO_FOLDER}/loader.js",
+            "onload": script
+        }
+    }
+}

packages/playwright-tests/playwright.config.js

@@ -138,5 +138,15 @@ module.exports = defineConfig({
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "cli-optimization"),
+      // Remove the cache folder for the cli-optimization build to force a full cache reset
+      command:
+        'cargo run --package dioxus-cli --release -- serve --addr "127.0.0.1" --port 8989',
+      port: 8989,
+      timeout: 50 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
   ],
 });