xote 6.1.2 → 6.2.0

package/src/View.res.mjs

@@ -0,0 +1,614 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+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";
+import * as Computed$Xote from "./Computed.res.mjs";
+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";
+
+function $$static(key, value) {
+  return [
+    key,
+    {
+      TAG: "Static",
+      _0: value
+    }
+  ];
+}
+
+function signal(key, signal$1) {
+  return [
+    key,
+    {
+      TAG: "SignalValue",
+      _0: signal$1
+    }
+  ];
+}
+
+function computed(key, compute) {
+  return [
+    key,
+    {
+      TAG: "Compute",
+      _0: compute
+    }
+  ];
+}
+
+let Attributes = {
+  $$static: $$static,
+  signal: signal,
+  computed: computed
+};
+
+let Attr = {
+  string: $$static,
+  signal: signal,
+  compute: computed
+};
+
+function disposeElement(el) {
+  let owner = RuntimeOwner$Xote.getOwner(el);
+  if (owner !== undefined) {
+    RuntimeOwner$Xote.disposeOwner(owner);
+  }
+  let childNodes = (Array.from(el.childNodes || []));
+  childNodes.forEach(disposeElement);
+}
+
+function shallowEqualIdentity(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== "object" || typeof b !== "object") {
+    return false;
+  }
+  let keysA = Object.keys(a);
+  let keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  } else {
+    return keysA.every(key => {
+      let match = a[key];
+      let match$1 = b[key];
+      if (match !== undefined && match$1 !== undefined) {
+        return Primitive_option.valFromOption(match) === Primitive_option.valFromOption(match$1);
+      } else {
+        return false;
+      }
+    });
+  }
+}
+
+function clearKeyedItems(keyedItems) {
+  Object.keys(keyedItems).forEach(key => {
+    Stdlib_Dict.$$delete(keyedItems, key);
+  });
+}
+
+function getKeyedChildren(children) {
+  let keyedChildren = [];
+  let allKeyed = {
+    contents: true
+  };
+  children.forEach(child => {
+    if (child.TAG !== "Keyed") {
+      allKeyed.contents = false;
+      return;
+    }
+    keyedChildren.push({
+      key: child.key,
+      identity: child.identity,
+      child: child.child
+    });
+  });
+  if (allKeyed.contents) {
+    return keyedChildren;
+  }
+}
+
+function reconcileKeyedChildren(keyedChildren, keyedItems, parent) {
+  let newKeyMap = {};
+  keyedChildren.forEach(child => {
+    newKeyMap[child.key] = child;
+  });
+  let keysToRemove = [];
+  Object.keys(keyedItems).forEach(key => {
+    let match = newKeyMap[key];
+    if (match !== undefined) {
+      return;
+    } else {
+      keysToRemove.push(key);
+      return;
+    }
+  });
+  keysToRemove.forEach(key => {
+    let keyedItem = keyedItems[key];
+    if (keyedItem !== undefined) {
+      disposeElement(keyedItem.element);
+      keyedItem.element.remove();
+      Stdlib_Dict.$$delete(keyedItems, key);
+      return;
+    }
+  });
+  let newOrder = [];
+  let elementsToReplace = {};
+  keyedChildren.forEach(keyedChild => {
+    let existing = keyedItems[keyedChild.key];
+    if (existing !== undefined) {
+      if (shallowEqualIdentity(existing.item, keyedChild.identity)) {
+        newOrder.push(existing);
+        return;
+      }
+      let element = render(keyedChild.child);
+      let keyedItem_key = keyedChild.key;
+      let keyedItem_item = keyedChild.identity;
+      let keyedItem = {
+        key: keyedItem_key,
+        item: keyedItem_item,
+        element: element
+      };
+      elementsToReplace[keyedChild.key] = existing.element;
+      newOrder.push(keyedItem);
+      keyedItems[keyedChild.key] = keyedItem;
+      return;
+    }
+    let element$1 = render(keyedChild.child);
+    let keyedItem_key$1 = keyedChild.key;
+    let keyedItem_item$1 = keyedChild.identity;
+    let keyedItem$1 = {
+      key: keyedItem_key$1,
+      item: keyedItem_item$1,
+      element: element$1
+    };
+    newOrder.push(keyedItem$1);
+    keyedItems[keyedChild.key] = keyedItem$1;
+  });
+  let node = parent.firstChild;
+  let marker = {
+    contents: !(node == null) ? Primitive_option.some(node) : undefined
+  };
+  newOrder.forEach(keyedItem => {
+    let currentElement = marker.contents;
+    if (currentElement !== undefined) {
+      let elem = Primitive_option.valFromOption(currentElement);
+      if (elem === keyedItem.element) {
+        marker.contents = Primitive_option.fromNullable(elem.nextSibling);
+        return;
+      }
+      let previousElement = elementsToReplace[keyedItem.key];
+      if (previousElement !== undefined) {
+        let previousElement$1 = Primitive_option.valFromOption(previousElement);
+        if (elem === previousElement$1) {
+          disposeElement(previousElement$1);
+          parent.replaceChild(keyedItem.element, previousElement$1);
+          marker.contents = Primitive_option.fromNullable(keyedItem.element.nextSibling);
+          return;
+        }
+      }
+      parent.insertBefore(keyedItem.element, elem);
+      marker.contents = Primitive_option.fromNullable(keyedItem.element.nextSibling);
+      return;
+    }
+    let previousElement$2 = elementsToReplace[keyedItem.key];
+    if (previousElement$2 !== undefined) {
+      let previousElement$3 = Primitive_option.valFromOption(previousElement$2);
+      disposeElement(previousElement$3);
+      previousElement$3.remove();
+      parent.appendChild(keyedItem.element);
+      return;
+    }
+    parent.appendChild(keyedItem.element);
+  });
+}
+
+function render(_node) {
+  while (true) {
+    let node = _node;
+    switch (node.TAG) {
+      case "Element" :
+        let children = node.children;
+        let events = node.events;
+        let attrs = node.attrs;
+        let tag = node.tag;
+        let el = RuntimeDom$Xote.createElementForTag(tag);
+        let owner = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(el, owner);
+        RuntimeOwner$Xote.runWithOwner(owner, () => {
+          let shouldDeferAttrUntilAfterChildren = param => {
+            if (tag === "select") {
+              return param[0] === "value";
+            } else {
+              return false;
+            }
+          };
+          let applyAttr = param => {
+            let value = param[1];
+            let key = param[0];
+            switch (value.TAG) {
+              case "Static" :
+                return RuntimeDom$Xote.setAttrOrProp(el, key, value._0);
+              case "SignalValue" :
+                let signal = value._0;
+                RuntimeDom$Xote.setAttrOrProp(el, key, Signal$Xote.peek(signal));
+                let disposer = Effect$Xote.runWithDisposer(() => {
+                  RuntimeDom$Xote.setAttrOrProp(el, key, Signal$Xote.get(signal));
+                }, undefined);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer);
+              case "Compute" :
+                let compute = value._0;
+                let disposer$1 = Effect$Xote.runWithDisposer(() => {
+                  RuntimeDom$Xote.setAttrOrProp(el, key, compute());
+                }, undefined);
+                return RuntimeOwner$Xote.addDisposer(owner, disposer$1);
+            }
+          };
+          attrs.forEach(attr => {
+            if (!shouldDeferAttrUntilAfterChildren(attr)) {
+              return applyAttr(attr);
+            }
+          });
+          events.forEach(param => {
+            el.addEventListener(param[0], param[1]);
+          });
+          children.forEach(child => {
+            let childEl = render(child);
+            el.appendChild(childEl);
+          });
+          attrs.forEach(attr => {
+            if (shouldDeferAttrUntilAfterChildren(attr)) {
+              return applyAttr(attr);
+            }
+          });
+        });
+        return el;
+      case "Text" :
+        return document.createTextNode(node._0);
+      case "SignalText" :
+        let signal = node._0;
+        let textNode = document.createTextNode(Signal$Xote.peek(signal));
+        let owner$1 = RuntimeOwner$Xote.createOwner();
+        RuntimeOwner$Xote.setOwner(textNode, owner$1);
+        RuntimeOwner$Xote.runWithOwner(owner$1, () => {
+          let disposer = Effect$Xote.runWithDisposer(() => {
+            textNode.textContent = Signal$Xote.get(signal);
+          }, undefined);
+          RuntimeOwner$Xote.addDisposer(owner$1, disposer);
+        });
+        return textNode;
+      case "Fragment" :
+        let fragment = document.createDocumentFragment();
+        node._0.forEach(child => {
+          let childEl = render(child);
+          fragment.appendChild(childEl);
+        });
+        return fragment;
+      case "SignalFragment" :
+        let signal$1 = node._0;
+        let owner$2 = RuntimeOwner$Xote.createOwner();
+        let container = document.createElement("div");
+        container.setAttribute("style", "display: contents");
+        RuntimeOwner$Xote.setOwner(container, owner$2);
+        let keyedItems = {};
+        RuntimeOwner$Xote.runWithOwner(owner$2, () => {
+          let disposer = Effect$Xote.runWithDisposer(() => {
+            let children = Signal$Xote.get(signal$1);
+            let keyedChildren = getKeyedChildren(children);
+            if (keyedChildren !== undefined) {
+              reconcileKeyedChildren(keyedChildren, keyedItems, container);
+            } else {
+              clearKeyedItems(keyedItems);
+              let childNodes = (Array.from(container.childNodes || []));
+              childNodes.forEach(disposeElement);
+              container.innerHTML = "";
+              children.forEach(child => {
+                let childEl = render(child);
+                container.appendChild(childEl);
+              });
+            }
+          }, undefined);
+          RuntimeOwner$Xote.addDisposer(owner$2, disposer);
+        });
+        return container;
+      case "Keyed" :
+        _node = node.child;
+        continue;
+      case "LazyComponent" :
+        let owner$3 = RuntimeOwner$Xote.createOwner();
+        let childNode = RuntimeOwner$Xote.runWithOwner(owner$3, node._0);
+        let el$1 = render(childNode);
+        RuntimeOwner$Xote.setOwner(el$1, owner$3);
+        return el$1;
+      case "KeyedList" :
+        let renderItem = node.renderItem;
+        let keyFn = node.keyFn;
+        let signal$2 = node.signal;
+        let owner$4 = RuntimeOwner$Xote.createOwner();
+        let startAnchor = document.createComment(" keyed-list-start ");
+        let endAnchor = document.createComment(" keyed-list-end ");
+        RuntimeOwner$Xote.setOwner(startAnchor, owner$4);
+        let keyedItems$1 = {};
+        let reconcile = () => {
+          let parentOpt = endAnchor.parentNode;
+          if (parentOpt == null) {
+            return;
+          }
+          let newItems = Signal$Xote.get(signal$2);
+          let newKeyMap = {};
+          newItems.forEach(item => {
+            newKeyMap[keyFn(item)] = item;
+          });
+          let keysToRemove = [];
+          Object.keys(keyedItems$1).forEach(key => {
+            let match = newKeyMap[key];
+            if (match !== undefined) {
+              return;
+            } else {
+              keysToRemove.push(key);
+              return;
+            }
+          });
+          keysToRemove.forEach(key => {
+            let keyedItem = keyedItems$1[key];
+            if (keyedItem !== undefined) {
+              disposeElement(keyedItem.element);
+              keyedItem.element.remove();
+              Stdlib_Dict.$$delete(keyedItems$1, key);
+              return;
+            }
+          });
+          let newOrder = [];
+          let elementsToReplace = {};
+          newItems.forEach(item => {
+            let key = keyFn(item);
+            let existing = keyedItems$1[key];
+            if (existing !== undefined) {
+              if (existing.item !== item) {
+                elementsToReplace[key] = true;
+                let node = renderItem(item);
+                let element = render(node);
+                let keyedItem = {
+                  key: key,
+                  item: item,
+                  element: element
+                };
+                newOrder.push(keyedItem);
+                keyedItems$1[key] = keyedItem;
+                return;
+              }
+              newOrder.push(existing);
+              return;
+            }
+            let node$1 = renderItem(item);
+            let element$1 = render(node$1);
+            let keyedItem$1 = {
+              key: key,
+              item: item,
+              element: element$1
+            };
+            newOrder.push(keyedItem$1);
+            keyedItems$1[key] = keyedItem$1;
+          });
+          let marker = {
+            contents: startAnchor.nextSibling
+          };
+          newOrder.forEach(keyedItem => {
+            let currentElement = marker.contents;
+            if (currentElement == null) {
+              parentOpt.insertBefore(keyedItem.element, endAnchor);
+              return;
+            }
+            if (currentElement === endAnchor) {
+              parentOpt.insertBefore(keyedItem.element, endAnchor);
+              return;
+            }
+            if (currentElement === keyedItem.element) {
+              marker.contents = currentElement.nextSibling;
+              return;
+            }
+            let needsReplacement = Stdlib_Option.getOr(elementsToReplace[keyedItem.key], false);
+            if (needsReplacement) {
+              disposeElement(currentElement);
+              parentOpt.replaceChild(keyedItem.element, currentElement);
+              marker.contents = keyedItem.element.nextSibling;
+            } else {
+              parentOpt.insertBefore(keyedItem.element, currentElement);
+              marker.contents = keyedItem.element.nextSibling;
+            }
+          });
+        };
+        let fragment$1 = document.createDocumentFragment();
+        fragment$1.appendChild(startAnchor);
+        let initialItems = Signal$Xote.peek(signal$2);
+        initialItems.forEach(item => {
+          let key = keyFn(item);
+          let node = renderItem(item);
+          let element = render(node);
+          let keyedItem = {
+            key: key,
+            item: item,
+            element: element
+          };
+          keyedItems$1[key] = keyedItem;
+          fragment$1.appendChild(element);
+        });
+        fragment$1.appendChild(endAnchor);
+        RuntimeOwner$Xote.runWithOwner(owner$4, () => {
+          let disposer = Effect$Xote.runWithDisposer(() => {
+            reconcile();
+          }, undefined);
+          RuntimeOwner$Xote.addDisposer(owner$4, disposer);
+        });
+        return fragment$1;
+    }
+  };
+}
+
+let Render = {
+  disposeElement: disposeElement,
+  shallowEqualIdentity: shallowEqualIdentity,
+  clearKeyedItems: clearKeyedItems,
+  getKeyedChildren: getKeyedChildren,
+  reconcileKeyedChildren: reconcileKeyedChildren,
+  render: render
+};
+
+function text(content) {
+  return {
+    TAG: "Text",
+    _0: content
+  };
+}
+
+function signalText(compute) {
+  let signal = Computed$Xote.make(compute, undefined, undefined);
+  return {
+    TAG: "SignalText",
+    _0: signal
+  };
+}
+
+function signalInt(compute) {
+  let signal = Computed$Xote.make(() => compute().toString(), undefined, undefined);
+  return {
+    TAG: "SignalText",
+    _0: signal
+  };
+}
+
+function signalFloat(compute) {
+  let signal = Computed$Xote.make(() => compute().toString(), undefined, undefined);
+  return {
+    TAG: "SignalText",
+    _0: signal
+  };
+}
+
+function int(value) {
+  return {
+    TAG: "Text",
+    _0: value.toString()
+  };
+}
+
+function float(value) {
+  return {
+    TAG: "Text",
+    _0: value.toString()
+  };
+}
+
+function fragment(children) {
+  return {
+    TAG: "Fragment",
+    _0: children
+  };
+}
+
+function signalFragment(signal) {
+  return {
+    TAG: "SignalFragment",
+    _0: signal
+  };
+}
+
+function each(signal, renderItem) {
+  let nodesSignal = Computed$Xote.make(() => Signal$Xote.get(signal).map(renderItem), undefined, undefined);
+  return {
+    TAG: "SignalFragment",
+    _0: nodesSignal
+  };
+}
+
+function eachWithKey(signal, keyFn, renderItem) {
+  return {
+    TAG: "KeyedList",
+    signal: signal,
+    keyFn: keyFn,
+    renderItem: renderItem
+  };
+}
+
+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);
+  return {
+    TAG: "Element",
+    tag: tag,
+    attrs: attrs,
+    events: events,
+    children: children
+  };
+}
+
+function $$null() {
+  return {
+    TAG: "Text",
+    _0: ""
+  };
+}
+
+function mount(node, container) {
+  let el = render(node);
+  container.appendChild(el);
+}
+
+function mountById(node, containerId) {
+  let container = document.getElementById(containerId);
+  if (container == null) {
+    console.error("Container element not found: " + containerId);
+    return;
+  } else {
+    return mount(node, container);
+  }
+}
+
+let DOM;
+
+let Reactivity;
+
+let attr = $$static;
+
+let signalAttr = signal;
+
+let computedAttr = computed;
+
+let list = each;
+
+let keyedList = eachWithKey;
+
+let empty = $$null;
+
+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,
+}
+/* RuntimeDom-Xote Not a pure module */