ks-fwork 4.1.0 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",
@@ -9,20 +9,17 @@
   "module": "dist/ks-fwork.js",
   "exports": "./dist/ks-fwork.js",
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c"
+    "build": "vite build"
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "rollup": "^4.24.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-filesize": "^10.0.0"
+    "vite": "^8.1.3"
   }
 }

package/src/app.js

@@ -1,36 +0,0 @@
-import { destroyDOM } from "./destroy-dom.js";
-import { mountDOM } from "./mount-dom.js";
-import { h } from "./h.js";
-
-export function createApp(RootComponent, props = {}) {
-    let parentEl = null;
-    let rootNode = null;
-    let isMounted = false;
-
-    function reset() {
-        parentEl = null;
-        rootNode = null;
-        isMounted = false;
-    }
-
-    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;
-            rootNode = h(RootComponent, props);
-            mountDOM(rootNode, parentEl);
-
-            isMounted = true;
-        },
-
-        // Detach the app: remove its DOM and cancel every subscription.
-        unmount() {
-            if (!isMounted) throw new Error('The application is not mounted');
-
-            destroyDOM(rootNode);
-            reset();
-        },
-    }
-}

package/src/attributes.js

@@ -1,62 +0,0 @@
-// Set attributes to an element
-export 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);
-    }
-}
-
-// Set class or array of classes to an element
-function setClass(el, className) {
-    el.className = '';
-
-    // If classes are set as string
-    if (typeof className === 'string') {
-        el.className = className;
-    }
-
-    // If classes are set as an array
-    if (Array.isArray(className)) {
-        el.classList.add(...className);
-    }
-}
-
-// Set style to an element
-export function setStyle(el, name, value) {
-    el.style[name] = value;
-}
-
-// Remove style from an element
-export function removeStyle(el, name) {
-    el.style[name] = null;
-}
-
-// Set attribute to an element
-export function setAttribute(el, name, value) {
-    // Remove attributes with no values
-    if (value == null) {
-        removeAttribute(el, name);
-    // Set 'data-*' attributes separately
-    } else if (name.startsWith('data-')) {
-        el.setAttribute(name, value);
-    } else {
-        el[name] = value;
-    }
-}
-
-// Remove attribute from an element
-export function removeAttribute(el, name) {
-    el[name] = null;
-    el.removeAttribute(name);
-}

package/src/component.js

@@ -1,159 +0,0 @@
-import { mountDOM } from "./mount-dom.js";
-import { destroyDOM } from "./destroy-dom.js";
-import { patchDOM } from "./patch-dom.js";
-import { DOM_TYPES, extractChildren } from "./h.js";
-import { hasOwnProperty } from "./utils/objects.js";
-
-import equal from 'fast-deep-equal';
-import { Dispatcher } from "./dispatcher.js";
-
-const emptyFn = () => {};
-
-export function defineComponent({ render, state, onMounted = emptyFn, onUnmounted = emptyFn, ...methods }) {
-    class Component {
-        #isMounted = false;
-        #vNode = null;
-        #hostEl = null;
-        #eventHandlers = null;
-        #parentComponent = null;
-        #dispatcher = new Dispatcher();
-        #subscriptions = [];
-
-        constructor(props = {}, eventHandlers = {}, parentComponent = null) {
-            this.props = props;
-            this.state = state ? state(props) : {};
-            this.#eventHandlers = eventHandlers;
-            this.#parentComponent = parentComponent;
-        }
-
-        onMounted() {
-            return Promise.resolve(onMounted.call(this));
-        }
-
-        onUnmounted() {
-            return Promise.resolve(onUnmounted.call(this));
-        }
-
-        get elements() {
-            // If vNode is null, return an empty array
-            if (this.#vNode == null) {
-                return [];
-            }
-
-            // If vNode's top element is fragment, return the elements inside it
-            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];
-                });
-            }
-
-            // If vNode's top element is a single node, return its element
-            return [this.#vNode.el];
-        }
-
-        // Return component's first element
-        get firstElement() {
-            return this.elements[0];
-        }
-
-        // Return component's first element offset inside the parent element. If is not fragment, return offset 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);
-        }
-
-        emit(eventName, payload) {
-            this.#dispatcher.dispatch(eventName, payload);
-        }
-
-        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.#wireEventHandlers();
-
-            this.#hostEl = hostEl;
-            this.#isMounted = true;
-        }
-
-        unmount() {
-            if (!this.#isMounted) {
-                throw new Error('Component is not mounted');
-            }
-
-            destroyDOM(this.#vNode);
-            this.#subscriptions.forEach((unsubscribe) => unsubscribe());
-
-            this.#vNode = null;
-            this.#hostEl = null;
-            this.#isMounted = false;
-            this.#subscriptions = [];
-        }
-
-        #patch() {
-            if (!this.#isMounted) {
-                throw new Error('Component is not mounted');
-            }
-
-            const vNode = this.render();
-            this.#vNode = patchDOM(this.#vNode, vNode, this.#hostEl, this);
-        }
-
-        #wireEventHandlers() {
-            this.#subscriptions = Object.entries(this.#eventHandlers).map(
-                ([eventName, handler]) =>
-                    this.#wireEventHandler(eventName, handler)
-            )
-        }
-
-        #wireEventHandler(eventName, handler) {
-            return this.#dispatcher.subscribe(eventName, (payload) => {
-                if (this.#parentComponent) {
-                    handler.call(this.#parentComponent, payload)
-                } else {
-                    handler(payload)
-                }
-            })
-        }
-    }
-
-    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;
-}

