ks-fwork 3.0.1 → 3.0.2

package/dist/ks-fwork.js

@@ -315,6 +315,12 @@ function removeAttribute(el, name) {
     el.removeAttribute(name);
 }
 
+function extractPropsAndEvents(vNode) {
+    const { on: events = {}, ...props } = vNode.props;
+    delete props.key;
+    return { props, events }
+}
+
 function mountDOM(vNode, parentEl, index, hostComponent = null) {
     switch (vNode.type) {
         case DOM_TYPES.TEXT: {
@@ -330,7 +336,7 @@ function mountDOM(vNode, parentEl, index, hostComponent = null) {
             break;
         }
         case DOM_TYPES.COMPONENT: {
-            createComponentNode(vNode, parentEl, index);
+            createComponentNode(vNode, parentEl, index, hostComponent);
         }
         default: {
             throw new Error(`Can't mount virtual node of type: ${vNode.type}`);
@@ -344,9 +350,9 @@ function createTextNode(vNode, parentEl, index) {
     insert(textNode, parentEl, index);
 }
 function createElementNode(vNode, parentEl, index, hostComponent) {
-    const { tag, props, children } = vNode;
+    const { tag, children } = vNode;
     const el = document.createElement(tag);
-    addProps(el, props, vNode, hostComponent);
+    addProps(el, vNode, hostComponent);
     vNode.el = el;
     children.forEach((child) => mountDOM(child, el, null, hostComponent));
     insert(el, parentEl, index);
@@ -360,14 +366,14 @@ function createFragmentNode(vNode, parentEl, index, hostComponent) {
 }
 function createComponentNode(vNode, parentEl, index, hostComponent) {
     const Component = vNode.tag;
-    const props = vNode.props;
-    const component = new Component(props);
+    const { props, events } = extractPropsAndEvents(vNode);
+    const component = new Component(props, events, hostComponent);
     component.mount(parentEl, index);
     vNode.component = component;
     vNode.el = component.firstElement;
 }
-function addProps(el, props, vNode, hostComponent) {
-    const { on: events, ...attrs} = props;
+function addProps(el, vNode, hostComponent) {
+    const { props: attrs, events} = extractPropsAndEvents(vNode);
     vNode.listeners = addEventListeners(events, el, hostComponent);
     setAttributes(el, attrs);
 }
@@ -390,7 +396,14 @@ function insert(el, parentEl, index) {
 function areNodesEqual(nodeOne, nodeTwo) {
     if (nodeOne.type !== nodeTwo.type) return false;
     if (nodeOne.type === DOM_TYPES.ELEMENT) {
-        return nodeOne.tag === nodeTwo.tag;
+        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;
 }
@@ -477,7 +490,7 @@ function patchElement(oldVNode, newVNode, hostComponent) {
 }
 function patchComponent(oldVNode, newVNode) {
     const { component } = oldVNode;
-    const { props } = newVNode;
+    const { props } = extractPropsAndEvents(newVNode);
     component.updateProps(props);
     newVNode.component = component;
     newVNode.el = component.firstElement;
@@ -559,40 +572,29 @@ function patchChildren(oldVNode, newVNode, hostComponent) {
     }
 }
 
-function createApp({state, view, reducers = {} }) {
+function createApp(RootComponent, props = {}) {
     let parentEl = null;
     let rootNode = null;
     let isMounted = false;
     const dispatcher = new Dispatcher();
-    const unsubscribers = [dispatcher.afterEveryCommand(renderApp)];
-    for (const actionName in reducers) {
-        const reducer = reducers[actionName];
-        const unsubscribe = dispatcher.subscribe(actionName, (payload) => {
-            state = reducer(state, payload);
-        });
-        unsubscribers.push(unsubscribe);
-    }
-    function emit(actionName, payload) {
-        dispatcher.dispatch(actionName, payload);
-    }
-    function renderApp() {
-        const newRootNode = view(state, emit);
-        rootNode = patchDOM(rootNode, newRootNode, parentEl);
+    [dispatcher.afterEveryCommand(renderApp)];
+    function reset() {
+        parentEl = null;
+        rootNode = null;
+        isMounted = false;
     }
     return {
         mount(_parentEl) {
             if (isMounted) throw new Error('The application is already mounted');
             parentEl = _parentEl;
-            rootNode = view(state, emit);
+            rootNode = h(RootComponent, props);
             mountDOM(rootNode, parentEl);
+            isMounted = true;
         },
         unmount() {
-            if (rootNode) {
-                destroyDOM(rootNode);
-            }
-            rootNode = null;
-            unsubscribers.forEach((unsubscribe) => unsubscribe());
-            isMounted = false;
+            if (!isMounted) throw new Error('The application is not mounted');
+            destroyDOM(rootNode);
+            reset();
         },
     }
 }
@@ -645,9 +647,15 @@ function defineComponent({ render, state, ...methods }) {
         #isMounted = false;
         #vNode = null;
         #hostEl = null;
-        constructor(props = {}) {
+        #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;
         }
         get elements() {
             if (this.#vNode == null) {
@@ -687,12 +695,16 @@ function defineComponent({ render, state, ...methods }) {
         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;
         }
@@ -701,9 +713,11 @@ function defineComponent({ render, state, ...methods }) {
                 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) {
@@ -712,6 +726,21 @@ function defineComponent({ render, state, ...methods }) {
             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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",