@domql/element 2.5.200 → 3.0.0

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

@@ -0,0 +1,219 @@
+var import_update = require("../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: 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("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/cjs/children.js

@@ -0,0 +1,87 @@
+"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 children_exports = {};
+__export(children_exports, {
+  default: () => children_default,
+  setChildren: () => setChildren
+});
+module.exports = __toCommonJS(children_exports);
+var import_utils = require("@domql/utils");
+async 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);
+  if (children) {
+    if ((0, import_utils.isState)(children)) children = children.parse();
+    if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
+      if (children === "state") children = state.parse();
+      else {
+        const pathInState = (0, import_utils.getChildStateInKey)(children, state);
+        if (pathInState) {
+          childrenAs = "state";
+          children = (0, import_utils.getChildStateInKey)(children, state) || { value: children };
+        } else {
+          children = { text: children };
+        }
+      }
+    }
+    if ((0, import_utils.isObject)(children)) {
+      if (children.$$typeof) {
+        return element.call("renderReact", children, element);
+      }
+      children = Object.keys(children).map((v) => {
+        const val = children[v];
+        if ((0, import_utils.matchesComponentNaming)(v)) return (0, import_utils.concatAddExtends)(v, val);
+        return val;
+      });
+    }
+  }
+  if (!children || (0, import_utils.isNot)(children)("array", "object")) return;
+  if ((0, import_utils.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 = (0, import_utils.deepClone)(children);
+      delete ref.__noChildrenDifference;
+    }
+  } else {
+    ref.__childrenCache = (0, import_utils.deepClone)(children);
+  }
+  if ((0, import_utils.isObject)(children) || (0, import_utils.isArray)(children)) {
+    children = (0, import_utils.deepClone)(children);
+  }
+  const content = { tag: "fragment" };
+  for (const key in children) {
+    const value = Object.hasOwnProperty.call(children, key) && children[key];
+    if ((0, import_utils.isDefined)(value) && value !== null && value !== false) {
+      content[key] = (0, import_utils.isObjectLike)(value) ? childrenAs ? { [childrenAs]: value } : value : childrenAs ? { [childrenAs]: childrenAs === "state" ? { value } : { text: value } } : { text: value };
+    }
+  }
+  return content;
+}
+var children_default = setChildren;

package/dist/cjs/create.js

@@ -28,130 +28,78 @@ var import_utils = require("@domql/utils");
 var import_event = require("@domql/event");
 var import_render = require("@domql/render");
 var import_state = require("@domql/state");
-var import_methods = require("./methods/index.js");
-var import_props = require("./props/index.js");
-var import_extend = require("./extend.js");
 var import_mixins = require("./mixins/index.js");
 var import_set = require("./methods/set.js");
 var import_classList = require("./mixins/classList.js");
 var import_iterate = require("./iterate.js");
-var import_options = require("./cache/options.js");
-var import_component = require("./utils/component.js");
 const ENV = "development";
