vaderjs 1.4.5 → 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

@@ -12,12 +12,12 @@ if (!fs.existsSync(process.cwd() + '/app')) {
 if (!fs.existsSync(process.cwd() + '/public')) {
     fs.mkdirSync(process.cwd() + '/public')
 } 
-const mode = args.includes('dev') ? 'development' :  args.includes('prod') ? 'production' : null
+const mode = args.includes('dev') ? 'development' :  args.includes('prod') || args.includes('build') ? 'production' : null
 if(!mode){
     console.log(`
     Usage:
      bun vaderjs dev - Start development server output in dist/
-     bun vaderjs prod - Build for production  output in dist/
+     bun vaderjs prod - Build for production output in dist/
     `)
     process.exit(1)
 }
@@ -98,7 +98,11 @@ const handleReplacements = (code, file) => {
 
 async function generateApp() {  
 // remove files from dist
+   if(mode === 'development'){
     fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
+   }else{
+    fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
+   }
    return new Promise(async (resolve, reject) => {
     let routes = new Bun.FileSystemRouter({
         dir: process.cwd() + '/app',
@@ -196,7 +200,6 @@ async function generateApp() {
         fs.mkdirSync(process.cwd() + '/dist/src/vader', { recursive: true })
         fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
             loader: 'ts',
-            minify: true,
         }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))   
  
         const spawn = Bun.spawn({
@@ -266,7 +269,7 @@ async function generateApp() {
 
 }
 
-generateApp()
+await generateApp()
 function handleFiles(){
    return new Promise(async (resolve, reject) => {
        try {
@@ -274,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()
@@ -282,14 +288,14 @@ function handleFiles(){
        }
    }) 
 }
-handleFiles()
+await handleFiles()
 let  isBuilding = false;
 let timeout = null
 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')
@@ -300,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.5",
+    "version": "1.4.7",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "main":"./index.js",
     "bin": {