Fix compile WASM, app now run in browser !!!!!!!!!!!!

.gitignore

@@ -11,4 +11,7 @@ Cargo.lock
 
 # File storing app state.
 state.json
-user_state.json
+user_state.json
+
+# Compiled JS & WASM
+/web/public/scripts/

Cargo.toml

@@ -23,6 +23,7 @@ winit = { version="0.29.4", features = ["x11"]}
 backtrace = "0.3.69"
 serde_json = "1.0.111"
 syntect = {version= "5.1.0", default-features = false} # Might remove some dependencies
+log = "0.4.21"
 
 [patch.crates-io]
 egui_node_graph = { git = "https://github.com/antaalt/egui_node_graph.git", branch = "upgrade-egui" }
@@ -37,10 +38,12 @@ persistence = ["serde", "egui_node_graph/persistence", "egui/persistence", "wgpu
 # [build]
 # rustflags = ["--cfg=web_sys_unstable_apis"]
 # rustdocflags = ["--cfg=web_sys_unstable_apis"]
-# run 'wasm-pack build --target web -d web/public/scripts' to generate pkg folder
-# Then execute it with our basic node server.
+# run 'cargo build --lib --target wasm32-unknown-unknown --no-default-features' 
+# then 'wasm-bindgen target/wasm32-unknown-unknown/debug/protos_rs.wasm --out-dir web/public/scripts --out-name protos_rs --no-modules --no-typescript'
+# then run our basic node server.
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen = "0.2.92"
+wasm-bindgen-futures = "0.4.42"
 web-sys = "0.3.5"
 console_log = "1.0.0"
 js-sys = "0.3.68"

src/app.rs

@@ -8,7 +8,7 @@ const INITIAL_WIDTH: u32 = 1280;
 #[cfg(not(target_arch = "wasm32"))]
 const INITIAL_HEIGHT: u32 = 720;
 
-pub fn run() {
+pub async fn run() {
     use winit::keyboard::{Key, NamedKey};
 
     #[cfg(not(target_arch = "wasm32"))]
@@ -41,32 +41,33 @@ pub fn run() {
     let window = builder
         .build(&event_loop)
         .unwrap();
+
+    let backend = wgpu::util::backend_bits_from_env().unwrap_or_else(wgpu::Backends::all);
 
     let instance = wgpu::Instance::new(wgpu::InstanceDescriptor {
-        backends: wgpu::Backends::PRIMARY,
+        backends: backend,
         flags: wgpu::InstanceFlags::default(),
         dx12_shader_compiler: wgpu::Dx12Compiler::Fxc,
         gles_minor_version: wgpu::Gles3MinorVersion::Automatic,
     });
     let surface = unsafe { instance.create_surface(&window).expect("Failed to create surface") };
 
     // WGPU 0.11+ support force fallback (if HW implementation not supported), set it to true or false (optional).
-    let adapter = pollster::block_on(instance.request_adapter(&wgpu::RequestAdapterOptions {
-        power_preference: wgpu::PowerPreference::HighPerformance,
-        compatible_surface: Some(&surface),
-        force_fallback_adapter: false,
-    }))
-    .unwrap();
-
-    let (device, queue) = pollster::block_on(adapter.request_device(
+    // Can't use pollster with wasm, need function to be async
+    let adapter = wgpu::util::initialize_adapter_from_env_or_default(&instance, Some(&surface))
+    .await
+    .expect("No suitable GPU adapters found on the system!");
+
+    let (device, queue) = adapter.request_device(
         &wgpu::DeviceDescriptor {
             features: wgpu::Features::VERTEX_WRITABLE_STORAGE | wgpu::Features::default(),
             limits: wgpu::Limits::default(),
             label: None,
         },
         None,
-    ))
-    .unwrap();
+    )
+    .await
+    .expect("Failed to request a device.");
 
     let size = window.inner_size();
     let capabilities = surface.get_capabilities(&adapter);

src/lib.rs

@@ -21,6 +21,10 @@ use wasm_bindgen::{self, prelude::*};
 #[wasm_bindgen(start)]
 pub fn start() {
     use std::panic;
+    console_log::init_with_level(log::Level::Debug).expect("could not initialize logger");
     panic::set_hook(Box::new(console_error_panic_hook::hook));
-    app::run();
+
+    wasm_bindgen_futures::spawn_local(async move {
+        app::run().await;
+    });
 }

src/main.rs

@@ -1,5 +1,6 @@
 #![cfg_attr(not(debug_assertions), deny(warnings))] // Forbid warnings in release builds
 #![warn(clippy::all, rust_2018_idioms)]
+
 fn main() {
-    protos_rs::run();
+    pollster::block_on(protos_rs::run());
 }

web/public/index.html

@@ -47,6 +47,8 @@
             top: 0%;
             left: 50%;
             transform: translate(-50%, 0%);
+            width:100vw!important;
+            height:100vh!important;
         }
 
         .centered {
@@ -119,14 +121,14 @@
     </script>
 
     <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
-    <script src="scripts/protos_app.js"></script>
+    <script src="scripts/protos_rs.js"></script>
 
     <script>
         // We'll defer our execution until the wasm is ready to go.
         // Here we tell bindgen the path to the wasm file so it can start
         // initialization and return to us a promise when it's done.
         console.debug("Loading wasm…");
-        wasm_bindgen("scripts/protos_app_bg.wasm")
+        wasm_bindgen("scripts/protos_rs_bg.wasm")
             .then(on_wasm_loaded)
             .catch(on_error);