-const create = async (element, parent, key, options = import_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 = (0, import_utils.deepClone)(element.props);
-  applyContext(element, parent, options);
-  (0, import_utils.applyComponentFromContext)(element, parent, options);
-  if (!ref.__skipCreate) {
-    (0, import_extend.applyExtend)(element, parent, options);
-  }
-  element.key = key;
+const create = async (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;
+  if (element.key === "BannerHgroup") {
+    console.warn((0, import_utils.deepClone)(element));
+  }
+  (0, import_utils.applyExtends)(element, parent, options);
+  if (element.key === "BannerHgroup") {
+    console.warn((0, import_utils.deepClone)(element));
+  }
+  (0, import_utils.propertizeElement)(element, parent);
+  await (0, import_event.triggerEventOn)("start", element, options);
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
   }
-  await (0, import_event.triggerEventOn)("start", element, options);
-  switchDefaultOptions(element, parent, options);
-  addCaching(element, parent);
+  if (element.key === "BannerHgroup") {
+    console.warn(element);
+  }
+  resetOptions(element, parent, options);
   (0, import_set.addMethods)(element, parent, options);
-  createScope(element, parent);
+  (0, import_utils.createScope)(element, parent);
   await (0, import_state.createState)(element, parent);
   if (element.scope === "state") element.scope = element.state;
-  createIfConditionFlag(element, parent);
-  (0, import_props.createProps)(element, parent, options);
-  if (element.scope === "props" || element.scope === true) element.scope = element.props;
-  createIfConditionFlag(element, parent);
-  if (element.node && ref.__if) {
-    return (0, import_render.assignNode)(element, parent, key, attachOptions);
+  (0, import_utils.createIfConditionFlag)(element, parent);
+  (0, import_utils.initProps)(element, parent, options);
+  if (element.scope === "props" || element.scope === true) {
+    element.scope = element.props;
+  }
+  (0, import_utils.createIfConditionFlag)(element, parent);
+  if (element.node) {
+    if (ref.__if) return (0, import_render.assignNode)(element, parent, key, attachOptions);
   }
-  (0, import_component.applyVariant)(element, parent);
   const onInit = await (0, import_event.triggerEventOn)("init", element, options);
   if (onInit === false) return element;
   (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
   (0, import_classList.assignKeyAsClassname)(element);
-  (0, import_utils.addChildrenIfNotInOriginal)(element, parent, key);
   await renderElement(element, parent, options, attachOptions);
   addElementIntoParentChildren(element, parent);
   await (0, import_event.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 {};
+const cacheOptions = (options) => {
+  if (options && !import_utils.OPTIONS.create) {
+    import_utils.OPTIONS.create = options;
+    import_utils.OPTIONS.create.context = options.context;
   }
-  if ((0, import_utils.isString)(key) && key.slice(0, false)) {
-    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 (0, import_component.createValidDomqlObjectFromSugar)(element, parent, key, options);
-  } else if ((0, import_utils.checkIfKeyIsComponent)(key)) {
-    return (0, import_utils.applyKeyComponentAsExtend)(elementWrapper, parent, key);
-  }
-  if (checkIfMedia(key)) {
-    return applyMediaProps(elementWrapper, parent, key);
-  }
-  return elementWrapper;
-};
-const redefineParent = (element, parent, key, options) => {
-  if (!parent) return import_tree.ROOT;
-  if ((0, import_utils.isNode)(parent)) {
-    const parentNodeWrapper = { key: ":root", node: parent };
-    import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
-    return parentNodeWrapper;
-  }
-  return parent;
-};
-const cacheOptions = (element, options) => {
-  if (options && !import_options.OPTIONS.create) {
-    import_options.OPTIONS.create = options;
-    import_options.OPTIONS.create.context = element.context || options.context;
-  }
-};
-const createKey = (element, parent, key) => {
-  return ((0, import_utils.exec)(key, element) || key || element.key || (0, import_utils.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) {
-    import_mixins.registry.defaultOptions = options;
-    if (options.ignoreChildExtend) delete options.ignoreChildExtend;
+    import_utils.OPTIONS.defaultOptions = options;
+    if (options.ignoreChildExtends) delete options.ignoreChildExtends;
   }
 };
 const addElementIntoParentChildren = (element, parent) => {
-  if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key);
+  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") console.warn("Cyclic rendering detected:", element.__ref.path);
+    if (ENV === "test" || ENV === "development") {
+      console.warn("Cyclic rendering detected:", element.__ref.path);
+    }
   }
   visitedElements.set(element, true);
   const { __ref: ref, key } = element;
@@ -168,14 +116,31 @@ const renderElement = async (element, parent, options, attachOptions) => {
       await createNestedChild();
     } catch (e) {
       const path = ref.path;
-      if (path.includes("ComponentsGrid")) path.splice(0, path.indexOf("ComponentsGrid") + 2);
-      if (path.includes("demoComponent")) path.splice(0, path.indexOf("demoComponent") + 1);
+      if (path.includes("ComponentsGrid")) {
+        path.splice(0, path.indexOf("ComponentsGrid") + 2);
+      }
+      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) 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 ((_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) {
@@ -189,75 +154,29 @@ const renderElement = async (element, parent, options, attachOptions) => {
   await (0, import_event.triggerEventOn)("done", element, options);
   await (0, import_event.triggerEventOn)("create", element, options);
 };
-const checkIfPrimitive = (element) => (0, import_utils.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 = import_utils.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 && !import_tree.ROOT.context && !element.context;
-  if (forcedOptionsContext) import_tree.ROOT.context = options.context;
-  if (!element.context) element.context = parent.context || options.context || import_tree.ROOT.context;
-};
-const createScope = (element, parent) => {
-  const { __ref: ref } = element;
-  if (!element.scope) element.scope = parent.scope || ref.root.scope || {};
-};
-const createIfConditionFlag = (element, parent) => {
-  const { __ref: ref } = element;
-  if ((0, import_utils.isFunction)(element.if) && !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 ((0, import_utils.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);
-    (0, import_set.addMethods)(element, parent, options);
-    createScope(element, parent);
-    (0, import_state.createState)(element, parent);
-    if (element.scope === "state") element.scope = element.state;
-    createIfConditionFlag(element, parent);
-    (0, import_props.createProps)(element, parent, 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 = {};
-    (0, import_component.applyVariant)(element, parent);
-    addElementIntoParentChildren(element, parent);
+  (0, import_set.addMethods)(element, parent, options);
+  (0, import_utils.createScope)(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);
+  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") {
     (0, import_iterate.throughInitialDefine)(element);
     (0, import_iterate.throughInitialExec)(element);
     for (const k in element) {
-      if ((0, import_utils.isUndefined)(element[k]) || (0, import_methods.isMethod)(k, element) || (0, import_utils.isObject)((import_mixins.registry.default || import_mixins.registry)[k]) || (0, import_utils.isVariant)(k)) continue;
+      if ((0, import_utils.isUndefined)(element[k]) || (0, import_utils.isMethod)(k, element) || (0, import_utils.isObject)(import_mixins.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];
@@ -277,22 +196,4 @@ 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;