@domql/element 3.1.1 → 3.2.3

package/__tests__/update.test.js

@@ -36,8 +36,8 @@ describe('update()', () => {
     params = {}
   })
 
-  it('does not modify opts when params and opts are empty', async () => {
-    await element.update({}, opts)
+  it('does not modify opts when params and opts are empty', () => {
+    element.update({}, opts)
     expect(opts).toEqual({
       calleeElement: false,
       cleanExec: true,
@@ -53,47 +53,47 @@ describe('update()', () => {
     })
   })
 
-  it('initializes options with UPDATE_DEFAULT_OPTIONS when opts is empty', async () => {
-    await element.update({}, opts)
+  it('initializes options with UPDATE_DEFAULT_OPTIONS when opts is empty', () => {
+    element.update({}, opts)
     expect(opts.calleeElement).toBe(false) // Ensure opts is not mutated
     expect(element.__ref).toBeDefined() // Ensure __ref is initialized
   })
 
-  it('merges opts with UPDATE_DEFAULT_OPTIONS using deepMerge', async () => {
+  it('merges opts with UPDATE_DEFAULT_OPTIONS using deepMerge', () => {
     opts.customOption = true
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(opts.customOption).toBe(true) // Ensure custom options are preserved
   })
 
-  it('converts string params to { text: params }', async () => {
-    await element.update('testString', opts)
+  it('converts string params to { text: params }', () => {
+    element.update('testString', opts)
     expect(element.text).toBe('testString')
   })
 
-  it('converts number params to { text: params }', async () => {
-    await element.update(123, opts)
+  it('converts number params to { text: params }', () => {
+    element.update(123, opts)
     expect(element.text).toBe(123)
   })
 
-  it('returns early if preventInheritAtCurrentState matches element', async () => {
+  it('returns early if preventInheritAtCurrentState matches element', () => {
     opts.preventInheritAtCurrentState = { __element: element }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.__ref.__currentSnapshot).toBe(6) // No snapshot update
   })
 
-  it('initializes __ref if not present', async () => {
+  it('initializes __ref if not present', () => {
     delete element.__ref
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.__ref).toBeDefined()
   })
 
-  it('merges options with UPDATE_DEFAULT_OPTIONS when exclude is missing', async () => {
-    await element.update({}, opts)
+  it('merges options with UPDATE_DEFAULT_OPTIONS when exclude is missing', () => {
+    element.update({}, opts)
     expect(opts.exclude).toBeDefined() // Ensure exclude is added
   })
 
-  it('does not throw or modify opts when params is undefined', async () => {
-    await element.update(undefined, opts)
+  it('does not throw or modify opts when params is undefined', () => {
+    element.update(undefined, opts)
     expect(opts).toEqual({
       calleeElement: false,
       cleanExec: true,
@@ -109,24 +109,24 @@ describe('update()', () => {
     })
   })
 
-  it('does not throw when opts is undefined', async () => {
-    await element.update({}, undefined)
+  it('does not throw when opts is undefined', () => {
+    element.update({}, undefined)
     expect(element.__ref).toBeDefined() // Ensure __ref is initialized
   })
 
-  it('does not throw when opts is null', async () => {
-    await element.update({}, null)
+  it('does not throw when opts is null', () => {
+    element.update({}, null)
     expect(element.__ref).toBeDefined() // Ensure __ref is initialized
   })
 
-  it('does not modify the params object', async () => {
+  it('does not modify the params object', () => {
     params = { key: 'value' }
-    await element.update(params, opts)
+    element.update(params, opts)
     expect(params).toEqual({ key: 'value' })
   })
 
-  it('does modify opts when params is an empty object', async () => {
-    await element.update({}, opts)
+  it('does modify opts when params is an empty object', () => {
+    element.update({}, opts)
     expect(opts).toEqual({
       calleeElement: false,
       cleanExec: true,
@@ -142,9 +142,9 @@ describe('update()', () => {
     })
   })
 
-  it('moves regular properties to element.props', async () => {
+  it('moves regular properties to element.props', () => {
     params = { props: { title: 'Test', description: 'Content' } }
-    await element.update(params, opts)
+    element.update(params, opts)
     expect(element.props).toEqual({
       title: 'Test',
       description: 'Content'
@@ -152,68 +152,68 @@ describe('update()', () => {
     expect(element.title).toBeUndefined()
   })
 
-  it('keeps element-rooted properties', async () => {
+  it('keeps element-rooted properties', () => {
     params = { Header: {}, Footer: {}, 0: 'index' }
-    await element.update(params, opts)
+    element.update(params, opts)
     expect(element.Header).toBeDefined()
     expect(element.Footer).toBeDefined()
     expect(element['0']).toBe('index')
     expect(element.props).toEqual({})
   })
 
-  it('preserves built-in properties on element', async () => {
+  it('preserves built-in properties on element', () => {
     params = { props: { className: 'container', hidden: true } }
-    await element.update(params, opts)
+    element.update(params, opts)
     expect(element.props.className).toBe('container')
     expect(element.props.hidden).toBe(true)
     expect(element.props).toEqual({ className: 'container', hidden: true })
   })
 
-  it('moves element-like properties from props to root', async () => {
+  it('moves element-like properties from props to root', () => {
     params = { props: { Header: {} } }
-    await element.update(params, opts)
+    element.update(params, opts)
     expect(element.Header).toBeDefined()
     expect(element.props.Header).toBeUndefined()
   })
 
-  it('exits early when inheritStateUpdates returns false', async () => {
+  it('exits early when inheritStateUpdates returns false', () => {
     // Simulate inheritStateUpdates failure
     element.__ref.__stateBlocked = true
-    await element.update({ props: { shouldChange: true } }, opts)
+    element.update({ props: { shouldChange: true } }, opts)
 
     expect(element.props.shouldChange).toBe(true)
     expect(element.__ref.__stateBlocked).toBe(true) // State remains blocked
   })
 
-  it('exits early when checkIfOnUpdate fails', async () => {
+  it('exits early when checkIfOnUpdate fails', () => {
     // Force checkIfOnUpdate failure
     element.parent.props.ifCondition = false
-    await element.update({ state: { newState: true } }, opts)
+    element.update({ state: { newState: true } }, opts)
 
     expect(element.state.newState).toBe(true)
   })
 
-  it('updates props from parent key match', async () => {
+  it('updates props from parent key match', () => {
     element.parent.props.testKey = { inherited: true }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props.inherited).toBeUndefined()
   })
 
-  it('updates props when functions exist in __props', async () => {
+  it('updates props when functions exist in __props', () => {
     element.__ref.__props.push(() => 'dynamic')
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props).toEqual(expect.any(Object)) // Props were processed
   })
 
-  it('skips props update when preventPropsUpdate=true', async () => {
+  it('skips props update when preventPropsUpdate=true', () => {
     opts.preventPropsUpdate = true
     opts.preventUpdateAfter = true
     element.parent.props.testKey = { shouldExist: true }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props.shouldExist).toBeUndefined()
   })
 
-  it('should not skips props update when preventPropsUpdate=false', async () => {
+  it('should not skips props update when preventPropsUpdate=false', () => {
     opts.preventPropsUpdate = false
     opts.lazyLoad = true
     opts.onEachUpdate = () => {
@@ -223,34 +223,34 @@ describe('update()', () => {
     element.__ref.__propsStack = []
     element.__ref.__if = true
     element.off = { text: 'off' }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props.shouldExist).toBeUndefined()
   })
 
-  it('should set preventUpdateAfterCount to 1 when is not a number', async () => {
+  it('should set preventUpdateAfterCount to 1 when is not a number', () => {
     opts.preventPropsUpdate = true
     opts.preventUpdateAfter = 2
     opts.preventUpdateAfterCount = undefined
     element.parent.props.testKey = { shouldExist: true }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props.shouldExist).toBeUndefined()
   })
 
-  it('processes parent.childProps', async () => {
+  it('processes parent.childProps', () => {
     element.parent.props.childProps = { global: true }
-    await element.update({}, opts)
+    element.update({}, opts)
     expect(element.props.global).toBe(true)
   })
 
-  it('processes function props', async () => {
-    await element.update({ props: { calc: () => 42 } }, opts)
+  it('processes function props', () => {
+    element.update({ props: { calc: () => 42 } }, opts)
     expect(element.props.calc()).toBe(42)
   })
 
-  it('returns element when beforeUpdate rejects', async () => {
+  it('returns element when beforeUpdate rejects', () => {
     // Simulate beforeUpdate rejection
     element.on.beforeUpdate = () => false
-    const result = await element.update({}, opts)
+    const result = element.update({}, opts)
     expect(result).toBe(element)
   })
 })

package/children.js

@@ -3,7 +3,7 @@
 import {
   concatAddExtends,
   deepClone,
-  execPromise,
+  exec,
   getChildStateInKey,
   isArray,
   isDefined,
@@ -20,17 +20,16 @@ import {
  * Apply data parameters on the DOM nodes
  * this should only work if `showOnNode: true` is passed
  */
-export async function setChildren (param, element, opts) {
+export function setChildren (param, element, opts) {
   let { children, __ref: ref, state } = element
 
   let { childrenAs } = element.props || {}
-  children =
-    (await execPromise(param, element, state)) ||
-    (await execPromise(children, element, state))
+  let execParam = exec(param, element, state)
+  let execChildren = exec(children, element, state)
+  children = execParam || execChildren
 
   if (children) {
     if (isState(children)) children = children.parse()
-
     if (isString(children) || isNumber(children)) {
       if (children === 'state') children = state.parse()
       else {

package/create.js

@@ -33,7 +33,7 @@ const ENV = process.env.NODE_ENV
 /**
  * Creating a DOMQL element using passed parameters
  */
-export const create = async (
+export const create = (
   props,
   parentEl,
   passedKey,
@@ -51,21 +51,21 @@ export const create = async (
 
   applyExtends(element, parent, options)
 
-  propertizeElement.call(element, element)
-
-  await triggerEventOn('start', element, options)
-
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options)
   }
 
+  propertizeElement.call(element, element)
+
+  triggerEventOn('start', element, options)
+
   resetOptions(element, parent, options)
 
   addMethods(element, parent, options)
 
   createScope(element, parent)
 
-  await createState(element, parent)
+  createState(element, parent)
   if (element.scope === 'state') element.scope = element.state
 
   createIfConditionFlag(element, parent)
@@ -87,7 +87,7 @@ export const create = async (
   // apply variants
   // applyVariant(element, parent)
 
-  const onInit = await triggerEventOn('init', element, options)
+  const onInit = triggerEventOn('init', element, options)
   if (onInit === false) return element
 
   triggerEventOn('beforeClassAssign', element, options)
@@ -95,11 +95,11 @@ export const create = async (
   // generate a CLASS name
   assignKeyAsClassname(element)
 
-  await renderElement(element, parent, options, attachOptions)
+  renderElement(element, parent, options, attachOptions)
 
   addElementIntoParentChildren(element, parent)
 
-  await triggerEventOn('complete', element, options)
+  triggerEventOn('complete', element, options)
 
   return element
 }
@@ -125,7 +125,7 @@ const addElementIntoParentChildren = (element, parent) => {
 }
 
 const visitedElements = new WeakMap()
-const renderElement = async (element, parent, options, attachOptions) => {
+const renderElement = (element, parent, options, attachOptions) => {
   if (visitedElements.has(element)) {
     if (ENV === 'test' || ENV === 'development') {
       console.warn('Cyclic rendering detected:', element.__ref.path)
@@ -136,19 +136,19 @@ const renderElement = async (element, parent, options, attachOptions) => {
 
   const { __ref: ref, key } = element
 
-  const createNestedChild = async () => {
+  const createNestedChild = () => {
     const isInfiniteLoopDetected = detectInfiniteLoop(ref.path)
     if (ref.__uniqId || isInfiniteLoopDetected) return
-    await createNode(element, options)
+    createNode(element, options)
     ref.__uniqId = Math.random()
   }
 
   // CREATE a real NODE
   if (ENV === 'test' || ENV === 'development') {
-    await createNestedChild()
+    createNestedChild()
   } else {
     try {
-      await createNestedChild()
+      createNestedChild()
     } catch (e) {
       const path = ref.path
       if (path.includes('ComponentsGrid')) {
@@ -182,17 +182,17 @@ const renderElement = async (element, parent, options, attachOptions) => {
   applyAnimationFrame(element, options)
 
   // run `on.render`
-  await triggerEventOn('render', element, options)
+  triggerEventOn('render', element, options)
   // triggerEventOn('render', element, options).then(() => {})
 
   // run `on.renderRouter`
-  await triggerEventOn('renderRouter', element, options)
+  triggerEventOn('renderRouter', element, options)
 
   // run `on.done`
-  await triggerEventOn('done', element, options)
+  triggerEventOn('done', element, options)
 
   // run `on.done`
-  await triggerEventOn('create', element, options)
+  triggerEventOn('create', element, options)
 }
 
 const onlyResolveExtends = (element, parent, key, options) => {
@@ -279,10 +279,8 @@ const onlyResolveExtends = (element, parent, key, options) => {
 //   } else {
 //     return {
 //       ...element,
-//       props: {
 //         display: 'none',
 //         [key]: { display: 'block' }
-//       }
 //     }
 //   }
 // }

package/dist/cjs/children.js

@@ -23,10 +23,12 @@ __export(children_exports, {
 });
 module.exports = __toCommonJS(children_exports);
 var import_utils = require("@domql/utils");
-async function setChildren(param, element, opts) {
+function setChildren(param, element, opts) {
   let { children, __ref: ref, state } = element;
   let { childrenAs } = element.props || {};
-  children = await (0, import_utils.execPromise)(param, element, state) || await (0, import_utils.execPromise)(children, element, state);
+  let execParam = (0, import_utils.exec)(param, element, state);
+  let execChildren = (0, import_utils.exec)(children, element, state);
+  children = execParam || execChildren;
   if (children) {
     if ((0, import_utils.isState)(children)) children = children.parse();
     if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {

package/dist/cjs/create.js

@@ -33,22 +33,22 @@ var import_set = require("./methods/set.js");
 var import_classList = require("./mixins/classList.js");
 var import_iterate = require("./iterate.js");
 const ENV = "development";
-const create = async (props, parentEl, passedKey, options = import_utils.OPTIONS.create || {}, attachOptions) => {
+const create = (props, parentEl, passedKey, options = import_utils.OPTIONS.create || {}, attachOptions) => {
   cacheOptions(options);
   const element = (0, import_utils.createElement)(props, parentEl, passedKey, options, import_tree.ROOT);
   if (!element) return;
   const { key, parent, __ref: ref } = element;
   (0, import_utils.createRoot)(element, parent);
   (0, import_utils.applyExtends)(element, parent, options);
-  import_utils.propertizeElement.call(element, element);
-  await (0, import_event.triggerEventOn)("start", element, options);
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
   }
+  import_utils.propertizeElement.call(element, element);
+  (0, import_event.triggerEventOn)("start", element, options);
   resetOptions(element, parent, options);
   (0, import_set.addMethods)(element, parent, options);
   (0, import_utils.createScope)(element, parent);
-  await (0, import_state.createState)(element, parent);
+  (0, import_state.createState)(element, parent);
   if (element.scope === "state") element.scope = element.state;
   (0, import_utils.createIfConditionFlag)(element, parent);
   (0, import_utils.initProps)(element, parent, options);
@@ -59,13 +59,13 @@ const create = async (props, parentEl, passedKey, options = import_utils.OPTIONS
   if (element.node) {
     if (ref.__if) return (0, import_render.assignNode)(element, parent, key, attachOptions);
   }
-  const onInit = await (0, import_event.triggerEventOn)("init", element, options);
+  const onInit = (0, import_event.triggerEventOn)("init", element, options);
   if (onInit === false) return element;
   (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   (0, import_classList.assignKeyAsClassname)(element);
-  await renderElement(element, parent, options, attachOptions);
+  renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
-  await (0, import_event.triggerEventOn)("complete", element, options);
+  (0, import_event.triggerEventOn)("complete", element, options);
   return element;
 };
 const cacheOptions = (options) => {
@@ -86,7 +86,7 @@ const addElementIntoParentChildren = (element, parent) => {
   }
 };
 const visitedElements = /* @__PURE__ */ new WeakMap();
-const renderElement = async (element, parent, options, attachOptions) => {
+const renderElement = (element, parent, options, attachOptions) => {
   var _a, _b, _c;
   if (visitedElements.has(element)) {
     if (ENV === "test" || ENV === "development") {
@@ -95,17 +95,17 @@ const renderElement = async (element, parent, options, attachOptions) => {
   }
   visitedElements.set(element, true);
   const { __ref: ref, key } = element;
-  const createNestedChild = async () => {
+  const createNestedChild = () => {
     const isInfiniteLoopDetected = (0, import_utils.detectInfiniteLoop)(ref.path);
     if (ref.__uniqId || isInfiniteLoopDetected) return;
-    await (0, import_node.createNode)(element, options);
+    (0, import_node.createNode)(element, options);
     ref.__uniqId = Math.random();
   };
   if (ENV === "test" || ENV === "development") {
-    await createNestedChild();
+    createNestedChild();
   } else {
     try {
-      await createNestedChild();
+      createNestedChild();
     } catch (e) {
       const path = ref.path;
       if (path.includes("ComponentsGrid")) {
@@ -132,10 +132,10 @@ const renderElement = async (element, parent, options, attachOptions) => {
   }
   (0, import_render.assignNode)(element, parent, key, attachOptions);
   (0, import_event.applyAnimationFrame)(element, options);
-  await (0, import_event.triggerEventOn)("render", element, options);
-  await (0, import_event.triggerEventOn)("renderRouter", element, options);
-  await (0, import_event.triggerEventOn)("done", element, options);
-  await (0, import_event.triggerEventOn)("create", element, options);
+  (0, import_event.triggerEventOn)("render", element, options);
+  (0, import_event.triggerEventOn)("renderRouter", element, options);
+  (0, import_event.triggerEventOn)("done", element, options);
+  (0, import_event.triggerEventOn)("create", element, options);
 };
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref: ref } = element;

package/dist/cjs/extend.js

@@ -0,0 +1,88 @@
+"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 extend_exports = {};
+__export(extend_exports, {
+  applyExtend: () => applyExtend
+});
+module.exports = __toCommonJS(extend_exports);
+var import_utils = require("@domql/utils");
+var import_utils2 = require("./utils/index.js");
+let mainExtend;
+const applyExtend = (element, parent, options = {}) => {
+  if ((0, import_utils.isFunction)(element)) element = (0, import_utils.exec)(element, parent);
+  const { props, __ref } = element;
+  let extend = (props == null ? void 0 : props.extends) || element.extends || element.extend;
+  const variant = props == null ? void 0 : props.variant;
+  const context = element.context || parent.context;
+  extend = (0, import_utils2.fallbackStringExtend)(extend, context, options, variant);
+  const extendStack = (0, import_utils2.getExtendStack)(extend, context);
+  delete element.extend;
+  let childExtendStack = [];
+  if (parent) {
+    element.parent = parent;
+    if (!options.ignoreChildExtend && !(props && props.ignoreChildExtend)) {
+      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,
+            context
+          );
+          childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
+          element.childExtendRecursive = parent.childExtendRecursive;
+        }
+      }
+    }
+  }
+  const extendLength = extendStack.length;
+  const childExtendLength = childExtendStack.length;
+  let stack = [];
+  if (extendLength && childExtendLength) {
+    stack = (0, import_utils2.jointStacks)(extendStack, childExtendStack);
+  } else if (extendLength) {
+    stack = extendStack;
+  } else if (childExtendLength) {
+    stack = childExtendStack;
+  } else if (!context.defaultExtends) return element;
+  if (context.defaultExtends) {
+    if (!mainExtend) {
+      const defaultOptionsExtend = (0, import_utils2.getExtendStack)(
+        context.defaultExtends,
+        context
+      );
+      mainExtend = (0, import_utils2.cloneAndMergeArrayExtend)(defaultOptionsExtend);
+      delete mainExtend.extend;
+    }
+    stack = [].concat(stack, mainExtend);
+  }
+  if (__ref) __ref.__extend = stack;
+  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]) {
+    const componentExtend = (0, import_utils2.cloneAndMergeArrayExtend)(
+      (0, import_utils2.getExtendStack)(COMPONENTS[component])
+    );
+    mergedExtend = (0, import_utils2.deepMergeExtend)(componentExtend, mergedExtend);
+  }
+  const merged = (0, import_utils2.deepMergeExtend)(element, mergedExtend);
+  return merged;
+};