vaderjs 1.3.3-alpha-62 → 1.3.3-alpha-63

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-62",
+  "version": "1.3.3-alpha-63",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -1 +1 @@
-import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){console.log(e),this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),o={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);o[s]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{o[t]=e}))}})),o}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const s={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");s[t]=n})),s}handleRoute(e){let t=200,s=e=e.slice(1),n=this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const s=t.path.split("/"),n=e.split("/");if(s.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<s.length;e++){const t=s[e],o=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==o)return!1}return!0}const n=this.extractParams(t.path,s);return Object.keys(n).length>0}));n||(n=this.routes.find((e=>{if(e.path.includes("/404"))return this.error=!0,!0;!this.error&&e.path.includes("/404")&&(window.location.hash=this.basePath)})),t=n?200:404);const o=this.extractQueryParams(s),r=n&&n.path?this.extractParams(n.path,s):{},i={headers:{},params:r,query:o,path:e,url:window.location.href+e,method:n?n.method:"get",pause:e=>{i.pause=e},timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const a={status:t,log:e=>{void 0===e?console.log(`${i.path} ${i.method} ${a.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":n.method,"Response Status":a.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s)=>{function n(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let i=new Component;if(n(e.default)){let t=new e.default;i.state=t.state,console.log(i.state),i=t}else{let n=e.default.toString(),a=n.split("this.key")[1]?n.split("this.key")[1].split("=")[1].split(";")[0].trim():n.split('key="')?n.split('key="')[1].split('"')[0]:null,l=(n.match(/return\s*`([\s\S]*)`/),n.split("return")[1].split("`")[0]);l=l.replace(/,\s*$/,""),i.key=a;let u={key:i.key,render:()=>e.default.apply?e.default.apply(i,[t,s]):new e.default,request:t,response:s,params:r,queryParams:o,reset:i.reset.bind(i),onMount:i.onMount.bind(i),useState:null,router:{use:i.router.use.bind(i)},bindMount:i.bindMount.bind(i),memoize:i.memoize.bind(i),createComponent:i.createComponent.bind(i),isChild:!1,useState:i.useState.bind(i),parseStyle:i.parseStyle.bind(i),bind:i.bind.bind(i),hydrate:i.hydrate.bind(i),js:l};i.render=u.render,i=u}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");i.reset(),i.components={},i.request=t,i.response=s,i.router.use&&!i.isChild?await new Promise((async o=>{if(n(e.default))if(await i.router.use(t,s),!0===t.pause){console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(console.log("resuming"),clearInterval(e),o())}),1e3)}else o();else if(new Function("req","res",i.js).apply(i,[t,s]),await i.router.use(t,s),!0===t.pause){console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(console.log("resuming"),clearInterval(e),o())}),1e3)}else o()})):i.router.use&&i.isChild&&console.warn("Router.use() is not supported in child components"),console.log("rendering");const a=await i.render();document.querySelector("#root").innerHTML=a,i.bindMount(),i.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((s,n)=>{t+=`${0===n?"?":"&"}${s}=${e[s]}`}));let s=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(e,null,2),t.appendChild(s)}};middlewares.forEach((e=>{e(i,a)})),n&&n.handler(i,a)}}window.VaderRouter=VaderRouter;export default VaderRouter;
+import{Component}from"./vader.js";let middlewares=[];class VaderRouter{constructor(e,t){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=e}get(e,t){this.routes.push({path:e,handler:t,method:"get"})}use(e){console.log(e),this.middlewares.push(e)}listen(e,t){e||(e=Math.random().toString(36).substring(7)),this.listeners.push(e),1===this.listeners.length?this.handleRoute(window.location.hash):this.listeners.pop(),t&&t(),window.onhashchange=()=>{this.handleRoute(window.location.hash)}}extractParams(e,t){const s=e.split("/"),n=t.split("/"),r={};return s.forEach(((e,t)=>{if(e.startsWith(":")){const s=e.slice(1);r[s]=n[t]}else if(e.startsWith("*")){n.slice(t).forEach(((e,t)=>{r[t]=e}))}})),r}extractQueryParams(e){const t=e.split("?")[1];if(!t)return{};const s={};return t.split("&").forEach((e=>{const[t,n]=e.split("=");s[t]=n})),s}handleRoute(e){let t=200,s=e=e.slice(1),n=this.routes.find((t=>{if(t.path===e)return!0;if(""===e&&"/"===t.path)return!0;if(e.includes("?")&&(e=e.split("?")[0]),t.path.includes("*")||t.path.includes(":")){const s=t.path.split("/"),n=e.split("/");if(s.length!==n.length&&!t.path.endsWith("*"))return!1;for(let e=0;e<s.length;e++){const t=s[e],r=n[e];if(!t.startsWith(":")&&!t.startsWith("*")&&t!==r)return!1}return!0}const n=this.extractParams(t.path,s);return Object.keys(n).length>0}));n||(n=this.routes.find((e=>{if(e.path.includes("/404"))return this.error=!0,!0;!this.error&&e.path.includes("/404")&&(window.location.hash=this.basePath)})),t=n?200:404);const r=this.extractQueryParams(s),o=n&&n.path?this.extractParams(n.path,s):{},a={headers:{},params:o,query:r,path:e,url:window.location.href+e,method:n?n.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=a.path,window.$FULL_URL=window.location.href.replace("#","");const i={status:t,log:e=>{void 0===e?console.log(`${a.path} ${a.method} ${i.status} ${a.timestamp}`):console.table({"Request Path":a.path,"Request Method":n.method,"Response Status":i.status,"Request Timestamp":a.timestamp})},refresh:()=>{this.handleRoute(window.location.hash)},redirect:e=>{!e.startsWith("/")&&(e=`/${e}`),window.location.hash=`#${e}`},render:async(e,t,s)=>{function n(e){return"function"==typeof e&&/^class\s/.test(Function.prototype.toString.call(e))}try{let a=new Component;if(n(e.default)){let t=new e.default;a.state=t.state,a=t}else{if(e.default.toString().includes("this.key"))throw new Error('Using this.key is not supported in functional components use the attribute key="a value" instead');a.key=e.default.toString().split('key="')[1]?e.default.toString().split('key="')[1].split('"')[0]:null;let n={key:a.key,render:()=>e.default.apply(a,[t,s]),request:t,response:s,params:o,queryParams:r,reset:a.reset.bind(a),onMount:a.onMount.bind(a),useState:null,router:{use:a.router.use.bind(a)},bindMount:a.bindMount.bind(a),memoize:a.memoize.bind(a),createComponent:a.createComponent.bind(a),isChild:!1,useState:a.useState.bind(a),parseStyle:a.parseStyle.bind(a),bind:a.bind.bind(a),hydrate:a.hydrate.bind(a)};a.render=n.render,a=n}if(!document.querySelector("#root"))throw new Error("Root element not found, please add an element with id root");a.reset(),a.components={},a.request=t,a.response=s,a.router.use&&!a.isChild?await new Promise((async r=>{if(n(e.default))if(n(e.default))switch(await a.router.use(t,s),t.pause){case!0:console.log("pausing",t.pause);let e=setInterval((()=>{t.pause?console.log("still pausing",t.pause):(clearInterval(e),r())}),1e3);break;case!1:r()}else r();else switch(await e.default.apply(a,[t,s]),await a.router.use(t,s),t.pause){case!0:let e=setInterval((()=>{t.pause?console.log("still pausing  request",t.url):(clearInterval(e),r())}),1e3);break;case!1:r()}})):a.router.use&&a.isChild&&console.warn("Router.use() is not supported in child components");const i=await a.render();document.querySelector("#root").innerHTML=i,a.bindMount(),a.onMount()}catch(e){console.error(e)}},setQuery:e=>{let t="";Object.keys(e).forEach(((s,n)=>{t+=`${0===n?"?":"&"}${s}=${e[s]}`}));let s=window.location.hash.split("?")[0];t=t.replace("/","-").replaceAll("/","-"),window.location.hash=`${s}${t}`},send:e=>{document.querySelector("#root").innerHTML=e},json:e=>{const t=document.querySelector("#root");t.innerHTML="";const s=document.createElement("pre");s.textContent=JSON.stringify(e,null,2),t.appendChild(s)}};middlewares.forEach((e=>{e(a,i)})),n&&n.handler(a,i)}}window.VaderRouter=VaderRouter;export default VaderRouter;

package/vader.js

@@ -178,8 +178,7 @@ function Compiler(func, file) {
         newvalue = newvalue.trim();
         if (newvalue.endsWith("}")) {
           newvalue = newvalue.replace("}", "");
-        }
-        console.log(newvalue)
+        } 
         functionparams.length > 0 ? params = params + ',' + functionparams.map((e) => e.name).join(',') : null  
         newvalue = newvalue.split('\n').map(line => line.trim() ? line.trim() + ';' : line).join('\n');
         newvalue = newvalue.replaceAll(',,', ',')
@@ -518,13 +517,13 @@ function Compiler(func, file) {
     return match;
   });
   
+  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
   string = string.replaceAll("<>", "`").replaceAll("</>", "`");
   string = parseComponents(string);
 
   string = string
     .replaceAll("className", "class")
-    .replaceAll("classname", "class");
-  string = string.replaceAll(/\$\{\/\*.*\*\/\}/gs, "");
+    .replaceAll("classname", "class"); 
 
   string = string.replaceAll('../src', './src')
   string += `\n\n //wascompiled`;
@@ -648,7 +647,9 @@ function Compiler(func, file) {
             string = string.replace(beforePath, "'" + path + "'")
           }
           let html = fs.existsSync(process.cwd() + '/dist/index.html') ? fs.readFileSync(process.cwd() + '/dist/index.html', 'utf8') : ''
-          if (!html.includes(`<link rel="preload" href="${path.replace(/'/g, '').trim()}" as="${path.replace(/'/g, '').trim().includes('.css') ? 'style' : 'script'}">`)) {
+          if (!html.includes(`<link rel="preload" href="${path.replace(/'/g, '').trim()}" as="${path.replace(/'/g, '').trim().includes('.css') ? 'style' : 'script'}">`)
+           && !path.includes('.module.css')
+          ) {
             if (!html.includes(`</head>`)) {
               throw new Error('Could not find </head> in index.html')
             }
@@ -746,14 +747,18 @@ async function Build() {
     await writer(process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js'), data).then(async () => {
 
       let { minify } = await import('terser')
+      
       try {
         let minified = await minify(data, {
-          ecma: " 2016",
+          toplevel: true,
+          ecma:2016,
+          enclose:false,
           module: true,
           compress: true,
-          mangle: true,
           keep_fnames: true,
+
         })
+         
         await writer(process.cwd() + "/dist/pages/" + fileName.replace('.jsx', '.js'), minified.code)
       } catch (error) {
         console.log(error)
@@ -895,13 +900,13 @@ Vader.js v1.3.3
 
 
     Array.from(Array(3).keys()).forEach((i) => {
-      let p = `${process.cwd()}${i == 0 ? '/pages/' : i == 1 ? '/src/' : '/public/'}`
-
+      let p = `${process.cwd()}${i == 0 ? '/pages/' : i == 1 ? '/src/' : '/public/'}` 
       watch(p
         , { recursive: true }, (event, filename) => {
           if (event == 'change'
             && !globalThis.isBuilding
           ) {
+             
             Build()
           }
         }).on('error', (err) => console.log(err))