vaderjs 1.4.6 → 1.4.7

package/README.MD

@@ -45,7 +45,7 @@ Keyword folders - all files are passed from these folders to the build folder
 # Define your config
 
 ```ts
-import defineConfig from "../config";
+import defineConfig from "vaderjs/config";
 
 export default defineConfig({
     port: 3000,

package/document/index.ts

@@ -21,7 +21,7 @@ export const document = (element: any) => {
          continue;
       }
       //@ts-ignore
-      if (key.includes("on")) { 
+      if (key.startsWith("on")){
          continue;
       }
       el += ` ${key}="${attributes[key]}"`;

package/index.ts

@@ -14,6 +14,9 @@ declare global {
     state: any;
   } 
   const genKey: any; 
+  /**
+   * @description Allows you to check if current session is server or  client
+   */
   let isServer: boolean;
   /**
    * @description - The params object is used to store the query parameters of the current URL
@@ -27,6 +30,7 @@ declare global {
    * console.log(params.age) // 20
    */
   let params:  { [key: string]: string };
+  let localStorage : []
 }
 //@ts-ignore
 globalThis.isServer = typeof window === "undefined";
@@ -39,6 +43,7 @@ globalThis.params = {
   },
 };
  
+ 
 
 /**
  * @description useFetch allows you to make POST - GET - PUT - DELETE requests then returns the data, loading state and error
@@ -130,6 +135,8 @@ export class Component {
     this.effect = [];
     this.Mounted = false;
     this.element = null;
+
+     
   }
   setState(newState: any, Element: string) {
     globalThis.window.state[this.key] = { ...this.state, ...newState }; 
@@ -149,19 +156,32 @@ export class Component {
       }
     }
   }  
-   useState <T> (key: string, defaultValue: T)  { 
-    let value = sessionStorage.getItem("state_" + key) || defaultValue; 
-    typeof value === "string" ? value = JSON.parse(value) : value;
-
-    window.onbeforeunload = function() {
-      sessionStorage.removeItem("state_" + key);
-    } 
-    const setValue =  (newValue: T ,element: string) => {
-      value = newValue;  
-      sessionStorage.setItem("state_" + key, JSON.stringify(value));
-      this.state[key] = value;
-      this.forceUpdate(element)
+   useState<T>(key: string, defaultValue: T) {
+    let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+  
+    // Parse value if it's a stringified object or number
+    if (typeof value === 'string') {
+      try {
+        value = JSON.parse(value);
+      } catch (error) {
+        // Not a valid JSON, keep it as is
+      }
+    }
+  
+    // Add listener for unload event to save state
+    if (!window['listener' + key]) {
+      window['listener' + key] = true;
+      window.addEventListener('beforeunload', () => {
+        sessionStorage.removeItem('state_' + key)
+      });
     }
+  
+    const setValue = (newValue: T) => {
+      value = newValue;
+      sessionStorage.setItem("state_" + key, JSON.stringify({ type: typeof newValue, value: newValue }));
+      this.forceUpdate(this.key)
+    };
+  
     return [value, setValue];
   }
   
@@ -206,38 +226,39 @@ export class Component {
   forceUpdate(key) { 
     //@ts-ignore
     let el = Array.from(document.querySelectorAll("*")).filter((el2: any) =>{ return el2.key === key})[0]; 
-    let newl = this.parseToElement(this.render());     
+    let newl = this.toElement(); 
     if(newl.key !== key){  
       //@ts-ignore 
       newl = Array.from(newl.children).filter((el2) => el2.key === key)[0];
-    } 
-    if (this.Reconciler.shouldUpdate(el, newl)) {
-       el.replaceWith(newl);
-    }
+    }  
+    this.Reconciler.update(el, newl);
   }
   Reconciler = {
-     shouldUpdate(oldElement, newElement) {
-       if(oldElement.outerHTML === newElement.outerHTML){
-          return false;
-       }
-       let attributes = oldElement.attributes;
-        let newAttributes = newElement.attributes;
-      for (let i = 0; i < attributes.length; i++) {
-        let attribute = attributes[i];
-        if (attribute.name === "key") {
-          continue;
-        }
-        if (attribute.name === "class") {
-          if (attribute.value !== newElement.className) {
-            return true;
-          }
-          continue;
-        }
-        if (attribute.value !== newAttributes[attribute.name]) {
-          return true;
+    update: (oldElement, newElement) => {  
+      if(!oldElement || !newElement) return;
+      if (this.Reconciler.shouldUpdate(oldElement, newElement) && oldElement.tagName == newElement.tagName){ 
+          oldElement.replaceWith(newElement)
+      } else {
+        let children = oldElement.childNodes;
+        for (let i = 0; i < children.length; i++) { 
+          this.Reconciler.update(children[i], newElement.childNodes[i]);
         }
       }
-      return true;
+    },
+     shouldUpdate(oldElement, newElement) {  
+      if (oldElement.nodeType !== newElement.nodeType) {
+        return true;
+      }
+      if (oldElement.nodeType === 3 && newElement.nodeType === 3) {
+        return oldElement.textContent !== newElement.textContent;
+      }
+      if (oldElement.nodeName !== newElement.nodeName) {
+        return true;
+      }
+      if (oldElement.childNodes.length !== newElement.childNodes.length) {
+        return true;
+      }
+      return false;
     }
   }; 
    
@@ -301,7 +322,12 @@ export class Component {
   }
   toElement() { 
     let children = this.render();
+    //@ts-ignore
+    if(children.props['key']){
+      this.key = children.props['key'];
+    }
     let el = this.parseToElement(children);
+    el.key = this.key;  
     return el;
   }
   render() {
@@ -335,7 +361,7 @@ export function render(element: any, container) {
      let memoizedInstance = memoizeClassComponent(Component);
       memoizedInstance.Mounted = true;
       memoizedInstance.render =  element.bind(memoizedInstance);
-      let el = memoizedInstance.toElement();
+      let el = memoizedInstance.toElement(); 
       container.innerHTML = "";
       container.replaceWith(el);
 

package/main.js

@@ -277,6 +277,9 @@ function handleFiles(){
         for await (var i of glob.scan()){
             let file = i  
             fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
+            if(fs.existsSync(path.join(process.cwd() + '/dist', file))){
+                fs.rmSync(path.join(process.cwd() + '/dist', file))
+            }
             fs.copyFileSync(file, path.join(process.cwd() + '/dist', file))
         } 
         resolve()
@@ -292,7 +295,7 @@ if(mode === 'development'){
     const watcher = fs.watch(path.join(process.cwd() + '/app'), { recursive: true })
     const publicWatcher = fs.watch(path.join(process.cwd() + '/public'), { recursive: true })
     publicWatcher.on('change', async (event, filename) => {
-        try { 
+        try {  
             await handleFiles() 
             clients.forEach(c => {
                 c.send('reload')
@@ -303,8 +306,7 @@ if(mode === 'development'){
     })
     watcher.on('change', async (event, filename) => {
         try {
-            await generateApp()
-             
+            await generateApp() 
             handleFiles()
             clients.forEach(c => {
                 c.send('reload')

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "1.4.6",
+    "version": "1.4.7",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "main":"./index.js",
     "bin": {