@domql/element 3.0.6 → 3.1.1

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

@@ -0,0 +1,222 @@
+var import_update = require("../update");
+describe("update()", () => {
+  let element, params, opts;
+  beforeEach(() => {
+    element = {
+      __ref: {
+        __if: true,
+        __execProps: {},
+        __exec: {},
+        __defineCache: {},
+        __propsStack: [],
+        __props: [],
+        __state: "state"
+      },
+      state: "string",
+      props: {},
+      parent: {
+        props: {}
+      },
+      context: {},
+      define: {},
+      node: document.createElement("div"),
+      key: "testElement",
+      on: {},
+      update: import_update.update
+    };
+    opts = {
+      preventUpdate: [],
+      preventDefineUpdate: [],
+      preventBeforeStateUpdateListener: false,
+      preventListeners: false,
+      preventStateUpdateListener: false
+    };
+    params = {};
+  });
+  it("does not modify opts when params and opts are empty", async () => {
+    await element.update({}, opts);
+    expect(opts).toEqual({
+      calleeElement: false,
+      cleanExec: true,
+      currentSnapshot: false,
+      exclude: [],
+      preventRecursive: false,
+      stackChanges: false,
+      preventUpdate: [],
+      preventDefineUpdate: [],
+      preventBeforeStateUpdateListener: false,
+      preventListeners: false,
+      preventStateUpdateListener: false
+    });
+  });
+  it("initializes options with UPDATE_DEFAULT_OPTIONS when opts is empty", async () => {
+    await element.update({}, opts);
+    expect(opts.calleeElement).toBe(false);
+    expect(element.__ref).toBeDefined();
+  });
+  it("merges opts with UPDATE_DEFAULT_OPTIONS using deepMerge", async () => {
+    opts.customOption = true;
+    await element.update({}, opts);
+    expect(opts.customOption).toBe(true);
+  });
+  it("converts string params to { text: params }", async () => {
+    await element.update("testString", opts);
+    expect(element.text).toBe("testString");
+  });
+  it("converts number params to { text: params }", async () => {
+    await element.update(123, opts);
+    expect(element.text).toBe(123);
+  });
+  it("returns early if preventInheritAtCurrentState matches element", async () => {
+    opts.preventInheritAtCurrentState = { __element: element };
+    await element.update({}, opts);
+    expect(element.__ref.__currentSnapshot).toBe(6);
+  });
+  it("initializes __ref if not present", async () => {
+    delete element.__ref;
+    await element.update({}, opts);
+    expect(element.__ref).toBeDefined();
+  });
+  it("merges options with UPDATE_DEFAULT_OPTIONS when exclude is missing", async () => {
+    await element.update({}, opts);
+    expect(opts.exclude).toBeDefined();
+  });
+  it("does not throw or modify opts when params is undefined", async () => {
+    await element.update(void 0, opts);
+    expect(opts).toEqual({
+      calleeElement: false,
+      cleanExec: true,
+      currentSnapshot: false,
+      exclude: [],
+      preventRecursive: false,
+      preventUpdate: [],
+      preventDefineUpdate: [],
+      stackChanges: false,
+      preventBeforeStateUpdateListener: false,
+      preventListeners: false,
+      preventStateUpdateListener: false
+    });
+  });
+  it("does not throw when opts is undefined", async () => {
+    await element.update({}, void 0);
+    expect(element.__ref).toBeDefined();
+  });
+  it("does not throw when opts is null", async () => {
+    await element.update({}, null);
+    expect(element.__ref).toBeDefined();
+  });
+  it("does not modify the params object", async () => {
+    params = { key: "value" };
+    await element.update(params, opts);
+    expect(params).toEqual({ key: "value" });
+  });
+  it("does modify opts when params is an empty object", async () => {
+    await element.update({}, opts);
+    expect(opts).toEqual({
+      calleeElement: false,
+      cleanExec: true,
+      currentSnapshot: false,
+      exclude: [],
+      preventRecursive: false,
+      stackChanges: false,
+      preventUpdate: [],
+      preventDefineUpdate: [],
+      preventBeforeStateUpdateListener: false,
+      preventListeners: false,
+      preventStateUpdateListener: false
+    });
+  });
+  it("moves regular properties to element.props", async () => {
+    params = { props: { title: "Test", description: "Content" } };
+    await element.update(params, opts);
+    expect(element.props).toEqual({
+      title: "Test",
+      description: "Content"
+    });
+    expect(element.title).toBeUndefined();
+  });
+  it("keeps element-rooted properties", async () => {
+    params = { Header: {}, Footer: {}, 0: "index" };
+    await 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 () => {
+    params = { props: { className: "container", hidden: true } };
+    await 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 () => {
+    params = { props: { Header: {} } };
+    await element.update(params, opts);
+    expect(element.Header).toBeDefined();
+    expect(element.props.Header).toBeUndefined();
+  });
+  it("exits early when inheritStateUpdates returns false", async () => {
+    element.__ref.__stateBlocked = true;
+    await element.update({ props: { shouldChange: true } }, opts);
+    expect(element.props.shouldChange).toBe(true);
+    expect(element.__ref.__stateBlocked).toBe(true);
+  });
+  it("exits early when checkIfOnUpdate fails", async () => {
+    element.parent.props.ifCondition = false;
+    await element.update({ state: { newState: true } }, opts);
+    expect(element.state.newState).toBe(true);
+  });
+  it("updates props from parent key match", async () => {
+    element.parent.props.testKey = { inherited: true };
+    await element.update({}, opts);
+    expect(element.props.inherited).toBeUndefined();
+  });
+  it("updates props when functions exist in __props", async () => {
+    element.__ref.__props.push(() => "dynamic");
+    await element.update({}, opts);
+    expect(element.props).toEqual(expect.any(Object));
+  });
+  it("skips props update when preventPropsUpdate=true", async () => {
+    opts.preventPropsUpdate = true;
+    opts.preventUpdateAfter = true;
+    element.parent.props.testKey = { shouldExist: true };
+    await element.update({}, opts);
+    expect(element.props.shouldExist).toBeUndefined();
+  });
+  it("should not skips props update when preventPropsUpdate=false", async () => {
+    opts.preventPropsUpdate = false;
+    opts.lazyLoad = true;
+    opts.onEachUpdate = () => {
+      return true;
+    };
+    element.parent.props.testKey = { shouldExist: true };
+    element.__ref.__propsStack = [];
+    element.__ref.__if = true;
+    element.off = { text: "off" };
+    await element.update({}, opts);
+    expect(element.props.shouldExist).toBeUndefined();
+  });
+  it("should set preventUpdateAfterCount to 1 when is not a number", async () => {
+    opts.preventPropsUpdate = true;
+    opts.preventUpdateAfter = 2;
+    opts.preventUpdateAfterCount = void 0;
+    element.parent.props.testKey = { shouldExist: true };
+    await element.update({}, opts);
+    expect(element.props.shouldExist).toBeUndefined();
+  });
+  it("processes parent.childProps", async () => {
+    element.parent.props.childProps = { global: true };
+    await element.update({}, opts);
+    expect(element.props.global).toBe(true);
+  });
+  it("processes function props", async () => {
+    await element.update({ props: { calc: () => 42 } }, opts);
+    expect(element.props.calc()).toBe(42);
+  });
+  it("returns element when beforeUpdate rejects", async () => {
+    element.on.beforeUpdate = () => false;
+    const result = await element.update({}, opts);
+    expect(result).toBe(element);
+  });
+});

package/dist/cjs/create.js

@@ -40,7 +40,7 @@ const create = async (props, parentEl, passedKey, options = import_utils.OPTIONS
   const { key, parent, __ref: ref } = element;
   (0, import_utils.createRoot)(element, parent);
   (0, import_utils.applyExtends)(element, parent, options);
-  (0, import_utils.propertizeElement)(element, parent);
+  import_utils.propertizeElement.call(element, element);
   await (0, import_event.triggerEventOn)("start", element, options);
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
@@ -87,7 +87,7 @@ const addElementIntoParentChildren = (element, parent) => {
 };
 const visitedElements = /* @__PURE__ */ new WeakMap();
 const renderElement = async (element, parent, options, attachOptions) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   if (visitedElements.has(element)) {
     if (ENV === "test" || ENV === "development") {
       console.warn("Cyclic rendering detected:", element.__ref.path);
@@ -124,15 +124,6 @@ const renderElement = async (element, parent, options, attachOptions) => {
       if ((_c = element.on) == null ? void 0 : _c.error) {
         element.on.error(e, element, element.state, element.context, options);
       }
-      if ((_d = element.props) == null ? void 0 : _d.onError) {
-        element.props.onError(
-          e,
-          element,
-          element.state,
-          element.context,
-          options
-        );
-      }
     }
   }
   if (!ref.__if) {

package/dist/cjs/iterate.js

@@ -27,14 +27,14 @@ __export(iterate_exports, {
 });
 module.exports = __toCommonJS(iterate_exports);
 var import_utils = require("@domql/utils");
-const throughInitialExec = (element, exclude = {}) => {
+const throughInitialExec = async (element, exclude = {}) => {
   const { __ref: ref } = element;
   for (const param in element) {
     if (exclude[param]) continue;
     const prop = element[param];
     if ((0, import_utils.isFunction)(prop) && !(0, import_utils.isMethod)(param, element)) {
       ref.__exec[param] = prop;
-      element[param] = prop(element, element.state, element.context);
+      element[param] = await prop(element, element.state, element.context);
     }
   }
 };
@@ -65,23 +65,23 @@ const throughUpdatedExec = (element, options = {}) => {
   }
   return changes;
 };
-const throughExecProps = (element) => {
+const throughExecProps = async (element) => {
   const { __ref: ref } = element;
   const { props } = element;
   for (const k in props) {
     const isDefine = k.startsWith("is") || k.startsWith("has") || k.startsWith("use");
     const cachedExecProp = ref.__execProps[k];
     if ((0, import_utils.isFunction)(cachedExecProp)) {
-      props[k] = (0, import_utils.exec)(cachedExecProp, element);
+      props[k] = await (0, import_utils.execPromise)(cachedExecProp, element);
     } else if (isDefine && (0, import_utils.isFunction)(props[k])) {
       ref.__execProps[k] = props[k];
-      props[k] = (0, import_utils.exec)(props[k], element);
+      props[k] = await (0, import_utils.execPromise)(props[k], element);
     }
   }
 };
 const isPropertyInDefines = (key, element) => {
 };
-const throughInitialDefine = (element) => {
+const throughInitialDefine = async (element) => {
   const { define, context, __ref: ref } = element;
   let defineObj = {};
   const hasGlobalDefine = context && (0, import_utils.isObject)(context.define);
@@ -91,13 +91,13 @@ const throughInitialDefine = (element) => {
     let elementProp = element[param];
     if ((0, import_utils.isFunction)(elementProp) && !(0, import_utils.isMethod)(param, element)) {
       ref.__exec[param] = elementProp;
-      const execParam2 = elementProp = (0, import_utils.exec)(elementProp, element);
+      const execParam2 = elementProp = await (0, import_utils.execPromise)(elementProp, element);
       if (execParam2) {
         elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
         ref.__defineCache[param] = elementProp;
       }
     }
-    const execParam = defineObj[param](
+    const execParam = await defineObj[param](
       elementProp,
       element,
       element.state,
@@ -107,7 +107,7 @@ const throughInitialDefine = (element) => {
   }
   return element;
 };
-const throughUpdatedDefine = (element) => {
+const throughUpdatedDefine = async (element) => {
   const { context, define, __ref: ref } = element;
   const changes = {};
   let obj = {};
@@ -116,13 +116,13 @@ const throughUpdatedDefine = (element) => {
   for (const param in obj) {
     const execParam = ref.__exec[param];
     if (execParam) {
-      ref.__defineCache[param] = execParam(
+      ref.__defineCache[param] = await execParam(
         element,
         element.state,
         element.context
       );
     }
-    const cached = (0, import_utils.exec)(ref.__defineCache[param], element);
+    const cached = await (0, import_utils.execPromise)(ref.__defineCache[param], element);
     const newExecParam = typeof obj[param] === "function" ? obj[param](cached, element, element.state, element.context) : void 0;
     if (newExecParam) element[param] = newExecParam;
   }

package/dist/cjs/mixins/registry.js

@@ -42,7 +42,7 @@ var import_style = __toESM(require("./style.js"), 1);
 var import_text = __toESM(require("./text.js"), 1);
 const REGISTRY = {
   attr: import_attr.default,
-  styles: import_style.default,
+  style: import_style.default,
   text: import_text.default,
   html: import_html.default,
   data: import_data.default,

package/dist/cjs/update.js

@@ -77,7 +77,7 @@ const update = async function(params = {}, opts) {
   if ((0, import_utils.isString)(params) || (0, import_utils.isNumber)(params)) {
     params = { text: params };
   }
-  params = (0, import_utils.propertizeElement)(params);
+  params = import_utils.propertizeUpdate.call(element, params);
   const inheritState = await inheritStateUpdates(element, options);
   if (inheritState === false) return;
   const ifFails = await checkIfOnUpdate(element, parent, options);
@@ -89,10 +89,11 @@ const update = async function(params = {}, opts) {
     if (props) (0, import_utils.updateProps)(props, element, parent);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
+    const simulate = { ...params, ...element };
     const beforeUpdateReturns = await (0, import_event.triggerEventOnUpdate)(
       "beforeUpdate",
       params,
-      element,
+      simulate,
       options
     );
     if (beforeUpdateReturns === false) return element;

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

@@ -0,0 +1,73 @@
+import { update } from "../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 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 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 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 update.call(element, {}, options);
+    const newElement = parent.node.children[0];
+    expect(newElement).toEqual(document.createElement("span"));
+    expect(newElement.previousSibling).toBe(null);
+  });
+});

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

@@ -0,0 +1,177 @@
+import { jest } from "@jest/globals";
+import { setChildren } from "../children";
+describe("children", () => {
+  let element, node;
+  beforeEach(() => {
+    element = {
+      __ref: {},
+      state: {},
+      props: {},
+      call: jest.fn(),
+      removeContent: jest.fn(),
+      content: null
+    };
+    node = {};
+  });
+  it("handles null/undefined params", async () => {
+    const result = await setChildren(null, element, node);
+    expect(result).toBeUndefined();
+  });
+  it("handles direct string children", async () => {
+    const result = await setChildren("Hello World", element, node);
+    expect(result).toEqual({ tag: "fragment", 0: { text: "Hello World" } });
+  });
+  it("handles numeric children", async () => {
+    const result = await 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 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 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 setChildren(children1, element, node);
+    expect(element.__ref.__childrenCache).toEqual(children1);
+    expect(element.__ref.__noChildrenDifference).toBeUndefined();
+    await setChildren(children2, element, node);
+    expect(element.__ref.__noChildrenDifference).toBe(true);
+    await 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 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 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 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 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 setChildren([], element, node);
+    expect(result).toEqual({
+      tag: "fragment"
+    });
+    result = await setChildren({}, element, node);
+    expect(result).toEqual({
+      tag: "fragment"
+    });
+  });
+  it("handles falsy values in arrays", async () => {
+    const result = await 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 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 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 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/esm/__tests__/define.test.js

@@ -0,0 +1,53 @@
+import define from "../define";
+import { REGISTRY } from "../mixins";
+describe("default function (registry updater)", () => {
+  let originalRegistry;
+  beforeEach(() => {
+    originalRegistry = { ...REGISTRY };
+  });
+  afterEach(() => {
+    Object.keys(REGISTRY).forEach((key) => {
+      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 };
+    define(params, options);
+    expect(REGISTRY.newKey).toBe("newValue");
+    expect(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 {
+      define(params);
+    } catch (e) {
+    }
+    expect(REGISTRY.attr).toBe(originalRegistry.attr);
+    expect(REGISTRY.text).toBe(originalRegistry.text);
+  });
+  it("should overwrite existing keys when overwrite is true", () => {
+    const params = { attr: "newValue", text: "newText" };
+    const options = { overwrite: true };
+    define(params, options);
+    expect(REGISTRY.attr).toBe("newValue");
+    expect(REGISTRY.text).toBe("newText");
+  });
+  it("should handle empty params object without errors", () => {
+    const params = {};
+    const options = { overwrite: true };
+    expect(() => define(params, options)).not.toThrow();
+    expect(REGISTRY).toEqual(originalRegistry);
+  });
+  it("should handle empty options object without errors", () => {
+    const params = { newKey: "newValue" };
+    expect(() => define(params, {})).not.toThrow();
+    expect(REGISTRY.newKey).toBe("newValue");
+  });
+  it("should not add new keys when params is empty", () => {
+    const params = {};
+    const options = { overwrite: true };
+    define(params, options);
+    expect(REGISTRY).toEqual(originalRegistry);
+  });
+});