ks-fwork 4.1.0 → 4.1.2

package/src/patch-dom.js

@@ -1,212 +0,0 @@
-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";
-import { extractPropsAndEvents } from "./utils/props.js";
-
-export function patchDOM(oldVNode, newVNode, parentEl, hostComponent = null) {
-    // Nodes are too different to reuse/patch.
-    if (!areNodesEqual(oldVNode, newVNode)) {
-        // Remember where the old node was located inside the parent so the replacement lands in the same spot.
-        const index = findIndexInParent(parentEl, oldVNode.el);
-
-        // Destroy the old node and its whole subtree.
-        destroyDOM(oldVNode);
-
-        // Mount the new node and its whole subtree at the index of the old node.
-        mountDOM(newVNode, parentEl, index, hostComponent);
-
-        return newVNode;
-    }
-
-    // Copy over the DOM element reference
-    newVNode.el = oldVNode.el;
-
-    switch (newVNode.type) {
-        case DOM_TYPES.TEXT: {
-            patchText(oldVNode, newVNode);
-            return newVNode;
-        }
-
-        case DOM_TYPES.ELEMENT: {
-            patchElement(oldVNode, newVNode, hostComponent);
-            break;
-        }
-
-        case DOM_TYPES.COMPONENT: {
-            patchComponent(oldVNode, newVNode);
-            break;
-        }
-    }
-
-    patchChildren(oldVNode, newVNode, hostComponent);
-
-    return newVNode;
-}
-
-// Get index of the element inside the parent element
-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, hostComponent) {
-    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, hostComponent);
-}
-
-function patchComponent(oldVNode, newVNode) {
-    const { component } = oldVNode;
-    const { props } = extractPropsAndEvents(newVNode);
-
-    component.updateProps(props);
-
-    newVNode.component = component;
-    newVNode.el = component.firstElement;
-}
-
-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 = {}, hostComponent) {
-    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, hostComponent);
-    }
-
-    return addedListeners;
-}
-
-// Reconcile a node's child lists.
-function patchChildren(oldVNode, newVNode, hostComponent) {
-    const oldChildren = extractChildren(oldVNode);
-    const newChildren = extractChildren(newVNode);
-    const parentEl = oldVNode.el;
-
-    // Create the sequence of operations to match the note's child lists.
-    const diffSeq = arraysDiffSequence(oldChildren, newChildren, areNodesEqual);
-
-    // Loop over the operations and perform the operations on the DOM.
-    for (const operation of diffSeq) {
-        const { originalIndex, from, index, item } = operation;
-        // Get the host component’s offset, if there is one; offset is 0 otherwise
-        const offset = hostComponent?.offset ?? 0;
-
-        switch (operation.op) {
-            // New node with no old counterpart: build its subtree and insert it at `index`
-            case ARRAY_DIFF_OP.ADD: {
-                mountDOM(item, parentEl, index, hostComponent)
-                break;
-            }
-
-            // Old node gone from the new list: destroy it and its subtree
-            case ARRAY_DIFF_OP.REMOVE: {
-                destroyDOM(item);
-                break;
-            }
-
-            // Node still present but at a different position: move the existing node to its new spot, then patch it in place for any inner changes
-            case ARRAY_DIFF_OP.MOVE: {
-                const el = oldChildren[from].el;
-                const elAtTargetIndex = parentEl.childNodes[index + offset];
-                parentEl.insertBefore(el, elAtTargetIndex);
-
-                patchDOM(oldChildren[from], newChildren[index], parentEl, hostComponent);
-                break;
-            }
-
-            // Same node, same position, but its contents may still differ, so recurse
-            case ARRAY_DIFF_OP.NOOP: {
-                patchDOM(oldChildren[originalIndex], newChildren[index], parentEl, hostComponent);
-                break;
-            }
-        }
-    }
-}

package/src/scheduler.js

@@ -1,37 +0,0 @@
-let isScheduled = false;
-const jobs = [];
-
-export function enqueueJob(job) {
-    jobs.push(job);
-    scheduleUpdate();
-}
-
-function scheduleUpdate() {
-    if (isScheduled) return;
-
-    isScheduled = true;
-    queueMicrotask(processJobs);
-}
-
-function processJobs() {
-    while (jobs.length > 0) {
-        const job = jobs.shift();
-        try {
-            Promise.resolve(job()).catch((error) => {
-                console.error(`[scheduler]: ${error}`);
-            });
-        } catch (error) {
-            console.error(`[scheduler]: ${error}`);
-        }
-    }
-    isScheduled = false;
-}
-
-export function nextTick() {
-    scheduleUpdate();
-    return flushPromises();
-}
-
-function flushPromises() {
-    return new Promise((resolve) => setTimeout(resolve));
-}

package/src/utils/arrays.js

@@ -1,203 +0,0 @@
-// 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];
-    }
-
-    // ADD
-    isAddition(item, startIndex) {
-        return this.findIndexFrom(item, startIndex) === -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;
-    }
-
-    // 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;
-    }
-
-    // MOVE
-    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.#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;
-    }
-
-    // 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],
-        }
-    }
-
-    // Remove all items after specified index
-    removeItemsAfter(index) {
-        const operations = [];
-
-        while (this.length > index) {
-            operations.push(this.removeItem(index))
-        }
-
-        return operations;
-    }
-
-    // Return the first index at or after startIndex where the item matches, or -1 if item is not found.
-    findIndexFrom(item, startIndex) {
-        for (let i = startIndex; i < this.length; i++) {
-            if (this.#equalsFn(item, this.#oldArray[i])) {
-                return i;
-            }
-        }
-
-        return -1;
-    }
-}
-
-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

@@ -1,16 +0,0 @@
-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]
-        ),
-    }
-}
-
-export function hasOwnProperty(obj, prop) {
-    return Object.prototype.hasOwnProperty.call(obj, prop);
-}

package/src/utils/props.js

@@ -1,6 +0,0 @@
-export function extractPropsAndEvents(vNode) {
-    const { on: events = {}, ...props } = vNode.props;
-    delete props.key;
-
-    return { props, events }
-}

package/src/utils/strings.js

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