xote 6.1.1 → 6.2.0

package/src/Route.res.mjs

@@ -48,9 +48,18 @@ function match(pattern, pathname) {
   return matchPath(parsePattern(pattern), pathname);
 }
 
+let compile = parsePattern;
+
+let matchCompiled = matchPath;
+
+let matchPathname = match;
+
 export {
   parsePattern,
   matchPath,
   match,
+  compile,
+  matchCompiled,
+  matchPathname,
 }
 /* No side effect */

package/src/Router.res

@@ -309,11 +309,11 @@ let replace = (pathname: string, ~search: string="", ~hash: string="", ()): unit
 // Route definition for routes() component
 type routeConfig = {
   pattern: string,
-  render: Route.params => Node.node,
+  render: Route.params => View.node,
 }
 
 // Single route component - renders if pattern matches
-let route = (pattern: string, render: Route.params => Node.node): Node.node => {
+let route = (pattern: string, render: Route.params => View.node): View.node => {
   warnIfNotInitialized("Router.route()")
 
   let signal = Computed.make(() => {
@@ -323,11 +323,11 @@ let route = (pattern: string, render: Route.params => Node.node): Node.node => {
     | NoMatch => []
     }
   })
-  Node.signalFragment(signal)
+  View.signalFragment(signal)
 }
 
 // Routes component - renders first matching route
-let routes = (configs: array<routeConfig>): Node.node => {
+let routes = (configs: array<routeConfig>): View.node => {
   warnIfNotInitialized("Router.routes()")
 
   let signal = Computed.make(() => {
@@ -344,16 +344,16 @@ let routes = (configs: array<routeConfig>): Node.node => {
     | None => [] // No matching route - render nothing
     }
   })
-  Node.signalFragment(signal)
+  View.signalFragment(signal)
 }
 
 // Link component - handles navigation without page reload
 let link = (
   ~to: string,
-  ~attrs: array<(string, Node.attrValue)>=[],
-  ~children: array<Node.node>=[],
+  ~attrs: array<(string, View.attrValue)>=[],
+  ~children: array<View.node>=[],
   (),
-): Node.node => {
+): View.node => {
   warnIfNotInitialized("Router.link()")
 
   let handleClick = (_evt: Dom.event) => {
@@ -362,7 +362,7 @@ let link = (
   }
 
   Html.a(
-    ~attrs=Array.concat(attrs, [Node.attr("href", addBasePath(to))]),
+    ~attrs=Array.concat(attrs, [View.attr("href", addBasePath(to))]),
     ~events=[("click", handleClick)],
     ~children,
     (),
@@ -371,7 +371,7 @@ let link = (
 
 // JSX Link component
 module Link = {
-  module ReactiveProp = ReactiveProp
+  module Prop = Prop
 
   type props<'class, 'id, 'style, 'target, 'ariaLabel> = {
     /* Required navigation prop */
@@ -385,61 +385,35 @@ module Link = {
     /* Event handlers */
     onClick?: Dom.event => unit,
     /* Children */
-    children?: Node.node,
-  }
-
-  /* Helper to detect if a value is a ReactiveProp variant */
-  let isReactiveProp = (value: 'a): bool => {
-    ignore(value)
-    %raw(`value && typeof value === 'object' && ('TAG' in value) && (value.TAG === 'Static' || value.TAG === 'Reactive')`)
-  }
-
-  /* Helper to convert string attribute value */
-  let convertAttrValue = (key: string, value: 'a): (string, Node.attrValue) => {
-    if isReactiveProp(value) {
-      let rp: ReactiveProp.t<string> = Obj.magic(value)
-      switch rp {
-      | Static(s) => Node.attr(key, s)
-      | Reactive(signal) => Node.signalAttr(key, signal)
-      }
-    } else if typeof(value) == #function {
-      let f: unit => string = Obj.magic(value)
-      Node.computedAttr(key, f)
-    } else if typeof(value) == #object {
-      let sig: Signal.t<string> = Obj.magic(value)
-      Node.signalAttr(key, sig)
-    } else {
-      let s: string = Obj.magic(value)
-      Node.attr(key, s)
-    }
+    children?: View.node,
   }
 
   /* Convert props to attrs array */
-  let propsToAttrs = (props): array<(string, Node.attrValue)> => {
+  let propsToAttrs = (props): array<(string, View.attrValue)> => {
     let attrs = []
 
     switch props.class {
-    | Some(v) => attrs->Array.push(convertAttrValue("class", v))
+    | Some(v) => attrs->Array.push(RuntimeJsxProp.toStringAttr("class", v))
     | None => ()
     }
 
     switch props.id {
-    | Some(v) => attrs->Array.push(convertAttrValue("id", v))
+    | Some(v) => attrs->Array.push(RuntimeJsxProp.toStringAttr("id", v))
     | None => ()
     }
 
     switch props.style {
-    | Some(v) => attrs->Array.push(convertAttrValue("style", v))
+    | Some(v) => attrs->Array.push(RuntimeJsxProp.toStringAttr("style", v))
     | None => ()
     }
 
     switch props.target {
-    | Some(v) => attrs->Array.push(convertAttrValue("target", v))
+    | Some(v) => attrs->Array.push(RuntimeJsxProp.toStringAttr("target", v))
     | None => ()
     }
 
     switch props.ariaLabel {
-    | Some(v) => attrs->Array.push(convertAttrValue("aria-label", v))
+    | Some(v) => attrs->Array.push(RuntimeJsxProp.toStringAttr("aria-label", v))
     | None => ()
     }
 
@@ -447,16 +421,16 @@ module Link = {
   }
 
   /* Extract children from props */
-  let getChildren = (props): array<Node.node> => {
+  let getChildren = (props): array<View.node> => {
     switch props.children {
-    | Some(Node.Fragment(children)) => children
+    | Some(View.Fragment(children)) => children
     | Some(child) => [child]
     | None => []
     }
   }
 
   /* JSX component function */
-  let make = (props): Node.node => {
+  let make = (props): View.node => {
     warnIfNotInitialized("Router.Link")
 
     let handleClick = (evt: Dom.event) => {
@@ -471,7 +445,7 @@ module Link = {
     }
 
     Html.a(
-      ~attrs=Array.concat(propsToAttrs(props), [Node.attr("href", addBasePath(props.to))]),
+      ~attrs=Array.concat(propsToAttrs(props), [View.attr("href", addBasePath(props.to))]),
       ~events=[("click", handleClick)],
       ~children=getChildren(props),
       (),
@@ -482,8 +456,10 @@ module Link = {
   let jsx = make
   let jsxs = make
   let jsxKeyed = (props, ~key: option<string>=?, _: unit) => {
-    let _ = key
-    make(props)
+    switch key {
+    | Some(key) => View.Keyed({key, identity: Obj.magic(props), child: make(props)})
+    | None => make(props)
+    }
   }
   let jsxsKeyed = jsxKeyed
 }

package/src/Router.res.mjs

@@ -1,12 +1,13 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
 import * as Html$Xote from "./Html.res.mjs";
-import * as Node$Xote from "./Node.res.mjs";
+import * as View$Xote from "./View.res.mjs";
 import * as Route$Xote from "./Route.res.mjs";
 import * as Signal$Xote from "./Signal.res.mjs";
 import * as Stdlib_Array from "@rescript/runtime/lib/es6/Stdlib_Array.js";
 import * as Computed$Xote from "./Computed.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as RuntimeJsxProp$Xote from "./RuntimeJsxProp.res.mjs";
 
 function getSymbolKey() {
   return Symbol.for("xote.router.state");
@@ -213,7 +214,7 @@ function replace(pathname, searchOpt, hashOpt, param) {
 
 function route(pattern, render) {
   warnIfNotInitialized("Router.route()");
-  return Node$Xote.signalFragment(Computed$Xote.make(() => {
+  return View$Xote.signalFragment(Computed$Xote.make(() => {
     let loc = Signal$Xote.get(getGlobalState().location);
     let params = Route$Xote.match(pattern, loc.pathname);
     if (typeof params !== "object") {
@@ -226,7 +227,7 @@ function route(pattern, render) {
 
 function routes(configs) {
   warnIfNotInitialized("Router.routes()");
-  return Node$Xote.signalFragment(Computed$Xote.make(() => {
+  return View$Xote.signalFragment(Computed$Xote.make(() => {
     let loc = Signal$Xote.get(getGlobalState().location);
     let matched = Stdlib_Array.findMap(configs, config => {
       let params = Route$Xote.match(config.pattern, loc.pathname);
@@ -252,53 +253,33 @@ function link(to, attrsOpt, childrenOpt, param) {
     ((_evt.preventDefault()));
     push(to, undefined, undefined, undefined);
   };
-  return Html$Xote.a(attrs.concat([Node$Xote.attr("href", addBasePath(to))]), [[
+  return Html$Xote.a(attrs.concat([View$Xote.attr("href", addBasePath(to))]), [[
       "click",
       handleClick
     ]], children, undefined);
 }
 
-function isReactiveProp(value) {
-  return (value && typeof value === 'object' && ('TAG' in value) && (value.TAG === 'Static' || value.TAG === 'Reactive'));
-}
-
-function convertAttrValue(key, value) {
-  if (isReactiveProp(value)) {
-    if (value.TAG === "Reactive") {
-      return Node$Xote.signalAttr(key, value._0);
-    } else {
-      return Node$Xote.attr(key, value._0);
-    }
-  } else if (typeof value === "function") {
-    return Node$Xote.computedAttr(key, value);
-  } else if (typeof value === "object") {
-    return Node$Xote.signalAttr(key, value);
-  } else {
-    return Node$Xote.attr(key, value);
-  }
-}
-
 function propsToAttrs(props) {
   let attrs = [];
   let v = props.class;
   if (v !== undefined) {
-    attrs.push(convertAttrValue("class", Primitive_option.valFromOption(v)));
+    attrs.push(RuntimeJsxProp$Xote.toStringAttr("class", Primitive_option.valFromOption(v)));
   }
   let v$1 = props.id;
   if (v$1 !== undefined) {
-    attrs.push(convertAttrValue("id", Primitive_option.valFromOption(v$1)));
+    attrs.push(RuntimeJsxProp$Xote.toStringAttr("id", Primitive_option.valFromOption(v$1)));
   }
   let v$2 = props.style;
   if (v$2 !== undefined) {
-    attrs.push(convertAttrValue("style", Primitive_option.valFromOption(v$2)));
+    attrs.push(RuntimeJsxProp$Xote.toStringAttr("style", Primitive_option.valFromOption(v$2)));
   }
   let v$3 = props.target;
   if (v$3 !== undefined) {
-    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$3)));
+    attrs.push(RuntimeJsxProp$Xote.toStringAttr("target", Primitive_option.valFromOption(v$3)));
   }
   let v$4 = props["aria-label"];
   if (v$4 !== undefined) {
-    attrs.push(convertAttrValue("aria-label", Primitive_option.valFromOption(v$4)));
+    attrs.push(RuntimeJsxProp$Xote.toStringAttr("aria-label", Primitive_option.valFromOption(v$4)));
   }
   return attrs;
 }
@@ -326,20 +307,27 @@ function make(props) {
       return handler(evt);
     }
   };
-  return Html$Xote.a(propsToAttrs(props).concat([Node$Xote.attr("href", addBasePath(props.to))]), [[
+  return Html$Xote.a(propsToAttrs(props).concat([View$Xote.attr("href", addBasePath(props.to))]), [[
       "click",
       handleClick
     ]], getChildren(props), undefined);
 }
 
 function jsxKeyed(props, key, param) {
-  return make(props);
+  if (key !== undefined) {
+    return {
+      TAG: "Keyed",
+      key: key,
+      identity: props,
+      child: make(props)
+    };
+  } else {
+    return make(props);
+  }
 }
 
 let Link = {
-  ReactiveProp: undefined,
-  isReactiveProp: isReactiveProp,
-  convertAttrValue: convertAttrValue,
+  Prop: undefined,
   propsToAttrs: propsToAttrs,
   getChildren: getChildren,
   make: make,

package/src/RuntimeAttr.res

@@ -0,0 +1,21 @@
+let booleanAttributes = [
+  "checked",
+  "disabled",
+  "required",
+  "readonly",
+  "multiple",
+  "aria-hidden",
+  "aria-expanded",
+  "aria-selected",
+  "draggable",
+  "hidden",
+  "contenteditable",
+  "spellcheck",
+  "autofocus",
+]
+
+let isBoolean = (key: string): bool => booleanAttributes->Array.includes(key)
+
+let boolToString = (value: bool): string => value ? "true" : "false"
+
+let shouldRenderBoolean = (value: string): bool => value == "true"

package/src/RuntimeAttr.res.mjs

@@ -0,0 +1,42 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+let booleanAttributes = [
+  "checked",
+  "disabled",
+  "required",
+  "readonly",
+  "multiple",
+  "aria-hidden",
+  "aria-expanded",
+  "aria-selected",
+  "draggable",
+  "hidden",
+  "contenteditable",
+  "spellcheck",
+  "autofocus"
+];
+
+function isBoolean(key) {
+  return booleanAttributes.includes(key);
+}
+
+function boolToString(value) {
+  if (value) {
+    return "true";
+  } else {
+    return "false";
+  }
+}
+
+function shouldRenderBoolean(value) {
+  return value === "true";
+}
+
+export {
+  booleanAttributes,
+  isBoolean,
+  boolToString,
+  shouldRenderBoolean,
+}
+/* No side effect */

package/src/RuntimeDom.res

@@ -0,0 +1,95 @@
+let svgNamespace = "http://www.w3.org/2000/svg"
+
+let svgTags = [
+  "svg",
+  "path",
+  "circle",
+  "ellipse",
+  "line",
+  "polygon",
+  "polyline",
+  "rect",
+  "g",
+  "defs",
+  "clipPath",
+  "mask",
+  "pattern",
+  "marker",
+  "symbol",
+  "use",
+  "text",
+  "tspan",
+  "image",
+  "foreignObject",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComposite",
+  "feFlood",
+  "feGaussianBlur",
+  "feMerge",
+  "feMergeNode",
+  "feOffset",
+  "animate",
+  "animateTransform",
+  "desc",
+  "title",
+  "metadata",
+]
+
+let svgTagSet: Dict.t<bool> = {
+  let d = Dict.make()
+  svgTags->Array.forEach(tag => d->Dict.set(tag, true))
+  d
+}
+
+let isSvgTag = (tag: string): bool => svgTagSet->Dict.get(tag)->Option.isSome
+
+@val @scope("document") external createElement: string => Dom.element = "createElement"
+@val @scope("document")
+external createElementNS: (string, string) => Dom.element = "createElementNS"
+@val @scope("document") external createTextNode: string => Dom.element = "createTextNode"
+@val @scope("document")
+external createDocumentFragment: unit => Dom.element = "createDocumentFragment"
+@val @scope("document") external createComment: string => Dom.element = "createComment"
+@val @scope("document")
+external getElementById: string => Nullable.t<Dom.element> = "getElementById"
+
+@get external getNextSibling: Dom.element => Nullable.t<Dom.element> = "nextSibling"
+@get external getFirstChild: Dom.element => Nullable.t<Dom.element> = "firstChild"
+@get external getParentNode: Dom.element => Nullable.t<Dom.element> = "parentNode"
+
+@send
+external addEventListener: (Dom.element, string, Dom.event => unit) => unit = "addEventListener"
+@send external appendChild: (Dom.element, Dom.element) => unit = "appendChild"
+@send external remove: Dom.element => unit = "remove"
+@send external setAttribute: (Dom.element, string, string) => unit = "setAttribute"
+@send external removeAttribute: (Dom.element, string) => unit = "removeAttribute"
+@send external replaceChild: (Dom.element, Dom.element, Dom.element) => unit = "replaceChild"
+@send external insertBefore: (Dom.element, Dom.element, Dom.element) => unit = "insertBefore"
+@set external setTextContent: (Dom.element, string) => unit = "textContent"
+@set external setInnerHTML: (Dom.element, string) => unit = "innerHTML"
+@set external setValue: (Dom.element, string) => unit = "value"
+@set external setChecked: (Dom.element, bool) => unit = "checked"
+@set external setDisabled: (Dom.element, bool) => unit = "disabled"
+
+let createElementForTag = (tag: string): Dom.element =>
+  isSvgTag(tag) ? createElementNS(svgNamespace, tag) : createElement(tag)
+
+let setAttrOrProp = (el: Dom.element, key: string, value: string): unit => {
+  switch key {
+  | "value" => setValue(el, value)
+  | "checked" => setChecked(el, value == "true")
+  | "disabled" => setDisabled(el, value == "true")
+  | _ if RuntimeAttr.isBoolean(key) =>
+    if RuntimeAttr.shouldRenderBoolean(value) {
+      setAttribute(el, key, "")
+    } else {
+      removeAttribute(el, key)
+    }
+  | _ => setAttribute(el, key, value)
+  }
+}

package/src/RuntimeDom.res.mjs

@@ -0,0 +1,101 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as RuntimeAttr$Xote from "./RuntimeAttr.res.mjs";
+
+let svgNamespace = "http://www.w3.org/2000/svg";
+
+let svgTags = [
+  "svg",
+  "path",
+  "circle",
+  "ellipse",
+  "line",
+  "polygon",
+  "polyline",
+  "rect",
+  "g",
+  "defs",
+  "clipPath",
+  "mask",
+  "pattern",
+  "marker",
+  "symbol",
+  "use",
+  "text",
+  "tspan",
+  "image",
+  "foreignObject",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "filter",
+  "feBlend",
+  "feColorMatrix",
+  "feComposite",
+  "feFlood",
+  "feGaussianBlur",
+  "feMerge",
+  "feMergeNode",
+  "feOffset",
+  "animate",
+  "animateTransform",
+  "desc",
+  "title",
+  "metadata"
+];
+
+let d = {};
+
+svgTags.forEach(tag => {
+  d[tag] = true;
+});
+
+function isSvgTag(tag) {
+  return Stdlib_Option.isSome(d[tag]);
+}
+
+function createElementForTag(tag) {
+  if (Stdlib_Option.isSome(d[tag])) {
+    return document.createElementNS(svgNamespace, tag);
+  } else {
+    return document.createElement(tag);
+  }
+}
+
+function setAttrOrProp(el, key, value) {
+  switch (key) {
+    case "checked" :
+      el.checked = value === "true";
+      return;
+    case "disabled" :
+      el.disabled = value === "true";
+      return;
+    case "value" :
+      el.value = value;
+      return;
+    default:
+      if (RuntimeAttr$Xote.isBoolean(key)) {
+        if (RuntimeAttr$Xote.shouldRenderBoolean(value)) {
+          el.setAttribute(key, "");
+        } else {
+          el.removeAttribute(key);
+        }
+      } else {
+        el.setAttribute(key, value);
+      }
+      return;
+  }
+}
+
+let svgTagSet = d;
+
+export {
+  svgNamespace,
+  svgTags,
+  svgTagSet,
+  isSvgTag,
+  createElementForTag,
+  setAttrOrProp,
+}
+/*  Not a pure module */

package/src/RuntimeHtml.res

@@ -0,0 +1,27 @@
+let escape = (str: string): string => {
+  str
+  ->String.replaceAll("&", "&")
+  ->String.replaceAll("<", "&lt;")
+  ->String.replaceAll(">", "&gt;")
+  ->String.replaceAll("\"", "&quot;")
+  ->String.replaceAll("'", "&#x27;")
+}
+
+let voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]
+
+let isVoidElement = (tag: string): bool => voidElements->Array.includes(tag)

package/src/RuntimeHtml.res.mjs

@@ -0,0 +1,34 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function escape(str) {
+  return str.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#x27;");
+}
+
+let voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+
+function isVoidElement(tag) {
+  return voidElements.includes(tag);
+}
+
+export {
+  escape,
+  voidElements,
+  isVoidElement,
+}
+/* No side effect */

package/src/RuntimeHydrationMarkers.res

@@ -0,0 +1,24 @@
+let signalTextStart = "<!--$-->"
+let signalTextEnd = "<!--/$-->"
+let signalTextStartContent = "$"
+let signalTextEndContent = "/$"
+
+let signalFragmentStart = "<!--#-->"
+let signalFragmentEnd = "<!--/#-->"
+let signalFragmentStartContent = "#"
+let signalFragmentEndContent = "/#"
+
+let keyedListStart = "<!--kl-->"
+let keyedListEnd = "<!--/kl-->"
+let keyedListStartContent = "kl"
+let keyedListEndContent = "/kl"
+
+let keyedItemPrefixContent = "k:"
+let keyedItemStart = (key: string): string => `<!--${keyedItemPrefixContent}${key}-->`
+let keyedItemEnd = "<!--/k-->"
+let keyedItemEndContent = "/k"
+
+let lazyComponentStart = "<!--lc-->"
+let lazyComponentEnd = "<!--/lc-->"
+let lazyComponentStartContent = "lc"
+let lazyComponentEndContent = "/lc"