@domql/element 2.5.198 → 3.0.0

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

@@ -0,0 +1,219 @@
+import { update } from "../update";
+describe("update()", () => {
+  let element, params, opts;
+  beforeEach(() => {
+    element = {
+      __ref: {
+        __execProps: {},
+        __exec: {},
+        __defineCache: {},
+        __props: [],
+        __state: "state"
+      },
+      state: "string",
+      props: {},
+      parent: {
+        props: {}
+      },
+      define: {},
+      node: document.createElement("div"),
+      key: "testElement",
+      on: {},
+      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("returns element when beforeUpdate rejects", async () => {
+    element.props.onBeforeUpdate = () => false;
+    const result = await element.update({}, opts);
+    expect(result).toBe(element);
+  });
+  it("processes parent.childProps", async () => {
+    element.parent.props.childProps = { global: true };
+    await element.update({}, opts);
+    expect(element.props.global).toBeUndefined();
+  });
+  it("processes function props", async () => {
+    await element.update({ props: { calc: () => 42 } }, opts);
+    expect(element.props.calc()).toBe(42);
+  });
+});

package/dist/esm/children.js

@@ -0,0 +1,81 @@
+import {
+  concatAddExtends,
+  deepClone,
+  execPromise,
+  getChildStateInKey,
+  isArray,
+  isDefined,
+  isNot,
+  isNumber,
+  isObject,
+  isObjectLike,
+  isState,
+  isString,
+  matchesComponentNaming
+} from "@domql/utils";
+async 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);
+  if (children) {
+    if (isState(children)) children = children.parse();
+    if (isString(children) || isNumber(children)) {
+      if (children === "state") children = state.parse();
+      else {
+        const pathInState = getChildStateInKey(children, state);
+        if (pathInState) {
+          childrenAs = "state";
+          children = getChildStateInKey(children, state) || { value: children };
+        } else {
+          children = { text: children };
+        }
+      }
+    }
+    if (isObject(children)) {
+      if (children.$$typeof) {
+        return element.call("renderReact", children, element);
+      }
+      children = Object.keys(children).map((v) => {
+        const val = children[v];
+        if (matchesComponentNaming(v)) return concatAddExtends(v, val);
+        return val;
+      });
+    }
+  }
+  if (!children || isNot(children)("array", "object")) return;
+  if (isArray(children) && children.find((v) => v == null ? void 0 : v.$$typeof)) {
+    const filterReact = children.filter((v) => !(v == null ? void 0 : v.$$typeof));
+    if (filterReact.length !== children.length) {
+      const extractedReactComponents = children.filter((v) => v == null ? void 0 : v.$$typeof);
+      element.call("renderReact", extractedReactComponents, element);
+    }
+    children = filterReact;
+  }
+  if (ref.__childrenCache) {
+    const equals = JSON.stringify(children) === JSON.stringify(ref.__childrenCache);
+    if (equals) {
+      ref.__noChildrenDifference = true;
+    } else {
+      ref.__childrenCache = deepClone(children);
+      delete ref.__noChildrenDifference;
+    }
+  } else {
+    ref.__childrenCache = deepClone(children);
+  }
+  if (isObject(children) || isArray(children)) {
+    children = deepClone(children);
+  }
+  const content = { tag: "fragment" };
+  for (const key in children) {
+    const value = Object.hasOwnProperty.call(children, key) && children[key];
+    if (isDefined(value) && value !== null && value !== false) {
+      content[key] = isObjectLike(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+    }
+  }
+  return content;
+}
+var children_default = setChildren;
+export {
+  children_default as default,
+  setChildren
+};

package/dist/esm/create.js

@@ -1,173 +1,101 @@
 import { createNode } from "./node.js";
 import { ROOT } from "./tree.js";
 import {
-  HTML_TAGS,
   isObject,
-  isFunction,
-  isString,
   exec,
-  is,
-  isNode,
   isUndefined,
-  generateKey,
-  checkIfKeyIsComponent,
-  deepClone,
-  applyComponentFromContext,
-  applyKeyComponentAsExtend,
-  isVariant,
   detectInfiniteLoop,
-  addChildrenIfNotInOriginal
+  propertizeElement,
+  createElement,
+  applyExtends,
+  createScope,
+  isMethod,
+  OPTIONS,
+  initProps,
+  createIfConditionFlag,
+  deepClone
 } from "@domql/utils";
 import { applyAnimationFrame, triggerEventOn } from "@domql/event";
 import { assignNode } from "@domql/render";
 import { createState } from "@domql/state";
-import { isMethod } from "./methods/index.js";
-import { createProps } from "./props/index.js";
-import { applyExtend } from "./extend.js";
-import { REGISTRY, registry } from "./mixins/index.js";
+import { REGISTRY } from "./mixins/index.js";
 import { addMethods } from "./methods/set.js";
 import { assignKeyAsClassname } from "./mixins/classList.js";
 import { throughInitialExec, throughInitialDefine } from "./iterate.js";
-import { OPTIONS } from "./cache/options.js";
-import {
-  applyVariant,
-  createValidDomqlObjectFromSugar
-} from "./utils/component.js";
 const ENV = "development";
-const create = async (element, parent, key, options = OPTIONS.create || {}, attachOptions) => {
-  cacheOptions(element, options);
-  if (checkIfPrimitive(element)) {
-    element = applyValueAsText(element, parent, key);
-  }
-  element = redefineElement(element, parent, key, options);
-  parent = redefineParent(element, parent, key);
-  key = createKey(element, parent, key);
-  const ref = addRef(element, parent, key);
-  ref.__initialProps = deepClone(element.props);
-  applyContext(element, parent, options);
-  applyComponentFromContext(element, parent, options);
-  if (!ref.__skipCreate) {
-    applyExtend(element, parent, options);
-  }
-  element.key = key;
+const create = async (props, parentEl, passedKey, options = OPTIONS.create || {}, attachOptions) => {
+  cacheOptions(options);
+  const element = createElement(props, parentEl, passedKey, options, ROOT);
+  if (!element) return;
+  const { key, parent, __ref: ref } = element;
+  if (element.key === "BannerHgroup") {
+    console.warn(deepClone(element));
+  }
+  applyExtends(element, parent, options);
+  if (element.key === "BannerHgroup") {
+    console.warn(deepClone(element));
+  }
+  propertizeElement(element, parent);
+  await triggerEventOn("start", element, options);
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
   }
-  await triggerEventOn("start", element, options);
-  switchDefaultOptions(element, parent, options);
-  addCaching(element, parent);
+  if (element.key === "BannerHgroup") {
+    console.warn(element);
+  }
+  resetOptions(element, parent, options);
   addMethods(element, parent, options);
   createScope(element, parent);
   await createState(element, parent);
-  if (element.scope === "state")
-    element.scope = element.state;
+  if (element.scope === "state") element.scope = element.state;
   createIfConditionFlag(element, parent);
-  createProps(element, parent, options);
-  if (element.scope === "props" || element.scope === true)
+  initProps(element, parent, options);
+  if (element.scope === "props" || element.scope === true) {
     element.scope = element.props;
+  }
   createIfConditionFlag(element, parent);
-  if (element.node && ref.__if) {
-    return assignNode(element, parent, key, attachOptions);
+  if (element.node) {
+    if (ref.__if) return assignNode(element, parent, key, attachOptions);
   }
-  applyVariant(element, parent);
   const onInit = await triggerEventOn("init", element, options);
-  if (onInit === false)
-    return element;
+  if (onInit === false) return element;
   triggerEventOn("beforeClassAssign", element, options);
   assignKeyAsClassname(element);
-  addChildrenIfNotInOriginal(element, parent, key);
   await renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   await triggerEventOn("complete", element, options);
   return element;
 };
-const createBasedOnType = (element, parent, key, options) => {
-  if (element === void 0) {
-    if (ENV === "test" || ENV === "development") {
-      console.warn(key, "element is undefined in", parent && parent.__ref && parent.__ref.path);
-    }
-    return {};
-  }
-  if (isString(key) && key.slice(0, 2 === "__")) {
-    if (ENV === "test" || ENV === "development") {
-      console.warn(key, "seems like to be in __ref");
-    }
-  }
-  if (element === null)
-    return;
-  if (element === true)
-    return { text: true };
-  if (element.__hash) {
-    return { extend: element };
-  }
-  return element;
-};
-const redefineElement = (element, parent, key, options) => {
-  const elementWrapper = createBasedOnType(element, parent, key, options);
-  if (options.syntaxv3 || element.props && element.props.syntaxv3 || parent && parent.props && parent.props.syntaxv3) {
-    if (element.props)
-      element.props.syntaxv3 = true;
-    else
-      element.syntaxv3 = true;
-    return createValidDomqlObjectFromSugar(element, parent, key, options);
-  } else if (checkIfKeyIsComponent(key)) {
-    return applyKeyComponentAsExtend(elementWrapper, parent, key);
-  }
-  if (checkIfMedia(key)) {
-    return applyMediaProps(elementWrapper, parent, key);
-  }
-  return elementWrapper;
-};
-const redefineParent = (element, parent, key, options) => {
-  if (!parent)
-    return ROOT;
-  if (isNode(parent)) {
-    const parentNodeWrapper = { key: ":root", node: parent };
-    ROOT[`${key}_parent`] = parentNodeWrapper;
-    return parentNodeWrapper;
-  }
-  return parent;
-};
-const cacheOptions = (element, options) => {
+const cacheOptions = (options) => {
   if (options && !OPTIONS.create) {
     OPTIONS.create = options;
-    OPTIONS.create.context = element.context || options.context;
+    OPTIONS.create.context = options.context;
   }
 };
-const createKey = (element, parent, key) => {
-  return (exec(key, element) || key || element.key || generateKey()).toString();
-};
-const addRef = (element, parent) => {
-  if (element.__ref)
-    element.__ref.origin = element;
-  else
-    element.__ref = { origin: element };
-  return element.__ref;
-};
-const switchDefaultOptions = (element, parent, options) => {
+const resetOptions = (element, parent, options) => {
   if (Object.keys(options).length) {
-    registry.defaultOptions = options;
-    if (options.ignoreChildExtend)
-      delete options.ignoreChildExtend;
+    OPTIONS.defaultOptions = options;
+    if (options.ignoreChildExtends) delete options.ignoreChildExtends;
   }
 };
 const addElementIntoParentChildren = (element, parent) => {
-  if (parent.__ref && parent.__ref.__children)
+  if (parent.__ref && parent.__ref.__children) {
     parent.__ref.__children.push(element.key);
+  }
 };
 const visitedElements = /* @__PURE__ */ new WeakMap();
 const renderElement = async (element, parent, options, attachOptions) => {
   var _a, _b, _c, _d;
   if (visitedElements.has(element)) {
-    if (ENV === "test" || ENV === "development")
+    if (ENV === "test" || ENV === "development") {
       console.warn("Cyclic rendering detected:", element.__ref.path);
+    }
   }
   visitedElements.set(element, true);
   const { __ref: ref, key } = element;
   const createNestedChild = async () => {
     const isInfiniteLoopDetected = detectInfiniteLoop(ref.path);
-    if (ref.__uniqId || isInfiniteLoopDetected)
-      return;
+    if (ref.__uniqId || isInfiniteLoopDetected) return;
     await createNode(element, options);
     ref.__uniqId = Math.random();
   };
@@ -178,18 +106,31 @@ const renderElement = async (element, parent, options, attachOptions) => {
       await createNestedChild();
     } catch (e) {
       const path = ref.path;
-      if (path.includes("ComponentsGrid"))
+      if (path.includes("ComponentsGrid")) {
         path.splice(0, path.indexOf("ComponentsGrid") + 2);
-      if (path.includes("demoComponent"))
+      }
+      if (path.includes("demoComponent")) {
         path.splice(0, path.indexOf("demoComponent") + 1);
+      }
       const isDemoComponent = (_b = (_a = element.lookup((el) => el.state.key)) == null ? void 0 : _a.state) == null ? void 0 : _b.key;
-      element.warn("Error happened in:", isDemoComponent ? isDemoComponent + " " : "" + path.join("."));
+      element.warn(
+        "Error happened in:",
+        isDemoComponent ? isDemoComponent + " " : "" + path.join(".")
+      );
       element.verbose();
       element.error(e, options);
-      if ((_c = element.on) == null ? void 0 : _c.error)
+      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 ((_d = element.props) == null ? void 0 : _d.onError) {
+        element.props.onError(
+          e,
+          element,
+          element.state,
+          element.context,
+          options
+        );
+      }
     }
   }
   if (!ref.__if) {
@@ -203,97 +144,29 @@ const renderElement = async (element, parent, options, attachOptions) => {
   await triggerEventOn("done", element, options);
   await triggerEventOn("create", element, options);
 };
-const checkIfPrimitive = (element) => is(element)("string", "number");
-const applyValueAsText = (element, parent, key) => {
-  const extendTag = element.extend && element.extend.tag;
-  const childExtendTag = parent.childExtend && parent.childExtend.tag;
-  const childPropsTag = parent.props.childProps && parent.props.childProps.tag;
-  const isKeyValidHTMLTag = HTML_TAGS.body.indexOf(key) > -1 && key;
-  return {
-    text: element,
-    tag: extendTag || childExtendTag || childPropsTag || isKeyValidHTMLTag || "string"
-  };
-};
-const applyContext = (element, parent, options) => {
-  const forcedOptionsContext = options.context && !ROOT.context && !element.context;
-  if (forcedOptionsContext)
-    ROOT.context = options.context;
-  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;
-  if (isFunction(element.if) && !element.if(element, element.state, element.context)) {
-    delete ref.__if;
-  } else
-    ref.__if = true;
-};
-const addCaching = (element, parent) => {
-  const { __ref: ref, key } = element;
-  let { __ref: parentRef } = parent;
-  if (!element.transform)
-    element.transform = {};
-  if (!ref.__cached)
-    ref.__cached = {};
-  if (!ref.__defineCache)
-    ref.__defineCache = {};
-  if (!ref.__exec)
-    ref.__exec = {};
-  if (!ref.__execProps)
-    ref.__execProps = {};
-  if (!ref.__class)
-    ref.__class = {};
-  if (!ref.__classNames)
-    ref.__classNames = {};
-  if (!ref.__attr)
-    ref.__attr = {};
-  if (!ref.__changes)
-    ref.__changes = [];
-  if (!ref.__children)
-    ref.__children = [];
-  if (checkIfKeyIsComponent(key))
-    ref.__componentKey = key.split("_")[0].split(".")[0].split("+")[0];
-  const hasRoot = parent && parent.key === ":root";
-  if (!ref.root)
-    ref.root = hasRoot ? element : parentRef.root;
-  if (!parentRef)
-    parentRef = parent.ref = {};
-  if (!parentRef.path)
-    parentRef.path = [];
-  ref.path = parentRef.path.concat(element.key);
-};
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref: ref } = element;
-  if (!ref.__skipCreate) {
-    addCaching(element, parent);
-    addMethods(element, parent, options);
-    createScope(element, parent);
-    createState(element, parent);
-    if (element.scope === "state")
-      element.scope = element.state;
-    createIfConditionFlag(element, parent);
-    createProps(element, parent, options);
-    if (element.scope === "props" || element.scope === true)
-      element.scope = element.props;
-    if (element.node && ref.__if) {
-      parent[key || element.key] = element;
-    }
-    if (!element.props)
-      element.props = {};
-    applyVariant(element, parent);
-    addElementIntoParentChildren(element, parent);
+  addMethods(element, parent, options);
+  createScope(element, parent);
+  createState(element, parent);
+  if (element.scope === "state") element.scope = element.state;
+  createIfConditionFlag(element, parent);
+  initProps(element, parent, options);
+  if (element.scope === "props" || element.scope === true) {
+    element.scope = element.props;
+  }
+  if (element.node && ref.__if) {
+    parent[key || element.key] = element;
   }
+  if (!element.props) element.props = {};
+  addElementIntoParentChildren(element, parent);
   if (element.tag !== "string" && element.tag !== "fragment") {
     throughInitialDefine(element);
     throughInitialExec(element);
     for (const k in element) {
-      if (isUndefined(element[k]) || isMethod(k, element) || isObject((registry.default || registry)[k]) || isVariant(k))
+      if (isUndefined(element[k]) || isMethod(k, element) || isObject(REGISTRY[k])) {
         continue;
+      }
       const hasDefine = element.define && element.define[k];
       const contextHasDefine = element.context && element.context.define && element.context.define[k];
       const optionsHasDefine = options.define && options.define[k];
@@ -313,26 +186,6 @@ const onlyResolveExtends = (element, parent, key, options) => {
   }
   return element;
 };
-const checkIfMedia = (key) => key.slice(0, 1) === "@";
-const applyMediaProps = (element, parent, key) => {
-  const { props } = element;
-  if (props) {
-    props.display = "none";
-    if (props[key])
-      props[key].display = props.display;
-    else
-      props[key] = { display: props.display || "block" };
-    return element;
-  } else {
-    return {
-      ...element,
-      props: {
-        display: "none",
-        [key]: { display: "block" }
-      }
-    };
-  }
-};
 var create_default = create;
 export {
   create,