WIP

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 80,
+  "semi": false
+}

src/events.ffi.mjs

@@ -0,0 +1,31 @@
+export function bubbles(event) {
+  return event.bubbles
+}
+
+export function cancelable(event) {
+  return event.cancelable
+}
+
+export function currentTarget(event) {
+  return event.currentTarget
+}
+
+export function defaultPrevented(event) {
+  return event.defaultPrevented
+}
+
+export function eventPhase(event) {
+  return event.eventPhase
+}
+
+export function isTrusted(event) {
+  return event.isTrusted
+}
+
+export function target(event) {
+  return event.target
+}
+
+export function timeStamp(event) {
+  return event.timeStamp
+}

src/main.gleam

@@ -1,6 +1,4 @@
-import gleam/function
 import gleam/int
-import gleam/io
 import react
 import react/attribute as a
 import react/client
@@ -25,30 +23,36 @@ pub fn root() {
   react.strict_mode([app()])
 }
 
+fn counter() {
+  use <- react.component__("Counter")
+  let #(counting, set_counting) = react.use_state_(0)
+  html.button([e.on_click(fn() { set_counting(fn(count) { count + 1 }) })], [
+    html.text("count is " <> int.to_string(counting)),
+  ])
+}
+
+fn nav_links() {
+  html.div([], [
+    html.a([a.href("https://vitejs.dev"), a.target("_blank")], [
+      html.img([a.src("/vite.svg"), a.class("logo"), a.alt("Vite logo")]),
+    ]),
+    html.a([a.href("https://gleam.run"), a.target("_blank")], [
+      html.img([a.src("/lucy.svg"), a.class("logo lucy"), a.alt("Gleam logo")]),
+    ]),
+    html.a([a.href("https://react.dev"), a.target("_blank")], [
+      html.img([a.src("/react.svg"), a.class("logo react"), a.alt("React logo")]),
+    ]),
+  ])
+}
+
 pub fn app() {
+  let counter = counter()
   use <- react.component__("App")
-  let #(count, set_count) = react.use_state(0)
   react.fragment([
-    html.div([], [
-      html.a([a.href("https://vitejs.dev"), a.target("_blank")], [
-        html.img([a.src("/vite.svg"), a.class("logo"), a.alt("Vite logo")]),
-      ]),
-      html.a([a.href("https://gleam.run"), a.target("_blank")], [
-        html.img([a.src("/lucy.svg"), a.class("logo lucy"), a.alt("Gleam logo")]),
-      ]),
-      html.a([a.href("https://react.dev"), a.target("_blank")], [
-        html.img([
-          a.src("/react.svg"),
-          a.class("logo react"),
-          a.alt("React logo"),
-        ]),
-      ]),
-    ]),
+    nav_links(),
     html.h1([], [html.text("Vite + Gleam + React")]),
     html.div([a.class("card")], [
-      html.button([e.on_click(fn() { set_count(count + 1) })], [
-        html.text("count is " <> int.to_string(count)),
-      ]),
+      counter(),
       html.p([], [
         html.text("Edit "),
         html.code([], [html.text("src/main.gleam")]),

src/react/event.gleam

@@ -1,6 +1,32 @@
 import gleam/dynamic
 import react/internals/attribute.{Attribute}
 
+pub type Event
+
+@external(javascript, "../events.ffi.mjs", "bubbles")
+pub fn bubbles(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "cancelable")
+pub fn cancelable(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "currentTarget")
+pub fn current_target(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "defaultPrevented")
+pub fn default_prevented(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "eventPhase")
+pub fn event_phase(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "isTrusted")
+pub fn is_trusted(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "target")
+pub fn target(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "timeStamp")
+pub fn time_stamp(event: Event) -> Bool
+
 pub fn on_click(handler: fn() -> Nil) {
   Attribute("onClick", dynamic.from(handler))
 }