lithent 1.0.1 → 1.0.2

package/README.md

@@ -9,7 +9,7 @@ used lightly in a variety of situations.
 - https://superlucky84.github.io/lithent
   - (This guide page is written in lithent.)
 
-`(9.68 KiB / gzip: 3.60 KiB)`
+`(9.58 KiB / gzip: 3.63 KiB)`
 
 
 ## 🚩 Table of Contents
@@ -24,20 +24,20 @@ used lightly in a variety of situations.
 - [Examples](#examples)
   - [With ESM](#with-esm)
   - [With UMD](#with-umd)
-- [Test](#test)
 - [Develop Guide](#develop-guide)
+- [Test](#test)
 
 ## Why use Lithent?
 
 ### Lithent have the bare minimum of necessary functionality, with no unnecessary features.
 
-Since 'react' and 'vue', there have been a lot of UI libraries coming out that boast full-stack functionality.
+In a real-world development environment, you may want to use Virtual DOM lightly, with only the bare minimum of core functionality.
 
-However, in the real world of development, there are times when you need to build something using only the bare minimum of key features, rather than a full-stack, full-featured library.
+"Lithent" makes it easy to add, remove, and update virtual domes to specific parts of a pre-drawn SSR page.
 
-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').
+"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 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.
+We provide code in the form of 'helpers' that extend the basic functionality, but using the helpers is only optional and users can extend and develop custom helpers for their own projects.
 
 ### Approach with the developer-friendly concept of closures between "component mounter" and "renderer"
 
@@ -98,15 +98,17 @@ import { state } from 'lithent/helper';
 import htm from 'htm';
 const html = htm.bind(h);
 
-const Component = mount((r, _props) => {
-  const count = state(0, r);
+const Component = mount((renew, _props) => {
+  const count = state(0, renew);
 
-  const change = () => (count.v += 1);
+  const change = () => {
+    count.value += 1;
+  };
 
   // Updater
   return () => html`
     <${Fragment}>
-      <li>count: ${count.v}</li>
+      <li>count: ${count.value}</li>
       <button onClick=${change}>increase</button>
     <//>
   `;
@@ -154,13 +156,6 @@ const destroy = render(html`<${Component} />`, document.getElementById('root'));
 </script>
 ```
 
-## Test
-
-```bash
-// pnpm install
-pnpm test
-```
-
 ## Develop Guide
 
 It's open source, so you can develop and contribute together.
@@ -192,3 +187,11 @@ pnpm build
 ```bash
 pnpm dev // or pnpm dev:core
 ```
+
+## Test
+
+```bash
+// pnpm install
+pnpm test
+```
+

package/dist/lithent.mjs

@@ -1,6 +1,6 @@
 const checkPlainWDomType = (wDom) => typeof wDom === "object" && !("resolve" in wDom);
 const checkPlainType = (wDom, typeName) => checkPlainWDomType(wDom) && wDom.type === typeName;
-const checkSameCustomComponent = (newWDom, originalWDom) => newWDom.constructor === (originalWDom == null ? void 0 : originalWDom.constructor);
+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);
@@ -15,7 +15,7 @@ const checkNormalTypeElement = (newWDom, originalWDom) => {
 };
 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;
+  return (_c = (_a = target == null ? void 0 : target.compProps) == null ? void 0 : _a.key) != null ? _c : (_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;
@@ -58,7 +58,7 @@ const getParent = (vDom) => {
   return parentVDom;
 };
 const reRender = (vDom, infoVdom) => {
-  const { componentProps: props, componentChildren: children } = vDom;
+  const { compProps: props, compChild: children } = vDom;
   const { props: infoProps, children: infoChidren } = infoVdom;
   if (props) {
     updateProps$1(props, infoProps);
@@ -71,12 +71,13 @@ const reRender = (vDom, infoVdom) => {
 };
 const getEventName = (eventKey) => eventKey.replace(/^on(.*)/, (_match, p1) => p1.toLowerCase());
 const getAttrKey = (keyName) => keyName === "className" ? "class" : keyName;
+const entries = Object.entries;
+const keys = Object.keys;
+const assign = Object.assign;
 const updateProps$1 = (props, infoProps) => {
   if (props && infoProps !== props) {
-    Object.keys(props).forEach((key) => delete props[key]);
-    Object.entries(infoProps || {}).forEach(
-      ([key, value]) => props[key] = value
-    );
+    keys(props).forEach((key) => delete props[key]);
+    entries(infoProps || {}).forEach(([key, value]) => props[key] = value);
   }
 };
 const updateChildren = (children, infoChidren) => {
@@ -90,12 +91,12 @@ const updateChildren = (children, infoChidren) => {
 let redrawQueue = [];
 let redrawQueueTimeout = false;
 const xmlnsRef = { value: "" };
-const componentKeyRef = { value: {} };
+const compKeyRef = { value: {} };
 const needDiffRef = { value: false };
 const componentRef = /* @__PURE__ */ new WeakMap();
-const componentRender = (componentKey) => () => {
+const componentRender = (compKey) => () => {
   var _a;
-  const up = (_a = componentRef.get(componentKey)) == null ? void 0 : _a.up;
+  const up = (_a = componentRef.get(compKey)) == null ? void 0 : _a.up;
   let result = false;
   if (up) {
     up();
@@ -103,8 +104,8 @@ const componentRender = (componentKey) => () => {
   }
   return result;
 };
-const setComponetRef = (componentKey) => {
-  componentRef.set(componentKey, {
+const setComponetRef = (compKey) => {
+  componentRef.set(compKey, {
     vd: { value: null },
     up: () => {
     },
@@ -116,12 +117,12 @@ const setComponetRef = (componentKey) => {
     umts: []
   });
 };
-const getComponentKey = () => componentKeyRef.value;
-const getComponentSubInfo = (componentKey, subKey) => componentRef.get(componentKey)[subKey];
-const setRedrawAction = (componentKey, exec) => {
-  componentRef.get(componentKey).up = () => {
+const getComponentKey = () => compKeyRef.value;
+const getComponentSubInfo = (compKey, subKey) => componentRef.get(compKey)[subKey];
+const setRedrawAction = (compKey, exec) => {
+  componentRef.get(compKey).up = () => {
     redrawQueue.push({
-      componentKey,
+      compKey,
       exec
     });
     if (!redrawQueueTimeout) {
@@ -130,14 +131,14 @@ const setRedrawAction = (componentKey, exec) => {
     }
   };
 };
-const initUpdateHookState = (componentKey) => componentKeyRef.value = componentKey;
-const initMountHookState = (componentKey) => {
-  componentKeyRef.value = componentKey;
-  setComponetRef(componentKey);
+const initUpdateHookState = (compKey) => compKeyRef.value = compKey;
+const initMountHookState = (compKey) => {
+  compKeyRef.value = compKey;
+  setComponetRef(compKey);
 };
 const recursiveGetChildKeys = (wDom, result) => {
   (wDom.children || []).forEach((item) => {
-    const childComKey = item.componentKey;
+    const childComKey = item.compKey;
     if (childComKey) {
       result.push(childComKey);
     }
@@ -148,18 +149,18 @@ const execRedrawQueue = () => {
   let childItemList = [];
   redrawQueue.forEach((item) => {
     var _a, _b;
-    const childVd = (_b = (_a = componentRef.get(item.componentKey)) == null ? void 0 : _a.vd) == null ? void 0 : _b.value;
+    const childVd = (_b = (_a = componentRef.get(item.compKey)) == null ? void 0 : _a.vd) == null ? void 0 : _b.value;
     if (childVd) {
       recursiveGetChildKeys(childVd, childItemList);
     }
   });
   const addedKey = [];
   const result = redrawQueue.reduce((acc, item) => {
-    const { componentKey } = item;
-    if (childItemList.includes(componentKey) || addedKey.includes(componentKey)) {
+    const { compKey } = item;
+    if (childItemList.includes(compKey) || addedKey.includes(compKey)) {
       return acc;
     }
-    addedKey.push(componentKey);
+    addedKey.push(compKey);
     acc.push(item);
     return acc;
   }, []);
@@ -176,15 +177,15 @@ const unmount = (effectAction) => {
   componentRef.get(getComponentKey()).umts.push(effectAction);
 };
 const runUnmountQueueFromWDom = (newWDom) => {
-  const { componentKey } = newWDom;
-  if (componentKey) {
-    removeItem(componentKey);
+  const { compKey } = newWDom;
+  if (compKey) {
+    removeItem(compKey);
   }
   recursiveRunUnmount(newWDom);
 };
 const recursiveRunUnmount = (wDom) => {
   (wDom.children || []).forEach((item) => {
-    const childComKey = item.componentKey;
+    const childComKey = item.compKey;
     if (childComKey) {
       runUnmountQueueFromWDom(item);
     } else {
@@ -192,12 +193,12 @@ const recursiveRunUnmount = (wDom) => {
     }
   });
 };
-const removeItem = (componentKey) => {
-  const subInfo = componentRef.get(componentKey);
+const removeItem = (compKey) => {
+  const subInfo = componentRef.get(compKey);
   if (subInfo) {
     subInfo.umts.forEach((effect) => effect());
     subInfo.umts = [];
-    componentRef.delete(componentKey);
+    componentRef.delete(compKey);
   }
 };
 let mountedQueue = [];
@@ -206,18 +207,18 @@ const execMountedQueue = () => {
   mountedQueue = [];
 };
 const addMountedQueue = (wDom) => {
-  if (wDom.componentKey) {
+  if (wDom.compKey) {
     mountedQueue.push(wDom);
   }
 };
 const mountCallback = (effectAction) => componentRef.get(getComponentKey()).mts.push(effectAction);
 const runMountedQueueFromWDom = (newWDom) => {
-  const { componentKey } = newWDom;
-  if (componentKey) {
-    const component = componentRef.get(componentKey);
+  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;
-    componentKeyRef.value = componentKey;
+    compKeyRef.value = compKey;
     if (sequence) {
       sequence.value = 0;
     }
@@ -246,16 +247,16 @@ const useUpdated = (effectAction, dependencies = () => []) => {
   upS.value += 1;
 };
 const runUpdatedQueueFromWDom = (newWDom) => {
-  const { componentKey } = newWDom;
-  if (componentKey) {
-    const component = componentRef.get(componentKey);
+  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;
-    componentKeyRef.value = componentKey;
+    compKeyRef.value = compKey;
     if (sequence) {
       sequence.value = 0;
     }
-    if (newWDom.constructor && queue) {
+    if (newWDom.ctor && queue) {
       component.upCB = [];
       queue.forEach((effect) => effect());
     }
@@ -276,7 +277,7 @@ const render = (wDom, wrapElement, afterElement) => {
   execMountedQueue();
   return () => {
     var _a;
-    const component = (_a = componentRef.get(wDom.componentProps || {})) == null ? void 0 : _a.vd.value;
+    const component = (_a = componentRef.get(wDom.compProps || {})) == null ? void 0 : _a.vd.value;
     if (component) {
       runUnmountQueueFromWDom(component);
       recursiveRemoveEvent(component);
@@ -415,16 +416,14 @@ const typeReplace = (newWDom) => {
   }
 };
 const removeEvent = (oldProps, element) => {
-  Object.entries(oldProps || {}).forEach(
-    ([dataKey, dataValue]) => {
-      if (dataKey.match(/^on/)) {
-        element.removeEventListener(
-          getEventName(dataKey),
-          dataValue
-        );
-      }
+  entries(oldProps || {}).forEach(([dataKey, dataValue]) => {
+    if (dataKey.match(/^on/)) {
+      element.removeEventListener(
+        getEventName(dataKey),
+        dataValue
+      );
     }
-  );
+  });
 };
 const typeUpdate = (newWDom) => {
   var _a;
@@ -452,51 +451,49 @@ const updateText = (newWDom) => {
 };
 const updateProps = (props, element, oldProps) => {
   const originalProps = { ...oldProps };
-  Object.entries(props || {}).forEach(
-    ([dataKey, dataValue]) => {
-      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
+  entries(props || {}).forEach(([dataKey, dataValue]) => {
+    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 (checkNormalAttribute(dataValue)) {
+      if (xmlnsRef.value && dataKey !== "xmlns") {
+        element.setAttributeNS(
+          null,
+          getAttrKey(dataKey),
+          String(dataValue)
         );
-      } else if (checkRefData(dataKey, dataValue)) {
-        dataValue.value = element;
-      } else if (dataKey.match(/^on/)) {
-        updateEvent(
-          element,
-          dataKey,
-          dataValue,
-          originalProps[dataKey]
+      } else {
+        element.setAttribute(
+          getAttrKey(dataKey),
+          String(dataValue)
         );
-      } 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)) {
-        if (xmlnsRef.value && dataKey !== "xmlns") {
-          element.setAttributeNS(
-            null,
-            getAttrKey(dataKey),
-            String(dataValue)
-          );
-        } else {
-          element.setAttribute(
-            getAttrKey(dataKey),
-            String(dataValue)
-          );
-        }
       }
-      delete originalProps[dataKey];
     }
-  );
-  Object.keys(originalProps).forEach(
+    delete originalProps[dataKey];
+  });
+  keys(originalProps).forEach(
     (dataKey) => element.removeAttribute(dataKey)
   );
 };
@@ -554,11 +551,11 @@ const updateStyle = (style, oldStyle, element) => {
   const originalStyle = { ...oldStyle };
   const elementStyle = element == null ? void 0 : element.style;
   if (elementStyle) {
-    Object.entries(style).forEach(([styleKey, dataValue]) => {
+    entries(style).forEach(([styleKey, dataValue]) => {
       elementStyle[styleKey] = dataValue;
       delete originalStyle[styleKey];
     });
-    Object.entries(originalStyle).forEach(
+    entries(originalStyle).forEach(
       ([styleKey]) => elementStyle[styleKey] = ""
     );
   }
@@ -580,29 +577,29 @@ const makeNewWDomTree = (newWDom, originalWDom) => remakeNewWDom(
 );
 const remakeNewWDom = (newWDom, isSameType, originalWDom) => {
   const remakeWDom = generalize(newWDom, isSameType, originalWDom);
-  remakeWDom.children = remakeChildrenForDiff(
-    remakeWDom,
-    isSameType,
-    originalWDom
-  );
-  const needRerender = addReRenderTypeProperty(
+  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.componentKey) {
+    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;
-  return remakeWDom;
 };
 const addReRenderTypeProperty = (newWDom, isSameType, originalWDom) => {
   const existOriginalWDom = originalWDom && originalWDom.type;
@@ -729,67 +726,63 @@ const reRenderCustomComponent = (tag, props, children, originalWDom) => {
 };
 const makeWDomResolver = (tag, props, children) => {
   const tagName = tag.name;
-  const constructor = tag;
-  const resolve = (componentKey = props) => {
-    initMountHookState(componentKey);
+  const ctor = tag;
+  const resolve = (compKey = props) => {
+    initMountHookState(compKey);
     const component = tag(props, children);
-    const componentMaker = component(
-      componentRender(componentKey),
-      props,
-      children
-    );
+    const componentMaker = component(componentRender(compKey), props, children);
     const customNode = makeCustomNode(
       componentMaker,
-      componentKey,
+      compKey,
       tag,
       props,
       children
     );
     const originalWDom = customNode;
     setRedrawAction(
-      componentKey,
+      compKey,
       () => reRenderCustomComponent(tag, props, children, originalWDom)
     );
-    getComponentSubInfo(componentKey, "vd").value = customNode;
+    getComponentSubInfo(compKey, "vd").value = customNode;
     return customNode;
   };
-  return { tagName, constructor, props, children, resolve };
+  return { tagName, ctor, props, children, resolve };
 };
-const makeCustomNode = (componentMaker, componentKey, tag, props, children) => {
+const makeCustomNode = (componentMaker, compKey, tag, props, children) => {
   const customNode = componentMaker(props);
   addComponentProps(
     customNode,
-    componentKey,
+    compKey,
     tag,
     props,
     children,
-    makeReRender(componentMaker, componentKey, tag, props, children)
+    makeReRender(componentMaker, compKey, tag, props, children)
   );
   return customNode;
 };
-const makeReRender = (componentMaker, componentKey, tag, props, children) => {
-  const reRender2 = () => wDomMaker(componentMaker, componentKey, tag, props, children, reRender2);
+const makeReRender = (componentMaker, compKey, tag, props, children) => {
+  const reRender2 = () => wDomMaker(componentMaker, compKey, tag, props, children, reRender2);
   return reRender2;
 };
-const wDomMaker = (componentMaker, componentKey, tag, props, children, reRender2) => {
-  initUpdateHookState(componentKey);
+const wDomMaker = (componentMaker, compKey, tag, props, children, reRender2) => {
+  initUpdateHookState(compKey);
   runUpdateCallback();
   const originalWDom = componentMaker(props);
   setRedrawAction(
-    componentKey,
+    compKey,
     () => reRenderCustomComponent(tag, props, children, originalWDom)
   );
-  addComponentProps(originalWDom, componentKey, tag, props, children, reRender2);
-  getComponentSubInfo(componentKey, "vd").value = originalWDom;
+  addComponentProps(originalWDom, compKey, tag, props, children, reRender2);
+  getComponentSubInfo(compKey, "vd").value = originalWDom;
   return originalWDom;
 };
-const addComponentProps = (wDom, componentKey, tag, props, children, reRender2) => {
-  Object.assign(wDom, {
-    componentProps: props,
-    componentChildren: children,
-    constructor: tag,
+const addComponentProps = (wDom, compKey, tag, props, children, reRender2) => {
+  assign(wDom, {
+    compProps: props,
+    compChild: children,
+    ctor: tag,
     tagName: tag.name,
-    componentKey,
+    compKey,
     reRender: reRender2
   });
 };