xote 6.4.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 {
@@ -94,22 +109,16 @@ function getKeyedChildren(children) {
   if (children.length === 0) {
     return;
   }
-  let keyedChildren = [];
-  let allKeyed = {
-    contents: true
-  };
-  children.forEach(child => {
-    if (child.TAG !== "Keyed") {
-      allKeyed.contents = false;
-      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;
   }
 }
@@ -305,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);
@@ -505,6 +513,13 @@ function float(value) {
   };
 }
 
+function bool(value) {
+  return {
+    TAG: "Text",
+    _0: value ? "true" : "false"
+  };
+}
+
 function fragment(children) {
   return {
     TAG: "Fragment",
@@ -519,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 {
@@ -536,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,
@@ -571,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,
@@ -602,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/jsx-dev-runtime.mjs

@@ -0,0 +1,7 @@
+import { jsx } from "./jsx-runtime.mjs";
+
+export { Fragment, jsx, jsxs } from "./jsx-runtime.mjs";
+
+export function jsxDEV(type, props, key) {
+  return jsx(type, props, key);
+}

package/src/jsx-runtime.mjs

@@ -0,0 +1,276 @@
+import * as Computed from "./Computed.res.mjs";
+import * as Signal from "./Signal.res.mjs";
+import * as View from "./View.res.mjs";
+
+export const Fragment = Symbol.for("xote.fragment");
+
+const nodeTags = new Set([
+  "Element",
+  "Text",
+  "SignalText",
+  "Fragment",
+  "SignalFragment",
+  "Keyed",
+  "LazyComponent",
+  "KeyedList",
+]);
+
+const eventAliases = {
+  onChange: "change",
+  onClick: "click",
+  onContextMenu: "contextmenu",
+  onDoubleClick: "dblclick",
+  onInput: "input",
+  onSubmit: "submit",
+  onFocus: "focus",
+  onBlur: "blur",
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+  onMouseDown: "mousedown",
+  onMouseEnter: "mouseenter",
+  onMouseLeave: "mouseleave",
+  onMouseMove: "mousemove",
+  onMouseUp: "mouseup",
+  onDrag: "drag",
+  onDragStart: "dragstart",
+  onDragEnd: "dragend",
+  onDragOver: "dragover",
+  onDragEnter: "dragenter",
+  onDragLeave: "dragleave",
+  onDrop: "drop",
+};
+
+const attrAliases = {
+  acceptCharset: "accept-charset",
+  autoFocus: "autofocus",
+  className: "class",
+  contentEditable: "contenteditable",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  preserveAspectRatio: "preserveAspectRatio",
+  readOnly: "readonly",
+  spellCheck: "spellcheck",
+  srcSet: "srcset",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeWidth: "stroke-width",
+  tabIndex: "tabindex",
+  viewBox: "viewBox",
+  xlinkHref: "xlink:href",
+};
+
+const internalProps = new Set([
+  "children",
+  "components",
+  "key",
+  "mdxType",
+  "originalType",
+  "parentName",
+  "ref",
+]);
+
+function isXoteNode(value) {
+  return value && typeof value === "object" && nodeTags.has(value.TAG);
+}
+
+function isReactiveProp(value) {
+  return (
+    value &&
+    typeof value === "object" &&
+    (value.TAG === "Static" || value.TAG === "Reactive")
+  );
+}
+
+function isSignal(value) {
+  return (
+    value &&
+    typeof value === "object" &&
+    "subs" in value &&
+    "value" in value &&
+    typeof value.equals === "function"
+  );
+}
+
+function toKebab(name) {
+  return name.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+}
+
+function normalizeAttrName(name) {
+  if (attrAliases[name]) {
+    return attrAliases[name];
+  }
+
+  if (/^(aria|data)[A-Z]/.test(name)) {
+    return toKebab(name);
+  }
+
+  return name;
+}
+
+function normalizeStyle(style) {
+  if (typeof style === "string") {
+    return style;
+  }
+
+  if (!style || typeof style !== "object") {
+    return String(style ?? "");
+  }
+
+  return Object.entries(style)
+    .filter(([, value]) => value !== null && value !== undefined && value !== false)
+    .map(([key, value]) => `${toKebab(key)}:${String(value)}`)
+    .join(";");
+}
+
+function stringifyAttrValue(name, value) {
+  if (name === "style") {
+    return normalizeStyle(value);
+  }
+
+  return String(value);
+}
+
+function attrFromValue(name, value) {
+  if (isReactiveProp(value)) {
+    if (value.TAG === "Static") {
+      return View.attr(name, stringifyAttrValue(name, value._0));
+    }
+
+    const signal = value._0;
+    return View.signalAttr(
+      name,
+      Computed.make(() => stringifyAttrValue(name, Signal.get(signal)), undefined, undefined),
+    );
+  }
+
+  if (isSignal(value)) {
+    return View.signalAttr(
+      name,
+      Computed.make(() => stringifyAttrValue(name, Signal.get(value)), undefined, undefined),
+    );
+  }
+
+  if (typeof value === "function") {
+    return View.computedAttr(name, () => stringifyAttrValue(name, value()));
+  }
+
+  return View.attr(name, stringifyAttrValue(name, value));
+}
+
+function eventNameFromProp(name, value) {
+  if (typeof value !== "function" || !/^on[A-Z]/.test(name)) {
+    return null;
+  }
+
+  return eventAliases[name] ?? name.slice(2).toLowerCase();
+}
+
+function normalizeChildren(children) {
+  if (children === null || children === undefined || typeof children === "boolean") {
+    return [];
+  }
+
+  if (Array.isArray(children)) {
+    return children.flatMap(normalizeChildren);
+  }
+
+  if (isXoteNode(children)) {
+    return [children];
+  }
+
+  return [View.text(String(children))];
+}
+
+function normalizeNode(value) {
+  if (isXoteNode(value)) {
+    return value;
+  }
+
+  return View.fragment(normalizeChildren(value));
+}
+
+function buildElement(tag, props = {}) {
+  const attrs = [];
+  const events = [];
+
+  for (const [rawName, value] of Object.entries(props)) {
+    if (internalProps.has(rawName) || value === null || value === undefined) {
+      continue;
+    }
+
+    const eventName = eventNameFromProp(rawName, value);
+    if (eventName) {
+      events.push([eventName, value]);
+      continue;
+    }
+
+    const attrName = normalizeAttrName(rawName);
+    attrs.push(attrFromValue(attrName, value));
+  }
+
+  return View.element(tag, attrs, events, normalizeChildren(props.children), undefined);
+}
+
+function getReservedKey(props, key) {
+  if (key !== undefined && key !== null) {
+    return key;
+  }
+
+  return props?.key;
+}
+
+function stripReservedKey(props) {
+  if (!props || !Object.prototype.hasOwnProperty.call(props, "key")) {
+    return props ?? {};
+  }
+
+  const { key: _key, ...nextProps } = props;
+  return nextProps;
+}
+
+function withKey(node, key, props) {
+  const reservedKey = getReservedKey(props, key);
+
+  if (reservedKey === undefined || reservedKey === null) {
+    return node;
+  }
+
+  return {
+    TAG: "Keyed",
+    key: String(reservedKey),
+    identity: props ?? {},
+    child: node,
+  };
+}
+
+export function jsx(type, props, key) {
+  const nextProps = stripReservedKey(props);
+
+  if (type === Fragment) {
+    return withKey(View.fragment(normalizeChildren(nextProps.children)), key, props);
+  }
+
+  if (typeof type === "string") {
+    return withKey(buildElement(type, nextProps), key, props);
+  }
+
+  if (typeof type === "function") {
+    return withKey(
+      {
+        TAG: "LazyComponent",
+        _0: () => normalizeNode(type(nextProps)),
+      },
+      key,
+      props,
+    );
+  }
+
+  throw new TypeError(`Unsupported Xote JSX element type: ${String(type)}`);
+}
+
+export const jsxs = jsx;