lahama 2.5.2 → 3.0.0

package/dist/lahama.js

@@ -1,163 +1,26 @@
+import 'vitest/dist/chunks/reporters.d.OXEK7y4s.d.ts';
+
 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'
-};
 const a = { };
 const b = { };
 console.log(a === b);
-class ArrayWithOriginalIndices {
-    #array = []
-    #originalIndices = []
-    #equalsFn
-    constructor(array, equalsFn) {
-        this.#array = [...array];
-        this.#originalIndices = array.map((_, i) => i);
-        this.#equalsFn = equalsFn;
-    }
-    get length() {
-        return this.#array.length
-    }
-    isRemoval(index, newArray) {
-        if (index >= this.length) {
-            return false
-        }
-        const item = this.#array[index];
-        const indexInNewArray = newArray.findIndex((newItem) =>
-        this.#equalsFn(item, newItem)
-        );
-        return indexInNewArray === -1
-    }
-    removeItem(index) {
-        const operation = {
-            op : ARRAY_DIFF_OP.REMOVE,
-            index,
-            item : this.#array[index],
-        };
-        this.#array.splice(index, 1);
-        return operation
-    }
-    isNoop(index, newArray) {
-        if (index >= this.length) {
-            return false
-        }
-        const item = this.#array[index];
-        const newItem = newArray[index];
-        return this.#equalsFn(item, newItem)
-    }
-    originalIndexAt(index) {
-        return this.#originalIndices[index]
-    }
-    noopItem(index) {
-        return {
-            op : ARRAY_DIFF_OP.NOOP,
-            originalIndex : this.originalIndexAt(index),
-            item : this.#array[index],
-        }
-    }
-    isAddition(item, fromIdx) {
-        return this.findIndexFrom(item, fromIdx) === -1
-    }
-    findIndexFrom(item, fromIndex) {
-        for (let i = fromIndex; i < this.length; i++) {
-            if (this.#equalsFn(item, this.#array[i])) {
-                return i
-            }
-        }
-        return -1
-    }
-    addItem(item, index) {
-        const operation = {
-            op : ARRAY_DIFF_OP.ADD,
-            index,
-            item
-        };
-        this.#array.splice(index, 0, item);
-        this.#originalIndices.splice(index, 0, -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.#array[fromIndex]
-        };
-        const [_item] = this.#array.splice(fromIndex, 1);
-        this.#array.splice(toIndex, 0 , _item);
-        const [originalIndex] =
-        this.#originalIndices.splice(fromIndex, 1);
-        this.#originalIndices.splice(toIndex, 0, originalIndex);
-        return operation
-    }
-    removeItemsAfter(index) {
-        const operations = [];
-        while (this.length > index) {
-            operations.push(this.removeItem(index));
-        }
-        return operations
-    }
- }
-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++) {
-        //!REMOVE CASE
-        if (array.isRemoval(index, newArray)) {
-            sequence.push(array.removeItem(index));
-            index--;
-            continue
-        }
-        //!noop case
-        if (array.isNoop(index, newArray)) {
-            sequence.push(array.noopItem(index));
-            continue
-        }
-        //!addition case
-        const item = newArray[index];
-        if (array.isAddition(item , index)) {
-            sequence.push(array.addItem(item, index));
-            continue
-        }
-        //!move case
-        sequence.push(array.moveItem(item, index));
-    }
-    //!remove extra items
-    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)),
-        type : DOM_TYPES.ELEMENT,
     }
 }
 function mapTextNodes(children) {
@@ -177,15 +40,31 @@ function hFragment(vNodes) {
 function addEventListener(
     eventName,
     handler,
-    el
+    el,
+    hostComponent = null
 ) {
-    el.addEventListener(eventName, handler);
-    return handler
+    function boundHandler() {
+        hostComponent
+        ? handler.apply(hostComponent, arguments)
+            : handler(...arguments);
+    }
+    el.addEventListener(eventName, boundHandler);
+    return boundHandler;
 }
-function addEventListeners(listeners = {}, el) {
+function addEventListeners(
+    listeners = {},
+    el,
+    hostComponent = null
+    ) {
     const addedListeners = {};
     Object.entries(listeners).forEach(([eventName, handler]) => {
-        addedListeners[eventName] = addEventListener(eventName, handler, el);
+        const listener = addEventListener(
+            eventName,
+            handler,
+            el,
+            hostComponent
+        );
+        addedListeners[eventName] = listener;
     });
     return addedListeners
 }
@@ -195,45 +74,6 @@ function removeEventListeners(listeners = {}, el) {
     });
 }
 
-function destroyDom(vdom) {
-    const { type } = vdom;
-    switch (type) {
-        case DOM_TYPES.TEXT  : {
-            removeTextNode(vdom);
-            break
-        }
-        case DOM_TYPES.ELEMENT : {
-            removeElementNode(vdom);
-            break
-        }
-        case DOM_TYPES.FRAGMENT : {
-            removeFragmentNode(vdom);
-            break
-        }
-        default : {
-            throw new Error(`Can't destroy DOM of type ${type}`)
-        }
-    }
-    delete vdom.el;
-}
-function removeTextNode(vdom) {
-    const { el } = vdom;
-    el.remove();
-}
-function removeElementNode(vdom) {
- const { el , children, listeners } = vdom;
-    el.remove();
-    children.forEach(destroyDom);
-    if (listeners) {
-        removeEventListeners(listeners, el);
-        delete vdom.listeners;
-    }
-}
-function removeFragmentNode(vdom) {
- const { children } = vdom;
-    children.forEach(destroyDom);
-}
-
 function setAttributes(el, attrs) {
     const { class : className, style, ...otherAttrs} = attrs;
     if (className) {
@@ -260,9 +100,6 @@ function setClass(el, className) {
 function setStyle(el, name, value) {
     el.style[name] = value;
 }
-function removeStyle(el, name) {
-    el.style[name] = null;
-}
 function removeAttributeCustom(el, name) {
     el[name] = null;
     el.removeAttribute(name);
@@ -277,18 +114,33 @@ function setAttribute(el, name, value) {
     }
 }
 
-function mountDom(vdom, parentEl, index) {
+function extractPropsAndEvents(vdom) {
+    const { on : events = {}, ...props } = vdom.props;
+    delete props.key;
+    return { props, events }
+}
+
+function mountDom(
+    vdom,
+    parentEl,
+    index,
+    hostComponent = null
+) {
     switch (vdom.type) {
         case DOM_TYPES.TEXT : {
-            createTextNode(vdom, parentEl, index);
+            createTextNode(vdom, parentEl, index, );
             break
         }
         case DOM_TYPES.ELEMENT : {
-            createElementNode(vdom, parentEl, index);
+            createElementNode(vdom, parentEl, index, hostComponent);
             break
         }
         case DOM_TYPES.FRAGMENT : {
-            createFragmentNodes(vdom, parentEl, index);
+            createFragmentNodes(vdom, parentEl, index, hostComponent);
+            break
+        }
+        case DOM_TYPES.COMPONENT : {
+            createComponentNode(vdom, parentEl, index, hostComponent);
             break
         }
         default : {
@@ -318,295 +170,103 @@ function createTextNode(vdom, parentEl, index) {
     vdom.el = textNode;
     insert(textNode, parentEl, index);
 }
-function createElementNode(vdom, parentEl, index) {
-    const { tag, props , children } = vdom;
+function createElementNode(vdom, parentEl, index, hostComponent) {
+    const { tag, children } = vdom;
     const element = document.createElement(tag);
-    addProps(element, props , vdom);
+    addProps(element, vdom, hostComponent);
     vdom.el = element;
     //!function mountDom(vnode, parentEl) {
-    children.forEach((child) => mountDom(child, element));
+    children.forEach((child) => mountDom(child, element, null, hostComponent));
     insert(element, parentEl, index);
 }
-function addProps(el, props, vdom) {
-    const { on : events, ...attrs } = props;
-    vdom.listeners = addEventListeners(events, el);
+function addProps(el, props, vdom, hostComponent) {
+    const { props : attrs, events } = extractPropsAndEvents(vdom);
+    vdom.listeners = addEventListeners(events, el, hostComponent);
     setAttributes(el, attrs);
 }
-function createFragmentNodes(vdom, parentEl, index) {
+function createFragmentNodes(vdom, parentEl, index, hostComponent) {
     const { children } = vdom;
     vdom.el = parentEl;
-    children.forEach((child, i) => mountDom(child, parentEl, index ? index + i : null));
+    children.forEach((child, i) => mountDom(child, parentEl, index ? index + i : null, hostComponent));
+}
+function createComponentNode(vdom, parentEl, index, hostComponent) {
+    const Component = vdom.tag;
+    const { props, events } = extractPropsAndEvents(vdom);
+    const component = new Component(props, events, hostComponent);
+    component.mount(parentEl, index);
+    vdom.component = component;
+    vdom.el = component.firstElement;
 }
 
-class Dispatcher {
-    #subs = new Map()
-    #afterHandlers = []
-    subscribe(commandName, handler) {
-        if (!this.#subs.has(commandName)) {
-            this.#subs.set(commandName, []);
-        }
-        const handlersArray = this.#subs.get(commandName);
-        if (handlersArray.includes(handler)) {
-            return () => {
-            }
-        }
-        handlersArray.push(handler);
-        return () => {
-            const idx = handlersArray.indexOf(handler);
-            handlersArray.splice(idx, 1);
-        }
-    }
-    afterEveryCommand(handler) {
-        this.#afterHandlers.push(handler);
-        return () => {
-            const idx = this.#afterHandlers.indexOf(handler);
-            this.#afterHandlers.splice(idx, 1);
+function destroyDom(vdom) {
+    const { type } = vdom;
+    switch (type) {
+        case DOM_TYPES.TEXT  : {
+            removeTextNode(vdom);
+            break
         }
-    }
-    dispatch(commandName, payload) {
-        if (this.#subs.has(commandName)) {
-            this.#subs.get(commandName).forEach((handler) => handler(payload));
-        } else {
-            console.warn(`No handlers for command : ${commandName}`);
+        case DOM_TYPES.ELEMENT : {
+            removeElementNode(vdom);
+            break
         }
-        this.#afterHandlers.forEach((handler) => handler());
-    }
-}
-
-function areNodesEqual(nodeOne, nodeTwo) {
-    if (!nodeOne || !nodeTwo) {
-        console.error('Invalid VDOM node', { nodeOne, nodeTwo });
-    }
-    if (!nodeOne.type || !nodeTwo.type) {
-        console.error('Invalid VDOM node', { nodeOne, nodeTwo });
-    }
-    if (nodeOne.type !== nodeTwo.type) {
-        return false
-    }
-    if (nodeOne.type === DOM_TYPES.ELEMENT) {
-        const { tag : tagOne } = nodeOne;
-        const { tag : tagTwo} = nodeTwo;
-        return tagOne === tagTwo
-    }
-    return true
-}
-
-function objectsDiff(oldObj, newObj) {
-    const oldKeys = Object.keys(oldObj);
-    const newKeys = Object.keys(newObj);
-    return {
-        added : newKeys.filter((key) => !(key in oldObj)),
-        removed : oldKeys.filter((key) => !(key in newObj)),
-        updated : newKeys.filter(
-            (key) => key in oldObj && oldObj[key] !== newObj[key]
-        ),
-    }
-}
-
-function isNotEmptyString(str) {
-    return str !== ''
-}
-function isNotBlankOrEmptyString(str) {
-    return isNotEmptyString(str.trim())
-}
-
-function patchDOM(oldVdom, newVdom, parentEl) {
-    if (!areNodesEqual(oldVdom, newVdom)) {
-        const index = findIndexInParent(parentEl, oldVdom.el);
-        destroyDom(oldVdom);
-        mountDom(newVdom, parentEl, index);
-        return newVdom
-    }
-    newVdom.el = oldVdom.el;
-    switch (newVdom.type) {
-        case DOM_TYPES.TEXT: {
-            patchText(oldVdom, newVdom);
-            return newVdom
+        case DOM_TYPES.FRAGMENT : {
+            removeFragmentNode(vdom);
+            break
         }
-        case DOM_TYPES.ELEMENT: {
-            patchElement(oldVdom, newVdom);
+        case DOM_TYPES.COMPONENT : {
+            vdom.component.unmount();
             break
         }
+        default : {
+            throw new Error(`Can't destroy DOM of type ${type}`)
+        }
     }
-    patchChildren(oldVdom, newVdom);
-    return newVdom
-}
-function patchText(oldVdom, newVdom) {
-    const el = oldVdom.el;
-    const { value : oldText} = oldVdom;
-    const { value : newText} = newVdom;
-    if (oldText !== newText) {
-        el.nodeValue = newText;
-    }
-}
-function findIndexInParent(parentEl, el) {
-    const index = Array.from(parentEl.childNodes).indexOf(el);
-    if (index < 0) {
-        return null
-    }
-    return index
- }
- function patchElement(oldVdom, newVdom) {
-    const el = oldVdom.el;
-     const {
-        class : oldClass,
-        style : oldStyle,
-        on: oldEvents,
-        ...oldAttrs
-     } = oldVdom.props;
-     const {
-        class: newClass,
-        style: newStyle,
-        on: newEvents,
-        ...newAttrs
-     } = newVdom.props;
-     const { listeners: oldListeners } = oldVdom;
-     patchAttrs(el, oldAttrs, newAttrs);
-     patchClasses(el, oldClass, newClass);
-     patchStyles(el, oldStyle, newStyle);
-     newVdom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents);
- }
- function patchAttrs(el, oldAttrs, newAttrs) {
-    const { added, removed, updated } = objectsDiff(oldAttrs, newAttrs);
-     for (const attr of removed) {
-         removeAttributeCustom(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]);
-    }
+    delete vdom.el;
 }
-function patchEvents(
-    el,
-    oldListeners = {},
-    oldEvents = {},
-    newEvents = {},
-) {
-    const { removed, added, updated} =
-    objectsDiff(oldEvents, newEvents);
-    for (const eventName of removed.concat(updated)) {
-        el.removeEventListener(eventName, oldListeners[eventName]);
-    }
-    const addedListeners = {};
-    for (const eventName of added.concat(updated)) {
-        const listener = addEventListener(eventName, newEvents[eventName], el);
-        addedListeners[eventName] = listener;
-    }
-    return addedListeners
+function removeTextNode(vdom) {
+    const { el } = vdom;
+    el.remove();
 }
-function extractChildren(vdom) {
-    if (vdom.children == null) {
-        return []
-    }
-    const children = [];
-    for (const child of vdom.children) {
-        if (child.type === DOM_TYPES.FRAGMENT) {
-            children.push(...extractChildren(child));
-        } else {
-            children.push(child);
-        }
+function removeElementNode(vdom) {
+ const { el , children, listeners } = vdom;
+    el.remove();
+    children.forEach(destroyDom);
+    if (listeners) {
+        removeEventListeners(listeners, el);
+        delete vdom.listeners;
     }
-    return children
 }
-function patchChildren(oldVdom, newVdom) {
-    const oldChildren = extractChildren(oldVdom);
-    const newChildren = extractChildren(newVdom);
-    const parentEl = oldVdom.el;
-    const diffSeq = arraysDiffSequence(oldChildren, newChildren, areNodesEqual);
-    for (const operation of diffSeq) {
-        const { originalIndex, index, item} = operation;
-        switch (operation.op) {
-            case ARRAY_DIFF_OP.ADD: {
-                mountDom(item, parentEl, index);
-                break
-            }
-            case ARRAY_DIFF_OP.REMOVE: {
-                destroyDom(item);
-                break
-            }
-            case ARRAY_DIFF_OP.MOVE: {
-                const oldChild = oldChildren[originalIndex];
-                const newChild = newChildren[index];
-                const el = oldChild.el;
-                const elAtTargetIndex = parentEl.childNodes[index];
-                parentEl.insertBefore(el, elAtTargetIndex);
-                patchDOM(oldChildren[originalIndex], newChild, parentEl);
-                break
-            }
-            case ARRAY_DIFF_OP.NOOP : {
-                patchDOM(oldChildren[originalIndex], newChildren[index], parentEl);
-                break
-            }
-        }
-    }
+function removeFragmentNode(vdom) {
+ const { children } = vdom;
+    children.forEach(destroyDom);
 }
 
-function createApp({ state, view, reducers = {} }) {
+function createApp(RootComponent, props = {}) {
     let parentEl = null;
-    let vdom = null;
     let isMounted = false;
-    const dispatcher = new Dispatcher();
-    const subscriptions = [dispatcher.afterEveryCommand(renderApp)];
-    function emit(eventName, payload) {
-        dispatcher.dispatch(eventName, payload);
-    }
-    for (const actionName in reducers) {
-        const reducer = reducers[actionName];
-        const subs = dispatcher.subscribe(actionName, (payload) => {
-            state = reducer(state, payload);
-        });
-        subscriptions.push(subs);
-    }
-    function renderApp() {
-        const newVdom = view(state, emit);
-        if (!newVdom) {
-            console.error('View returned', newVdom);
-            return;
-        }
-        vdom = patchDOM(vdom, newVdom, parentEl);
+    let vdom = null;
+    function reset() {
+        parentEl = null;
+        isMounted = false;
+        vdom = null;
     }
     return {
         mount(_parentEl) {
             if (isMounted) {
-                throw new Error("The application is already mounted")
+                throw new Error(`The application is already mounted`)
             }
             parentEl = _parentEl;
-            vdom = view(state, emit);
+            vdom = h(RootComponent, props);
             mountDom(vdom, parentEl);
             isMounted = true;
         },
         unmount() {
+            if (!isMounted) {
+                throw new Error(`The application is not mounted`)
+            }
             destroyDom(vdom);
-            vdom = null;
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            isMounted = false;
-        },
+            reset();
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lahama",
-  "version": "2.5.2",
+  "version": "3.0.0",
   "description": "",
   "main": "dist/lahama.js",
   "files": [
@@ -20,6 +20,8 @@
   "type": "module",
   "devDependencies": {
     "@eslint/js": "^9.39.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "globals": "^16.5.0",
     "jsdom": "^27.2.0",
     "rimraf": "^3.0.2",
@@ -27,5 +29,8 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-filesize": "^10.0.0",
     "vitest": "^4.0.15"
+  },
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3"
   }
 }