vanilla_project 2.0.0 → 3.0.0

package/dist/vanilla_project.js

@@ -136,13 +136,15 @@ 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) {
@@ -172,14 +174,17 @@ function extractChildren(v_dom){
     return children
 }
 
-function addEventListener(eventName, handler, el) {
-    el.addEventListener(eventName, handler);
-    return handler
+function addEventListener(eventName, handler, el,hostComponent = null) {
+    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]) => {
-        const listener = addEventListener(eventName, handler, el);
+        const listener = addEventListener(eventName, handler, el,hostComponent);
         addedListeners[eventName] = listener;
     });
     return addedListeners
@@ -205,6 +210,10 @@ function destroyDOM(v_dom) {
             removeFragmentNodes(v_dom);
             break
         }
+        case DOM_TYPES.COMPONENT: {
+            v_dom.component.unmount();
+            break
+        }
         default: {
             throw new Error(`Can't destroy DOM of type: ${type}`)
         }
@@ -230,7 +239,7 @@ function removeFragmentNodes(v_dom) {
 }
 
 function setAttributes(el, attrs) {
-    const {class: className, style, ...otherAttrs} = attrs;
+    const {class: className, style,focus, ...otherAttrs} = attrs;
     if (className) {
         setClass(el, className);
     }
@@ -272,18 +281,28 @@ function removeAttribute(el, name) {
     el.removeAttribute(name);
 }
 
-function mountDOM(v_dom, parentEl,index) {
+function extractPropsAndEvents(v_dom) {
+    const {on: events = {}, ...props} = v_dom.props;
+    delete props.key;
+    return {props, events}
+}
+
+function mountDOM(v_dom, parentEl, index = null, hostComponent = null) {
     switch (v_dom.type) {
         case DOM_TYPES.TEXT: {
-            createTextNode(v_dom, parentEl,index);
+            createTextNode(v_dom, parentEl, index);
             break
         }
         case DOM_TYPES.ELEMENT: {
-            createElementNode(v_dom, parentEl,index);
+            createElementNode(v_dom, parentEl, index, hostComponent);
             break
         }
         case DOM_TYPES.FRAGMENT: {
-            createFragmentNodes(v_dom, parentEl,index);
+            createFragmentNodes(v_dom, parentEl, index, hostComponent);
+            break
+        }
+        case DOM_TYPES.COMPONENT: {
+            createComponentNode(v_dom, parentEl, index, hostComponent);
             break
         }
         default: {
@@ -291,79 +310,84 @@ function mountDOM(v_dom, parentEl,index) {
         }
     }
 }
-function createTextNode(v_dom, parentEl,index) {
-    const { value } = v_dom;
+function createTextNode(v_dom, parentEl, index) {
+    const {value} = v_dom;
     const textNode = document.createTextNode(value);
     v_dom.el = textNode;
-    insert(textNode,parentEl,index);
+    insert(textNode, parentEl, index);
 }
-function createFragmentNodes(v_dom, parentEl,index) {
+function createFragmentNodes(v_dom, parentEl, index, hostComponent) {
     const {children} = v_dom;
     v_dom.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 createElementNode(v_dom, parentEl,index) {
-    const { tag, props, children } = v_dom;
+function createElementNode(v_dom, parentEl, index, hostComponent) {
+    const {tag, children} = v_dom;
     const element = document.createElement(tag);
-    addProps(element, props, v_dom);
+    addProps(element, v_dom, hostComponent);
     v_dom.el = element;
-    children.forEach((child) => mountDOM(child, element));
-    insert(element,parentEl,index);
-}
-function addProps(el, props, v_dom) {
-    const { on: events, ...attrs } = props;
-    v_dom.listeners = addEventListeners(events, el);
+    children.forEach((child) => mountDOM(child, element, null, hostComponent));
+    insert(element, parentEl, index);
+    const {props} = extractPropsAndEvents(v_dom);
+    if (props.focus && props.focus === true) {
+        element.focus();
+        element.select();
+    }
+}
+function createComponentNode(v_dom, parentEl, index, hostComponent) {
+    const Component = v_dom.tag;
+    const {props, events} = extractPropsAndEvents(v_dom);
+    const component = new Component(props, events, hostComponent);
+    component.mount(parentEl, index);
+    v_dom.component = component;
+    v_dom.el = component.firstElement;
+}
+function addProps(el, v_dom, hostComponent) {
+    const {props: attrs, events} = extractPropsAndEvents(v_dom);
+    v_dom.listeners = addEventListeners(events, el, hostComponent);
     setAttributes(el, attrs);
 }
-function insert(el,parentEl,index){
-    if(index == null){
+function insert(el, parentEl, index) {
+    if (index == null) {
         parentEl.append(el);
         return
     }
-    if(index < 0 ){
+    if (index < 0) {
         throw new Error(`Index must be positive,got ${index}`)
     }
     const children = parentEl.childNodes;
-    if(index >= children.length){
+    if (index >= children.length) {
         parentEl.append(el);
-    }
-    else {
-        parentEl.insertBefore(el,children[index]);
+    } else {
+        parentEl.insertBefore(el, children[index]);
     }
 }
 
-class Dispatcher {
-    #subs = new Map()
-    #afterHandlers = []
-    subscribe(commandName, handler) {
-        if (!this.#subs.has(commandName)) {
-            this.#subs.set(commandName, []);
-        }
-        const handlers = this.#subs.get(commandName);
-        if (handlers.includes(handler)) {
-            return () => {
-            }
-        }
-        handlers.push(handler);
-        return () => {
-            const id = handlers.indexOf(handler);
-            handlers.splice(id, 1);
-        }
-    }
-    afterEveryCommand(handler) {
-        this.#afterHandlers.push(handler);
-        return () => {
-            const id = this.#afterHandlers.indexOf(handler);
-            this.#afterHandlers.splice(id, 1);
-        }
+function createApp(RootComponent, props = {}) {
+    let parentEl = null;
+    let isMounted = false;
+    let v_dom = null;
+    function reset() {
+        parentEl = null;
+        isMounted = false;
+        v_dom = null;
     }
-    dispatch(commandName, payload) {
-        if (this.#subs.has(commandName)) {
-            this.#subs.get(commandName).forEach((handler) => handler(payload));
-        } else {
-            console.warn(`No handlers for command ${commandName}`);
+    return {
+        mount(_parentEl) {
+            if (isMounted) {
+                throw new Error("The application is already mounted");
+            }
+            parentEl = _parentEl;
+            v_dom = h(RootComponent, props);
+            mountDOM(v_dom, parentEl);
+            isMounted = true;
+        },
+        unmount() {
+            destroyDOM(v_dom);
+            v_dom = null;
+            destroyDOM(v_dom);
+            reset();
         }
-        this.#afterHandlers.forEach((handler) => handler());
     }
 }
 
@@ -372,9 +396,14 @@ function areNodesEqual(nodeOne,nodeTwo){
         return false
     }
     if(nodeOne.type === DOM_TYPES.ELEMENT){
-        const {tag: tagOne} = nodeOne;
-        const {tag: tagTwo} = nodeTwo;
-        return tagOne === tagTwo
+        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}} = nodeOne;
+        return componentOne === componentTwo && keyOne === keyTwo
     }
     return true
 }
@@ -398,6 +427,9 @@ function objectsDiff(oldObj, newObj) {
         updated: updated
     }
 }
+function hasOwnProperty(obj,prop){
+    return Object.prototype.hasOwnProperty.call(obj,prop)
+}
 
 function isNotEmptyString(str){
     return str !== ''
@@ -406,11 +438,11 @@ function isNotBlankOrEmptyString(str){
     return isNotEmptyString(str.trim())
 }
 
-function patchDom(oldV_dom, newV_dom, parentEl) {
+function patchDom(oldV_dom, newV_dom, parentEl, hostComponent = null) {
     if (!areNodesEqual(oldV_dom, newV_dom)) {
         const index = findIndexInParent(parentEl, oldV_dom.el);
         destroyDOM(oldV_dom);
-        mountDOM(newV_dom, parentEl, index);
+        mountDOM(newV_dom, parentEl, index, hostComponent);
         return newV_dom
     }
     newV_dom.el = oldV_dom.el;
@@ -420,11 +452,15 @@ function patchDom(oldV_dom, newV_dom, parentEl) {
             return newV_dom
         }
         case DOM_TYPES.ELEMENT: {
-            patchElement(oldV_dom, newV_dom);
+            patchElement(oldV_dom, newV_dom, hostComponent);
+            break
+        }
+        case DOM_TYPES.COMPONENT: {
+            patchComponent(oldV_dom, newV_dom);
             break
         }
     }
-    patchChildren(oldV_dom,newV_dom);
+    patchChildren(oldV_dom, newV_dom, hostComponent);
     return newV_dom
 }
 function findIndexInParent(parentEl, el) {
@@ -442,7 +478,7 @@ function patchText(oldV_dom, newV_dom) {
         el.nodeValue = newText;
     }
 }
-function patchElement(oldV_dom, newV_dom) {
+function patchElement(oldV_dom, newV_dom, hostComponent) {
     const el = oldV_dom.el;
     const {
         class: oldClass,
@@ -460,7 +496,14 @@ function patchElement(oldV_dom, newV_dom) {
     patchAttrs(el, oldAttrs, newAttrs);
     patchClasses(el, oldClass, newClass);
     patchStyles(el, oldStyle, newStyle);
-    newV_dom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents);
+    newV_dom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents, hostComponent);
+}
+function patchComponent(oldV_dom, newV_dom) {
+    const {component} = oldV_dom;
+    const {props} = extractPropsAndEvents(newV_dom);
+    component.updateProps(props);
+    newV_dom.component = component;
+    newV_dom.el = component.firstElement;
 }
 function patchAttrs(el, oldAttrs, newAttrs) {
     const {added, removed, updated} = objectsDiff(oldAttrs, newAttrs);
@@ -488,36 +531,36 @@ function toClassList(classes = '') {
         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);
+    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]);
+    for (const style of added.concat(updated)) {
+        setStyle(el, style, newStyle[style]);
     }
 }
-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]);
+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);
-        addedListeners[eventName] = listener;
+    for (const eventName of added.concat(updated)) {
+        addedListeners[eventName] = addEventListener(eventName, newEvents[eventName], el, hostComponent);
     }
     return addedListeners
 }
-function patchChildren(oldV_dom, newV_dom) {
+function patchChildren(oldV_dom, newV_dom, hostComponent) {
     const oldChildren = extractChildren(oldV_dom);
     const newChildren = extractChildren(newV_dom);
     const parentEl = oldV_dom.el;
-    const diffSeq = arraysDiffSequence(oldChildren,newChildren,areNodesEqual);
-    for(const operation of diffSeq){
+    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);
+                mountDOM(item, parentEl, index + offset, hostComponent);
                 break
             }
             case ARRAY_DIFF_OP.REMOVE: {
@@ -528,57 +571,204 @@ function patchChildren(oldV_dom, newV_dom) {
                 const oldChild = oldChildren[originalIndex];
                 const newChild = newChildren[index];
                 const el = oldChild.el;
-                const elAtTargetIndex = parentEl.childNodes[index];
-                parentEl.insertBefore(el,elAtTargetIndex);
-                patchDom(oldChild,newChild,parentEl);
+                const elAtTargetIndex = parentEl.childNodes[index + offset];
+                parentEl.insertBefore(el, elAtTargetIndex);
+                patchDom(oldChild, newChild, parentEl, hostComponent);
                 break
             }
             case ARRAY_DIFF_OP.NOOP: {
-                patchDom(oldChildren[originalIndex],newChildren[index],parentEl);
+                patchDom(oldChildren[originalIndex], newChildren[index], parentEl, hostComponent);
                 break
             }
         }
     }
 }
 
-function createApp({state, view, reducers = {}}) {
-    let parentEl = null;
-    let v_dom = 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 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 handlers = this.#subs.get(commandName);
+        if (handlers.includes(handler)) {
+            return () => {
+            }
+        }
+        handlers.push(handler);
+        return () => {
+            const id = handlers.indexOf(handler);
+            handlers.splice(id, 1);
+        }
     }
-    function renderApp() {
-        console.log("App rendered");
-        const newV_dom = view(state, emit);
-        v_dom = patchDom(v_dom,newV_dom,parentEl);
+    afterEveryCommand(handler) {
+        this.#afterHandlers.push(handler);
+        return () => {
+            const id = this.#afterHandlers.indexOf(handler);
+            this.#afterHandlers.splice(id, 1);
+        }
     }
-    return {
-        mount(_parentEl) {
-            if (isMounted) {
-                throw new Error("The application is already mounted");
+    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 defineComponent({render, state, ...methods}) {
+    class Component {
+        #isMounted = false
+        #v_dom = null
+        #hostEl = null
+        #eventHandlers = null
+        #parentComponent = null
+        #dispatcher = new Dispatcher()
+        #subscriptions = []
+        constructor(props = {}, eventHandlers = {}, parentComponent = {}) {
+            this.props = props;
+            this.state = state ? state(props) : {};
+            this.#eventHandlers = eventHandlers;
+            this.#parentComponent = parentComponent;
+        }
+        #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);
+                }
+            });
+        }
+        emit(eventName,payload){
+            this.#dispatcher.dispatch(eventName,payload);
+        }
+        get elements() {
+            if (this.#v_dom == null) {
+                return []
             }
-            parentEl = _parentEl;
-            v_dom = view(state, emit);
-            mountDOM(v_dom, parentEl);
-            isMounted = true;
-        },
+            if (this.#v_dom.type === DOM_TYPES.FRAGMENT) {
+                return extractChildren(this.#v_dom).flatMap((child) => {
+                    if (child.type === DOM_TYPES.COMPONENT) {
+                        return child.component.elements
+                    }
+                    return [child.el]
+                })
+            }
+            return [this.#v_dom.el]
+        }
+        get firstElement() {
+            return this.elements[0]
+        }
+        get offset() {
+            if (this.#v_dom.type === DOM_TYPES.FRAGMENT) {
+                return Array.from(this.#hostEl.children).indexOf(this.firstElement)
+            }
+            return 0
+        }
+        updateState(state) {
+            this.state = {...this.state, ...state};
+            this.#patch();
+        }
+        updateProps(props) {
+            const newProps = {...this.props, ...props};
+            if (equal(this.props, newProps)) {
+                return
+            }
+            this.props = newProps;
+            this.#patch();
+        }
+        render() {
+            return render.call(this)
+        }
+        mount(hostEl, index = null) {
+            if (this.#isMounted) {
+                throw new Error("Component is already mounted")
+            }
+            this.#v_dom = this.render();
+            mountDOM(this.#v_dom, hostEl, index, this);
+            this.#wireEventHandlers();
+            this.#hostEl = hostEl;
+            this.#isMounted = true;
+        }
         unmount() {
-            destroyDOM(v_dom);
-            v_dom = null;
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            isMounted = false;
+            if (!this.#isMounted) {
+                throw new Error('Component is not mounted')
+            }
+            destroyDOM(this.#v_dom);
+            this.#subscriptions.forEach((unsubscribe) => unsubscribe());
+            this.#v_dom = null;
+            this.#hostEl = null;
+            this.#isMounted = false;
+            this.#subscriptions = [];
+        }
+        #patch() {
+            if (!this.#isMounted) {
+                throw new Error('Component is not mounted')
+            }
+            const v_dom = this.render();
+            this.#v_dom = patchDom(this.#v_dom, v_dom, this.#hostEl, this);
+        }
+    }
+    for (const methodName in methods) {
+        if (hasOwnProperty(Component, methodName)) {
+            throw new Error(`Method ${methodName} already exists in the component`)
         }
+        Component.prototype[methodName] = methods[methodName];
     }
+    return Component
 }
 
-export { createApp, h, hFragment, hString };
+export { createApp, defineComponent, h, hFragment, hString };

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "vanilla_project",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "main": "dist/vanilla_project.js",
   "files": [
     "dist/vanilla_project.js"
   ],
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "eslint": "^9.39.2",
     "jsdom": "^27.4.0",
     "rollup": "^4.55.1",
@@ -21,10 +23,10 @@
     "test": "vitest",
     "test:run": "vitest run"
   },
-  "type": "commonjs",
   "dependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
+    "fast-deep-equal": "^3.1.3",
     "globals": "^14.0.0"
   }
 }