betal-fe 2.0.0 → 3.0.0

package/dist/betal-fe.js

@@ -1,20 +1,3 @@
-function addEventListener(eventName, handler, el) {
-  el.addEventListener(eventName, handler);
-  return handler;
-}
-function addEventListeners(events = {}, el) {
-  const addedEventListeners = {};
-  Object.entries(events).forEach(([eventName, handler]) => {
-    addedEventListeners[eventName] = addEventListener(eventName, handler, el);
-  });
-  return addedEventListeners;
-}
-function removeEventListeners(listeners = {}, el) {
-  Object.entries(listeners).forEach(([eventName, handler]) => {
-    el.removeEventListener(eventName, handler);
-  });
-}
-
 const ARRAY_DIFF_OP = {
   ADD: "add",
   REMOVE: "remove",
@@ -157,10 +140,12 @@ 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 {
-    type: DOM_TYPES.ELEMENT,
+    type,
     tag,
     props,
     children: mapTextNodes(withoutNulls(children)),
@@ -195,80 +180,6 @@ function extractChildren(vdom) {
   return children;
 }
 
-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: {
-      removeFragmentNodes(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 removeFragmentNodes(vDom) {
-  const { children } = vDom;
-  children.forEach(destroyDOM);
-}
-
-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 idx = handlers.indexOf(handler);
-      handlers.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 setAttributes(el, attrs) {
   const { class: className, style, ...otherAttrs } = attrs;
   if (className) {
@@ -311,22 +222,59 @@ function removeAttribute(el, name) {
   el.removeAttribute(name);
 }
 
-function mountDOM(vDom, parentElement, index) {
+function addEventListener(eventName, handler, el, hostComponent = null) {
+  function boundHandler() {
+    hostComponent
+      ? handler.apply(hostComponent, arguments)
+      : handler(...arguments);
+  }
+  el.addEventListener(eventName, boundHandler);
+  return boundHandler;
+}
+function addEventListeners(events = {}, el, hostComponent = null) {
+  const addedEventListeners = {};
+  Object.entries(events).forEach(([eventName, handler]) => {
+    addedEventListeners[eventName] = addEventListener(
+      eventName,
+      handler,
+      el,
+      hostComponent
+    );
+  });
+  return addedEventListeners;
+}
+function removeEventListeners(listeners = {}, el) {
+  Object.entries(listeners).forEach(([eventName, handler]) => {
+    el.removeEventListener(eventName, handler);
+  });
+}
+
+function extractPropsAndEvents(vdom) {
+  const { on: events = {}, ...props } = vdom.props;
+  delete props.key;
+  return { props, events };
+}
+
+function mountDOM(vDom, parentElement, index, hostComponent = null) {
   switch (vDom.type) {
     case DOM_TYPES.TEXT: {
       createTextNode(vDom, parentElement, index);
       break;
     }
     case DOM_TYPES.ELEMENT: {
-      createElementNode(vDom, parentElement, index);
+      createElementNode(vDom, parentElement, index, hostComponent);
+      break;
+    }
+    case DOM_TYPES.COMPONENT: {
+      createComponentNode(vDom, parentElement, index, hostComponent);
       break;
     }
     case DOM_TYPES.FRAGMENT: {
-      createFragmentNode(vDom, parentElement, index);
+      createFragmentNode(vDom, parentElement, index, hostComponent);
       break;
     }
     default: {
-      throw new Error(`Can't mount DOM of type: ${vDom.type}`)
+      throw new Error(`Can't mount DOM of type: ${vDom.type}`);
     }
   }
 }
@@ -336,22 +284,24 @@ function createTextNode(vDom, parentElement, index) {
   vDom.el = textNode;
   insert(textNode, parentElement, index);
 }
-function createFragmentNode(vDom, parentElement, index) {
+function createFragmentNode(vDom, parentElement, index, hostComponent) {
   const { children } = vDom;
   vDom.el = parentElement;
-  children.forEach((child) => mountDOM(child, parentElement, index ? index + 1 : null));
+  children.forEach((child) =>
+    mountDOM(child, parentElement, index ? index + 1 : null, hostComponent)
+  );
 }
-function createElementNode(vDom, parentElement, index) {
-  const { tag, props, children } = vDom;
+function createElementNode(vDom, parentElement, index, hostComponent) {
+  const { tag, children } = vDom;
   const element = document.createElement(tag);
-  addProps(element, props, vDom);
+  addProps(element, vDom, hostComponent);
   vDom.el = element;
-  children.forEach((child) => mountDOM(child, element));
+  children.forEach((child) => mountDOM(child, element, null, hostComponent));
   insert(element, parentElement, index);
 }
-function addProps(el, props, vdom) {
-  const { on: events, ...attrs } = props;
-  vdom.listeners = addEventListeners(events, el);
+function addProps(el,vdom, hostComponent) {
+  const { props: attrs, events } = extractPropsAndEvents(vdom);
+  vdom.listeners = addEventListeners(events, el, hostComponent);
   setAttributes(el, attrs);
 }
 function insert(el, parentEl, index) {
@@ -369,15 +319,143 @@ function insert(el, parentEl, index) {
     parentEl.insertBefore(el, children[index]);
   }
 }
+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;
+}
+
+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: {
+      removeFragmentNodes(vDom);
+      break;
+    }
+    case DOM_TYPES.COMPONENT: {
+      vDom.component.unmount();
+      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 removeFragmentNodes(vDom) {
+  const { children } = vDom;
+  children.forEach(destroyDOM);
+}
+
+function createApp(RootComponent, props = {}) {
+  let parentEl = null;
+  let isMounted = false;
+  let vdom = null;
+  function reset() {
+    parentEl = null;
+    isMounted = false;
+    vdom = null;
+  }
+  return {
+    mount(_parentEl) {
+      if (isMounted) {
+        throw new Error("The application is already mounted");
+      }
+      parentEl = _parentEl;
+      vdom = h(RootComponent, props);
+      mountDOM(vdom, parentEl);
+      isMounted = true;
+    },
+    unmount() {
+      if (!isMounted) {
+        throw new Error("The application is not mounted");
+      }
+      destroyDOM(vdom);
+      reset();
+    },
+  };
+}
+
+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);
 
 function areNodesEqual(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;
+    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;
 }
@@ -385,14 +463,25 @@ function areNodesEqual(nodeOne, nodeTwo) {
 function objectsDiff(oldObj, newObj) {
   const oldKeys = Object.keys(oldObj);
   const newKeys = Object.keys(newObj);
+  const added = [];
+  const updated = [];
+   newKeys.forEach(key => {
+    if (!(key in oldObj)) {
+      added.push(key);
+    }
+    if (key in oldObj && oldObj[key] !== newObj[key]) {
+      updated.push(key);
+    }
+  });
   return {
-    added: newKeys.filter((key) => !(key in oldObj)),
+    added,
     removed: oldKeys.filter((key) => !(key in newObj)),
-    updated: newKeys.filter(
-      (key) => key in oldObj && oldObj[key] !== newObj[key]
-    ),
+    updated,
   };
 }
+function hasOwnProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
 
 function isNotEmptyString(str) {
  return str !== ''
@@ -401,11 +490,11 @@ function isNotBlankOrEmptyString(str) {
  return isNotEmptyString(str.trim())
 }
 
-function patchDOM(oldVdom, newVdom, parentEl) {
+function patchDOM(oldVdom, newVdom, parentEl, hostComponent = null) {
   if (!areNodesEqual(oldVdom, newVdom)) {
     const index = findIndexInParent(parentEl, oldVdom.el);
     destroyDOM(oldVdom);
-    mountDOM(newVdom, parentEl, index);
+    mountDOM(newVdom, parentEl, index, hostComponent);
     return newVdom;
   }
   newVdom.el = oldVdom.el;
@@ -415,11 +504,15 @@ function patchDOM(oldVdom, newVdom, parentEl) {
       return newVdom;
     }
     case DOM_TYPES.ELEMENT: {
-      patchElement(oldVdom, newVdom);
+      patchElement(oldVdom, newVdom, hostComponent);
+      break;
+    }
+    case DOM_TYPES.COMPONENT: {
+      patchComponent(oldVdom, newVdom);
       break;
     }
   }
-  patchChildren(oldVdom, newVdom);
+  patchChildren(oldVdom, newVdom, hostComponent);
   return newVdom;
 }
 function findIndexInParent(parentEl, el) {
@@ -436,7 +529,7 @@ function patchText(oldVdom, newVdom) {
     newVdom.el.nodeValue = newText;
   }
 }
-function patchElement(oldVdom, newVdom) {
+function patchElement(oldVdom, newVdom, hostComponent) {
   const el = oldVdom.el;
   const {
     class: oldClass,
@@ -454,7 +547,7 @@ function patchElement(oldVdom, newVdom) {
   patchAttrs(el, oldAttrs, newAttrs);
   patchClasses(el, oldClass, newClass);
   patchStyles(el, oldStyle, newStyle);
-  newVdom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents);
+  newVdom.listeners = patchEvents(el, oldListeners, oldEvents, newEvents, hostComponent);
 }
 function patchAttrs(el, oldAttrs, newAttrs) {
   const { added, removed, updated } = objectsDiff(oldAttrs, newAttrs);
@@ -490,32 +583,29 @@ function patchStyles(el, oldStyle = {}, newStyle = {}) {
     setStyle(el, style, newStyle[style]);
   }
 }
-function patchEvents(el, oldListeners = {}, oldEvents = {}, newEvents = {}) {
+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);
+    const listener = addEventListener(eventName, newEvents[eventName], el, hostComponent);
     addedListeners[eventName] = listener;
   }
   return addedListeners;
 }
-function patchChildren(oldVdom, newVdom) {
+function patchChildren(oldVdom, newVdom, hostComponent) {
   const oldChildren = extractChildren(oldVdom);
   const newChildren = extractChildren(newVdom);
   const parentEl = oldVdom.el;
-  const diffSeq = arraysDiffSequence(
-    oldChildren,
-    newChildren,
-    areNodesEqual
-  );
+  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: {
@@ -526,53 +616,167 @@ function patchChildren(oldVdom, newVdom) {
         const oldChild = oldChildren[originalIndex];
         const newChild = newChildren[index];
         const el = oldChild.el;
-        const elAtTargetIndex = parentEl.childNodes[index];
+        const elAtTargetIndex = parentEl.childNodes[index + offset];
         parentEl.insertBefore(el, elAtTargetIndex);
-        patchDOM(oldChild, newChild, parentEl);
+        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 patchComponent(oldVdom, newVdom) {
+  const { component } = oldVdom;
+  const { props } = extractPropsAndEvents(newVdom);
+  component.updateProps(props);
+  newVdom.component = component;
+  newVdom.el = component.firstElement;
+}
 
-function createApp({ state, view, reducers = {} }) {
-  let parentEl = null;
-  let vdom = null;
-  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);
+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 idx = handlers.indexOf(handler);
+      handlers.splice(idx, 1);
+    };
   }
-  function renderApp() {
-    const newVdom = view(state, emit);
-    vdom = patchDOM(vdom, newVdom, parentEl);
+  afterEveryCommand(handler) {
+    this.#afterHandlers.push(handler);
+    return () => {
+      const idx = this.#afterHandlers.indexOf(handler);
+      this.#afterHandlers.splice(idx, 1);
+    };
   }
-  return {
-    mount(_parentEl) {
-      if (vdom) {
-        throw new Error('App 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 {
+    #vdom = null;
+    #isMounted = false;
+    #hostEl = null;
+    #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;
+    }
+    updateState(newState) {
+      this.state = { ...this.state, ...newState };
+      this.#patch();
+    }
+    render() {
+      return render.call(this);
+    }
+    mount(hostEl, index = null) {
+      if (this.#isMounted) {
+        throw new Error("Component is already mounted");
       }
-      parentEl = _parentEl;
-      vdom = view(state, emit);
-      mountDOM(vdom, parentEl);
-    },
+      this.#vdom = this.render();
+      mountDOM(this.#vdom, hostEl, index, this);
+      this.#wireEventHandlers();
+      this.#hostEl = hostEl;
+      this.#isMounted = true;
+    }
     unmount() {
-      destroyDOM(vdom);
-      vdom = null;
-      subscriptions.forEach((unsub) => unsub());
+      if (!this.#isMounted) {
+        throw new Error("Component is not mounted");
+      }
+      destroyDOM(this.#vdom);
+      this.#subscriptions.forEach((unsubscribe) => unsubscribe());
+      this.#subscriptions = [];
+      this.#vdom = null;
+      this.#hostEl = null;
+      this.#isMounted = false;
+    }
+    updateProps(props) {
+      const newProps = { ...this.props, ...props };
+      if (equal(this.props, newProps)) {
+        return;
+      }
+      this.props = newProps;
+      this.#patch();
+    }
+    emit(eventName, payload) {
+      this.#dispatcher.dispatch(eventName, payload);
+    }
+    #patch() {
+      if (!this.#isMounted) {
+        throw new Error("Component is not mounted");
+      }
+      const vdom = this.render();
+      this.#vdom = patchDOM(this.#vdom, vdom, 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);
+        }
+      });
+    }
+    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.component.elements;
+          }
+          return [child.el];
+        });
+      }
+      return [this.#vdom.el];
+    }
+    get firstElement() {
+      return this.elements[0];
+    }
+    get offset() {
+      if (this.#vdom.type === DOM_TYPES.FRAGMENT) {
+        return Array.from(this.#hostEl.children).indexOf(this.firstElement);
+      }
+      return 0;
+    }
+  }
+  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,6 +1,6 @@
 {
   "name": "betal-fe",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "main": "dist/betal-fe.js",
   "files": [
@@ -20,6 +20,8 @@
   "description": "",
   "devDependencies": {
     "@eslint/js": "^9.38.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "eslint": "^9.38.0",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^16.4.0",
@@ -28,5 +30,8 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-filesize": "^10.0.0",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3"
   }
 }