@domql/element 2.5.50 → 2.5.52

package/dist/cjs/node.js

@@ -41,6 +41,7 @@ var import_iterate = require("./iterate");
 var import_mixins = require("./mixins");
 var import_applyParam = require("./utils/applyParam");
 var import_utils2 = require("./utils");
+var import_propEvents = require("./utils/propEvents");
 const ENV = "development";
 const createNode = (element, options) => {
   let { node, tag, __ref: ref } = element;
@@ -63,6 +64,7 @@ const createNode = (element, options) => {
   (0, import_iterate.throughInitialDefine)(element);
   (0, import_iterate.throughInitialExec)(element);
   if (element.tag !== "string" && element.tag !== "fragment") {
+    (0, import_propEvents.propagateEventsFromProps)(element);
     if (isNewNode && (0, import_utils.isObject)(element.on))
       (0, import_event.applyEventsOnNode)(element, options);
   }

package/dist/cjs/update.js

@@ -147,7 +147,6 @@ const captureSnapshot = (element, options) => {
   return [snapshotOnCallee, calleeElement];
 };
 const checkIfOnUpdate = (element, parent, options) => {
-  var _a;
   if (!(0, import_utils.isFunction)(element.if) || !parent)
     return;
   const ref = element.__ref;
@@ -163,13 +162,15 @@ const checkIfOnUpdate = (element, parent, options) => {
       }
       if (ref.__state) {
         element.state = ref.__state;
+      } else if (!ref.__hasRootState) {
+        delete element.state;
       }
-      (_a = element.node) == null ? void 0 : _a.remove();
+      element.node && element.node.remove();
       const previousElement = element.previousElement();
       const nextElement = element.nextElement();
       const hasPrevious = previousElement && previousElement.node;
       const hasNext = nextElement && nextElement.node;
-      const attachOptions = ((hasPrevious == null ? void 0 : hasPrevious.parentNode) || (hasNext == null ? void 0 : hasNext.parentNode)) && {
+      const attachOptions = (hasPrevious && hasPrevious.parentNode || hasNext && hasNext.parentNode) && {
         position: hasPrevious ? "after" : hasNext ? "before" : null,
         node: hasPrevious || hasNext
       };
@@ -205,13 +206,13 @@ const inheritStateUpdates = (element, options) => {
   if (!keyInParentState || options.preventInheritedStateUpdate)
     return;
   if (!options.preventInitStateUpdateListener) {
-    const initStateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdated", keyInParentState, element, options);
+    const initStateReturns = (0, import_event.triggerEventOnUpdate)("initStateUpdate", keyInParentState, element, options);
     if (initStateReturns === false)
       return element;
   }
   const newState = createStateUpdate(element, parent, options);
   if (!options.preventStateUpdateListener) {
-    (0, import_event.triggerEventOnUpdate)("stateUpdated", newState.parse(), element, options);
+    (0, import_event.triggerEventOnUpdate)("stateUpdate", newState.parse(), element, options);
   }
 };
 const createStateUpdate = (element, parent, options) => {

package/dist/cjs/utils/component.js

@@ -80,7 +80,7 @@ const extendizeByKey = (element, parent, key) => {
   const { context, tag, extend, props, attr, state, childExtend, childProps, on, if: condition } = element;
   const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr;
   const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : [key];
-  const isExtendKeyComponent = context == null ? void 0 : context.components[extendFromKey];
+  const isExtendKeyComponent = context && context.components[extendFromKey];
   if (element === isExtendKeyComponent)
     return element;
   else if (!hasComponentAttrs || childProps) {

package/dist/cjs/utils/propEvents.js

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var propEvents_exports = {};
+__export(propEvents_exports, {
+  propagateEventsFromProps: () => propagateEventsFromProps
+});
+module.exports = __toCommonJS(propEvents_exports);
+var import_utils = require("@domql/utils");
+const propagateEventsFromProps = (element) => {
+  const { props, on } = element;
+  const eventKeysFromProps = Object.keys(props).filter((key) => key.startsWith("on"));
+  eventKeysFromProps.forEach((v) => {
+    const eventName = (0, import_utils.lowercaseFirstLetter)(v.split("on")[1]);
+    if (on[eventName]) {
+      on[eventName] = (...args) => {
+        on[eventName](...args);
+        props[v](...args);
+      };
+    } else
+      on[eventName] = props[v];
+  });
+};

package/node.js

@@ -14,6 +14,7 @@ import {
 import { registry } from './mixins'
 import { applyParam } from './utils/applyParam'
 import { isVariant } from './utils'
+import { propagateEventsFromProps } from './utils/propEvents'
 // import { defineSetter } from './methods'
 
 const ENV = process.env.NODE_ENV
@@ -51,6 +52,7 @@ export const createNode = (element, options) => {
   throughInitialExec(element)
 
   if (element.tag !== 'string' && element.tag !== 'fragment') {
+    propagateEventsFromProps(element)
     // apply events
     if (isNewNode && isObject(element.on)) applyEventsOnNode(element, options)
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.50",
+  "version": "2.5.52",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "6fa0575bec43db642ce4846641729459984339b6",
+  "gitHead": "d417eb4852233ff71f790eae23b67b521e80c4f9",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/update.js

@@ -170,11 +170,14 @@ const checkIfOnUpdate = (element, parent, options) => {
       if (!ref.__hasRootState) {
         delete element.state
       }
+
       if (ref.__state) {
         element.state = ref.__state
+      } else if (!ref.__hasRootState) {
+        delete element.state
       }
 
-      element.node?.remove()
+      element.node && element.node.remove()
 
       const previousElement = element.previousElement()
       const nextElement = element.nextElement()
@@ -182,7 +185,7 @@ const checkIfOnUpdate = (element, parent, options) => {
       const hasPrevious = previousElement && previousElement.node
       const hasNext = nextElement && nextElement.node
 
-      const attachOptions = (hasPrevious?.parentNode || hasNext?.parentNode) && {
+      const attachOptions = ((hasPrevious && hasPrevious.parentNode) || (hasNext && hasNext.parentNode)) && {
         position: hasPrevious ? 'after' : hasNext ? 'before' : null,
         node: hasPrevious || hasNext
       }
@@ -210,8 +213,8 @@ const checkIfOnUpdate = (element, parent, options) => {
  * @param {boolean} [options.execStateFunction] - Execute the state functions.
  * @param {boolean} [options.stateFunctionOverwrite] - If true, overwrite (not merge) current state with what function returns.
  * @param {boolean} [options.preventInheritedStateUpdate] - If true, prevent inheriting state updates.
- * @param {boolean} [options.preventInitStateUpdateListener] - If true, prevent the 'initStateUpdated' event listener.
- * @param {boolean} [options.preventStateUpdateListener] - If true, prevent the 'stateUpdated' event listener.
+ * @param {boolean} [options.preventInitStateUpdateListener] - If true, prevent the 'initStateUpdate' event listener.
+ * @param {boolean} [options.preventStateUpdateListener] - If true, prevent the 'stateUpdate' event listener.
  * @returns {boolean} - If returns false, it breaks the update function
  */
 const inheritStateUpdates = (element, options) => {
@@ -240,18 +243,18 @@ const inheritStateUpdates = (element, options) => {
   const keyInParentState = findInheritedState(element, element.parent)
   if (!keyInParentState || options.preventInheritedStateUpdate) return
 
-  // Trigger on.initStateUpdated event
+  // Trigger on.initStateUpdate event
   if (!options.preventInitStateUpdateListener) {
-    const initStateReturns = triggerEventOnUpdate('initStateUpdated', keyInParentState, element, options)
+    const initStateReturns = triggerEventOnUpdate('initStateUpdate', keyInParentState, element, options)
     if (initStateReturns === false) return element
   }
 
   // Recreate the state again
   const newState = createStateUpdate(element, parent, options)
 
-  // Trigger on.stateUpdated event
+  // Trigger on.stateUpdate event
   if (!options.preventStateUpdateListener) {
-    triggerEventOnUpdate('stateUpdated', newState.parse(), element, options)
+    triggerEventOnUpdate('stateUpdate', newState.parse(), element, options)
   }
 }
 

package/utils/component.js

@@ -60,7 +60,7 @@ export const extendizeByKey = (element, parent, key) => {
         ? key.split('.')[0] // get component key split .
         : [key]
 
-  const isExtendKeyComponent = context?.components[extendFromKey]
+  const isExtendKeyComponent = context && context.components[extendFromKey]
 
   if (element === isExtendKeyComponent) return element
   else if (!hasComponentAttrs || childProps) {

package/utils/propEvents.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { lowercaseFirstLetter } from '@domql/utils'
+
+export const propagateEventsFromProps = (element) => {
+  const { props, on } = element
+  const eventKeysFromProps = Object.keys(props).filter(key => key.startsWith('on'))
+  eventKeysFromProps.forEach(v => {
+    const eventName = lowercaseFirstLetter(v.split('on')[1])
+    if (on[eventName]) {
+      on[eventName] = (...args) => {
+        on[eventName](...args)
+        props[v](...args)
+      }
+    } else on[eventName] = props[v]
+  })
+}