package/src/destroy-dom.js

@@ -1,64 +0,0 @@
-import { removeEventListeners } from './events.js'
-import { DOM_TYPES } from "./h.js";
-import { enqueueJob } from "./scheduler.js";
-
-// Recursively destroy a virtual node (and its subtree).
-export 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();
-            enqueueJob(() => vNode.component.onUnmounted());
-            break;
-        }
-
-        default: {
-            throw new Error(`Can't destroy virtual node of type: ${vNode.type}`);
-        }
-    }
-
-    // Drop the reference to the DOM element
-    delete vNode.el;
-}
-
-// Detach the text node from the DOM.
-function removeTextNode(vNode) {
-    const { el } = vNode;
-    el.remove();
-}
-
-// Recursively destroy the element's children, remove its event listeners, then detach the element.
-function removeElementNode(vNode) {
-    const { el, children, listeners } = vNode;
-
-    children.forEach(destroyDOM)
-
-    if (listeners) {
-        removeEventListeners(listeners, el);
-        delete vNode.listeners;
-    }
-
-    el.remove();
-}
-
-// Fragment has no DOM element. Destroy fragment node's children recursively.
-function removeFragmentNode(vNode) {
-    const { children } = vNode;
-    children.forEach(destroyDOM);
-}

package/src/dispatcher.js

@@ -1,56 +0,0 @@
-export class Dispatcher {
-    // All registered commands mapped to their handlers (callback functions)
-    #handlersByCommand = new Map();
-
-    // Handlers that run after every dispatch, regardless of command
-    #afterHandlers = [];
-
-    // Subscribe to a command
-    subscribe(commandName, handler) {
-        // Create an empty handler array for this command if none exists yet
-        if (!this.#handlersByCommand.has(commandName)) {
-            this.#handlersByCommand.set(commandName, []);
-        }
-
-        // Get the handler array for this command
-        const handlers = this.#handlersByCommand.get(commandName);
-
-        // If this exact handler reference is already registered, skip it and return a no-op unsubscribe
-        if (handlers.includes(handler)) {
-            return () => {}
-        }
-
-        // Register the handler
-        handlers.push(handler);
-
-        // Return unsubscribe function
-        return () => {
-            const index = handlers.indexOf(handler);
-            handlers.splice(index, 1);
-        }
-    }
-
-    // Register a handler that will be called after every dispatch
-    afterEveryCommand(handler) {
-        this.#afterHandlers.push(handler);
-
-        // Return unsubscribe function
-        return () => {
-            const index = this.#afterHandlers.indexOf(handler);
-            this.#afterHandlers.splice(index, 1);
-        }
-    }
-
-    // Dispatch a command: run its handlers with the payload
-    dispatch(commandName, payload) {
-        if (this.#handlersByCommand.has(commandName)) {
-            // Call every handler subscribed to this command
-            this.#handlersByCommand.get(commandName).forEach((handler) => handler(payload))
-        } else {
-            console.warn(`No handlers for command: ${commandName}`);
-        }
-
-        // Call all 'afterEveryCommand' handlers (no payload)
-        this.#afterHandlers.forEach((handler) => handler());
-    }
-}

package/src/events.js

@@ -1,28 +0,0 @@
-// Add an object of event listeners to an element
-export function addEventListeners(listeners = {}, el, hostComponent = null) {
-    const addedListeners = {};
-
-    Object.entries(listeners).forEach(([eventName, handler]) => {
-        addedListeners[eventName] = addEventListener(eventName, handler, el, hostComponent);
-    });
-
-    return addedListeners;
-}
-
-// Add an event listener to an element
-export function addEventListener(eventName, handler, el, hostComponent = null) {
-    function boundHandler() {
-        hostComponent ? handler.apply(hostComponent, arguments) : handler(...arguments);
-    }
-
-    el.addEventListener(eventName, boundHandler);
-
-    return boundHandler;
-}
-
-// Remove an object of event listeners from an element
-export function removeEventListeners(listeners = {}, el) {
-    Object.entries(listeners).forEach(([eventName, handler]) => {
-        el.removeEventListener(eventName, handler);
-    })
-}

package/src/h.js

