xote 1.0.2 → 1.2.0

package/src/demo/TodoApp.res

@@ -1,289 +0,0 @@
-open Xote
-
-type todo = {
-  id: int,
-  text: string,
-  completed: bool,
-}
-
-let todos = Signal.make([{id: 1, text: "Buy Milk", completed: true}])
-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) => {
-  todos->Signal.update(todos => {
-    let markAsComplete = todo => todo.id == id ? {...todo, completed: !todo.completed} : todo
-    todos->Array.map(markAsComplete)
-  })
-}
-
-let removeTodo = (id: int) => {
-  todos->Signal.update(todos => todos->Array.filter(todo => todo.id != id))
-}
-
-@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)],
-        (),
-      ),
-      Component.button(
-        ~events=[("click", _ => removeTodo(todo.id))],
-        ~children=[Component.Text("Delete")],
-        (),
-      ),
-    ],
-    (),
-  )
-}
-
-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/demo/TodoApp.res.mjs

@@ -1,326 +0,0 @@
-// 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([{
-        id: 1,
-        text: "Buy Milk",
-        completed: true
-      }]);
-
-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 (todos) {
-          var markAsComplete = function (todo) {
-            if (todo.id === id) {
-              return {
-                      id: todo.id,
-                      text: todo.text,
-                      completed: !todo.completed
-                    };
-            } else {
-              return todo;
-            }
-          };
-          return todos.map(markAsComplete);
-        }));
-}
-
-function removeTodo(id) {
-  Xote__Signal.update(todos, (function (todos) {
-          return todos.filter(function (todo) {
-                      return todo.id !== id;
-                    });
-        }));
-}
-
-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),
-              Xote__Component.button(undefined, [[
-                      "click",
-                      (function (param) {
-                          removeTodo(todo.id);
-                        })
-                    ]], [{
-                      TAG: "Text",
-                      _0: "Delete"
-                    }], 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 ,
-  removeTodo ,
-  clearInput ,
-  handleInput ,
-  getInputValue ,
-  handleKeyDown ,
-  handleAddClick ,
-  toggleTheme ,
-  todoItem ,
-  inputElement ,
-  app ,
-}
-/* todos Not a pure module */

package/vite.config.js

@@ -1,45 +0,0 @@
-import { defineConfig } from "vite";
-import path from "node:path";
-import { readFileSync } from "node:fs";
-
-// Read package.json to auto-externalize deps & name the UMD build
-const pkg = JSON.parse(
-  readFileSync(new URL("./package.json", import.meta.url), "utf-8")
-);
-
-// Allow overriding the entry with ENV: ENTRY=src/whatever.ts
-const entryFromEnv = process.env.ENTRY;
-
-export default defineConfig(() => ({
-  build: {
-    outDir: "dist",
-    sourcemap: true,
-    lib: {
-      // Default entry is src/index.ts; override with ENTRY env var
-      entry: path.resolve(process.cwd(), entryFromEnv ?? "src/Xote.res.mjs"),
-      // A safe global name for UMD; falls back to "Library"
-      name:
-        (pkg.name?.replace?.(/[^a-zA-Z0-9_$]/g, "_")) ||
-        "xote",
-      formats: ["es", "cjs", "umd"],
-      fileName: (format) =>
-        format === "es"
-          ? "index.mjs"
-          : format === "cjs"
-          ? "index.cjs"
-          : "index.umd.js",
-    },
-    rollupOptions: {
-      external: [
-        ...Object.keys(pkg.dependencies ?? {}),
-        ...Object.keys(pkg.peerDependencies ?? {}),
-      ],
-      output: {
-      },
-    },
-    // Tweak if you want smaller/faster builds
-    minify: "esbuild",
-    target: "es2019",
-    emptyOutDir: true,
-  },
-}));