@domql/element 2.5.110 → 2.5.112

package/create.js

@@ -24,7 +24,7 @@ import {
   isNode,
   isUndefined,
   generateKey,
-  deepClone
+  deepCloneWithExtend
 } from '@domql/utils'
 
 import OPTIONS from './cache/options'
@@ -60,7 +60,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}, attachOpti
   const ref = addRef(element, parent, key)
 
   // assign initial props
-  ref.__initialProps = deepClone(element.props, [])
+  ref.__initialProps = deepCloneWithExtend(element.props, [])
 
   // assign context
   applyContext(element, parent, options)

package/dist/cjs/create.js

@@ -57,7 +57,7 @@ const create = (element, parent, key, options = import_options.default.create ||
   parent = redefineParent(element, parent, key);
   key = createKey(element, parent, key);
   const ref = addRef(element, parent, key);
-  ref.__initialProps = (0, import_utils.deepClone)(element.props, []);
+  ref.__initialProps = (0, import_utils.deepCloneWithExtend)(element.props, []);
   applyContext(element, parent, options);
   (0, import_component.applyComponentFromContext)(element, parent, options);
   if (!ref.__skipCreate) {

package/dist/cjs/methods/index.js

@@ -123,7 +123,12 @@ const setNodeStyles = function(params = {}) {
   if (!((_a = el.node) == null ? void 0 : _a.style))
     return;
   for (const param in params) {
-    el.node.style[param] = params[param];
+    const value = params[param];
+    const childElem = el[param];
+    if ((0, import_utils.isObject)(value) && childElem)
+      setNodeStyles.call(childElem, value);
+    else
+      el.node.style[param] = value;
   }
   return el;
 };

package/dist/cjs/mixins/content.js

@@ -43,22 +43,23 @@ const updateContent = function(params, options) {
   if (element.content.update)
     element.content.update(params, options);
 };
-const removeContent = function(el) {
+const removeContent = function(el, opts = {}) {
   const element = el || this;
   const { __ref } = element;
-  if (element.content) {
-    if (element.content.node && element.node) {
-      if (element.content.tag === "fragment")
+  const contentElementKey = opts.contentElementKey || "content";
+  if (element[contentElementKey]) {
+    if (element[contentElementKey].node && element.node) {
+      if (element[contentElementKey].tag === "fragment")
         element.node.innerHTML = "";
       else
-        element.node.removeChild(element.content.node);
+        element.node.removeChild(element[contentElementKey].node);
     }
     const { __cached } = __ref;
-    if (__cached && __cached.content) {
-      if (__cached.content.tag === "fragment")
-        __cached.content.parent.node.innerHTML = "";
-      else if (__cached.content && (0, import_utils.isFunction)(__cached.content.remove))
-        __cached.content.remove();
+    if (__cached && __cached[contentElementKey]) {
+      if (__cached[contentElementKey].tag === "fragment")
+        __cached[contentElementKey].parent.node.innerHTML = "";
+      else if (__cached[contentElementKey] && (0, import_utils.isFunction)(__cached[contentElementKey].remove))
+        __cached[contentElementKey].remove();
     }
     delete element.content;
   }

package/dist/cjs/props/create.js

@@ -52,7 +52,7 @@ const syncProps = (props, element) => {
     const execProps = (0, import_utils.exec)(v, element);
     element.props = (0, import_utils.deepMerge)(
       mergedProps,
-      (0, import_utils.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+      (0, import_utils.deepCloneWithExtend)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
       import_ignore.IGNORE_PROPS_PARAMS
     );
   });

package/dist/cjs/utils/object.js

@@ -126,10 +126,10 @@ const mergeIfExisted = (a, b) => {
   return a || b;
 };
 const mergeArray = (arr, exclude = ["parent", "node", "__element", "state", "context", "__ref"]) => {
-  return arr.reduce((a, c) => deepMerge(a, deepClone(c, exclude)), {});
+  return arr.reduce((a, c) => deepMerge(a, (0, import_utils.deepCloneWithExtend)(c, exclude)), {});
 };
 const mergeAndCloneIfArray = (obj) => {
-  return (0, import_utils.isArray)(obj) ? mergeArray(obj) : deepClone(obj);
+  return (0, import_utils.isArray)(obj) ? mergeArray(obj) : (0, import_utils.deepCloneWithExtend)(obj);
 };
 const flattenRecursive = (param, prop, stack = []) => {
   const objectized = mergeAndCloneIfArray(param);

package/methods/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isDefined, isFunction, isObjectLike, isProduction } from '@domql/utils'
+import { isDefined, isObject, isFunction, isObjectLike, isProduction } from '@domql/utils'
 import { TREE } from '../tree'
 import { parseFilters, registry } from '../mixins'
 
@@ -90,7 +90,10 @@ export const setNodeStyles = function (params = {}) {
   if (!el.node?.style) return
 
   for (const param in params) {
-    el.node.style[param] = params[param]
+    const value = params[param]
+    const childElem = el[param]
+    if (isObject(value) && childElem) setNodeStyles.call(childElem, value)
+    else el.node.style[param] = value
   }
 
   return el

package/mixins/content.js

@@ -10,20 +10,21 @@ export const updateContent = function (params, options) {
   if (element.content.update) element.content.update(params, options)
 }
 
-export const removeContent = function (el) {
+export const removeContent = function (el, opts = {}) {
   const element = el || this
   const { __ref } = element
+  const contentElementKey = opts.contentElementKey || 'content'
 
-  if (element.content) {
-    if (element.content.node && element.node) {
-      if (element.content.tag === 'fragment') element.node.innerHTML = ''
-      else element.node.removeChild(element.content.node)
+  if (element[contentElementKey]) {
+    if (element[contentElementKey].node && element.node) {
+      if (element[contentElementKey].tag === 'fragment') element.node.innerHTML = ''
+      else element.node.removeChild(element[contentElementKey].node)
     }
 
     const { __cached } = __ref
-    if (__cached && __cached.content) {
-      if (__cached.content.tag === 'fragment') __cached.content.parent.node.innerHTML = ''
-      else if (__cached.content && isFunction(__cached.content.remove)) __cached.content.remove()
+    if (__cached && __cached[contentElementKey]) {
+      if (__cached[contentElementKey].tag === 'fragment') __cached[contentElementKey].parent.node.innerHTML = ''
+      else if (__cached[contentElementKey] && isFunction(__cached[contentElementKey].remove)) __cached[contentElementKey].remove()
     }
 
     delete element.content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.110",
+  "version": "2.5.112",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "2942c0972b473f8be846cbf0e5a9f1917cf20d65",
+  "gitHead": "8a59640e77bcd22114bdf64dfa4945604b5bfd1f",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isArray, isObject, deepClone, deepMerge } from '@domql/utils'
+import { exec, isArray, isObject, deepCloneWithExtend, deepMerge } from '@domql/utils'
 import { IGNORE_PROPS_PARAMS } from './ignore'
 
 import { inheritParentProps } from './inherit'
@@ -36,7 +36,7 @@ export const syncProps = (props, element) => {
     // it was causing infinite loop at early days
     element.props = deepMerge(
       mergedProps,
-      deepClone(execProps, IGNORE_PROPS_PARAMS),
+      deepCloneWithExtend(execProps, IGNORE_PROPS_PARAMS),
       IGNORE_PROPS_PARAMS
     )
   })

package/utils/object.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isArray, isObject, isObjectLike, joinArrays } from '@domql/utils'
+import { isArray, isObject, isObjectLike, joinArrays, deepCloneWithExtend } from '@domql/utils'
 import { IGNORE_STATE_PARAMS } from '@domql/state'
 import { IGNORE_PROPS_PARAMS } from '../props'
 import { METHODS } from '../methods'
@@ -115,14 +115,14 @@ export const mergeIfExisted = (a, b) => {
  * Merges array extends
  */
 export const mergeArray = (arr, exclude = ['parent', 'node', '__element', 'state', 'context', '__ref']) => {
-  return arr.reduce((a, c) => deepMerge(a, deepClone(c, exclude)), {})
+  return arr.reduce((a, c) => deepMerge(a, deepCloneWithExtend(c, exclude)), {})
 }
 
 /**
  * Merges array extends
  */
 export const mergeAndCloneIfArray = obj => {
-  return isArray(obj) ? mergeArray(obj) : deepClone(obj)
+  return isArray(obj) ? mergeArray(obj) : deepCloneWithExtend(obj)
 }
 
 /**