xote 6.1.2 → 6.3.0

package/src/XoteJSX.res

@@ -1,7 +1,7 @@
-module ReactiveProp = ReactiveProp
+module Prop = Prop
 
 /* ReScript JSX transform type aliases */
-type element = Node.node
+type element = View.node
 
 type component<'props> = 'props => element
 
@@ -11,7 +11,7 @@ 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(
+let jsx = (component: component<'props>, props: 'props): element => View.LazyComponent(
   () => component(props),
 )
 
@@ -23,8 +23,10 @@ let jsxKeyed = (
   ~key: option<string>=?,
   _: unit,
 ): element => {
-  let _ = key /* TODO: Implement key support for list reconciliation */
-  jsx(component, props)
+  switch key {
+  | Some(key) => View.Keyed({key, identity: Obj.magic(props), child: jsx(component, props)})
+  | None => jsx(component, props)
+  }
 }
 
 let jsxsKeyed = jsxKeyed
@@ -35,19 +37,19 @@ type fragmentProps = {children?: element}
 let jsxFragment = (props: fragmentProps): element => {
   switch props.children {
   | Some(child) => child
-  | None => Node.fragment([])
+  | None => View.fragment([])
   }
 }
 
 /* Element converters for JSX expressions */
-let array = (children: array<element>): element => Node.fragment(children)
+let array = (children: array<element>): element => View.fragment(children)
 
-let null = (): element => Node.text("")
+let null = (): element => View.text("")
 
 /* Elements module for lowercase HTML tags */
 module Elements = {
-  /* Props type for HTML elements - accepts both raw values and ReactiveProp.t for flexibility
-   * This allows ergonomic JSX like class="foo" while also supporting class={ReactiveProp.reactive(signal)}
+  /* Props type for HTML elements - accepts both raw values and Prop.t for flexibility
+   * This allows ergonomic JSX like class="foo" while also supporting class={Prop.reactive(signal)}
    */
   type props<
     'id,
@@ -89,7 +91,7 @@ module Elements = {
     'action,
     'method,
   > = {
-    /* Standard attributes - accept raw strings or ReactiveProp.t<string> */
+    /* Standard attributes - accept raw strings or Prop.t<string> */
     id?: 'id,
     class?: 'class,
     style?: 'style,
@@ -156,6 +158,17 @@ module Elements = {
     onMouseMove?: Dom.event => unit,
     onMouseUp?: Dom.event => unit,
     onContextMenu?: Dom.event => unit,
+    /* Pointer event handlers */
+    onPointerDown?: Dom.event => unit,
+    onPointerMove?: Dom.event => unit,
+    onPointerUp?: Dom.event => unit,
+    onPointerCancel?: Dom.event => unit,
+    onPointerEnter?: Dom.event => unit,
+    onPointerLeave?: Dom.event => unit,
+    onPointerOver?: Dom.event => unit,
+    onPointerOut?: Dom.event => unit,
+    onGotPointerCapture?: Dom.event => unit,
+    onLostPointerCapture?: Dom.event => unit,
     /* Drag-and-drop event handlers */
     onDrag?: Dom.event => unit,
     onDragStart?: Dom.event => unit,
@@ -168,64 +181,6 @@ module Elements = {
     children?: element,
   }
 
-  /* Helper to detect if a value is a ReactiveProp variant (checks for Static/Reactive tags) */
-  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 (supports raw string, ReactiveProp, Signal, or computed function) */
-  let convertAttrValue = (key: string, value: 'a): (string, Node.attrValue) => {
-    if isReactiveProp(value) {
-      // It's a ReactiveProp variant - pattern match on it
-      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 {
-      // It's a computed function (for backward compatibility)
-      let f: unit => string = Obj.magic(value)
-      Node.computedAttr(key, f)
-    } else if typeof(value) == #object {
-      // It's a raw signal (for backward compatibility)
-      let sig: Signal.t<string> = Obj.magic(value)
-      Node.signalAttr(key, sig)
-    } else {
-      // It's a raw string
-      let s: string = Obj.magic(value)
-      Node.attr(key, s)
-    }
-  }
-
-  /* Helper to convert boolean attribute value (supports raw bool, ReactiveProp, Signal, or computed function) */
-  let convertBoolAttrValue = (key: string, value: 'a): (string, Node.attrValue) => {
-    if isReactiveProp(value) {
-      // It's a ReactiveProp variant - pattern match on it
-      let rp: ReactiveProp.t<bool> = Obj.magic(value)
-      switch rp {
-      | Static(b) => Node.attr(key, b ? "true" : "false")
-      | Reactive(signal) => {
-          let strSignal = Computed.make(() => Signal.get(signal) ? "true" : "false")
-          Node.signalAttr(key, strSignal)
-        }
-      }
-    } else if typeof(value) == #function {
-      // It's a computed function that returns bool (for backward compatibility)
-      let f: unit => bool = Obj.magic(value)
-      Node.computedAttr(key, () => f() ? "true" : "false")
-    } else if typeof(value) == #object {
-      // It's a raw signal (for backward compatibility)
-      let sig: Signal.t<bool> = Obj.magic(value)
-      let strSignal = Computed.make(() => Signal.get(sig) ? "true" : "false")
-      Node.signalAttr(key, strSignal)
-    } else {
-      // It's a raw bool
-      let b: bool = Obj.magic(value)
-      Node.attr(key, b ? "true" : "false")
-    }
-  }
-
   /* Helper to add optional attribute to attrs array */
   let addAttr = (attrs, opt, key, converter) => {
     switch opt {
@@ -237,80 +192,80 @@ module Elements = {
   /* Helper to add optional int attribute */
   let addIntAttr = (attrs, opt, key) => {
     switch opt {
-    | Some(v) => attrs->Array.push(Node.attr(key, Int.toString(v)))
+    | Some(v) => attrs->Array.push(View.attr(key, Int.toString(v)))
     | None => ()
     }
   }
 
   /* Convert props to attrs array */
-  let propsToAttrs = (props): array<(string, Node.attrValue)> => {
+  let propsToAttrs = (props): array<(string, View.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)
+    addAttr(attrs, props.id, "id", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.class, "class", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.style, "style", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.title, "title", RuntimeJsxProp.toStringAttr)
 
     /* Form/Input attributes */
-    addAttr(attrs, props.type_, "type", convertAttrValue)
-    addAttr(attrs, props.name, "name", convertAttrValue)
-    addAttr(attrs, props.value, "value", convertAttrValue)
-    addAttr(attrs, props.placeholder, "placeholder", convertAttrValue)
-    addAttr(attrs, props.disabled, "disabled", convertBoolAttrValue)
-    addAttr(attrs, props.checked, "checked", convertBoolAttrValue)
-    addAttr(attrs, props.required, "required", convertBoolAttrValue)
-    addAttr(attrs, props.readOnly, "readonly", convertBoolAttrValue)
+    addAttr(attrs, props.type_, "type", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.name, "name", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.value, "value", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.placeholder, "placeholder", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.disabled, "disabled", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.checked, "checked", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.required, "required", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.readOnly, "readonly", RuntimeJsxProp.toBoolAttr)
     addIntAttr(attrs, props.maxLength, "maxlength")
     addIntAttr(attrs, props.minLength, "minlength")
-    addAttr(attrs, props.min, "min", convertAttrValue)
-    addAttr(attrs, props.max, "max", convertAttrValue)
-    addAttr(attrs, props.step, "step", convertAttrValue)
-    addAttr(attrs, props.pattern, "pattern", convertAttrValue)
-    addAttr(attrs, props.autoComplete, "autocomplete", convertAttrValue)
-    addAttr(attrs, props.multiple, "multiple", convertBoolAttrValue)
-    addAttr(attrs, props.accept, "accept", convertAttrValue)
+    addAttr(attrs, props.min, "min", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.max, "max", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.step, "step", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.pattern, "pattern", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.autoComplete, "autocomplete", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.multiple, "multiple", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.accept, "accept", RuntimeJsxProp.toStringAttr)
     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.autofocus, "autofocus", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.action, "action", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.method, "method", RuntimeJsxProp.toStringAttr)
 
     /* Label attributes */
-    addAttr(attrs, props.for_, "for", convertAttrValue)
+    addAttr(attrs, props.for_, "for", RuntimeJsxProp.toStringAttr)
 
     /* Link attributes */
-    addAttr(attrs, props.href, "href", convertAttrValue)
-    addAttr(attrs, props.target, "target", convertAttrValue)
+    addAttr(attrs, props.href, "href", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.target, "target", RuntimeJsxProp.toStringAttr)
 
     /* Image attributes */
-    addAttr(attrs, props.src, "src", convertAttrValue)
-    addAttr(attrs, props.alt, "alt", convertAttrValue)
-    addAttr(attrs, props.width, "width", convertAttrValue)
-    addAttr(attrs, props.height, "height", convertAttrValue)
+    addAttr(attrs, props.src, "src", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.alt, "alt", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.width, "width", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.height, "height", RuntimeJsxProp.toStringAttr)
 
     /* 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)
+    addAttr(attrs, props.draggable, "draggable", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.hidden, "hidden", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.contentEditable, "contenteditable", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.spellcheck, "spellcheck", RuntimeJsxProp.toBoolAttr)
 
     /* Accessibility attributes */
-    addAttr(attrs, props.role, "role", convertAttrValue)
+    addAttr(attrs, props.role, "role", RuntimeJsxProp.toStringAttr)
     addIntAttr(attrs, props.tabIndex, "tabindex")
-    addAttr(attrs, props.ariaLabel, "aria-label", convertAttrValue)
-    addAttr(attrs, props.ariaHidden, "aria-hidden", convertBoolAttrValue)
-    addAttr(attrs, props.ariaExpanded, "aria-expanded", convertBoolAttrValue)
-    addAttr(attrs, props.ariaSelected, "aria-selected", convertBoolAttrValue)
+    addAttr(attrs, props.ariaLabel, "aria-label", RuntimeJsxProp.toStringAttr)
+    addAttr(attrs, props.ariaHidden, "aria-hidden", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.ariaExpanded, "aria-expanded", RuntimeJsxProp.toBoolAttr)
+    addAttr(attrs, props.ariaSelected, "aria-selected", RuntimeJsxProp.toBoolAttr)
 
     /* Data attributes */
     switch props.data {
-    | Some(_dataObj) => {
-        let _ = %raw(`
-          Object.entries(_dataObj).forEach(([key, value]) => {
-            attrs.push(convertAttrValue("data-" + key, value))
-          })
-        `)
+    | Some(dataObj) => {
+        ignore(dataObj)
+        let entries: array<(string, Obj.t)> = %raw(`Object.entries(dataObj)`)
+        entries->Array.forEach(((key, value)) => {
+          attrs->Array.push(RuntimeJsxProp.toStringAttr("data-" ++ key, value))->ignore
+        })
       }
     | None => ()
     }
@@ -344,6 +299,16 @@ module Elements = {
     addEvent(events, props.onMouseMove, "mousemove")
     addEvent(events, props.onMouseUp, "mouseup")
     addEvent(events, props.onContextMenu, "contextmenu")
+    addEvent(events, props.onPointerDown, "pointerdown")
+    addEvent(events, props.onPointerMove, "pointermove")
+    addEvent(events, props.onPointerUp, "pointerup")
+    addEvent(events, props.onPointerCancel, "pointercancel")
+    addEvent(events, props.onPointerEnter, "pointerenter")
+    addEvent(events, props.onPointerLeave, "pointerleave")
+    addEvent(events, props.onPointerOver, "pointerover")
+    addEvent(events, props.onPointerOut, "pointerout")
+    addEvent(events, props.onGotPointerCapture, "gotpointercapture")
+    addEvent(events, props.onLostPointerCapture, "lostpointercapture")
     addEvent(events, props.onDrag, "drag")
     addEvent(events, props.onDragStart, "dragstart")
     addEvent(events, props.onDragEnd, "dragend")
@@ -366,7 +331,7 @@ module Elements = {
 
   /* Create an element from a tag string and props */
   let createElement = (tag: string, props): element => {
-    Node.Element({
+    View.Element({
       tag,
       attrs: propsToAttrs(props),
       events: propsToEvents(props),
@@ -380,8 +345,10 @@ module Elements = {
   let jsxs = jsx
 
   let jsxKeyed = (tag: string, props, ~key: option<string>=?, _: unit): element => {
-    let _ = key
-    jsx(tag, props)
+    switch key {
+    | Some(key) => View.Keyed({key, identity: Obj.magic(props), child: jsx(tag, props)})
+    | None => jsx(tag, props)
+    }
   }
 
   let jsxsKeyed = jsxKeyed

package/src/XoteJSX.res.mjs

@@ -1,9 +1,8 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Node$Xote from "./Node.res.mjs";
-import * as Signal$Xote from "./Signal.res.mjs";
-import * as Computed$Xote from "./Computed.res.mjs";
+import * as View$Xote from "./View.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as RuntimeJsxProp$Xote from "./RuntimeJsxProp.res.mjs";
 
 function jsx(component, props) {
   return {
@@ -13,10 +12,22 @@ function jsx(component, props) {
 }
 
 function jsxKeyed(component, props, key, param) {
-  return {
-    TAG: "LazyComponent",
-    _0: () => component(props)
-  };
+  if (key !== undefined) {
+    return {
+      TAG: "Keyed",
+      key: key,
+      identity: props,
+      child: {
+        TAG: "LazyComponent",
+        _0: () => component(props)
+      }
+    };
+  } else {
+    return {
+      TAG: "LazyComponent",
+      _0: () => component(props)
+    };
+  }
 }
 
 function jsxFragment(props) {
@@ -24,71 +35,14 @@ function jsxFragment(props) {
   if (child !== undefined) {
     return child;
   } else {
-    return Node$Xote.fragment([]);
+    return View$Xote.fragment([]);
   }
 }
 
-let array = Node$Xote.fragment;
+let array = View$Xote.fragment;
 
 function $$null() {
-  return Node$Xote.text("");
-}
-
-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 convertBoolAttrValue(key, value) {
-  if (isReactiveProp(value)) {
-    if (value.TAG !== "Reactive") {
-      return Node$Xote.attr(key, value._0 ? "true" : "false");
-    }
-    let signal = value._0;
-    let strSignal = Computed$Xote.make(() => {
-      if (Signal$Xote.get(signal)) {
-        return "true";
-      } else {
-        return "false";
-      }
-    }, undefined, undefined);
-    return Node$Xote.signalAttr(key, strSignal);
-  }
-  if (typeof value === "function") {
-    return Node$Xote.computedAttr(key, () => {
-      if (value()) {
-        return "true";
-      } else {
-        return "false";
-      }
-    });
-  }
-  if (typeof value !== "object") {
-    return Node$Xote.attr(key, value ? "true" : "false");
-  }
-  let strSignal$1 = Computed$Xote.make(() => {
-    if (Signal$Xote.get(value)) {
-      return "true";
-    } else {
-      return "false";
-    }
-  }, undefined, undefined);
-  return Node$Xote.signalAttr(key, strSignal$1);
+  return View$Xote.text("");
 }
 
 function addAttr(attrs, opt, key, converter) {
@@ -100,61 +54,62 @@ function addAttr(attrs, opt, key, converter) {
 
 function addIntAttr(attrs, opt, key) {
   if (opt !== undefined) {
-    attrs.push(Node$Xote.attr(key, opt.toString()));
+    attrs.push(View$Xote.attr(key, opt.toString()));
     return;
   }
 }
 
 function propsToAttrs(props) {
   let attrs = [];
-  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);
-  addAttr(attrs, props.placeholder, "placeholder", convertAttrValue);
-  addAttr(attrs, props.disabled, "disabled", convertBoolAttrValue);
-  addAttr(attrs, props.checked, "checked", convertBoolAttrValue);
-  addAttr(attrs, props.required, "required", convertBoolAttrValue);
-  addAttr(attrs, props.readOnly, "readonly", convertBoolAttrValue);
+  addAttr(attrs, props.id, "id", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.class, "class", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.style, "style", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.title, "title", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.type, "type", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.name, "name", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.value, "value", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.placeholder, "placeholder", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.disabled, "disabled", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.checked, "checked", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.required, "required", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.readOnly, "readonly", RuntimeJsxProp$Xote.toBoolAttr);
   addIntAttr(attrs, props.maxLength, "maxlength");
   addIntAttr(attrs, props.minLength, "minlength");
-  addAttr(attrs, props.min, "min", convertAttrValue);
-  addAttr(attrs, props.max, "max", convertAttrValue);
-  addAttr(attrs, props.step, "step", convertAttrValue);
-  addAttr(attrs, props.pattern, "pattern", convertAttrValue);
-  addAttr(attrs, props.autoComplete, "autocomplete", convertAttrValue);
-  addAttr(attrs, props.multiple, "multiple", convertBoolAttrValue);
-  addAttr(attrs, props.accept, "accept", convertAttrValue);
+  addAttr(attrs, props.min, "min", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.max, "max", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.step, "step", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.pattern, "pattern", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.autoComplete, "autocomplete", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.multiple, "multiple", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.accept, "accept", RuntimeJsxProp$Xote.toStringAttr);
   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);
-  addAttr(attrs, props.src, "src", convertAttrValue);
-  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);
+  addAttr(attrs, props.autofocus, "autofocus", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.action, "action", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.method, "method", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.for, "for", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.href, "href", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.target, "target", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.src, "src", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.alt, "alt", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.width, "width", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.height, "height", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.draggable, "draggable", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.hidden, "hidden", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.contentEditable, "contenteditable", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.spellcheck, "spellcheck", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props.role, "role", RuntimeJsxProp$Xote.toStringAttr);
   addIntAttr(attrs, props.tabIndex, "tabindex");
-  addAttr(attrs, props["aria-label"], "aria-label", convertAttrValue);
-  addAttr(attrs, props["aria-hidden"], "aria-hidden", convertBoolAttrValue);
-  addAttr(attrs, props["aria-expanded"], "aria-expanded", convertBoolAttrValue);
-  addAttr(attrs, props["aria-selected"], "aria-selected", convertBoolAttrValue);
-  let _dataObj = props.data;
-  if (_dataObj !== undefined) {
-    ((Object.entries(_dataObj).forEach(([key, value]) => {
-            attrs.push(convertAttrValue("data-" + key, value))
-          })));
+  addAttr(attrs, props["aria-label"], "aria-label", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["aria-hidden"], "aria-hidden", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props["aria-expanded"], "aria-expanded", RuntimeJsxProp$Xote.toBoolAttr);
+  addAttr(attrs, props["aria-selected"], "aria-selected", RuntimeJsxProp$Xote.toBoolAttr);
+  let dataObj = props.data;
+  if (dataObj !== undefined) {
+    let entries = (Object.entries(dataObj));
+    entries.forEach(param => {
+      attrs.push(RuntimeJsxProp$Xote.toStringAttr("data-" + param[0], param[1]));
+    });
   }
   return attrs;
 }
@@ -185,6 +140,16 @@ function propsToEvents(props) {
   addEvent(events, props.onMouseMove, "mousemove");
   addEvent(events, props.onMouseUp, "mouseup");
   addEvent(events, props.onContextMenu, "contextmenu");
+  addEvent(events, props.onPointerDown, "pointerdown");
+  addEvent(events, props.onPointerMove, "pointermove");
+  addEvent(events, props.onPointerUp, "pointerup");
+  addEvent(events, props.onPointerCancel, "pointercancel");
+  addEvent(events, props.onPointerEnter, "pointerenter");
+  addEvent(events, props.onPointerLeave, "pointerleave");
+  addEvent(events, props.onPointerOver, "pointerover");
+  addEvent(events, props.onPointerOut, "pointerout");
+  addEvent(events, props.onGotPointerCapture, "gotpointercapture");
+  addEvent(events, props.onLostPointerCapture, "lostpointercapture");
   addEvent(events, props.onDrag, "drag");
   addEvent(events, props.onDragStart, "dragstart");
   addEvent(events, props.onDragEnd, "dragend");
@@ -221,13 +186,19 @@ function createElement(tag, props) {
 let jsx$1 = createElement;
 
 function jsxKeyed$1(tag, props, key, param) {
-  return createElement(tag, props);
+  if (key !== undefined) {
+    return {
+      TAG: "Keyed",
+      key: key,
+      identity: props,
+      child: createElement(tag, props)
+    };
+  } else {
+    return createElement(tag, props);
+  }
 }
 
 let Elements = {
-  isReactiveProp: isReactiveProp,
-  convertAttrValue: convertAttrValue,
-  convertBoolAttrValue: convertBoolAttrValue,
   addAttr: addAttr,
   addIntAttr: addIntAttr,
   propsToAttrs: propsToAttrs,
@@ -241,14 +212,14 @@ let Elements = {
   jsxsKeyed: jsxKeyed$1
 };
 
-let ReactiveProp;
+let Prop;
 
 let jsxs = jsx;
 
 let jsxsKeyed = jsxKeyed;
 
 export {
-  ReactiveProp,
+  Prop,
   jsx,
   jsxs,
   jsxKeyed,
@@ -258,4 +229,4 @@ export {
   $$null,
   Elements,
 }
-/* Node-Xote Not a pure module */
+/* View-Xote Not a pure module */