lithent 0.36.0 → 0.36.2

package/README.md

@@ -1,24 +1,26 @@
 # lithent
 
-> A lightweight Virtual DOM UI library
+> An extensible virtual DOM library for lightweight use in a variety of environments.
 
 Lithent were developed to make it easy to insert Virtual DOM component
 fragments into pages already drawn with SSR, and are intended to be
-used lightly with other libraries.
+used lightly in a variety of situations.
 
-* https://superlucky84.github.io/lithent
-  * (This guide page is written in lithent.)
+- https://superlucky84.github.io/lithent
+  - (This guide page is written in lithent.)
+
+`(9.47 KiB / gzip: 3.49 KiB)`
 
-`(9.54 KiB / gzip: 3.54 KiB)`
 
 ## 🚩 Table of Contents
-* [Why Use Lithent](#why-use-lithent)
-* [Basic Guide](#basic-guide)
-* [How To Install](#how-to-install)
-  * [Width HTM](#with-htm)
-  * [Width JSX](#with-jsx)
-* [Examples](#examples)
-* [Develop Guide](#develop-guide)
+
+- [Why Use Lithent](#why-use-lithent)
+- [Basic Guide](#basic-guide)
+- [How To Install](#how-to-install)
+  - [With HTM](#with-htm)
+  - [With JSX](#with-jsx)
+- [Examples](#examples)
+- [Develop Guide](#develop-guide)
 
 ## Why use Lithent?
 
@@ -30,31 +32,31 @@ However, in the real world of development, there are times when you need to buil
 
 Lithent has implemented the bare minimum functionality needed to create and update virtual DOM in general (we only need to know 'render', 'mounter', 'updater', 'renewer', 'mountCallback', and 'updateCallback').
 
-We provide code to extend the basic functionality in the form of 'helpers', but using them is only optional and we want to encourage talented users to extend and develop custom helpers for their own projects.
-
+We provide code in the form of 'helpers' that extend the basic functionality, but using the helpers is only optional and talented users can extend and develop custom helpers for their own projects.
 
 ### Approach with the developer-friendly concept of closures between "component mounter" and "renderer"
 
 Many existing UI libraries have their advantages, but they also create rules that are too strong and rigid for fear of users making mistakes.
 
-JavaScript users are used to using closures and love to develop with them. 
-
-"Lithent" provide a familiar approach to real-world JavaScript development because they leverage the properties of higher-order functions and closures in the component mounter to define the properties of the component and get the mounted information from the renderer.
+JavaScript users are used to using closures and love to develop with them.
 
+"Lithent" provides a familiar approach to my JavaScript development, as it leverages the properties of higher-order functions and closures to define and recycle the state of a component.
 
 ## Basic Guide
 
-* https://superlucky84.github.io/lithent/
+- https://superlucky84.github.io/lithent/
 
 ## How To Install
 
 ```bash
-pnpm add lithent 
+pnpm add lithent
 ```
 
+It's easier to use lithent with JSX or HTM.
+
 #### With HTM
 
-* [Htm Github](https://github.com/developit/htm)
+- [Htm Github](https://github.com/developit/htm)
 
 ```bash
 pnpm add -D htm
@@ -68,11 +70,11 @@ const html = htm.bind(h);
 
 #### With JSX
 
-* [Setting Guide](https://superlucky84.github.io/lithent/#install)
+- [Setting Guide](https://superlucky84.github.io/lithent/#install)
 
 ## Examples
 
-* [More Examples](https://superlucky84.github.io/lithent/#examples)
+- [More Examples](https://superlucky84.github.io/lithent/#examples)
 
 ```js
 import { h, render, mount, Fragment } from 'lithent';
@@ -112,6 +114,7 @@ npm install -g pnpm
 ```
 
 ### project install
+
 ```bash
 git clone https://github.com/superlucky84/lithent.git
 
@@ -121,11 +124,13 @@ pnpm install
 ```
 
 ### project build
+
 ```bash
 pnpm build
 ```
 
 ### Running the development environment
+
 ```bash
 pnpm dev // or pnpm dev:core
 ```

package/dist/lithent.mjs

@@ -1,8 +1,5 @@
-const checkCustemComponentFunction = (target) => typeof target === "function" && !checkFragmentFunction(target) || typeof target === "object" && "resolve" in target;
-const checkFragmentFunction = (target) => typeof target === "function" && target === Fragment;
 const checkPlainWDomType = (wDom) => typeof wDom === "object" && !("resolve" in wDom);
 const checkPlainType = (wDom, typeName) => checkPlainWDomType(wDom) && wDom.type === typeName;
-const checkEmptyElement = (wDom) => checkPlainWDomType(wDom) && !wDom.type;
 const checkSameCustomComponent = (newWDom, originalWDom) => newWDom.constructor === (originalWDom == null ? void 0 : originalWDom.constructor);
 const checkSameFragment = (newWDom, originalWDom) => {
   var _a, _b;
@@ -16,24 +13,18 @@ const checkNormalTypeElement = (newWDom, originalWDom) => {
   var _a, _b;
   return checkPlainWDomType(newWDom) && (originalWDom == null ? void 0 : originalWDom.type) === newWDom.type && (((_a = originalWDom == null ? void 0 : originalWDom.children) == null ? void 0 : _a.length) === ((_b = newWDom == null ? void 0 : newWDom.children) == null ? void 0 : _b.length) || newWDom.type === "loop");
 };
+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) => {
-  return element.nodeType === 1 && element.tagName === "OPTION";
-};
-const checkTextareaElement = (element) => {
-  return element.nodeType === 1 && element.tagName === "TEXTAREA";
-};
-const checkCheckboxElement = (element) => {
-  return element.nodeType === 1 && element.type === "checkbox";
-};
-const checkRadioElement = (element) => {
-  return element.nodeType === 1 && element.type === "radio";
-};
+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 checkNormalAttribute = (dataValue) => typeof dataValue === "number" || typeof dataValue === "string";
 const getWDomType = (wDom) => {
-  let result;
+  let result = "et";
   if (checkCustemComponentFunction(wDom)) {
     result = "c";
   } else if (checkPlainType(wDom, "fragment")) {
@@ -59,9 +50,6 @@ const checkSameWDomWithOriginal = {
 };
 const getParent = (vDom) => {
   const parentVDom = vDom.getParent && vDom.getParent();
-  if (!parentVDom) {
-    throw Error("Not found parent vDom");
-  }
   return parentVDom;
 };
 const reRender = (vDom, infoVdom) => {
@@ -74,11 +62,9 @@ const reRender = (vDom, infoVdom) => {
     updateChildren(children, infoChidren);
   }
   const newVDom = vDom.reRender && vDom.reRender();
-  if (!newVDom) {
-    throw Error("Unable reRender");
-  }
   return newVDom;
 };
+const getEventName = (eventKey) => eventKey.replace(/^on(.*)/, (_match, p1) => p1.toLowerCase());
 const updateProps$1 = (props, infoProps) => {
   if (props && infoProps !== props) {
     Object.keys(props).forEach((key) => delete props[key]);
@@ -260,12 +246,10 @@ const runUpdatedQueueFromWDom = (newWDom) => {
 };
 const checkNeedPushQueue = (originalDefs, newDefs) => !originalDefs.length && !originalDefs.length ? true : originalDefs.some((def, index) => def !== newDefs[index]);
 const render = (wDom, wrapElement, afterElement) => {
-  if (!wrapElement) {
-    throw Error("WrapELement is null");
-  }
+  wrapElement != null ? wrapElement : wrapElement = document.body;
   wDom.isRoot = true;
   wDom.wrapElement = wrapElement;
-  const Dom = wDomToDom(wDom, true);
+  const Dom = wDomToDom(wDom);
   if (afterElement) {
     wDom.afterElement = afterElement;
     wrapElement.insertBefore(Dom, afterElement);
@@ -287,15 +271,14 @@ const render = (wDom, wrapElement, afterElement) => {
 const wDomUpdate = (newWDomTree) => {
   const { needRerender } = newWDomTree;
   if (needRerender && needRerender !== "N") {
-    const exec = {
+    ({
       A: typeAdd,
       D: typeDelete,
       R: typeReplace,
       U: typeUpdate,
       SR: typeSortedReplace,
       SU: typeSortedUpdate
-    }[needRerender];
-    exec(newWDomTree);
+    })[needRerender](newWDomTree);
   }
 };
 const recursiveRemoveEvent = (originalWDom) => {
@@ -307,16 +290,16 @@ const recursiveRemoveEvent = (originalWDom) => {
   });
 };
 const rootDelete = (newWDom) => {
-  const parent = newWDom.wrapElement;
-  deleteRealDom(newWDom, parent);
+  deleteRealDom(newWDom, newWDom.wrapElement);
 };
 const typeDelete = (newWDom) => {
-  const parentWDom = getParent(newWDom);
-  const parent = findRealParentElement(parentWDom);
   if (newWDom.oldProps && newWDom.el) {
     removeEvent(newWDom.oldProps, newWDom.el);
   }
-  deleteRealDom(newWDom, parent);
+  deleteRealDom(
+    newWDom,
+    findRealParentElement(getParent(newWDom))
+  );
 };
 const deleteRealDom = (newWDom, parent) => {
   var _a, _b;
@@ -349,18 +332,13 @@ const typeSortedUpdate = (newWDom) => {
 };
 const typeAdd = (newWDom, newElement) => {
   if (!newElement) {
-    newElement = wDomToDom(newWDom, true);
+    newElement = wDomToDom(newWDom);
   }
   const parentWDom = getParent(newWDom);
   if (parentWDom.type) {
     const parentEl = findRealParentElement(parentWDom);
     const isLoop = parentWDom.type === "loop";
-    let nextEl;
-    if (isLoop) {
-      nextEl = startFindNextBrotherElement(parentWDom, getParent(parentWDom));
-    } else {
-      nextEl = startFindNextBrotherElement(newWDom, parentWDom);
-    }
+    const nextEl = isLoop ? startFindNextBrotherElement(parentWDom, getParent(parentWDom)) : startFindNextBrotherElement(newWDom, parentWDom);
     if (newElement && parentEl) {
       if (nextEl) {
         parentEl.insertBefore(newElement, nextEl);
@@ -412,7 +390,7 @@ const typeReplace = (newWDom) => {
       typeSortedReplace(newWDom);
     } else {
       const parentElement = findRealParentElement(parentWDom);
-      const newElement = wDomToDom(newWDom, true);
+      const newElement = wDomToDom(newWDom);
       if (parentElement) {
         parentElement.replaceChild(newElement, orignalElement);
       }
@@ -421,22 +399,16 @@ const typeReplace = (newWDom) => {
   runMountedQueueFromWDom(newWDom);
 };
 const removeEvent = (oldProps, element) => {
-  if (element) {
-    Object.entries(oldProps || {}).forEach(
-      ([dataKey, dataValue]) => {
-        if (dataKey.match(/^on/)) {
-          const eventName = dataKey.replace(
-            /^on(.*)/,
-            (_match, p1) => p1.toLowerCase()
-          );
-          element.removeEventListener(
-            eventName,
-            dataValue
-          );
-        }
+  Object.entries(oldProps || {}).forEach(
+    ([dataKey, dataValue]) => {
+      if (dataKey.match(/^on/)) {
+        element.removeEventListener(
+          getEventName(dataKey),
+          dataValue
+        );
       }
-    );
-  }
+    }
+  );
 };
 const typeUpdate = (newWDom) => {
   var _a;
@@ -471,9 +443,11 @@ const updateProps = (props, element, oldProps) => {
       else if (dataKey === "innerHTML" && element && typeof dataValue === "string") {
         element.innerHTML = dataValue;
       } else if (checkStyleData(dataKey, dataValue)) {
-        const style = dataValue;
-        const oldStyle = checkStyleData(dataKey, originalProps.style) || {};
-        updateStyle(style, oldStyle, element);
+        updateStyle(
+          dataValue,
+          checkStyleData(dataKey, originalProps.style) ? originalProps.style : {},
+          element
+        );
       } else if (checkRefData(dataKey, dataValue)) {
         dataValue.value = element;
       } else if (dataKey.match(/^on/)) {
@@ -483,9 +457,7 @@ const updateProps = (props, element, oldProps) => {
           dataValue,
           originalProps[dataKey]
         );
-      } else if (checkRadioElement(element) && dataKey === "checked") {
-        element.checked = !!dataValue;
-      } else if (checkCheckboxElement(element) && dataKey === "checked") {
+      } else if (checkCheckableElement(element) && dataKey === "checked") {
         element.checked = !!dataValue;
       } else if (checkTextareaElement(element) && dataKey === "value") {
         element.value = dataValue;
@@ -501,7 +473,7 @@ const updateProps = (props, element, oldProps) => {
     (dataKey) => element.removeAttribute(dataKey)
   );
 };
-const wDomToDom = (wDom, init) => {
+const wDomToDom = (wDom) => {
   let element;
   const { type, tag, text, props, children = [] } = wDom;
   const isVirtualType = type === "fragment" || type === "loop";
@@ -511,34 +483,31 @@ const wDomToDom = (wDom, init) => {
     element = document.createElement(tag);
   } else if (type === "text" && checkExisty(text)) {
     element = document.createTextNode(String(text));
+  } else {
+    element = document.createElement("e");
   }
-  wDomChildrenToDom(children, element, init);
+  wDomChildrenToDom(children, element);
   updateProps(props, element);
   wDom.el = element;
   runMountedQueueFromWDom(wDom);
-  return element || document.createElement("div");
-};
-const wDomChildrenToDom = (children, parentElement, init) => {
-  if (init) {
-    const elementChildren = children.reduce(
-      (acc, childItem) => {
-        if (childItem.type) {
-          acc.appendChild(wDomToDom(childItem, init));
-        }
-        return acc;
-      },
-      new DocumentFragment()
-    );
-    if (parentElement && elementChildren.hasChildNodes()) {
-      parentElement.appendChild(elementChildren);
-    }
+  return element;
+};
+const wDomChildrenToDom = (children, parentElement) => {
+  const elementChildren = children.reduce(
+    (acc, childItem) => {
+      if (childItem.type) {
+        acc.appendChild(wDomToDom(childItem));
+      }
+      return acc;
+    },
+    new DocumentFragment()
+  );
+  if (parentElement && elementChildren.hasChildNodes()) {
+    parentElement.appendChild(elementChildren);
   }
 };
 const updateEvent = (element, eventKey, newEventHandler, oldEventHandler) => {
-  const eventName = eventKey.replace(
-    /^on(.*)/,
-    (_match, p1) => p1.toLowerCase()
-  );
+  const eventName = getEventName(eventKey);
   if (oldEventHandler !== newEventHandler) {
     if (oldEventHandler) {
       element.removeEventListener(eventName, oldEventHandler);
@@ -569,18 +538,13 @@ const findRealParentElement = (vDom) => {
   if (!isVirtualType) {
     return vDom.el;
   }
-  const parentVDom = getParent(vDom);
-  return findRealParentElement(parentVDom);
-};
-const makeNewWDomTree = (newWDom, originalWDom) => {
-  const type = getWDomType(newWDom);
-  if (!type) {
-    throw new Error("Unknown type wdom");
-  }
-  const isSameType = checkSameWDomWithOriginal[type](newWDom, originalWDom);
-  const result = remakeNewWDom(newWDom, isSameType, originalWDom);
-  return result;
+  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);
   remakeWDom.children = remakeChildrenForDiff(
@@ -659,7 +623,7 @@ const remakeChildrenForLoopUpdate = (newWDom, originalWDom) => {
   );
   unUsedChildren.map((unusedItem) => {
     const el = unusedItem.el;
-    if (el && el.parentNode) {
+    if (el == null ? void 0 : el.parentNode) {
       el.parentNode.removeChild(el);
     }
   });