xote 4.4.1 → 4.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xote",
-  "version": "4.4.1",
+  "version": "4.4.2",
   "repository": {
     "url": "https://github.com/brnrdog/xote"
   },

package/src/Xote__JSX.res

@@ -65,6 +65,7 @@ module Elements = {
 
   /* Props type for HTML elements - supports common attributes and events
    * String-like attributes use polymorphic types to accept strings, signals, or computed functions
+   * Boolean attributes also use polymorphic types to accept bools, signals, or computed functions
    */
   type props<
     'id,
@@ -89,6 +90,14 @@ module Elements = {
     'height,
     'role,
     'ariaLabel,
+    'disabled,
+    'checked,
+    'required,
+    'readOnly,
+    'multiple,
+    'ariaHidden,
+    'ariaExpanded,
+    'ariaSelected,
   > = {
     /* Standard attributes - can be static strings, signals, or computed values */
     id?: 'id,
@@ -99,10 +108,10 @@ module Elements = {
     name?: 'name,
     value?: 'value,
     placeholder?: 'placeholder,
-    disabled?: bool,
-    checked?: bool,
-    required?: bool,
-    readOnly?: bool,
+    disabled?: 'disabled,
+    checked?: 'checked,
+    required?: 'required,
+    readOnly?: 'readOnly,
     maxLength?: int,
     minLength?: int,
     min?: 'min,
@@ -110,7 +119,7 @@ module Elements = {
     step?: 'step,
     pattern?: 'pattern,
     autoComplete?: 'autoComplete,
-    multiple?: bool,
+    multiple?: 'multiple,
     accept?: 'accept,
     rows?: int,
     cols?: int,
@@ -128,9 +137,9 @@ module Elements = {
     role?: 'role,
     tabIndex?: int,
     @as("aria-label") ariaLabel?: 'ariaLabel,
-    @as("aria-hidden") ariaHidden?: bool,
-    @as("aria-expanded") ariaExpanded?: bool,
-    @as("aria-selected") ariaSelected?: bool,
+    @as("aria-hidden") ariaHidden?: 'ariaHidden,
+    @as("aria-expanded") ariaExpanded?: 'ariaExpanded,
+    @as("aria-selected") ariaSelected?: 'ariaSelected,
     /* Data attributes */
     data?: Obj.t,
     /* Event handlers */
@@ -169,6 +178,26 @@ module Elements = {
     }
   }
 
+  /* Helper to convert boolean attribute values (static bool, signal, or computed) to Component.attrValue */
+  let convertBoolAttrValue = (key: string, value: 'a): (string, Component.attrValue) => {
+    // Check if it's a function (computed)
+    if typeof(value) == #function {
+      // It's a computed function that returns bool
+      let f: unit => bool = Obj.magic(value)
+      Component.computedAttr(key, () => f() ? "true" : "false")
+    } else if typeof(value) == #object && hasId(value)->Option.isSome {
+      // It's a signal of bool
+      let sig: Signal.t<bool> = Obj.magic(value)
+      // Create a computed signal that converts bool to string
+      let strSignal = Computed.make(() => Signal.get(sig) ? "true" : "false")
+      Component.signalAttr(key, strSignal)
+    } else {
+      // It's a static bool
+      let b: bool = Obj.magic(value)
+      Component.attr(key, b ? "true" : "false")
+    }
+  }
+
   /* Convert props to attrs array */
   let propsToAttrs = (
     props: props<
@@ -194,6 +223,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): array<(string, Component.attrValue)> => {
     let attrs = []
@@ -236,23 +273,23 @@ module Elements = {
     }
 
     switch props.disabled {
-    | Some(true) => attrs->Array.push(Component.attr("disabled", "true"))
-    | _ => ()
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("disabled", v))
+    | None => ()
     }
 
     switch props.checked {
-    | Some(true) => attrs->Array.push(Component.attr("checked", "true"))
-    | _ => ()
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("checked", v))
+    | None => ()
     }
 
     switch props.required {
-    | Some(true) => attrs->Array.push(Component.attr("required", "true"))
-    | _ => ()
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("required", v))
+    | None => ()
     }
 
     switch props.readOnly {
-    | Some(true) => attrs->Array.push(Component.attr("readonly", "true"))
-    | _ => ()
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("readonly", v))
+    | None => ()
     }
 
     switch props.maxLength {
@@ -291,8 +328,8 @@ module Elements = {
     }
 
     switch props.multiple {
-    | Some(true) => attrs->Array.push(Component.attr("multiple", "true"))
-    | _ => ()
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("multiple", v))
+    | None => ()
     }
 
     switch props.accept {
@@ -365,20 +402,17 @@ module Elements = {
     }
 
     switch props.ariaHidden {
-    | Some(true) => attrs->Array.push(Component.attr("aria-hidden", "true"))
-    | Some(false) => attrs->Array.push(Component.attr("aria-hidden", "false"))
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("aria-hidden", v))
     | None => ()
     }
 
     switch props.ariaExpanded {
-    | Some(true) => attrs->Array.push(Component.attr("aria-expanded", "true"))
-    | Some(false) => attrs->Array.push(Component.attr("aria-expanded", "false"))
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("aria-expanded", v))
     | None => ()
     }
 
     switch props.ariaSelected {
-    | Some(true) => attrs->Array.push(Component.attr("aria-selected", "true"))
-    | Some(false) => attrs->Array.push(Component.attr("aria-selected", "false"))
+    | Some(v) => attrs->Array.push(convertBoolAttrValue("aria-selected", v))
     | None => ()
     }
 
