philo-scratch 1.0.0 → 2.0.0

package/dist/philo-scratch.js

@@ -16,12 +16,145 @@ function removeEventListeners(listeners = {}, el) {
   });
 }
 
+const ARRAY_DIF_OP = {
+  ADD: "add",
+  REMOVE: "remove",
+  MOVE: "move",
+  NOOP: "noop",
+};
 function withoutNulls(children) {
   return children.filter((child) => child != null);
 }
 function mapTextNodes(children) {
   return children.map((child) => (typeof child === "string" ? hString(child) : child));
 }
+function arraysDiff(oldArray, newArray) {
+  return {
+    added: newArray.filter((item) => !oldArray.includes(item)),
+    removed: oldArray.filter((item) => !newArray.includes(item)),
+  };
+}
+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, newArray) {
+    if (index >= this.length) {
+      return false;
+    }
+    const item = this.#array[index];
+    const indexInNewArray = newArray.findIndex((newItem) => {
+      return this.#equalsFn(item, newItem);
+    });
+    return indexInNewArray === -1;
+  }
+  isNoop(index, newArray) {
+    if (index >= this.length) {
+      return false;
+    }
+    const item = this.#array[index];
+    const newItem = newArray[index];
+    return this.#equalsFn(item, newItem);
+  }
+  isAddition(item, fromIndex) {
+    return this.findIndexFrom(item, fromIndex) === -1;
+  }
+  originalIndexAt(index) {
+    return this.#originalIndices[index];
+  }
+  findIndexFrom(item, fromIndex) {
+    for (let i = fromIndex; i < this.length; i++) {
+      if (this.#equalsFn(item, this.#array[i])) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  removeItem(index) {
+    const operation = {
+      op: ARRAY_DIF_OP.REMOVE,
+      index,
+      item: this.#array[index],
+    };
+    this.#array.splice(index, 1);
+    this.#originalIndices.splice(index, 1);
+    return operation;
+  }
+  noopItem(index) {
+    const operation = {
+      op: ARRAY_DIF_OP.NOOP,
+      originalIndex: this.originalIndexAt(index),
+      index,
+      item: this.#array[index],
+    };
+    this.#array.splice(index, 1);
+    this.#originalIndices.splice(index, 1);
+    return operation;
+  }
+  addItem(item, index) {
+    const operation = {
+      op: ARRAY_DIF_OP.ADD,
+      index,
+      item: 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_DIF_OP.MOVE,
+      originalIndex: this.originalIndexAt(fromIndex),
+      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;
+  }
+  removeItemsAfterIndex(index) {
+    const operations = [];
+    while (this.length > index) {
+      operations.push(this.removeItem(index));
+    }
+    return operations;
+  }
+}
+function arrayDiffSequence(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.removeItemsAfterIndex(newArray.length));
+  return sequence;
+}
 
 const DOM_TYPES = {
   TEXT: "text",
@@ -48,6 +181,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;
@@ -114,6 +261,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, name);
@@ -128,18 +278,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: {
-      createFragmentNode(vdom, parentEl);
+      createFragmentNode(vdom, parentEl, index);
       break;
     }
     default: {
@@ -147,24 +297,39 @@ function mountDOM(vdom, parentEl) {
     }
   }
 }
-function createFragmentNode(vdom, parentEl) {
+function insert(el, parentEl, index) {
+  if (!index) {
+    parentEl.append(el);
+    return;
+  }
+  if (index < 0) {
+    throw new Error("Index must be a positive value");
+  }
+  const children = parentEl.childNodes;
+  if (index >= children.length) {
+    parentEl.append(el);
+  } else {
+    parentEl.insertBefore(el, children[index]);
+  }
+}
+function createFragmentNode(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 createTextNode(vdom, parentEl) {
+function createTextNode(vdom, parentEl, index) {
   const { value } = vdom;
   const textNode = document.createTextNode(value);
   vdom.el = textNode;
-  parentEl.append(textNode);
+  insert(textNode, parentEl, index);
 }
-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(textNode, parentEl, index);
 }
 function addProps(el, props, vdom) {
   const { on: events, ...attrs } = props;
@@ -206,6 +371,169 @@ class Dispatcher {
   }
 }
 
+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;
+}
+areNodesEqual({ type: "element", tag: "p" }, { type: "element", tag: "div" });
+
+function objectsDiff(oldObj, newObj) {
+  const oldKeys = Object.keys(oldObj);
+  const newKeys = Object.keys(newObj);
+  const added = [];
+  const updated = [];
+  newKeys.forEach((key) => {
+    if (!(key in oldObj)) {
+      added.push(key);
+    }
+    if (key in oldObj && oldObj[key] !== newObj[key]) {
+      updated.push(key);
+    }
+  });
+  return {
+    added,
+    removed: oldKeys.filter((k) => !(k in newObj)),
+    updated,
+  };
+}
+
+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 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: 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 = arrayDiffSequence(oldChildren, newChildren, areNodesEqual);
+  for (const operation of diffSeq) {
+    const { originalIndex, index, item } = operation;
+    switch (operation.op) {
+      case ARRAY_DIF_OP.ADD: {
+        mountDOM(item, parentEl, index);
+        break;
+      }
+      case ARRAY_DIF_OP.REMOVE: {
+        destroyDOM(item);
+        break;
+      }
+      case ARRAY_DIF_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_DIF_OP.NOOP: {
+        patchDOM(oldChildren[originalIndex], newChildren[index], parentEl);
+        break;
+      }
+    }
+  }
+}
+
 function createApp({ state, view, reducers = {} }) {
   let parentEl = null;
   let vdom = null;
@@ -222,21 +550,21 @@ function createApp({ state, view, reducers = {} }) {
     subscriptions.push(subs);
   }
   function renderApp() {
-    if (vdom) {
-      destroyDOM();
-    }
-    vdom = view(state, emit);
-    mountDOM(vdom, parentEl);
+    const newVDom = view(state, emit);
+    vdom = patchDOM(vdom, newVDom, parentEl);
   }
   return {
     mount(_parentEl) {
       parentEl = _parentEl;
-      renderApp();
+      vdom = view(state, emit);
+      mountDOM(vdom, parentEl);
+      iMounted = true;
     },
     unmount() {
       destroyDOM(vdom);
       vdom = null;
       subscriptions.forEach((unsubscribe) => unsubscribe());
+      iMounted = false;
     },
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "philo-scratch",
   "type": "module",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A frontend framework to teach web developers how frontend frameworks work.",
   "keywords": [
     "frontend",
@@ -31,5 +31,8 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-filesize": "^10.0.0",
     "vitest": "^0.34.3"
+  },
+  "dependencies": {
+    "philo-scratch": "^1.0.0"
   }
 }