xote 4.3.0 → 4.4.0

package/src/Xote__Component.res.mjs

@@ -0,0 +1,487 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Signals from "rescript-signals/src/Signals.res.mjs";
+import * as Core__Dict from "@rescript/core/src/Core__Dict.res.mjs";
+import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+let DOM = {};
+
+let currentOwner = {
+  contents: undefined
+};
+
+function createOwner() {
+  return {
+    disposers: [],
+    computeds: []
+  };
+}
+
+function runWithOwner(owner, fn) {
+  let previousOwner = currentOwner.contents;
+  currentOwner.contents = owner;
+  let result = fn();
+  currentOwner.contents = previousOwner;
+  return result;
+}
+
+function addDisposer(owner, disposer) {
+  owner.disposers.push(disposer);
+}
+
+function disposeOwner(owner) {
+  owner.disposers.forEach(disposer => disposer.dispose());
+  owner.computeds.forEach(computed => Signals.Computed.dispose(computed));
+}
+
+function setOwner(element, owner) {
+  ((element["__xote_owner__"] = owner));
+}
+
+function getOwner(element) {
+  return Primitive_option.fromNullable((element["__xote_owner__"]));
+}
+
+let Reactivity = {
+  currentOwner: currentOwner,
+  createOwner: createOwner,
+  runWithOwner: runWithOwner,
+  addDisposer: addDisposer,
+  disposeOwner: disposeOwner,
+  setOwner: setOwner,
+  getOwner: getOwner
+};
+
+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
+};
+
+function disposeElement(el) {
+  let owner = getOwner(el);
+  if (owner !== undefined) {
+    disposeOwner(owner);
+  }
+  let childNodes = (Array.from(el.childNodes || []));
+  childNodes.forEach(disposeElement);
+}
+
+function render(node) {
+  switch (node.TAG) {
+    case "Element" :
+      let children = node.children;
+      let events = node.events;
+      let attrs = node.attrs;
+      let el = document.createElement(node.tag);
+      let owner = {
+        disposers: [],
+        computeds: []
+      };
+      setOwner(el, owner);
+      runWithOwner(owner, () => {
+        attrs.forEach(param => {
+          let value = param[1];
+          let key = param[0];
+          switch (value.TAG) {
+            case "Static" :
+              el.setAttribute(key, value._0);
+              return;
+            case "SignalValue" :
+              let signal = value._0;
+              el.setAttribute(key, Signals.Signal.peek(signal));
+              let disposer = Signals.Effect.run(() => {
+                el.setAttribute(key, Signals.Signal.get(signal));
+              }, undefined);
+              return addDisposer(owner, disposer);
+            case "Compute" :
+              let compute = value._0;
+              el.setAttribute(key, compute());
+              let disposer$1 = Signals.Effect.run(() => {
+                el.setAttribute(key, compute());
+              }, undefined);
+              return addDisposer(owner, disposer$1);
+          }
+        });
+        events.forEach(param => {
+          el.addEventListener(param[0], param[1]);
+        });
+        children.forEach(child => {
+          let childEl = render(child);
+          el.appendChild(childEl);
+        });
+      });
+      return el;
+    case "Text" :
+      return document.createTextNode(node._0);
+    case "SignalText" :
+      let signal = node._0;
+      let textNode = document.createTextNode(Signals.Signal.peek(signal));
+      let owner$1 = {
+        disposers: [],
+        computeds: []
+      };
+      setOwner(textNode, owner$1);
+      runWithOwner(owner$1, () => {
+        let disposer = Signals.Effect.run(() => {
+          textNode.textContent = Signals.Signal.get(signal);
+        }, undefined);
+        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 = {
+        disposers: [],
+        computeds: []
+      };
+      let container = document.createElement("div");
+      container.setAttribute("style", "display: contents");
+      setOwner(container, owner$2);
+      runWithOwner(owner$2, () => {
+        let disposer = Signals.Effect.run(() => {
+          let children = Signals.Signal.get(signal$1);
+          let childNodes = (Array.from(container.childNodes || []));
+          childNodes.forEach(disposeElement);
+          ((container.innerHTML = ''));
+          children.forEach(child => {
+            let childEl = render(child);
+            container.appendChild(childEl);
+          });
+        }, undefined);
+        addDisposer(owner$2, disposer);
+      });
+      return container;
+    case "LazyComponent" :
+      let owner$3 = {
+        disposers: [],
+        computeds: []
+      };
+      let childNode = runWithOwner(owner$3, node._0);
+      let el$1 = render(childNode);
+      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 = {
+        disposers: [],
+        computeds: []
+      };
+      let startAnchor = document.createComment(" keyed-list-start ");
+      let endAnchor = document.createComment(" keyed-list-end ");
+      setOwner(startAnchor, owner$4);
+      let keyedItems = {};
+      let reconcile = () => {
+        let parentOpt = endAnchor.parentNode;
+        if (parentOpt == null) {
+          return;
+        }
+        let newItems = Signals.Signal.get(signal$2);
+        let newKeyMap = {};
+        newItems.forEach(item => {
+          newKeyMap[keyFn(item)] = item;
+        });
+        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()));
+            Core__Dict.$$delete(keyedItems, key);
+            return;
+          }
+        });
+        let newOrder = [];
+        let elementsToReplace = {};
+        newItems.forEach(item => {
+          let key = keyFn(item);
+          let existing = keyedItems[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[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[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 = Core__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 = Signals.Signal.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[key] = keyedItem;
+        fragment$1.appendChild(element);
+      });
+      fragment$1.appendChild(endAnchor);
+      runWithOwner(owner$4, () => {
+        let disposer = Signals.Effect.run(() => {
+          reconcile();
+        }, undefined);
+        addDisposer(owner$4, disposer);
+      });
+      return fragment$1;
+  }
+}
+
+let Render = {
+  disposeElement: disposeElement,
+  render: render
+};
+
+function text(content) {
+  return {
+    TAG: "Text",
+    _0: content
+  };
+}
+
+function textSignal(compute) {
+  let signal = Signals.Computed.make(compute, undefined);
+  return {
+    TAG: "SignalText",
+    _0: signal
+  };
+}
+
+function fragment(children) {
+  return {
+    TAG: "Fragment",
+    _0: children
+  };
+}
+
+function signalFragment(signal) {
+  return {
+    TAG: "SignalFragment",
+    _0: signal
+  };
+}
+
+function list(signal, renderItem) {
+  let nodesSignal = Signals.Computed.make(() => Signals.Signal.get(signal).map(renderItem), undefined);
+  return {
+    TAG: "SignalFragment",
+    _0: nodesSignal
+  };
+}
+
+function keyedList(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 div(attrs, events, children, param) {
+  return element("div", attrs, events, children, undefined);
+}
+
+function span(attrs, events, children, param) {
+  return element("span", attrs, events, children, undefined);
+}
+
+function button(attrs, events, children, param) {
+  return element("button", attrs, events, children, undefined);
+}
+
+function input(attrs, events, param) {
+  return element("input", attrs, events, undefined, undefined);
+}
+
+function h1(attrs, events, children, param) {
+  return element("h1", attrs, events, children, undefined);
+}
+
+function h2(attrs, events, children, param) {
+  return element("h2", attrs, events, children, undefined);
+}
+
+function h3(attrs, events, children, param) {
+  return element("h3", attrs, events, children, undefined);
+}
+
+function p(attrs, events, children, param) {
+  return element("p", attrs, events, children, undefined);
+}
+
+function ul(attrs, events, children, param) {
+  return element("ul", attrs, events, children, undefined);
+}
+
+function li(attrs, events, children, param) {
+  return element("li", attrs, events, children, undefined);
+}
+
+function a(attrs, events, children, param) {
+  return element("a", attrs, events, children, undefined);
+}
+
+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 attr = $$static;
+
+let signalAttr = signal;
+
+let computedAttr = computed;
+
+export {
+  DOM,
+  Reactivity,
+  Attributes,
+  attr,
+  signalAttr,
+  computedAttr,
+  Render,
+  text,
+  textSignal,
+  fragment,
+  signalFragment,
+  list,
+  keyedList,
+  element,
+  div,
+  span,
+  button,
+  input,
+  h1,
+  h2,
+  h3,
+  p,
+  ul,
+  li,
+  a,
+  mount,
+  mountById,
+}
+/* Signals Not a pure module */