ks-fwork 1.0.6 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "1.0.6",
+  "version": "2.0.1",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",
@@ -12,8 +12,5 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "ks-fwork": "^1.0.1"
   }
 }

package/src/app.js

@@ -1,10 +1,12 @@
 import { destroyDOM } from "./destroy-dom.js";
 import { Dispatcher } from "./dispatcher.js";
-import { mountDOM} from "./mount-dom.js";
+import { mountDOM } from "./mount-dom.js";
+import { patchDOM } from "./patch-dom.js";
 
 export function createApp({state, view, reducers = {} }) {
     let parentEl = null;
     let rootNode = null;
+    let isMounted = false;
 
     const dispatcher = new Dispatcher();
     const unsubscribers = [dispatcher.afterEveryCommand(renderApp)];
@@ -25,19 +27,19 @@ export function createApp({state, view, reducers = {} }) {
     }
 
     function renderApp() {
-        if (rootNode) {
-            destroyDOM(rootNode);
-        }
+        const newRootNode = view(state, emit);
 
-        rootNode = view(state, emit);
-        mountDOM(rootNode, parentEl);
+        rootNode = patchDOM(rootNode, newRootNode, parentEl);
     }
 
     return {
         // Attach the app to a real DOM element and do the first render.
         mount(_parentEl) {
+            if (isMounted) throw new Error('The application is already mounted');
+
             parentEl = _parentEl;
-            renderApp();
+            rootNode = view(state, emit);
+            mountDOM(rootNode, parentEl);
         },
 
         // Detach the app: remove its DOM and cancel every subscription.
@@ -47,6 +49,8 @@ export function createApp({state, view, reducers = {} }) {
             }
             rootNode = null;
             unsubscribers.forEach((unsubscribe) => unsubscribe());
+
+            isMounted = false;
         },
     }
 }

package/src/h.js

@@ -51,4 +51,20 @@ export function lipsum(numberOfParagraphs) {
             h('p', {}, [text])
         )
     );
+}
+
+export function extractChildren(vNode) {
+    if (vNode.children == null) return [];
+
+    const children = [];
+
+    for (const child of vNode.children) {
+        if (child.type === DOM_TYPES.FRAGMENT) {
+            children.push(...extractChildren(child))
+        } else {
+            children.push(child);
+        }
+    }
+
+    return children;
 }

package/src/mount-dom.js

@@ -3,20 +3,20 @@ import { setAttributes } from './attributes.js'
 import { addEventListeners } from "./events.js";
 
 // Recursively mount a virtual node (and its subtree) into a real parent DOM element.
