refactor: use declarative <my-counter> tags in wc-counter HTML files

bikallem · bikallem · commit f32810be8759 · 2026-02-21T12:11:35.000Z
Move static markup (heading, custom element tags, event log) from
programmatic DOM construction in MoonBit to declarative HTML. MoonBit
now only registers the custom element and wires the event listener.
diff --git a/examples/wc-counter/main.mbt b/examples/wc-counter/main.mbt
@@ -60,32 +60,9 @@ fn main {
     })
   })
 
-  // Build host page
-  let app = doc.get_element_by_id("app").unwrap()
-
-  let heading = doc.create_element("h1")
-  heading.set_text_content("Web Components Counter")
-
-  let counter1 = doc.create_element("my-counter")
-  counter1.set_attribute("id", "counter-1")
-
-  let counter2 = doc.create_element("my-counter")
-  counter2.set_attribute("id", "counter-2")
-
-  let log = doc.create_element("div")
-  log
-  ..set_attribute("id", "event-log")
-  .set_attribute(
-    "style", "margin-top: 1em; padding: 0.5em; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; min-height: 2em;",
-  )
-  log.set_text_content("Event log:")
-
-  app.append_child(heading) |> ignore
-  app.append_child(counter1) |> ignore
-  app.append_child(counter2) |> ignore
-  app.append_child(log) |> ignore
-
   // Listen for count-changed events (bubbles up through composed boundary)
+  let app = doc.get_element_by_id("app").unwrap()
+  let log = doc.get_element_by_id("event-log").unwrap()
   app.add_event_listener("count-changed", fn(event) {
     let ce : @webapi.CustomEvent = event.into()
     let detail = ce.detail()
diff --git a/examples/wc-counter/wc-counter.js.html b/examples/wc-counter/wc-counter.js.html
@@ -7,7 +7,12 @@
     <title>WC Counter Example</title>
 </head>
 <body>
-    <div id="app"></div>
+    <div id="app">
+        <h1>Web Components Counter</h1>
+        <my-counter id="counter-1"></my-counter>
+        <my-counter id="counter-2"></my-counter>
+        <div id="event-log" style="margin-top: 1em; padding: 0.5em; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; min-height: 2em;">Event log:</div>
+    </div>
     <script type="module" src="../_build/js/release/build/wc-counter/wc-counter.js"></script>
 </body>
 </html>
diff --git a/examples/wc-counter/wc-counter.wasm.html b/examples/wc-counter/wc-counter.wasm.html
@@ -7,7 +7,12 @@
     <title>WC Counter Example (wasm-gc)</title>
 </head>
 <body>
-    <div id="app"></div>
+    <div id="app">
+        <h1>Web Components Counter</h1>
+        <my-counter id="counter-1"></my-counter>
+        <my-counter id="counter-2"></my-counter>
+        <div id="event-log" style="margin-top: 1em; padding: 0.5em; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; min-height: 2em;">Event log:</div>
+    </div>
     <script type="module">
         import { wasmImportObject } from "../../src/webapi.mjs";
         const { instance } = await WebAssembly.instantiateStreaming(
