@domql/element 2.5.17 → 2.5.19

package/create.js

@@ -45,6 +45,8 @@ const ENV = process.env.NODE_ENV
 const create = (element, parent, key, options = OPTIONS.create || {}) => {
   cacheOptions(element, options)
 
+  // if (key === 'Title') debugger
+
   // if element is STRING
   if (checkIfPrimitive(element)) {
     element = applyValueAsText(element, parent, key)
@@ -83,8 +85,18 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
 
   addMethods(element, parent)
 
+  createScope(element, parent)
+
   createState(element, parent)
+  if (element.scope === 'state') element.scope = element.state
+
+  createIfConditionFlag(element, parent)
+
+  // apply props settings
+  createProps(element, parent)
+  if (element.scope === 'props' || element.scope === true) element.scope = element.props
 
+  // recatch if it passess props again
   createIfConditionFlag(element, parent)
 
   // if it already HAS a NODE
@@ -92,9 +104,6 @@ const create = (element, parent, key, options = OPTIONS.create || {}) => {
     return assignNode(element, parent, key)
   }
 
-  // apply props settings
-  createProps(element, parent)
-
   // apply variants
   applyVariant(element, parent)
 
@@ -235,6 +244,11 @@ const applyContext = (element, parent, options) => {
   if (!element.context) element.context = parent.context || options.context || ROOT.context
 }
 
+const createScope = (element, parent) => {
+  const { __ref: ref } = element
+  if (!element.scope) element.scope = parent.scope || ref.__root.scope || {}
+}
+
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element
 

package/dist/cjs/create.js

@@ -70,12 +70,18 @@ const create = (element, parent, key, options = import_options.default.create ||
   replaceOptions(element, parent, options);
   addCaching(element, parent);
   (0, import_set.addMethods)(element, parent);
+  createScope(element, parent);
   (0, import_state.createState)(element, parent);
+  if (element.scope === "state")
+    element.scope = element.state;
+  createIfConditionFlag(element, parent);
+  (0, import_props.createProps)(element, parent);
+  if (element.scope === "props" || element.scope === true)
+    element.scope = element.props;
   createIfConditionFlag(element, parent);
   if (element.node && ref.__if) {
     return (0, import_render.assignNode)(element, parent, key);
   }
-  (0, import_props.createProps)(element, parent);
   (0, import_component.applyVariant)(element, parent);
   const onInit = (0, import_event.triggerEventOn)("init", element, options);
   if (onInit === false)
@@ -182,6 +188,11 @@ const applyContext = (element, parent, options) => {
   if (!element.context)
     element.context = parent.context || options.context || import_tree.ROOT.context;
 };
+const createScope = (element, parent) => {
+  const { __ref: ref } = element;
+  if (!element.scope)
+    element.scope = parent.scope || ref.__root.scope || {};
+};
 const createIfConditionFlag = (element, parent) => {
   const { __ref: ref } = element;
   if ((0, import_utils.isFunction)(element.if)) {

package/dist/cjs/extend.js

@@ -29,19 +29,19 @@ const applyExtend = (element, parent, options = {}) => {
     element = (0, import_utils.exec)(element, parent);
   let { extend, props, context, __ref } = element;
   extend = (0, import_utils2.fallbackStringExtend)(extend, context, options);
-  const extendStack = (0, import_utils2.getExtendStack)(extend);
+  const extendStack = (0, import_utils2.getExtendStack)(extend, context);
   if (ENV !== "test" || ENV !== "development")
     delete element.extend;
   let childExtendStack = [];
   if (parent) {
     element.parent = parent;
     if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
-      childExtendStack = (0, import_utils2.getExtendStack)(parent.childExtend);
+      childExtendStack = (0, import_utils2.getExtendStack)(parent.childExtend, context);
       const ignoreChildExtendRecursive = props && props.ignoreChildExtendRecursive;
       if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
         const canExtendRecursive = element.key !== "__text";
         if (canExtendRecursive) {
-          const childExtendRecursiveStack = (0, import_utils2.getExtendStack)(parent.childExtendRecursive);
+          const childExtendRecursiveStack = (0, import_utils2.getExtendStack)(parent.childExtendRecursive, context);
           childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
           element.childExtendRecursive = parent.childExtendRecursive;
         }
@@ -60,13 +60,12 @@ const applyExtend = (element, parent, options = {}) => {
   } else if (!options.extend)
     return element;
   if (options.extend) {
-    const defaultOptionsExtend = (0, import_utils2.getExtendStack)(options.extend);
+    const defaultOptionsExtend = (0, import_utils2.getExtendStack)(options.extend, context);
     stack = [].concat(stack, defaultOptionsExtend);
   }
   if (__ref)
     __ref.__extend = stack;
-  const findAndReplaceStrings = (0, import_utils2.replaceStringsWithComponents)(stack, context, options);
-  let mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+  let mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(stack);
   const COMPONENTS = context && context.components || options.components;
   const component = (0, import_utils.exec)(element.component || mergedExtend.component, element);
   if (component && COMPONENTS && COMPONENTS[component]) {

package/dist/cjs/mixins/index.js

@@ -35,6 +35,7 @@ __export(mixins_exports, {
   data: () => import_data.default,
   html: () => import_html.default,
   registry: () => import_registry.default,
+  scope: () => import_scope.default,
   state: () => import_state.default,
   style: () => import_style.default,
   text: () => import_text.default
@@ -48,5 +49,6 @@ var import_html = __toESM(require("./html"), 1);
 var import_style = __toESM(require("./style"), 1);
 var import_text = __toESM(require("./text"), 1);
 var import_state = __toESM(require("./state"), 1);
+var import_scope = __toESM(require("./scope"), 1);
 var import_registry = __toESM(require("./registry"), 1);
 __reExport(mixins_exports, require("./registry"), module.exports);

package/dist/cjs/mixins/registry.js

@@ -32,6 +32,7 @@ var registry_default = {
   data: import__.data,
   class: import__.classList,
   state: import__.state,
+  scope: import__.scope,
   deps: (param, el) => param || el.parent.deps,
   extend: {},
   childExtend: {},

package/dist/cjs/mixins/scope.js

@@ -0,0 +1,36 @@
+"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 scope_exports = {};
+__export(scope_exports, {
+  default: () => scope_default
+});
+module.exports = __toCommonJS(scope_exports);
+var import_utils = require("@domql/utils");
+var scope_default = (params, element, node) => {
+  if (!(0, import_utils.isObject)(params))
+    return;
+  for (const scopeItem in params) {
+    const value = params[scopeItem];
+    if ((0, import_utils.isFunction)(value)) {
+      element.scope[scopeItem] = value.bind(element);
+    } else {
+      element.scope[scopeItem] = value;
+    }
+  }
+};

package/dist/cjs/mixins/text.js

@@ -18,34 +18,17 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var text_exports = {};
 __export(text_exports, {
-  asd: () => asd,
   default: () => text_default
 });
 module.exports = __toCommonJS(text_exports);
 var import__ = require("..");
 var import_utils = require("@domql/utils");
-const asd = (param, element, node) => {
-  const prop = (0, import_utils.exec)(param, element);
-  if (element.tag === "string") {
-    node.nodeValue = prop;
-  } else if (param !== void 0 || param !== null) {
-    if (element.__text && element.__text.text !== prop)
-      return;
-    element.__text.text = prop;
-    if (element.__text.node)
-      element.__text.node.nodeValue = prop;
-    else
-      (0, import__.create)({ tag: "string", text: prop }, element, "__text");
-  }
-};
 var text_default = (param, element, node) => {
   let prop = (0, import_utils.exec)(param, element);
   if ((0, import_utils.isString)(prop) && prop.includes("{{")) {
     prop = (0, import_utils.replaceLiteralsWithObjectFields)(prop, element.state);
   }
   if (element.tag === "string") {
-    if (element.text === prop)
-      return;
     node.nodeValue = prop;
   } else if (param !== void 0 || param !== null) {
     if (element.__text) {

package/dist/cjs/node.js

@@ -60,25 +60,25 @@ const createNode = (element, options) => {
     if ((0, import_utils.isFunction)(node.setAttribute))
       node.setAttribute("key", element.key);
   }
-  if (element.tag !== "string" || element.tag !== "fragment") {
-    (0, import_iterate.throughInitialDefine)(element);
-    (0, import_iterate.throughInitialExec)(element);
+  (0, import_iterate.throughInitialDefine)(element);
+  (0, import_iterate.throughInitialExec)(element);
+  if (element.tag !== "string" && element.tag !== "fragment") {
     if (isNewNode && (0, import_utils.isObject)(element.on))
       (0, import_event.applyEventsOnNode)(element);
-    for (const param in element) {
-      const prop = element[param];
-      if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils2.isVariant)(param) || (0, import_utils.isObject)(import_mixins.registry[param]))
-        continue;
-      const isElement = (0, import_applyParam.applyParam)(param, element, options);
-      if (isElement) {
-        const { hasDefine, hasContextDefine } = isElement;
-        if (element[param] && !hasDefine && !hasContextDefine) {
-          const createAsync = () => (0, import_create.default)((0, import_utils.exec)(prop, element), element, param, options);
-          if (element.props && element.props.lazyLoad || options.lazyLoad) {
-            window.requestAnimationFrame(() => createAsync());
-          } else
-            createAsync();
-        }
+  }
+  for (const param in element) {
+    const value = element[param];
+    if ((0, import_utils.isUndefined)(value) || (0, import_methods.isMethod)(param) || (0, import_utils2.isVariant)(param) || (0, import_utils.isObject)(import_mixins.registry[param]))
+      continue;
+    const isElement = (0, import_applyParam.applyParam)(param, element, options);
+    if (isElement) {
+      const { hasDefine, hasContextDefine } = isElement;
+      if (element[param] && !hasDefine && !hasContextDefine) {
+        const createAsync = () => (0, import_create.default)((0, import_utils.exec)(value, element), element, param, options);
+        if (element.props && element.props.lazyLoad || options.lazyLoad) {
+          window.requestAnimationFrame(() => createAsync());
+        } else
+          createAsync();
       }
     }
   }

package/dist/cjs/props/create.js

@@ -36,7 +36,7 @@ const createPropsStack = (element, parent) => {
     propsStack.push(props);
   if ((0, import_utils.isArray)(__ref.__extend)) {
     __ref.__extend.forEach((extend) => {
-      if (extend.props)
+      if (extend.props && extend.props !== props)
         propsStack.push(extend.props);
     });
   }
@@ -45,13 +45,11 @@ const createPropsStack = (element, parent) => {
 };
 const syncProps = (props, element) => {
   element.props = {};
-  const mergedProps = { update, __element: element };
+  const mergedProps = {};
   props.forEach((v) => {
     if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
       return;
     const execProps = (0, import_utils.exec)(v, element);
-    if ((0, import_utils.isObject)(execProps) && execProps.__element)
-      return;
     element.props = (0, import_utils.deepMerge)(
       mergedProps,
       (0, import_utils.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
@@ -59,18 +57,31 @@ const syncProps = (props, element) => {
     );
   });
   element.props = mergedProps;
+  const methods = { update: update.bind(element.props), __element: element };
+  Object.setPrototypeOf(element.props, methods);
   return element.props;
 };
 const createProps = function(element, parent, cached) {
-  const propsStack = cached || createPropsStack(element, parent);
   const { __ref: ref } = element;
-  if (!ref.__if)
-    return;
-  if (propsStack.length) {
-    ref.__props = propsStack;
-    syncProps(propsStack, element);
-    element.props.update = update;
+  if (ref.__if) {
+    try {
+      const propsStack = cached || createPropsStack(element, parent);
+      if (propsStack.length) {
+        ref.__props = propsStack;
+        syncProps(propsStack, element);
+      } else {
+        element.props = {};
+      }
+    } catch (e) {
+      element.props = {};
+      ref.__props = cached || [];
+    }
+  } else {
+    element.props = {};
+    ref.__props = cached || [];
   }
+  const methods = { update: update.bind(element.props), __element: element };
+  Object.setPrototypeOf(element.props, methods);
   return element;
 };
 function update(props, options) {

package/dist/cjs/props/update.js

@@ -27,7 +27,7 @@ const updateProps = (newProps, element, parent) => {
   const { __ref } = element;
   let propsStack = __ref.__props;
   const parentProps = (0, import_inherit.inheritParentProps)(element, parent);
-  if (parentProps)
+  if (parentProps.length)
     propsStack = __ref.__props = [].concat(parentProps, propsStack);
   if (newProps)
     propsStack = __ref.__props = [].concat(newProps, propsStack);

package/dist/cjs/set.js

@@ -39,21 +39,30 @@ var import_content = require("./mixins/content");
 const set = function(params, options = {}, el) {
   const element = el || this;
   const __contentRef = element.content && element.content.__ref;
+  const lazyLoad = element.props && element.props.lazyLoad;
   if (__contentRef && __contentRef.__cached && (0, import_utils.deepContains)(params, element.content)) {
     console.log("is content equal");
     return element.content.update();
   }
-  (0, import_content.removeContent)(element);
-  if (params) {
-    const { childExtend } = params;
-    if (!childExtend && element.childExtend)
-      params.childExtend = element.childExtend;
+  if (options.preventContentUpdate === true)
+    return;
+  const setAsync = () => {
+    (0, import_content.removeContent)(element);
     (0, import_create.default)(params, element, "content", {
       ignoreChildExtend: true,
       ...import_mixins.registry.defaultOptions,
       ...import_options.default.create,
       ...options
     });
+  };
+  if (params) {
+    const { childExtend } = params;
+    if (!childExtend && element.childExtend)
+      params.childExtend = element.childExtend;
+    if (lazyLoad) {
+      window.requestAnimationFrame(setAsync);
+    } else
+      setAsync();
   }
   return element;
 };

package/dist/cjs/update.js

@@ -42,6 +42,7 @@ var import_iterate = require("./iterate");
 var import_mixins = require("./mixins");
 var import_applyParam = require("./applyParam");
 var import_options = __toESM(require("./cache/options"), 1);
+var import_inherit = require("../state/inherit");
 const snapshot = {
   snapshotId: import_utils.createSnapshotId
 };
@@ -83,9 +84,6 @@ const update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     if (props)
       (0, import_props.updateProps)(props, element, parent);
   }
-  if (!options.isForced) {
-    (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-  }
   if (!options.preventInitUpdateListener) {
     const initUpdateReturns = (0, import_event.triggerEventOnUpdate)("initUpdate", params, element, options);
     if (initUpdateReturns === false)
@@ -94,6 +92,9 @@ const update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const overwriteChanges = (0, import_utils.overwriteDeep)(element, params, import_utils2.METHODS_EXL);
   const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
   const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
+  if (!options.isForced) {
+    (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+  }
   if (options.stackChanges && element.__stackChanges) {
     const stackChanges = (0, import_utils.merge)(definedChanges, (0, import_utils.merge)(execChanges, overwriteChanges));
     element.__stackChanges.push(stackChanges);
@@ -118,15 +119,13 @@ const update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       const canUpdate = (0, import_utils.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
       if (!canUpdate)
         continue;
+      const lazyLoad = element.props.lazyLoad || options.lazyLoad;
       const childUpdateCall = () => update.call(prop, params[prop], {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
-      if (element.props && element.props.lazyLoad || options.lazyLoad) {
-        import_utils.window.requestAnimationFrame(() => childUpdateCall());
-      } else
-        childUpdateCall();
+      lazyLoad ? import_utils.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
     }
   }
   if (!options.preventUpdateListener)
@@ -179,24 +178,20 @@ const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element;
   const stateKey = ref.__state;
   const { parent, state } = element;
-  if (options.preventpdateTriggerStateUpdate)
+  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
+  if (preventUpdateTriggerStateUpdate)
     return;
   if (!stateKey && !ref.__hasRootState) {
     element.state = parent && parent.state || {};
     return;
   }
-  const { isHoisted, execStateFunction, stateFunctionOverwrite } = options;
-  const shouldForceStateUpdate = (0, import_utils.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
-  if (shouldForceStateUpdate) {
+  const shouldForceFunctionState = (0, import_utils.isFunction)(stateKey) && !isHoisted && execStateFunction;
+  if (shouldForceFunctionState) {
     const execState = (0, import_utils.exec)(stateKey, element);
-    state.set(execState, {
-      ...options,
-      preventUpdate: true
-    });
+    state.set(execState, { ...options, preventUpdate: true });
     return;
   }
-  const parentState = parent && parent.state || {};
-  const keyInParentState = parentState[stateKey];
+  const keyInParentState = (0, import_inherit.findInheritedState)(element, element.parent);
   if (!keyInParentState || options.preventInheritedStateUpdate)
     return;
   if (!options.preventInitStateUpdateListener) {

package/dist/cjs/utils/component.js

@@ -49,24 +49,28 @@ const addAdditionalExtend = (newExtend, element) => {
 };
 const extendizeByKey = (element, parent, key) => {
   const { tag, extend, props, state, childExtend, childProps, on, if: condition } = element;
-  const hasComponentAttrs = tag || extend || childExtend || props || state || on || condition;
+  const hasComponentAttrs = extend || childExtend || props || state || on || condition;
   const componentKey = key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : key;
   const extendKey = componentKey || key;
   if (!hasComponentAttrs || childProps) {
     return {
       extend: extendKey,
+      tag,
       props: { ...element }
     };
   } else if (!extend || extend === true) {
     return {
       ...element,
+      tag,
       extend: extendKey
     };
   } else if (extend) {
     addAdditionalExtend(extendKey, element);
   } else if ((0, import_utils.isFunction)(element)) {
+    console.log(element);
     return {
       extend: extendKey,
+      tag,
       props: { ...(0, import_utils.exec)(element, parent) }
     };
   }

package/dist/cjs/utils/extendUtils.js

@@ -33,7 +33,6 @@ __export(extendUtils_exports, {
   getExtendStackRegistry: () => getExtendStackRegistry,
   getHashedExtend: () => getHashedExtend,
   jointStacks: () => jointStacks,
-  replaceStringsWithComponents: () => replaceStringsWithComponents,
   setHashedExtend: () => setHashedExtend
 });
 module.exports = __toCommonJS(extendUtils_exports);
@@ -59,25 +58,27 @@ const getExtendStackRegistry = (extend, stack) => {
   }
   return setHashedExtend(extend, stack);
 };
-const extractArrayExtend = (extend, stack) => {
-  extend.forEach((each) => flattenExtend(each, stack));
+const extractArrayExtend = (extend, stack, context) => {
+  extend.forEach((each) => flattenExtend(each, stack, context));
   return stack;
 };
-const deepExtend = (extend, stack) => {
+const deepExtend = (extend, stack, context) => {
   const extendOflattenExtend = extend.extend;
   if (extendOflattenExtend) {
-    flattenExtend(extendOflattenExtend, stack);
+    flattenExtend(extendOflattenExtend, stack, context);
   }
   return stack;
 };
-const flattenExtend = (extend, stack) => {
+const flattenExtend = (extend, stack, context) => {
   if (!extend)
     return stack;
   if ((0, import_utils.isArray)(extend))
-    return extractArrayExtend(extend, stack);
+    return extractArrayExtend(extend, stack, context);
+  if ((0, import_utils.isString)(extend))
+    extend = fallbackStringExtend(extend, context);
   stack.push(extend);
   if (extend.extend)
-    deepExtend(extend, stack);
+    deepExtend(extend, stack, context);
   return stack;
 };
 const deepCloneExtend = (obj) => {
@@ -121,7 +122,7 @@ const cloneAndMergeArrayExtend = (stack) => {
     return deepMergeExtend(a, deepCloneExtend(c));
   }, {});
 };
-const fallbackStringExtend = (extend, context, options) => {
+const fallbackStringExtend = (extend, context, options = {}) => {
   const COMPONENTS = context && context.components || options.components;
   if ((0, import_utils.isString)(extend)) {
     if (COMPONENTS && COMPONENTS[extend]) {
@@ -138,29 +139,15 @@ const fallbackStringExtend = (extend, context, options) => {
 const jointStacks = (extendStack, childExtendStack) => {
   return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
 };
-const getExtendStack = (extend) => {
+const getExtendStack = (extend, context) => {
   if (!extend)
     return [];
   if (extend.__hash)
     return getHashedExtend(extend) || [];
-  const stack = flattenExtend(extend, []);
+  const stack = flattenExtend(extend, [], context);
   return getExtendStackRegistry(extend, stack);
 };
 const getExtendMerged = (extend) => {
   const stack = getExtendStack(extend);
   return cloneAndMergeArrayExtend(stack);
 };
-const replaceStringsWithComponents = (stack, context, options) => {
-  const COMPONENTS = context && context.components || options.components;
-  return stack.map((v) => {
-    if ((0, import_utils.isString)(v)) {
-      const component = COMPONENTS[v];
-      return component;
-    }
-    if ((0, import_utils.isString)(v.extend)) {
-      v.extend = COMPONENTS[v.extend];
-      return { ...getExtendMerged(v.extend), ...v };
-    }
-    return v;
-  });
-};

package/extend.js

@@ -6,7 +6,6 @@ import {
   jointStacks,
   cloneAndMergeArrayExtend,
   deepMergeExtend,
-  replaceStringsWithComponents,
   fallbackStringExtend
 } from './utils'
 
@@ -23,7 +22,7 @@ export const applyExtend = (element, parent, options = {}) => {
 
   extend = fallbackStringExtend(extend, context, options)
 
-  const extendStack = getExtendStack(extend)
+  const extendStack = getExtendStack(extend, context)
 
   if (ENV !== 'test' || ENV !== 'development') delete element.extend
 
@@ -32,14 +31,13 @@ export const applyExtend = (element, parent, options = {}) => {
     element.parent = parent
     // Assign parent attr to the element
     if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
-      childExtendStack = getExtendStack(parent.childExtend)
+      childExtendStack = getExtendStack(parent.childExtend, context)
 
-      // if (parent.childExtendRecursive && (props && !props.ignoreChildExtendRecursive)) {
       const ignoreChildExtendRecursive = props && props.ignoreChildExtendRecursive
       if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
         const canExtendRecursive = element.key !== '__text'
         if (canExtendRecursive) {
-          const childExtendRecursiveStack = getExtendStack(parent.childExtendRecursive)
+          const childExtendRecursiveStack = getExtendStack(parent.childExtendRecursive, context)
           // add error if childExtendRecursive contains element which goes to infinite loop
           childExtendStack = childExtendStack.concat(childExtendRecursiveStack)
           element.childExtendRecursive = parent.childExtendRecursive
@@ -61,14 +59,15 @@ export const applyExtend = (element, parent, options = {}) => {
   } else if (!options.extend) return element
 
   if (options.extend) {
-    const defaultOptionsExtend = getExtendStack(options.extend)
+    const defaultOptionsExtend = getExtendStack(options.extend, context)
     stack = [].concat(stack, defaultOptionsExtend)
   }
 
+  // check if array contains string extends
   if (__ref) __ref.__extend = stack
-  const findAndReplaceStrings = replaceStringsWithComponents(stack, context, options)
-  let mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
+  let mergedExtend = cloneAndMergeArrayExtend(stack)
 
+  // apply `component:` property
   const COMPONENTS = (context && context.components) || options.components
   const component = exec(element.component || mergedExtend.component, element)
   if (component && COMPONENTS && COMPONENTS[component]) {

package/mixins/index.js

@@ -8,6 +8,7 @@ import html from './html'
 import style from './style'
 import text from './text'
 import state from './state'
+import scope from './scope'
 import registry from './registry'
 export {
   attr,
@@ -18,6 +19,7 @@ export {
   text,
   html,
   state,
+  scope,
   registry
 }
 export * from './registry'

package/mixins/registry.js

@@ -3,7 +3,7 @@
 import {
   attr, classList, content,
   data, html, state, style,
-  text
+  text, scope
 } from '.'
 
 export default {
@@ -15,6 +15,7 @@ export default {
   data,
   class: classList,
   state,
+  scope,
 
   deps: (param, el) => param || el.parent.deps,
 

package/mixins/scope.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { isFunction, isObject } from '@domql/utils'
+
+/**
+ * Apply data parameters on the DOM nodes
+ * this should only work if `showOnNode: true` is passed
+ */
+export default (params, element, node) => {
+  if (!isObject(params)) return
+
+  // Apply data params on node
+  for (const scopeItem in params) {
+    const value = params[scopeItem]
+    if (isFunction(value)) {
+      element.scope[scopeItem] = value.bind(element)
+    } else {
+      element.scope[scopeItem] = value
+    }
+  }
+}

package/mixins/text.js

@@ -11,25 +11,12 @@ import {
  * Creates a text node and appends into
  * an original one as a child
  */
-export const asd = (param, element, node) => {
-  const prop = exec(param, element)
-  if (element.tag === 'string') {
-    node.nodeValue = prop
-  } else if (param !== undefined || param !== null) {
-    if (element.__text && element.__text.text !== prop) return
-    element.__text.text = prop
-    if (element.__text.node) element.__text.node.nodeValue = prop
-    else create({ tag: 'string', text: prop }, element, '__text')
-  }
-}
-
 export default (param, element, node) => {
   let prop = exec(param, element)
   if (isString(prop) && prop.includes('{{')) {
     prop = replaceLiteralsWithObjectFields(prop, element.state)
   }
   if (element.tag === 'string') {
-    if (element.text === prop) return
     node.nodeValue = prop
   } else if (param !== undefined || param !== null) {
     if (element.__text) {

package/node.js

@@ -44,37 +44,36 @@ export const createNode = (element, options) => {
     if (isFunction(node.setAttribute)) node.setAttribute('key', element.key)
   }
 
-  // iterate through all given params
-  if (element.tag !== 'string' || element.tag !== 'fragment') {
-    // iterate through define
-    throughInitialDefine(element)
+  // iterate through define
+  throughInitialDefine(element)
 
-    // iterate through exec
-    throughInitialExec(element)
+  // iterate through exec
+  throughInitialExec(element)
 
+  if (element.tag !== 'string' && element.tag !== 'fragment') {
     // apply events
     if (isNewNode && isObject(element.on)) applyEventsOnNode(element)
+  }
 
-    for (const param in element) {
-      const prop = element[param]
-
-      if (
-        isUndefined(prop) ||
-        isMethod(param) ||
-        isVariant(param) ||
-        isObject(registry[param])
-      ) continue
-
-      const isElement = applyParam(param, element, options)
-      if (isElement) {
-        const { hasDefine, hasContextDefine } = isElement
-        if (element[param] && !hasDefine && !hasContextDefine) {
-          const createAsync = () => create(exec(prop, element), element, param, options)
-
-          if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
-            window.requestAnimationFrame(() => createAsync())
-          } else createAsync()
-        }
+  for (const param in element) {
+    const value = element[param]
+
+    if (
+      isUndefined(value) ||
+      isMethod(param) ||
+      isVariant(param) ||
+      isObject(registry[param])
+    ) continue
+
+    const isElement = applyParam(param, element, options)
+    if (isElement) {
+      const { hasDefine, hasContextDefine } = isElement
+      if (element[param] && !hasDefine && !hasContextDefine) {
+        const createAsync = () => create(exec(value, element), element, param, options)
+
+        if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
+          window.requestAnimationFrame(() => createAsync())
+        } else createAsync()
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.17",
+  "version": "2.5.19",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "b08d17a7f2bf1a70714ab9f1718cbf98862becf0",
+  "gitHead": "94b0e44e5e5a20b0a78459b3a31eb3f7afa1c7e6",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -15,7 +15,7 @@ const createPropsStack = (element, parent) => {
 
   if (isArray(__ref.__extend)) {
     __ref.__extend.forEach(extend => {
-      if (extend.props) propsStack.push(extend.props)
+      if (extend.props && extend.props !== props) propsStack.push(extend.props)
     })
   }
 
@@ -26,11 +26,14 @@ const createPropsStack = (element, parent) => {
 
 export const syncProps = (props, element) => {
   element.props = {}
-  const mergedProps = { update, __element: element }
+  const mergedProps = {}
+
   props.forEach(v => {
     if (IGNORE_PROPS_PARAMS.includes(v)) return
     const execProps = exec(v, element)
-    if (isObject(execProps) && execProps.__element) return
+    // TODO: check if this failing the function props merge
+    // if (isObject(execProps) && execProps.__element) return
+    // it was causing infinite loop at early days
     element.props = deepMerge(
       mergedProps,
       deepClone(execProps, IGNORE_PROPS_PARAMS),
@@ -38,21 +41,35 @@ export const syncProps = (props, element) => {
     )
   })
   element.props = mergedProps
+
+  const methods = { update: update.bind(element.props), __element: element }
+  Object.setPrototypeOf(element.props, methods)
+
   return element.props
 }
 
 export const createProps = function (element, parent, cached) {
-  const propsStack = cached || createPropsStack(element, parent)
   const { __ref: ref } = element
 
-  if (!ref.__if) return
-
-  if (propsStack.length) {
-    ref.__props = propsStack
-    syncProps(propsStack, element)
-    element.props.update = update
+  if (ref.__if) {
+    try {
+      const propsStack = cached || createPropsStack(element, parent)
+      if (propsStack.length) {
+        ref.__props = propsStack
+        syncProps(propsStack, element)
+      } else { element.props = {} }
+    } catch (e) {
+      element.props = {}
+      ref.__props = cached || []
+    }
+  } else {
+    element.props = {}
+    ref.__props = cached || []
   }
 
+  const methods = { update: update.bind(element.props), __element: element }
+  Object.setPrototypeOf(element.props, methods)
+
   return element
 }
 

package/props/update.js

@@ -8,7 +8,7 @@ export const updateProps = (newProps, element, parent) => {
   let propsStack = __ref.__props
 
   const parentProps = inheritParentProps(element, parent)
-  if (parentProps) propsStack = __ref.__props = [].concat(parentProps, propsStack)
+  if (parentProps.length) propsStack = __ref.__props = [].concat(parentProps, propsStack)
   if (newProps) propsStack = __ref.__props = [].concat(newProps, propsStack)
 
   if (propsStack) syncProps(propsStack, element)

package/set.js

@@ -10,17 +10,17 @@ import { removeContent } from './mixins/content'
 const set = function (params, options = {}, el) {
   const element = el || this
   const __contentRef = element.content && element.content.__ref
+  const lazyLoad = element.props && element.props.lazyLoad
 
   if (__contentRef && __contentRef.__cached && deepContains(params, element.content)) {
     console.log('is content equal')
     return element.content.update()
   }
 
-  removeContent(element)
+  if (options.preventContentUpdate === true) return
 
-  if (params) {
-    const { childExtend } = params
-    if (!childExtend && element.childExtend) params.childExtend = element.childExtend
+  const setAsync = () => {
+    removeContent(element)
     create(params, element, 'content', {
       ignoreChildExtend: true,
       ...registry.defaultOptions,
@@ -29,6 +29,15 @@ const set = function (params, options = {}, el) {
     })
   }
 
+  if (params) {
+    const { childExtend } = params
+    if (!childExtend && element.childExtend) params.childExtend = element.childExtend
+
+    if (lazyLoad) {
+      window.requestAnimationFrame(setAsync)
+    } else setAsync()
+  }
+
   return element
 }
 

package/update.js

@@ -12,6 +12,7 @@ import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { registry } from './mixins'
 import { applyParam } from './applyParam'
 import OPTIONS from './cache/options'
+import { findInheritedState } from '../state/inherit'
 
 const snapshot = {
   snapshotId: createSnapshotId
@@ -57,10 +58,6 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
     if (props) updateProps(props, element, parent)
   }
 
-  if (!options.isForced) {
-    triggerEventOn('beforeClassAssign', element, options)
-  }
-
   if (!options.preventInitUpdateListener) {
     const initUpdateReturns = triggerEventOnUpdate('initUpdate', params, element, options)
     if (initUpdateReturns === false) return element
@@ -70,6 +67,10 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
   const execChanges = throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS })
   const definedChanges = throughUpdatedDefine(element)
 
+  if (!options.isForced) {
+    triggerEventOn('beforeClassAssign', element, options)
+  }
+
   if (options.stackChanges && element.__stackChanges) {
     const stackChanges = merge(definedChanges, merge(execChanges, overwriteChanges))
     element.__stackChanges.push(stackChanges)
@@ -106,15 +107,15 @@ const update = function (params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive
       if (!canUpdate) continue
 
+      const lazyLoad = element.props.lazyLoad || options.lazyLoad
+
       const childUpdateCall = () => update.call(prop, params[prop], {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       })
 
-      if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
-        window.requestAnimationFrame(() => childUpdateCall())
-      } else childUpdateCall()
+      lazyLoad ? window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall()
     }
   }
 
@@ -171,41 +172,56 @@ const checkIfOnUpdate = (element, parent, options) => {
   }
 }
 
+/**
+ * Inherit state updates for a given element based on the specified options.
+ *
+ * @param {Object} element - The element to inherit state updates for.
+ * @param {Object} options - Configuration options for state update inheritance.
+ * @param {boolean} [options.preventUpdateTriggerStateUpdate] - If true, prevent triggering state updates.
+ * @param {boolean} [options.isHoisted] - Whether the state is hoisted.
+ * @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.
+ * @returns {boolean} - If returns false, it breaks the update function
+ */
 const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element
   const stateKey = ref.__state
   const { parent, state } = element
+  const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options
 
-  if (options.preventpdateTriggerStateUpdate) return
+  if (preventUpdateTriggerStateUpdate) return
 
+  // If does not have own state inherit from parent
   if (!stateKey && !ref.__hasRootState) {
     element.state = (parent && parent.state) || {}
     return
   }
 
-  const { isHoisted, execStateFunction, stateFunctionOverwrite } = options
-  const shouldForceStateUpdate = isFunction(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite)
-  if (shouldForceStateUpdate) {
+  // If state is function, decide execution and apply setting a current state
+  const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction
+  if (shouldForceFunctionState) {
     const execState = exec(stateKey, element)
-    state.set(execState, {
-      ...options,
-      preventUpdate: true
-    })
+    state.set(execState, { ...options, preventUpdate: true })
     return
   }
 
-  const parentState = (parent && parent.state) || {}
-  const keyInParentState = parentState[stateKey]
-
+  // If state is string, find its value in the state tree
+  const keyInParentState = findInheritedState(element, element.parent)
   if (!keyInParentState || options.preventInheritedStateUpdate) return
 
+  // Trigger on.initStateUpdated event
   if (!options.preventInitStateUpdateListener) {
     const initStateReturns = triggerEventOnUpdate('initStateUpdated', keyInParentState, element, options)
     if (initStateReturns === false) return element
   }
 
+  // Recreate the state again
   const newState = createStateUpdate(element, parent, options)
 
+  // Trigger on.stateUpdated event
   if (!options.preventStateUpdateListener) {
     triggerEventOnUpdate('stateUpdated', newState.parse(), element, options)
   }

package/utils/component.js

@@ -22,7 +22,7 @@ export const addAdditionalExtend = (newExtend, element) => {
 
 export const extendizeByKey = (element, parent, key) => {
   const { tag, extend, props, state, childExtend, childProps, on, if: condition } = element
-  const hasComponentAttrs = tag || extend || childExtend || props || state || on || condition
+  const hasComponentAttrs = extend || childExtend || props || state || on || condition
   const componentKey = key.includes('_')
     ? key.split('_')[0]
     : key.includes('.') ? key.split('.')[0] : key
@@ -31,18 +31,22 @@ export const extendizeByKey = (element, parent, key) => {
   if (!hasComponentAttrs || childProps) {
     return {
       extend: extendKey,
+      tag,
       props: { ...element }
     }
   } else if (!extend || extend === true) {
     return {
       ...element,
+      tag,
       extend: extendKey
     }
   } else if (extend) {
     addAdditionalExtend(extendKey, element)
   } else if (isFunction(element)) {
+    console.log(element)
     return {
       extend: extendKey,
+      tag,
       props: { ...exec(element, parent) }
     }
   }

package/utils/extendUtils.js

@@ -26,24 +26,25 @@ export const getExtendStackRegistry = (extend, stack) => {
 }
 
 // stacking
-export const extractArrayExtend = (extend, stack) => {
-  extend.forEach(each => flattenExtend(each, stack))
+export const extractArrayExtend = (extend, stack, context) => {
+  extend.forEach(each => flattenExtend(each, stack, context))
   return stack
 }
 
-export const deepExtend = (extend, stack) => {
+export const deepExtend = (extend, stack, context) => {
   const extendOflattenExtend = extend.extend
   if (extendOflattenExtend) {
-    flattenExtend(extendOflattenExtend, stack)
+    flattenExtend(extendOflattenExtend, stack, context)
   }
   return stack
 }
 
-export const flattenExtend = (extend, stack) => {
+export const flattenExtend = (extend, stack, context) => {
   if (!extend) return stack
-  if (isArray(extend)) return extractArrayExtend(extend, stack)
+  if (isArray(extend)) return extractArrayExtend(extend, stack, context)
+  if (isString(extend)) extend = fallbackStringExtend(extend, context)
   stack.push(extend)
-  if (extend.extend) deepExtend(extend, stack)
+  if (extend.extend) deepExtend(extend, stack, context)
   return stack
 }
 
@@ -89,7 +90,7 @@ export const cloneAndMergeArrayExtend = stack => {
   }, {})
 }
 
-export const fallbackStringExtend = (extend, context, options) => {
+export const fallbackStringExtend = (extend, context, options = {}) => {
   const COMPONENTS = (context && context.components) || options.components
   if (isString(extend)) {
     if (COMPONENTS && COMPONENTS[extend]) {
@@ -114,10 +115,10 @@ export const jointStacks = (extendStack, childExtendStack) => {
 }
 
 // init
-export const getExtendStack = extend => {
+export const getExtendStack = (extend, context) => {
   if (!extend) return []
   if (extend.__hash) return getHashedExtend(extend) || []
-  const stack = flattenExtend(extend, [])
+  const stack = flattenExtend(extend, [], context)
   return getExtendStackRegistry(extend, stack)
 }
 
@@ -126,17 +127,16 @@ export const getExtendMerged = extend => {
   return cloneAndMergeArrayExtend(stack)
 }
 
-export const replaceStringsWithComponents = (stack, context, options) => {
-  const COMPONENTS = (context && context.components) || options.components
-  return stack.map(v => {
-    if (isString(v)) {
-      const component = COMPONENTS[v]
-      return component
-    }
-    if (isString(v.extend)) {
-      v.extend = COMPONENTS[v.extend]
-      return { ...getExtendMerged(v.extend), ...v }
-    }
-    return v
-  })
-}
+// export const replaceStringsWithComponents = (stack, context, options) => {
+//   const COMPONENTS = (context && context.components) || options.components
+//   return stack.map(v => {
+//     if (isString(v)) {
+//       const component = COMPONENTS[v]
+//       return component
+//     }
+//     if (isString(v.extend)) {
+//       v.extend = getExtendMerged(COMPONENTS[v.extend])
+//     }
+//     return v
+//   })
+// }