lahama 3.0.0 → 5.0.0

package/dist/lahama.js

@@ -1,17 +1,158 @@
-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',
+    SLOT : 'slot'
 };
 function h(tag, props = {} , children = []) {
     const type =
@@ -36,6 +177,17 @@ function hFragment(vNodes) {
         children : mapTextNodes(withoutNulls(vNodes)),
     }
 }
+let hSlotCalled = false;
+function didCreateSlot() {
+    return hSlotCalled
+}
+function resetDidCreateSlot() {
+    hSlotCalled = false;
+}
+function hSlot(children = []) {
+    hSlotCalled = true;
+  return { type : DOM_TYPES.SLOT, children}
+}
 
 function addEventListener(
     eventName,
@@ -100,6 +252,9 @@ 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);
@@ -120,6 +275,40 @@ function extractPropsAndEvents(vdom) {
     return { props, events }
 }
 
+let isScheduled = false;
+const jobs = [];
+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();
+        const result = job();
+        Promise.resolve(result).then(
+            () => {
+            },
+            (error) => {
+                console.error(`[scheduler]: ${error}`);
+            }
+        );
+        job();
+    }
+    isScheduled = false;
+}
+function nextTick() {
+    scheduleUpdate();
+    return flushPromises()
+}
+function flushPromises() {
+    return new Promise((resolve) => setTimeout(resolve))
+}
+
 function mountDom(
     vdom,
     parentEl,
@@ -141,6 +330,7 @@ function mountDom(
         }
         case DOM_TYPES.COMPONENT : {
             createComponentNode(vdom, parentEl, index, hostComponent);
+            enqueueJob(() => vdom.component.onMounted());
             break
         }
         default : {
@@ -190,9 +380,10 @@ function createFragmentNodes(vdom, parentEl, index, hostComponent) {
     children.forEach((child, i) => mountDom(child, parentEl, index ? index + i : null, hostComponent));
 }
 function createComponentNode(vdom, parentEl, index, hostComponent) {
-    const Component = vdom.tag;
+    const { tag : Component, children } = vdom;
     const { props, events } = extractPropsAndEvents(vdom);
     const component = new Component(props, events, hostComponent);
+    component.setExternalContent(children);
     component.mount(parentEl, index);
     vdom.component = component;
     vdom.el = component.firstElement;
@@ -215,6 +406,7 @@ function destroyDom(vdom) {
         }
         case DOM_TYPES.COMPONENT : {
             vdom.component.unmount();
+            enqueueJob(() => vdom.component.onUnMounted());
             break
         }
         default : {
@@ -270,4 +462,490 @@ function createApp(RootComponent, props = {}) {
     }
 }
 
-export { DOM_TYPES, createApp, h, hFragment, hString };
+function areNodesEqual(nodeOne, nodeTwo) {
+    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
+    }
+    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 hasOwnProperty(obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop)
+}
+
+function isNotEmptyString(str) {
+    return str !== ''
+}
+function isNotBlankOrEmptyString(str) {
+    return isNotEmptyString(str.trim())
+}
+
+function patchDOM(oldVdom, newVdom, parentEl, hostComponent = null) {
+    if (!areNodesEqual(oldVdom, newVdom)) {
+        const index = findIndexInParent(parentEl, oldVdom.el);
+        destroyDom(oldVdom);
+        mountDom(newVdom, parentEl, index, hostComponent);
+        return newVdom
+    }
+    newVdom.el = oldVdom.el;
+    switch (newVdom.type) {
+        case DOM_TYPES.TEXT: {
+            patchText(oldVdom, newVdom);
+            return newVdom
+        }
+        case DOM_TYPES.ELEMENT: {
+            patchElement(oldVdom, newVdom, hostComponent);
+            break
+        }
+        case DOM_TYPES.COMPONENT: {
+            patchComponent(oldVdom, newVdom);
+            break
+        }
+    }
+    patchChildren(oldVdom, newVdom, hostComponent);
+    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, hostComponent) {
+    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,
+         hostComponent
+         );
+ }
+ 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]);
+    }
+}
+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)) {
+        const listener = addEventListener(
+            eventName,
+            newEvents[eventName],
+            el,
+            hostComponent
+            );
+        addedListeners[eventName] = listener;
+    }
+    return addedListeners
+}
+function patchComponent(oldVdom, newVdom) {
+    const { component } = oldVdom;
+    const { children } = newVdom;
+    const { props } = extractPropsAndEvents(newVdom);
+    component.setExternalContent(children);
+    component.updateProps(props);
+    newVdom.component = component;
+    newVdom.el = component.firstElement;
+}
+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);
+        }
+    }
+    return children
+}
+function patchChildren(oldVdom, newVdom, hostComponent) {
+    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;
+        const offset = hostComponent?.offset ?? 0;
+        switch (operation.op) {
+            case ARRAY_DIFF_OP.ADD: {
+                mountDom(item, parentEl, index + offset, hostComponent);
+                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 + offset];
+                parentEl.insertBefore(el, elAtTargetIndex);
+                patchDOM(oldChildren[originalIndex], newChild, parentEl, hostComponent);
+                break
+            }
+            case ARRAY_DIFF_OP.NOOP : {
+                patchDOM(oldChildren[originalIndex], newChildren[index], parentEl, hostComponent);
+                break
+            }
+        }
+    }
+}
+
+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);
+
+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);
+        }
+    }
+    dispatch(commandName, payload) {
+        if (this.#subs.has(commandName)) {
+            this.#subs.get(commandName).forEach((handler) => handler(payload));
+        } else {
+            console.warn(`No handlers for command : ${commandName}`);
+        }
+        this.#afterHandlers.forEach((handler) => handler());
+    }
+}
+
+function traverseDFS(
+    vdom,
+    processNode,
+    shouldSkipBranch = () => false,
+    parentNode,
+    index = null
+) {
+    if (shouldSkipBranch(vdom)) return
+    processNode(vdom, parentNode, index);
+    if (vdom.children) {
+        vdom.children.forEach((child, i) =>
+        traverseDFS(child, processNode, shouldSkipBranch, vdom, i)
+        );
+    }
+}
+
+function fillSlots(vdom, externalContent = []) {
+    function processNode(node, parent, index) {
+        insertViewInSlot(node, parent, index, externalContent);
+    }
+    traverseDFS(vdom, processNode, shouldSkipBranch);
+}
+function insertViewInSlot(node, parent, index, externalContent) {
+    if (node.type !== DOM_TYPES.SLOT) return
+    const defaultContent = node.children;
+    const views = externalContent.length > 0 ? externalContent : defaultContent;
+    const hasContent = views.length > 0;
+    if (hasContent) {
+        parent.children.splice(index, 1, hFragment(views));
+    } else {
+        parent.children(index, 1);
+    }
+}
+function shouldSkipBranch(node) {
+    return node.type === DOM_TYPES.COMPONENT
+}
+
+const emptyFn = () => {};
+function defineComponent({
+     render,
+     state,
+    onMounted = emptyFn,
+    onUnmounted = emptyFn,
+     ...methods
+}) {
+    class Component {
+        #isMounted = false
+        #vdom = null
+        #hostEl = null
+        #eventHandlers = null
+        #parentComponent = null
+        #dispatcher = new Dispatcher()
+        #subscriptions = []
+        #children = []
+        setExternalContent(children) {
+            this.#children = children;
+        }
+        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 (this.#vdom == null) {
+                return []
+            }
+            if (this.#vdom.type === DOM_TYPES.FRAGMENT) {
+                return extractChildren(this.#vdom).flatMap((child) => {
+                    if (child.type === DOM_TYPES.COMPONENT) ;
+                    return [child.el]
+                 })
+            }
+            return [this.#vdom.el]
+        }
+        get firstElement() {
+            return this.elements[0]
+        }
+        get offset() {
+            if (this.#vdom.type === DOM_TYPES.ELEMENT) {
+                return Array.from(this.#hostEl.children).indexOf(this.firstElement)
+            }
+            return 0
+        }
+        emit(eventName, payload) {
+            this.#dispatcher.dispatch(eventName, payload);
+        }
+        updateProps(props) {
+            //! creates a new props object by merging the old and new 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() {
+            const vdom = render.call(this);
+            if (didCreateSlot()) {
+                fillSlots(vdom, this.#children);
+                resetDidCreateSlot();
+            }
+            return vdom
+        }
+        mount(hostEl, index = null) {
+            if (this.#isMounted) {
+                throw new Error('Component is already mounted')
+            }
+            this.#vdom = this.render();
+            mountDom(this.#vdom, hostEl, index, this); //!this - passes the component reference to the mountDOM fucntion
+            this.#wireEventHandlers();
+            this.#hostEl = hostEl;
+            this.#isMounted = true;
+        }
+        #patch() {
+            if (!this.#isMounted) {
+                throw new Error('Component is not mounted')
+            }
+            const vdom = this.render();
+            this.#vdom = patchDOM(this.#vdom, vdom, this.#hostEl, this);
+        }
+        unmount() {
+            if (!this.#isMounted) {
+                throw new Error(`Component is not mounted`)
+            }
+            destroyDom(this.#vdom);
+            this.#subscriptions.forEach((unsubscribe) => unsubscribe());
+            this.#vdom = null;
+            this.#hostEl = null;
+            this.#isMounted = false;
+            this.#subscriptions = [];
+        }
+        #wireEventHandlers() {
+            this.#subscriptions = Object.entries(this.#eventHandlers).map(
+                ([eventName, handler]) => {
+                    this.#wireEventHandlers(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;
+}
+
+export { DOM_TYPES, createApp, defineComponent, h, hFragment, hSlot, hString, nextTick };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lahama",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "description": "",
   "main": "dist/lahama.js",
   "files": [