Added initial support for click events (#14)

Came across rustwasm/wasm-bindgen#1187 and eventually found a way around it. Things are still looking quite ugly but at least I'm moving forward.

packages/egui/examples/cra-example/package.json

@@ -7,14 +7,14 @@
         "url": "https://github.com/andreamancuso"
     },
     "dependencies": {
+        "@react-wasm/egui": "^0.0.1-canary-001",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.97",
         "@types/react": "^18.3.2",
         "@types/react-dom": "^18.3.0",
-        "eframe_template": "file:../../pkg",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",

packages/egui/examples/cra-example/src/App.tsx

@@ -1,63 +1,39 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import init, { add_widget, get_content, init_egui } from "eframe_template";
+import React, { useRef } from "react";
+import { ReactEgui } from "@react-wasm/egui";
+import initWasmModule, {
+    set_widget,
+    init_egui,
+    set_children,
+    append_child,
+    get_hierarchy,
+    get_widgets,
+} from "@react-wasm/egui/dist/eframe_template";
 
 // eslint-disable-next-line import/first
 import "./App.css";
 
+// todo: improve this
+const module: any = {
+    initWasmModule,
+    set_widget,
+    set_children,
+    init_egui,
+    append_child,
+    get_hierarchy,
+    get_widgets,
+};
+
 function App() {
     const containerRef = useRef<HTMLDivElement>(null);
-    const initRef = useRef(false);
-    const [wasmInitialised, setWasmInitialised] = useState(false);
-    const [content, setContent] = useState("");
-    const count = useRef(0);
-
-    useEffect(() => {
-        if (!initRef.current) {
-            initRef.current = true;
-
-            init().then(() => {
-                setWasmInitialised(true);
-                init_egui();
-            });
-        }
-    }, []);
-
-    const getContent = useCallback(() => {
-        setContent(get_content());
-    }, []);
-
-    const handleAddButton = useCallback(() => {
-        add_widget(JSON.stringify({ id: count.current, type: "Button", label: "Hello, world!" }));
-
-        count.current++;
-
-        getContent();
-    }, [getContent]);
-
-    const handleInputTextButton = useCallback(() => {
-        add_widget(
-            JSON.stringify({ id: count.current, type: "InputText", value: "Hello, world!" }),
-        );
-
-        count.current++;
-
-        getContent();
-    }, [getContent]);
 
     return (
         <div id="app" ref={containerRef}>
-            {wasmInitialised && (
-                <>
-                    <div>
-                        <button onClick={handleAddButton}>Add Button</button>
-                        <button onClick={handleInputTextButton}>Add InputText</button>
-                    </div>
-                    <div>
-                        <pre>{content}</pre>
-                    </div>
-                </>
-            )}
-            <canvas id="the_canvas_id" />
+            <ReactEgui initWasmModule={module} containerRef={containerRef}>
+                <ReactEgui.Horizontal>
+                    <ReactEgui.InputText defaultValue="Hello, world!" />
+                    <ReactEgui.Button label="Hello, world!" />
+                </ReactEgui.Horizontal>
+            </ReactEgui>
         </div>
     );
 }

packages/egui/Cargo.toml → packages/egui/rust/Cargo.toml

@@ -31,13 +31,14 @@ erased-serde = "0.4.5"
 wasm-bindgen = "0.2.92"
 wasm-bindgen-futures = "0.4"
 once_cell = "1.19.0"
+js-sys = "0.3.69"
 
 [profile.release]
-opt-level = 2 # fast and small wasm
+opt-level = 3 # fast and small wasm
 
 # Optimize all dependencies even in debug builds:
 [profile.dev.package."*"]
-opt-level = 2
+opt-level = 0
 
 
 [patch.crates-io]

packages/egui/README.md → packages/egui/rust/README.md

@@ -23,4 +23,4 @@ Rust Rover settings:
 -   add a WSL (Ubuntu 22.04) target; you will need to specify paths to both `rustc` and `cargo` (typically found in `/home/<user>/.cargo/bin/rustc` and `/home/<user>/.cargo/bin/cargo`); **IMPORTANT**: `Project default target` should be `Local machine` otherwise Rust Rover will pass a `--distribution` cli parameter to cargo, resulting in an error
 -   Ensure the correct toolchain is selected (v1.76)
 
-Finally, create a `wasm-pack` Run configuration ensuring the command is `build --target web`
+Finally, create a `wasm-pack` Run configuration ensuring the command is `build --target web --out-dir ../ts/src/lib/wasm` (add `--dev` for a dev build)