Added props and events extractor

Author: erenworld

src/components/component.js

@@ -4,17 +4,23 @@ import { patchDOM } from "../patch-dom";
 import { DOM_TYPES, extractChildren } from "../h";
 import { hasOwnProperty } from "../utils/objects";
 
-// A factory function that, given a render() function,
-// creates a component class that uses that function to render its view.
 export function defineComponent({ render, state, ...methods }) {
     class Component {
         #isMounted = false;
         #vdom = null;
         #hostEl = null;
+        #eventsHandlers = null;
+        #parentComponent = null;
 
-        constructor(props = {}) {
+        constructor(
+            props = {},
+            eventHandlers = {},
+            parentComponent = null,
+        ) {
             this.props = props;
             this.state = state ? state(props) : {};
+            this.#eventsHandlers = eventHandlers;
+            this.#parentComponent = parentComponent;
         }
 
         get elements() {
@@ -52,6 +58,13 @@ export function defineComponent({ render, state, ...methods }) {
             this.#patch(); // To reflect the changes in the DOM
         }
 
+        updateProps(props) {
+            // TODOS: By comparing the old new prop objects, we can avoid patching and
+            // TODOS:the component—and all its subcomponents—if its props haven’t changed (deep-equal package)
+            this.props = { ...this.props, ...props }; // Merge new and old props.
+            this.#patch(); // Re-render
+        }
+
         render() {
             // returns its view as a virtual DOM based on the state.
             return render.call(this);

src/components/componentExample.js

@@ -0,0 +1,16 @@
+import { defineComponent } from "./component";
+import { hElement } from "../h";
+
+const List = defineComponent({
+    render() {
+        const { todos } = this.props;
+        return hElement('ul', {}, todos.map((todo) => hElement(ListItem, { todo })));
+    }
+})
+
+const ListItem = defineComponent({
+    render() {
+        const { todo } = this.props;
+        return hElement('li', {}, [todo])
+    }
+})

src/destroy-dom.js

@@ -17,6 +17,10 @@ export function destroyDOM(vdom) {
             removeFragmentNodes(vdom);
             break;
         }
+        case DOM_TYPES.COMPONENT: {
+            vdom.component.unmount(); // Calls the node's component instance unmount method
+            break;
+        }
         default: { 
             throw new Error(`Can't destroy DOM of type: ${type}`);
         }

src/mount-dom.js

@@ -1,6 +1,7 @@
 import { DOM_TYPES } from './h';
 import { setAttributes } from './attributes';
 import { addEventListeners } from './events';
+import { extractPropsAndEvents } from './utils/props';
 
 export function mountDOM(
     vdom, 
@@ -31,6 +32,17 @@ export function mountDOM(
     }
 }
 
+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; // Save component's first DOM Element in the Virtual Node.
+    vdom.el = component.firstElement;
+}
+
 function createTextNode(vdom, parentElement, index) {
     const { value } = vdom;
     const textNode = document.createTextNode(value);

src/patch-dom.js

@@ -12,6 +12,7 @@ import {
     setStyle
 } from './attributes';
 import { addEventListener } from './events';
+import { extractPropsAndEvents } from './utils/props';
 
 
 export function patchDOM(
@@ -39,12 +40,26 @@ export function patchDOM(
             patchElement(oldVdom, newVdom, hostComponent);
             break;
         }
+        case DOM_TYPES.COMPONENT: {
+            patchComponent(oldVdom, newVdom);
+            break;
+        }
     }
     patchChildren(oldVdom, newVdom, hostComponent);
 
     return newVdom;
 }
 
+function patchComponent(oldVdom, newVdom) { 
+    const { component } = oldVdom;  // Extracts the component instance from the old virtual node
+    const { props } = extractPropsAndEvents(newVdom);
+
+    component.updateProps(props);
+
+    newVdom.component = component; // Save component instance in the new virtual node
+    newVdom.el = component.firstElement; // Save the component instance in the new virtual node
+}
+
 function patchText(oldVdom, newVdom) {
     const el = oldVdom.el;
     const { value: oldValue } = oldVdom;

src/utils/props.js

@@ -0,0 +1,5 @@
+export function extractPropsAndEvents(vdom) {
+    const { on: events = {}, ...props } = vdom.props;  
+
+    return { props, events };
+}