lithent 0.36.1 → 0.37.0

package/README.md

@@ -1,6 +1,6 @@
 # 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
@@ -9,16 +9,21 @@ used lightly in a variety of situations.
 - https://superlucky84.github.io/lithent
   - (This guide page is written in lithent.)
 
-`(9.54 KiB / gzip: 3.54 KiB)`
+`(9.60 KiB / gzip: 3.54 KiB)`
+
 
 ## 🚩 Table of Contents
 
 - [Why Use Lithent](#why-use-lithent)
 - [Basic Guide](#basic-guide)
 - [How To Install](#how-to-install)
+  - [Use NPM](#use-npm)
+  - [Use CDN](#or-use-cdn)
   - [With HTM](#with-htm)
   - [With JSX](#with-jsx)
 - [Examples](#examples)
+  - [With ESM](#with-esm)
+  - [With UMD](#with-umd)
 - [Develop Guide](#develop-guide)
 
 ## Why use Lithent?
@@ -47,10 +52,20 @@ JavaScript users are used to using closures and love to develop with them.
 
 ## How To Install
 
+#### Use NPM
+
 ```bash
 pnpm add lithent
 ```
 
+#### Or Use CDN
+
+* UMD : https://cdn.jsdelivr.net/npm/lithent@0.36.2/dist/lithent.umd.js
+* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@0.36.2/helper/dist/lithentHelper.umd.js
+* ESM : https://cdn.jsdelivr.net/npm/lithent@0.36.2/dist/lithent.mjs
+* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@0.36.2/helper/dist/lithentHelper.mjs
+
+
 It's easier to use lithent with JSX or HTM.
 
 #### With HTM
@@ -75,6 +90,7 @@ const html = htm.bind(h);
 
 - [More Examples](https://superlucky84.github.io/lithent/#examples)
 
+#### With ESM
 ```js
 import { h, render, mount, Fragment } from 'lithent';
 import { state } from 'lithent/helper';
@@ -102,6 +118,41 @@ const Component = mount((r, _props) => {
 render(html`<${Component} />`, document.getElementById('root'));
 ```
 
+#### With UMD
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/lithent@0.36.2/dist/lithent.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@0.36.2/helper/dist/lithentHelper.umd.js"></script-->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
+
+<div id="root"></div>
+
+<script>
+const { h, Fragment, render, mount } = lithent;
+// const { state } = lithentHelper;
+const html = htm.bind(h);
+
+const Component = mount(renew => {
+  count = 0;
+
+  const change = () => {
+    count += 1;
+    renew();
+  };
+
+  // Updater
+  return () => html`
+    <${Fragment}>
+      <li>count: ${count}</li>
+      <button onClick=${change}>increase</button>
+    <//>
+  `;
+});
+
+render(html`<${Component} />`, document.getElementById('root'));
+</script>
+```
+
 ## Develop Guide
 
 It's open source, so you can develop and contribute together.

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,12 +62,10 @@ 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 getAttrKey = (keyName) => keyName === "className" ? "class" : keyName;
 const updateProps$1 = (props, infoProps) => {
   if (props && infoProps !== props) {
     Object.keys(props).forEach((key) => delete props[key]);
@@ -96,6 +82,7 @@ const updateChildren = (children, infoChidren) => {
     }
   }
 };
+const xmlnsRef = { value: "" };
 const componentKeyRef = { value: {} };
 const needDiffRef = { value: false };
 const componentRef = /* @__PURE__ */ new WeakMap();
@@ -261,12 +248,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);
@@ -275,28 +260,25 @@ const render = (wDom, wrapElement, afterElement) => {
   }
   return () => {
     var _a;
-    if (wDom.componentProps) {
-      const component = (_a = componentRef.get(wDom.componentProps)) == null ? void 0 : _a.vd.value;
-      if (component) {
-        runUnmountQueueFromWDom(component);
-        recursiveRemoveEvent(component);
-        rootDelete(component);
-      }
+    const component = (_a = componentRef.get(wDom.componentProps || {})) == null ? void 0 : _a.vd.value;
+    if (component) {
+      runUnmountQueueFromWDom(component);
+      recursiveRemoveEvent(component);
+      rootDelete(component);
     }
   };
 };
 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) => {
@@ -308,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;
@@ -350,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);
@@ -413,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);
       }
@@ -463,7 +440,7 @@ const updateProps = (props, element, oldProps) => {
     ([dataKey, dataValue]) => {
       if (dataKey === "key")
         ;
-      else if (dataKey === "innerHTML" && element && typeof dataValue === "string") {
+      else if (dataKey === "innerHTML" && typeof dataValue === "string") {
         element.innerHTML = dataValue;
       } else if (checkStyleData(dataKey, dataValue)) {
         updateStyle(
@@ -480,16 +457,25 @@ 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;
       } else if (checkOptionElement(element) && dataKey === "selected") {
         element.selected = !!dataValue;
       } else if (checkNormalAttribute(dataValue)) {
-        element.setAttribute(dataKey, String(dataValue));
+        if (xmlnsRef.value && dataKey !== "xmlns") {
+          element.setAttributeNS(
+            null,
+            getAttrKey(dataKey),
+            String(dataValue)
+          );
+        } else {
+          element.setAttribute(
+            getAttrKey(dataKey),
+            String(dataValue)
+          );
+        }
       }
       delete originalProps[dataKey];
     }
@@ -498,37 +484,43 @@ 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";
+  if (tag === "svg") {
+    xmlnsRef.value = String(props == null ? void 0 : props.xmlns);
+  }
   if (isVirtualType) {
     element = new DocumentFragment();
   } else if (type === "element" && tag) {
-    element = document.createElement(tag);
+    element = xmlnsRef.value ? document.createElementNS(xmlnsRef.value, tag) : 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);
-    }
+  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;
+    },
+    new DocumentFragment()
+  );
+  if (parentElement && elementChildren.hasChildNodes()) {
+    parentElement.appendChild(elementChildren);
   }
 };
 const updateEvent = (element, eventKey, newEventHandler, oldEventHandler) => {
@@ -565,15 +557,11 @@ const findRealParentElement = (vDom) => {
   }
   return findRealParentElement(getParent(vDom));
 };
-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;
-};
+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(
@@ -646,7 +634,7 @@ const remakeChildrenForUpdate = (newWDom, originalWDom) => {
   });
 };
 const remakeChildrenForLoopUpdate = (newWDom, originalWDom) => {
-  const { remakedChildren, unUsedChildren } = diffLoopChildren(
+  const [remakedChildren, unUsedChildren] = diffLoopChildren(
     newWDom,
     originalWDom
   );
@@ -670,17 +658,11 @@ const diffLoopChildren = (newWDom, originalWDom) => {
     childItem.getParent = () => newWDom;
     return childItem;
   });
-  return {
-    remakedChildren,
-    unUsedChildren: originalChildren
-  };
-};
-const findSameKeyOriginalItem = (item, originalChildren) => {
-  const key = getKey(item);
-  return originalChildren.find(
-    (orignalChildItem) => getKey(orignalChildItem) === key
-  );
+  return [remakedChildren, originalChildren];
 };
+const findSameKeyOriginalItem = (item, originalChildren) => originalChildren.find(
+  (orignalChildItem) => getKey(orignalChildItem) === getKey(item)
+);
 const getKey = (target) => {
   var _a, _b, _c;
   return (_c = (_a = target == null ? void 0 : target.componentProps) == null ? void 0 : _a.key) != null ? _c : (_b = target == null ? void 0 : target.props) == null ? void 0 : _b.key;
@@ -763,14 +745,14 @@ const makeWDomResolver = (tag, props, children) => {
 };
 const makeCustomNode = (componentMaker, componentKey, tag, props, children) => {
   const customNode = componentMaker(props);
-  const reRender2 = makeReRender(
-    componentMaker,
+  addComponentProps(
+    customNode,
     componentKey,
     tag,
     props,
-    children
+    children,
+    makeReRender(componentMaker, componentKey, tag, props, children)
   );
-  addComponentProps(customNode, componentKey, tag, props, children, reRender2);
   return customNode;
 };
 const makeReRender = (componentMaker, componentKey, tag, props, children) => {