ks-fwork 3.0.0 → 3.0.1

package/dist/ks-fwork.js

@@ -0,0 +1,725 @@
+function addEventListeners(listeners = {}, el, hostComponent = null) {
+    const addedListeners = {};
+    Object.entries(listeners).forEach(([eventName, handler]) => {
+        addedListeners[eventName] = addEventListener(eventName, handler, el, hostComponent);
+    });
+    return addedListeners;
+}
+function addEventListener(eventName, handler, el, hostComponent = null) {
+    function boundHandler() {
+        hostComponent ? handler.apply(hostComponent, arguments) : handler(...arguments);
+    }
+    el.addEventListener(eventName, boundHandler);
+    return boundHandler;
+}
+function removeEventListeners(listeners = {}, el) {
+    Object.entries(listeners).forEach(([eventName, handler]) => {
+        el.removeEventListener(eventName, handler);
+    });
+}
+
+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'
+};
+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];
+    }
+    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;
+    }
+    isRemoval(index, newArray) {
+        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;
+    }
+    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;
+    }
+    isNoop(index, newArray) {
+        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],
+        }
+    }
+    removeItemsAfter(index) {
+        const operations = [];
+        while (this.length > index) {
+            operations.push(this.removeItem(index));
+        }
+        return operations;
+    }
+    findIndexFrom(item, startIndex) {
+        for (let i = startIndex; i < this.length; i++) {
+            if (this.#equalsFn(item, this.#oldArray[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}
+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',
+    ELEMENT: 'element',
+    FRAGMENT: 'fragment',
+    COMPONENT: 'component'
+};
+function h(tag, props = {}, children = []) {
+    const type = typeof tag === 'string' ? DOM_TYPES.ELEMENT : DOM_TYPES.COMPONENT;
+    return {
+        tag,
+        props,
+        type,
+        children: mapTextNodes(withoutNulls(children)),
+    }
+}
+function hString(str) {
+    return {
+        type: DOM_TYPES.TEXT,
+        value: str
+    };
+}
+function hFragment(vNodes) {
+    return {
+        children: mapTextNodes(withoutNulls(vNodes)),
+        type: DOM_TYPES.FRAGMENT,
+    }
+}
+function mapTextNodes(children) {
+    return children.map((child) =>
+        typeof child === 'string' ? hString(child) : child
+    )
+}
+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;
+}
+
+function destroyDOM(vNode) {
+    const { type } = vNode;
+    switch (type) {
+        case DOM_TYPES.TEXT: {
+            removeTextNode(vNode);
+            break;
+        }
+        case DOM_TYPES.ELEMENT: {
+            removeElementNode(vNode);
+            break;
+        }
+        case DOM_TYPES.FRAGMENT: {
+            removeFragmentNode(vNode);
+            break;
+        }
+        case DOM_TYPES.COMPONENT: {
+            vNode.component.unmount();
+            break;
+        }
+        default: {
+            throw new Error(`Can't destroy virtual node of type: ${vNode.type}`);
+        }
+    }
+    delete vNode.el;
+}
+function removeTextNode(vNode) {
+    const { el } = vNode;
+    el.remove();
+}
+function removeElementNode(vNode) {
+    const { el, children, listeners } = vNode;
+    children.forEach(destroyDOM);
+    if (listeners) {
+        removeEventListeners(listeners, el);
+        delete vNode.listeners;
+    }
+    el.remove();
+}
+function removeFragmentNode(vNode) {
+    const { children } = vNode;
+    children.forEach(destroyDOM);
+}
+
+class Dispatcher {
+    #handlersByCommand = new Map();
+    #afterHandlers = [];
+    subscribe(commandName, handler) {
+        if (!this.#handlersByCommand.has(commandName)) {
+            this.#handlersByCommand.set(commandName, []);
+        }
+        const handlers = this.#handlersByCommand.get(commandName);
+        if (handlers.includes(handler)) {
+            return () => {}
+        }
+        handlers.push(handler);
+        return () => {
+            const index = handlers.indexOf(handler);
+            handlers.splice(index, 1);
+        }
+    }
+    afterEveryCommand(handler) {
+        this.#afterHandlers.push(handler);
+        return () => {
+            const index = this.#afterHandlers.indexOf(handler);
+            this.#afterHandlers.splice(index, 1);
+        }
+    }
+    dispatch(commandName, payload) {
+        if (this.#handlersByCommand.has(commandName)) {
+            this.#handlersByCommand.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) {
+        setClass(el, className);
+    }
+    if (style) {
+        Object.entries(style).forEach(([prop, value]) => {
+            setStyle(el, prop, value);
+        });
+    }
+    for (const [name, value] of Object.entries(otherAttrs)) {
+        setAttribute(el, name, value);
+    }
+}
+function setClass(el, className) {
+    el.className = '';
+    if (typeof className === 'string') {
+        el.className = className;
+    }
+    if (Array.isArray(className)) {
+        el.classList.add(...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);
+    } else if (name.startsWith('data-')) {
+        el.setAttribute(name, value);
+    } else {
+        el[name] = value;
+    }
+}
+function removeAttribute(el, name) {
+    el[name] = null;
+    el.removeAttribute(name);
+}
+
+function mountDOM(vNode, parentEl, index, hostComponent = null) {
+    switch (vNode.type) {
+        case DOM_TYPES.TEXT: {
+            createTextNode(vNode, parentEl, index);
+            break;
+        }
+        case DOM_TYPES.ELEMENT: {
+            createElementNode(vNode, parentEl, index, hostComponent);
+            break;
+        }
+        case DOM_TYPES.FRAGMENT: {
+            createFragmentNode(vNode, parentEl, index, hostComponent);
+            break;
+        }
+        case DOM_TYPES.COMPONENT: {
+            createComponentNode(vNode, parentEl, index);
+        }
+        default: {
+            throw new Error(`Can't mount virtual node of type: ${vNode.type}`);
+        }
+    }
+}
+function createTextNode(vNode, parentEl, index) {
+    const { value } = vNode;
+    const textNode = document.createTextNode(value);
+    vNode.el = textNode;
+    insert(textNode, parentEl, index);
+}
+function createElementNode(vNode, parentEl, index, hostComponent) {
+    const { tag, props, children } = vNode;
+    const el = document.createElement(tag);
+    addProps(el, props, vNode, hostComponent);
+    vNode.el = el;
+    children.forEach((child) => mountDOM(child, el, null, hostComponent));
+    insert(el, parentEl, index);
+}
+function createFragmentNode(vNode, parentEl, index, hostComponent) {
+    const { children } = vNode;
+    vNode.el = parentEl;
+    children.forEach((child, i) => {
+        mountDOM(child, parentEl, index ? index + i : null, hostComponent);
+    });
+}
+function createComponentNode(vNode, parentEl, index, hostComponent) {
+    const Component = vNode.tag;
+    const props = vNode.props;
+    const component = new Component(props);
+    component.mount(parentEl, index);
+    vNode.component = component;
+    vNode.el = component.firstElement;
+}
+function addProps(el, props, vNode, hostComponent) {
+    const { on: events, ...attrs} = props;
+    vNode.listeners = addEventListeners(events, el, hostComponent);
+    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]);
+    }
+}
+
+function areNodesEqual(nodeOne, nodeTwo) {
+    if (nodeOne.type !== nodeTwo.type) return false;
+    if (nodeOne.type === DOM_TYPES.ELEMENT) {
+        return nodeOne.tag === nodeTwo.tag;
+    }
+    return true;
+}
+
+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]
+        ),
+    }
+}
+function hasOwnProperty(obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+function isNotEmptyString(str) {
+    return str !== '';
+}
+function isNotBlankOrEmptyString(str) {
+    return isNotEmptyString(str.trim());
+}
+
+function patchDOM(oldVNode, newVNode, parentEl, hostComponent = null) {
+    if (!areNodesEqual(oldVNode, newVNode)) {
+        const index = findIndexInParent(parentEl, oldVNode.el);
+        destroyDOM(oldVNode);
+        mountDOM(newVNode, parentEl, index, hostComponent);
+        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, hostComponent);
+            break;
+        }
+        case DOM_TYPES.COMPONENT: {
+            patchComponent(oldVNode, newVNode);
+            break;
+        }
+    }
+    patchChildren(oldVNode, newVNode, hostComponent);
+    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, 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 } = 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);
+    }
+    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;
+}
+function patchChildren(oldVNode, newVNode, hostComponent) {
+    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;
+        const offset = hostComponent?.offset ?? 0;
+        switch (operation.op) {
+            case ARRAY_DIFF_OP.ADD: {
+                mountDOM(item, parentEl, index, hostComponent);
+                break;
+            }
+            case ARRAY_DIFF_OP.REMOVE: {
+                destroyDOM(item);
+                break;
+            }
+            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;
+            }
+            case ARRAY_DIFF_OP.NOOP: {
+                patchDOM(oldChildren[originalIndex], newChildren[index], parentEl, hostComponent);
+                break;
+            }
+        }
+    }
+}
+
+function createApp({state, view, reducers = {} }) {
+    let parentEl = null;
+    let rootNode = null;
+    let isMounted = false;
+    const dispatcher = new Dispatcher();
+    const unsubscribers = [dispatcher.afterEveryCommand(renderApp)];
+    for (const actionName in reducers) {
+        const reducer = reducers[actionName];
+        const unsubscribe = dispatcher.subscribe(actionName, (payload) => {
+            state = reducer(state, payload);
+        });
+        unsubscribers.push(unsubscribe);
+    }
+    function emit(actionName, payload) {
+        dispatcher.dispatch(actionName, payload);
+    }
+    function renderApp() {
+        const newRootNode = view(state, emit);
+        rootNode = patchDOM(rootNode, newRootNode, parentEl);
+    }
+    return {
+        mount(_parentEl) {
+            if (isMounted) throw new Error('The application is already mounted');
+            parentEl = _parentEl;
+            rootNode = view(state, emit);
+            mountDOM(rootNode, parentEl);
+        },
+        unmount() {
+            if (rootNode) {
+                destroyDOM(rootNode);
+            }
+            rootNode = null;
+            unsubscribers.forEach((unsubscribe) => unsubscribe());
+            isMounted = false;
+        },
+    }
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var fastDeepEqual;
+var hasRequiredFastDeepEqual;
+function requireFastDeepEqual () {
+	if (hasRequiredFastDeepEqual) return fastDeepEqual;
+	hasRequiredFastDeepEqual = 1;
+	fastDeepEqual = function equal(a, b) {
+	  if (a === b) return true;
+	  if (a && b && typeof a == 'object' && typeof b == 'object') {
+	    if (a.constructor !== b.constructor) return false;
+	    var length, i, keys;
+	    if (Array.isArray(a)) {
+	      length = a.length;
+	      if (length != b.length) return false;
+	      for (i = length; i-- !== 0;)
+	        if (!equal(a[i], b[i])) return false;
+	      return true;
+	    }
+	    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+	    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+	    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+	    keys = Object.keys(a);
+	    length = keys.length;
+	    if (length !== Object.keys(b).length) return false;
+	    for (i = length; i-- !== 0;)
+	      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+	    for (i = length; i-- !== 0;) {
+	      var key = keys[i];
+	      if (!equal(a[key], b[key])) return false;
+	    }
+	    return true;
+	  }
+	  return a!==a && b!==b;
+	};
+	return fastDeepEqual;
+}
+
+var fastDeepEqualExports = requireFastDeepEqual();
+var equal = /*@__PURE__*/getDefaultExportFromCjs(fastDeepEqualExports);
+
+function defineComponent({ render, state, ...methods }) {
+    class Component {
+        #isMounted = false;
+        #vNode = null;
+        #hostEl = null;
+        constructor(props = {}) {
+            this.props = props;
+            this.state = state ? state(props) : {};
+        }
+        get elements() {
+            if (this.#vNode == null) {
+                return [];
+            }
+            if (this.#vNode.type === DOM_TYPES.FRAGMENT) {
+                return extractChildren(this.#vNode).flatMap((child) => {
+                    if (child.type === DOM_TYPES.COMPONENT) {
+                        return child.component.elements;
+                    }
+                    return [child.el];
+                });
+            }
+            return [this.#vNode.el];
+        }
+        get firstElement() {
+            return this.elements[0];
+        }
+        get offset() {
+            if(this.#vNode.type === DOM_TYPES.FRAGMENT) {
+                return Array.from(this.#hostEl.children).indexOf(this.firstElement);
+            }
+            return 0;
+        }
+        updateProps(props) {
+            const newProps = { ...this.props, ...props };
+            if (equal(this.props, newProps)) {
+                return;
+            }
+            this.props = newProps;
+            this.#patch();
+        }
+        updateState(state) {
+            this.state = { ...this.state, ...state };
+            this.#patch();
+        }
+        render() {
+            return render.call(this);
+        }
+        mount(hostEl, index = null) {
+            if (this.#isMounted) {
+                throw new Error('Component is already mounted');
+            }
+            this.#vNode = this.render();
+            mountDOM(this.#vNode, hostEl, index, this);
+            this.#hostEl = hostEl;
+            this.#isMounted = true;
+        }
+        unmount() {
+            if (!this.#isMounted) {
+                throw new Error('Component is not mounted');
+            }
+            destroyDOM(this.#vNode);
+            this.#vNode = null;
+            this.#hostEl = null;
+            this.#isMounted = false;
+        }
+        #patch() {
+            if (!this.#isMounted) {
+                throw new Error('Component is not mounted');
+            }
+            const vNode = this.render();
+            this.#vNode = patchDOM(this.#vNode, vNode, this.#hostEl, this);
+        }
+    }
+    for (const methodName in methods) {
+        if (hasOwnProperty(Component, methodName)) {
+            throw new Error(`Method "${methodName}()" already exists in the component.`);
+        }
+        Component.prototype[methodName] = methods[methodName];
+    }
+    return Component;
+}
+
+export { createApp, defineComponent, h, hFragment, hString };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "ks-fwork",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",
   "type": "module",
-  "main": "src/index.js",
-  "exports": "./src/index.js",
+  "main": "dist/ks-fwork.js",
+  "module": "dist/ks-fwork.js",
+  "exports": "./dist/ks-fwork.js",
   "files": [
     "src"
   ],