lithent 1.2.2 → 1.2.3

package/dist/lithent.mjs

@@ -1,24 +1,64 @@
-const k = (e) => typeof e == "object" && !("resolve" in e), x = (e, t) => k(e) && e.type === t, pe = (e, t) => "ctor" in e ? e.ctor === (t == null ? void 0 : t.ctor) : e === (t == null ? void 0 : t.ctor), he = (e, t) => {
-  var s, c;
-  return k(e) && (t == null ? void 0 : t.type) === "fragment" && ((s = t == null ? void 0 : t.children) == null ? void 0 : s.length) === ((c = e == null ? void 0 : e.children) == null ? void 0 : c.length);
-}, ie = (e, t) => {
-  var s, c;
-  return k(e) && (t == null ? void 0 : t.type) === "element" && (t == null ? void 0 : t.tag) === e.tag && ((s = t == null ? void 0 : t.children) == null ? void 0 : s.length) === ((c = e == null ? void 0 : e.children) == null ? void 0 : c.length);
-}, U = (e, t) => k(e) && (t == null ? void 0 : t.type) === e.type && (e.type !== "loop" || e.type === "loop" && C(i((e.children || [])[0])) && C(i((t.children || [])[0]))), i = (e) => {
-  var t, s;
-  return ((t = e == null ? void 0 : e.compProps) == null ? void 0 : t.key) ?? ((s = e == null ? void 0 : e.props) == null ? void 0 : s.key);
-}, y = (e) => e && ["fragment", "loop"].includes(e), T = (e) => typeof e == "function" && !H(e) || typeof e == "object" && "resolve" in e, H = (e) => typeof e == "function" && e === re, J = (e) => k(e) && !e.type, C = (e) => e != null, z = (e, t) => e === "style" && typeof t == "object", ve = (e, t) => e === "ref" && typeof t == "object", ye = (e) => e.nodeType === 1 && e.tagName === "OPTION", Ce = (e) => e.nodeType === 1 && e.tagName === "TEXTAREA", ae = (e) => e.nodeType === 1 && ["radio", "checkbox"].includes(e.type), ke = (e) => {
-  let t = "et";
-  return T(e) ? t = "c" : x(e, "fragment") ? t = "f" : x(e, "element") ? t = "e" : x(e, "loop") ? t = "l" : x(e, "text") ? t = "t" : J(e) && (t = "et"), t;
-}, Re = {
-  c: pe,
-  l: U,
-  t: U,
-  e: ie,
-  f: he,
-  et: U
-}, p = (e) => e.getParent && e.getParent(), a = Object.entries, Y = Object.keys, S = Object.assign, v = { value: "" }, R = { value: {} }, A = { value: !1 }, u = /* @__PURE__ */ new WeakMap(), Ee = (e) => {
-  u.set(e, {
+const checkPlainWDomType = (wDom) => typeof wDom === "object" && !("resolve" in wDom);
+const checkPlainType = (wDom, typeName) => checkPlainWDomType(wDom) && wDom.type === typeName;
+const checkSameCustomComponent = (newWDom, originalWDom) => "ctor" in newWDom ? newWDom.ctor === (originalWDom == null ? void 0 : originalWDom.ctor) : newWDom === (originalWDom == null ? void 0 : originalWDom.ctor);
+const checkSameFragment = (newWDom, originalWDom) => {
+  var _a, _b;
+  return checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === "fragment" && ((_a = originalWDom == null ? void 0 : originalWDom.children) == null ? void 0 : _a.length) === ((_b = newWDom == null ? void 0 : newWDom.children) == null ? void 0 : _b.length);
+};
+const checkSameTagElement = (newWDom, originalWDom) => {
+  var _a, _b;
+  return checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === "element" && (originalWDom == null ? void 0 : originalWDom.tag) === newWDom.tag && ((_a = originalWDom == null ? void 0 : originalWDom.children) == null ? void 0 : _a.length) === ((_b = newWDom == null ? void 0 : newWDom.children) == null ? void 0 : _b.length);
+};
+const checkNormalTypeElement = (newWDom, originalWDom) => checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === newWDom.type && (newWDom.type !== "loop" || newWDom.type === "loop" && checkExisty(getKey((newWDom.children || [])[0])) && checkExisty(getKey((originalWDom.children || [])[0])));
+const getKey = (target) => {
+  var _a, _b;
+  return ((_a = target == null ? void 0 : target.compProps) == null ? void 0 : _a.key) ?? ((_b = target == null ? void 0 : target.props) == null ? void 0 : _b.key);
+};
+const checkVirtualType = (type) => type && ["fragment", "loop"].includes(type);
+const checkCustemComponentFunction = (target) => typeof target === "function" && !checkFragmentFunction(target) || typeof target === "object" && "resolve" in target;
+const checkFragmentFunction = (target) => typeof target === "function" && target === Fragment;
+const checkEmptyElement = (wDom) => checkPlainWDomType(wDom) && !wDom.type;
+const checkExisty = (value) => value !== null && value !== void 0;
+const checkStyleData = (dataKey, dataValue) => dataKey === "style" && typeof dataValue === "object";
+const checkRefData = (dataKey, dataValue) => dataKey === "ref" && typeof dataValue === "object";
+const checkOptionElement = (element) => element.nodeType === 1 && element.tagName === "OPTION";
+const checkTextareaElement = (element) => element.nodeType === 1 && element.tagName === "TEXTAREA";
+const checkCheckableElement = (element) => element.nodeType === 1 && ["radio", "checkbox"].includes(element.type);
+const getWDomType = (wDom) => {
+  let result = "et";
+  if (checkCustemComponentFunction(wDom)) {
+    result = "c";
+  } else if (checkPlainType(wDom, "fragment")) {
+    result = "f";
+  } else if (checkPlainType(wDom, "element")) {
+    result = "e";
+  } else if (checkPlainType(wDom, "loop")) {
+    result = "l";
+  } else if (checkPlainType(wDom, "text")) {
+    result = "t";
+  } else if (checkEmptyElement(wDom)) {
+    result = "et";
+  }
+  return result;
+};
+const checkSameWDomWithOriginal = {
+  c: checkSameCustomComponent,
+  l: checkNormalTypeElement,
+  t: checkNormalTypeElement,
+  e: checkSameTagElement,
+  f: checkSameFragment,
+  et: checkNormalTypeElement
+};
+const getParent = (vDom) => vDom.getParent && vDom.getParent();
+const entries = Object.entries;
+const keys = Object.keys;
+const assign = Object.assign;
+const xmlnsRef = { value: "" };
+const compKeyRef = { value: {} };
+const needDiffRef = { value: false };
+const componentRef = /* @__PURE__ */ new WeakMap();
+const setComponetRef = (compKey) => {
+  componentRef.set(compKey, {
     vd: { value: null },
     up: () => {
     },
@@ -29,377 +69,770 @@ const k = (e) => typeof e == "object" && !("resolve" in e), x = (e, t) => k(e) &
     mts: [],
     umts: []
   });
-}, E = () => R.value, Z = (e, t) => u.get(e)[t], xe = (e) => R.value = e, Pe = (e) => {
-  R.value = e, Ee(e);
-}, Te = (e) => {
-  u.get(E()).umts.push(e);
-}, Q = (e) => {
-  const { compKey: t } = e;
-  t && Se(t), K(e);
-}, K = (e) => {
-  (e.children || []).forEach((t) => {
-    t.compKey ? Q(t) : K(t);
+};
+const getComponentKey = () => compKeyRef.value;
+const getComponentSubInfo = (compKey, subKey) => componentRef.get(compKey)[subKey];
+const initUpdateHookState = (compKey) => compKeyRef.value = compKey;
+const initMountHookState = (compKey) => {
+  compKeyRef.value = compKey;
+  setComponetRef(compKey);
+};
+const unmount = (effectAction) => {
+  componentRef.get(getComponentKey()).umts.push(effectAction);
+};
+const runUnmountQueueFromWDom = (newWDom) => {
+  const { compKey } = newWDom;
+  if (compKey) {
+    removeItem(compKey);
+  }
+  recursiveRunUnmount(newWDom);
+};
+const recursiveRunUnmount = (wDom) => {
+  (wDom.children || []).forEach((item) => {
+    const childComKey = item.compKey;
+    if (childComKey) {
+      runUnmountQueueFromWDom(item);
+    } else {
+      recursiveRunUnmount(item);
+    }
   });
-}, Se = (e) => {
-  const t = u.get(e);
-  t && (t.umts.forEach((s) => s()), t.umts = [], u.delete(e));
-};
-let O = [];
-const B = () => {
-  O.forEach((e) => be(e)), O = [];
-}, Ne = (e) => {
-  e.compKey && O.push(e);
-}, rt = (e) => u.get(E()).mts.push(e), be = (e) => {
-  const { compKey: t } = e;
-  if (t) {
-    const s = u.get(t), c = s == null ? void 0 : s.mts, n = s == null ? void 0 : s.upS;
-    R.value = t, n && (n.value = 0), c && (s.mts = [], c.forEach((r) => {
-      const o = r();
-      o && Te(o);
-    }));
-  }
-}, G = (e, t = () => []) => {
-  const s = u.get(E()), { upD: c, upS: n } = s, r = c[n.value];
-  if (r && Ue(r, t())) {
-    const o = e();
-    o && s.upCB.push(o);
-  }
-  c[n.value] = t(), n.value += 1;
-}, Fe = (e) => {
-  const { compKey: t } = e;
-  if (t) {
-    const s = u.get(t), c = s == null ? void 0 : s.upCB, n = s == null ? void 0 : s.upS;
-    R.value = t, n && (n.value = 0), e.ctor && c && (s.upCB = [], c.forEach((r) => r()));
-  }
-}, Ue = (e, t) => e.length ? e.some((s, c) => s !== t[c]) : !0, X = (e) => e === "className" ? "class" : e, V = (e) => e.replace(/^on(.*)/, (t, s) => s.toLowerCase()), g = () => new DocumentFragment(), $ = (e) => document.createElement(e), ot = (e, t, s) => {
-  t ?? (t = document.body), e.isRoot = !0, e.wrapElement = t;
-  const c = N(e);
-  return s ? (e.afterElement = s, t.insertBefore(c, s)) : t.appendChild(c), B(), () => {
-    var r;
-    const n = (r = u.get(e.compProps || {})) == null ? void 0 : r.vd.value;
-    n && (Q(n), I(n), Ae(n));
+};
+const removeItem = (compKey) => {
+  const subInfo = componentRef.get(compKey);
+  if (subInfo) {
+    subInfo.umts.forEach((effect) => effect());
+    subInfo.umts = [];
+    componentRef.delete(compKey);
+  }
+};
+let mountedQueue = [];
+const execMountedQueue = () => {
+  mountedQueue.forEach((item) => runMountedQueueFromWDom(item));
+  mountedQueue = [];
+};
+const addMountedQueue = (wDom) => {
+  if (wDom.compKey) {
+    mountedQueue.push(wDom);
+  }
+};
+const mountCallback = (effectAction) => componentRef.get(getComponentKey()).mts.push(effectAction);
+const runMountedQueueFromWDom = (newWDom) => {
+  const { compKey } = newWDom;
+  if (compKey) {
+    const component = componentRef.get(compKey);
+    const queue = component == null ? void 0 : component.mts;
+    const sequence = component == null ? void 0 : component.upS;
+    compKeyRef.value = compKey;
+    if (sequence) {
+      sequence.value = 0;
+    }
+    if (queue) {
+      component.mts = [];
+      queue.forEach((effect) => {
+        const callback = effect();
+        if (callback) {
+          unmount(callback);
+        }
+      });
+    }
+  }
+};
+const useUpdated = (effectAction, dependencies = () => []) => {
+  const component = componentRef.get(getComponentKey());
+  const { upD, upS } = component;
+  const def = upD[upS.value];
+  if (def && checkNeedPushQueue(def, dependencies())) {
+    const callback = effectAction();
+    if (callback) {
+      component.upCB.push(callback);
+    }
+  }
+  upD[upS.value] = dependencies();
+  upS.value += 1;
+};
+const runUpdatedQueueFromWDom = (newWDom) => {
+  const { compKey } = newWDom;
+  if (compKey) {
+    const component = componentRef.get(compKey);
+    const queue = component == null ? void 0 : component.upCB;
+    const sequence = component == null ? void 0 : component.upS;
+    compKeyRef.value = compKey;
+    if (sequence) {
+      sequence.value = 0;
+    }
+    if (newWDom.ctor && queue) {
+      component.upCB = [];
+      queue.forEach((effect) => effect());
+    }
+  }
+};
+const checkNeedPushQueue = (originalDefs, newDefs) => !originalDefs.length ? true : originalDefs.some((def, index) => def !== newDefs[index]);
+const getAttrKey = (keyName) => keyName === "className" ? "class" : keyName;
+const getEventName = (eventKey) => eventKey.replace(/^on(.*)/, (_match, p1) => p1.toLowerCase());
+const DF = () => new DocumentFragment();
+const CE = (t) => document.createElement(t);
+const render = (wDom, wrapElement, afterElement) => {
+  wrapElement ?? (wrapElement = document.body);
+  wDom.isRoot = true;
+  wDom.wrapElement = wrapElement;
+  const Dom = wDomToDom(wDom);
+  if (afterElement) {
+    wDom.afterElement = afterElement;
+    wrapElement.insertBefore(Dom, afterElement);
+  } else {
+    wrapElement.appendChild(Dom);
+  }
+  execMountedQueue();
+  return () => {
+    var _a;
+    const component = (_a = componentRef.get(wDom.compProps || {})) == null ? void 0 : _a.vd.value;
+    if (component) {
+      runUnmountQueueFromWDom(component);
+      recursiveRemoveEvent(component);
+      rootDelete(component);
+    }
   };
-}, m = (e) => {
-  const { needRerender: t } = e;
-  t && t !== "N" && {
-    A: q,
-    D: j,
-    R: Le,
-    U: Me,
-    SR: D,
-    SU: Oe
-  }[t](e);
-}, I = (e) => {
-  e.props && e.el && te(e.props, e.el), (e.children || []).forEach((t) => {
-    I(t);
+};
+const wDomUpdate = (newWDomTree) => {
+  const { needRerender } = newWDomTree;
+  if (needRerender && needRerender !== "N") {
+    ({
+      A: typeAdd,
+      D: typeDelete,
+      R: typeReplace,
+      U: typeUpdate,
+      SR: typeSortedReplace,
+      SU: typeSortedUpdate
+    })[needRerender](newWDomTree);
+    delete newWDomTree.needRerender;
+  }
+};
+const recursiveRemoveEvent = (originalWDom) => {
+  if (originalWDom.props && originalWDom.el) {
+    removeEvent(originalWDom.props, originalWDom.el);
+  }
+  (originalWDom.children || []).forEach((childItem) => {
+    recursiveRemoveEvent(childItem);
   });
-}, Ae = (e) => {
-  w(e, e.wrapElement);
-}, j = (e) => {
-  e.oldProps && e.el && te(e.oldProps, e.el), w(
-    e,
-    b(p(e))
+};
+const rootDelete = (newWDom) => {
+  deleteRealDom(newWDom, newWDom.wrapElement);
+};
+const typeDelete = (newWDom) => {
+  if (newWDom.oldProps && newWDom.el) {
+    removeEvent(newWDom.oldProps, newWDom.el);
+  }
+  deleteRealDom(
+    newWDom,
+    findRealParentElement(getParent(newWDom))
   );
-}, w = (e, t) => {
-  var s, c;
-  t && e.el && (((s = e.el) == null ? void 0 : s.nodeType) === 1 ? t.removeChild(e.el) : ((c = e.el) == null ? void 0 : c.nodeType) === 11 && W(e, t), delete e.el);
-}, W = (e, t) => {
-  ((e == null ? void 0 : e.oldChildren) || (e == null ? void 0 : e.children) || []).forEach((s) => {
-    var c, n;
-    ((c = s.el) == null ? void 0 : c.nodeType) === 1 ? t.removeChild(s == null ? void 0 : s.el) : ((n = s.el) == null ? void 0 : n.nodeType) === 11 && W(s, t);
+};
+const deleteRealDom = (newWDom, parent) => {
+  var _a, _b;
+  if (parent && newWDom.el) {
+    if (((_a = newWDom.el) == null ? void 0 : _a.nodeType) === 1) {
+      parent.removeChild(newWDom.el);
+    } else if (((_b = newWDom.el) == null ? void 0 : _b.nodeType) === 11) {
+      findChildWithRemoveElement(newWDom, parent);
+    }
+    delete newWDom.el;
+  }
+};
+const findChildWithRemoveElement = (newWDom, parent) => {
+  ((newWDom == null ? void 0 : newWDom.oldChildren) || (newWDom == null ? void 0 : newWDom.children) || []).forEach((item) => {
+    var _a, _b;
+    if (((_a = item.el) == null ? void 0 : _a.nodeType) === 1) {
+      parent.removeChild(item == null ? void 0 : item.el);
+    } else if (((_b = item.el) == null ? void 0 : _b.nodeType) === 11) {
+      findChildWithRemoveElement(item, parent);
+    }
   });
-}, D = (e) => {
-  j(e), q(e);
-}, Oe = (e) => {
-  j(e), q(e, e.el);
-}, q = (e, t) => {
-  t || (t = N(e));
-  const s = p(e);
-  if (s.type) {
-    const c = b(s), r = s.type === "loop" ? L(s, p(s)) : L(e, s);
-    t && c && (r ? c.insertBefore(t, r) : c.appendChild(t), B());
-  }
-}, L = (e, t) => {
-  const s = t.children || [], n = s.indexOf(e) + 1, r = s.slice(n), o = ee(r), l = t.type || "";
-  if (o)
-    return o;
-  if (!t.isRoot && y(l))
-    return L(t, p(t));
-  if (t.isRoot && y(l) && t.afterElement)
-    return t.afterElement;
-}, ee = (e) => e.reduce(
-  (t, s) => {
-    const c = s.type, n = s.el, r = c && y(c);
-    return t || (r ? ee(s.children || []) : n && n.nodeType !== 11 ? n : t);
+};
+const typeSortedReplace = (newWDom) => {
+  typeDelete(newWDom);
+  typeAdd(newWDom);
+};
+const typeSortedUpdate = (newWDom) => {
+  typeDelete(newWDom);
+  typeAdd(newWDom, newWDom.el);
+};
+const typeAdd = (newWDom, newElement) => {
+  if (!newElement) {
+    newElement = wDomToDom(newWDom);
+  }
+  const parentWDom = getParent(newWDom);
+  if (parentWDom.type) {
+    const parentEl = findRealParentElement(parentWDom);
+    const isLoop = parentWDom.type === "loop";
+    const nextEl = isLoop && parentWDom.needRerender ? startFindNextBrotherElement(parentWDom, getParent(parentWDom)) : startFindNextBrotherElement(newWDom, parentWDom);
+    if (newElement && parentEl) {
+      if (nextEl) {
+        parentEl.insertBefore(newElement, nextEl);
+      } else {
+        parentEl.appendChild(newElement);
+      }
+      execMountedQueue();
+    }
+  }
+};
+const startFindNextBrotherElement = (wDom, parentWDom) => {
+  const brothers = parentWDom.children || [];
+  const index = brothers.indexOf(wDom);
+  const nextIndex = index + 1;
+  const candidiateBrothers = brothers.slice(nextIndex);
+  const finedNextEl = findChildFragmentNextElement(candidiateBrothers);
+  const parentType = parentWDom.type || "";
+  if (finedNextEl) {
+    return finedNextEl;
+  }
+  if (!parentWDom.isRoot && checkVirtualType(parentType)) {
+    return startFindNextBrotherElement(parentWDom, getParent(parentWDom));
+  } else if (parentWDom.isRoot && checkVirtualType(parentType) && parentWDom.afterElement) {
+    return parentWDom.afterElement;
+  }
+  return void 0;
+};
+const findChildFragmentNextElement = (candidiateBrothers) => candidiateBrothers.reduce(
+  (targetEl, bItem) => {
+    const type = bItem.type;
+    const el = bItem.el;
+    const isFragment = type && checkVirtualType(type);
+    if (targetEl) {
+      return targetEl;
+    } else if (isFragment) {
+      return findChildFragmentNextElement(bItem.children || []);
+    } else if (el && el.nodeType !== 11) {
+      return el;
+    }
+    return targetEl;
   },
   void 0
-), Le = (e) => {
-  const t = p(e), s = e.el;
-  if (t.type && s)
-    if (s.nodeType === 11)
-      D(e);
-    else {
-      const c = b(t), n = N(e);
-      c && c.replaceChild(n, s), B();
+);
+const typeReplace = (newWDom) => {
+  const parentWDom = getParent(newWDom);
+  const orignalElement = newWDom.el;
+  if (parentWDom.type && orignalElement) {
+    if (orignalElement.nodeType === 11) {
+      typeSortedReplace(newWDom);
+    } else {
+      const parentElement = findRealParentElement(parentWDom);
+      const newElement = wDomToDom(newWDom);
+      if (parentElement) {
+        parentElement.replaceChild(newElement, orignalElement);
+      }
+      execMountedQueue();
+    }
+  }
+};
+const removeEvent = (oldProps, element) => {
+  entries(oldProps || {}).forEach(([dataKey, dataValue]) => {
+    if (dataKey.match(/^on/)) {
+      element.removeEventListener(
+        getEventName(dataKey),
+        dataValue
+      );
     }
-}, te = (e, t) => {
-  a(e || {}).forEach(([s, c]) => {
-    s.match(/^on/) && t.removeEventListener(
-      V(s),
-      c
-    );
   });
-}, Me = (e) => {
-  var s;
-  const t = e.el;
-  if (e.type === "text") {
-    Qe(e);
+};
+const typeUpdate = (newWDom) => {
+  var _a;
+  const element = newWDom.el;
+  if (newWDom.type === "text") {
+    updateText(newWDom);
     return;
   }
-  if (t) {
-    const { oldProps: c, props: n } = e;
-    se(n, t, c), delete e.oldProps, e.tag === "input" && (t.value = String(((s = e == null ? void 0 : e.props) == null ? void 0 : s.value) || ""));
-  }
-  (e.children || []).forEach((c) => m(c)), Fe(e);
-}, Qe = (e) => {
-  const t = e.el;
-  t && (t.nodeValue = String(e.text));
-}, se = (e, t, s) => {
-  const c = { ...s };
-  a(e || {}).forEach(([n, r]) => {
-    let o = !0;
-    n === "key" || (n === "innerHTML" && typeof r == "string" ? t.innerHTML = r : z(n, r) ? qe(
-      r,
-      z(n, c.style) ? c.style : {},
-      t
-    ) : ve(n, r) ? r.value = t : n.match(/^on/) ? je(
-      t,
-      n,
-      r,
-      c[n]
-    ) : ae(t) && n === "checked" ? t.checked = !!r : Ce(t) && n === "value" ? t.value = r : ye(t) && n === "selected" ? t.selected = !!r : n && ([o, r] = Be(r), o && (v.value && n !== "xmlns" ? t.setAttributeNS(
-      null,
-      X(n),
-      r
-    ) : t.setAttribute(
-      X(n),
-      r
-    )))), o && delete c[n];
-  }), Y(c).forEach(
-    (n) => t.removeAttribute(n)
+  if (element) {
+    const { oldProps, props } = newWDom;
+    updateProps$1(props, element, oldProps);
+    delete newWDom.oldProps;
+    if (newWDom.tag === "input") {
+      element.value = String(((_a = newWDom == null ? void 0 : newWDom.props) == null ? void 0 : _a.value) || "");
+    }
+  }
+  (newWDom.children || []).forEach((childItem) => wDomUpdate(childItem));
+  runUpdatedQueueFromWDom(newWDom);
+};
+const updateText = (newWDom) => {
+  const element = newWDom.el;
+  if (element) {
+    element.nodeValue = String(newWDom.text);
+  }
+};
+const updateProps$1 = (props, element, oldProps) => {
+  const originalProps = { ...oldProps };
+  entries(props || {}).forEach(([dataKey, dataValue]) => {
+    let chkRemoveProp = true;
+    if (dataKey === "key")
+      ;
+    else if (dataKey === "innerHTML" && typeof dataValue === "string") {
+      element.innerHTML = dataValue;
+    } else if (checkStyleData(dataKey, dataValue)) {
+      updateStyle(
+        dataValue,
+        checkStyleData(dataKey, originalProps.style) ? originalProps.style : {},
+        element
+      );
+    } else if (checkRefData(dataKey, dataValue)) {
+      dataValue.value = element;
+    } else if (dataKey.match(/^on/)) {
+      updateEvent(
+        element,
+        dataKey,
+        dataValue,
+        originalProps[dataKey]
+      );
+    } else if (checkCheckableElement(element) && dataKey === "checked") {
+      element.checked = !!dataValue;
+    } else if (checkTextareaElement(element) && dataKey === "value") {
+      element.value = dataValue;
+    } else if (checkOptionElement(element) && dataKey === "selected") {
+      element.selected = !!dataValue;
+    } else if (dataKey) {
+      [chkRemoveProp, dataValue] = makeAttrDataValue(dataValue);
+      if (chkRemoveProp) {
+        if (xmlnsRef.value && dataKey !== "xmlns") {
+          element.setAttributeNS(
+            null,
+            getAttrKey(dataKey),
+            dataValue
+          );
+        } else {
+          element.setAttribute(
+            getAttrKey(dataKey),
+            dataValue
+          );
+        }
+      }
+    }
+    if (chkRemoveProp) {
+      delete originalProps[dataKey];
+    }
+  });
+  keys(originalProps).forEach(
+    (dataKey) => element.removeAttribute(dataKey)
   );
-}, Be = (e) => {
-  let t = !0;
-  return typeof e == "boolean" && (e || (t = !1), e = ""), [t, String(e)];
-}, N = (e) => {
-  let t;
-  const { type: s, tag: c, text: n, props: r, children: o = [] } = e, l = y(s);
-  return c === "svg" && (v.value = String(r == null ? void 0 : r.xmlns)), l ? t = g() : s === "element" && c ? t = v.value ? document.createElementNS(v.value, c) : $(c) : s === "text" && C(n) ? t = document.createTextNode(String(n)) : t = $("e"), Ie(o, t), se(r, t), e.el = t, Ne(e), c === "svg" && (v.value = ""), t;
-}, Ie = (e, t) => {
-  const s = e.reduce(
-    (c, n) => (n.type && c.appendChild(N(n)), c),
-    g()
+};
+const makeAttrDataValue = (dataValue) => {
+  let allowSetAttr = true;
+  if (typeof dataValue === "boolean") {
+    if (!dataValue) {
+      allowSetAttr = false;
+    }
+    dataValue = "";
+  }
+  return [allowSetAttr, String(dataValue)];
+};
+const wDomToDom = (wDom) => {
+  let element;
+  const { type, tag, text, props, children = [] } = wDom;
+  const isVirtualType = checkVirtualType(type);
+  if (tag === "svg") {
+    xmlnsRef.value = String(props == null ? void 0 : props.xmlns);
+  }
+  if (isVirtualType) {
+    element = DF();
+  } else if (type === "element" && tag) {
+    element = xmlnsRef.value ? document.createElementNS(xmlnsRef.value, tag) : CE(tag);
+  } else if (type === "text" && checkExisty(text)) {
+    element = document.createTextNode(String(text));
+  } else {
+    element = CE("e");
+  }
+  wDomChildrenToDom(children, element);
+  updateProps$1(props, element);
+  wDom.el = element;
+  addMountedQueue(wDom);
+  if (tag === "svg") {
+    xmlnsRef.value = "";
+  }
+  return element;
+};
+const wDomChildrenToDom = (children, parentElement) => {
+  const elementChildren = children.reduce(
+    (acc, childItem) => {
+      if (childItem.type) {
+        acc.appendChild(wDomToDom(childItem));
+      }
+      return acc;
+    },
+    DF()
   );
-  t && s.hasChildNodes() && t.appendChild(s);
-}, je = (e, t, s, c) => {
-  const n = V(t);
-  c !== s && (c && e.removeEventListener(n, c), s && e.addEventListener(n, s));
-}, qe = (e, t, s) => {
-  const c = { ...t }, n = s == null ? void 0 : s.style;
-  n && (a(e).forEach(([r, o]) => {
-    n[r] = o, delete c[r];
-  }), a(c).forEach(
-    ([r]) => n[r] = ""
-  ));
-}, b = (e) => {
-  const t = y(e.type);
-  return e.isRoot && t ? e.wrapElement : t ? b(p(e)) : e.el;
-}, F = (e, t) => _e(
-  e,
-  Re[ke(e)](e, t),
-  t
-), _e = (e, t, s) => {
-  const c = Je(e, t, s), n = [
-    c,
-    t,
-    s
-  ], r = Ge(...n);
-  return c.children = Ye(...n), c.needRerender = r, ze(c, s, r), c;
-}, ze = (e, t, s) => {
-  s !== "A" && t && (e.el = t.el), s && ["D", "R", "SR"].includes(s) && (t != null && t.compKey && (Q(t), I(t)), e.oldChildren = t == null ? void 0 : t.children), e.oldProps = t == null ? void 0 : t.props;
-}, Ge = (e, t, s) => {
-  const c = s && s.type, n = J(e), o = !!e.getParent && p(e).type, l = i(e), h = o === "loop" && C(l), d = e.type === "text" && t && e.text === (s == null ? void 0 : s.text);
-  let f;
-  return n ? f = "D" : d ? f = "N" : c ? t ? f = h ? "SU" : "U" : f = h ? "SR" : "R" : f = "A", f;
-}, Xe = (e, t) => {
-  e && t !== e && (Y(e).forEach((s) => delete e[s]), a(t || {}).forEach(([s, c]) => e[s] = c));
-}, $e = (e, t) => {
-  e && t !== e && (e.splice(0, e.length), t && t.forEach((s) => e.push(s)));
-}, He = (e, t) => {
-  const { compProps: s, compChild: c } = e, { props: n, children: r } = t;
-  return s && Xe(s, n), c && $e(c, r), e.reRender && e.reRender();
-}, Je = (e, t, s) => T(e) ? t && s ? He(s, e) : e.resolve() : e, Ye = (e, t, s) => t && s ? Ke(e, s) : Ze(e), Ze = (e) => (e.children || []).map(
-  (t) => S(F(t), { getParent: () => e })
-), Ke = (e, t) => e.type === "loop" && C(i((e.children || [])[0])) ? Ve(e, t) : (e.children || []).map(
-  (s, c) => S(F(s, (t.children || [])[c]), {
-    getParent: () => e
+  if (parentElement && elementChildren.hasChildNodes()) {
+    parentElement.appendChild(elementChildren);
+  }
+};
+const updateEvent = (element, eventKey, newEventHandler, oldEventHandler) => {
+  const eventName = getEventName(eventKey);
+  if (oldEventHandler !== newEventHandler) {
+    if (oldEventHandler) {
+      element.removeEventListener(eventName, oldEventHandler);
+    }
+    if (newEventHandler) {
+      element.addEventListener(eventName, newEventHandler);
+    }
+  }
+};
+const updateStyle = (style, oldStyle, element) => {
+  const originalStyle = { ...oldStyle };
+  const elementStyle = element == null ? void 0 : element.style;
+  if (elementStyle) {
+    entries(style).forEach(([styleKey, dataValue]) => {
+      elementStyle[styleKey] = dataValue;
+      delete originalStyle[styleKey];
+    });
+    entries(originalStyle).forEach(
+      ([styleKey]) => elementStyle[styleKey] = ""
+    );
+  }
+};
+const findRealParentElement = (vDom) => {
+  const isVirtualType = checkVirtualType(vDom.type);
+  if (vDom.isRoot && isVirtualType) {
+    return vDom.wrapElement;
+  }
+  if (!isVirtualType) {
+    return vDom.el;
+  }
+  return findRealParentElement(getParent(vDom));
+};
+const makeNewWDomTree = (newWDom, originalWDom) => remakeNewWDom(
+  newWDom,
+  checkSameWDomWithOriginal[getWDomType(newWDom)](newWDom, originalWDom),
+  originalWDom
+);
+const remakeNewWDom = (newWDom, isSameType, originalWDom) => {
+  const remakeWDom = generalize(newWDom, isSameType, originalWDom);
+  const param = [
+    remakeWDom,
+    isSameType,
+    originalWDom
+  ];
+  const needRerender = addReRenderTypeProperty(...param);
+  remakeWDom.children = remakeChildrenForDiff(...param);
+  remakeWDom.needRerender = needRerender;
+  inheritPropForRender(remakeWDom, originalWDom, needRerender);
+  return remakeWDom;
+};
+const inheritPropForRender = (remakeWDom, originalWDom, needRerender) => {
+  if (needRerender !== "A" && originalWDom) {
+    remakeWDom.el = originalWDom.el;
+  }
+  if (needRerender && ["D", "R", "SR"].includes(needRerender)) {
+    if (originalWDom == null ? void 0 : originalWDom.compKey) {
+      runUnmountQueueFromWDom(originalWDom);
+      recursiveRemoveEvent(originalWDom);
+    }
+    remakeWDom.oldChildren = originalWDom == null ? void 0 : originalWDom.children;
+  }
+  remakeWDom.oldProps = originalWDom == null ? void 0 : originalWDom.props;
+};
+const addReRenderTypeProperty = (newWDom, isSameType, originalWDom) => {
+  var _a;
+  const existOriginalWDom = originalWDom && originalWDom.type;
+  const isEmptyElement = checkEmptyElement(newWDom);
+  const isRoot = newWDom.isRoot;
+  const origParentType = !isRoot && originalWDom && ((_a = getParent(originalWDom)) == null ? void 0 : _a.type);
+  const key = getKey(newWDom);
+  const isKeyCheckedWDom = origParentType === "loop" && checkExisty(key);
+  const isSameText = newWDom.type === "text" && isSameType && newWDom.text === (originalWDom == null ? void 0 : originalWDom.text);
+  let result;
+  if (isEmptyElement) {
+    result = "D";
+  } else if (isSameText) {
+    result = "N";
+  } else if (!existOriginalWDom) {
+    result = "A";
+  } else if (isSameType) {
+    result = isKeyCheckedWDom ? "SU" : "U";
+  } else {
+    result = isKeyCheckedWDom ? "SR" : "R";
+  }
+  return result;
+};
+const updateProps = (props, infoProps) => {
+  if (props && infoProps !== props) {
+    keys(props).forEach((key) => delete props[key]);
+    entries(infoProps || {}).forEach(([key, value]) => props[key] = value);
+  }
+};
+const updateChildren = (children, infoChidren) => {
+  if (children && infoChidren !== children) {
+    children.splice(0, children.length);
+    if (infoChidren) {
+      infoChidren.forEach((childrenItem) => children.push(childrenItem));
+    }
+  }
+};
+const runUpdate = (vDom, infoVdom) => {
+  const { compProps: props, compChild: children } = vDom;
+  const { props: infoProps, children: infoChidren } = infoVdom;
+  if (props) {
+    updateProps(props, infoProps);
+  }
+  if (children) {
+    updateChildren(children, infoChidren);
+  }
+  const newVDom = vDom.reRender && vDom.reRender();
+  return newVDom;
+};
+const generalize = (newWDom, isSameType, originalWDom) => {
+  if (checkCustemComponentFunction(newWDom)) {
+    return isSameType && originalWDom ? runUpdate(originalWDom, newWDom) : newWDom.resolve();
+  }
+  return newWDom;
+};
+const remakeChildrenForDiff = (newWDom, isSameType, originalWDom) => isSameType && originalWDom ? remakeChildrenForUpdate(newWDom, originalWDom) : remakeChildrenForAdd(newWDom);
+const remakeChildrenForAdd = (newWDom) => (newWDom.children || []).map(
+  (item) => assign(makeNewWDomTree(item), { getParent: () => newWDom })
+);
+const remakeChildrenForUpdate = (newWDom, originalWDom) => newWDom.type === "loop" && checkExisty(getKey((newWDom.children || [])[0])) ? remakeChildrenForLoopUpdate(newWDom, originalWDom) : (newWDom.children || []).map(
+  (item, index) => assign(makeNewWDomTree(item, (originalWDom.children || [])[index]), {
+    getParent: () => newWDom
   })
-), Ve = (e, t) => {
-  const [s, c] = ge(
-    e,
-    t
+);
+const remakeChildrenForLoopUpdate = (newWDom, originalWDom) => {
+  const [remakedChildren, unUsedChildren] = diffLoopChildren(
+    newWDom,
+    originalWDom
   );
-  return c.map((n) => {
-    const r = n.el;
-    r != null && r.parentNode && r.parentNode.removeChild(r);
-  }), s;
-}, ge = (e, t) => {
-  const s = [...e.children || []], c = [...t.children || []];
-  return [s.map((r) => {
-    const o = me(r, c), l = F(r, o);
-    return o && c.splice(c.indexOf(o), 1), l.getParent = () => e, l;
-  }), c];
-}, me = (e, t) => t.find(
-  (s) => i(s) === i(e)
+  unUsedChildren.map((unusedItem) => typeDelete(unusedItem));
+  return remakedChildren;
+};
+const diffLoopChildren = (newWDom, originalWDom) => {
+  const newChildren = [...newWDom.children || []];
+  const originalChildren = [...originalWDom.children || []];
+  const remakedChildren = newChildren.map((item) => {
+    const originalItem = findSameKeyOriginalItem(item, originalChildren);
+    const childItem = makeNewWDomTree(item, originalItem);
+    if (originalItem) {
+      originalChildren.splice(originalChildren.indexOf(originalItem), 1);
+    }
+    childItem.getParent = () => newWDom;
+    return childItem;
+  });
+  return [remakedChildren, originalChildren];
+};
+const findSameKeyOriginalItem = (item, originalChildren) => originalChildren.find(
+  (orignalChildItem) => getKey(orignalChildItem) === getKey(item)
 );
-let P = [], M = !1;
-const ce = (e, t) => {
-  u.get(e).up = () => {
-    P.push({
-      compKey: e,
-      exec: t
-    }), M || (M = !0, queueMicrotask(We));
+let redrawQueue = [];
+let redrawQueueTimeout = false;
+const setRedrawAction = (compKey, exec) => {
+  componentRef.get(compKey).up = () => {
+    redrawQueue.push({
+      compKey,
+      exec
+    });
+    if (!redrawQueueTimeout) {
+      redrawQueueTimeout = true;
+      queueMicrotask(execRedrawQueue);
+    }
   };
-}, we = (e) => () => {
-  var c;
-  const t = (c = u.get(e)) == null ? void 0 : c.up;
-  let s = !1;
-  return t && (t(), s = !0), s;
-}, ne = (e, t) => {
-  (e.children || []).forEach((s) => {
-    const c = s.compKey;
-    c && t.push(c), ne(s, t);
+};
+const componentUpdate = (compKey) => () => {
+  var _a;
+  const up = (_a = componentRef.get(compKey)) == null ? void 0 : _a.up;
+  let result = false;
+  if (up) {
+    up();
+    result = true;
+  }
+  return result;
+};
+const recursiveGetChildKeys = (wDom, result) => {
+  (wDom.children || []).forEach((item) => {
+    const childComKey = item.compKey;
+    if (childComKey) {
+      result.push(childComKey);
+    }
+    recursiveGetChildKeys(item, result);
   });
-}, We = () => {
-  let e = [];
-  P.forEach((c) => {
-    var r, o;
-    const n = (o = (r = u.get(c.compKey)) == null ? void 0 : r.vd) == null ? void 0 : o.value;
-    n && ne(n, e);
+};
+const execRedrawQueue = () => {
+  let childItemList = [];
+  redrawQueue.forEach((item) => {
+    var _a, _b;
+    const childVd = (_b = (_a = componentRef.get(item.compKey)) == null ? void 0 : _a.vd) == null ? void 0 : _b.value;
+    if (childVd) {
+      recursiveGetChildKeys(childVd, childItemList);
+    }
   });
-  const t = [], s = P.reduce((c, n) => {
-    const { compKey: r } = n;
-    return e.includes(r) || t.includes(r) || (t.push(r), c.push(n)), c;
+  const addedKey = [];
+  const result = redrawQueue.reduce((acc, item) => {
+    const { compKey } = item;
+    if (childItemList.includes(compKey) || addedKey.includes(compKey)) {
+      return acc;
+    }
+    addedKey.push(compKey);
+    acc.push(item);
+    return acc;
   }, []);
-  for (; s.length; ) {
-    const c = s.shift();
-    c && c.exec();
-  }
-  P = [], M = !1;
-}, ut = (e, t = () => []) => {
-  u.get(E()).upR.push(() => G(e, t)), G(e, t);
-}, De = () => {
-  var t;
-  const e = (t = u.get(E())) == null ? void 0 : t.upR;
-  e != null && e.length && e.forEach((s) => s());
-}, re = (e, ...t) => ({
+  while (result.length) {
+    const action = result.shift();
+    if (action) {
+      action.exec();
+    }
+  }
+  redrawQueue = [];
+  redrawQueueTimeout = false;
+};
+const updateCallback = (effectAction, dependencies = () => []) => {
+  const updateReqs = componentRef.get(getComponentKey()).upR;
+  updateReqs.push(() => useUpdated(effectAction, dependencies));
+  useUpdated(effectAction, dependencies);
+};
+const runUpdateCallback = () => {
+  var _a;
+  const updateReqs = (_a = componentRef.get(getComponentKey())) == null ? void 0 : _a.upR;
+  if (updateReqs == null ? void 0 : updateReqs.length) {
+    updateReqs.forEach((callback) => callback());
+  }
+};
+const Fragment = (_props, ...children) => ({
   type: "fragment",
-  children: t
-}), lt = (e, t, ...s) => {
-  const c = { value: void 0 }, n = t || {}, r = fe(c, s), o = ct(e, n, r);
-  return T(o) || (c.value = o), o;
-}, ft = (e) => (t, s) => e, oe = (e, t, s, c) => {
-  var f;
-  A.value = !0;
-  const n = ue(e, t, s), r = F(n, c), { isRoot: o, getParent: l, wrapElement: h, afterElement: d } = c;
-  if (r.getParent = l, !o && l) {
-    const _ = ((f = l()) == null ? void 0 : f.children) || [], de = _.indexOf(c);
-    _.splice(de, 1, r);
-  } else
-    r.isRoot = !0, r.wrapElement = h, r.afterElement = d;
-  A.value = !1, m(r);
-}, ue = (e, t, s) => ({ tagName: e.name, ctor: e, props: t, children: s, resolve: (o = t) => {
-  Pe(o);
-  const h = e(t, s)(we(o), t, s), d = et(
-    h,
-    o,
-    e,
-    t,
-    s
-  ), f = d;
-  return ce(
-    o,
-    () => oe(e, t, s, f)
-  ), Z(o, "vd").value = d, d;
-} }), et = (e, t, s, c, n) => {
-  const r = e(c);
-  if (r.reRender)
+  children
+});
+const h = (tag, props, ...children) => {
+  const nodeParentPointer = { value: void 0 };
+  const newProps = props || {};
+  const newChildren = remakeChildren(nodeParentPointer, children);
+  const node = makeNode(tag, newProps, newChildren);
+  if (!checkCustemComponentFunction(node)) {
+    nodeParentPointer.value = node;
+  }
+  return node;
+};
+const mount = (component) => (_props, _children) => component;
+const reRenderCustomComponent = (tag, props, children, originalWDom) => {
+  var _a;
+  needDiffRef.value = true;
+  const newWDom = makeWDomResolver(tag, props, children);
+  const newWDomTree = makeNewWDomTree(newWDom, originalWDom);
+  const { isRoot, getParent: getParent2, wrapElement, afterElement } = originalWDom;
+  newWDomTree.getParent = getParent2;
+  if (!isRoot && getParent2) {
+    const brothers = ((_a = getParent2()) == null ? void 0 : _a.children) || [];
+    const index = brothers.indexOf(originalWDom);
+    brothers.splice(index, 1, newWDomTree);
+  } else {
+    newWDomTree.isRoot = true;
+    newWDomTree.wrapElement = wrapElement;
+    newWDomTree.afterElement = afterElement;
+  }
+  needDiffRef.value = false;
+  wDomUpdate(newWDomTree);
+};
+const makeWDomResolver = (tag, props, children) => {
+  const tagName = tag.name;
+  const ctor = tag;
+  const resolve = (compKey = props) => {
+    initMountHookState(compKey);
+    const component = tag(props, children);
+    const componentMaker = component(componentUpdate(compKey), props, children);
+    const customNode = makeCustomNode(
+      componentMaker,
+      compKey,
+      tag,
+      props,
+      children
+    );
+    const originalWDom = customNode;
+    setRedrawAction(
+      compKey,
+      () => reRenderCustomComponent(tag, props, children, originalWDom)
+    );
+    getComponentSubInfo(compKey, "vd").value = customNode;
+    return customNode;
+  };
+  return { tagName, ctor, props, children, resolve };
+};
+const makeCustomNode = (componentMaker, compKey, tag, props, children) => {
+  const customNode = componentMaker(props);
+  if (customNode.reRender) {
     throw new Error(
       'Avoid the case where the first element of a component is a component. Instead of "mount(()=>()=><Component />)" replace it with something like "mount(()=>()=><Fragment><Component /></Fragment>)".'
     );
-  return le(
-    r,
-    t,
-    s,
-    c,
-    n,
-    tt(e, t, s, c, n)
-  ), r;
-}, tt = (e, t, s, c, n) => {
-  const r = () => st(e, t, s, c, n, r);
-  return r;
-}, st = (e, t, s, c, n, r) => {
-  xe(t), De();
-  const o = e(c);
-  return ce(
-    t,
-    () => oe(s, c, n, o)
-  ), le(o, t, s, c, n, r), Z(t, "vd").value = o, o;
-}, le = (e, t, s, c, n, r) => {
-  S(e, {
-    compProps: c,
-    compChild: n,
-    ctor: s,
-    tagName: s.name,
-    compKey: t,
-    reRender: r
+  }
+  addComponentProps(
+    customNode,
+    compKey,
+    tag,
+    props,
+    children,
+    makeReRender(componentMaker, compKey, tag, props, children)
+  );
+  return customNode;
+};
+const makeReRender = (componentMaker, compKey, tag, props, children) => {
+  const reRender = () => wDomMaker(componentMaker, compKey, tag, props, children, reRender);
+  return reRender;
+};
+const wDomMaker = (componentMaker, compKey, tag, props, children, reRender) => {
+  initUpdateHookState(compKey);
+  runUpdateCallback();
+  const originalWDom = componentMaker(props);
+  setRedrawAction(
+    compKey,
+    () => reRenderCustomComponent(tag, props, children, originalWDom)
+  );
+  addComponentProps(originalWDom, compKey, tag, props, children, reRender);
+  getComponentSubInfo(compKey, "vd").value = originalWDom;
+  return originalWDom;
+};
+const addComponentProps = (wDom, compKey, tag, props, children, reRender) => {
+  assign(wDom, {
+    compProps: props,
+    compChild: children,
+    ctor: tag,
+    tagName: tag.name,
+    compKey,
+    reRender
   });
-}, ct = (e, t, s) => {
-  if (H(e))
-    return re(t, ...s);
-  if (T(e)) {
-    const c = ue(e, t, s);
-    return A.value ? c : c.resolve();
+};
+const makeNode = (tag, props, children) => {
+  if (checkFragmentFunction(tag)) {
+    return Fragment(props, ...children);
+  } else if (checkCustemComponentFunction(tag)) {
+    const componetMakeResolver = makeWDomResolver(tag, props, children);
+    return needDiffRef.value ? componetMakeResolver : componetMakeResolver.resolve();
   }
   return {
     type: "element",
-    tag: e,
-    props: t,
-    children: s
+    tag,
+    props,
+    children
   };
-}, fe = (e, t) => t.map(
-  (s) => S(nt(s), { getParent: () => e.value })
-), nt = (e) => {
-  if (e == null || e === !1)
+};
+const remakeChildren = (nodeParentPointer, children) => children.map(
+  (item) => assign(makeChildrenItem(item), { getParent: () => nodeParentPointer.value })
+);
+const makeChildrenItem = (item) => {
+  if (item === null || item === void 0 || item === false) {
     return { type: null };
-  if (Array.isArray(e)) {
-    const t = { value: void 0 }, c = {
+  } else if (Array.isArray(item)) {
+    const nodeParentPointer = { value: void 0 };
+    const children = remakeChildren(nodeParentPointer, item);
+    const node = {
       type: "loop",
-      children: fe(t, e)
+      children
     };
-    return t.value = c, c;
-  } else if (typeof e == "string" || typeof e == "number")
-    return { type: "text", text: e };
-  return e;
-}, dt = (e) => ({ value: e }), pt = () => Promise.resolve();
+    nodeParentPointer.value = node;
+    return node;
+  } else if (typeof item === "string" || typeof item === "number") {
+    return { type: "text", text: item };
+  }
+  return item;
+};
+const ref = (initValue) => ({ value: initValue });
+const nextTick = () => Promise.resolve();
 export {
-  re as Fragment,
-  lt as h,
-  ft as mount,
-  rt as mountCallback,
-  pt as nextTick,
-  dt as ref,
-  ot as render,
-  ut as updateCallback
+  Fragment,
+  h,
+  mount,
+  mountCallback,
+  nextTick,
+  ref,
+  render,
+  updateCallback
 };
 //# sourceMappingURL=lithent.mjs.map