xote 1.0.1

package/src/Xote__Effect.res

@@ -0,0 +1,36 @@
+module IntSet = Belt.Set.Int
+module IntMap = Belt.Map.Int
+
+module Id = Xote__Id
+module Observer = Xote__Observer
+module Signal = Xote__Signal
+module Core = Xote__Core
+
+type disposer = {dispose: unit => unit}
+
+let run = (fn: unit => unit): disposer => {
+  let id = Id.make()
+  let rec o: Observer.t = {
+    id,
+    kind: #Effect,
+    run: () => fn(),
+    deps: IntSet.empty,
+  }
+  Core.observers := IntMap.set(Core.observers.contents, id, o)
+  /* initial run */
+  Core.clearDeps(o)
+  Core.currentObserverId := Some(id)
+  o.run()
+  Core.currentObserverId := None
+
+  let dispose = () => {
+    switch IntMap.get(Core.observers.contents, id) {
+    | None => ()
+    | Some(o) => {
+        Core.clearDeps(o)
+        Core.observers := IntMap.remove(Core.observers.contents, id)
+      }
+    }
+  }
+  {dispose: dispose}
+}

package/src/Xote__Effect.res.mjs

@@ -0,0 +1,57 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__Id from "./Xote__Id.res.mjs";
+import * as Xote__Core from "./Xote__Core.res.mjs";
+import * as Belt_MapInt from "rescript/lib/es6/belt_MapInt.js";
+
+function run(fn) {
+  var id = Xote__Id.make();
+  var o = {
+    id: id,
+    kind: "Effect",
+    run: (function () {
+        fn();
+      }),
+    deps: undefined
+  };
+  Xote__Core.observers.contents = Belt_MapInt.set(Xote__Core.observers.contents, id, o);
+  Xote__Core.clearDeps(o);
+  Xote__Core.currentObserverId.contents = id;
+  o.run();
+  Xote__Core.currentObserverId.contents = undefined;
+  var dispose = function () {
+    var o = Belt_MapInt.get(Xote__Core.observers.contents, id);
+    if (o !== undefined) {
+      Xote__Core.clearDeps(o);
+      Xote__Core.observers.contents = Belt_MapInt.remove(Xote__Core.observers.contents, id);
+      return ;
+    }
+    
+  };
+  return {
+          dispose: dispose
+        };
+}
+
+var IntSet;
+
+var IntMap;
+
+var Id;
+
+var Observer;
+
+var Signal;
+
+var Core;
+
+export {
+  IntSet ,
+  IntMap ,
+  Id ,
+  Observer ,
+  Signal ,
+  Core ,
+  run ,
+}
+/* No side effect */

package/src/Xote__Example.res

