@domql/element 2.5.136 → 2.5.138

package/create.js

@@ -17,7 +17,8 @@ import {
   applyComponentFromContext,
   applyKeyComponentAsExtend,
   isVariant,
-  detectInfiniteLoop
+  detectInfiniteLoop,
+  addChildrenIfNotInOriginal
 } from '@domql/utils'
 import { triggerEventOn } from '@domql/event'
 import { assignNode } from '@domql/render'
@@ -57,23 +58,18 @@ const create = (element, parent, key, options = OPTIONS.create || {}, attachOpti
 
   const ref = addRef(element, parent, key)
 
-  // assign initial props
   ref.__initialProps = deepCloneWithExtend(element.props, [])
 
-  // assign context
   applyContext(element, parent, options)
 
   applyComponentFromContext(element, parent, options)
 
   if (!ref.__skipCreate) {
-    // create EXTEND inheritance
     applyExtend(element, parent, options)
   }
 
-  // create and assign a KEY
   element.key = key
 
-  // Only resolve extends, skip everything else
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options)
   }
@@ -114,6 +110,8 @@ const create = (element, parent, key, options = OPTIONS.create || {}, attachOpti
   // generate a CLASS name
   assignKeyAsClassname(element)
 
+  addChildrenIfNotInOriginal(element, parent, key)
+
   renderElement(element, parent, options, attachOptions)
 
   addElementIntoParentChildren(element, parent)
@@ -286,7 +284,7 @@ const createScope = (element, parent) => {
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element
 
-  if (isFunction(element.if) && !element.if(element, element.state)) {
+  if (isFunction(element.if) && !element.if(element, element.state, element.context)) {
     delete ref.__if
   } else ref.__if = true
 }

package/dist/cjs/create.js

@@ -87,6 +87,7 @@ const create = (element, parent, key, options = import_options.default.create ||
     return element;
   (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   (0, import_classList.assignKeyAsClassname)(element);
+  (0, import_utils.addChildrenIfNotInOriginal)(element, parent, key);
   renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   (0, import_event.triggerEventOn)("complete", element, options);
@@ -227,7 +228,7 @@ const createScope = (element, parent) => {
 };
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element;
-  if ((0, import_utils.isFunction)(element.if) && !element.if(element, element.state)) {
+  if ((0, import_utils.isFunction)(element.if) && !element.if(element, element.state, element.context)) {
     delete ref.__if;
   } else
     ref.__if = true;

package/dist/cjs/mixins/attr.js

@@ -23,12 +23,15 @@ __export(attr_exports, {
 module.exports = __toCommonJS(attr_exports);
 var import_utils = require("@domql/utils");
 var import_report = require("@domql/report");
+var import_utils2 = require("../utils");
 var attr_default = (params, element, node) => {
   const { __ref } = element;
   const { __attr } = __ref;
   if ((0, import_utils.isNot)("object"))
     (0, import_report.report)("HTMLInvalidAttr", params);
   if (params) {
+    if (element.props.attr)
+      (0, import_utils2.deepMerge)(params, element.props.attr);
     for (const attr in params) {
       const val = (0, import_utils.exec)(params[attr], element);
       if (val !== false && !(0, import_utils.isUndefined)(val) && !(0, import_utils.isNull)(val) && node.setAttribute)
@@ -38,5 +41,4 @@ var attr_default = (params, element, node) => {
       __attr[attr] = val;
     }
   }
-  console.groupEnd(params, __attr);
 };

package/dist/cjs/mixins/data.js

@@ -24,12 +24,16 @@ module.exports = __toCommonJS(data_exports);
 var import_utils = require("@domql/utils");
 var import_report = require("@domql/report");
 var data_default = (params, element, node) => {
-  if (params && params.showOnNode) {
-    if (!(0, import_utils.isObject)(params))
-      (0, import_report.report)("HTMLInvalidData", params);
-    for (const dataset in params) {
-      if (dataset !== "showOnNode") {
-        node.dataset[dataset] = (0, import_utils.exec)(params[dataset], element);
+  if (params) {
+    if (element.props.attr)
+      (0, import_utils.deepMerge)(params, element.props.attr);
+    if (params.showOnNode) {
+      if (!(0, import_utils.isObject)(params))
+        (0, import_report.report)("HTMLInvalidData", params);
+      for (const dataset in params) {
+        if (dataset !== "showOnNode") {
+          node.dataset[dataset] = (0, import_utils.exec)(params[dataset], element);
+        }
       }
     }
   }

package/dist/cjs/set.js

@@ -38,6 +38,7 @@ var import_create = __toESM(require("./create"), 1);
 var import_options = __toESM(require("./cache/options"), 1);
 var import_mixins = require("./mixins");
 var import_content = require("./mixins/content");
+var import_event = require("@domql/event");
 const resetElement = (params, element, options) => {
   if (!options.preventRemove)
     (0, import_content.removeContent)(element, options);
@@ -62,6 +63,11 @@ const set = function(params, options = {}, el) {
   const { __ref: ref, content } = element;
   const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
+  if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+    const beforeUpdateReturns = (0, import_event.triggerEventOnUpdate)("beforeUpdate", params, element, options);
+    if (beforeUpdateReturns === false)
+      return element;
+  }
   const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
   if (options.preventContentUpdate === true && !hasCollection)
     return;
@@ -79,6 +85,8 @@ const set = function(params, options = {}, el) {
     } else
       resetElement(params, element, options);
   }
+  if (!options.preventUpdateListener)
+    (0, import_event.triggerEventOn)("update", element, options);
   return element;
 };
 var set_default = set;

package/dist/cjs/update.js

@@ -174,11 +174,11 @@ const captureSnapshot = (element, options) => {
   return [snapshotOnCallee, calleeElement];
 };
 const checkIfOnUpdate = (element, parent, options) => {
-  var _a;
-  if (!(0, import_utils.isFunction)(element.if) || !parent)
+  var _a, _b;
+  if (!(0, import_utils.isFunction)(element.if) && !(0, import_utils.isFunction)(element.props.if) || !parent)
     return;
   const ref = element.__ref;
-  const ifPassed = element.if(element, element.state, element.context, options);
+  const ifPassed = (element.if || ((_a = element.props) == null ? void 0 : _a.if))(element, element.state, element.context, options);
   const itWasFalse = ref.__if !== true;
   if (ifPassed) {
     ref.__if = true;
@@ -200,7 +200,7 @@ const checkIfOnUpdate = (element, parent, options) => {
       }
       if (element.$collection || element.$stateCollection || element.$propsCollection) {
         element.removeContent();
-      } else if ((_a = element.content) == null ? void 0 : _a.parseDeep)
+      } else if ((_b = element.content) == null ? void 0 : _b.parseDeep)
         element.content = element.content.parseDeep();
       const previousElement = element.previousElement();
       const previousNode = previousElement == null ? void 0 : previousElement.node;

package/dist/cjs/utils/onlyResolveExtends.js

@@ -57,7 +57,7 @@ const onlyResolveExtends = (element, parent, key, options) => {
   (0, import_state.createState)(element, parent);
   const ref = __ref;
   if ((0, import_utils.isFunction)(element.if)) {
-    const ifPassed = element.if(element, element.state);
+    const ifPassed = element.if(element, element.state, element.context);
     if (!ifPassed) {
       delete ref.__if;
     } else

package/mixins/attr.js

@@ -2,6 +2,7 @@
 
 import { exec, isNot, isNull, isUndefined } from '@domql/utils'
 import { report } from '@domql/report'
+import { deepMerge } from '../utils'
 
 /**
  * Recursively add attributes to a DOM node
@@ -11,6 +12,7 @@ export default (params, element, node) => {
   const { __attr } = __ref
   if (isNot('object')) report('HTMLInvalidAttr', params)
   if (params) {
+    if (element.props.attr) deepMerge(params, element.props.attr)
     for (const attr in params) {
       const val = exec(params[attr], element)
       // if (__attr[attr] === val) return
@@ -19,5 +21,4 @@ export default (params, element, node) => {
       __attr[attr] = val
     }
   }
-  console.groupEnd(params, __attr)
 }

package/mixins/data.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isObject } from '@domql/utils'
+import { exec, isObject, deepMerge } from '@domql/utils'
 import { report } from '@domql/report'
 
 /**
@@ -8,13 +8,16 @@ import { report } from '@domql/report'
  * this should only work if `showOnNode: true` is passed
  */
 export default (params, element, node) => {
-  if (params && params.showOnNode) {
-    if (!isObject(params)) report('HTMLInvalidData', params)
+  if (params) {
+    if (element.props.attr) deepMerge(params, element.props.attr)
+    if (params.showOnNode) {
+      if (!isObject(params)) report('HTMLInvalidData', params)
 
-    // Apply data params on node
-    for (const dataset in params) {
-      if (dataset !== 'showOnNode') {
-        node.dataset[dataset] = exec(params[dataset], element)
+      // Apply data params on node
+      for (const dataset in params) {
+        if (dataset !== 'showOnNode') {
+          node.dataset[dataset] = exec(params[dataset], element)
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.136",
+  "version": "2.5.138",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -26,12 +26,12 @@
     "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.5.134",
-    "@domql/render": "^2.5.134",
-    "@domql/state": "^2.5.134",
-    "@domql/utils": "^2.5.134"
+    "@domql/event": "^2.5.138",
+    "@domql/render": "^2.5.138",
+    "@domql/state": "^2.5.138",
+    "@domql/utils": "^2.5.138"
   },
-  "gitHead": "3180ed884beb91ea31b5e5f5ddccfb06d850b172",
+  "gitHead": "91afb60b8354f1a95c3364be94ba74612f907918",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/set.js

@@ -6,6 +6,7 @@ import create from './create'
 import OPTIONS from './cache/options'
 import { registry } from './mixins'
 import { removeContent } from './mixins/content'
+import { triggerEventOn, triggerEventOnUpdate } from '@domql/event'
 
 export const resetElement = (params, element, options) => {
   if (!options.preventRemove) removeContent(element, options)
@@ -33,6 +34,11 @@ const set = function (params, options = {}, el) {
   const __contentRef = content && content.__ref
   const lazyLoad = element.props && element.props.lazyLoad
 
+  if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+    const beforeUpdateReturns = triggerEventOnUpdate('beforeUpdate', params, element, options)
+    if (beforeUpdateReturns === false) return element
+  }
+
   const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection
   if (options.preventContentUpdate === true && !hasCollection) return
 
@@ -50,6 +56,8 @@ const set = function (params, options = {}, el) {
     } else resetElement(params, element, options)
   }
 
+  if (!options.preventUpdateListener) triggerEventOn('update', element, options)
+
   return element
 }
 

package/update.js

@@ -180,10 +180,10 @@ const captureSnapshot = (element, options) => {
 }
 
 const checkIfOnUpdate = (element, parent, options) => {
-  if (!isFunction(element.if) || !parent) return
+  if ((!isFunction(element.if) && !isFunction(element.props.if)) || !parent) return
 
   const ref = element.__ref
-  const ifPassed = element.if(element, element.state, element.context, options)
+  const ifPassed = (element.if || element.props?.if)(element, element.state, element.context, options)
   const itWasFalse = ref.__if !== true
 
   if (ifPassed) {

package/utils/onlyResolveExtends.js

@@ -58,7 +58,7 @@ export const onlyResolveExtends = (element, parent, key, options) => {
   // Borrowed from createIfConditionFlag()
   const ref = __ref
   if (isFunction(element.if)) {
-    const ifPassed = element.if(element, element.state)
+    const ifPassed = element.if(element, element.state, element.context)
     if (!ifPassed) {
       // const ifFragment = cacheNode({ tag: 'fragment' })
       // ref.__ifFragment = appendNode(ifFragment, parent.node)