@domql/element 2.5.129 → 2.5.131

package/create.js

@@ -24,19 +24,19 @@ import {
   isNode,
   isUndefined,
   generateKey,
+  checkIfKeyIsComponent,
   deepCloneWithExtend,
+  applyComponentFromContext,
+  applyKeyComponentAsExtend,
+  isVariant,
   detectInfiniteLoop
 } from '@domql/utils'
 
 import OPTIONS from './cache/options'
 
 import {
-  applyComponentFromContext,
-  applyKeyComponentAsExtend,
   applyVariant,
-  checkIfKeyIsComponent,
-  createValidDomqlObjectFromSugar,
-  isVariant
+  createValidDomqlObjectFromSugar
 } from './utils/component'
 
 const ENV = process.env.NODE_ENV
@@ -228,7 +228,15 @@ const renderElement = (element, parent, options, attachOptions) => {
     createNode(element, options)
     ref.__uniqId = Math.random()
   } catch (e) {
-    if (ENV === 'test' || ENV === 'development') console.warn(element, e)
+    if (ENV === 'test' || ENV === 'development') {
+      const path = ref.__path
+      if (path.includes('ComponentsGrid')) path.splice(0, path.indexOf('ComponentsGrid') + 2)
+      if (path.includes('demoComponent')) path.splice(0, path.indexOf('demoComponent') + 1)
+      const isDemoComponent = element.lookup(el => el.state.key)?.state?.key
+      console.warn('Error happened in:', isDemoComponent ? isDemoComponent + ' ' : '' + path.join('.'))
+      console.warn(element)
+      console.error(e)
+    }
   }
 
   if (!ref.__if) {

package/dist/cjs/create.js

@@ -59,7 +59,7 @@ const create = (element, parent, key, options = import_options.default.create ||
   const ref = addRef(element, parent, key);
   ref.__initialProps = (0, import_utils.deepCloneWithExtend)(element.props, []);
   applyContext(element, parent, options);
-  (0, import_component.applyComponentFromContext)(element, parent, options);
+  (0, import_utils.applyComponentFromContext)(element, parent, options);
   if (!ref.__skipCreate) {
     (0, import_extend.applyExtend)(element, parent, options);
   }
@@ -122,8 +122,8 @@ const redefineElement = (element, parent, key, options) => {
     else
       element.syntaxv3 = true;
     return (0, import_component.createValidDomqlObjectFromSugar)(element, parent, key, options);
-  } else if ((0, import_component.checkIfKeyIsComponent)(key)) {
-    return (0, import_component.applyKeyComponentAsExtend)(elementWrapper, parent, key);
+  } else if ((0, import_utils.checkIfKeyIsComponent)(key)) {
+    return (0, import_utils.applyKeyComponentAsExtend)(elementWrapper, parent, key);
   }
   if (checkIfMedia(key)) {
     return applyMediaProps(elementWrapper, parent, key);
@@ -169,6 +169,7 @@ const addElementIntoParentChildren = (element, parent) => {
 };
 const visitedElements = /* @__PURE__ */ new WeakMap();
 const renderElement = (element, parent, options, attachOptions) => {
+  var _a, _b;
   if (visitedElements.has(element)) {
     if (ENV === "test" || ENV === "development")
       console.warn("Cyclic rendering detected:", element.__ref.__path);
@@ -182,8 +183,17 @@ const renderElement = (element, parent, options, attachOptions) => {
     (0, import_node.default)(element, options);
     ref.__uniqId = Math.random();
   } catch (e) {
-    if (ENV === "test" || ENV === "development")
-      console.warn(element, e);
+    if (ENV === "test" || ENV === "development") {
+      const path = ref.__path;
+      if (path.includes("ComponentsGrid"))
+        path.splice(0, path.indexOf("ComponentsGrid") + 2);
+      if (path.includes("demoComponent"))
+        path.splice(0, path.indexOf("demoComponent") + 1);
+      const isDemoComponent = (_b = (_a = element.lookup((el) => el.state.key)) == null ? void 0 : _a.state) == null ? void 0 : _b.key;
+      console.warn("Error happened in:", isDemoComponent ? isDemoComponent + " " : "" + path.join("."));
+      console.warn(element);
+      console.error(e);
+    }
   }
   if (!ref.__if) {
     parent[key || element.key] = element;
@@ -244,7 +254,7 @@ const addCaching = (element, parent) => {
     ref.__changes = [];
   if (!ref.__children)
     ref.__children = [];
-  if ((0, import_component.checkIfKeyIsComponent)(key))
+  if ((0, import_utils.checkIfKeyIsComponent)(key))
     ref.__componentKey = key.split("_")[0].split(".")[0].split("+")[0];
   const hasRoot = parent && parent.key === ":root";
   if (!ref.root)
@@ -279,7 +289,7 @@ const onlyResolveExtends = (element, parent, key, options) => {
     (0, import_iterate.throughInitialDefine)(element);
     (0, import_iterate.throughInitialExec)(element);
     for (const k in element) {
-      if ((0, import_utils.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+      if ((0, import_utils.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils.isObject)(import_mixins.registry[k]) || (0, import_utils.isVariant)(k))
         continue;
       const hasDefine = element.define && element.define[k];
       const contextHasDefine = element.context && element.context.define && element.context.define[k];

package/dist/cjs/iterate.js

@@ -33,7 +33,7 @@ const throughInitialExec = (element, exclude = {}) => {
     if (exclude[param])
       continue;
     const prop = element[param];
-    if ((0, import_utils.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils2.isVariant)(param)) {
+    if ((0, import_utils.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils.isVariant)(param)) {
       ref.__exec[param] = prop;
       element[param] = prop(element, element.state, element.context);
     }
@@ -52,8 +52,8 @@ const throughUpdatedExec = (element, options = { excludes: import_utils2.METHODS
     if (prop && prop.node && execReturnsString) {
       (0, import_utils2.overwrite)(prop, { text: newExec }, options);
     } else if (newExec !== prop) {
-      if ((0, import_utils2.checkIfKeyIsComponent)(param)) {
-        const { extend, ...newElem } = (0, import_utils2.extendizeByKey)(newExec, element, param);
+      if ((0, import_utils.checkIfKeyIsComponent)(param)) {
+        const { extend, ...newElem } = (0, import_utils.extendizeByKey)(newExec, element, param);
         (0, import_utils2.overwrite)(prop, newElem, options);
       } else {
         ref.__cached[param] = changes[param] = prop;
@@ -73,7 +73,7 @@ const throughInitialDefine = (element) => {
     defineObj = { ...defineObj, ...context.define };
   for (const param in defineObj) {
     let elementProp = element[param];
-    if ((0, import_utils.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils2.isVariant)(param)) {
+    if ((0, import_utils.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils.isVariant)(param)) {
       ref.__exec[param] = elementProp;
       const execParam2 = elementProp = (0, import_utils.exec)(elementProp, element);
       if (execParam2) {

package/dist/cjs/node.js

@@ -40,7 +40,6 @@ var import_create = __toESM(require("./create"), 1);
 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) => {
@@ -74,7 +73,7 @@ const createNode = (element, options) => {
     const value = element[param];
     if (!Object.hasOwnProperty.call(element, param))
       continue;
-    if ((0, import_utils.isUndefined)(value) || (0, import_methods.isMethod)(param) || (0, import_utils2.isVariant)(param) || (0, import_utils.isObject)(import_mixins.registry[param]))
+    if ((0, import_utils.isUndefined)(value) || (0, import_methods.isMethod)(param) || (0, import_utils.isVariant)(param) || (0, import_utils.isObject)(import_mixins.registry[param]))
       continue;
     const isElement = (0, import_applyParam.applyParam)(param, element, options);
     if (isElement) {

package/dist/cjs/update.js

@@ -138,7 +138,7 @@ const update = function(params = {}, opts) {
     const isInPreventUpdate = (0, import_utils.isArray)(preventUpdate) && preventUpdate.includes(param);
     const isInPreventDefineUpdate = (0, import_utils.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
     const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-    if ((0, import_utils.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_utils2.isVariant)(param))
+    if ((0, import_utils.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_utils.isVariant)(param))
       continue;
     if (preventStateUpdate === "once")
       options.preventStateUpdate = false;

package/dist/cjs/utils/component.js

@@ -18,44 +18,14 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var component_exports = {};
 __export(component_exports, {
-  addAdditionalExtend: () => addAdditionalExtend,
-  applyComponentFromContext: () => applyComponentFromContext,
-  applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
   applyVariant: () => applyVariant,
-  checkIfKeyIsComponent: () => checkIfKeyIsComponent,
-  checkIfKeyIsProperty: () => checkIfKeyIsProperty,
   createValidDomqlObjectFromSugar: () => createValidDomqlObjectFromSugar,
-  extendizeByKey: () => extendizeByKey,
-  hasVariantProp: () => hasVariantProp,
-  isVariant: () => isVariant,
   overwriteVariant: () => overwriteVariant
 });
 module.exports = __toCommonJS(component_exports);
 var import_utils = require("@domql/utils");
 var import_extend = require("../extend");
 var import_mixins = require("../mixins");
-const ENV = "development";
-const checkIfKeyIsComponent = (key) => {
-  const isFirstKeyString = (0, import_utils.isString)(key);
-  if (!isFirstKeyString)
-    return;
-  const firstCharKey = key.slice(0, 1);
-  return /^[A-Z]*$/.test(firstCharKey);
-};
-const checkIfKeyIsProperty = (key) => {
-  const isFirstKeyString = (0, import_utils.isString)(key);
-  if (!isFirstKeyString)
-    return;
-  const firstCharKey = key.slice(0, 1);
-  return /^[a-z]*$/.test(firstCharKey);
-};
-const addAdditionalExtend = (newExtend, element) => {
-  const { extend: elementExtend } = element;
-  const originalArray = (0, import_utils.isArray)(elementExtend) ? elementExtend : [elementExtend];
-  const receivedArray = (0, import_utils.isArray)(newExtend) ? newExtend : [newExtend];
-  const extend = (0, import_utils.joinArrays)(receivedArray, originalArray);
-  return { ...element, extend };
-};
 const replaceOnKeys = (key) => key.replace(/on\w+/g, (match) => match.substring(2));
 const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   const newElem = {
@@ -69,7 +39,7 @@ const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
       const onKey = replaceOnKeys(prop);
       newElem.on[onKey] = prop;
     }
-    const isComponent = checkIfKeyIsComponent(k);
+    const isComponent = (0, import_utils.checkIfKeyIsComponent)(k);
     const isRegistry = import_mixins.registry[k];
     if (isComponent || isRegistry) {
       newElem[k] = prop;
@@ -79,70 +49,6 @@ const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   }
   return newElem;
 };
-const extendizeByKey = (element, parent, key) => {
-  const { context } = parent;
-  const { tag, extend, props, attr, state, childExtend, childProps, on, if: condition, data } = element;
-  const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr || data;
-  const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
-  const isExtendKeyComponent = context && context.components[extendFromKey];
-  if (element === isExtendKeyComponent)
-    return element;
-  else if (!hasComponentAttrs || childProps) {
-    return {
-      extend: extendFromKey,
-      tag,
-      props: { ...element }
-    };
-  } else if (!extend || extend === true) {
-    return {
-      ...element,
-      tag,
-      extend: extendFromKey
-    };
-  } else if (extend) {
-    return addAdditionalExtend(extendFromKey, element);
-  } else if ((0, import_utils.isFunction)(element)) {
-    return {
-      extend: extendFromKey,
-      tag,
-      props: { ...(0, import_utils.exec)(element, parent) }
-    };
-  }
-};
-const applyKeyComponentAsExtend = (element, parent, key) => {
-  return extendizeByKey(element, parent, key) || element;
-};
-const applyComponentFromContext = (element, parent, options) => {
-  const { context } = element;
-  if (!context || !context.components)
-    return;
-  const { components } = context;
-  const { extend } = element;
-  const execExtend = (0, import_utils.exec)(extend, element);
-  if ((0, import_utils.isString)(execExtend)) {
-    const componentExists = components[execExtend] || components["smbls." + execExtend];
-    if (componentExists)
-      element.extend = componentExists;
-    else {
-      if ((ENV === "test" || ENV === "development") && options.verbose) {
-        console.warn(execExtend, "is not in library", components, element);
-        console.warn("replacing with ", {});
-      }
-      element.extend = {};
-    }
-  }
-};
-const isVariant = (param) => {
-  if (!(0, import_utils.isString)(param))
-    return;
-  const firstCharKey = param.slice(0, 1);
-  return firstCharKey === ".";
-};
-const hasVariantProp = (element) => {
-  const { props } = element;
-  if ((0, import_utils.isObject)(props) && (0, import_utils.isString)(props.variant))
-    return true;
-};
 const overwriteVariant = (element, variant, variantProps) => {
   let variantElement = element[variant];
   if (!variantElement)
@@ -153,7 +59,7 @@ const overwriteVariant = (element, variant, variantProps) => {
       extend: [{ props }, variantElement]
     };
   } else if (variantElement.extend) {
-    variantElement = addAdditionalExtend({ props }, variantElement);
+    variantElement = (0, import_utils.addAdditionalExtend)({ props }, variantElement);
   }
   const extendedVariant = (0, import_extend.applyExtend)(variantElement, element.parent);
   const { parent, ...rest } = extendedVariant;
@@ -161,11 +67,11 @@ const overwriteVariant = (element, variant, variantProps) => {
 };
 const applyVariant = (element) => {
   const { props } = element;
-  if (!hasVariantProp(element))
+  if (!(0, import_utils.hasVariantProp)(element))
     return element;
   const { variant } = props;
   overwriteVariant(element, `.${variant}`);
-  const elKeys = Object.keys(element).filter((key) => isVariant(key));
+  const elKeys = Object.keys(element).filter((key) => (0, import_utils.isVariant)(key));
   elKeys.forEach((variant2) => {
     const slicedVariantElementKey = variant2.slice(1);
     const variantElementProps = props[slicedVariantElementKey];

package/extend.js

@@ -37,6 +37,9 @@ export const applyExtend = (element, parent, options = {}) => {
     if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
       childExtendStack = getExtendStack(parent.childExtend, context)
 
+      // if (!options.ignoreChildExtend && !(props && exec(props, element).ignoreChildExtend)) {
+      //   const ignoreChildExtendRecursive = props && exec(props, element).ignoreChildExtendRecursive
+
       const ignoreChildExtendRecursive = props && props.ignoreChildExtendRecursive
       if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
         const canExtendRecursive = element.key !== '__text'

package/iterate.js

@@ -1,7 +1,17 @@
 'use strict'
 
-import { isObject, exec, isFunction, isNumber, isString } from '@domql/utils'
-import { METHODS_EXL, checkIfKeyIsComponent, extendizeByKey, isVariant, overwrite } from './utils'
+import {
+  isObject,
+  exec,
+  isFunction,
+  isNumber,
+  isString,
+  checkIfKeyIsComponent,
+  extendizeByKey,
+  isVariant
+} from '@domql/utils'
+
+import { METHODS_EXL, overwrite } from './utils'
 import { isMethod } from './methods'
 
 export const throughInitialExec = (element, exclude = {}) => {

package/node.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
+import { exec, isFunction, isObject, isUndefined, isVariant } from '@domql/utils'
 import { applyEventsOnNode, triggerEventOn, applyAnimationFrame } from '@domql/event'
 import { cacheNode } from '@domql/render'
 import { isMethod } from './methods'
@@ -13,7 +13,6 @@ import {
 } from './iterate'
 import { registry } from './mixins'
 import { applyParam } from './utils/applyParam'
-import { isVariant } from './utils'
 import { propagateEventsFromProps } from './utils/propEvents'
 // import { defineSetter } from './methods'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.129",
+  "version": "2.5.131",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -9,7 +9,8 @@
     ".": {
       "kalduna": "./index.js",
       "default": "./dist/cjs/index.js"
-    }
+    },
+    "./utils/component": "./utils/component.js"
   },
   "source": "index.js",
   "files": [
@@ -31,7 +32,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "a1a3e4b7cc65070a97310196950bb88481741356",
+  "gitHead": "ede2477daecd2192a473223cfea69bf7363c6e02",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/update.js

@@ -10,6 +10,7 @@ import {
   isString,
   isUndefined,
   merge,
+  isVariant,
   overwriteDeep,
   createSnapshotId
 } from '@domql/utils'
@@ -24,7 +25,7 @@ import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { registry } from './mixins'
 import { applyParam } from './utils/applyParam'
 import OPTIONS from './cache/options'
-import { METHODS_EXL, deepClone, isVariant, deepMerge } from './utils'
+import { METHODS_EXL, deepClone, deepMerge } from './utils' // old utils (current)
 
 const snapshot = {
   snapshotId: createSnapshotId

package/utils/component.js

@@ -1,31 +1,17 @@
 'use strict'
 
-import { exec, isArray, isFunction, isObject, isString, joinArrays, overwriteDeep } from '@domql/utils'
+import {
+  isObject,
+  isString,
+  overwriteDeep,
+  checkIfKeyIsComponent,
+  addAdditionalExtend,
+  hasVariantProp,
+  isVariant
+} from '@domql/utils'
+
 import { applyExtend } from '../extend'
 import { registry } from '../mixins'
-const ENV = process.env.NODE_ENV
-
-export const checkIfKeyIsComponent = (key) => {
-  const isFirstKeyString = isString(key)
-  if (!isFirstKeyString) return
-  const firstCharKey = key.slice(0, 1)
-  return /^[A-Z]*$/.test(firstCharKey)
-}
-
-export const checkIfKeyIsProperty = (key) => {
-  const isFirstKeyString = isString(key)
-  if (!isFirstKeyString) return
-  const firstCharKey = key.slice(0, 1)
-  return /^[a-z]*$/.test(firstCharKey)
-}
-
-export const addAdditionalExtend = (newExtend, element) => {
-  const { extend: elementExtend } = element
-  const originalArray = isArray(elementExtend) ? elementExtend : [elementExtend]
-  const receivedArray = isArray(newExtend) ? newExtend : [newExtend]
-  const extend = joinArrays(receivedArray, originalArray)
-  return { ...element, extend }
-}
 
 const replaceOnKeys = key => key.replace(/on\w+/g, match => match.substring(2))
 
@@ -54,85 +40,6 @@ export const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   return newElem
 }
 
-export const extendizeByKey = (element, parent, key) => {
-  const { context } = parent
-  const { tag, extend, props, attr, state, childExtend, childProps, on, if: condition, data } = element
-  const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr || data
-
-  const extendFromKey = key.includes('+')
-    ? key.split('+') // get array of componentKeys
-    : key.includes('_')
-      ? [key.split('_')[0]] // get component key split _
-      : key.includes('.') && !checkIfKeyIsComponent(key.split('.')[1])
-        ? [key.split('.')[0]] // get component key split .
-        : [key]
-
-  // console.log(extendFromKey)
-  // console.log(context, context?.components)
-  // console.log(element)
-  const isExtendKeyComponent = context && context.components[extendFromKey]
-
-  if (element === isExtendKeyComponent) return element
-  else if (!hasComponentAttrs || childProps) {
-    return {
-      extend: extendFromKey,
-      tag,
-      props: { ...element }
-    }
-  } else if (!extend || extend === true) {
-    return {
-      ...element,
-      tag,
-      extend: extendFromKey
-    }
-  } else if (extend) {
-    return addAdditionalExtend(extendFromKey, element)
-  } else if (isFunction(element)) {
-    return {
-      extend: extendFromKey,
-      tag,
-      props: { ...exec(element, parent) }
-    }
-  }
-}
-
-export const applyKeyComponentAsExtend = (element, parent, key) => {
-  return extendizeByKey(element, parent, key) || element
-}
-
-export const applyComponentFromContext = (element, parent, options) => {
-  const { context } = element
-
-  if (!context || !context.components) return
-
-  const { components } = context
-  const { extend } = element
-  const execExtend = exec(extend, element)
-  if (isString(execExtend)) {
-    const componentExists = components[execExtend] || components['smbls.' + execExtend]
-    if (componentExists) element.extend = componentExists
-    else {
-      if ((ENV === 'test' || ENV === 'development') && options.verbose) {
-        console.warn(execExtend, 'is not in library', components, element)
-        console.warn('replacing with ', {})
-      }
-      element.extend = {}
-    }
-  }
-}
-
-export const isVariant = (param) => {
-  if (!isString(param)) return
-  const firstCharKey = param.slice(0, 1)
-  // return (firstCharKey === '.' || firstCharKey === '$')
-  return (firstCharKey === '.')
-}
-
-export const hasVariantProp = (element) => {
-  const { props } = element
-  if (isObject(props) && isString(props.variant)) return true
-}
-
 export const overwriteVariant = (element, variant, variantProps) => {
   let variantElement = element[variant]
   if (!variantElement) return