xote 6.3.0 → 7.0.0-beta.1

package/src/XoteJSX.res.mjs

@@ -104,6 +104,69 @@ function propsToAttrs(props) {
   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);
+  addAttr(attrs, props.xmlns, "xmlns", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["xmlns:xlink"], "xmlns:xlink", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.version, "version", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.viewBox, "viewBox", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.preserveAspectRatio, "preserveAspectRatio", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.d, "d", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.pathLength, "pathLength", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.cx, "cx", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.cy, "cy", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.r, "r", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.rx, "rx", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.ry, "ry", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.x, "x", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.y, "y", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.x1, "x1", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.y1, "y1", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.x2, "x2", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.y2, "y2", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.fx, "fx", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.fy, "fy", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.dx, "dx", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.dy, "dy", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.points, "points", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.transform, "transform", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["transform-origin"], "transform-origin", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.fill, "fill", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["fill-opacity"], "fill-opacity", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["fill-rule"], "fill-rule", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.stroke, "stroke", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-width"], "stroke-width", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-linecap"], "stroke-linecap", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-linejoin"], "stroke-linejoin", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-dasharray"], "stroke-dasharray", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-dashoffset"], "stroke-dashoffset", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-opacity"], "stroke-opacity", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stroke-miterlimit"], "stroke-miterlimit", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.opacity, "opacity", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.color, "color", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.visibility, "visibility", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["vector-effect"], "vector-effect", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["pointer-events"], "pointer-events", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["clip-path"], "clip-path", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["clip-rule"], "clip-rule", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.mask, "mask", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.filter, "filter", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["text-anchor"], "text-anchor", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["dominant-baseline"], "dominant-baseline", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["font-family"], "font-family", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["font-size"], "font-size", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["font-weight"], "font-weight", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["letter-spacing"], "letter-spacing", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["word-spacing"], "word-spacing", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["text-decoration"], "text-decoration", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.offset, "offset", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stop-color"], "stop-color", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["stop-opacity"], "stop-opacity", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.gradientUnits, "gradientUnits", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.gradientTransform, "gradientTransform", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props.spreadMethod, "spreadMethod", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["marker-start"], "marker-start", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["marker-mid"], "marker-mid", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["marker-end"], "marker-end", RuntimeJsxProp$Xote.toStringAttr);
+  addAttr(attrs, props["xlink:href"], "xlink:href", RuntimeJsxProp$Xote.toStringAttr);
   let dataObj = props.data;
   if (dataObj !== undefined) {
     let entries = (Object.entries(dataObj));

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;

package/src/Node.res

@@ -1,2 +0,0 @@
-@deprecated("Use View instead. Node is deprecated and will be removed in a future release.")
-include View

package/src/Node.res.mjs

@@ -1,82 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as View$Xote from "./View.res.mjs";
-
-let DOM = View$Xote.DOM;
-
-let Reactivity = View$Xote.Reactivity;
-
-let Attributes = View$Xote.Attributes;
-
-let attr = View$Xote.attr;
-
-let signalAttr = View$Xote.signalAttr;
-
-let computedAttr = View$Xote.computedAttr;
-
-let Attr = View$Xote.Attr;
-
-let Render = View$Xote.Render;
-
-let text = View$Xote.text;
-
-let signalText = View$Xote.signalText;
-
-let signalInt = View$Xote.signalInt;
-
-let signalFloat = View$Xote.signalFloat;
-
-let int = View$Xote.int;
-
-let float = View$Xote.float;
-
-let fragment = View$Xote.fragment;
-
-let signalFragment = View$Xote.signalFragment;
-
-let each = View$Xote.each;
-
-let list = View$Xote.list;
-
-let eachWithKey = View$Xote.eachWithKey;
-
-let keyedList = View$Xote.keyedList;
-
-let element = View$Xote.element;
-
-let $$null = View$Xote.$$null;
-
-let empty = View$Xote.empty;
-
-let mount = View$Xote.mount;
-
-let mountById = View$Xote.mountById;
-
-export {
-  DOM,
-  Reactivity,
-  Attributes,
-  attr,
-  signalAttr,
-  computedAttr,
-  Attr,
-  Render,
-  text,
-  signalText,
-  signalInt,
-  signalFloat,
-  int,
-  float,
-  fragment,
-  signalFragment,
-  each,
-  list,
-  eachWithKey,
-  keyedList,
-  element,
-  $$null,
-  empty,
-  mount,
-  mountById,
-}
-/* View-Xote Not a pure module */

package/src/ReactiveProp.res

@@ -1,2 +0,0 @@
-@deprecated("Use Prop instead. ReactiveProp is deprecated and will be removed in a future release.")
-include Prop

package/src/ReactiveProp.res.mjs

@@ -1,19 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as Prop$Xote from "./Prop.res.mjs";
-
-let get = Prop$Xote.get;
-
-let $$static = Prop$Xote.$$static;
-
-let reactive = Prop$Xote.reactive;
-
-let signal = Prop$Xote.signal;
-
-export {
-  get,
-  $$static,
-  reactive,
-  signal,
-}
-/* No side effect */