refactor: simplify Option match expressions with guard syntax in examples

Author: bikallem

examples/calculator/main.mbt

@@ -130,13 +130,9 @@ fn main {
       let button = make_button(label)
       let key = label
       button.add_event_listener("click", fn(_event) {
-        match process_key(state, key) {
-          Some(new_state) => {
-            state = new_state
-            render_ui(display, status, state)
-          }
-          None => ()
-        }
+        guard process_key(state, key) is Some(new_state) else { () }
+        state = new_state
+        render_ui(display, status, state)
       })
       row_el.append_child(button) |> ignore
     }
@@ -146,15 +142,11 @@ fn main {
   // Keyboard support
   document.add_event_listener("keydown", fn(event) {
     let kb_event : KeyboardEvent = event.into()
-    match map_keyboard_key(kb_event.key()) {
-      Some(calc_key) => {
-        guard process_key(state, calc_key) is Some(new_state) else { () }
-        state = new_state
-        render_ui(display, status, state)
-        kb_event.prevent_default()
-      }
-      None => ()
-    }
+    guard map_keyboard_key(kb_event.key()) is Some(calc_key) else { () }
+    guard process_key(state, calc_key) is Some(new_state) else { () }
+    state = new_state
+    render_ui(display, status, state)
+    kb_event.prevent_default()
   })
 
   let children : Array[&@webapi.TNode] = [

examples/dom/main.mbt

@@ -101,33 +101,27 @@ fn main {
 
   // Demonstrate getAttribute
   let heading_id = heading.get_attribute("id")
-  match heading_id {
-    Some(id) => {
-      let info : @webapi.HTMLDivElement = @webapi.document
-        .create_element("div")
-        .into()
-      info
-      ..set_attribute(
-        "style", "margin: 0.5em 0; color: gray; font-size: 0.9em;",
-      )
-      .set_text_content("Heading id attribute: " + id)
+  guard heading_id is Some(id) else { () }
+  let info : @webapi.HTMLDivElement = @webapi.document
+    .create_element("div")
+    .into()
+  info
+  ..set_attribute("style", "margin: 0.5em 0; color: gray; font-size: 0.9em;")
+  .set_text_content("Heading id attribute: " + id)
 
-      // Build the DOM tree
-      let app = @webapi.document.get_element_by_id("app").unwrap()
-      let container : @webapi.HTMLDivElement = @webapi.document
-        .create_element("div")
-        .into()
-      container.set_attribute(
-        "style", "font-family: system-ui; max-width: 600px; margin: 2em auto;",
-      )
-      let children : Array[&@webapi.TNode] = [
-        heading, info, list, status, add_btn, remove_btn, clone_btn,
-      ]
-      for child in children {
-        container.append_child(child) |> ignore
-      }
-      let _ = app.append_child(container)
-    }
-    None => ()
+  // Build the DOM tree
+  let app = @webapi.document.get_element_by_id("app").unwrap()
+  let container : @webapi.HTMLDivElement = @webapi.document
+    .create_element("div")
+    .into()
+  container.set_attribute(
+    "style", "font-family: system-ui; max-width: 600px; margin: 2em auto;",
+  )
+  let children : Array[&@webapi.TNode] = [
+    heading, info, list, status, add_btn, remove_btn, clone_btn,
+  ]
+  for child in children {
+    container.append_child(child) |> ignore
   }
+  let _ = app.append_child(container)
 }

examples/intersection-observer/main.mbt

@@ -75,13 +75,9 @@ fn main {
   // Observe all boxes
   let boxes = container.query_selector_all(".box")
   for i = 0U; i < boxes.length(); i = i + 1 {
-    match boxes.item(i) {
-      Some(node) => {
-        let el : @webapi.Element = @webapi.TJsValue::to_js(node).into()
-        observer.observe(el)
-      }
-      None => ()
-    }
+    guard boxes.item(i) is Some(node) else { continue }
+    let el : @webapi.Element = @webapi.TJsValue::to_js(node).into()
+    observer.observe(el)
   }
 
   let app = doc.get_element_by_id("app").unwrap()

examples/main.mbt

@@ -174,9 +174,8 @@ fn main {
     iframe.set_src(name + "/" + name + "." + target + ".html")
 
     // Remove active class from previous link
-    match prev_active[0] {
-      Some(el) => el.class_list().remove(["active"])
-      None => ()
+    if prev_active[0] is Some(el) {
+      el.class_list().remove(["active"])
     }
 
     // Add active class to current link

examples/selection-api/main.mbt

@@ -63,13 +63,9 @@ fn main {
   doc.add_event_listener("selectionchange", fn(_event) { update_info() })
 
   select_all_btn.add_event_listener("click", fn(_event) {
-    match @webapi.window.get_selection() {
-      Some(sel) => {
-        sel.select_all_children(text_content)
-        update_info()
-      }
-      None => ()
-    }
+    guard @webapi.window.get_selection() is Some(sel) else { () }
+    sel.select_all_children(text_content)
+    update_info()
   })
 
   let app = doc.get_element_by_id("app").unwrap()

examples/storage/main.mbt

@@ -50,13 +50,9 @@ fn main {
     let len = storage.length()
     let mut text = ""
     for i in 0U..<len {
-      match storage.key(i) {
-        Some(k) => {
-          let val = storage.get_item(k).unwrap_or("")
-          text = text + k + " = " + val + "\n"
-        }
-        None => ()
-      }
+      guard storage.key(i) is Some(k) else { continue }
+      let val = storage.get_item(k).unwrap_or("")
+      text = text + k + " = " + val + "\n"
     }
     if text == "" {
       text = "(empty)"

examples/touch-events/main.mbt

@@ -36,24 +36,20 @@ fn main {
     } else {
       te.changed_touches().item(0U)
     }
-    match touch {
-      Some(t) => {
-        let x = t.client_x().to_int()
-        let y = t.client_y().to_int()
-        touch_info.set_text_content(
-          "Event: " +
-          event_type +
-          "\nTouches: " +
-          count.to_string() +
-          "\nPosition: (" +
-          x.to_string() +
-          ", " +
-          y.to_string() +
-          ")",
-        )
-      }
-      None => ()
-    }
+    guard touch is Some(t) else { () }
+    let x = t.client_x().to_int()
+    let y = t.client_y().to_int()
+    touch_info.set_text_content(
+      "Event: " +
+      event_type +
+      "\nTouches: " +
+      count.to_string() +
+      "\nPosition: (" +
+      x.to_string() +
+      ", " +
+      y.to_string() +
+      ")",
+    )
   }
 
   let types = ["touchstart", "touchmove", "touchend"]