xote 6.0.1 → 6.1.1

package/src/XoteJSX.res

@@ -11,8 +11,9 @@ type componentLike<'props, 'return> = 'props => 'return
  * This ensures component functions (which may create effects/computeds) are not
  * evaluated during a Computed context, which would incorrectly track their
  * dependencies as belonging to the outer computed. */
-let jsx = (component: component<'props>, props: 'props): element =>
-  Node.LazyComponent(() => component(props))
+let jsx = (component: component<'props>, props: 'props): element => Node.LazyComponent(
+  () => component(props),
+)
 
 let jsxs = jsx
 
@@ -79,11 +80,20 @@ module Elements = {
     'ariaHidden,
     'ariaExpanded,
     'ariaSelected,
+    'draggable,
+    'hidden,
+    'title,
+    'contentEditable,
+    'spellcheck,
+    'autofocus,
+    'action,
+    'method,
   > = {
     /* Standard attributes - accept raw strings or ReactiveProp.t<string> */
     id?: 'id,
     class?: 'class,
     style?: 'style,
+    title?: 'title,
     /* Form/Input attributes */
     @as("type") type_?: 'typ,
     name?: 'name,
@@ -104,6 +114,9 @@ module Elements = {
     accept?: 'accept,
     rows?: int,
     cols?: int,
+    autofocus?: 'autofocus,
+    action?: 'action,
+    method?: 'method,
     /* Label attributes */
     @as("for") for_?: 'forAttr,
     /* Link attributes */
@@ -114,6 +127,11 @@ module Elements = {
     alt?: 'alt,
     width?: 'width,
     height?: 'height,
+    /* Global attributes */
+    draggable?: 'draggable,
+    hidden?: 'hidden,
+    contentEditable?: 'contentEditable,
+    spellcheck?: 'spellcheck,
     /* Accessibility attributes */
     role?: 'role,
     tabIndex?: int,
@@ -138,6 +156,14 @@ module Elements = {
     onMouseMove?: Dom.event => unit,
     onMouseUp?: Dom.event => unit,
     onContextMenu?: Dom.event => unit,
+    /* Drag-and-drop event handlers */
+    onDrag?: Dom.event => unit,
+    onDragStart?: Dom.event => unit,
+    onDragEnd?: Dom.event => unit,
+    onDragOver?: Dom.event => unit,
+    onDragEnter?: Dom.event => unit,
+    onDragLeave?: Dom.event => unit,
+    onDrop?: Dom.event => unit,
     /* Children */
     children?: element,
   }
@@ -217,46 +243,14 @@ module Elements = {
   }
 
   /* Convert props to attrs array */
-  let propsToAttrs = (
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-  ): array<(string, Node.attrValue)> => {
+  let propsToAttrs = (props): array<(string, Node.attrValue)> => {
     let attrs = []
 
     /* Standard attributes */
     addAttr(attrs, props.id, "id", convertAttrValue)
     addAttr(attrs, props.class, "class", convertAttrValue)
     addAttr(attrs, props.style, "style", convertAttrValue)
+    addAttr(attrs, props.title, "title", convertAttrValue)
 
     /* Form/Input attributes */
     addAttr(attrs, props.type_, "type", convertAttrValue)
@@ -278,6 +272,9 @@ module Elements = {
     addAttr(attrs, props.accept, "accept", convertAttrValue)
     addIntAttr(attrs, props.rows, "rows")
     addIntAttr(attrs, props.cols, "cols")
+    addAttr(attrs, props.autofocus, "autofocus", convertBoolAttrValue)
+    addAttr(attrs, props.action, "action", convertAttrValue)
+    addAttr(attrs, props.method, "method", convertAttrValue)
 
     /* Label attributes */
     addAttr(attrs, props.for_, "for", convertAttrValue)
@@ -292,6 +289,12 @@ module Elements = {
     addAttr(attrs, props.width, "width", convertAttrValue)
     addAttr(attrs, props.height, "height", convertAttrValue)
 
+    /* Global attributes */
+    addAttr(attrs, props.draggable, "draggable", convertBoolAttrValue)
+    addAttr(attrs, props.hidden, "hidden", convertBoolAttrValue)
+    addAttr(attrs, props.contentEditable, "contenteditable", convertBoolAttrValue)
+    addAttr(attrs, props.spellcheck, "spellcheck", convertBoolAttrValue)
+
     /* Accessibility attributes */
     addAttr(attrs, props.role, "role", convertAttrValue)
     addIntAttr(attrs, props.tabIndex, "tabindex")
@@ -324,40 +327,7 @@ module Elements = {
   }
 
   /* Convert props to events array */
-  let propsToEvents = (
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-  ): array<(string, Dom.event => unit)> => {
+  let propsToEvents = (props): array<(string, Dom.event => unit)> => {
     let events = []
 
     addEvent(events, props.onClick, "click")
@@ -374,45 +344,19 @@ module Elements = {
     addEvent(events, props.onMouseMove, "mousemove")
     addEvent(events, props.onMouseUp, "mouseup")
     addEvent(events, props.onContextMenu, "contextmenu")
+    addEvent(events, props.onDrag, "drag")
+    addEvent(events, props.onDragStart, "dragstart")
+    addEvent(events, props.onDragEnd, "dragend")
+    addEvent(events, props.onDragOver, "dragover")
+    addEvent(events, props.onDragEnter, "dragenter")
+    addEvent(events, props.onDragLeave, "dragleave")
+    addEvent(events, props.onDrop, "drop")
 
     events
   }
 
   /* Extract children from props */
-  let getChildren = (
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-  ): array<element> => {
+  let getChildren = (props): array<element> => {
     switch props.children {
     | Some(Fragment(children)) => children
     | Some(child) => [child]
@@ -421,41 +365,7 @@ module Elements = {
   }
 
   /* Create an element from a tag string and props */
-  let createElement = (
-    tag: string,
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-  ): element => {
+  let createElement = (tag: string, props): element => {
     Node.Element({
       tag,
       attrs: propsToAttrs(props),
@@ -465,81 +375,11 @@ module Elements = {
   }
 
   /* JSX functions for HTML elements - all delegate to createElement */
-  let jsx = (
-    tag: string,
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-  ): element => createElement(tag, props)
+  let jsx = (tag: string, props): element => createElement(tag, props)
 
   let jsxs = jsx
 
-  let jsxKeyed = (
-    tag: string,
-    props: props<
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-      _,
-    >,
-    ~key: option<string>=?,
-    _: unit,
-  ): element => {
+  let jsxKeyed = (tag: string, props, ~key: option<string>=?, _: unit): element => {
     let _ = key
     jsx(tag, props)
   }

package/src/XoteJSX.res.mjs

@@ -66,7 +66,7 @@ function convertBoolAttrValue(key, value) {
       } else {
         return "false";
       }
-    }, undefined);
+    }, undefined, undefined);
     return Node$Xote.signalAttr(key, strSignal);
   }
   if (typeof value === "function") {
@@ -87,7 +87,7 @@ function convertBoolAttrValue(key, value) {
     } else {
       return "false";
     }
-  }, undefined);
+  }, undefined, undefined);
   return Node$Xote.signalAttr(key, strSignal$1);
 }
 
@@ -110,6 +110,7 @@ function propsToAttrs(props) {
   addAttr(attrs, props.id, "id", convertAttrValue);
   addAttr(attrs, props.class, "class", convertAttrValue);
   addAttr(attrs, props.style, "style", convertAttrValue);
+  addAttr(attrs, props.title, "title", convertAttrValue);
   addAttr(attrs, props.type, "type", convertAttrValue);
   addAttr(attrs, props.name, "name", convertAttrValue);
   addAttr(attrs, props.value, "value", convertAttrValue);
@@ -129,6 +130,9 @@ function propsToAttrs(props) {
   addAttr(attrs, props.accept, "accept", convertAttrValue);
   addIntAttr(attrs, props.rows, "rows");
   addIntAttr(attrs, props.cols, "cols");
+  addAttr(attrs, props.autofocus, "autofocus", convertBoolAttrValue);
+  addAttr(attrs, props.action, "action", convertAttrValue);
+  addAttr(attrs, props.method, "method", convertAttrValue);
   addAttr(attrs, props.for, "for", convertAttrValue);
   addAttr(attrs, props.href, "href", convertAttrValue);
   addAttr(attrs, props.target, "target", convertAttrValue);
@@ -136,6 +140,10 @@ function propsToAttrs(props) {
   addAttr(attrs, props.alt, "alt", convertAttrValue);
   addAttr(attrs, props.width, "width", convertAttrValue);
   addAttr(attrs, props.height, "height", convertAttrValue);
+  addAttr(attrs, props.draggable, "draggable", convertBoolAttrValue);
+  addAttr(attrs, props.hidden, "hidden", convertBoolAttrValue);
+  addAttr(attrs, props.contentEditable, "contenteditable", convertBoolAttrValue);
+  addAttr(attrs, props.spellcheck, "spellcheck", convertBoolAttrValue);
   addAttr(attrs, props.role, "role", convertAttrValue);
   addIntAttr(attrs, props.tabIndex, "tabindex");
   addAttr(attrs, props["aria-label"], "aria-label", convertAttrValue);
@@ -177,6 +185,13 @@ function propsToEvents(props) {
   addEvent(events, props.onMouseMove, "mousemove");
   addEvent(events, props.onMouseUp, "mouseup");
   addEvent(events, props.onContextMenu, "contextmenu");
+  addEvent(events, props.onDrag, "drag");
+  addEvent(events, props.onDragStart, "dragstart");
+  addEvent(events, props.onDragEnd, "dragend");
+  addEvent(events, props.onDragOver, "dragover");
+  addEvent(events, props.onDragEnter, "dragenter");
+  addEvent(events, props.onDragLeave, "dragleave");
+  addEvent(events, props.onDrop, "drop");
   return events;
 }