vaderjs 1.3.3-alpha-28 → 1.3.3-alpha-30

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-28",
+  "version": "1.3.3-alpha-30",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -101,9 +101,11 @@ class VaderRouter{
         if (part.startsWith(':')) {
           const paramName = part.slice(1);
           params[paramName] = hashParts[index];
-        }else if(part.startsWith('*')){
-          // remove queries from this par
-          params[0] = hashParts.slice(index).join('/').split('?')[0];
+        }else if(part.startsWith('*')){ 
+          let array = hashParts.slice(index)
+          array.forEach((i, index)=>{
+            params[index] = i
+          })
         }
       });
       return params;
@@ -131,38 +133,56 @@ class VaderRouter{
     handleRoute(hash) {
       hash = hash.slice(1);
       let status = 200;
+      let paramsCatchall = {}
       let route = this.routes.find((route) => {
-       
         if (route.path === hash) {
           return true;
         }
-        const routePathParts = route.path.split('/');
-        const hashParts = hash.split('/');
-        if (routePathParts.length !== hashParts.length) {
-          return false;
-        }else if(routePathParts[routePathParts.length-1].startsWith('*')){
+    
+        if (route.path.includes('*') || route.path.includes(':')) {
+          const routeParts = route.path.split('/');
+          const hashParts = hash.split('/');
+    
+          if (routeParts.length !== hashParts.length && !route.path.endsWith('*')) { 
+            return false;
+          }
+    
+          for (let index = 0; index < routeParts.length; index++) {
+            const routePart = routeParts[index];
+            const hashPart = hashParts[index];
+    
+            if (routePart.startsWith(':') || routePart.startsWith('*')) {
+               
+              continue;
+            }
+    
+            if (routePart !== hashPart) {
+              
+              return false;
+            }
+          }
+    
           return true;
         }
-        const params = this.extractParams( route.path, hash);
+    
+        const params = this.extractParams(route.path, hash);
         return Object.keys(params).length > 0;
       });
     
+      
       if (!route) {
-        route = this.routes.find((route) => {
+        route = this.routes.find((errorRoute) => {
+          if (errorRoute.path === '/404') {
+            this.error = true;
+            return true;
+          } else if (!this.error && errorRoute.path !== '/404') {
            
-           if(route.path === '/404'){
-            return  true;
-           }else{
-             window.location.hash = this.basePath  
-           }
+          }
         });
-  
-        route ? status = 200 :
-  
-        status = 404;
+    
+        status = route ? 200 : 404;
       }
-  
-       
+     
       const queryParams = this.extractQueryParams(hash);
       const params =  route && route.path ? this.extractParams(route.path, hash) : {};
       const req = {
@@ -204,8 +224,8 @@ class VaderRouter{
         },
         render: async (/**@type {Component} */ Component, req, res) => {
           
-            if(!Component.default || !Component.constructor){
-              let message = !Component.default ? 'default' : 'constructor';
+            if(!Component || !Component.default || !Component.constructor){
+              let message = !Component || !Component.default ? 'default' : 'constructor';
               switch(message){
                 case 'default':
                   throw new Error(`Component must have a default export ex: return {default: Component}`);
@@ -225,6 +245,7 @@ class VaderRouter{
             if(!document.querySelector('#root')){
               throw new Error('Root element not found, please add an element with id root');
             }
+            Component.router.use = this.use.bind(this)
             Component.state = {}
             Component.reset();
             Component.components = {}
@@ -234,6 +255,16 @@ class VaderRouter{
             Component.bindMount();
             Component.onMount()
            
+           
+        },
+        setQuery: (query) => {
+          let queryString = '';
+          Object.keys(query).forEach((key, index) => {
+            queryString += `${index === 0 ? '?' : '&'}${key}=${query[key]}`;
+          }); 
+          let route = window.location.hash.split('?')[0];
+          queryString = queryString.replace('/', '-').replaceAll('/', '-')
+          window.location.hash = `${route}${queryString}`;
         },
         send: (data) => {
           document.querySelector('#root').innerHTML = data;
@@ -250,16 +281,16 @@ class VaderRouter{
           }else{
             throw new Error('Selector must be a string');
           }
-        },
+        } 
       };
       this.middlewares.forEach((middleware) => {
         middleware(req, res);
       });
     
       route ? route.handler(req, res) : null;
-       
     }
     
+    
   }
 
   window.VaderRouter = VaderRouter;

package/vader.js

@@ -576,8 +576,8 @@ function Compiler(func) {
       .replaceAll(`={\``, ':`')
       .replaceAll('`}', '`')
       .replaceAll(",,", ',')
-      
-      .replaceAll(/=([A-z])/g, ":$1")
+      .replaceAll(/=(?=(?:(?:[^"']*["'][^"']*['"])*[^"']*$))/g, ':');
+ 
       props = props.replace(/:('[^']*'|"[^"]*")/g, ':$1,');  
       // ANY VALUE NUMBER BOOLEAN OR STRING
       props = props.replace(/=(\d+)/g, ':$1,');
@@ -646,29 +646,42 @@ async function Build() {
   });
   
   // Process files in the 'pages' directory
+  let appjs = '';
+  let hasWritten = []
+  const writejs = () =>{
+    writer(process.cwd() + '/dist/app.js', appjs)
+  }
   for await (let file of glb) {
     // Normalize file paths
     let origin = file.replace(/\\/g, '/');
     let fileName =  origin.split('/pages/')[1].split('.jsx')[0].replace('.jsx', '') + '.jsx';
     let isBasePath = fileName === 'index.jsx';
   
-    // Extract URL-related information from the file path
-    let aburl = origin.split('pages')[1].split('.jsx')[0].replace('.jsx', '').replace('/index', '').replace('/_', '/:').replace('/[', '/:').replace(']', '');
-    aburl.includes('[') ? aburl = '/' + aburl.split('[')[0].replace('/', '') : null;
+    // Extract all dynamic parameters from the file path [param1]/[param2]/[param3
+    let aburl =  origin.split('/pages')[1].split('.jsx')[0].replace('.jsx', '').split('[').join(':').split(']').join('');
+     
+    if(aburl.includes('...')){
+      // this is a catch all route
+      // it should be /pages/[...]/index.jsx or /pages/[...].jsx  
+      aburl = aburl.split('...').join('*').split(':*').join('*')
+      aburl = aburl.replaceAll('./index', '')  
+      
+    }
   
     // Create an object with URL and pathname properties
     let obj = {
-      url: isBasePath ? '/' : aburl,
+      url: isBasePath ? '/' : aburl.replaceAll('index', ''),
       pathname: `/pages/${origin.split('pages/')[1].split('.jsx')[0].replace('.jsx', '')}.jsx`,
       fullpath: origin,
     };
   
+   
     // Read and compile file content
     let data = await fs.readFileSync(origin, "utf8");
     data = Compiler(data) 
    
     await writer(process.cwd() + "/dist/pages/" + fileName, data);
-  
+   
     // Generate routing logic
     let js = `
       router.get('${obj.url}', async (req, res) => {
@@ -676,13 +689,11 @@ async function Build() {
       }) 
       //@desc ${obj.pathname}
     ` + '\n';
-  
-    // Update 'app.js' file with routing logic
-    let before = fs.existsSync(process.cwd() + "/dist/app.js") ? await reader(process.cwd() + "/dist/app.js") : '';
-    let newfile = before + '\n' + js;
-    if (!before.includes(`//@desc ${obj.pathname}`)) {
-      await writer(process.cwd() + "/dist/app.js", newfile);
-    }
+    appjs += js
+ 
+    writejs()
+
+     
 
     let beforeHTML = fs.existsSync(process.cwd() + "/dist/index.html") ? await reader(process.cwd() + "/dist/index.html") : '';
     if(!beforeHTML.includes(`<link rel="prefetch" href="/pages/${origin.split('pages/')[1] }" as="fetch">`)){
@@ -690,6 +701,7 @@ async function Build() {
       await writer(process.cwd() + "/dist/index.html", newHTML);
     }
   }
+  
    
  
   const scannedSourceFiles = await glob("**/**.{jsx,js}", {