lahama 2.0.0 → 2.2.0

package/dist/lahama.js

@@ -1,9 +1,146 @@
 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'
+};
 const a = { };
 const b = { };
 console.log(a === b);
+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) =>
+        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);
+        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 : this.originalIndexAt(index),
+            item : this.#array[index],
+        }
+    }
+    isAddition(item, fromIdx) {
+        return this.findIndexFrom(item, fromIdx === -1)
+    }
+    findIndexFrom(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 = 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',
@@ -32,14 +169,14 @@ function hFragment(vNodes) {
     }
 }
 
-function addEventListener(eventName, handler, el) {
+function addEventListener$1(eventName, handler, el) {
     el.addEventListener(eventName, handler);
     return handler
 }
 function addEventListeners(listeners = {}, el) {
     const addedListeners = {};
     Object.entries(listeners).forEach(([eventName, handler]) => {
-        addedListeners[eventName] = addEventListener(eventName, handler, el);
+        addedListeners[eventName] = addEventListener$1(eventName, handler, el);
     });
     return addedListeners
 }
@@ -114,6 +251,9 @@ function setClass(el, className) {
 function setStyle(el, name, value) {
     el.style[name] = value;
 }
+function removeStyle(el, name) {
+    el.style[name] = null;
+}
 function removeAttributeCustom(el, name) {
     el[name] = null;
     el.removeAttribute(name);
@@ -224,6 +364,206 @@ 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
+}
+
+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 patchText(oldVdom, newVdom) {
+    const el = oldVdom.el;
+    const { value : oldText} = oldVdom;
+    const { value : newText} = newVdom;
+    if (oldText !== newText) {
+        el.nodeValue = newText;
+    }
+}
+function findIndexInParent(parentEl, el) {
+    const index = Array.from(parentEl.childNodes).indexOf(el);
+    if (index < 0) {
+        return null
+    }
+    return index
+ }
+ 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) {
+         removeAttributeCustom(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 addEventListener(eventName, handler, el) {
+    function boundHandler(event) {
+        handler(event);
+    }
+    el.addEventListener(eventName, boundHandler);
+    //!el.addEventListener("click", boundHandler) {
+    //! Element: el
+    //! Event: "click"
+    //! Listener : boundHandler!}
+    return boundHandler
+}
+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 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 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(oldChildren[originalIndex], 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;
@@ -241,8 +581,8 @@ function createApp({ state, view, reducers = {} }) {
         subscriptions.push(subs);
     }
     function renderApp() {
-        view(state, emit);
-        vdom = patchDom();
+        const newVdom = view(state, emit);
+        vdom = patchDOM(vdom, newVdom, parentEl);
     }
     return {
         mount(_parentEl) {
@@ -262,7 +602,5 @@ function createApp({ state, view, reducers = {} }) {
         },
     }
 }
-function patchDom(vdom, newVdom, parentEl) {
-}
 
-export { createApp, h, hFragment, hString };
+export { DOM_TYPES, createApp, h, hFragment, hString };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lahama",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "",
   "main": "dist/lahama.js",
   "files": [