Structure of the repo

README.md

@@ -1,4 +1,4 @@
-# Greact
+# Redraw
 
 [![Package Version](https://img.shields.io/hexpm/v/greact)](https://hex.pm/packages/greact)
 [![Hex Docs](https://img.shields.io/badge/hex-docs-ffaff3)](https://hexdocs.pm/greact/)

example/gleam.toml

@@ -15,7 +15,8 @@ target = "javascript"
 
 [dependencies]
 gleam_stdlib = ">= 0.34.0 and < 2.0.0"
-greact = { path = ".." }
+redraw = { path = "../redraw" }
+redraw_dom = { path = "../redraw_dom" }
 
 [dev-dependencies]
 gleeunit = ">= 1.0.0 and < 2.0.0"

example/manifest.toml

@@ -5,10 +5,12 @@ packages = [
   { name = "gleam_javascript", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "483631D3001FCE8EB12ADEAD5E1B808440038E96F93DA7A32D326C82F480C0B2" },
   { name = "gleam_stdlib", version = "0.39.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "2D7DE885A6EA7F1D5015D1698920C9BAF7241102836CE0C3837A4F160128A9C4" },
   { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
-  { name = "greact", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib"], source = "local", path = ".." },
+  { name = "redraw", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib"], source = "local", path = "../redraw" },
+  { name = "redraw_dom", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw"], source = "local", path = "../redraw_dom" },
 ]
 
 [requirements]
 gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
-greact = { path = ".." }
+redraw = { path = "../redraw" }
+redraw_dom = { path = "../redraw_dom" }

example/src/main.gleam

@@ -1,11 +1,10 @@
 import gleam/int
-import gleam/io
 import gleam/list
-import react
-import react/attribute as a
-import react/event as e
-import react/html
-import react_dom/client
+import redraw as react
+import redraw/attribute as a
+import redraw/handler as h
+import redraw/html
+import redraw_dom/client
 
 pub type Root
 
@@ -25,30 +24,16 @@ pub fn root() {
   app()
 }
 
-pub type CounterProps =
-  #(Int, fn(fn(Int) -> Int) -> Nil)
-
-// #(List(Int), fn(fn(Int) -> Int) -> Nil)
-//   {
-//   CounterProps(count: Int, set_count: fn(fn(Int) -> Int) -> Nil)
-// }
+pub type CounterProps {
+  CounterProps(count: Int, set_count: fn(fn(Int) -> Int) -> Nil)
+}
 
 fn counter() {
   use props: CounterProps <- react.component_("Counter")
-  react.use_effect(
-    fn() {
-      // io.debug("props")
-      io.debug("in use_effect " <> int.to_string(props.0))
-      io.debug(props)
-      Nil
-    },
-    #(props),
-  )
   html.button(
-    // [e.on_click(fn(_) { props.set_count(fn(count) { count + 1 }) })],
-    [],
-    list.map([props], fn(count) {
-      html.text("count is " <> int.to_string(count.0))
+    [h.on_click(fn(_) { props.set_count(fn(count) { count + 1 }) })],
+    list.map([props.count], fn(count) {
+      html.text("count is " <> int.to_string(count))
     }),
   )
 }
@@ -75,8 +60,7 @@ pub fn app() {
     nav_links(),
     html.h1([], [html.text("Vite + Gleam + React")]),
     html.div([a.class("card")], [
-      counter(#(count, set_count)),
-      counter(#(count, set_count)),
+      counter(CounterProps(count, set_count)),
       html.p([], [
         html.text("Edit "),
         html.code([], [html.text("src/main.gleam")]),

example/vite.config.js

@@ -5,7 +5,4 @@ import gleam from "vite-gleam"
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), gleam()],
-  build: {
-    minify: false,
-  },
 })

gleam.toml → redraw/gleam.toml

@@ -1,4 +1,4 @@
-name = "greact"
+name = "redraw"
 version = "1.0.0"
 target = "javascript"
 

redraw/src/external.ffi.mjs

@@ -0,0 +1,20 @@
+import * as option from "../gleam_stdlib/gleam/option.mjs"
+
+function camelize(key) {
+  return key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
+function convertOption(value) {
+  if (value instanceof option.None) return undefined
+  if (value instanceof option.Some) return value[0]
+  return value
+}
+
+export function convertProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).map(([key, value]) => [
+      camelize(key),
+      convertOption(value),
+    ]),
+  )
+}

src/react.ffi.mjs → redraw/src/redraw.ffi.mjs

@@ -1,10 +1,9 @@
 import React from "react"
-import ReactDOM from "react-dom/client"
 import runtime from "react/jsx-runtime"
 import * as gleam from "./gleam.mjs"
 import { propsToGleamProps, gleamPropsToProps } from "./props.ffi.mjs"
 
-/**  Keep display name on Wrapper, to correctly display Components
+/** Keep display name on Wrapper, to correctly display Components
  * in React devtools. */
 function withDisplayName(Component, Wrapper) {
   if (Component.displayName) Wrapper.displayName = Component.displayName
@@ -18,25 +17,6 @@ function withComputedProps(Component, originalProps) {
   })
 }
 
-export function createRoot(value) {
-  const node = document.getElementById(value)
-  return ReactDOM.createRoot(node)
-}
-
-export function hydrateRoot(value, content) {
-  const node = document.getElementById(value)
-  return ReactDOM.hydrateRoot(node, content)
-}
-
-export function createPortal(children, root) {
-  const node = document.getElementById(root)
-  return ReactDOM.createPortal(children, node)
-}
-
-export function render(root, children) {
-  return root.render(children)
-}
-
 /** Wrap the Component in a `forwardRef`, and inject the `ref` from the function
  * arguments to the props. In Gleam, when called, a `forwardRef` component will
  * have shape`fn (props, ref) -> Component`. `addForwardRef` turns it into
@@ -143,7 +123,7 @@ export function jsx(value, props_, children_) {
   let isStatic = true
 
   // Handle keyed elements like lustre does.
-  // This allow to have a similar interface between lustre and greact.
+  // This allow to have a similar interface between Lustre and Redraw.
   if (Array.isArray(children?.[0])) {
     children = children.map((c) => {
       const [key, node] = c