mark-fe-fwk 1.0.2 → 2.0.0

package/dist/mark-fe-fwk.js

@@ -15,9 +15,145 @@ 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 || item === undefined))
 }
+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
+    }
+    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)
+    }
+    originalIndexAt(index) {
+        return this.#originalIndices[index]
+    }
+    noopItem(index) {
+        return {
+            op: ARRAY_DIFF_OP.NOOP,
+            originalIndex: this.originalIndexAt(index),
+            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',
@@ -44,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;
@@ -84,6 +234,40 @@ function removeFragmentNodes(vdom) {
     children.forEach(destroyDOM);
 }
 
+class Dispatcher {
+    #subs = new Map()
+    #afterHandlers = []
+    subscribe(commandName, handler) {
+        if(!this.#subs.has(commandName)) {
+            this.#subs.set(commandName, []);
+        }
+        const handlers = this.#subs.get(commandName);
+        if (handlers.includes(handler)) {
+            return () => {}
+        }
+        handlers.push(handler);
+        return () => {
+            const idx = handlers.indexOf(handler);
+            handlers.splice(idx,1);
+        }
+    }
+    afterEveryCommand(handler) {
+        this.#afterHandlers.push(handler);
+        return () => {
+            const idx = this.#afterHandlers.indexOf(handler);
+            this.#afterHandlers.splice(idx, 1);
+        }
+    }
+    dispatch(commandName, payload) {
+        if (this.#subs.has(commandName)) {
+            this.#subs.get(commandName).forEach((handler) => handler(payload));
+        } else {
+            console.warn(`No handlers for command: ${commandName}`);
+        }
+        this.#afterHandlers.forEach((handler) => handler());
+    }
+}
+
 function setAttributes(el, attrs) {
     const { class: className, style, ...otherAttrs } = attrs;
     if (className) {
@@ -110,6 +294,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);
@@ -124,18 +311,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: {
@@ -143,68 +330,224 @@ function mountDOM(vdom, parentEl) {
         }
     }
 }
-function createTextNode(vdom, parentEl) {
+function createTextNode(vdom, parentEl, index) {
     const value = vdom.value;
     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;
     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]);
+    }
+}
 
-class Dispatcher {
-    #subs = new Map()
-    #afterHandlers = []
-    subscribe(commandName, handler) {
-        if(!this.#subs.has(commandName)) {
-            this.#subs.set(commandName, []);
-        }
-        const handlers = this.#subs.get(commandName);
-        if (handlers.includes(handler)) {
-            return () => {}
+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
         }
-        handlers.push(handler);
-        return () => {
-            const idx = handlers.indexOf(handler);
-            handlers.splice(idx,1);
+        case DOM_TYPES.ELEMENT: {
+            patchElement(oldVdom, newVdom);
+            break
         }
     }
-    afterEveryCommand(handler) {
-        this.#afterHandlers.push(handler);
-        return () => {
-            const idx = this.#afterHandlers.indexOf(handler);
-            this.#afterHandlers.splice(idx, 1);
-        }
+    patchChildren(oldVdom, newVdom);
+    return newVdom
+}
+function findIndexInParent(parentEl, el) {
+    const index = Array.from(parentEl.childNodes).indexOf(el);
+    if (index < 0 ) {
+        return null
     }
-    dispatch(commandName, payload) {
-        if (this.#subs.has(commandName)) {
-            this.#subs.get(commandName).forEach((handler) => handler(payload));
-        } else {
-            console.warn(`No handlers for command: ${commandName}`);
+    return index
+}
+function patchText(oldVdom, newVdom) {
+    const el = oldVdom.el;
+    const oldText = oldVdom.value;
+    const newText = newVdom.value;
+    if (oldText !== newText) {
+        el.nodeValue = newText;
+    }
+}
+function patchElement(oldVdom, newVdom) {
+    const el = oldVdom.el;
+    const {
+        class: oldClass,
+        style: oldStyle,
+        on: oldEvents,
+        ...oldAttrs
+    } = newVdom.props;
+    const {
+        class: newClass,
+        style: newStyle,
+        on: newEvents,
+        ...newAttrs
+    } = newVdom.props;
+    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
+            }
         }
-        this.#afterHandlers.forEach((handler) => handler());
     }
 }
 
 function createApp({state, view, reducers = {} }) {
     let parentEl = null;
     let vdom = null;
+    let isMounted = false;
     const dispatcher = new Dispatcher();
     const subscriptions = [dispatcher.afterEveryCommand(renderApp)];
     function emit(eventName, payload) {
@@ -218,21 +561,25 @@ 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(isMounted)
+            {
+                throw new Error(`Already mounted!`)
+            }
             parentEl = _parentEl;
-            renderApp();
+            vdom = view(state, emit);
+            mountDOM(vdom, parentEl);
+            isMounted = true;
         },
         unmount() {
             destroyDOM(vdom);
             vdom = null;
             subscriptions.forEach((unsubscribe) => unsubscribe());
+            isMounted = false;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mark-fe-fwk",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "author": "Mark C",
   "main": "dist/mark-fe-fwk.js",
   "files": [