my-framework-almaz 1.0.0 → 2.0.0

package/dist/my-framework-almaz.js

@@ -1,11 +1,14 @@
-function addEventListener(eventName, handler, el) {
-  el.addEventListener(eventName, handler);
+function addEventListener$1(eventName, handler, el) {
+  function boundHandler(event) {
+    handler(event);
+  }
+  el.addEventListener(eventName, boundHandler);
   return handler
 }
 function addEventListeners(listeners = {}, el) {
   const addedListeners = {};
   Object.entries(listeners).forEach(([eventName, handler]) => {
-    const listener = addEventListener(eventName, handler, el);
+    const listener = addEventListener$1(eventName, handler, el);
     addedListeners[eventName] = listener;
   });
   return addedListeners
@@ -19,6 +22,138 @@ function removeEventListeners(listeners, el) {
 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)),
+  }
+}
+const ARRAY_DIFF_OP = {
+  ADD: 'add',
+  REMOVE: 'remove',
+  MOVE: 'move',
+  NOOP: 'noop',
+};
+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
+  }
+  isRemoval(index, newArry) {
+    if (index >= this.length) {
+      return false
+    }
+    const item = this.#array[index];
+    const indexInNewArray = newArry.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)
+  }
+  originalIndexAt(index) {
+    return this.#originalIndices[index]
+  }
+  noopItem(index) {
+    return {
+      op: ARRAY_DIFF_OP.NOOP,
+      originalIndex: originalIndexAt(index),
+      index,
+      item: this.#array[index],
+    }
+  }
+  isAddition(item, fromIdx) {
+    return this.findIndexForm(item, fromIdx) === -1
+  }
+  findIndexForm(item, fromIndex) {
+    for (let i = fromIndex; i < this.length; i++) {
+      if (this.#equalsFn(item, this.#array[i])) {
+        return i
+      }
+    }
+    return -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 = findIndexForm(item, toIndex);
+    const operation = {
+      op: ARRAY_DIFF_OP.MOVE,
+      originalIndex: this.originalIndexAt(fromIndex),
+      index: toIndex,
+      fromIndex: fromIndex,
+      item,
+    };
+    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
+  }
+  removeItemAfter(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.removeItemAfter(newArray.length));
+  return sequence
+}
 
 const DOM_TYPES = {
   TEXT: 'text',
@@ -47,6 +182,20 @@ function mapTextNodes(children) {
     typeof child === 'string' ? hString(child) : child
   )
 }
+function extraChildren(vdom) {
+  if (vdom.children == null) {
+    return []
+  }
+  const children = [];
+  for (const child of vdom.children) {
+    if (child.type === DOM_TYPES.FRAGMENT) {
+      children.push(...extraChildren(child));
+    } else {
+      children.push(child);
+    }
+  }
+  return children
+}
 
 function destroyDOM(vdom) {
   const { type } = vdom;
@@ -147,6 +296,9 @@ function setClass(el, className) {
 function setStyle(el, name, value) {
   el.style[name] = value;
 }
+function removeStyle(el, name) {
+  el.style[name] = null;
+}
 function setAttribute(el, name, value) {
   if (value === null) {
     removeAttribute(el, value);
@@ -161,18 +313,18 @@ function removeAttribute(el, name) {
   el.removeAttribute(name);
 }
 
-function mountDOM(vdom, parentEl) {
+function mountDOM(vdom, parentEl, index) {
   switch (vdom.type) {
     case DOM_TYPES.TEXT: {
-      createTextNode(vdom, parentEl);
+      createTextNode(vdom, parentEl, index);
       break
     }
     case DOM_TYPES.ELEMENT: {
-      createElementNode(vdom, parentEl);
+      createElementNode(vdom, parentEl, index);
       break
     }
     case DOM_TYPES.FRAGMENT: {
-      createFragmentNodes(vdom, parentEl);
+      createFragmentNodes(vdom, parentEl, index);
       break
     }
     default: {
@@ -180,24 +332,41 @@ function mountDOM(vdom, parentEl) {
     }
   }
 }
-function createTextNode(vdom, parentEl) {
+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 createTextNode(vdom, parentEl, index) {
   const { value } = vdom;
   const textNode = document.createTextNode(value);
   vdom.el = textNode;
-  parentEl.append(textNode);
+  insert(textNode, parentEl, index);
 }
-function createFragmentNodes(vdom, parentEl) {
+function createFragmentNodes(vdom, parentEl, index) {
   const { children } = vdom;
   vdom.el = parentEl;
-  children.forEach((child) => mountDOM(child, parentEl));
+  children.forEach((child, i) =>
+    mountDOM(child, parentEl, index ? index + i : null)
+  );
 }
-function createElementNode(vdom, parentEl) {
+function createElementNode(vdom, parentEl, index) {
   const { tag, props, children } = vdom;
   const element = document.createElement(tag);
   addProps(element, props, vdom);
   vdom.el = element;
   children.forEach((child) => mountDOM(child, element));
-  parentEl.append(element);
+  insert(element, parentEl, index);
 }
 function addProps(el, props, vdom) {
   const { on: events, ...attrs } = props;
@@ -205,6 +374,181 @@ function addProps(el, props, vdom) {
   setAttributes(el, attrs);
 }
 
+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) {
+  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 el = oldVdom.el;
+  const { value: oldText } = oldVdom;
+  const { value: newText } = newVdom;
+  if (oldText !== newText) {
+    el.nodeValue = newText;
+  }
+}
+function patchElement(oldVdom, newVdom) {
+  const el = oldVdom.el;
+  const {
+    class: oldCalss,
+    style: oldStyle,
+    on: oldEvents,
+    ...oldAttrs
+  } = oldVdom.props;
+  const {
+    class: newCalss,
+    style: newStyle,
+    on: newEvents,
+    ...newAttrs
+  } = newVdom.props;
+  const { listeners: oldListeners } = vdom;
+  patchAttrs(el, oldAttrs, newAttrs);
+  patchCalsses(el, oldCalss, newCalss);
+  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 patchCalsses(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 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 addedListeneres = {};
+  for (const eventName of added.concat(updated)) {
+    const listener = addEventListener(eventName, newEvents[eventName], el);
+    addedListeneres[eventName] = listener;
+  }
+  return addedListeneres
+}
+function toClassList(classes = '') {
+  return Array.isArray(classes)
+    ? classes.filter(isNotBlankOrEmptyString)
+    : classes.split(/(\s+)/).filter(isNotBlankOrEmptyString)
+}
+function patchChildren(oldVdom, newVdom) {
+  const oldChildren = extraChildren(oldVdom);
+  const newChildren = extraChildren(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;
   let vdom = null;
@@ -221,16 +565,15 @@ 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) {
       parentEl = _parentEl;
-      renderApp();
+      if (vdom) return
+      vdom = view(state, emit);
+      mountDOM(vdom, parentEl);
     },
     unmount() {
       destroyDOM(vdom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-framework-almaz",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A frontend framework to teach web developers how frontend frameworks work.",
   "keywords": [
     "frontend",