@@ -1,74 +0,0 @@
-import { withoutNulls } from './utils/arrays.js';
-
-export const DOM_TYPES = {
-    TEXT: 'text',
-    ELEMENT: 'element',
-    FRAGMENT: 'fragment',
-    COMPONENT: 'component'
-}
-
-// Create a virtual DOM element
-export function h(tag, props = {}, children = []) {
-    const type = typeof tag === 'string' ? DOM_TYPES.ELEMENT : DOM_TYPES.COMPONENT;
-
-    return {
-        tag,
-        props,
-        type,
-        children: mapTextNodes(withoutNulls(children)),
-    }
-}
-
-// Create a virtual text node
-export function hString(str) {
-    return {
-        type: DOM_TYPES.TEXT,
-        value: str
-    };
-}
-
-// Create a fragment node
-export function hFragment(vNodes) {
-    return {
-        children: mapTextNodes(withoutNulls(vNodes)),
-        type: DOM_TYPES.FRAGMENT,
-    }
-}
-
-// Transform strings into text virtual nodes
-function mapTextNodes(children) {
-    return children.map((child) =>
-        typeof child === 'string' ? hString(child) : child
-    )
-}
-
-// Create an array with specified amount of empty elements and fill them with 'p' virtual node that has text as children.
-export function lipsum(numberOfParagraphs) {
-    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-     ut aliquip ex ea commodo consequat.`;
-
-    return hFragment(
-        Array(numberOfParagraphs).fill(
-            h('p', {}, [text])
-        )
-    );
-}
-
-// Recursively extract a node's children into a flat list, dissolving any nested fragments into their child nodes
-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/index.js

@@ -1,4 +0,0 @@
-export { createApp } from './app.js'
-export { defineComponent } from './component.js'
-export { h, hFragment, hString } from './h.js'
-export { nextTick } from './scheduler.js'

package/src/mount-dom.js

@@ -1,108 +0,0 @@
-import { DOM_TYPES } from "./h.js";
-import { setAttributes } from './attributes.js'
-import { addEventListeners } from "./events.js";
-import { enqueueJob } from "./scheduler.js";
-import { extractPropsAndEvents } from "./utils/props.js";
-
-// Recursively mount a virtual node (and its subtree) into a real parent DOM element.
-export 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, hostComponent);
-            enqueueJob(() => vNode.component.onMounted());
-            break;
-        }
-
-        default: {
-            throw new Error(`Can't mount virtual node of type: ${vNode.type}`);
-        }
-    }
-}
-
-// Create a real text node, save a reference to it on the vNode, and append it to the parent.
-function createTextNode(vNode, parentEl, index) {
-    const { value } = vNode;
-
-    const textNode = document.createTextNode(value);
-    vNode.el = 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, index, hostComponent) {
-    const { tag, children } = vNode;
-
-    const el = document.createElement(tag);
-    addProps(el, vNode, hostComponent);
-    vNode.el = el;
-
-    children.forEach((child) => mountDOM(child, el, null, hostComponent));
-    insert(el, parentEl, index);
-}
-
-// Fragment has no DOM element. Mount its children directly into the parent.
-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, events } = extractPropsAndEvents(vNode);
-    const component = new Component(props, events, hostComponent);
-
-    component.mount(parentEl, index);
-    vNode.component = component;
-    vNode.el = component.firstElement;
-}
-
-// Split props into event listeners ('on') and attributes and add them to DOM element.
-function addProps(el, vNode, hostComponent) {
-    const { props: attrs, events} = extractPropsAndEvents(vNode);
-
-    vNode.listeners = addEventListeners(events, el, hostComponent);
-    setAttributes(el, attrs);
-}
-
-// Insert element into parent element at the specified index (or append if no index given)
-function insert(el, parentEl, index) {
-    // Append if no index specified (null or undefined)
-    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) {
-        // Append if index is greater than or equal to the parent element's length of children
-        parentEl.append(el);
-    } else {
-        // Insert before the element at the specified index
-        parentEl.insertBefore(el, children[index]);
-    }
-}

package/src/nodes-equal.js

@@ -1,23 +0,0 @@
-import { DOM_TYPES } from "./h.js";
-
-export function areNodesEqual(nodeOne, nodeTwo) {
-    // Nodes are different type
-    if (nodeOne.type !== nodeTwo.type) return false;
-
-    if (nodeOne.type === DOM_TYPES.ELEMENT) {
-        const { tag: tagOne, props: { key: keyOne } } = nodeOne;
-        const { tag: tagTwo, props: { key: keyTwo } } = nodeTwo;
-
-        return tagOne === tagTwo && keyOne === keyTwo;
-    }
-
-    if (nodeOne.type === DOM_TYPES.COMPONENT) {
-        const { tag: componentOne, props: { key: keyOne } } = nodeOne;
-        const { tag: componentTwo, props: { key: keyTwo } } = nodeTwo;
-
-        return componentOne === componentTwo && keyOne === keyTwo;
-    }
-
-    // Text and fragment nodes are always equal
-    return true;
-}