refactor(examples): update example crates and core logic

- Updated example crates (hello_svelte, reposition, styled, toggle) for improved state management and reset logic.
- Modified `src/pane.rs` and example source files for better robustness and compatibility.
- Updated Webpack and package configuration in `examples/www` for build improvements.
- Improved documentation in `README.md`.

Author: dave horner

CHANGES.md

@@ -1,4 +1,8 @@
+
 ## Unreleased
+- Migrated to Webpack 5 for async WASM and modern JS tooling.
+- Dropped stdweb; all browser interop now uses web-sys, wasm-bindgen, and gloo-timers.
+- Updated Svelte/Webpack config for compatibility and modern plugin usage.
 
 ## v0.4
 - (breaking) Changed type of positions from `u32` to `i32` (for pane and global frame). Negative offsets are valid and sometimes necessary.

Cargo.toml

@@ -32,4 +32,5 @@ features = [
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3"
-wasm-bindgen-futures = "0.4"
+wasm-bindgen-futures = "0.4"
+

README.md

@@ -25,7 +25,11 @@ The features can be summarized as:
 
 The examples in this crate are hosted online: [div-rs Examples](https://div.paddlers.ch/)
 
-Have a look at the code in example directory. The best way is to clone the repository and run it locally, so you can play around with the code.
+Below is an example of the output you can generate with the built-in GIF capture tool:
+
+![Animated Example Output](./div-rs-captured-frames.gif)
+
+Have a look at the code in the example directory. The best way is to clone the repository and run it locally, so you can play around with the code and generate your own GIFs.
 
 
 ## Requirements (2025+)

div-rs-captured-frames.gif

@@ -2,14 +2,15 @@
 [package]
 name = "hello_svelte"
 version = "0.1.0"
-authors = ["Jakob Meier <[email protected]>"]
+authors = ["Jakob Meier <[email protected]>", "David Horner"]
 edition = "2018"
 
 [lib]
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 div = { path = "../../" }
+gloo-timers = "0.3.0"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 
@@ -22,4 +23,4 @@ features = [
     "Window",
     "HtmlScriptElement",
     "HtmlHeadElement",
-]
+]

examples/hello_svelte/Cargo.toml

@@ -1,20 +1,24 @@
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen(start)]
+#[wasm_bindgen]
 pub fn main() {
-    div::init_to("div-root").unwrap();
     set_panic_hook();
 
-    // Create a new pane at offset (100,100) from body
-    // with size 500px/500px and then create a single
-    // text node inside it with an external class stored in TODO
+    // Defensive: check for double initialization
+    match div::init_to("div-root") {
+        Ok(_) => {},
+        Err(e) => {
+            panic!("[hello_svelte] div::init_to('div-root') failed: {e:?}.\nThis usually means main() was called without a prior reset, or reset did not complete before main().");
+        }
+    }
+
     const X: u32 = 0;
     const Y: u32 = 0;
     const W: u32 = 500;
     const H: u32 = 500;
     let class = div::JsClass::preregistered("MyComponent")
-        .expect("JS class Test has not been registered properly");
-    div::from_js_class(X as i32, Y as i32, W, H, class).unwrap();
+        .unwrap_or_else(|| panic!("[hello_svelte] Svelte component 'MyComponent' is not registered.\n\nMake sure register_svelte_component('MyComponent', ...) is called in JS before calling main()."));
+    div::from_js_class(X as i32, Y as i32, W, H, class).expect("[hello_svelte] div::from_js_class failed");
 
     /* Alternative that loads classes from a separate JS file instead of registering in the JS code. */
     // let future = async {
@@ -24,6 +28,11 @@ pub fn main() {
     // wasm_bindgen_futures::spawn_local(future);
 }
 
+#[wasm_bindgen]
+pub fn reset() {
+    div::reset_global_div_state();
+}
+
 pub fn set_panic_hook() {
     // When the `console_error_panic_hook` feature is enabled, we can call the
     // `set_panic_hook` function at least once during initialization, and then

examples/hello_svelte/src/lib.rs

@@ -1,9 +1,8 @@
-#![allow(unused_must_use)]
 use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen(start)]
 pub fn main() {
-    div::init_to("div-root");
+    div::init_to("div-root").expect("Init failed");
 
     // Create a new pane at offset (100,100) from body
     // with size 500px/500px and then create a single
@@ -13,5 +12,10 @@ pub fn main() {
     let w = 500;
     let h = 500;
     let html = "Hello world";
-    div::new(x, y, w, h, html);
+    div::new(x, y, w, h, html).unwrap();
 }
+
+#[wasm_bindgen]
+pub fn reset() {
+    div::reset_global_div_state();
+}

examples/hello_world/src/lib.rs

@@ -2,14 +2,15 @@
 [package]
 name = "reposition"
 version = "0.1.0"
-authors = ["Jakob Meier <[email protected]>"]
+authors = ["Jakob Meier <[email protected]>", "David Horner"]
 edition = "2018"
 
 [lib]
 crate-type = ["cdylib", "rlib"]
 
 
 [dependencies]
+console_error_panic_hook = "0.1.7"
 div = { path = "../../" }
 wasm-bindgen = "0.2"
 

examples/reposition/Cargo.toml

@@ -1,6 +1,7 @@
 use wasm_bindgen::JsCast;
 use web_sys::window;
 use wasm_bindgen::prelude::*;
+use console_error_panic_hook;
 
 /**
  * This example show how
@@ -19,8 +20,47 @@ use wasm_bindgen::prelude::*;
  * repositioned and/or resized, it can also change the arrangement of the internal HTML elements.
  */
 
+static mut KEYDOWN_CLOSURE: Option<Closure<dyn FnMut(web_sys::Event)>> = None;
+
+#[wasm_bindgen]
+pub fn reset() {
+    // Remove the keydown event listener if present
+    let win = match window() {
+        Some(w) => w,
+        None => return,
+    };
+    unsafe {
+        if let Some(old_closure) = KEYDOWN_CLOSURE.take() {
+            let _ = win.remove_event_listener_with_callback("keydown", old_closure.as_ref().unchecked_ref());
+            // drop(old_closure); // dropped automatically
+        }
+    }
+    // Also reset the Rust global state so example can be re-initialized
+    div::reset_global_div_state();
+
+    // Explicitly clear all children of div-root (DOM cleanup)
+    if let Some(doc) = web_sys::window().and_then(|w| w.document()) {
+        if let Some(div_root) = doc.get_element_by_id("div-root") {
+            while let Some(child) = div_root.first_child() {
+                let _ = div_root.remove_child(&child);
+            }
+        }
+    }
+}
+
 #[wasm_bindgen(start)]
 pub fn main() {
+    // Enable better panic messages
+    console_error_panic_hook::set_once();
+
+    // Remove previous keydown listener if present
+    let win = window().unwrap();
+    unsafe {
+        if let Some(old_closure) = KEYDOWN_CLOSURE.take() {
+            let _ = win.remove_event_listener_with_callback("keydown", old_closure.as_ref().unchecked_ref());
+            // drop(old_closure); // dropped automatically
+        }
+    }
 
     // Start at position (0,0) with size (350,200)
     let mut x = 0;
@@ -52,43 +92,50 @@ pub fn main() {
     let _pane_b = div::new(200, 50, 100, 100, html2).unwrap();
 
     // Define control variables for zoom of global area and pane A
-    let mut f = 1.0;
-    let mut af = 1.0;
+    let mut f: f32 = 1.0;
+    let mut af: f32 = 1.0;
 
-    // Listen to keydown events to move and reposition all divs
+    // Listen to keydown events to move and reposition all divs (with bounds checks)
     let closure = Closure::wrap(Box::new(move |event: web_sys::Event| {
         let keyboard_event = event.dyn_ref::<web_sys::KeyboardEvent>();
         if let Some(e) = keyboard_event {
             let key = e.key();
             match key.as_str() {
-                "ArrowUp" => y = y.saturating_sub(10),
-                "ArrowDown" => y += 10,
-                "ArrowLeft" => x = x.saturating_sub(10),
-                "ArrowRight" => x += 10,
-                "+" => f *= 1.5,
-                "-" => f /= 1.5,
+                "ArrowUp" => { y = y.saturating_sub(10); },
+                "ArrowDown" => { y += 10; },
+                "ArrowLeft" => { x = x.saturating_sub(10); },
+                "ArrowRight" => { x += 10; },
+                "+" => { f *= 1.5; },
+                "-" => { f /= 1.5; },
 
-                "w" => ay = ay.saturating_sub(10),
-                "a" => ax = ax.saturating_sub(10),
-                "s" => ay += 10,
-                "d" => ax += 10,
-                "1" => af *= 1.5,
-                "2" => af /= 1.5,
+                "w" => { ay = ay.saturating_sub(10); },
+                "a" => { ax = ax.saturating_sub(10); },
+                "s" => { ay += 10; },
+                "d" => { ax += 10; },
+                "1" => { af *= 1.5; },
+                "2" => { af /= 1.5; },
 
                 _ => {
                     web_sys::console::log_1(&format!("pressed {}", key).into());
                     return;
                 }
             }
-            div::reposition(x, y).unwrap();
-            let w = f * w as f32;
-            let h = f * h as f32;
-            div::resize(w as u32, h as u32).unwrap();
+            // Bounds checks to prevent panics
+            let safe_x = x.max(0);
+            let safe_y = y.max(0);
+            let safe_f = f.max(0.1); // Prevent zero/negative scale
+            let safe_af = af.max(0.1);
+            let safe_ax = ax.max(0);
+            let safe_ay = ay.max(0);
+            let safe_aw = (safe_af * aw as f32).max(1.0);
+            let safe_ah = (safe_af * ah as f32).max(1.0);
+            let safe_w = (safe_f * w as f32).max(1.0);
+            let safe_h = (safe_f * h as f32).max(1.0);
 
-            let aw = af * aw as f32;
-            let ah = af * ah as f32;
+            div::reposition(safe_x, safe_y).unwrap();
+            div::resize(safe_w as u32, safe_h as u32).unwrap();
             pane_a
-                .reposition_and_resize(ax, ay, aw as u32, ah as u32)
+                .reposition_and_resize(safe_ax, safe_ay, safe_aw as u32, safe_ah as u32)
                 .unwrap();
             // Same as
             // pane_a.reposition(ax,ay).unwrap();
@@ -97,9 +144,8 @@ pub fn main() {
         }
     }) as Box<dyn FnMut(_)>);
 
-    window()
-        .unwrap()
-        .add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())
-        .unwrap();
-    closure.forget();
-}
+    win.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref()).unwrap();
+    unsafe {
+        KEYDOWN_CLOSURE = Some(closure);
+    }
+}

examples/reposition/src/lib.rs

@@ -2,7 +2,7 @@
 [package]
 name = "styled"
 version = "0.1.0"
-authors = ["Jakob Meier <[email protected]>"]
+authors = ["Jakob Meier <[email protected]>", "David Horner"]
 edition = "2018"
 
 [lib]