ks-fwork 4.1.1 → 4.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",
@@ -9,7 +9,7 @@
   "module": "dist/ks-fwork.js",
   "exports": "./dist/ks-fwork.js",
   "files": [
-    "src"
+    "dist"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -19,7 +19,6 @@
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
-    "rollup-plugin-cleanup": "^3.2.1",
     "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;
-}

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());
-}