lithent 0.36.2 → 1.0.0

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.47 KiB / gzip: 3.49 KiB)`
+`(9.62 KiB / gzip: 3.58 KiB)`
 
 
 ## 🚩 Table of Contents
@@ -17,9 +17,13 @@ used lightly in a variety of situations.
 - [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?
@@ -48,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@1.0.0/dist/lithent.umd.js
+* UMD-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.0.0/helper/dist/lithentHelper.umd.js
+* ESM : https://cdn.jsdelivr.net/npm/lithent@1.0.0/dist/lithent.mjs
+* ESM-HELPER: https://cdn.jsdelivr.net/npm/lithent@1.0.0/helper/dist/lithentHelper.mjs
+
+
 It's easier to use lithent with JSX or HTM.
 
 #### With HTM
@@ -76,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';
@@ -103,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@1.0.0/dist/lithent.umd.js"></script>
+<!--script src="https://cdn.jsdelivr.net/npm/lithent@1.0.0/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/hook/mountCallback.d.ts

@@ -1,3 +1,5 @@
 import { WDom } from '../types';
-export declare const mountCallback: (effectAction: () => void) => void;
+export declare const execMountedQueue: () => void;
+export declare const addMountedQueue: (wDom: WDom) => void;
+export declare const mountCallback: (effectAction: () => void) => number;
 export declare const runMountedQueueFromWDom: (newWDom: WDom) => void;

package/dist/hook/ref.d.ts

@@ -1,3 +1,4 @@
 export declare const ref: <T>(initValue: T) => {
     value: T;
 };
+export declare const nextTick: () => Promise<void>;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { h, Fragment, mount } from './wDom';
 import { render } from './render';
 import { mountCallback } from './hook/mountCallback';
 import { updateCallback } from './hook/updateCallback';
-import { ref } from './hook/ref';
+import { ref, nextTick } from './hook/ref';
 export type { WDom, TagFunction, TagFunctionResolver, FragmentFunction, ComponentSubKey, ComponentRef, Props, Renew, MiddleStateWDomChildren, MiddleStateWDom, NodePointer, Param, } from './types';
 declare global {
     namespace JSX {
@@ -11,4 +11,4 @@ declare global {
         }
     }
 }
-export { h, Fragment, render, mount, mountCallback, updateCallback, ref };
+export { h, Fragment, render, mount, mountCallback, updateCallback, ref, nextTick, };

package/dist/lithent.mjs

@@ -13,6 +13,7 @@ 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 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;
@@ -65,6 +66,7 @@ const reRender = (vDom, infoVdom) => {
   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]);
@@ -81,11 +83,12 @@ const updateChildren = (children, infoChidren) => {
     }
   }
 };
+let redrawQueue = [];
+let redrawQueueTimeout = false;
+const xmlnsRef = { value: "" };
 const componentKeyRef = { value: {} };
 const needDiffRef = { value: false };
 const componentRef = /* @__PURE__ */ new WeakMap();
-const redrawQueue = { value: [] };
-const redrawQueueTimeout = { value: null };
 const componentRender = (componentKey) => () => {
   var _a;
   const up = (_a = componentRef.get(componentKey)) == null ? void 0 : _a.up;
@@ -113,12 +116,13 @@ const getComponentKey = () => componentKeyRef.value;
 const getComponentSubInfo = (componentKey, subKey) => componentRef.get(componentKey)[subKey];
 const setRedrawAction = (componentKey, exec) => {
   componentRef.get(componentKey).up = () => {
-    redrawQueue.value.push({
+    redrawQueue.push({
       componentKey,
       exec
     });
-    if (!redrawQueueTimeout.value) {
-      redrawQueueTimeout.value = setTimeout(execRedrawQueue);
+    if (!redrawQueueTimeout) {
+      redrawQueueTimeout = true;
+      queueMicrotask(execRedrawQueue);
     }
   };
 };
@@ -138,7 +142,7 @@ const recursiveGetChildKeys = (wDom, result) => {
 };
 const execRedrawQueue = () => {
   let childItemList = [];
-  redrawQueue.value.forEach((item) => {
+  redrawQueue.forEach((item) => {
     var _a, _b;
     const childVd = (_b = (_a = componentRef.get(item.componentKey)) == null ? void 0 : _a.vd) == null ? void 0 : _b.value;
     if (childVd) {
@@ -146,7 +150,7 @@ const execRedrawQueue = () => {
     }
   });
   const addedKey = [];
-  const result = redrawQueue.value.reduce((acc, item) => {
+  const result = redrawQueue.reduce((acc, item) => {
     const { componentKey } = item;
     if (childItemList.includes(componentKey) || addedKey.includes(componentKey)) {
       return acc;
@@ -161,6 +165,8 @@ const execRedrawQueue = () => {
       action.exec();
     }
   }
+  redrawQueue = [];
+  redrawQueueTimeout = false;
 };
 const unmount = (effectAction) => {
   componentRef.get(getComponentKey()).umts.push(effectAction);
@@ -190,10 +196,17 @@ const removeItem = (componentKey) => {
     componentRef.delete(componentKey);
   }
 };
-const mountCallback = (effectAction) => {
-  const mts = componentRef.get(getComponentKey()).mts;
-  mts.push(effectAction);
+let mountedQueue = [];
+const execMountedQueue = () => {
+  mountedQueue.forEach((item) => runMountedQueueFromWDom(item));
+  mountedQueue = [];
 };
+const addMountedQueue = (wDom) => {
+  if (wDom.componentKey) {
+    mountedQueue.push(wDom);
+  }
+};
+const mountCallback = (effectAction) => componentRef.get(getComponentKey()).mts.push(effectAction);
 const runMountedQueueFromWDom = (newWDom) => {
   const { componentKey } = newWDom;
   if (componentKey) {
@@ -256,15 +269,14 @@ const render = (wDom, wrapElement, afterElement) => {
   } else {
     wrapElement.appendChild(Dom);
   }
+  execMountedQueue();
   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);
     }
   };
 };
@@ -345,9 +357,9 @@ const typeAdd = (newWDom, newElement) => {
       } else {
         parentEl.appendChild(newElement);
       }
+      execMountedQueue();
     }
   }
-  runMountedQueueFromWDom(newWDom);
 };
 const startFindNextBrotherElement = (wDom, parentWDom) => {
   const brothers = parentWDom.children || [];
@@ -359,7 +371,7 @@ const startFindNextBrotherElement = (wDom, parentWDom) => {
   if (finedNextEl) {
     return finedNextEl;
   }
-  if (!parentWDom.isRoot && ["fragment", "loop"].includes(parentType)) {
+  if (!parentWDom.isRoot && checkVirtualType(parentType)) {
     return startFindNextBrotherElement(parentWDom, getParent(parentWDom));
   } else if (parentWDom.isRoot && parentWDom.afterElement) {
     return parentWDom.afterElement;
@@ -370,7 +382,7 @@ const findChildFragmentNextElement = (candidiateBrothers) => candidiateBrothers.
   (targetEl, bItem) => {
     const type = bItem.type;
     const el = bItem.el;
-    const isFragment = type && ["fragment", "loop"].includes(type);
+    const isFragment = type && checkVirtualType(type);
     if (targetEl) {
       return targetEl;
     } else if (isFragment) {
@@ -394,9 +406,9 @@ const typeReplace = (newWDom) => {
       if (parentElement) {
         parentElement.replaceChild(newElement, orignalElement);
       }
+      execMountedQueue();
     }
   }
-  runMountedQueueFromWDom(newWDom);
 };
 const removeEvent = (oldProps, element) => {
   Object.entries(oldProps || {}).forEach(
@@ -440,7 +452,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(
@@ -464,7 +476,18 @@ const updateProps = (props, element, oldProps) => {
       } 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];
     }
@@ -476,11 +499,14 @@ const updateProps = (props, element, oldProps) => {
 const wDomToDom = (wDom) => {
   let element;
   const { type, tag, text, props, children = [] } = wDom;
-  const isVirtualType = type === "fragment" || type === "loop";
+  const isVirtualType = checkVirtualType(type);
+  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 {
@@ -489,7 +515,10 @@ const wDomToDom = (wDom) => {
   wDomChildrenToDom(children, element);
   updateProps(props, element);
   wDom.el = element;
-  runMountedQueueFromWDom(wDom);
+  addMountedQueue(wDom);
+  if (tag === "svg") {
+    xmlnsRef.value = "";
+  }
   return element;
 };
 const wDomChildrenToDom = (children, parentElement) => {
@@ -531,7 +560,7 @@ const updateStyle = (style, oldStyle, element) => {
   }
 };
 const findRealParentElement = (vDom) => {
-  const isVirtualType = vDom.type === "fragment" || vDom.type === "loop";
+  const isVirtualType = checkVirtualType(vDom.type);
   if (vDom.isRoot && isVirtualType) {
     return vDom.wrapElement;
   }
@@ -617,7 +646,7 @@ const remakeChildrenForUpdate = (newWDom, originalWDom) => {
   });
 };
 const remakeChildrenForLoopUpdate = (newWDom, originalWDom) => {
-  const { remakedChildren, unUsedChildren } = diffLoopChildren(
+  const [remakedChildren, unUsedChildren] = diffLoopChildren(
     newWDom,
     originalWDom
   );
@@ -641,17 +670,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;
@@ -667,8 +690,6 @@ const runUpdateCallback = () => {
   if (updateReqs == null ? void 0 : updateReqs.length) {
     updateReqs.forEach((callback) => callback());
   }
-  redrawQueue.value = [];
-  redrawQueueTimeout.value = null;
 };
 const Fragment = (_props, ...children) => ({
   type: "fragment",
@@ -734,14 +755,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) => {
@@ -807,11 +828,13 @@ const makeChildrenItem = (item) => {
   return item;
 };
 const ref = (initValue) => ({ value: initValue });
+const nextTick = () => Promise.resolve();
 export {
   Fragment,
   h,
   mount,
   mountCallback,
+  nextTick,
   ref,
   render,
   updateCallback