xote 4.3.0 → 4.4.0

package/src/Xote__JSX.res.mjs

@@ -0,0 +1,356 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as Xote__Component from "./Xote__Component.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+function jsx(component, props) {
+  return component(props);
+}
+
+function jsxs(component, props) {
+  return component(props);
+}
+
+function jsxKeyed(component, props, key, param) {
+  return component(props);
+}
+
+function jsxsKeyed(component, props, key, param) {
+  return component(props);
+}
+
+function jsxFragment(props) {
+  let child = props.children;
+  if (child !== undefined) {
+    return child;
+  } else {
+    return Xote__Component.fragment([]);
+  }
+}
+
+let array = Xote__Component.fragment;
+
+function $$null() {
+  return Xote__Component.text("");
+}
+
+function signal(s) {
+  return s;
+}
+
+function computed(f) {
+  return f;
+}
+
+function convertAttrValue(key, value) {
+  if (typeof value === "function") {
+    return Xote__Component.computedAttr(key, value);
+  } else if (typeof value === "object" && Core__Option.isSome(value.id)) {
+    return Xote__Component.signalAttr(key, value);
+  } else {
+    return Xote__Component.attr(key, value);
+  }
+}
+
+function propsToAttrs(props) {
+  let attrs = [];
+  let v = props.id;
+  if (v !== undefined) {
+    attrs.push(convertAttrValue("id", Primitive_option.valFromOption(v)));
+  }
+  let v$1 = props.class;
+  if (v$1 !== undefined) {
+    attrs.push(convertAttrValue("class", Primitive_option.valFromOption(v$1)));
+  }
+  let v$2 = props.style;
+  if (v$2 !== undefined) {
+    attrs.push(convertAttrValue("style", Primitive_option.valFromOption(v$2)));
+  }
+  let v$3 = props.type;
+  if (v$3 !== undefined) {
+    attrs.push(convertAttrValue("type", Primitive_option.valFromOption(v$3)));
+  }
+  let v$4 = props.name;
+  if (v$4 !== undefined) {
+    attrs.push(convertAttrValue("name", Primitive_option.valFromOption(v$4)));
+  }
+  let v$5 = props.value;
+  if (v$5 !== undefined) {
+    attrs.push(convertAttrValue("value", Primitive_option.valFromOption(v$5)));
+  }
+  let v$6 = props.placeholder;
+  if (v$6 !== undefined) {
+    attrs.push(convertAttrValue("placeholder", Primitive_option.valFromOption(v$6)));
+  }
+  let match = props.disabled;
+  if (match !== undefined && match) {
+    attrs.push(Xote__Component.attr("disabled", "true"));
+  }
+  let match$1 = props.checked;
+  if (match$1 !== undefined && match$1) {
+    attrs.push(Xote__Component.attr("checked", "true"));
+  }
+  let match$2 = props.required;
+  if (match$2 !== undefined && match$2) {
+    attrs.push(Xote__Component.attr("required", "true"));
+  }
+  let match$3 = props.readOnly;
+  if (match$3 !== undefined && match$3) {
+    attrs.push(Xote__Component.attr("readonly", "true"));
+  }
+  let v$7 = props.maxLength;
+  if (v$7 !== undefined) {
+    attrs.push(Xote__Component.attr("maxlength", v$7.toString()));
+  }
+  let v$8 = props.minLength;
+  if (v$8 !== undefined) {
+    attrs.push(Xote__Component.attr("minlength", v$8.toString()));
+  }
+  let v$9 = props.min;
+  if (v$9 !== undefined) {
+    attrs.push(convertAttrValue("min", Primitive_option.valFromOption(v$9)));
+  }
+  let v$10 = props.max;
+  if (v$10 !== undefined) {
+    attrs.push(convertAttrValue("max", Primitive_option.valFromOption(v$10)));
+  }
+  let v$11 = props.step;
+  if (v$11 !== undefined) {
+    attrs.push(convertAttrValue("step", Primitive_option.valFromOption(v$11)));
+  }
+  let v$12 = props.pattern;
+  if (v$12 !== undefined) {
+    attrs.push(convertAttrValue("pattern", Primitive_option.valFromOption(v$12)));
+  }
+  let v$13 = props.autoComplete;
+  if (v$13 !== undefined) {
+    attrs.push(convertAttrValue("autocomplete", Primitive_option.valFromOption(v$13)));
+  }
+  let match$4 = props.multiple;
+  if (match$4 !== undefined && match$4) {
+    attrs.push(Xote__Component.attr("multiple", "true"));
+  }
+  let v$14 = props.accept;
+  if (v$14 !== undefined) {
+    attrs.push(convertAttrValue("accept", Primitive_option.valFromOption(v$14)));
+  }
+  let v$15 = props.rows;
+  if (v$15 !== undefined) {
+    attrs.push(Xote__Component.attr("rows", v$15.toString()));
+  }
+  let v$16 = props.cols;
+  if (v$16 !== undefined) {
+    attrs.push(Xote__Component.attr("cols", v$16.toString()));
+  }
+  let v$17 = props.for;
+  if (v$17 !== undefined) {
+    attrs.push(convertAttrValue("for", Primitive_option.valFromOption(v$17)));
+  }
+  let v$18 = props.href;
+  if (v$18 !== undefined) {
+    attrs.push(convertAttrValue("href", Primitive_option.valFromOption(v$18)));
+  }
+  let v$19 = props.target;
+  if (v$19 !== undefined) {
+    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$19)));
+  }
+  let v$20 = props.src;
+  if (v$20 !== undefined) {
+    attrs.push(convertAttrValue("src", Primitive_option.valFromOption(v$20)));
+  }
+  let v$21 = props.alt;
+  if (v$21 !== undefined) {
+    attrs.push(convertAttrValue("alt", Primitive_option.valFromOption(v$21)));
+  }
+  let v$22 = props.width;
+  if (v$22 !== undefined) {
+    attrs.push(convertAttrValue("width", Primitive_option.valFromOption(v$22)));
+  }
+  let v$23 = props.height;
+  if (v$23 !== undefined) {
+    attrs.push(convertAttrValue("height", Primitive_option.valFromOption(v$23)));
+  }
+  let v$24 = props.role;
+  if (v$24 !== undefined) {
+    attrs.push(convertAttrValue("role", Primitive_option.valFromOption(v$24)));
+  }
+  let v$25 = props.tabIndex;
+  if (v$25 !== undefined) {
+    attrs.push(Xote__Component.attr("tabindex", v$25.toString()));
+  }
+  let v$26 = props["aria-label"];
+  if (v$26 !== undefined) {
+    attrs.push(convertAttrValue("aria-label", Primitive_option.valFromOption(v$26)));
+  }
+  let match$5 = props["aria-hidden"];
+  if (match$5 !== undefined) {
+    if (match$5) {
+      attrs.push(Xote__Component.attr("aria-hidden", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-hidden", "false"));
+    }
+  }
+  let match$6 = props["aria-expanded"];
+  if (match$6 !== undefined) {
+    if (match$6) {
+      attrs.push(Xote__Component.attr("aria-expanded", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-expanded", "false"));
+    }
+  }
+  let match$7 = props["aria-selected"];
+  if (match$7 !== undefined) {
+    if (match$7) {
+      attrs.push(Xote__Component.attr("aria-selected", "true"));
+    } else {
+      attrs.push(Xote__Component.attr("aria-selected", "false"));
+    }
+  }
+  let _dataObj = props.data;
+  if (_dataObj !== undefined) {
+    ((Object.entries(_dataObj).forEach(([key, value]) => {
+            attrs.push(convertAttrValue("data-" + key, value))
+          })));
+  }
+  return attrs;
+}
+
+function propsToEvents(props) {
+  let events = [];
+  let handler = props.onClick;
+  if (handler !== undefined) {
+    events.push([
+      "click",
+      handler
+    ]);
+  }
+  let handler$1 = props.onInput;
+  if (handler$1 !== undefined) {
+    events.push([
+      "input",
+      handler$1
+    ]);
+  }
+  let handler$2 = props.onChange;
+  if (handler$2 !== undefined) {
+    events.push([
+      "change",
+      handler$2
+    ]);
+  }
+  let handler$3 = props.onSubmit;
+  if (handler$3 !== undefined) {
+    events.push([
+      "submit",
+      handler$3
+    ]);
+  }
+  let handler$4 = props.onFocus;
+  if (handler$4 !== undefined) {
+    events.push([
+      "focus",
+      handler$4
+    ]);
+  }
+  let handler$5 = props.onBlur;
+  if (handler$5 !== undefined) {
+    events.push([
+      "blur",
+      handler$5
+    ]);
+  }
+  let handler$6 = props.onKeyDown;
+  if (handler$6 !== undefined) {
+    events.push([
+      "keydown",
+      handler$6
+    ]);
+  }
+  let handler$7 = props.onKeyUp;
+  if (handler$7 !== undefined) {
+    events.push([
+      "keyup",
+      handler$7
+    ]);
+  }
+  let handler$8 = props.onMouseEnter;
+  if (handler$8 !== undefined) {
+    events.push([
+      "mouseenter",
+      handler$8
+    ]);
+  }
+  let handler$9 = props.onMouseLeave;
+  if (handler$9 !== undefined) {
+    events.push([
+      "mouseleave",
+      handler$9
+    ]);
+  }
+  return events;
+}
+
+function getChildren(props) {
+  let child = props.children;
+  if (child !== undefined) {
+    if (child.TAG === "Fragment") {
+      return child._0;
+    } else {
+      return [child];
+    }
+  } else {
+    return [];
+  }
+}
+
+function createElement(tag, props) {
+  return {
+    TAG: "Element",
+    tag: tag,
+    attrs: propsToAttrs(props),
+    events: propsToEvents(props),
+    children: getChildren(props)
+  };
+}
+
+let jsx$1 = createElement;
+
+let jsxs$1 = createElement;
+
+function jsxKeyed$1(tag, props, key, param) {
+  return createElement(tag, props);
+}
+
+function jsxsKeyed$1(tag, props, key, param) {
+  return createElement(tag, props);
+}
+
+let Elements = {
+  signal: signal,
+  computed: computed,
+  convertAttrValue: convertAttrValue,
+  propsToAttrs: propsToAttrs,
+  propsToEvents: propsToEvents,
+  getChildren: getChildren,
+  createElement: createElement,
+  jsx: jsx$1,
+  jsxs: jsxs$1,
+  jsxKeyed: jsxKeyed$1,
+  jsxsKeyed: jsxsKeyed$1
+};
+
+let Component;
+
+export {
+  Component,
+  jsx,
+  jsxs,
+  jsxKeyed,
+  jsxsKeyed,
+  jsxFragment,
+  array,
+  $$null,
+  Elements,
+}
+/* Xote__Component Not a pure module */

package/src/Xote__Route.res

@@ -0,0 +1,62 @@
+// Pure route matching logic (no signals, no DOM)
+
+// Route parameter map
+type params = Dict.t<string>
+
+// Match result
+type matchResult =
+  | Match(params)
+  | NoMatch
+
+// Route segment - either static or dynamic parameter
+type segment =
+  | Static(string)
+  | Param(string)
+
+// Parse a route pattern like "/users/:id/posts/:postId"
+// Returns array of segments, where dynamic segments are marked
+let parsePattern = (pattern: string): array<segment> => {
+  pattern
+  ->String.split("/")
+  ->Array.filterMap(seg => {
+    if seg == "" {
+      None
+    } else if String.startsWith(seg, ":") {
+      Some(Param(String.sliceToEnd(seg, ~start=1)))
+    } else {
+      Some(Static(seg))
+    }
+  })
+}
+
+// Match a pathname against a parsed pattern
+let matchPath = (pattern: array<segment>, pathname: string): matchResult => {
+  let pathSegments =
+    pathname
+    ->String.split("/")
+    ->Array.filter(s => s != "")
+
+  // Length must match
+  if Array.length(pattern) != Array.length(pathSegments) {
+    NoMatch
+  } else {
+    let params = Dict.make()
+    let matches = pattern->Array.everyWithIndex((seg, idx) => {
+      let pathSeg = pathSegments->Array.getUnsafe(idx)
+      switch seg {
+      | Static(expected) => pathSeg == expected
+      | Param(name) => {
+          params->Dict.set(name, pathSeg)
+          true
+        }
+      }
+    })
+
+    matches ? Match(params) : NoMatch
+  }
+}
+
+// Convenience: match a pattern string against pathname
+let match = (pattern: string, pathname: string): matchResult => {
+  matchPath(parsePattern(pattern), pathname)
+}

package/src/Xote__Route.res.mjs

@@ -0,0 +1,56 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Core__Array from "@rescript/core/src/Core__Array.res.mjs";
+
+function parsePattern(pattern) {
+  return Core__Array.filterMap(pattern.split("/"), seg => {
+    if (seg === "") {
+      return;
+    } else if (seg.startsWith(":")) {
+      return {
+        TAG: "Param",
+        _0: seg.slice(1)
+      };
+    } else {
+      return {
+        TAG: "Static",
+        _0: seg
+      };
+    }
+  });
+}
+
+function matchPath(pattern, pathname) {
+  let pathSegments = pathname.split("/").filter(s => s !== "");
+  if (pattern.length !== pathSegments.length) {
+    return "NoMatch";
+  }
+  let params = {};
+  let matches = pattern.every((seg, idx) => {
+    let pathSeg = pathSegments[idx];
+    if (seg.TAG === "Static") {
+      return pathSeg === seg._0;
+    }
+    params[seg._0] = pathSeg;
+    return true;
+  });
+  if (matches) {
+    return {
+      TAG: "Match",
+      _0: params
+    };
+  } else {
+    return "NoMatch";
+  }
+}
+
+function match(pattern, pathname) {
+  return matchPath(parsePattern(pattern), pathname);
+}
+
+export {
+  parsePattern,
+  matchPath,
+  match,
+}
+/* No side effect */

package/src/Xote__Router.res

@@ -0,0 +1,130 @@
+open Signals
+module Component = Xote__Component
+module Route = Xote__Route
+
+// Browser location type
+type location = {
+  pathname: string,
+  search: string,
+  hash: string,
+}
+
+// Global location signal - the core router state
+let location: Signal.t<location> = Signal.make({
+  pathname: "/",
+  search: "",
+  hash: "",
+})
+
+// External bindings for History API
+type historyState = {.}
+
+@val @scope(("window", "history"))
+external pushState: (historyState, string, string) => unit = "pushState"
+
+@val @scope(("window", "history"))
+external replaceState: (historyState, string, string) => unit = "replaceState"
+
+@val @scope("window")
+external addEventListener: (string, Dom.event => unit) => unit = "addEventListener"
+
+@val @scope("window")
+external removeEventListener: (string, Dom.event => unit) => unit = "removeEventListener"
+
+// Parse current browser location from window.location
+let getCurrentLocation = (): location => {
+  pathname: %raw(`window.location.pathname`),
+  search: %raw(`window.location.search`),
+  hash: %raw(`window.location.hash`),
+}
+
+// Initialize router - call this once at app start
+let init = (): unit => {
+  // Set initial location from browser
+  Signal.set(location, getCurrentLocation())
+
+  // Listen for popstate (back/forward buttons)
+  let handlePopState = (_evt: Dom.event) => {
+    Signal.set(location, getCurrentLocation())
+  }
+
+  addEventListener("popstate", handlePopState)
+
+  // Note: No cleanup needed for SPA scenarios
+  // If cleanup is needed, return a disposer function
+}
+
+// Imperative navigation - push new history entry
+let push = (pathname: string, ~search: string="", ~hash: string="", ()): unit => {
+  let newLocation = {pathname, search, hash}
+  let url = pathname ++ search ++ hash
+  let state: historyState = %raw("{}")
+  pushState(state, "", url)
+  Signal.set(location, newLocation)
+}
+
+// Imperative navigation - replace current history entry
+let replace = (pathname: string, ~search: string="", ~hash: string="", ()): unit => {
+  let newLocation = {pathname, search, hash}
+  let url = pathname ++ search ++ hash
+  let state: historyState = %raw("{}")
+  replaceState(state, "", url)
+  Signal.set(location, newLocation)
+}
+
+// Route definition for routes() component
+type routeConfig = {
+  pattern: string,
+  render: Route.params => Component.node,
+}
+
+// Single route component - renders if pattern matches
+let route = (pattern: string, render: Route.params => Component.node): Component.node => {
+  let signal = Computed.make(() => {
+    let loc = Signal.get(location)
+    switch Route.match(pattern, loc.pathname) {
+    | Match(params) => [render(params)]
+    | NoMatch => []
+    }
+  })
+  Component.signalFragment(signal)
+}
+
+// Routes component - renders first matching route
+let routes = (configs: array<routeConfig>): Component.node => {
+  let signal = Computed.make(() => {
+    let loc = Signal.get(location)
+    let matched = configs->Array.findMap(config => {
+      switch Route.match(config.pattern, loc.pathname) {
+      | Match(params) => Some(config.render(params))
+      | NoMatch => None
+      }
+    })
+
+    switch matched {
+    | Some(node) => [node]
+    | None => [] // No matching route - render nothing
+    }
+  })
+  Component.signalFragment(signal)
+}
+
+// Link component - handles navigation without page reload
+let link = (
+  ~to: string,
+  ~attrs: array<(string, Component.attrValue)>=[],
+  ~children: array<Component.node>=[],
+  (),
+): Component.node => {
+  let handleClick = (_evt: Dom.event) => {
+    %raw(`_evt.preventDefault()`)
+    push(to, ())
+  }
+
+  Component.a(
+    ~attrs=Array.concat(attrs, [Component.attr("href", to)]),
+    ~events=[("click", handleClick)],
+    ~children,
+    (),
+  )
+}

package/src/Xote__Router.res.mjs

@@ -0,0 +1,116 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Signals from "rescript-signals/src/Signals.res.mjs";
+import * as Core__Array from "@rescript/core/src/Core__Array.res.mjs";
+import * as Xote__Route from "./Xote__Route.res.mjs";
+import * as Xote__Component from "./Xote__Component.res.mjs";
+
+let location = Signals.Signal.make({
+  pathname: "/",
+  search: "",
+  hash: ""
+}, undefined, undefined);
+
+function getCurrentLocation() {
+  return {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash
+  };
+}
+
+function init() {
+  Signals.Signal.set(location, getCurrentLocation());
+  let handlePopState = _evt => Signals.Signal.set(location, getCurrentLocation());
+  window.addEventListener("popstate", handlePopState);
+}
+
+function push(pathname, searchOpt, hashOpt, param) {
+  let search = searchOpt !== undefined ? searchOpt : "";
+  let hash = hashOpt !== undefined ? hashOpt : "";
+  let newLocation = {
+    pathname: pathname,
+    search: search,
+    hash: hash
+  };
+  let url = pathname + search + hash;
+  let state = {};
+  window.history.pushState(state, "", url);
+  Signals.Signal.set(location, newLocation);
+}
+
+function replace(pathname, searchOpt, hashOpt, param) {
+  let search = searchOpt !== undefined ? searchOpt : "";
+  let hash = hashOpt !== undefined ? hashOpt : "";
+  let newLocation = {
+    pathname: pathname,
+    search: search,
+    hash: hash
+  };
+  let url = pathname + search + hash;
+  let state = {};
+  window.history.replaceState(state, "", url);
+  Signals.Signal.set(location, newLocation);
+}
+
+function route(pattern, render) {
+  return Xote__Component.signalFragment(Signals.Computed.make(() => {
+    let loc = Signals.Signal.get(location);
+    let params = Xote__Route.match(pattern, loc.pathname);
+    if (typeof params !== "object") {
+      return [];
+    } else {
+      return [render(params._0)];
+    }
+  }, undefined));
+}
+
+function routes(configs) {
+  return Xote__Component.signalFragment(Signals.Computed.make(() => {
+    let loc = Signals.Signal.get(location);
+    let matched = Core__Array.findMap(configs, config => {
+      let params = Xote__Route.match(config.pattern, loc.pathname);
+      if (typeof params !== "object") {
+        return;
+      } else {
+        return config.render(params._0);
+      }
+    });
+    if (matched !== undefined) {
+      return [matched];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+function link(to, attrsOpt, childrenOpt, param) {
+  let attrs = attrsOpt !== undefined ? attrsOpt : [];
+  let children = childrenOpt !== undefined ? childrenOpt : [];
+  let handleClick = _evt => {
+    ((_evt.preventDefault()));
+    push(to, undefined, undefined, undefined);
+  };
+  return Xote__Component.a(attrs.concat([Xote__Component.attr("href", to)]), [[
+      "click",
+      handleClick
+    ]], children, undefined);
+}
+
+let Component;
+
+let Route;
+
+export {
+  Component,
+  Route,
+  location,
+  getCurrentLocation,
+  init,
+  push,
+  replace,
+  route,
+  routes,
+  link,
+}
+/* location Not a pure module */