@domql/element 3.1.2 → 3.2.3

package/update.js

@@ -45,7 +45,7 @@ const UPDATE_DEFAULT_OPTIONS = {
   exclude: METHODS_EXL
 }
 
-export const update = async function (params = {}, opts) {
+export const update = function (params = {}, opts) {
   const calleeElementCache = opts?.calleeElement
   const options = deepClone(
     isObject(opts)
@@ -66,7 +66,7 @@ export const update = async function (params = {}, opts) {
   if (snapshotHasUpdated) return
 
   if (!options.preventListeners) {
-    await triggerEventOnUpdate('startUpdate', params, element, options)
+    triggerEventOnUpdate('startUpdate', params, element, options)
   }
 
   const { parent, node, key } = element
@@ -87,10 +87,10 @@ export const update = async function (params = {}, opts) {
   // apply new updates
   params = propertizeUpdate.call(element, params)
 
-  const inheritState = await inheritStateUpdates(element, options)
+  const inheritState = inheritStateUpdates(element, options)
   if (inheritState === false) return
 
-  const ifFails = await checkIfOnUpdate(element, parent, options)
+  const ifFails = checkIfOnUpdate(element, parent, options)
   if (ifFails) return
 
   if (ref.__if && !options.preventPropsUpdate) {
@@ -103,7 +103,7 @@ export const update = async function (params = {}, opts) {
 
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
     const simulate = { ...params, ...element }
-    const beforeUpdateReturns = await triggerEventOnUpdate(
+    const beforeUpdateReturns = triggerEventOnUpdate(
       'beforeUpdate',
       params,
       simulate,
@@ -121,7 +121,7 @@ export const update = async function (params = {}, opts) {
   throughUpdatedDefine(element)
 
   if (!options.isForced && !options.preventListeners) {
-    await triggerEventOn('beforeClassAssign', element, options)
+    triggerEventOn('beforeClassAssign', element, options)
   }
 
   if (!ref.__if) return false
@@ -177,7 +177,7 @@ export const update = async function (params = {}, opts) {
 
     if (preventStateUpdate === 'once') options.preventStateUpdate = false
 
-    const isElement = await applyParam(param, element, options)
+    const isElement = applyParam(param, element, options)
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
       const canUpdate =
@@ -190,43 +190,43 @@ export const update = async function (params = {}, opts) {
         options.onEachUpdate(param, element, element.state, element.context)
       }
 
-      const childUpdateCall = async () =>
-        await update.call(prop, params[prop], {
+      const childUpdateCall = () =>
+        update.call(prop, params[prop], {
           ...options,
           currentSnapshot: snapshotOnCallee,
           calleeElement
         })
 
       if (lazyLoad) {
-        window.requestAnimationFrame(async () => {
+        window.requestAnimationFrame(() => {
           // eslint-disable-line
-          await childUpdateCall()
+          childUpdateCall()
           // handle lazy load
           if (!options.preventUpdateListener) {
-            await triggerEventOn('lazyLoad', element, options)
+            triggerEventOn('lazyLoad', element, options)
           }
         })
-      } else await childUpdateCall()
+      } else childUpdateCall()
     }
   }
 
   if (!preventContentUpdate) {
     const children = params.children || element.children
     const content = children
-      ? await setChildren(children, element, opts)
+      ? setChildren(children, element, opts)
       : element.children || params.content
 
     if (content) {
-      await setContent(content, element, options)
+      setContent(content, element, options)
     }
   }
 
   if (!preventUpdateListener) {
-    await triggerEventOn('update', element, options)
+    triggerEventOn('update', element, options)
   }
 }
 
-const checkIfOnUpdate = async (element, parent, options) => {
+const checkIfOnUpdate = (element, parent, options) => {
   if ((!isFunction(element.if) && !isFunction(element.props?.if)) || !parent) {
     return
   }
@@ -285,7 +285,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
 
       delete element.__ref
       delete element.parent
-      const createdElement = await create(
+      const createdElement = create(
         element,
         parent,
         element.key,
@@ -298,11 +298,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
         element.on &&
         isFunction(element.on.update)
       ) {
-        await applyEvent(
-          element.on.update,
-          createdElement,
-          createdElement.state
-        )
+        applyEvent(element.on.update, createdElement, createdElement.state)
       }
       return createdElement
     }
@@ -326,7 +322,7 @@ const checkIfOnUpdate = async (element, parent, options) => {
  * @param {boolean} [options.preventStateUpdateListener] - If true, prevent the 'stateUpdate' event listener.
  * @returns {boolean} - If returns false, it breaks the update function
  */
-const inheritStateUpdates = async (element, options) => {
+const inheritStateUpdates = (element, options) => {
   const { __ref: ref } = element
   const stateKey = ref.__state
   const { parent, state } = element
@@ -361,7 +357,7 @@ const inheritStateUpdates = async (element, options) => {
 
   // Trigger on.beforeStateUpdate event
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await triggerEventOnUpdate(
+    const initStateReturns = triggerEventOnUpdate(
       'beforeStateUpdate',
       keyInParentState,
       element,
@@ -371,22 +367,17 @@ const inheritStateUpdates = async (element, options) => {
   }
 
   // Recreate the state again
-  const newState = await createStateUpdate(element, parent, options)
+  const newState = createStateUpdate(element, parent, options)
 
   // Trigger on.stateUpdate event
   if (!options.preventStateUpdateListener && !options.preventListeners) {
-    await triggerEventOnUpdate(
-      'stateUpdate',
-      newState.parse(),
-      element,
-      options
-    )
+    triggerEventOnUpdate('stateUpdate', newState.parse(), element, options)
   }
 }
 
-const createStateUpdate = async (element, parent, options) => {
+const createStateUpdate = (element, parent, options) => {
   const __stateChildren = element.state.__children
-  const newState = await createState(element, parent)
+  const newState = createState(element, parent)
   element.state = newState
   for (const child in __stateChildren) {
     // check this for inherited states

package/utils/applyParam.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { isFunction } from '@domql/utils'
+import { exec, isFunction } from '@domql/utils'
 import { REGISTRY } from '../mixins/index.js'
 
-export const applyParam = async (param, element, options) => {
+export const applyParam = (param, element, options) => {
   const { node, context, __ref: ref } = element
-  const prop = element[param]
+  const prop = exec(element[param], element)
 
   const { onlyUpdate } = options
 
@@ -25,9 +25,9 @@ export const applyParam = async (param, element, options) => {
 
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
-      await isGlobalTransformer(prop, element, node, options)
-      return
+      isGlobalTransformer(prop, element, node, options)
     }
+    return
   }
 
   return { hasDefine, hasContextDefine }

package/utils/extendUtils.js

@@ -0,0 +1,149 @@
+'use strict'
+
+import {
+  isArray,
+  isFunction,
+  isObject,
+  isString,
+  deepClone,
+  isNotProduction
+} from '@domql/utils'
+
+export const generateHash = () => Math.random().toString(36).substring(2)
+
+// hashing
+export const extendStackRegistry = {}
+export const extendCachedRegistry = {}
+
+export const getHashedExtend = extend => {
+  return extendStackRegistry[extend.__hash]
+}
+
+export const setHashedExtend = (extend, stack) => {
+  const hash = generateHash()
+  if (!isString(extend)) {
+    extend.__hash = hash
+  }
+  extendStackRegistry[hash] = stack
+  return stack
+}
+
+export const getExtendStackRegistry = (extend, stack) => {
+  if (extend.__hash) {
+    return stack.concat(getHashedExtend(extend))
+  }
+  return setHashedExtend(extend, stack) // stack .concat(hashedExtend)
+}
+
+// stacking
+export const extractArrayExtend = (extend, stack, context) => {
+  extend.forEach(each => flattenExtend(each, stack, context))
+  return stack
+}
+
+export const deepExtend = (extend, stack, context) => {
+  const extendOflattenExtend = extend.extend
+  if (extendOflattenExtend) {
+    flattenExtend(extendOflattenExtend, stack, context)
+  }
+  return stack
+}
+
+export const flattenExtend = (extend, stack, context) => {
+  if (!extend) return 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, context)
+  return stack
+}
+
+export const deepMergeExtend = (element, extend) => {
+  for (const e in extend) {
+    if (['parent', 'node', '__element'].indexOf(e) > -1) continue
+    const elementProp = element[e]
+    const extendProp = extend[e]
+    if (elementProp === undefined) {
+      element[e] = extendProp
+    } else if (isObject(elementProp) && isObject(extendProp)) {
+      deepMergeExtend(elementProp, extendProp)
+    } else if (isArray(elementProp) && isArray(extendProp)) {
+      element[e] = elementProp.concat(extendProp)
+    } else if (isArray(elementProp) && isObject(extendProp)) {
+      const obj = deepMergeExtend({}, elementProp)
+      element[e] = deepMergeExtend(obj, extendProp)
+    } else if (elementProp === undefined && isFunction(extendProp)) {
+      element[e] = extendProp
+    }
+  }
+  return element
+}
+
+export const cloneAndMergeArrayExtend = stack => {
+  return stack.reduce((a, c) => {
+    return deepMergeExtend(a, deepClone(c))
+  }, {})
+}
+
+export const fallbackStringExtend = (
+  extend,
+  context,
+  options = {},
+  variant
+) => {
+  const COMPONENTS = (context && context.components) || options.components
+  const PAGES = (context && context.pages) || options.pages
+  if (isString(extend)) {
+    const componentExists =
+      COMPONENTS &&
+      (COMPONENTS[extend + '.' + variant] ||
+        COMPONENTS[extend] ||
+        COMPONENTS['smbls.' + extend])
+    const pageExists = PAGES && extend.startsWith('/') && PAGES[extend]
+    if (componentExists) return componentExists
+    else if (pageExists) return pageExists
+    else {
+      if (options.verbose && isNotProduction()) {
+        console.warn('Extend is string but component was not found:', extend)
+      }
+      return {}
+    }
+  }
+  return extend
+}
+
+// joint stacks
+export const jointStacks = (extendStack, childExtendStack) => {
+  return []
+    .concat(extendStack.slice(0, 1))
+    .concat(childExtendStack.slice(0, 1))
+    .concat(extendStack.slice(1))
+    .concat(childExtendStack.slice(1))
+}
+
+// init
+export const getExtendStack = (extend, context) => {
+  if (!extend) return []
+  if (extend.__hash) return getHashedExtend(extend) || []
+  const stack = flattenExtend(extend, [], context)
+  return getExtendStackRegistry(extend, stack)
+}
+
+export const getExtendMerged = extend => {
+  const stack = getExtendStack(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 = getExtendMerged(COMPONENTS[v.extend])
+//     }
+//     return v
+//   })
+// }

package/utils/propEvents.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import { isFunction, lowercaseFirstLetter } from '@domql/utils'
+
+export const propagateEventsFromProps = (element) => {
+  const { props, on } = element
+  const eventKeysFromProps = Object.keys(props).filter(key => key.startsWith('on'))
+  eventKeysFromProps.forEach(v => {
+    const eventName = lowercaseFirstLetter(v.split('on')[1])
+    const origEvent = on[eventName]
+    const funcFromProps = props[v]
+    if (isFunction(origEvent)) {
+      on[eventName] = (...args) => {
+        const originalEventRetunrs = origEvent(...args)
+        if (originalEventRetunrs !== false) return funcFromProps(...args)
+      }
+    } else on[eventName] = funcFromProps
+  })
+}

package/dist/cjs/__tests__/checkIfOnUpdate.test.js

@@ -1,73 +0,0 @@
-var import_update = require("../update");
-describe("checkIfOnUpdate via update()", () => {
-  let element, parent, options;
-  beforeEach(() => {
-    parent = {
-      node: document.createElement("div"),
-      props: {},
-      state: {}
-    };
-    element = {
-      __ref: {
-        __if: void 0,
-        __state: null,
-        __hasRootState: false,
-        __execProps: {},
-        contentElementKey: "content"
-      },
-      parent,
-      props: {},
-      state: {
-        update: (el, st) => {
-          return st;
-        }
-      },
-      context: {
-        defaultExtends: {}
-      },
-      node: document.createElement("div"),
-      if: () => true,
-      previousElement: () => {
-        return {};
-      },
-      nextElement: () => {
-        return {};
-      },
-      removeContent: () => {
-        return true;
-      }
-    };
-    options = {};
-  });
-  it("uses props.if when element.if missing", async () => {
-    delete element.if;
-    element.props.if = () => false;
-    await import_update.update.call(element, {}, options);
-    expect(element.node).toEqual(document.createElement("div"));
-  });
-  it("retains state when __hasRootState=true", async () => {
-    element.__ref.__hasRootState = true;
-    element.state.critical = true;
-    element.__ref.__if = false;
-    await import_update.update.call(element, {}, options);
-    expect(element.state.critical).toBe(true);
-    expect(element.state.preserved).toBeUndefined();
-  });
-  it("processes nested content with parseDeep", async () => {
-    element.content = {
-      parseDeep: () => ({ parsed: true }),
-      existing: "data"
-    };
-    await import_update.update.call(element, {}, options);
-    expect(element.content.parsed).toBe(true);
-    expect(element.content.existing).toBeUndefined();
-  });
-  it("reattaches after previous sibling", async () => {
-    const prevNode = document.createElement("span");
-    parent.node.appendChild(prevNode);
-    await import_update.update.call(element, {}, options);
-    const newElement = parent.node.children[0];
-    expect(newElement).toEqual(document.createElement("span"));
-    expect(newElement.previousSibling).toBe(null);
-  });
-});

package/dist/cjs/__tests__/children.test.js

@@ -1,177 +0,0 @@
-var import_globals = require("@jest/globals");
-var import_children = require("../children");
-describe("children", () => {
-  let element, node;
-  beforeEach(() => {
-    element = {
-      __ref: {},
-      state: {},
-      props: {},
-      call: import_globals.jest.fn(),
-      removeContent: import_globals.jest.fn(),
-      content: null
-    };
-    node = {};
-  });
-  it("handles null/undefined params", async () => {
-    const result = await (0, import_children.setChildren)(null, element, node);
-    expect(result).toBeUndefined();
-  });
-  it("handles direct string children", async () => {
-    const result = await (0, import_children.setChildren)("Hello World", element, node);
-    expect(result).toEqual({ tag: "fragment", 0: { text: "Hello World" } });
-  });
-  it("handles numeric children", async () => {
-    const result = await (0, import_children.setChildren)(42, element, node);
-    expect(result).toEqual({ tag: "fragment", 0: { text: 42 } });
-  });
-  it("handles array of primitive values with childrenAs prop", async () => {
-    const result = await (0, import_children.setChildren)(["one", "two"], element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { text: "one" },
-      1: { text: "two" }
-    });
-  });
-  it("handles array of primitive values with childrenAs state", async () => {
-    element.props.childrenAs = "state";
-    const result = await (0, import_children.setChildren)(["one", "two"], element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { state: { value: "one" } },
-      1: { state: { value: "two" } }
-    });
-  });
-  it("caches children and detects changes", async () => {
-    const children1 = [{ id: 1 }, { id: 2 }];
-    const children2 = [{ id: 1 }, { id: 2 }];
-    const children3 = [{ id: 1 }, { id: 3 }];
-    await (0, import_children.setChildren)(children1, element, node);
-    expect(element.__ref.__childrenCache).toEqual(children1);
-    expect(element.__ref.__noChildrenDifference).toBeUndefined();
-    await (0, import_children.setChildren)(children2, element, node);
-    expect(element.__ref.__noChildrenDifference).toBe(true);
-    await (0, import_children.setChildren)(children3, element, node);
-    expect(element.__ref.__noChildrenDifference).toBeUndefined();
-    expect(element.__ref.__childrenCache).toEqual(children3);
-  });
-  it("handles mixed React and normal components", async () => {
-    const mixedChildren = [
-      { type: "div", text: "Normal" },
-      { $$typeof: Symbol("react") },
-      { type: "span", text: "Another" }
-    ];
-    await (0, import_children.setChildren)(mixedChildren, element, node);
-    expect(element.call).toHaveBeenCalledWith(
-      "renderReact",
-      [mixedChildren[1]],
-      element
-    );
-  });
-  it("handles state-based children", async () => {
-    element.state = {
-      items: ["a", "b"],
-      parse: () => ["parsed a", "parsed b"]
-    };
-    const result = await (0, import_children.setChildren)("state", element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { text: "parsed a" },
-      1: { text: "parsed b" }
-    });
-  });
-  it("handles async function parameters", async () => {
-    const asyncParam = async () => ["async1", "async2"];
-    const result = await (0, import_children.setChildren)(asyncParam, element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { text: "async1" },
-      1: { text: "async2" }
-    });
-  });
-  it("handles nested object structures", async () => {
-    const nestedChildren = {
-      header: { text: "Title" },
-      content: {
-        nested: { text: "Content" }
-      }
-    };
-    const result = await (0, import_children.setChildren)(nestedChildren, element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { text: "Title" },
-      1: { nested: { text: "Content" } }
-    });
-  });
-  it("handles empty arrays and objects", async () => {
-    let result = await (0, import_children.setChildren)([], element, node);
-    expect(result).toEqual({
-      tag: "fragment"
-    });
-    result = await (0, import_children.setChildren)({}, element, node);
-    expect(result).toEqual({
-      tag: "fragment"
-    });
-  });
-  it("handles falsy values in arrays", async () => {
-    const result = await (0, import_children.setChildren)(
-      [null, void 0, false, 0, ""],
-      element,
-      node
-    );
-    expect(result).toEqual({
-      tag: "fragment",
-      3: { text: 0 },
-      4: { text: "" }
-    });
-  });
-  it("handles React components with falsy values in array", async () => {
-    const mixedChildren = [
-      null,
-      { $$typeof: Symbol("react") },
-      void 0,
-      { $$typeof: Symbol("react") },
-      false
-    ];
-    await (0, import_children.setChildren)(mixedChildren, element, node);
-    expect(element.call).toHaveBeenCalledWith(
-      "renderReact",
-      [mixedChildren[1], mixedChildren[3]],
-      element
-    );
-  });
-  it("handles nested state parsing", async () => {
-    element.state = {
-      nested: {
-        items: ["c", "d"]
-      }
-    };
-    element.state.nested.__proto__.parse = () => ["parsed c", "parsed d"];
-    const result = await (0, import_children.setChildren)("nested", element, node);
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { state: ["c", "d"] }
-    });
-  });
-  it("handles mixed state and regular objects", async () => {
-    element.state = {
-      header: { parse: () => "Header" },
-      footer: { parse: () => "Footer" }
-    };
-    const result = await (0, import_children.setChildren)(
-      {
-        header: "header",
-        content: { text: "Content" },
-        footer: "footer"
-      },
-      element,
-      node
-    );
-    expect(result).toEqual({
-      tag: "fragment",
-      0: { text: "header" },
-      1: { text: "Content" },
-      2: { text: "footer" }
-    });
-  });
-});

package/dist/cjs/__tests__/define.test.js

@@ -1,75 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var import_define = __toESM(require("../define"), 1);
-var import_mixins = require("../mixins");
-describe("default function (registry updater)", () => {
-  let originalRegistry;
-  beforeEach(() => {
-    originalRegistry = { ...import_mixins.REGISTRY };
-  });
-  afterEach(() => {
-    Object.keys(import_mixins.REGISTRY).forEach((key) => {
-      import_mixins.REGISTRY[key] = originalRegistry[key];
-    });
-  });
-  it("should add new params to REGISTRY when overwrite is true", () => {
-    const params = { newKey: "newValue", anotherKey: "anotherValue" };
-    const options = { overwrite: true };
-    (0, import_define.default)(params, options);
-    expect(import_mixins.REGISTRY.newKey).toBe("newValue");
-    expect(import_mixins.REGISTRY.anotherKey).toBe("anotherValue");
-  });
-  it("should not modify REGISTRY when trying to overwrite existing keys without overwrite option", () => {
-    const params = { attr: "newValue", text: "newText" };
-    try {
-      (0, import_define.default)(params);
-    } catch (e) {
-    }
-    expect(import_mixins.REGISTRY.attr).toBe(originalRegistry.attr);
-    expect(import_mixins.REGISTRY.text).toBe(originalRegistry.text);
-  });
-  it("should overwrite existing keys when overwrite is true", () => {
-    const params = { attr: "newValue", text: "newText" };
-    const options = { overwrite: true };
-    (0, import_define.default)(params, options);
-    expect(import_mixins.REGISTRY.attr).toBe("newValue");
-    expect(import_mixins.REGISTRY.text).toBe("newText");
-  });
-  it("should handle empty params object without errors", () => {
-    const params = {};
-    const options = { overwrite: true };
-    expect(() => (0, import_define.default)(params, options)).not.toThrow();
-    expect(import_mixins.REGISTRY).toEqual(originalRegistry);
-  });
-  it("should handle empty options object without errors", () => {
-    const params = { newKey: "newValue" };
-    expect(() => (0, import_define.default)(params, {})).not.toThrow();
-    expect(import_mixins.REGISTRY.newKey).toBe("newValue");
-  });
-  it("should not add new keys when params is empty", () => {
-    const params = {};
-    const options = { overwrite: true };
-    (0, import_define.default)(params, options);
-    expect(import_mixins.REGISTRY).toEqual(originalRegistry);
-  });
-});