vaderjs 1.5.7 → 1.5.9

package/index.ts

@@ -73,15 +73,25 @@ export const useEffect = (callback:any, dependencies: any[]) => {
 // make a switch function component
 
 
-
-export const Fragment = (props: any, children: any) => { 
+export const A  = (props: any, children: any) => {
+   function handleClick(e) {
+    e.preventDefault();
+    window.history.pushState({}, "", props.href);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+    window.location.reload();
+   }
   return  {
-    type: isServer ? null : "div",
-    props:{},
+    type: "a",
+    props: {...props, onClick: handleClick},
     children: children || [],
   }
 }
 
+
+export const Fragment = (props: any, children: any) => { 
+  return  children[0];
+}
+
 globalThis.Fragment = Fragment;
 
 /**
@@ -142,15 +152,19 @@ export function Match({ when, children }) {
  * @description -  Manage state and forceupdate specific affected elements
  * @param key 
  * @param initialState 
- * @returns {state,  (newState: any, Element: string) => void, key}
+ * @param persist - persist state on reload
+ * @returns {()=> T,  (newState: any, Element: string) => void, key}
  */
-export const useState = <T>(initialState: T) => {
+export const useState = <T>(initialState: T, persist: false) => {
   const setState = (newState: T) => {
     initialState = newState;
   }
+  /** 
+   * @returns {T}
+   */
   const getVal = () => {
-    return initialState;
-  }
+    return initialState as T
+  } 
 
   return [getVal, setState];
 } 
@@ -201,7 +215,7 @@ export class Component {
       }
     }
   }
-  useState(key, defaultValue) {
+  useState(key, defaultValue, persist = false) {
     if (typeof window === "undefined")
       return [defaultValue, () => {
       }];
@@ -216,7 +230,7 @@ export class Component {
     if (!window["listener" + key] && !isServer) {
       window["listener" + key] = true;
       window.addEventListener("beforeunload", () => {
-        sessionStorage.removeItem("state_" + key);
+        !persist && sessionStorage.removeItem("state_" + key);
       });
     }
     const setValue = (newValue) => {
@@ -262,30 +276,54 @@ export class Component {
     update: (oldElement, newElement) => {
 
       if (this.Reconciler.shouldUpdate(oldElement, newElement)) {
-        console.log("should update");
-        oldElement.replaceWith(newElement);
+        let part = this.Reconciler.shouldUpdate(oldElement, newElement, true);
+        if (part === true) {
+          if (oldElement.nodeType === 3) {
+            oldElement.nodeValue = newElement.nodeValue;
+          } else {
+            oldElement.innerHTML = newElement.innerHTML;
+            // swap attributes
+            for (let i = 0; i < newElement.attributes.length; i++) {
+              let attr = newElement.attributes[i];
+              oldElement.setAttribute(attr.name, attr.value);
+            }
+          }
+        } else if (part.type === "attribute") {
+          oldElement.setAttribute(part.name, part.value);
+        } 
       } else {
         for (let i = 0; i < newElement.childNodes.length; i++) {
-          this.Reconciler.update(oldElement.childNodes[i], newElement.childNodes[i]);
+          this.Reconciler.update(oldElement.childNodes[i], newElement.childNodes[i], true);
         }
       }
     },
-    shouldUpdate(oldElement, newElement) {
+    shouldUpdate(oldElement, newElement, isChild = false) {
       if (oldElement.nodeType !== newElement.nodeType) {
-        return true;
+        // and both do not contain same text
+
+        return oldElement.innerHTML !== newElement.innerHTML ? { type: 'innerHTML' } : true;
       }
       if (oldElement.nodeType === 3 && newElement.nodeType === 3) {
-        return oldElement.textContent !== newElement.textContent;
+        if (oldElement.nodeValue !== newElement.nodeValue) {
+          return true;
+        }
       }
       if (oldElement.nodeName !== newElement.nodeName) {
         return true;
-      }
-      if (oldElement.innerHTML !== newElement.innerHTML) {
-        return true;
-      }
+      } 
       if (oldElement.childNodes.length !== newElement.childNodes.length) {
         return true;
       }
+     if(newElement.attributes){
+      for (let i = 0; i < newElement.attributes.length; i++) {
+        let attr = newElement.attributes[i];
+        if (oldElement.getAttribute(attr.name) !== attr.value) {
+          return  { type: "attribute", name: attr.name, value: attr.value };
+        }
+      }
+     }
+      
+  
       return false;
     }
   };
@@ -345,8 +383,7 @@ export class Component {
         } else if (typeof child === "object") {
           el.appendChild(this.parseToElement(child));
         } else {
-          let span = document.createElement("span");
-          span.innerHTML = child;
+          let span = document.createTextNode(child) 
           el.appendChild(span);
         }
       }

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "vaderjs",
-    "version": "1.5.7",
+    "version": "1.5.9",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"
     },
     "dependencies": {
-        "ansi-colors": "latest",
-        "vaderjs": "^1.5.0"
+        "ansi-colors": "latest"
     }
 }