xote 6.3.0 → 7.0.0-beta.1

package/src/View.res.mjs

@@ -1,5 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
+import * as Core__Type from "@rescript/core/src/Core__Type.res.mjs";
+import * as Core__Array from "@rescript/core/src/Core__Array.res.mjs";
 import * as Effect$Xote from "./Effect.res.mjs";
 import * as Signal$Xote from "./Signal.res.mjs";
 import * as Stdlib_Dict from "@rescript/runtime/lib/es6/Stdlib_Dict.js";
@@ -8,6 +10,7 @@ import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
 import * as RuntimeDom$Xote from "./RuntimeDom.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
 import * as RuntimeOwner$Xote from "./RuntimeOwner.res.mjs";
+import * as RuntimeValue$Xote from "./RuntimeValue.res.mjs";
 
 function $$static(key, value) {
   return [
@@ -56,25 +59,37 @@ function disposeElement(el) {
   if (owner !== undefined) {
     RuntimeOwner$Xote.disposeOwner(owner);
   }
-  let childNodes = (Array.from(el.childNodes || []));
-  childNodes.forEach(disposeElement);
+  RuntimeDom$Xote.childNodesToArray(el).forEach(disposeElement);
 }
 
 function shallowEqualIdentity(a, b) {
   if (a === b) {
     return true;
   }
-  if (typeof a !== "object" || typeof b !== "object") {
+  let match = Core__Type.Classify.classify(a);
+  let match$1 = Core__Type.Classify.classify(b);
+  if (typeof match !== "object") {
     return false;
   }
-  let keysA = Object.keys(a);
-  let keysB = Object.keys(b);
+  if (match.TAG !== "Object") {
+    return false;
+  }
+  if (typeof match$1 !== "object") {
+    return false;
+  }
+  if (match$1.TAG !== "Object") {
+    return false;
+  }
+  let objB = match$1._0;
+  let objA = match._0;
+  let keysA = Object.keys(objA);
+  let keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) {
     return false;
   } else {
     return keysA.every(key => {
-      let match = a[key];
-      let match$1 = b[key];
+      let match = objA[key];
+      let match$1 = objB[key];
       if (match !== undefined && match$1 !== undefined) {
         return Primitive_option.valFromOption(match) === Primitive_option.valFromOption(match$1);
       } else {
@@ -91,22 +106,19 @@ function clearKeyedItems(keyedItems) {
 }
 
 function getKeyedChildren(children) {
-  let keyedChildren = [];
-  let allKeyed = {
-    contents: true
-  };
-  children.forEach(child => {
-    if (child.TAG !== "Keyed") {
-      allKeyed.contents = false;
-      return;
+  if (children.length === 0) {
+    return;
+  }
+  let keyedChildren = Core__Array.filterMap(children, child => {
+    if (child.TAG === "Keyed") {
+      return {
+        key: child.key,
+        identity: child.identity,
+        child: child.child
+      };
     }
-    keyedChildren.push({
-      key: child.key,
-      identity: child.identity,
-      child: child.child
-    });
   });
-  if (allKeyed.contents) {
+  if (keyedChildren.length === children.length) {
     return keyedChildren;
   }
 }
@@ -302,8 +314,7 @@ function render(_node) {
               reconcileKeyedChildren(keyedChildren, keyedItems, container);
             } else {
               clearKeyedItems(keyedItems);
-              let childNodes = (Array.from(container.childNodes || []));
-              childNodes.forEach(disposeElement);
+              RuntimeDom$Xote.childNodesToArray(container).forEach(disposeElement);
               container.innerHTML = "";
               children.forEach(child => {
                 let childEl = render(child);
@@ -502,6 +513,13 @@ function float(value) {
   };
 }
 
+function bool(value) {
+  return {
+    TAG: "Text",
+    _0: value ? "true" : "false"
+  };
+}
+
 function fragment(children) {
   return {
     TAG: "Fragment",
@@ -516,6 +534,18 @@ function signalFragment(signal) {
   };
 }
 
+function childrenToArray(child) {
+  if (child !== undefined) {
+    if (child.TAG === "Fragment") {
+      return child._0;
+    } else {
+      return [child];
+    }
+  } else {
+    return [];
+  }
+}
+
 function each(signal, renderItem) {
   let nodesSignal = Computed$Xote.make(() => Signal$Xote.get(signal).map(renderItem), undefined, undefined);
   return {
@@ -533,10 +563,151 @@ function eachWithKey(signal, keyFn, renderItem) {
   };
 }
 
+function make(props) {
+  let match = props.each;
+  let match$1 = props.by;
+  if (match.TAG === "Reactive") {
+    let signal = match._0;
+    if (match$1 !== undefined) {
+      return {
+        TAG: "KeyedList",
+        signal: signal,
+        keyFn: match$1,
+        renderItem: props.render
+      };
+    } else {
+      return each(signal, props.render);
+    }
+  }
+  let items = match._0;
+  if (match$1 !== undefined) {
+    return {
+      TAG: "Fragment",
+      _0: items.map(item => ({
+        TAG: "Keyed",
+        key: match$1(item),
+        identity: item,
+        child: props.render(item)
+      }))
+    };
+  } else {
+    return {
+      TAG: "Fragment",
+      _0: items.map(props.render)
+    };
+  }
+}
+
+let For = {
+  make: make
+};
+
+function make$1(props) {
+  let items = props.each;
+  if (items.TAG === "Reactive") {
+    return {
+      TAG: "KeyedList",
+      signal: items._0,
+      keyFn: props.by,
+      renderItem: props.render
+    };
+  } else {
+    return {
+      TAG: "Fragment",
+      _0: items._0.map(item => ({
+        TAG: "Keyed",
+        key: props.by(item),
+        identity: item,
+        child: props.render(item)
+      }))
+    };
+  }
+}
+
+let KeyedFor = {
+  make: make$1
+};
+
+function make$2(props) {
+  let signal = props.when_;
+  if (signal.TAG !== "Reactive") {
+    if (signal._0) {
+      return {
+        TAG: "Fragment",
+        _0: childrenToArray(props.children)
+      };
+    } else {
+      return {
+        TAG: "Fragment",
+        _0: childrenToArray(props.fallback)
+      };
+    }
+  }
+  let signal$1 = signal._0;
+  return {
+    TAG: "SignalFragment",
+    _0: Computed$Xote.make(() => {
+      if (Signal$Xote.get(signal$1)) {
+        return childrenToArray(props.children);
+      } else {
+        return childrenToArray(props.fallback);
+      }
+    }, undefined, undefined)
+  };
+}
+
+let Show = {
+  make: make$2
+};
+
+function renderValue(props, value) {
+  if (value !== undefined) {
+    return [props.render(Primitive_option.valFromOption(value))];
+  } else {
+    return childrenToArray(props.fallback);
+  }
+}
+
+function make$3(props) {
+  let value = props.value;
+  if (value.TAG !== "Reactive") {
+    return {
+      TAG: "Fragment",
+      _0: renderValue(props, value._0)
+    };
+  }
+  let signal = value._0;
+  return {
+    TAG: "SignalFragment",
+    _0: Computed$Xote.make(() => renderValue(props, Signal$Xote.get(signal)), undefined, undefined)
+  };
+}
+
+let Maybe = {
+  renderValue: renderValue,
+  make: make$3
+};
+
+function make$4(props) {
+  let value = props.value;
+  if (value.TAG !== "Reactive") {
+    return props.render(value._0);
+  }
+  let signal = value._0;
+  return {
+    TAG: "SignalFragment",
+    _0: Computed$Xote.make(() => [props.render(Signal$Xote.get(signal))], undefined, undefined)
+  };
+}
+
+let Value = {
+  make: make$4
+};
+
 function element(tag, attrsOpt, eventsOpt, childrenOpt, param) {
-  let attrs = attrsOpt !== undefined ? attrsOpt : [].map(x => x);
-  let events = eventsOpt !== undefined ? eventsOpt : [].map(x => x);
-  let children = childrenOpt !== undefined ? childrenOpt : [].map(x => x);
+  let attrs = attrsOpt !== undefined ? attrsOpt : [];
+  let events = eventsOpt !== undefined ? eventsOpt : [];
+  let children = childrenOpt !== undefined ? childrenOpt : [];
   return {
     TAG: "Element",
     tag: tag,
@@ -568,25 +739,119 @@ function mountById(node, containerId) {
   }
 }
 
+function valuePrimitive(value, stringify) {
+  if (RuntimeValue$Xote.isReactiveProp(value)) {
+    if (value.TAG !== "Reactive") {
+      return {
+        TAG: "Text",
+        _0: stringify(value._0)
+      };
+    }
+    let signal = value._0;
+    return {
+      TAG: "SignalText",
+      _0: Computed$Xote.make(() => stringify(Signal$Xote.get(signal)), undefined, undefined)
+    };
+  }
+  let match = Core__Type.Classify.classify(value);
+  if (typeof match !== "object") {
+    return {
+      TAG: "Text",
+      _0: ""
+    };
+  }
+  switch (match.TAG) {
+    case "Object" :
+      return {
+        TAG: "SignalText",
+        _0: Computed$Xote.make(() => stringify(Signal$Xote.get(value)), undefined, undefined)
+      };
+    case "Function" :
+      return signalText(() => stringify(value()));
+    default:
+      return {
+        TAG: "Text",
+        _0: stringify(value)
+      };
+  }
+}
+
+function renderValuePrimitiveProps(props, stringify) {
+  let match = RuntimeValue$Xote.getField(props, "children");
+  let match$1 = RuntimeValue$Xote.getField(props, "value");
+  if (match !== undefined) {
+    return valuePrimitive(Primitive_option.valFromOption(match), stringify);
+  } else if (match$1 !== undefined) {
+    return valuePrimitive(Primitive_option.valFromOption(match$1), stringify);
+  } else {
+    return {
+      TAG: "Text",
+      _0: ""
+    };
+  }
+}
+
+function make$5(props) {
+  return renderValuePrimitiveProps(props, value => value);
+}
+
+let Text = {
+  make: make$5
+};
+
+function make$6(props) {
+  return renderValuePrimitiveProps(props, value => value.toString());
+}
+
+let Int = {
+  make: make$6
+};
+
+function make$7(props) {
+  return renderValuePrimitiveProps(props, value => value.toString());
+}
+
+let Float = {
+  make: make$7
+};
+
+function toString(value) {
+  if (value) {
+    return "true";
+  } else {
+    return "false";
+  }
+}
+
+function make$8(props) {
+  return renderValuePrimitiveProps(props, toString);
+}
+
+let Bool = {
+  toString: toString,
+  make: make$8
+};
+
 let DOM;
 
 let Reactivity;
 
+let Core;
+
 let attr = $$static;
 
 let signalAttr = signal;
 
 let computedAttr = computed;
 
-let list = each;
-
-let keyedList = eachWithKey;
-
 let empty = $$null;
 
+let isReactiveProp = RuntimeValue$Xote.isReactiveProp;
+
 export {
   DOM,
   Reactivity,
+  Core,
   Attributes,
   attr,
   signalAttr,
@@ -599,16 +864,28 @@ export {
   signalFloat,
   int,
   float,
+  bool,
   fragment,
   signalFragment,
+  childrenToArray,
   each,
-  list,
   eachWithKey,
-  keyedList,
+  For,
+  KeyedFor,
+  Show,
+  Maybe,
+  Value,
   element,
   $$null,
   empty,
   mount,
   mountById,
+  isReactiveProp,
+  valuePrimitive,
+  renderValuePrimitiveProps,
+  Text,
+  Int,
+  Float,
+  Bool,
 }
 /* RuntimeDom-Xote Not a pure module */

package/src/XoteJSX.res

@@ -90,6 +90,70 @@ module Elements = {
     'autofocus,
     'action,
     'method,
+    /* SVG props */
+    'xmlns,
+    'xmlnsXlink,
+    'version,
+    'viewBox,
+    'preserveAspectRatio,
+    'd,
+    'pathLength,
+    'cx,
+    'cy,
+    'r,
+    'rx,
+    'ry,
+    'x,
+    'y,
+    'x1,
+    'y1,
+    'x2,
+    'y2,
+    'fx,
+    'fy,
+    'dx,
+    'dy,
+    'points,
+    'transform,
+    'transformOrigin,
+    'fill,
+    'fillOpacity,
+    'fillRule,
+    'stroke,
+    'strokeWidth,
+    'strokeLinecap,
+    'strokeLinejoin,
+    'strokeDasharray,
+    'strokeDashoffset,
+    'strokeOpacity,
+    'strokeMiterlimit,
+    'opacity,
+    'color,
+    'visibility,
+    'vectorEffect,
+    'pointerEvents,
+    'clipPath,
+    'clipRule,
+    'mask,
+    'filter,
+    'textAnchor,
+    'dominantBaseline,
+    'fontFamily,
+    'fontSize,
+    'fontWeight,
+    'letterSpacing,
+    'wordSpacing,
+    'textDecoration,
+    'offset,
+    'stopColor,
+    'stopOpacity,
+    'gradientUnits,
+    'gradientTransform,
+    'spreadMethod,
+    'markerStart,
+    'markerMid,
+    'markerEnd,
+    'xlinkHref,
   > = {
     /* Standard attributes - accept raw strings or Prop.t<string> */
     id?: 'id,
@@ -143,6 +207,77 @@ module Elements = {
     @as("aria-selected") ariaSelected?: 'ariaSelected,
     /* Data attributes */
     data?: Obj.t,
+    /* SVG attributes - root */
+    xmlns?: 'xmlns,
+    @as("xmlns:xlink") xmlnsXlink?: 'xmlnsXlink,
+    version?: 'version,
+    viewBox?: 'viewBox,
+    preserveAspectRatio?: 'preserveAspectRatio,
+    /* SVG attributes - path/shape geometry */
+    d?: 'd,
+    pathLength?: 'pathLength,
+    cx?: 'cx,
+    cy?: 'cy,
+    r?: 'r,
+    rx?: 'rx,
+    ry?: 'ry,
+    x?: 'x,
+    y?: 'y,
+    x1?: 'x1,
+    y1?: 'y1,
+    x2?: 'x2,
+    y2?: 'y2,
+    fx?: 'fx,
+    fy?: 'fy,
+    dx?: 'dx,
+    dy?: 'dy,
+    points?: 'points,
+    transform?: 'transform,
+    @as("transform-origin") transformOrigin?: 'transformOrigin,
+    /* SVG attributes - presentation */
+    fill?: 'fill,
+    @as("fill-opacity") fillOpacity?: 'fillOpacity,
+    @as("fill-rule") fillRule?: 'fillRule,
+    stroke?: 'stroke,
+    @as("stroke-width") strokeWidth?: 'strokeWidth,
+    @as("stroke-linecap") strokeLinecap?: 'strokeLinecap,
+    @as("stroke-linejoin") strokeLinejoin?: 'strokeLinejoin,
+    @as("stroke-dasharray") strokeDasharray?: 'strokeDasharray,
+    @as("stroke-dashoffset") strokeDashoffset?: 'strokeDashoffset,
+    @as("stroke-opacity") strokeOpacity?: 'strokeOpacity,
+    @as("stroke-miterlimit") strokeMiterlimit?: 'strokeMiterlimit,
+    opacity?: 'opacity,
+    color?: 'color,
+    visibility?: 'visibility,
+    @as("vector-effect") vectorEffect?: 'vectorEffect,
+    @as("pointer-events") pointerEvents?: 'pointerEvents,
+    /* SVG attributes - clipping/masking/filter */
+    @as("clip-path") clipPath?: 'clipPath,
+    @as("clip-rule") clipRule?: 'clipRule,
+    mask?: 'mask,
+    filter?: 'filter,
+    /* SVG attributes - text */
+    @as("text-anchor") textAnchor?: 'textAnchor,
+    @as("dominant-baseline") dominantBaseline?: 'dominantBaseline,
+    @as("font-family") fontFamily?: 'fontFamily,
+    @as("font-size") fontSize?: 'fontSize,
+    @as("font-weight") fontWeight?: 'fontWeight,
+    @as("letter-spacing") letterSpacing?: 'letterSpacing,
+    @as("word-spacing") wordSpacing?: 'wordSpacing,
+    @as("text-decoration") textDecoration?: 'textDecoration,
+    /* SVG attributes - gradient/stop */
+    offset?: 'offset,
+    @as("stop-color") stopColor?: 'stopColor,
+    @as("stop-opacity") stopOpacity?: 'stopOpacity,
+    gradientUnits?: 'gradientUnits,
+    gradientTransform?: 'gradientTransform,
+    spreadMethod?: 'spreadMethod,
+    /* SVG attributes - markers */
+    @as("marker-start") markerStart?: 'markerStart,
+    @as("marker-mid") markerMid?: 'markerMid,
+    @as("marker-end") markerEnd?: 'markerEnd,
+    /* SVG attributes - xlink (legacy) */
+    @as("xlink:href") xlinkHref?: 'xlinkHref,
     /* Event handlers */
     onClick?: Dom.event => unit,
     onInput?: Dom.event => unit,
@@ -258,6 +393,85 @@ module Elements = {
     addAttr(attrs, props.ariaExpanded, "aria-expanded", RuntimeJsxProp.toBoolAttr)
     addAttr(attrs, props.ariaSelected, "aria-selected", RuntimeJsxProp.toBoolAttr)
 
+    /* SVG attributes - root */
+    addAttr(attrs, props.xmlns, "xmlns", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.xmlnsXlink, "xmlns:xlink", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.version, "version", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.viewBox, "viewBox", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.preserveAspectRatio, "preserveAspectRatio", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - geometry */
+    addAttr(attrs, props.d, "d", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.pathLength, "pathLength", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.cx, "cx", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.cy, "cy", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.r, "r", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.rx, "rx", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.ry, "ry", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.x, "x", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.y, "y", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.x1, "x1", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.y1, "y1", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.x2, "x2", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.y2, "y2", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fx, "fx", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fy, "fy", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.dx, "dx", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.dy, "dy", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.points, "points", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.transform, "transform", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.transformOrigin, "transform-origin", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - presentation */
+    addAttr(attrs, props.fill, "fill", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fillOpacity, "fill-opacity", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fillRule, "fill-rule", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.stroke, "stroke", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeWidth, "stroke-width", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeLinecap, "stroke-linecap", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeLinejoin, "stroke-linejoin", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeDasharray, "stroke-dasharray", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeDashoffset, "stroke-dashoffset", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeOpacity, "stroke-opacity", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.strokeMiterlimit, "stroke-miterlimit", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.opacity, "opacity", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.color, "color", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.visibility, "visibility", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.vectorEffect, "vector-effect", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.pointerEvents, "pointer-events", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - clipping/masking/filter */
+    addAttr(attrs, props.clipPath, "clip-path", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.clipRule, "clip-rule", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.mask, "mask", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.filter, "filter", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - text */
+    addAttr(attrs, props.textAnchor, "text-anchor", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.dominantBaseline, "dominant-baseline", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fontFamily, "font-family", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fontSize, "font-size", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.fontWeight, "font-weight", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.letterSpacing, "letter-spacing", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.wordSpacing, "word-spacing", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.textDecoration, "text-decoration", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - gradient/stop */
+    addAttr(attrs, props.offset, "offset", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.stopColor, "stop-color", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.stopOpacity, "stop-opacity", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.gradientUnits, "gradientUnits", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.gradientTransform, "gradientTransform", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.spreadMethod, "spreadMethod", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - markers */
+    addAttr(attrs, props.markerStart, "marker-start", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.markerMid, "marker-mid", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.markerEnd, "marker-end", RuntimeJsxProp.toStringAttr)
+
+    /* SVG attributes - xlink (legacy) */
+    addAttr(attrs, props.xlinkHref, "xlink:href", RuntimeJsxProp.toStringAttr)
+
     /* Data attributes */
     switch props.data {
     | Some(dataObj) => {