xote 4.2.0 → 4.3.1

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 */