lithent 0.36.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithent",
-  "version": "0.36.2",
+  "version": "1.0.0",
   "description": "An extensible virtual DOM library for lightweight use in a variety of environments.",
   "packageManager": "pnpm@7.6.0",
   "main": "./dist/lithent.umd.js",
@@ -17,8 +17,8 @@
     "build": "pnpm build:core && pnpm build:helper && pnpm build:examples && pnpm build:docs",
     "build:p": "pnpm build:core && pnpm -r build",
     "dev": "pnpm watch:core & pnpm watch:helper & pnpm dev:examples",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "clean": "pnpm clean:dist && pnpm clean:module",
     "clean:dist": "pnpm -r exec rm -rf dist && rm -rf dist",
     "clean:module": "pnpm -r exec rm -rf dist node_modules && rm -rf node_modules",
@@ -58,7 +58,9 @@
   },
   "homepage": "https://github.com/superlucky84/lithent",
   "license": "MIT",
-  "keywords": ["lithent"],
+  "keywords": [
+    "lithent"
+  ],
   "devDependencies": {
     "@babel/cli": "^7.18.9",
     "@babel/core": "^7.18.9",
@@ -67,16 +69,20 @@
     "@nabla/vite-plugin-eslint": "^1.4.1",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
+    "@vitest/coverage-v8": "^0.32.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "happy-dom": "^9.20.3",
+    "jsdom": "^22.1.0",
     "prettier": "^2.3.2",
     "terser": "^5.17.7",
     "typescript": "^4.7.4",
     "vite": "3.2.7",
     "vite-plugin-checker": "^0.4.9",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^2.3.0",
+    "vitest": "^0.32.2"
   },
   "volta": {
     "node": "20.3.0"

package/src/diff.ts

@@ -146,7 +146,7 @@ const remakeChildrenForUpdate = (newWDom: WDom, originalWDom: WDom) => {
 };
 
 const remakeChildrenForLoopUpdate = (newWDom: WDom, originalWDom: WDom) => {
-  const { remakedChildren, unUsedChildren } = diffLoopChildren(
+  const [remakedChildren, unUsedChildren] = diffLoopChildren(
     newWDom,
     originalWDom
   );
@@ -165,7 +165,6 @@ const remakeChildrenForLoopUpdate = (newWDom: WDom, originalWDom: WDom) => {
 const diffLoopChildren = (newWDom: WDom, originalWDom: WDom) => {
   const newChildren = [...(newWDom.children || [])];
   const originalChildren = [...(originalWDom.children || [])];
-
   const remakedChildren = newChildren.map(item => {
     const originalItem = findSameKeyOriginalItem(item, originalChildren);
     const childItem = makeNewWDomTree(item, originalItem);
@@ -179,19 +178,13 @@ const diffLoopChildren = (newWDom: WDom, originalWDom: WDom) => {
     return childItem;
   });
 
-  return {
-    remakedChildren,
-    unUsedChildren: originalChildren,
-  };
+  return [remakedChildren, originalChildren];
 };
 
-const findSameKeyOriginalItem = (item: WDom, originalChildren: WDom[]) => {
-  const key = getKey(item);
-
-  return originalChildren.find(
-    orignalChildItem => getKey(orignalChildItem) === key
+const findSameKeyOriginalItem = (item: WDom, originalChildren: WDom[]) =>
+  originalChildren.find(
+    orignalChildItem => getKey(orignalChildItem) === getKey(item)
   );
-};
 
 const getKey = (target: WDom) =>
   target?.componentProps?.key ?? target?.props?.key;

package/src/hook/mountCallback.ts

@@ -4,14 +4,21 @@ import {
   componentRef,
   getComponentKey,
 } from '@/utils/universalRef';
-
 import { unmount } from '@/hook/unmount';
 
-export const mountCallback = (effectAction: () => void) => {
-  const mts = componentRef.get(getComponentKey())!.mts;
+let mountedQueue: WDom[] = [];
 
-  mts.push(effectAction);
+export const execMountedQueue = () => {
+  mountedQueue.forEach(item => runMountedQueueFromWDom(item));
+  mountedQueue = [];
+};
+export const addMountedQueue = (wDom: WDom) => {
+  if (wDom.componentKey) {
+    mountedQueue.push(wDom);
+  }
 };
+export const mountCallback = (effectAction: () => void) =>
+  componentRef.get(getComponentKey())!.mts.push(effectAction);
 
 export const runMountedQueueFromWDom = (newWDom: WDom) => {
   const { componentKey } = newWDom;

package/src/hook/ref.ts

@@ -1 +1,2 @@
 export const ref = <T>(initValue: T) => ({ value: initValue });
+export const nextTick = () => Promise.resolve();

package/src/hook/updateCallback.ts

@@ -1,9 +1,4 @@
-import {
-  componentRef,
-  redrawQueue,
-  redrawQueueTimeout,
-  getComponentKey,
-} from '@/utils/universalRef';
+import { componentRef, getComponentKey } from '@/utils/universalRef';
 
 import { useUpdated } from '@/hook/useUpdate';
 
@@ -23,7 +18,4 @@ export const runUpdateCallback = () => {
   if (updateReqs?.length) {
     updateReqs.forEach(callback => callback());
   }
-
-  redrawQueue.value = [];
-  redrawQueueTimeout.value = null;
 };

package/src/index.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,
@@ -27,4 +27,13 @@ declare global {
   }
 }
 
-export { h, Fragment, render, mount, mountCallback, updateCallback, ref };
+export {
+  h,
+  Fragment,
+  render,
+  mount,
+  mountCallback,
+  updateCallback,
+  ref,
+  nextTick,
+};

package/src/render.ts

@@ -7,13 +7,14 @@ import {
   checkOptionElement,
   checkTextareaElement,
   checkCheckableElement,
+  checkVirtualType,
 } from '@/utils/predicator';
 
-import { componentRef } from '@/utils/universalRef';
+import { componentRef, xmlnsRef } from '@/utils/universalRef';
 import { runUnmountQueueFromWDom } from '@/hook/unmount';
-import { runMountedQueueFromWDom } from '@/hook/mountCallback';
+import { execMountedQueue, addMountedQueue } from '@/hook/mountCallback';
 import { runUpdatedQueueFromWDom } from '@/hook/useUpdate';
-import { getParent, getEventName } from '@/utils';
+import { getParent, getEventName, getAttrKey } from '@/utils';
 
 export const render = (
   wDom: WDom,
@@ -33,14 +34,14 @@ export const render = (
     wrapElement.appendChild(Dom);
   }
 
+  execMountedQueue();
+
   return () => {
-    if (wDom.componentProps) {
-      const component = componentRef.get(wDom.componentProps)?.vd.value;
-      if (component) {
-        runUnmountQueueFromWDom(component);
-        recursiveRemoveEvent(component);
-        rootDelete(component);
-      }
+    const component = componentRef.get(wDom.componentProps || {})?.vd.value;
+    if (component) {
+      runUnmountQueueFromWDom(component);
+      recursiveRemoveEvent(component);
+      rootDelete(component);
     }
   };
 };
@@ -121,7 +122,7 @@ const typeAdd = (
   newElement?: HTMLElement | DocumentFragment | Text
 ) => {
   if (!newElement) {
-    newElement = wDomToDom(newWDom);
+    newElement = wDomToDom(newWDom) as HTMLElement;
   }
 
   const parentWDom = getParent(newWDom);
@@ -138,10 +139,10 @@ const typeAdd = (
       } else {
         parentEl.appendChild(newElement);
       }
+
+      execMountedQueue();
     }
   }
-
-  runMountedQueueFromWDom(newWDom);
 };
 
 const startFindNextBrotherElement = (
@@ -160,7 +161,7 @@ const startFindNextBrotherElement = (
     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;
@@ -179,7 +180,7 @@ const findChildFragmentNextElement = (
     ) => {
       const type = bItem.type;
       const el = bItem.el;
-      const isFragment = type && ['fragment', 'loop'].includes(type);
+      const isFragment = type && checkVirtualType(type);
 
       if (targetEl) {
         return targetEl;
@@ -208,10 +209,9 @@ const typeReplace = (newWDom: WDom) => {
       if (parentElement) {
         parentElement.replaceChild(newElement, orignalElement);
       }
+      execMountedQueue();
     }
   }
-
-  runMountedQueueFromWDom(newWDom);
 };
 
 const removeEvent = (
@@ -266,7 +266,7 @@ const updateText = (newWDom: WDom) => {
 
 const updateProps = (
   props?: Props,
-  element?: HTMLElement | DocumentFragment | Text,
+  element?: HTMLElement | Element | DocumentFragment | Text,
   oldProps?: Props
 ) => {
   const originalProps = { ...oldProps };
@@ -275,11 +275,7 @@ const updateProps = (
     ([dataKey, dataValue]: [string, unknown]) => {
       if (dataKey === 'key') {
         // Do nothing
-      } else if (
-        dataKey === 'innerHTML' &&
-        element &&
-        typeof dataValue === 'string'
-      ) {
+      } else if (dataKey === 'innerHTML' && typeof dataValue === 'string') {
         (element as HTMLElement).innerHTML = dataValue;
       } else if (checkStyleData(dataKey, dataValue)) {
         updateStyle(
@@ -305,7 +301,18 @@ const updateProps = (
       } else if (checkOptionElement(element) && dataKey === 'selected') {
         (element as HTMLOptionElement).selected = !!dataValue;
       } else if (checkNormalAttribute(dataValue)) {
-        (element as HTMLElement).setAttribute(dataKey, String(dataValue));
+        if (xmlnsRef.value && dataKey !== 'xmlns') {
+          (element as HTMLElement).setAttributeNS(
+            null,
+            getAttrKey(dataKey),
+            String(dataValue)
+          );
+        } else {
+          (element as HTMLElement).setAttribute(
+            getAttrKey(dataKey),
+            String(dataValue)
+          );
+        }
       }
 
       delete originalProps[dataKey];
@@ -320,12 +327,18 @@ const updateProps = (
 const wDomToDom = (wDom: 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?.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 {
@@ -335,16 +348,20 @@ const wDomToDom = (wDom: WDom) => {
   wDomChildrenToDom(children, element);
   updateProps(props, element);
 
-  wDom.el = element;
+  wDom.el = element as HTMLElement;
 
-  runMountedQueueFromWDom(wDom);
+  addMountedQueue(wDom);
+
+  if (tag === 'svg') {
+    xmlnsRef.value = '';
+  }
 
   return element;
 };
 
 const wDomChildrenToDom = (
   children: WDom[],
-  parentElement?: HTMLElement | DocumentFragment | Text
+  parentElement?: HTMLElement | Element | DocumentFragment | Text
 ) => {
   const elementChildren = children.reduce(
     (acc: DocumentFragment, childItem: WDom) => {
@@ -384,7 +401,7 @@ const updateEvent = (
 const updateStyle = (
   style: Record<string, string>,
   oldStyle: Record<string, string>,
-  element?: HTMLElement | DocumentFragment | Text
+  element?: HTMLElement | Element | DocumentFragment | Text
 ) => {
   const originalStyle = { ...oldStyle };
   const elementStyle = (element as HTMLElement)?.style;
@@ -404,7 +421,7 @@ const updateStyle = (
 const findRealParentElement = (
   vDom: WDom
 ): HTMLElement | DocumentFragment | Text | undefined => {
-  const isVirtualType = vDom.type === 'fragment' || vDom.type === 'loop';
+  const isVirtualType = checkVirtualType(vDom.type);
   if (vDom.isRoot && isVirtualType) {
     return vDom.wrapElement;
   }

package/src/{examples → tests}/callback.tsx

@@ -61,7 +61,6 @@ const CallbackRoot = mount(renew => {
 
   const toggle = () => {
     isShow = !isShow;
-    console.log(isShow);
     renew();
   };
 

package/src/tests/example1.tsx

@@ -0,0 +1,75 @@
+// example.jsx
+import { h, Fragment, render, mount, ref, nextTick } from '@/index';
+const testChangeRef = ref<null | (() => void)>(null);
+
+const computed = <T,>(
+  value: () => T
+): {
+  value: T;
+  v: T;
+} => {
+  let result = value;
+
+  return {
+    get value() {
+      return result();
+    },
+    get v() {
+      return result();
+    },
+    set value(_newValue: T) {
+      throw new Error(`You can't change 'computed'`);
+    },
+    set v(_newValue: T) {
+      throw new Error(`You can't change 'computed'`);
+    },
+  };
+};
+
+const Component = mount(renew => {
+  let count = 1;
+  const increase = () => {
+    count += 1;
+    renew();
+  };
+  testChangeRef.value = increase;
+  const result = computed<number>(() =>
+    [1, 3, 5, 7, 9].reduce(
+      (accumulator, current) => accumulator + current * count,
+      0
+    )
+  );
+
+  return () => (
+    <>
+      <button type="text" onClick={increase}>
+        increase
+      </button>
+      <span>computed: {result.v}</span>
+    </>
+  );
+});
+
+const testWrap =
+  document.getElementById('root') || document.createElement('div');
+
+render(<Component />, testWrap);
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it('Is renew working properly?', () => {
+    expect(testWrap.outerHTML).toBe(
+      '<div><button type="text">increase</button><span>computed: 25</span></div>'
+    );
+    if (testChangeRef.value) {
+      testChangeRef.value();
+      testChangeRef.value();
+      testChangeRef.value();
+    }
+    nextTick().then(() => {
+      expect(testWrap.outerHTML).toBe(
+        '<div><button type="text">increase</button><span>computed: 100</span></div>'
+      );
+    });
+  });
+}

package/src/tests/example10.tsx

@@ -0,0 +1,90 @@
+// example.jsx
+import { h, Fragment, render, mount, ref, nextTick } from '@/index';
+const testChangeRef = ref<null | ((newList: string[]) => void)>(null);
+
+const Checkbox = mount(r => {
+  let checkedList = ['sara'];
+
+  const handleInput = (event: InputEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    const isInclude = checkedList.includes(value);
+
+    if (isInclude) {
+      checkedList = [...checkedList.filter(item => item !== value)];
+    } else {
+      checkedList = [...checkedList, value];
+    }
+    r();
+  };
+
+  testChangeRef.value = (newList: string[]) => {
+    checkedList = newList;
+    r();
+  };
+
+  return () => (
+    <>
+      <input
+        type="checkbox"
+        name="checkname"
+        onChange={handleInput}
+        value="john"
+        checked={checkedList.includes('john')}
+      />{' '}
+      John
+      <input
+        type="checkbox"
+        name="checkname"
+        onChange={handleInput}
+        value="sara"
+        checked={checkedList.includes('sara')}
+      />{' '}
+      Sara
+      <input
+        type="checkbox"
+        name="checkname"
+        onChange={handleInput}
+        value="tom"
+        checked={checkedList.includes('tom')}
+      />{' '}
+      Tom
+    </>
+  );
+});
+
+const testWrap =
+  document.getElementById('root') || document.createElement('div');
+
+render(<Checkbox />, testWrap);
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it('You should see the initial value of the checkbox.', () => {
+    expect(testWrap.outerHTML).toBe(
+      '<div><input type="checkbox" name="checkname" value="john"> John<input type="checkbox" name="checkname" value="sara"> Sara<input type="checkbox" name="checkname" value="tom"> Tom</div>'
+    );
+    expect(
+      (
+        Array.from(
+          testWrap.querySelectorAll('input[name="checkname"]:checked')
+        ) as HTMLFormElement[]
+      ).map(item => item.value)
+    ).toEqual(['sara']);
+  });
+
+  it('The changed value should be reflected in the checkbox.', () => {
+    if (testChangeRef.value) {
+      testChangeRef.value(['john', 'tom']);
+    }
+
+    nextTick().then(() => {
+      expect(
+        (
+          Array.from(
+            testWrap.querySelectorAll('input[name="checkname"]:checked')
+          ) as HTMLFormElement[]
+        ).map(item => item.value)
+      ).toEqual(['john', 'tom']);
+    });
+  });
+}

package/src/tests/example11.tsx

@@ -0,0 +1,82 @@
+import { h, Fragment, render, mount, ref, nextTick } from '@/index';
+const testChangeRef = ref<null | ((newText: string) => void)>(null);
+
+const Radio = mount(r => {
+  let text = 'sara';
+
+  const handleInput = (event: InputEvent) => {
+    text = (event.target as HTMLInputElement).value;
+    r();
+  };
+
+  testChangeRef.value = (newText: string) => {
+    text = newText;
+    r();
+  };
+
+  return () => (
+    <>
+      <input
+        type="radio"
+        name="checkname"
+        onChange={handleInput}
+        value="john"
+        checked={text === 'john'}
+      />{' '}
+      John
+      <input
+        type="radio"
+        name="checkname"
+        onChange={handleInput}
+        value="sara"
+        checked={text === 'sara'}
+      />{' '}
+      Sara
+      <input
+        type="radio"
+        name="checkname"
+        onChange={handleInput}
+        value="tom"
+        checked={text === 'tom'}
+      />{' '}
+      Tom
+    </>
+  );
+});
+
+const testWrap =
+  document.getElementById('root') || document.createElement('div');
+
+render(<Radio />, testWrap);
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it('You should see the initial value of the radio.', () => {
+    expect(testWrap.outerHTML).toBe(
+      '<div><input type="radio" name="checkname" value="john"> John<input type="radio" name="checkname" value="sara"> Sara<input type="radio" name="checkname" value="tom"> Tom</div>'
+    );
+    expect(
+      (
+        Array.from(
+          testWrap.querySelectorAll('input[name="checkname"]:checked')
+        ) as HTMLFormElement[]
+      ).map(item => item.value)
+    ).toEqual(['sara']);
+  });
+
+  it('The changed value should be reflected in the radio.', () => {
+    if (testChangeRef.value) {
+      testChangeRef.value('tom');
+    }
+
+    nextTick().then(() => {
+      expect(
+        (
+          Array.from(
+            testWrap.querySelectorAll('input[name="checkname"]:checked')
+          ) as HTMLFormElement[]
+        ).map(item => item.value)
+      ).toEqual(['tom']);
+    });
+  });
+}