-export function mountDOM(vNode, parentEl) {
+export function mountDOM(vNode, parentEl, index) {
     switch (vNode.type) {
         case DOM_TYPES.TEXT: {
-            createTextNode(vNode, parentEl);
+            createTextNode(vNode, parentEl, index);
             break;
         }
 
         case DOM_TYPES.ELEMENT: {
-            createElementNode(vNode, parentEl);
+            createElementNode(vNode, parentEl, index);
             break;
         }
 
         case DOM_TYPES.FRAGMENT: {
-            createFragmentNode(vNode, parentEl);
+            createFragmentNode(vNode, parentEl, index);
             break;
         }
 
@@ -27,18 +27,18 @@ export function mountDOM(vNode, parentEl) {
 }
 
 // Create a real text node, save a reference to it on the vNode, and append it to the parent.
-function createTextNode(vNode, parentEl) {
+function createTextNode(vNode, parentEl, index) {
     const { value } = vNode;
 
     const textNode = document.createTextNode(value);
     vNode.el = textNode;
 
-    parentEl.append(textNode);
+    insert(textNode, parentEl, index);
 }
 
 // Create a real element, apply its props, recursively mount its children into it,
 // then append the finished element to the parent.
-function createElementNode(vNode, parentEl) {
+function createElementNode(vNode, parentEl, index) {
     const { tag, props, children } = vNode;
 
     const el = document.createElement(tag);
@@ -46,15 +46,17 @@ function createElementNode(vNode, parentEl) {
     vNode.el = el;
 
     children.forEach((child) => mountDOM(child, el));
-    parentEl.append(el);
+    insert(el, parentEl, index);
 }
 
 // Fragment has no DOM element. Mount its children directly into the parent.
-function createFragmentNode(vNode, parentEl) {
+function createFragmentNode(vNode, parentEl, index) {
     const { children } = vNode;
     vNode.el = parentEl;
 
-    children.forEach((child) => mountDOM(child, parentEl));
+    children.forEach((child, i) => {
+        mountDOM(child, parentEl, index ? index + i : null)
+    });
 }
 
 // Split props into event listeners ('on') and attributes and add them to DOM element.
@@ -63,4 +65,23 @@ function addProps(el, props, vNode) {
 
     vNode.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 number, got ${index}`);
+    }
+
+    const children = parentEl.childNodes;
+
+    if (index >= children.length) {
+        parentEl.append(el);
+    } else {
+        parentEl.insertBefore(el, children[index]);
+    }
 }

package/src/nodes-equal.js

@@ -0,0 +1,11 @@
+import { DOM_TYPES } from "./h.js";
+
+export function areNodesEqual(nodeOne, nodeTwo) {
+    if (nodeOne.type !== nodeTwo.type) return false;
+
+    if (nodeOne.type === DOM_TYPES.ELEMENT) {
+        return nodeOne.tag === nodeTwo.tag;
+    }
+
+    return true;
+}

package/src/patch-dom.js

@@ -0,0 +1,179 @@
+import { areNodesEqual } from "./nodes-equal.js";
+import { destroyDOM } from "./destroy-dom.js";
+import { mountDOM } from "./mount-dom.js";
+import { DOM_TYPES, extractChildren } from "./h.js";
+import { objectsDiff } from "./utils/objects.js";
+import { removeAttribute, removeStyle, setAttribute, setStyle } from "./attributes.js";
+import { ARRAY_DIFF_OP, arraysDiff, arraysDiffSequence } from "./utils/arrays.js";
+import { isNotBlankOrEmptyString } from "./utils/strings.js";
+import { addEventListener } from "./events.js";
+
+export function patchDOM(oldVNode, newVNode, parentEl) {
+    if (!areNodesEqual(oldVNode, newVNode)) {
+        const index = findIndexInParent(parentEl, oldVNode.el);
+        destroyDOM(oldVNode);
+        mountDOM(newVNode, parentEl, index);
+
+        return newVNode;
+    }
+
+    newVNode.el = oldVNode.el;
+
+    switch (newVNode.type) {
+        case DOM_TYPES.TEXT: {
+            patchText(oldVNode, newVNode);
+            return newVNode;
+        }
+
+        case DOM_TYPES.ELEMENT: {
+            patchElement(oldVNode, newVNode);
+            break;
+        }
+    }
+
+    patchChildren(oldVNode, newVNode);
+
+    return newVNode;
+}
+
+function findIndexInParent(parentEl, el) {
+    const index = Array.from(parentEl.childNodes).indexOf(el);
+    if (index < 0) return null;
+
+    return index;
+}
+
+function patchText(oldVNode, newVNode) {
+    const el = oldVNode.el;
+    const { value: oldText } = oldVNode;
+    const { value: newText } = newVNode;
+
+    if (oldText !== newText) {
+        el.nodeValue = newText;
+    }
+}
+
+function patchElement(oldVNode, newVNode) {
+    const el = oldVNode.el;
+
+    const {
+        class: oldClass,
+        style: oldStyle,
+        on: oldEvents,
+        ...oldAttrs
+    } = oldVNode.props;
+
+    const {
+        class: newClass,
+        style: newStyle,
+        on: newEvents,
+        ...newAttrs
+    } = newVNode.props;
+
+    const { listeners: oldListeners } = oldVNode;
+
+    patchAttrs(el, oldAttrs, newAttrs);
+    patchClasses(el, oldClass, newClass);
+    patchStyles(el, oldStyle, newStyle);
+    newVNode.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);
+    }
+
+    // Concatenate added and updated attributes and set them to element.
+    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)) {
+        addedListeners[eventName] = addEventListener(eventName, newEvents[eventName], el);
+    }
+
+    return addedListeners;
+}
+
+function patchChildren(oldVNode, newVNode) {
+    const oldChildren = extractChildren(oldVNode);
+    const newChildren = extractChildren(newVNode);
+    const parentEl = oldVNode.el;
+
+    const diffSeq = arraysDiffSequence(oldChildren, newChildren, areNodesEqual);
+
+    for (const operation of diffSeq) {
+        const { originalIndex, from, 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 el = oldChildren[from].el;
+                const elAtTargetIndex = parentEl.childNodes[index];
+
+                parentEl.insertBefore(el, elAtTargetIndex);
+                patchDOM(oldChildren[from], newChildren[index], parentEl);
+                break;
+            }
+
+            case ARRAY_DIFF_OP.NOOP: {
+                patchDOM(oldChildren[originalIndex], newChildren[index], parentEl)
+                break;
+            }
+        }
+    }
+}

package/src/utils/arrays.js

@@ -1,4 +1,202 @@
 // Filter out null values from the array.
 export function withoutNulls(arr) {
     return arr.filter((item) => item != null);
+}
+
+export function arraysDiff(oldArray, newArray) {
+    return {
+        added: newArray.filter(
+            (newItem) => !oldArray.includes(newItem)
+        ),
+        removed: oldArray.filter(
+            (oldItem) => !newArray.includes(oldItem)
+        ),
+    }
+}
+
+export const ARRAY_DIFF_OP = {
+    ADD: 'add',
+    REMOVE: 'remove',
+    MOVE: 'move',
+    NOOP: 'noop'
+}
+
+class ArrayWithOriginalIndices {
+    #oldArray = [];
+    #originalIndices = [];
+    #equalsFn;
+
+    constructor(array, equalsFn) {
+        this.#oldArray = [...array];
+        this.#originalIndices = array.map((value, index) => index);
+        this.#equalsFn = equalsFn;
+    }
+
+    get length() {
+        return this.#oldArray.length;
+    }
+
+    originalIndexAt(index) {
+        return this.#originalIndices[index];
+    }
+
+    // REMOVE
+    isRemoval(index, newArray) {
+        // Bail out if index is past the end of the old array.
+        if (index >= this.length) { return false; }
+
+        const item = this.#oldArray[index];
+        const indexInNewArray = newArray.findIndex((newArrayItem) => this.#equalsFn(item, newArrayItem))
+
+        return indexInNewArray === -1;
+    }
+
+    removeItem(index) {
+        const operation = {
+            op: ARRAY_DIFF_OP.REMOVE,
+            index,
+            item: this.#oldArray[index],
+        }
+
+        this.#oldArray.splice(index, 1);
+        this.#originalIndices.splice(index, 1);
+
+        return operation;
+    }
+
+    // NOOP
+    isNoop(index, newArray) {
+        // Bail out if index is past the end of the old array.
+        if (index >= this.length) {return false; }
+
+        const item = this.#oldArray[index];
+        const newArrayItem = newArray[index];
+
+        return this.#equalsFn(item, newArrayItem);
+    }
+
+    noopItem(index) {
+        return {
+            op: ARRAY_DIFF_OP.NOOP,
+            originalIndex: this.originalIndexAt(index),
+            index,
+            item: this.#oldArray[index],
+        }
+    }
+
+    // ADD
+    isAddition(item, fromIndex) {
+        return this.findFromIndex(item, fromIndex) === -1;
+    }
+
+    findFromIndex(item, fromIndex) {
+        for (let i = fromIndex; i < this.length; i++) {
+            if (this.#equalsFn(item, this.#oldArray[i])) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    addItem(item, index) {
+        const operation = {
+            op: ARRAY_DIFF_OP.ADD,
+            index,
+            item
+        }
+
+        this.#oldArray.splice(index, 0, item);
+        this.#originalIndices.splice(index, 0, -1);
+
+        return operation;
+    }
+
+    // MOVE
+    moveItem(item, toIndex) {
+        const fromIndex = this.findFromIndex(item, toIndex);
+
+        const operation = {
+            op: ARRAY_DIFF_OP.MOVE,
+            originalIndex: this.originalIndexAt(fromIndex),
+            from: fromIndex,
+            index: toIndex,
+            item: this.#oldArray[fromIndex],
+        }
+
+        const [itemToMove] = this.#oldArray.splice(fromIndex, 1);
+        this.#oldArray.splice(toIndex, 0, itemToMove);
+
+        const [originalIndex] = this.#originalIndices.splice(fromIndex, 1);
+        this.#originalIndices.splice(toIndex, 0, originalIndex);
+
+        return operation;
+    }
+
+    // REMOVE ITEMS AFTER
+    removeItemsAfter(index) {
+        const operations = [];
+
+        while (this.length > index) {
+            operations.push(this.removeItem(index))
+        }
+
+        return operations;
+    }
+}
+
+export function arraysDiffSequence(oldArray, newArray, equalsFn = (a, b) => a === b) {
+    const sequence = [];
+
+    // Store old array with original indices preserved.
+    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;
+}
+
+export function applyArraysDiffSequence(oldArray, diffSequence) {
+    return diffSequence.reduce((array, { op, item, index, from }) => {
+        switch (op) {
+            // Insert an item at the specified index.
+            case 'add':
+                array.splice(index, 0, item)
+                break
+
+            // Remove an element at the specified index.
+            case 'remove':
+                array.splice(index, 1)
+                break
+
+            // Remove element at index 'from' and move it to specified index.
+            case 'move':
+                array.splice(index, 0, array.splice(from, 1)[0])
+                break
+        }
+
+        return array
+    }, oldArray)
 }

package/src/utils/objects.js

@@ -0,0 +1,12 @@
+export function objectsDiff(oldObj, newObj) {
+    const oldKeys = Object.keys(oldObj);
+    const newKeys = Object.keys(newObj);
+
+    return {
+        added: newKeys.filter((newKey) => !(newKey in oldObj)),
+        removed: oldKeys.filter((oldKey) => !(oldKey in newObj)),
+        updated: newKeys.filter(
+            (key) => key in oldObj && oldObj[key] !== newObj[key]
+        ),
+    }
+}

package/src/utils/strings.js

@@ -0,0 +1,7 @@
+export function isNotEmptyString(str) {
+    return str !== '';
+}
+
+export function isNotBlankOrEmptyString(str) {
+    return isNotEmptyString(str.trim());
+}