From 8555754953989366e5484e53f4b8441eacc0e970 Mon Sep 17 00:00:00 2001
From: Guillaume Hivert <hivert.is.coming@gmail.com>
Date: Fri, 19 Jul 2024 15:50:03 +0200
Subject: [PATCH] WIP

---
 .prettierrc           |   4 +
 src/events.ffi.mjs    |  31 +++
 src/main.gleam        |  46 ++--
 src/react/event.gleam |  26 +++
 src/react/html.gleam  | 520 ++++++++++++++++++++++++++++++++++++++++--
 src/react/svg.gleam   | 332 +++++++++++++++++++++++++++
 vite.config.js        |   8 +-
 7 files changed, 928 insertions(+), 39 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 src/events.ffi.mjs
 create mode 100644 src/react/svg.gleam

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c8ada72
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "printWidth": 80,
+  "semi": false
+}
diff --git a/src/events.ffi.mjs b/src/events.ffi.mjs
new file mode 100644
index 0000000..7339551
--- /dev/null
+++ b/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
+}
diff --git a/src/main.gleam b/src/main.gleam
index e29eb49..c79605e 100644
--- a/src/main.gleam
+++ b/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")]),
diff --git a/src/react/event.gleam b/src/react/event.gleam
index abd9afe..5e0a555 100644
--- a/src/react/event.gleam
+++ b/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))
 }
diff --git a/src/react/html.gleam b/src/react/html.gleam
index f886e24..cd2c9b4 100644
--- a/src/react/html.gleam
+++ b/src/react/html.gleam
@@ -1,22 +1,233 @@
 import react.{type Component}
 import react/internals/attribute.{to_props}
 
