betal-fe 1.0.0 → 2.0.0

package/dist/betal-fe.js

@@ -15,9 +15,143 @@ function removeEventListeners(listeners = {}, el) {
   });
 }
 
+const ARRAY_DIFF_OP = {
+  ADD: "add",
+  REMOVE: "remove",
+  MOVE: "move",
+  NOOP: "noop",
+};
 function withoutNulls(arr) {
   return arr.filter((item) => item != null);
 }
+function arraysDiff(oldArray, newArray) {
+  return {
+    added: newArray.filter((newItem) => !oldArray.includes(newItem)),
+    removed: oldArray.filter((oldItem) => !newArray.includes(oldItem)),
+  };
+}
+class ArrayWithOriginalIndices {
+  #array = [];
+  #originalIndices = [];
+  #equalsFn;
+  constructor(array, equalsFn) {
+    this.#array = [...array];
+    this.#originalIndices = array.map((_, i) => i);
+    this.#equalsFn = equalsFn;
+  }
+  get length() {
+    return this.#array.length;
+  }
+  originalIndexAt(index) {
+    return this.#originalIndices[index];
+  }
+  isRemoval(index, newArray) {
+    if (index >= this.length) {
+      return false;
+    }
+    const item = this.#array[index];
+    const indexInNewArray = newArray.findIndex((newItem) =>
+      this.#equalsFn(item, newItem)
+    );
+    return indexInNewArray === -1;
+  }
+  removeItem(index) {
+    const operation = {
+      op: ARRAY_DIFF_OP.REMOVE,
+      index,
+      item: this.#array[index],
+    };
+    this.#array.splice(index, 1);
+    this.#originalIndices.splice(index, 1);
+    return operation;
+  }
+  isNoop(index, newArray) {
+    if (index >= this.length) {
+      return false;
+    }
+    const item = this.#array[index];
+    const newItem = newArray[index];
+    return this.#equalsFn(item, newItem);
+  }
+  noopItem(index) {
+    return {
+      op: ARRAY_DIFF_OP.NOOP,
+      originalIndex: this.originalIndexAt(index),
+      index,
+      item: this.#array[index],
+    };
+  }
+  findIndexFrom(item, fromIndex) {
+    for (let i = fromIndex; i < this.length; i++) {
+      if (this.#equalsFn(item, this.#array[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  isAddition(item, fromIdx) {
+    return this.findIndexFrom(item, fromIdx) === -1;
+  }
+  addItem(item, index) {
+    const operation = {
+      op: ARRAY_DIFF_OP.ADD,
+      index,
+      item,
+    };
+    this.#array.splice(index, 0, item);
+    this.#originalIndices.splice(index, 0, -1);
+    return operation;
+  }
+  moveItem(item, toIndex) {
+    const fromIndex = this.findIndexFrom(item, toIndex);
+    const operation = {
+      op: ARRAY_DIFF_OP.MOVE,
+      originalIndex: this.originalIndexAt(fromIndex),
+      from: fromIndex,
+      index: toIndex,
+      item: this.#array[fromIndex],
+    };
+    const [_item] = this.#array.splice(fromIndex, 1);
+    this.#array.splice(toIndex, 0, _item);
+    const [originalIndex] = this.#originalIndices.splice(fromIndex, 1);
+    this.#originalIndices.splice(toIndex, 0, originalIndex);
+    return operation;
+  }
+  removeItemsAfter(index) {
+    const operations = [];
+    while (this.length > index) {
+      operations.push(this.removeItem(index));
+    }
+    return operations;
+  }
+}
+function arraysDiffSequence(
+  oldArray,
+  newArray,
+  equalsFn = (a, b) => a === b
+) {
+  const sequence = [];
+  const array = new ArrayWithOriginalIndices(oldArray, equalsFn);
+  for (let index = 0; index < newArray.length; index++) {
+    if (array.isRemoval(index, newArray)) {
+      sequence.push(array.removeItem(index));
+      index--;
+      continue;
+    }
+    if (array.isNoop(index, newArray)) {
+      sequence.push(array.noopItem(index));
+      continue;
+    }
+    const item = newArray[index];
+    if (array.isAddition(item, index)) {
+      sequence.push(array.addItem(item, index));
+      continue;
+    }
+    sequence.push(array.moveItem(item, index));
+  }
+  sequence.push(...array.removeItemsAfter(newArray.length));
+  return sequence;
+}
 
 const DOM_TYPES = {
   TEXT: "text",
@@ -46,6 +180,20 @@ function hFragment(vNodes) {
     children: mapTextNodes(withoutNulls(vNodes)),
   };
 }
+function extractChildren(vdom) {
+  if (vdom.children == null) {
+    return [];
+  }
+  const children = [];
+  for (const child of vdom.children) {
+    if (child.type === DOM_TYPES.FRAGMENT) {
+      children.push(...extractChildren(child));
+    } else {
+      children.push(child);
+    }
+  }
+  return children;
+}
 
 function destroyDOM(vDom) {
   const { type } = vDom;
@@ -146,6 +294,9 @@ function setClass(el, className) {
 function setStyle(el, prop, value) {
   el.style[prop] = value;
 }
+function removeStyle(el, prop) {
+  el.style[prop] = null;
+}
 function setAttribute(el, name, value) {
   if (value == null) {
     removeAttribute(el, name);
@@ -160,18 +311,18 @@ function removeAttribute(el, name) {
   el.removeAttribute(name);
 }
 
-function mountDOM(vDom, parentElement) {
+function mountDOM(vDom, parentElement, index) {
   switch (vDom.type) {
     case DOM_TYPES.TEXT: {
-      createTextNode(vDom, parentElement);
+      createTextNode(vDom, parentElement, index);
       break;
     }
     case DOM_TYPES.ELEMENT: {
-      createElementNode(vDom, parentElement);
+      createElementNode(vDom, parentElement, index);
       break;
     }
     case DOM_TYPES.FRAGMENT: {
-      createFragmentNode(vDom, parentElement);
+      createFragmentNode(vDom, parentElement, index);
       break;
     }
     default: {
@@ -179,30 +330,214 @@ function mountDOM(vDom, parentElement) {
     }
   }
 }
-function createTextNode(vDom, parentElement) {
+function createTextNode(vDom, parentElement, index) {
   const { value } = vDom;
   const textNode = document.createTextNode(value);
   vDom.el = textNode;
-  parentElement.appendChild(textNode);
+  insert(textNode, parentElement, index);
 }
-function createFragmentNode(vDom, parentElement) {
+function createFragmentNode(vDom, parentElement, index) {
   const { children } = vDom;
   vDom.el = parentElement;
-  children.forEach((child) => mountDOM(child, parentElement));
+  children.forEach((child) => mountDOM(child, parentElement, index ? index + 1 : null));
 }
-function createElementNode(vDom, parentElement) {
+function createElementNode(vDom, parentElement, index) {
   const { tag, props, children } = vDom;
   const element = document.createElement(tag);
   addProps(element, props, vDom);
   vDom.el = element;
   children.forEach((child) => mountDOM(child, element));
-  parentElement.appendChild(element);
+  insert(element, parentElement, index);
 }
 function addProps(el, props, vdom) {
   const { on: events, ...attrs } = props;
   vdom.listeners = addEventListeners(events, el);
   setAttributes(el, attrs);
 }
+function insert(el, parentEl, index) {
+  if (index == null) {
+    parentEl.append(el);
+    return;
+  }
+  if (index < 0) {
+    throw new Error(`Index must be a positive integer, got ${index}`);
+  }
+  const children = parentEl.childNodes;
+  if (index >= children.length) {
+    parentEl.append(el);
+  } else {
+    parentEl.insertBefore(el, children[index]);
+  }
+}
+
+function areNodesEqual(nodeOne, nodeTwo) {
+  if (nodeOne.type !== nodeTwo.type) {
+    return false;
+  }
+  if (nodeOne.type === DOM_TYPES.ELEMENT) {
+    const { tag: tagOne } = nodeOne;
+    const { tag: tagTwo } = nodeTwo;
+    return tagOne === tagTwo;
+  }
+  return true;
+}
+
+function objectsDiff(oldObj, newObj) {
+  const oldKeys = Object.keys(oldObj);
+  const newKeys = Object.keys(newObj);
+  return {
+    added: newKeys.filter((key) => !(key in oldObj)),
+    removed: oldKeys.filter((key) => !(key in newObj)),
+    updated: newKeys.filter(
+      (key) => key in oldObj && oldObj[key] !== newObj[key]
+    ),
+  };
+}
+
+function isNotEmptyString(str) {
+ return str !== ''
+}
+function isNotBlankOrEmptyString(str) {
+ return isNotEmptyString(str.trim())
+}
+
+function patchDOM(oldVdom, newVdom, parentEl) {
+  if (!areNodesEqual(oldVdom, newVdom)) {
+    const index = findIndexInParent(parentEl, oldVdom.el);
+    destroyDOM(oldVdom);
+    mountDOM(newVdom, parentEl, index);
+    return newVdom;
+  }
+  newVdom.el = oldVdom.el;
+  switch (newVdom.type) {
+    case DOM_TYPES.TEXT: {
+      patchText(oldVdom, newVdom);
+      return newVdom;
+    }
+    case DOM_TYPES.ELEMENT: {
+      patchElement(oldVdom, newVdom);
+      break;
+    }
+  }
+  patchChildren(oldVdom, newVdom);
+  return newVdom;
+}
+function findIndexInParent(parentEl, el) {
+  const index = Array.from(parentEl.childNodes).indexOf(el);
+  if (index < 0) {
+    return null;
+  }
+  return index;
+}
+function patchText(oldVdom, newVdom) {
+  const { value: oldText } = oldVdom;
+  const { value: newText } = newVdom;
+  if (oldText !== newText) {
+    newVdom.el.nodeValue = newText;
+  }
+}
+function patchElement(oldVdom, newVdom) {
+  const el = oldVdom.el;
+  const {
+    class: oldClass,
+    style: oldStyle,
+    on: oldEvents,
+    ...oldAttrs
+  } = oldVdom.props;
+  const {
+    class: newClass,
+    style: newStyle,
+    on: newEvents,
+    ...newAttrs
+  } = newVdom.props;
+  const { listeners: oldListeners } = oldVdom;
+  patchAttrs(el, oldAttrs, newAttrs);
+  patchClasses(el, oldClass, newClass);
+  patchStyles(el, oldStyle, newStyle);
+  newVdom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents);
+}
+function patchAttrs(el, oldAttrs, newAttrs) {
+  const { added, removed, updated } = objectsDiff(oldAttrs, newAttrs);
+  for (const attr of removed) {
+    removeAttribute(el, attr);
+  }
+  for (const attr of added.concat(updated)) {
+    setAttribute(el, attr, newAttrs[attr]);
+  }
+}
+function patchClasses(el, oldClass, newClass) {
+  const oldClasses = toClassList(oldClass);
+  const newClasses = toClassList(newClass);
+  const { added, removed } = arraysDiff(oldClasses, newClasses);
+  if (removed.length > 0) {
+    el.classList.remove(...removed);
+  }
+  if (added.length > 0) {
+    el.classList.add(...added);
+  }
+}
+function toClassList(classes = "") {
+  return Array.isArray(classes)
+    ? classes.filter(isNotBlankOrEmptyString)
+    : classes.split(/(\s+)/).filter(isNotBlankOrEmptyString);
+}
+function patchStyles(el, oldStyle = {}, newStyle = {}) {
+  const { added, removed, updated } = objectsDiff(oldStyle, newStyle);
+  for (const style of removed) {
+    removeStyle(el, style);
+  }
+  for (const style of added.concat(updated)) {
+    setStyle(el, style, newStyle[style]);
+  }
+}
+function patchEvents(el, oldListeners = {}, oldEvents = {}, newEvents = {}) {
+  const { removed, added, updated } = objectsDiff(oldEvents, newEvents);
+  for (const eventName of removed.concat(updated)) {
+    el.removeEventListener(eventName, oldListeners[eventName]);
+  }
+  const addedListeners = {};
+  for (const eventName of added.concat(updated)) {
+    const listener = addEventListener(eventName, newEvents[eventName], el);
+    addedListeners[eventName] = listener;
+  }
+  return addedListeners;
+}
+function patchChildren(oldVdom, newVdom) {
+  const oldChildren = extractChildren(oldVdom);
+  const newChildren = extractChildren(newVdom);
+  const parentEl = oldVdom.el;
+  const diffSeq = arraysDiffSequence(
+    oldChildren,
+    newChildren,
+    areNodesEqual
+  );
+  for (const operation of diffSeq) {
+    const { originalIndex, index, item } = operation;
+    switch (operation.op) {
+      case ARRAY_DIFF_OP.ADD: {
+        mountDOM(item, parentEl, index);
+        break;
+      }
+      case ARRAY_DIFF_OP.REMOVE: {
+        destroyDOM(item);
+        break;
+      }
+      case ARRAY_DIFF_OP.MOVE: {
+        const oldChild = oldChildren[originalIndex];
+        const newChild = newChildren[index];
+        const el = oldChild.el;
+        const elAtTargetIndex = parentEl.childNodes[index];
+        parentEl.insertBefore(el, elAtTargetIndex);
+        patchDOM(oldChild, newChild, parentEl);
+        break;
+      }
+      case ARRAY_DIFF_OP.NOOP: {
+        patchDOM(oldChildren[originalIndex], newChildren[index], parentEl);
+        break;
+      }
+    }
+  }
+}
 
 function createApp({ state, view, reducers = {} }) {
   let parentEl = null;
@@ -220,16 +555,17 @@ function createApp({ state, view, reducers = {} }) {
     subscriptions.push(subs);
   }
   function renderApp() {
-    if (vdom) {
-      destroyDOM(vdom);
-    }
-    vdom = view(state, emit);
-    mountDOM(vdom, parentEl);
+    const newVdom = view(state, emit);
+    vdom = patchDOM(vdom, newVdom, parentEl);
   }
   return {
     mount(_parentEl) {
+      if (vdom) {
+        throw new Error('App is already mounted');
+      }
       parentEl = _parentEl;
-      renderApp();
+      vdom = view(state, emit);
+      mountDOM(vdom, parentEl);
     },
     unmount() {
       destroyDOM(vdom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "betal-fe",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "main": "dist/betal-fe.js",
   "files": [