@@ -0,0 +1,266 @@
+open Xote
+
+type todo = {
+  id: int,
+  text: string,
+  completed: bool,
+}
+
+let todos = Signal.make([])
+let nextId = ref(0)
+let inputValue = Signal.make("")
+let darkMode = Signal.make(false)
+
+// Computed values derived from todos
+let completedCount = Computed.make(() => {
+  Signal.get(todos)->Array.filter(todo => todo.completed)->Array.length
+})
+
+let activeCount = Computed.make(() => {
+  Signal.get(todos)->Array.filter(todo => !todo.completed)->Array.length
+})
+
+let totalCount = Computed.make(() => {
+  Signal.get(todos)->Array.length
+})
+
+let addTodo = (text: string) => {
+  if String.trim(text) != "" {
+    Signal.update(todos, list => {
+      Array.concat(list, [{id: nextId.contents, text, completed: false}])
+    })
+    nextId := nextId.contents + 1
+    Signal.set(inputValue, "")
+  }
+}
+
+let toggleTodo = (id: int) => {
+  Signal.update(todos, list => {
+    Array.map(list, todo => todo.id == id ? {...todo, completed: !todo.completed} : todo)
+  })
+}
+
+@val @scope("document") external querySelector: string => Nullable.t<Dom.element> = "querySelector"
+@get external target: Dom.event => Dom.element = "target"
+@get external value: Dom.element => string = "value"
+@set external setValue: (Dom.element, string) => unit = "value"
+@get external key: Dom.event => string = "key"
+
+let clearInput = () => {
+  switch querySelector(".todo-input")->Nullable.toOption {
+  | Some(input) => setValue(input, "")
+  | None => ()
+  }
+}
+
+let handleInput = (evt: Dom.event) => {
+  let newValue = evt->target->value
+  Signal.set(inputValue, newValue)
+}
+
+let getInputValue = () => {
+  switch querySelector(".todo-input")->Nullable.toOption {
+  | Some(input) => input->value
+  | None => ""
+  }
+}
+
+let handleKeyDown = (evt: Dom.event) => {
+  if evt->key == "Enter" {
+    addTodo(getInputValue())
+    clearInput()
+  }
+}
+
+let handleAddClick = (_evt: Dom.event) => {
+  addTodo(getInputValue())
+  clearInput()
+}
+
+let toggleTheme = (_evt: Dom.event) => {
+  Signal.update(darkMode, mode => !mode)
+}
+
+// Effect to sync dark mode with HTML class
+let _ = Effect.run(() => {
+  let isDark = Signal.get(darkMode)
+  if isDark {
+    %raw(`document.documentElement.classList.add('dark')`)
+  } else {
+    %raw(`document.documentElement.classList.remove('dark')`)
+  }
+})
+
+let todoItem = (todo: todo) => {
+  let checkboxAttrs = todo.completed
+    ? [("type", "checkbox"), ("checked", "checked"), ("class", "w-5 h-5 cursor-pointer")]
+    : [("type", "checkbox"), ("class", "w-5 h-5 cursor-pointer")]
+
+  Component.li(
+    ~attrs=[
+      (
+        "class",
+        "flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mb-2 " ++
+        (todo.completed ? "completed" : ""),
+      ),
+    ],
+    ~children=[
+      Component.input(~attrs=checkboxAttrs, ~events=[("change", _ => toggleTodo(todo.id))], ()),
+      Component.span(
+        ~attrs=[("class", "flex-1 text-gray-900 dark:text-gray-100")],
+        ~children=[Component.text(todo.text)],
+        (),
+      ),
+    ],
+    (),
+  )
+}
+
+let inputElement = Component.input(
+  ~attrs=[
+    ("type", "text"),
+    ("placeholder", "What needs to be done?"),
+    ("class", "todo-input flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"),
+  ],
+  ~events=[("input", handleInput), ("keydown", handleKeyDown)],
+  (),
+)
+
+let app = Component.div(
+  ~attrs=[("class", "max-w-2xl mx-auto p-6 space-y-6")],
+  ~children=[
+    Component.div(
+      ~attrs=[("class", "bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8")],
+      ~children=[
+        Component.div(
+          ~attrs=[("class", "flex items-center justify-between mb-6")],
+          ~children=[
+            Component.h1(
+              ~attrs=[("class", "text-3xl font-bold text-gray-900 dark:text-white")],
+              ~children=[Component.text("Todo List")],
+              (),
+            ),
+            Component.button(
+              ~attrs=[
+                (
+                  "class",
+                  "px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
+                ),
+              ],
+              ~events=[("click", toggleTheme)],
+              ~children=[
+                Component.textSignal(
+                  Computed.make(() => Signal.get(darkMode) ? "☀️ Light" : "🌙 Dark")
+                ),
+              ],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.div(
+          ~attrs=[
+            (
+              "class",
+              "grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700",
+            ),
+          ],
+          ~children=[
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    ("class", "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"),
+                  ],
+                  ~children=[Component.text("Total")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-gray-900 dark:text-white")],
+                  ~children=[
+                    Component.textSignal(Computed.make(() => Int.toString(Signal.get(totalCount)))),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    ("class", "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"),
+                  ],
+                  ~children=[Component.text("Active")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-blue-600 dark:text-blue-400")],
+                  ~children=[
+                    Component.textSignal(
+                      Computed.make(() => Int.toString(Signal.get(activeCount)))
+                    ),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    ("class", "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"),
+                  ],
+                  ~children=[Component.text("Completed")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-green-600 dark:text-green-400")],
+                  ~children=[
+                    Component.textSignal(
+                      Computed.make(() => Int.toString(Signal.get(completedCount)))
+                    ),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.div(
+          ~attrs=[("class", "flex gap-2 mb-6")],
+          ~children=[
+            inputElement,
+            Component.button(
+              ~attrs=[
+                (
+                  "class",
+                  "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",
+                ),
+              ],
+              ~events=[("click", handleAddClick)],
+              ~children=[Component.text("Add")],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.ul(
+          ~attrs=[("class", "todo-list space-y-2")],
+          ~children=[Component.list(todos, todoItem)],
+          (),
+        ),
+      ],
+      (),
+    ),
+  ],
+  (),
+)
+
+Component.mountById(app, "app")

package/src/Xote__Example.res.mjs

@@ -0,0 +1,303 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__Effect from "./Xote__Effect.res.mjs";
+import * as Xote__Signal from "./Xote__Signal.res.mjs";
+import * as Xote__Computed from "./Xote__Computed.res.mjs";
+import * as Xote__Component from "./Xote__Component.res.mjs";
+
+var todos = Xote__Signal.make([]);
+
+var nextId = {
+  contents: 0
+};
+
+var inputValue = Xote__Signal.make("");
+
+var darkMode = Xote__Signal.make(false);
+
+var completedCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).filter(function (todo) {
+                  return todo.completed;
+                }).length;
+    });
+
+var activeCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).filter(function (todo) {
+                  return !todo.completed;
+                }).length;
+    });
+
+var totalCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).length;
+    });
+
+function addTodo(text) {
+  if (text.trim() !== "") {
+    Xote__Signal.update(todos, (function (list) {
+            return list.concat([{
+                          id: nextId.contents,
+                          text: text,
+                          completed: false
+                        }]);
+          }));
+    nextId.contents = nextId.contents + 1 | 0;
+    return Xote__Signal.set(inputValue, "");
+  }
+  
+}
+
+function toggleTodo(id) {
+  Xote__Signal.update(todos, (function (list) {
+          return list.map(function (todo) {
+                      if (todo.id === id) {
+                        return {
+                                id: todo.id,
+                                text: todo.text,
+                                completed: !todo.completed
+                              };
+                      } else {
+                        return todo;
+                      }
+                    });
+        }));
+}
+
+function clearInput() {
+  var input = document.querySelector(".todo-input");
+  if (!(input == null)) {
+    input.value = "";
+    return ;
+  }
+  
+}
+
+function handleInput(evt) {
+  var newValue = evt.target.value;
+  Xote__Signal.set(inputValue, newValue);
+}
+
+function getInputValue() {
+  var input = document.querySelector(".todo-input");
+  if (input == null) {
+    return "";
+  } else {
+    return input.value;
+  }
+}
+
+function handleKeyDown(evt) {
+  if (evt.key === "Enter") {
+    addTodo(getInputValue());
+    return clearInput();
+  }
+  
+}
+
+function handleAddClick(_evt) {
+  addTodo(getInputValue());
+  clearInput();
+}
+
+function toggleTheme(_evt) {
+  Xote__Signal.update(darkMode, (function (mode) {
+          return !mode;
+        }));
+}
+
+Xote__Effect.run(function () {
+      var isDark = Xote__Signal.get(darkMode);
+      if (isDark) {
+        return (document.documentElement.classList.add('dark'));
+      } else {
+        return (document.documentElement.classList.remove('dark'));
+      }
+    });
+
+function todoItem(todo) {
+  var checkboxAttrs = todo.completed ? [
+      [
+        "type",
+        "checkbox"
+      ],
+      [
+        "checked",
+        "checked"
+      ],
+      [
+        "class",
+        "w-5 h-5 cursor-pointer"
+      ]
+    ] : [
+      [
+        "type",
+        "checkbox"
+      ],
+      [
+        "class",
+        "w-5 h-5 cursor-pointer"
+      ]
+    ];
+  return Xote__Component.li([[
+                "class",
+                "flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mb-2 " + (
+                  todo.completed ? "completed" : ""
+                )
+              ]], undefined, [
+              Xote__Component.input(checkboxAttrs, [[
+                      "change",
+                      (function (param) {
+                          toggleTodo(todo.id);
+                        })
+                    ]], undefined),
+              Xote__Component.span([[
+                      "class",
+                      "flex-1 text-gray-900 dark:text-gray-100"
+                    ]], undefined, [Xote__Component.text(todo.text)], undefined)
+            ], undefined);
+}
+
+var inputElement = Xote__Component.input([
+      [
+        "type",
+        "text"
+      ],
+      [
+        "placeholder",
+        "What needs to be done?"
+      ],
+      [
+        "class",
+        "todo-input flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      ]
+    ], [
+      [
+        "input",
+        handleInput
+      ],
+      [
+        "keydown",
+        handleKeyDown
+      ]
+    ], undefined);
+
+var app = Xote__Component.div([[
+        "class",
+        "max-w-2xl mx-auto p-6 space-y-6"
+      ]], undefined, [Xote__Component.div([[
+              "class",
+              "bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8"
+            ]], undefined, [
+            Xote__Component.div([[
+                    "class",
+                    "flex items-center justify-between mb-6"
+                  ]], undefined, [
+                  Xote__Component.h1([[
+                          "class",
+                          "text-3xl font-bold text-gray-900 dark:text-white"
+                        ]], undefined, [Xote__Component.text("Todo List")], undefined),
+                  Xote__Component.button([[
+                          "class",
+                          "px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                        ]], [[
+                          "click",
+                          toggleTheme
+                        ]], [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                  if (Xote__Signal.get(darkMode)) {
+                                    return "☀️ Light";
+                                  } else {
+                                    return "🌙 Dark";
+                                  }
+                                }))], undefined)
+                ], undefined),
+            Xote__Component.div([[
+                    "class",
+                    "grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700"
+                  ]], undefined, [
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Total")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-gray-900 dark:text-white"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(totalCount).toString();
+                                      }))], undefined)
+                      ], undefined),
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Active")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-blue-600 dark:text-blue-400"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(activeCount).toString();
+                                      }))], undefined)
+                      ], undefined),
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Completed")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-green-600 dark:text-green-400"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(completedCount).toString();
+                                      }))], undefined)
+                      ], undefined)
+                ], undefined),
+            Xote__Component.div([[
+                    "class",
+                    "flex gap-2 mb-6"
+                  ]], undefined, [
+                  inputElement,
+                  Xote__Component.button([[
+                          "class",
+                          "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        ]], [[
+                          "click",
+                          handleAddClick
+                        ]], [Xote__Component.text("Add")], undefined)
+                ], undefined),
+            Xote__Component.ul([[
+                    "class",
+                    "todo-list space-y-2"
+                  ]], undefined, [Xote__Component.list(todos, todoItem)], undefined)
+          ], undefined)], undefined);
+
+Xote__Component.mountById(app, "app");
+
+export {
+  todos ,
+  nextId ,
+  inputValue ,
+  darkMode ,
+  completedCount ,
+  activeCount ,
+  totalCount ,
+  addTodo ,
+  toggleTodo ,
+  clearInput ,
+  handleInput ,
+  getInputValue ,
+  handleKeyDown ,
+  handleAddClick ,
+  toggleTheme ,
+  todoItem ,
+  inputElement ,
+  app ,
+}
+/* todos Not a pure module */

package/src/Xote__Id.res

@@ -0,0 +1,5 @@
+let next = ref(0)
+let make = () => {
+  next := next.contents + 1
+  next.contents
+}

package/src/Xote__Id.res.mjs

@@ -0,0 +1,17 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+var next = {
+  contents: 0
+};
+
+function make() {
+  next.contents = next.contents + 1 | 0;
+  return next.contents;
+}
+
+export {
+  next ,
+  make ,
+}
+/* No side effect */

package/src/Xote__Observer.res

@@ -0,0 +1,12 @@
+module IntSet = Belt.Set.Int
+module IntMap = Belt.Map.Int
+
+type kind = [#Effect | #Computed(int)] /* holds the signal id it writes to */
+
+type t = {
+  id: int,
+  kind: kind,
+  run: unit => unit,
+  /* current dependency set (signal ids) */
+  mutable deps: IntSet.t,
+}