Optimize wasm bindgen asset with manganis (#3531)

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
+        }
+    }
+}