@domql/element 2.5.198 → 3.0.0

package/dist/esm/set.js

@@ -1,79 +1,144 @@
-import { deepContains, setContentKey } from "@domql/utils";
-import { OPTIONS } from "./cache/options.js";
+import { deepContains, execPromise, isFunction, OPTIONS } from "@domql/utils";
 import { create } from "./create.js";
-import { registry } from "./mixins/index.js";
-import { removeContent } from "./mixins/content.js";
 import { triggerEventOn, triggerEventOnUpdate } from "@domql/event";
-const resetElement = async (params, element, options) => {
-  if (!options.preventRemove)
-    removeContent(element, options);
+const setContentKey = (element, opts = {}) => {
   const { __ref: ref } = element;
-  await create(params, element, ref.contentElementKey || "content", {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
-    ...OPTIONS.create,
-    ...options
-  });
+  const contentElementKey = opts.contentElementKey;
+  if (!ref.contentElementKey || contentElementKey !== ref.contentElementKey) {
+    ref.contentElementKey = contentElementKey || "content";
+  }
+  return ref.contentElementKey;
 };
-const reset = (options) => {
+const reset = async (options) => {
   const element = void 0;
-  create(element, element.parent, void 0, {
-    ignoreChildExtend: true,
-    ...registry.defaultOptions,
+  await create(element, element.parent, void 0, {
+    ignoreChildExtends: true,
+    ...OPTIONS.defaultOptions,
     ...OPTIONS.create,
     ...options
   });
 };
+const resetContent = async (params, element, opts) => {
+  var _a;
+  const contentElementKey = setContentKey(element, opts);
+  if ((_a = element[contentElementKey]) == null ? void 0 : _a.node) removeContent(element, opts);
+  const contentElem = await create(
+    params,
+    element,
+    contentElementKey || "content",
+    {
+      ignoreChildExtends: true,
+      ...OPTIONS.defaultOptions,
+      ...OPTIONS.create,
+      ...opts
+    }
+  );
+  if (contentElementKey !== "content") opts.contentElementKey = "content";
+  return contentElem;
+};
+const updateContent = async function(params, opts) {
+  const element = this;
+  const contentElementKey = setContentKey(element, opts);
+  if (!element[contentElementKey]) return;
+  if (element[contentElementKey].update) {
+    await element[contentElementKey].update(params, opts);
+  }
+};
+async function setContent(param, element, opts) {
+  const content = await execPromise(param, element);
+  if (content && element) {
+    set.call(element, content, opts);
+  }
+}
+const removeContent = function(el, opts = {}) {
+  var _a;
+  const element = el || this;
+  const contentElementKey = setContentKey(element, opts);
+  if (opts.contentElementKey !== "content") {
+    opts.contentElementKey = "content";
+  }
+  const content = element[contentElementKey];
+  if (!content) return;
+  if (content.tag === "fragment" && ((_a = content.__ref) == null ? void 0 : _a.__children)) {
+    content.__ref.__children.forEach((key) => {
+      const child = content[key];
+      if (child.node && child.node.parentNode) {
+        child.node.parentNode.removeChild(child.node);
+      }
+      if (isFunction(child.remove)) {
+        child.remove();
+      }
+    });
+  } else {
+    if (content.node && content.node.parentNode) {
+      content.node.parentNode.removeChild(content.node);
+    }
+    if (isFunction(content.remove)) {
+      content.remove();
+    }
+  }
+  delete element[contentElementKey];
+};
 const set = async function(params, options = {}, el) {
   var _a;
   const element = el || this;
   const { __ref: ref } = element;
-  const content = setContentKey(element, options);
+  const contentElementKey = setContentKey(element, options);
+  const content = element[contentElementKey];
   const __contentRef = content && content.__ref;
   const lazyLoad = element.props && element.props.lazyLoad;
-  const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-  if (options.preventContentUpdate === true && !hasCollection)
-    return;
-  if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && deepContains(params, content)) {
+  const hasChildren = element.children;
+  if (options.preventContentUpdate === true && !hasChildren) return;
+  const childHasChanged = !ref.__noChildrenDifference;
+  const childrenIsDifferentFromCache = childHasChanged && __contentRef && Object.keys(params).length === Object.keys(content).length && deepContains(params, content);
+  if ((content == null ? void 0 : content.update) && !childHasChanged && !childrenIsDifferentFromCache) {
     if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-      const beforeUpdateReturns = await triggerEventOnUpdate("beforeUpdate", params, element, options);
-      if (beforeUpdateReturns === false)
-        return element;
+      const beforeUpdateReturns = await triggerEventOnUpdate(
+        "beforeUpdate",
+        params,
+        element,
+        options
+      );
+      if (beforeUpdateReturns === false) return element;
     }
-    if (content == null ? void 0 : content.update)
-      content.update();
-    if (!options.preventUpdateListener)
+    await content.update(params);
+    if (!options.preventUpdateListener && !options.preventListeners) {
       await triggerEventOn("update", element, options);
+    }
     return;
   }
-  if (params) {
-    let { childExtend, props } = params;
-    if (!props)
-      props = params.props = {};
-    if (!childExtend && element.childExtend) {
-      params.childExtend = element.childExtend;
-      props.ignoreChildExtend = true;
+  if (!params) return element;
+  let { childExtends, props, tag } = params;
+  if (!props) props = params.props = {};
+  if (tag === "fragment") {
+    if (!childExtends && element.childExtends) {
+      params.childExtends = element.childExtends;
+      props.ignoreChildExtends = true;
     }
     if (!(props == null ? void 0 : props.childProps) && ((_a = element.props) == null ? void 0 : _a.childProps)) {
       props.childProps = element.props.childProps;
       props.ignoreChildProps = true;
     }
-    if (lazyLoad) {
-      window.requestAnimationFrame(async () => {
-        await resetElement(params, element, options);
-        if (!options.preventUpdateListener) {
-          triggerEventOn("lazyLoad", element, options);
-        }
-      });
-    } else
-      await resetElement(params, element, options);
   }
-  return element;
+  if (lazyLoad) {
+    window.requestAnimationFrame(async () => {
+      await resetContent(params, element, options);
+      if (!options.preventUpdateListener) {
+        await triggerEventOn("lazyLoad", element, options);
+      }
+    });
+  } else {
+    await resetContent(params, element, options);
+  }
 };
 var set_default = set;
 export {
   set_default as default,
+  removeContent,
   reset,
-  resetElement,
-  set
+  resetContent,
+  set,
+  setContent,
+  setContentKey,
+  updateContent
 };

package/dist/esm/update.js

@@ -8,81 +8,92 @@ import {
   isString,
   isUndefined,
   merge,
-  isVariant,
   overwriteDeep,
-  createSnapshotId,
-  deepClone
+  deepClone,
+  propertizeElement,
+  isMethod,
+  findInheritedState,
+  deepMerge,
+  OPTIONS,
+  updateProps,
+  captureSnapshot
 } from "@domql/utils";
 import { applyEvent, triggerEventOn, triggerEventOnUpdate } from "@domql/event";
-import { isMethod } from "./methods/index.js";
-import { updateProps } from "./props/index.js";
-import { createState, findInheritedState } from "@domql/state";
+import { createState } from "@domql/state";
 import { create } from "./create.js";
-import { throughExecProps, throughUpdatedDefine, throughUpdatedExec } from "./iterate.js";
+import {
+  throughExecProps,
+  throughUpdatedDefine,
+  throughUpdatedExec
+} from "./iterate.js";
 import { REGISTRY } from "./mixins/index.js";
 import { applyParam } from "./utils/applyParam.js";
-import { OPTIONS } from "./cache/options.js";
-import { METHODS_EXL, deepMerge } from "./utils/index.js";
-const snapshot = {
-  snapshotId: createSnapshotId
-};
+import { METHODS_EXL } from "./utils/index.js";
+import { setContent } from "./set.js";
+import setChildren from "./children.js";
 const UPDATE_DEFAULT_OPTIONS = {
   stackChanges: false,
   cleanExec: true,
   preventRecursive: false,
   currentSnapshot: false,
   calleeElement: false,
-  excludes: METHODS_EXL
+  exclude: METHODS_EXL
 };
 const update = async function(params = {}, opts) {
   const calleeElementCache = opts == null ? void 0 : opts.calleeElement;
-  const options = deepClone(isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS, { exclude: ["calleeElement"] });
+  const options = deepClone(
+    isObject(opts) ? deepMerge(opts, UPDATE_DEFAULT_OPTIONS) : UPDATE_DEFAULT_OPTIONS,
+    { exclude: ["calleeElement"] }
+  );
   options.calleeElement = calleeElementCache;
   const element = this;
-  const { parent, node, key } = element;
-  const { excludes, preventInheritAtCurrentState } = options;
   let ref = element.__ref;
-  if (!ref)
-    ref = element.__ref = {};
-  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options);
-  if (snapshotHasUpdated)
-    return;
-  if (!options.preventListeners)
+  if (!ref) ref = element.__ref = {};
+  const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(
+    element,
+    options
+  );
+  if (snapshotHasUpdated) return;
+  if (!options.preventListeners) {
     await triggerEventOnUpdate("startUpdate", params, element, options);
-  if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
+  }
+  const { parent, node, key } = element;
+  const { exclude, preventInheritAtCurrentState } = options;
+  if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element) {
     return;
-  if (!excludes)
-    merge(options, UPDATE_DEFAULT_OPTIONS);
+  }
+  if (!exclude) merge(options, UPDATE_DEFAULT_OPTIONS);
   if (isString(params) || isNumber(params)) {
     params = { text: params };
   }
+  params = propertizeElement(params);
   const inheritState = await inheritStateUpdates(element, options);
-  if (inheritState === false)
-    return;
-  const ifFails = checkIfOnUpdate(element, parent, options);
-  if (ifFails)
-    return;
+  if (inheritState === false) return;
+  const ifFails = await checkIfOnUpdate(element, parent, options);
+  if (ifFails) return;
   if (ref.__if && !options.preventPropsUpdate) {
     const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
-    const hasFunctionInProps = ref.__props.filter((v) => isFunction(v));
+    const hasFunctionInProps = ref.__propsStack.filter((v) => isFunction(v));
     const props = params.props || hasParentProps || hasFunctionInProps.length;
-    if (props)
-      updateProps(props, element, parent);
+    if (props) updateProps(props, element, parent);
   }
   if (!options.preventBeforeUpdateListener && !options.preventListeners) {
-    const beforeUpdateReturns = await triggerEventOnUpdate("beforeUpdate", params, element, options);
-    if (beforeUpdateReturns === false)
-      return element;
+    const beforeUpdateReturns = await triggerEventOnUpdate(
+      "beforeUpdate",
+      params,
+      element,
+      options
+    );
+    if (beforeUpdateReturns === false) return element;
   }
-  overwriteDeep(element, params, { exclude: METHODS_EXL });
+  overwriteDeep(element, params);
   throughExecProps(element);
   throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS });
   throughUpdatedDefine(element);
   if (!options.isForced && !options.preventListeners) {
-    triggerEventOn("beforeClassAssign", element, options);
+    await triggerEventOn("beforeClassAssign", element, options);
   }
-  if (!ref.__if)
-    return false;
+  if (!ref.__if) return false;
   if (!node) {
     return;
   }
@@ -97,78 +108,75 @@ const update = async function(params = {}, opts) {
     preventUpdateAfterCount
   } = options;
   if (preventUpdateAfter) {
-    if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount)
+    if (isNumber(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount) {
       return;
-    else if (options.preventUpdateAfterCount === void 0)
+    } else if (options.preventUpdateAfterCount === void 0) {
       options.preventUpdateAfterCount = 1;
-    else
-      options.preventUpdateAfterCount++;
+    } else options.preventUpdateAfterCount++;
   }
   for (const param in element) {
     const prop = element[param];
-    if (!Object.hasOwnProperty.call(element, param))
-      continue;
+    if (!Object.hasOwnProperty.call(element, param)) continue;
     const isInPreventUpdate = isArray(preventUpdate) && preventUpdate.includes(param);
     const isInPreventDefineUpdate = isArray(preventDefineUpdate) && preventDefineUpdate.includes(param);
-    const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-    if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param))
+    if (isUndefined(prop) || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || (preventStateUpdate && param) === "state" || isMethod(param, element) || isObject(REGISTRY[param])) {
       continue;
-    if (preventStateUpdate === "once")
-      options.preventStateUpdate = false;
-    const isElement = applyParam(param, element, options);
+    }
+    if (preventStateUpdate === "once") options.preventStateUpdate = false;
+    const isElement = await applyParam(param, element, options);
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       const canUpdate = isObject(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
-      if (!canUpdate)
-        continue;
+      if (!canUpdate) continue;
       const lazyLoad = element.props.lazyLoad || options.lazyLoad;
       if (options.onEachUpdate) {
         options.onEachUpdate(param, element, element.state, element.context);
       }
-      const childUpdateCall = () => update.call(prop, params[prop], {
+      const childUpdateCall = async () => await update.call(prop, params[prop], {
         ...options,
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
-      lazyLoad ? window.requestAnimationFrame(() => {
-        childUpdateCall();
-        if (!options.preventUpdateListener) {
-          triggerEventOn("lazyLoad", element, options);
-        }
-      }) : childUpdateCall();
+      if (lazyLoad) {
+        window.requestAnimationFrame(async () => {
+          await childUpdateCall();
+          if (!options.preventUpdateListener) {
+            await triggerEventOn("lazyLoad", element, options);
+          }
+        });
+      } else await childUpdateCall();
     }
   }
-  if (!preventUpdateListener)
-    triggerEventOn("update", element, options);
-};
-const captureSnapshot = (element, options) => {
-  const ref = element.__ref;
-  const { currentSnapshot, calleeElement } = options;
-  const isCallee = calleeElement === element;
-  if (!calleeElement || isCallee) {
-    const createdStanpshot = snapshot.snapshotId();
-    ref.__currentSnapshot = createdStanpshot;
-    return [createdStanpshot, element];
+  if (!preventContentUpdate) {
+    const children = params.children || element.children;
+    const content = children ? await setChildren(children, element, opts) : element.children || params.content;
+    if (content) {
+      await setContent(content, element, options);
+    }
   }
-  const snapshotOnCallee = calleeElement.__ref.__currentSnapshot;
-  if (currentSnapshot < snapshotOnCallee) {
-    return [snapshotOnCallee, calleeElement, true];
+  if (!preventUpdateListener) {
+    await triggerEventOn("update", element, options);
   }
-  return [snapshotOnCallee, calleeElement];
 };
-const checkIfOnUpdate = (element, parent, options) => {
+const checkIfOnUpdate = async (element, parent, options) => {
   var _a, _b, _c;
-  if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent)
+  if (!isFunction(element.if) && !isFunction((_a = element.props) == null ? void 0 : _a.if) || !parent) {
     return;
+  }
   const ref = element.__ref;
-  const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(element, element.state, element.context, options);
+  const ifPassed = (element.if || ((_b = element.props) == null ? void 0 : _b.if))(
+    element,
+    element.state,
+    element.context,
+    options
+  );
   const itWasFalse = ref.__if !== true;
   if (ifPassed) {
     ref.__if = true;
     if (itWasFalse) {
       delete element.__hash;
       delete element.__text;
-      delete element.extend;
+      delete element.extends;
       if (!ref.__hasRootState) {
         delete element.state;
       }
@@ -182,10 +190,11 @@ const checkIfOnUpdate = (element, parent, options) => {
         delete element.node;
       }
       const contentKey = ref.contentElementKey;
-      if (element.$collection || element.$stateCollection || element.$propsCollection) {
+      if (element.children) {
         element.removeContent();
-      } else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep)
+      } else if ((_c = element[contentKey]) == null ? void 0 : _c.parseDeep) {
         element[contentKey] = element[contentKey].parseDeep();
+      }
       const previousElement = element.previousElement();
       const previousNode = previousElement == null ? void 0 : previousElement.node;
       const hasPrevious = previousNode == null ? void 0 : previousNode.parentNode;
@@ -198,9 +207,19 @@ const checkIfOnUpdate = (element, parent, options) => {
       };
       delete element.__ref;
       delete element.parent;
-      const createdElement = create(element, parent, element.key, OPTIONS.create, attachOptions);
+      const createdElement = await create(
+        element,
+        parent,
+        element.key,
+        OPTIONS.create,
+        attachOptions
+      );
       if (options.preventUpdate !== true && element.on && isFunction(element.on.update)) {
-        applyEvent(element.on.update, createdElement, createdElement.state);
+        await applyEvent(
+          element.on.update,
+          createdElement,
+          createdElement.state
+        );
       }
       return createdElement;
     }
@@ -214,8 +233,7 @@ const inheritStateUpdates = async (element, options) => {
   const stateKey = ref.__state;
   const { parent, state } = element;
   const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
-  if (preventUpdateTriggerStateUpdate)
-    return;
+  if (preventUpdateTriggerStateUpdate) return;
   if (!stateKey && !ref.__hasRootState) {
     element.state = parent && parent.state || {};
     return;
@@ -223,29 +241,41 @@ const inheritStateUpdates = async (element, options) => {
   const shouldForceFunctionState = isFunction(stateKey) && !isHoisted && execStateFunction;
   if (shouldForceFunctionState) {
     const execState = exec(stateKey, element);
-    state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true });
+    state.set(execState, {
+      ...options,
+      preventUpdate: true,
+      preventStateUpdateListener: false,
+      updatedByStateFunction: true
+    });
     return;
   }
   const keyInParentState = findInheritedState(element, element.parent);
-  if (!keyInParentState || options.preventInheritedStateUpdate)
-    return;
+  if (!keyInParentState || options.preventInheritedStateUpdate) return;
   if (!options.preventBeforeStateUpdateListener && !options.preventListeners) {
-    const initStateReturns = await triggerEventOnUpdate("beforeStateUpdate", keyInParentState, element, options);
-    if (initStateReturns === false)
-      return element;
+    const initStateReturns = await triggerEventOnUpdate(
+      "beforeStateUpdate",
+      keyInParentState,
+      element,
+      options
+    );
+    if (initStateReturns === false) return element;
   }
-  const newState = createStateUpdate(element, parent, options);
+  const newState = await createStateUpdate(element, parent, options);
   if (!options.preventStateUpdateListener && !options.preventListeners) {
-    await triggerEventOnUpdate("stateUpdate", newState.parse(), element, options);
+    await triggerEventOnUpdate(
+      "stateUpdate",
+      newState.parse(),
+      element,
+      options
+    );
   }
 };
-const createStateUpdate = (element, parent, options) => {
+const createStateUpdate = async (element, parent, options) => {
   const __stateChildren = element.state.__children;
-  const newState = createState(element, parent);
+  const newState = await createState(element, parent);
   element.state = newState;
   for (const child in __stateChildren) {
-    if (newState[child])
-      newState.__children[child] = __stateChildren[child];
+    if (newState[child]) newState.__children[child] = __stateChildren[child];
     Object.getPrototypeOf(__stateChildren[child]).parent = newState;
   }
   return newState;

package/dist/esm/utils/applyParam.js

@@ -1,6 +1,6 @@
 import { isFunction } from "@domql/utils";
 import { REGISTRY } from "../mixins/index.js";
-const applyParam = (param, element, options) => {
+const applyParam = async (param, element, options) => {
   const { node, context, __ref: ref } = element;
   const prop = element[param];
   const { onlyUpdate } = options;
@@ -9,12 +9,11 @@ const applyParam = (param, element, options) => {
   const isGlobalTransformer = DOMQLPropertyFromContext || DOMQLProperty;
   const hasDefine = element.define && element.define[param];
   const hasContextDefine = context && context.define && context.define[param];
-  if (!ref.__if)
-    return;
+  if (!ref.__if) return;
   const hasOnlyUpdate = onlyUpdate ? onlyUpdate === param || element.lookup(onlyUpdate) : true;
   if (isGlobalTransformer && !hasContextDefine && hasOnlyUpdate) {
     if (isFunction(isGlobalTransformer)) {
-      isGlobalTransformer(prop, element, node, options);
+      await isGlobalTransformer(prop, element, node, options);
       return;
     }
   }

package/dist/esm/utils/index.js

@@ -1,3 +1,4 @@
-export * from "./object.js";
-export * from "./extendUtils.js";
-export * from "./component.js";
+const METHODS_EXL = [];
+export {
+  METHODS_EXL
+};

package/dist/esm/utils/onlyResolveExtends.js

@@ -1,36 +1,30 @@
-import { exec, isFunction, isObject, isUndefined } from "@domql/utils";
+import {
+  exec,
+  initProps,
+  isFunction,
+  isMethod,
+  isObject,
+  isUndefined
+} from "@domql/utils";
 import { create } from "..";
 import { REGISTRY } from "../mixins/index.js";
-import { applyVariant, isVariant } from ".";
-import { isMethod } from "../methods";
 import { addMethods } from "../methods/set";
 import { createState } from "@domql/state";
 import { detectTag } from "@domql/render";
-import { createProps } from "../props";
 import { throughInitialDefine, throughInitialExec } from "../iterate";
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref } = element;
   element.tag = detectTag(element);
   {
     const { __ref: ref2 } = element;
-    if (!ref2.__cached)
-      ref2.__cached = {};
-    if (!ref2.__defineCache)
-      ref2.__defineCache = {};
-    if (!ref2.__exec)
-      ref2.__exec = {};
-    if (!ref2.__execProps)
-      ref2.__execProps = {};
-    if (!ref2.__class)
-      ref2.__class = {};
-    if (!ref2.__classNames)
-      ref2.__classNames = {};
-    if (!ref2.__attr)
-      ref2.__attr = {};
-    if (!ref2.__changes)
-      ref2.__changes = [];
-    if (!ref2.__children)
-      ref2.__children = [];
+    if (!ref2.__defineCache) ref2.__defineCache = {};
+    if (!ref2.__exec) ref2.__exec = {};
+    if (!ref2.__execProps) ref2.__execProps = {};
+    if (!ref2.__class) ref2.__class = {};
+    if (!ref2.__classNames) ref2.__classNames = {};
+    if (!ref2.__attr) ref2.__attr = {};
+    if (!ref2.__changes) ref2.__changes = [];
+    if (!ref2.__children) ref2.__children = [];
   }
   addMethods(element, parent, options);
   createState(element, parent);
@@ -39,22 +33,20 @@ const onlyResolveExtends = (element, parent, key, options) => {
     const ifPassed = element.if(element, element.state, element.context);
     if (!ifPassed) {
       delete ref.__if;
-    } else
-      ref.__if = true;
-  } else
-    ref.__if = true;
+    } else ref.__if = true;
+  } else ref.__if = true;
   if (element.node && ref.__if) {
     parent[key || element.key] = element;
   }
-  createProps(element, parent, options);
-  applyVariant(element, parent);
+  initProps(element, parent, options);
   if (element.tag !== "string" && element.tag !== "fragment") {
     throughInitialDefine(element);
     throughInitialExec(element);
     for (const param in element) {
       const prop = element[param];
-      if (isUndefined(prop) || isMethod(param, element) || isObject(REGISTRY[param]) || isVariant(param))
+      if (isUndefined(prop) || isMethod(param, element) || isObject(REGISTRY[param])) {
         continue;
+      }
       const hasDefine = element.define && element.define[param];
       const contextHasDefine = element.context && element.context.define && element.context.define[param];
       const optionsHasDefine = options.define && options.define[param];
@@ -72,8 +64,7 @@ const onlyResolveExtends = (element, parent, key, options) => {
     delete element.props.update;
     delete element.props.__element;
   }
-  if (!options.keepRef)
-    delete element.__ref;
+  if (!options.keepRef) delete element.__ref;
   return element;
 };
 export {