-pub fn div(attrs, children: List(Component)) -> Component {
+pub fn html(attrs, children) {
   let attrs = to_props(attrs)
-  react.jsx("div", attrs, children)
+  react.jsx("html", attrs, children)
+}
+
+pub fn link(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("link", attrs, Nil)
+}
+
+pub fn meta(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("meta", attrs, Nil)
+}
+
+pub fn script(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("script", attrs, Nil)
 }
 
-pub fn a(attrs, children: List(Component)) -> Component {
+pub fn style(attrs, content) {
+  let attrs = to_props(attrs)
+  react.jsx("style", attrs, [text(content)])
+}
+
+pub fn title(attrs, content) {
+  let attrs = to_props(attrs)
+  react.jsx("title", attrs, [text(content)])
+}
+
+pub fn text(content) -> Component {
+  react.jsx("text_", Nil, content)
+}
+
+// DOM nodes
+
+pub fn a(attrs, children: List(Component)) {
   let attrs = to_props(attrs)
   react.jsx("a", attrs, children)
 }
 
-pub fn img(attrs) -> Component {
+pub fn abbr(attrs, children: List(Component)) {
   let attrs = to_props(attrs)
-  react.jsx("img", attrs, Nil)
+  react.jsx("abbr", attrs, children)
+}
+
+pub fn address(attrs, children: List(Component)) {
+  let attrs = to_props(attrs)
+  react.jsx("address", attrs, children)
+}
+
+pub fn area(attrs) -> Component {
+  let attrs = to_props(attrs)
+  react.jsx("area", attrs, Nil)
+}
+
+pub fn article(attrs, children: List(Component)) -> Component {
+  let attrs = to_props(attrs)
+  react.jsx("article", attrs, children)
+}
+
+pub fn aside(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("aside", attrs, children)
+}
+
+pub fn audio(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("audio", attrs, children)
+}
+
+pub fn b(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("b", attrs, children)
+}
+
+pub fn base(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("base", attrs, children)
+}
+
+pub fn bdi(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("bdi", attrs, children)
+}
+
+pub fn bdo(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("bdo", attrs, children)
+}
+
+pub fn blockquote(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("blockquote", attrs, children)
+}
+
+pub fn body(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("body", attrs, children)
+}
+
+pub fn br(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("br", attrs, children)
+}
+
+pub fn button(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("button", attrs, children)
+}
+
+pub fn canvas(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("canvas", attrs, children)
+}
+
+pub fn caption(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("caption", attrs, children)
+}
+
+pub fn cite(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("cite", attrs, children)
+}
+
+pub fn code(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("code", attrs, children)
+}
+
+pub fn col(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("col", attrs, children)
+}
+
+pub fn colgroup(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("colgroup", attrs, children)
+}
+
+pub fn data(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("data", attrs, children)
+}
+
+pub fn datalist(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("datalist", attrs, children)
 }
 
-pub fn h1(attrs, children) -> Component {
+pub fn dd(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("dd", attrs, children)
+}
+
+pub fn del(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("del", attrs, children)
+}
+
+pub fn details(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("details", attrs, children)
+}
+
+pub fn dfn(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("dfn", attrs, children)
+}
+
+pub fn dialog(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("dialog", attrs, children)
+}
+
+pub fn div(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("div", attrs, children)
+}
+
+pub fn dl(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("dl", attrs, children)
+}
+
+pub fn dt(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("dt", attrs, children)
+}
+
+pub fn em(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("em", attrs, children)
+}
+
+pub fn embed(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("embed", attrs, children)
+}
+
+pub fn fieldset(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("fieldset", attrs, children)
+}
+
+pub fn figcaption(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("figcaption", attrs, children)
+}
+
+pub fn figure(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("figure", attrs, children)
+}
+
+pub fn footer(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("footer", attrs, children)
+}
+
+pub fn form(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("form", attrs, children)
+}
+
+pub fn h1(attrs, children) {
   let attrs = to_props(attrs)
   react.jsx("h1", attrs, children)
 }
@@ -46,26 +257,307 @@ pub fn h6(attrs, children) -> Component {
   react.jsx("h6", attrs, children)
 }
 
-pub fn button(attrs, children) -> Component {
+pub fn head(attrs, children) {
   let attrs = to_props(attrs)
-  react.jsx("button", attrs, children)
+  react.jsx("head", attrs, children)
+}
+
+pub fn header(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("header", attrs, children)
+}
+
+pub fn hgroup(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("hgroup", attrs, children)
 }
 
-pub fn p(attrs, children) -> Component {
+pub fn hr(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("hr", attrs, Nil)
+}
+
+pub fn i(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("i", attrs, children)
+}
+
+pub fn iframe(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("iframe", attrs, Nil)
+}
+
+pub fn img(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("img", attrs, Nil)
+}
+
+pub fn input(attrs) {
+  let attrs = to_props(attrs)
+  react.jsx("input", attrs, Nil)
+}
+
+pub fn ins(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("ins", attrs, children)
+}
+
+pub fn kbd(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("kbd", attrs, children)
+}
+
+pub fn label(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("label", attrs, children)
+}
+
+pub fn legend(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("legend", attrs, children)
+}
+
+pub fn li(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("li", attrs, children)
+}
+
+pub fn main(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("main", attrs, children)
+}
+
+pub fn map(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("map", attrs, children)
+}
+
+pub fn mark(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("mark", attrs, children)
+}
+
+pub fn menu(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("menu", attrs, children)
+}
+
+pub fn meter(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("meter", attrs, children)
+}
+
+pub fn nav(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("nav", attrs, children)
+}
+
+pub fn noscript(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("noscript", attrs, children)
+}
+
+pub fn object(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("object", attrs, children)
+}
+
+pub fn ol(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("ol", attrs, children)
+}
+
+pub fn optgroup(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("optgroup", attrs, children)
+}
+
+pub fn option(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("option", attrs, children)
+}
+
+pub fn output(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("output", attrs, children)
+}
+
+pub fn p(attrs, children) {
   let attrs = to_props(attrs)
   react.jsx("p", attrs, children)
 }
 
-pub fn pre(attrs, children) -> Component {
+pub fn picture(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("picture", attrs, children)
+}
+
+pub fn pre(attrs, children) {
   let attrs = to_props(attrs)
   react.jsx("pre", attrs, children)
 }
 
-pub fn code(attrs, children) -> Component {
+pub fn progress(attrs, children) {
   let attrs = to_props(attrs)
-  react.jsx("code", attrs, children)
+  react.jsx("progress", attrs, children)
 }
 
-pub fn text(content) -> Component {
-  react.jsx("text_", Nil, content)
+pub fn q(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("q", attrs, children)
+}
+
+pub fn rp(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("rp", attrs, children)
+}
+
+pub fn rt(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("rt", attrs, children)
+}
+
+pub fn ruby(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("ruby", attrs, children)
+}
+
+pub fn s(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("s", attrs, children)
+}
+
+pub fn samp(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("samp", attrs, children)
+}
+
+pub fn section(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("section", attrs, children)
+}
+
+pub fn select(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("select", attrs, children)
+}
+
+pub fn slot(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("slot", attrs, children)
+}
+
+pub fn small(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("small", attrs, children)
+}
+
+pub fn source(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("source", attrs, children)
+}
+
+pub fn span(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("span", attrs, children)
+}
+
+pub fn strong(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("strong", attrs, children)
+}
+
+pub fn sub(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("sub", attrs, children)
+}
+
+pub fn summary(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("summary", attrs, children)
+}
+
+pub fn sup(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("sup", attrs, children)
+}
+
+pub fn table(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("table", attrs, children)
+}
+
+pub fn tbody(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("tbody", attrs, children)
+}
+
+pub fn td(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("td", attrs, children)
+}
+
+pub fn template(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("template", attrs, children)
+}
+
+pub fn textarea(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("textarea", attrs, children)
+}
+
+pub fn tfoot(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("tfoot", attrs, children)
+}
+
+pub fn th(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("th", attrs, children)
+}
+
+pub fn thead(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("thead", attrs, children)
+}
+
+pub fn time(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("time", attrs, children)
+}
+
+pub fn tr(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("tr", attrs, children)
+}
+
+pub fn track(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("track", attrs, children)
+}
+
+pub fn u(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("u", attrs, children)
+}
+
+pub fn ul(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("ul", attrs, children)
+}
+
+pub fn var(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("var", attrs, children)
+}
+
+pub fn video(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("video", attrs, children)
+}
+
+pub fn wbr(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("wbr", attrs, children)
 }
diff --git a/src/react/svg.gleam b/src/react/svg.gleam
new file mode 100644
index 0000000..da778be
--- /dev/null
+++ b/src/react/svg.gleam
@@ -0,0 +1,332 @@
+import react.{type Component}
+import react/internals/attribute.{to_props}
+
+pub fn a(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("a", attrs, children)
+}
+
+pub fn animate(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("animate", attrs, children)
+}
+
+pub fn animate_motion(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("animateMotion", attrs, children)
+}
+
+pub fn animate_transform(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("animateTransform", attrs, children)
+}
+
+pub fn circle(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("circle", attrs, children)
+}
+
+pub fn clip_path(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("clipPath", attrs, children)
+}
+
+pub fn defs(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("defs", attrs, children)
+}
+
+pub fn desc(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("desc", attrs, children)
+}
+
+pub fn discard(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("discard", attrs, children)
+}
+
+pub fn ellipse(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("ellipse", attrs, children)
+}
+
+pub fn fe_blend(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feBlend", attrs, children)
+}
+
+pub fn fe_color_matrix(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feColorMatrix", attrs, children)
+}
+
+pub fn fe_component_transfer(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feComponentTransfer", attrs, children)
+}
+
+pub fn fe_composite(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feComposite", attrs, children)
+}
+
+pub fn fe_convolve_matrix(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feConvolveMatrix", attrs, children)
+}
+
+pub fn fe_diffuse_lighting(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feDiffuseLighting", attrs, children)
+}
+
+pub fn fe_displacement_map(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feDisplacementMap", attrs, children)
+}
+
+pub fn fe_distant_light(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feDistantLight", attrs, children)
+}
+
+pub fn fe_drop_shadow(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feDropShadow", attrs, children)
+}
+
+pub fn fe_flood(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feFlood", attrs, children)
+}
+
+pub fn fe_func_a(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feFuncA", attrs, children)
+}
+
+pub fn fe_func_b(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feFuncB", attrs, children)
+}
+
+pub fn fe_func_g(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feFuncG", attrs, children)
+}
+
+pub fn fe_func_r(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feFuncR", attrs, children)
+}
+
+pub fn fe_gaussian_blur(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feGaussianBlur", attrs, children)
+}
+
+pub fn fe_image(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feImage", attrs, children)
+}
+
+pub fn fe_merge(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feMerge", attrs, children)
+}
+
+pub fn fe_merge_node(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feMergeNode", attrs, children)
+}
+
+pub fn fe_morphology(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feMorphology", attrs, children)
+}
+
+pub fn fe_offset(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feOffset", attrs, children)
+}
+
+pub fn fe_point_light(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("fePointLight", attrs, children)
+}
+
+pub fn fe_specular_lighting(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feSpecularLighting", attrs, children)
+}
+
+pub fn fe_spot_light(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feSpotLight", attrs, children)
+}
+
+pub fn fe_tile(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feTile", attrs, children)
+}
+
+pub fn fe_turbulence(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("feTurbulence", attrs, children)
+}
+
+pub fn filter(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("filter", attrs, children)
+}
+
+pub fn foreign_object(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("foreignObject", attrs, children)
+}
+
+pub fn g(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("g", attrs, children)
+}
+
+pub fn hatch(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("hatch", attrs, children)
+}
+
+pub fn hatchpath(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("hatchpath", attrs, children)
+}
+
+pub fn image(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("image", attrs, children)
+}
+
+pub fn line(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("line", attrs, children)
+}
+
+pub fn linear_gradient(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("linearGradient", attrs, children)
+}
+
+pub fn marker(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("marker", attrs, children)
+}
+
+pub fn mask(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("mask", attrs, children)
+}
+
+pub fn metadata(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("metadata", attrs, children)
+}
+
+pub fn mpath(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("mpath", attrs, children)
+}
+
+pub fn path(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("path", attrs, children)
+}
+
+pub fn pattern(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("pattern", attrs, children)
+}
+
+pub fn polygon(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("polygon", attrs, children)
+}
+
+pub fn polyline(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("polyline", attrs, children)
+}
+
+pub fn radial_gradient(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("radialGradient", attrs, children)
+}
+
+pub fn rect(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("rect", attrs, children)
+}
+
+pub fn script(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("script", attrs, children)
+}
+
+pub fn set(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("set", attrs, children)
+}
+
+pub fn stop(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("stop", attrs, children)
+}
+
+pub fn style(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("style", attrs, children)
+}
+
+pub fn svg(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("svg", attrs, children)
+}
+
+pub fn switch(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("switch", attrs, children)
+}
+
+pub fn symbol(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("symbol", attrs, children)
+}
+
+pub fn text(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("text", attrs, children)
+}
+
+pub fn text_path(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("textPath", attrs, children)
+}
+
+pub fn title(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("title", attrs, children)
+}
+
+pub fn tspan(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("tspan", attrs, children)
+}
+
+pub fn use_(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("use", attrs, children)
+}
+
+pub fn view(attrs, children) {
+  let attrs = to_props(attrs)
+  react.jsx("view", attrs, children)
+}
diff --git a/vite.config.js b/vite.config.js
index be087e6..4d80960 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,6 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import gleam from "vite-gleam";
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import gleam from "vite-gleam"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,4 +8,4 @@ export default defineConfig({
   build: {
     minify: false,
   },
-});
+})