Update example

Changed files (8)

• modified examples/callbacks/Cargo.lock
• modified examples/callbacks/Cargo.toml
• modified examples/callbacks/build.sh
• modified examples/callbacks/index.html
• added examples/callbacks/loader.js
• deleted examples/callbacks/main.js
• modified examples/callbacks/src/lib.rs
• modified examples/callbacks/styles.css

Diff

diff --git a/examples/callbacks/Cargo.lock b/examples/callbacks/Cargo.lockindex 14bed10..c6c7671 100644--- a/examples/callbacks/Cargo.lock+++ b/examples/callbacks/Cargo.lock@@ -482,7 +482,7 @@ dependencies = [ ]  [[package]]-name = "kaja-web-click-counter-example"+name = "kaja-web-callback-example" version = "0.1.0" dependencies = [  "console_error_panic_hook",diff --git a/examples/callbacks/Cargo.toml b/examples/callbacks/Cargo.tomlindex a10a842..62c87c8 100644--- a/examples/callbacks/Cargo.toml+++ b/examples/callbacks/Cargo.toml@@ -1,5 +1,5 @@ [package]-name = "kaja-web-click-counter-example"+name = "kaja-web-callback-example" version = "0.1.0" edition = "2024" @@ -9,11 +9,8 @@ crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2.122" kaja-web = { path = "../.." }--# No inventory/ctor/callback-macro on wasm example: exports use wasm_bindgen directly js-sys = "0.3" web-sys = { version = "0.3.99", features = ["Element", "HtmlElement", "NodeList"] }- gloo = "0.12" kaja-html-macro = "1.0.3" serde = { version = "1.0.228", features = ["derive"] }diff --git a/examples/callbacks/build.sh b/examples/callbacks/build.shindex 190835d..1243ddb 100755--- a/examples/callbacks/build.sh+++ b/examples/callbacks/build.sh@@ -7,9 +7,9 @@ wasm-pack build \     --release \     --target web \     --out-dir pkg \-    --out-name clickcounter \+    --out-name main \     --no-typescript  cp index.html pkg/-cp main.js pkg/+cp loader.js pkg/ cp styles.css pkg/diff --git a/examples/callbacks/index.html b/examples/callbacks/index.htmlindex f98994b..ccfce67 100644--- a/examples/callbacks/index.html+++ b/examples/callbacks/index.html@@ -4,11 +4,11 @@         <meta charset="UTF-8" />         <link rel="stylesheet" href="styles.css" />         <meta name="viewport" content="width=device-width, initial-scale=1.0" />-        <title>Example: Quotes</title>-        <script type="module" src="main.js" defer></script>+        <title>Wasm Example</title>+        <script type="module" src="loader.js" defer></script>     </head>      <body>-        <main id="quotes"></main>+        <main id="main-view"></main>     </body> </html>diff --git a/examples/callbacks/loader.js b/examples/callbacks/loader.jsnew file mode 100644index 0000000..23aa5d8--- /dev/null+++ b/examples/callbacks/loader.js@@ -0,0 +1,18 @@+let wasmModule;++async function loadWasm() {+  try {+    const wasmModule = await import("./main.js");+    await wasmModule.default("./main_bg.wasm");++    return wasmModule;+  } catch (error) {+    console.error("Failed to load WASM module:", error);+  }++  return null;+}++window.addEventListener("DOMContentLoaded", async () => {+  wasmModule = await loadWasm();+});diff --git a/examples/callbacks/main.js b/examples/callbacks/main.jsdeleted file mode 100644index 25fee3b..0000000--- a/examples/callbacks/main.js+++ /dev/null@@ -1,18 +0,0 @@-let wasmModule;--async function loadWasm() {-  try {-    const wasmModule = await import("./clickcounter.js");-    await wasmModule.default("./clickcounter_bg.wasm");--    return wasmModule;-  } catch (error) {-    console.error("Failed to load WASM module:", error);-  }--  return null;-}--window.addEventListener("DOMContentLoaded", async () => {-  wasmModule = await loadWasm();-});diff --git a/examples/callbacks/src/lib.rs b/examples/callbacks/src/lib.rsindex cd68e7f..f9838a3 100644--- a/examples/callbacks/src/lib.rs+++ b/examples/callbacks/src/lib.rs@@ -39,10 +39,10 @@ fn update(app_data: &AppData) {         </button>     }}; -    let result = inner_html("#quotes", counter.as_str());+    let result = inner_html("#main-view", counter.as_str());      if result.is_err() {-        log!("Failed to set inner HTML for '#quotes'.");+        log!("Failed to set inner HTML for '#main-view'.");     } } diff --git a/examples/callbacks/styles.css b/examples/callbacks/styles.cssindex 6b34160..cd7d9d0 100644--- a/examples/callbacks/styles.css+++ b/examples/callbacks/styles.css@@ -1,18 +1,3 @@-:root {-    --bg: #f6f8fb;-    --card: #ffffff;-    --accent-600: #4f46e5;-    --accent-400: #7c3aed;-    --muted: #6b7280;-    --radius: 12px;-    --space: 18px;-    --max-width: 420px;-    --font-sans: Inter, Avenir, Helvetica, Arial, system-ui, -apple-system;-}--* {-    box-sizing: border-box;-} html, body {     height: 100%;@@ -20,7 +5,6 @@ body { body {     margin: 0;     min-height: 100%;-    font-family: var(--font-sans);     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;     background: linear-gradient(180deg, #f6f8fb 0%, #eef2ff 100%);@@ -30,99 +14,3 @@ body {     justify-content: center;     padding: 40px 20px; }--#click-counter {-    width: 100%;-    max-width: var(--max-width);-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--card));-    border-radius: calc(var(--radius) + 4px);-    padding: calc(var(--space) * 1.25);-    box-shadow: 0 6px 18px rgba(34, 38, 49, 0.06);-    display: grid;-    grid-template-columns: 1fr; /* single column: counter above, buttons below */-    gap: 14px;-    align-items: center;-    justify-items: center;-    text-align: center;-    border: 1px solid rgba(16, 24, 40, 0.03);-}--.click-counter-display {-    font-weight: 700;-    font-size: 3.2rem;-    line-height: 1;-    padding: 20px 28px;-    border-radius: 14px;-    background: linear-gradient(-        180deg,-        rgba(124, 58, 237, 0.08),-        rgba(79, 70, 229, 0.04)-    );-    color: var(--accent-600);-    min-width: 160px;-    display: inline-flex;-    align-items: center;-    justify-content: center;-    box-shadow: 0 2px 6px rgba(34, 38, 49, 0.06);-    user-select: none;-}--.controls {-    width: 100%;-    display: flex;-    flex-direction: column;-    gap: 10px;-    align-items: center;-    justify-content: center;-}--button[class^="click-counter-"] {-    -webkit-appearance: none;-    appearance: none;-    border: none;-    cursor: pointer;-    font-weight: 600;-    font-size: 0.95rem;-    padding: 12px 16px;-    border-radius: 10px;-    display: inline-flex;-    gap: 10px;-    align-items: center;-    justify-content: center;-    min-width: 180px;-}--.click-counter-increment-button,-.click-counter-decrement-button {-    background: linear-gradient(90deg, var(--accent-400), var(--accent-600));-    color: white;-    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.08);-    border: none;-}--@media (min-width: 520px) {-    #click-counter {-        gap: 18px;-    }--    .click-counter-display {-        font-size: 3.5rem;-        min-width: 180px;-    }--    button[class^="click-counter-"] {-        min-width: 200px;-    }-}--@media (prefers-reduced-motion: reduce) {-}--.small {-    font-size: 0.9rem;-    color: var(--muted);-}--.click-counter-display {-    border: solid 10px var(--accent-400);-}