@domql/element 2.5.51 → 2.5.53

package/create.js

@@ -34,6 +34,7 @@ import {
   applyKeyComponentAsExtend,
   applyVariant,
   checkIfKeyIsComponent,
+  createValidDomqlObjectFromSugar,
   isVariant
 } from './utils/component'
 
@@ -151,7 +152,9 @@ const createBasedOnType = (element, parent, key, options) => {
 const redefineElement = (element, parent, key, options) => {
   const elementWrapper = createBasedOnType(element, parent, key, options)
 
-  if (checkIfKeyIsComponent(key)) {
+  if (options.syntaxv3 || element.props?.syntaxv3) {
+    return createValidDomqlObjectFromSugar(element, parent, key, options)
+  } else if (checkIfKeyIsComponent(key)) {
     return applyKeyComponentAsExtend(elementWrapper, parent, key)
   }
 

package/dist/cjs/create.js

@@ -115,8 +115,11 @@ const createBasedOnType = (element, parent, key, options) => {
   return element;
 };
 const redefineElement = (element, parent, key, options) => {
+  var _a;
   const elementWrapper = createBasedOnType(element, parent, key, options);
-  if ((0, import_component.checkIfKeyIsComponent)(key)) {
+  if (options.syntaxv3 || ((_a = element.props) == null ? void 0 : _a.syntaxv3)) {
+    return (0, import_component.createValidDomqlObjectFromSugar)(element, parent, key, options);
+  } else if ((0, import_component.checkIfKeyIsComponent)(key)) {
     return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
   }
   if (checkIfMedia(key)) {

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

@@ -206,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

@@ -34,7 +34,19 @@ module.exports = __toCommonJS(component_exports);
 var import_utils = require("@domql/utils");
 var import_extend = require("../extend");
 const ENV = "development";
-const DOMQL_BUILTINS = ["extend", "childExtend", "childExtendRecursive", "define", "props", "state", "on", "if", "attr", "key", "tag"];
+const DOMQL_BUILTINS = [
+  "extend",
+  "childExtend",
+  "childExtendRecursive",
+  "define",
+  "props",
+  "state",
+  "on",
+  "if",
+  "attr",
+  "key",
+  "tag"
+];
 const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = (0, import_utils.isString)(key);
   if (!isFirstKeyString)
@@ -57,7 +69,7 @@ const addAdditionalExtend = (newExtend, element) => {
   return { ...element, extend };
 };
 const replaceOnKeys = (key) => key.replace(/on\w+/g, (match) => match.substring(2));
-const createValidDomqlObjectFromSugar = (el) => {
+const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   const newElem = {
     props: {},
     on: {}
@@ -72,6 +84,10 @@ const createValidDomqlObjectFromSugar = (el) => {
     } else if (!isMethod && checkIfKeyIsProperty(k)) {
       if (!DOMQL_BUILTINS.includes(k))
         newElem.props[k] = prop;
+    } else if (checkIfKeyIsComponent(k)) {
+      newElem[k] = prop;
+    } else {
+      newElem[k] = prop;
     }
   }
   return newElem;

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.51",
+  "version": "2.5.53",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "75eb8c4728c904ec9f050a2eb9816502196caef9",
+  "gitHead": "aafcffa2ebe3d9c2fb96bd3adcb05325b62e68ff",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/update.js

@@ -213,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) => {
@@ -243,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

@@ -4,7 +4,19 @@ import { exec, isArray, isFunction, isObject, isString, joinArrays, overwriteDee
 import { applyExtend } from '../extend'
 const ENV = process.env.NODE_ENV
 
-const DOMQL_BUILTINS = ['extend', 'childExtend', 'childExtendRecursive', 'define', 'props', 'state', 'on', 'if', 'attr', 'key', 'tag']
+const DOMQL_BUILTINS = [
+  'extend',
+  'childExtend',
+  'childExtendRecursive',
+  'define',
+  'props',
+  'state',
+  'on',
+  'if',
+  'attr',
+  'key',
+  'tag'
+]
 
 export const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = isString(key)
@@ -12,6 +24,7 @@ export const checkIfKeyIsComponent = (key) => {
   const firstCharKey = key.slice(0, 1)
   return /^[A-Z]*$/.test(firstCharKey)
 }
+
 export const checkIfKeyIsProperty = (key) => {
   const isFirstKeyString = isString(key)
   if (!isFirstKeyString) return
@@ -29,7 +42,7 @@ export const addAdditionalExtend = (newExtend, element) => {
 
 const replaceOnKeys = key => key.replace(/on\w+/g, match => match.substring(2))
 
-export const createValidDomqlObjectFromSugar = el => {
+export const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   const newElem = {
     props: {},
     on: {}
@@ -43,6 +56,10 @@ export const createValidDomqlObjectFromSugar = el => {
       newElem.on[onKey] = prop
     } else if (!isMethod && checkIfKeyIsProperty(k)) {
       if (!DOMQL_BUILTINS.includes(k)) newElem.props[k] = prop
+    } else if (checkIfKeyIsComponent(k)) {
+      newElem[k] = prop
+    } else {
+      newElem[k] = prop
     }
   }
   return newElem

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]
+  })
+}