@@ -422,6 +456,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): array<(string, Dom.event => unit)> => {
     let events = []
@@ -504,6 +546,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): array<element> => {
     switch props.children {
@@ -539,6 +589,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): element => {
     Component.Element({
@@ -575,6 +633,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): element => createElement(tag, props)
 
@@ -603,6 +669,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
   ): element => createElement(tag, props)
 
@@ -631,6 +705,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
     ~key: option<string>=?,
     _: unit,
@@ -664,6 +746,14 @@ module Elements = {
       'height,
       'role,
       'ariaLabel,
+      'disabled,
+      'checked,
+      'required,
+      'readOnly,
+      'multiple,
+      'ariaHidden,
+      'ariaExpanded,
+      'ariaSelected,
     >,
     ~key: option<string>=?,
     _: unit,

package/src/Xote__JSX.res.mjs

@@ -1,5 +1,6 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
+import * as Signals from "rescript-signals/src/Signals.res.mjs";
 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";
@@ -53,6 +54,29 @@ function convertAttrValue(key, value) {
   }
 }
 
+function convertBoolAttrValue(key, value) {
+  if (typeof value === "function") {
+    return Xote__Component.computedAttr(key, () => {
+      if (value()) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+  }
+  if (!(typeof value === "object" && Core__Option.isSome(value.id))) {
+    return Xote__Component.attr(key, value ? "true" : "false");
+  }
+  let strSignal = Signals.Computed.make(() => {
+    if (Signals.Signal.get(value)) {
+      return "true";
+    } else {
+      return "false";
+    }
+  }, undefined);
+  return Xote__Component.signalAttr(key, strSignal);
+}
+
 function propsToAttrs(props) {
   let attrs = [];
   let v = props.id;
@@ -83,129 +107,117 @@ function propsToAttrs(props) {
   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;
+  let v$7 = props.disabled;
   if (v$7 !== undefined) {
-    attrs.push(Xote__Component.attr("maxlength", v$7.toString()));
+    attrs.push(convertBoolAttrValue("disabled", Primitive_option.valFromOption(v$7)));
   }
-  let v$8 = props.minLength;
+  let v$8 = props.checked;
   if (v$8 !== undefined) {
-    attrs.push(Xote__Component.attr("minlength", v$8.toString()));
+    attrs.push(convertBoolAttrValue("checked", Primitive_option.valFromOption(v$8)));
   }
-  let v$9 = props.min;
+  let v$9 = props.required;
   if (v$9 !== undefined) {
-    attrs.push(convertAttrValue("min", Primitive_option.valFromOption(v$9)));
+    attrs.push(convertBoolAttrValue("required", Primitive_option.valFromOption(v$9)));
   }
-  let v$10 = props.max;
+  let v$10 = props.readOnly;
   if (v$10 !== undefined) {
-    attrs.push(convertAttrValue("max", Primitive_option.valFromOption(v$10)));
+    attrs.push(convertBoolAttrValue("readonly", Primitive_option.valFromOption(v$10)));
   }
-  let v$11 = props.step;
+  let v$11 = props.maxLength;
   if (v$11 !== undefined) {
-    attrs.push(convertAttrValue("step", Primitive_option.valFromOption(v$11)));
+    attrs.push(Xote__Component.attr("maxlength", v$11.toString()));
   }
-  let v$12 = props.pattern;
+  let v$12 = props.minLength;
   if (v$12 !== undefined) {
-    attrs.push(convertAttrValue("pattern", Primitive_option.valFromOption(v$12)));
+    attrs.push(Xote__Component.attr("minlength", v$12.toString()));
   }
-  let v$13 = props.autoComplete;
+  let v$13 = props.min;
   if (v$13 !== undefined) {
-    attrs.push(convertAttrValue("autocomplete", Primitive_option.valFromOption(v$13)));
+    attrs.push(convertAttrValue("min", 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;
+  let v$14 = props.max;
   if (v$14 !== undefined) {
-    attrs.push(convertAttrValue("accept", Primitive_option.valFromOption(v$14)));
+    attrs.push(convertAttrValue("max", Primitive_option.valFromOption(v$14)));
   }
-  let v$15 = props.rows;
+  let v$15 = props.step;
   if (v$15 !== undefined) {
-    attrs.push(Xote__Component.attr("rows", v$15.toString()));
+    attrs.push(convertAttrValue("step", Primitive_option.valFromOption(v$15)));
   }
-  let v$16 = props.cols;
+  let v$16 = props.pattern;
   if (v$16 !== undefined) {
-    attrs.push(Xote__Component.attr("cols", v$16.toString()));
+    attrs.push(convertAttrValue("pattern", Primitive_option.valFromOption(v$16)));
   }
-  let v$17 = props.for;
+  let v$17 = props.autoComplete;
   if (v$17 !== undefined) {
-    attrs.push(convertAttrValue("for", Primitive_option.valFromOption(v$17)));
+    attrs.push(convertAttrValue("autocomplete", Primitive_option.valFromOption(v$17)));
   }
-  let v$18 = props.href;
+  let v$18 = props.multiple;
   if (v$18 !== undefined) {
-    attrs.push(convertAttrValue("href", Primitive_option.valFromOption(v$18)));
+    attrs.push(convertBoolAttrValue("multiple", Primitive_option.valFromOption(v$18)));
   }
-  let v$19 = props.target;
+  let v$19 = props.accept;
   if (v$19 !== undefined) {
-    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$19)));
+    attrs.push(convertAttrValue("accept", Primitive_option.valFromOption(v$19)));
   }
-  let v$20 = props.src;
+  let v$20 = props.rows;
   if (v$20 !== undefined) {
-    attrs.push(convertAttrValue("src", Primitive_option.valFromOption(v$20)));
+    attrs.push(Xote__Component.attr("rows", v$20.toString()));
   }
-  let v$21 = props.alt;
+  let v$21 = props.cols;
   if (v$21 !== undefined) {
-    attrs.push(convertAttrValue("alt", Primitive_option.valFromOption(v$21)));
+    attrs.push(Xote__Component.attr("cols", v$21.toString()));
   }
-  let v$22 = props.width;
+  let v$22 = props.for;
   if (v$22 !== undefined) {
-    attrs.push(convertAttrValue("width", Primitive_option.valFromOption(v$22)));
+    attrs.push(convertAttrValue("for", Primitive_option.valFromOption(v$22)));
   }
-  let v$23 = props.height;
+  let v$23 = props.href;
   if (v$23 !== undefined) {
-    attrs.push(convertAttrValue("height", Primitive_option.valFromOption(v$23)));
+    attrs.push(convertAttrValue("href", Primitive_option.valFromOption(v$23)));
   }
-  let v$24 = props.role;
+  let v$24 = props.target;
   if (v$24 !== undefined) {
-    attrs.push(convertAttrValue("role", Primitive_option.valFromOption(v$24)));
+    attrs.push(convertAttrValue("target", Primitive_option.valFromOption(v$24)));
   }
-  let v$25 = props.tabIndex;
+  let v$25 = props.src;
   if (v$25 !== undefined) {
-    attrs.push(Xote__Component.attr("tabindex", v$25.toString()));
+    attrs.push(convertAttrValue("src", Primitive_option.valFromOption(v$25)));
   }
-  let v$26 = props["aria-label"];
+  let v$26 = props.alt;
   if (v$26 !== undefined) {
-    attrs.push(convertAttrValue("aria-label", Primitive_option.valFromOption(v$26)));
+    attrs.push(convertAttrValue("alt", 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 v$27 = props.width;
+  if (v$27 !== undefined) {
+    attrs.push(convertAttrValue("width", Primitive_option.valFromOption(v$27)));
   }
-  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 v$28 = props.height;
+  if (v$28 !== undefined) {
+    attrs.push(convertAttrValue("height", Primitive_option.valFromOption(v$28)));
   }
-  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 v$29 = props.role;
+  if (v$29 !== undefined) {
+    attrs.push(convertAttrValue("role", Primitive_option.valFromOption(v$29)));
+  }
+  let v$30 = props.tabIndex;
+  if (v$30 !== undefined) {
+    attrs.push(Xote__Component.attr("tabindex", v$30.toString()));
+  }
+  let v$31 = props["aria-label"];
+  if (v$31 !== undefined) {
+    attrs.push(convertAttrValue("aria-label", Primitive_option.valFromOption(v$31)));
+  }
+  let v$32 = props["aria-hidden"];
+  if (v$32 !== undefined) {
+    attrs.push(convertBoolAttrValue("aria-hidden", Primitive_option.valFromOption(v$32)));
+  }
+  let v$33 = props["aria-expanded"];
+  if (v$33 !== undefined) {
+    attrs.push(convertBoolAttrValue("aria-expanded", Primitive_option.valFromOption(v$33)));
+  }
+  let v$34 = props["aria-selected"];
+  if (v$34 !== undefined) {
+    attrs.push(convertBoolAttrValue("aria-selected", Primitive_option.valFromOption(v$34)));
   }
   let _dataObj = props.data;
   if (_dataObj !== undefined) {
@@ -330,6 +342,7 @@ let Elements = {
   signal: signal,
   computed: computed,
   convertAttrValue: convertAttrValue,
+  convertBoolAttrValue: convertBoolAttrValue,
   propsToAttrs: propsToAttrs,
   propsToEvents: propsToEvents,
   getChildren: getChildren,
@@ -353,4 +366,4 @@ export {
   $$null,
   Elements,
 }
-/* Xote__Component Not a pure module */
+/* Signals Not a pure module */