vaderjs 1.3.7-alpha-3 → 1.4.0-169o234

package/runtime/router.js

@@ -1,261 +1 @@
-import { Component } from "./vader.js";
-
- 
-
- 
-
-/**
- * @class VaderRouter
- * @description  - creates an instance of Vader Express Router
- *  
- * @param {String} path
- * @param {Function} handler
- * @param {object} req  request object
- * @param {object} res  response object
- * @returns {Object} Express
- *  
- */
-class VaderRouter{
-    /**
-     * @constructor
-     * @param {*} basePath 
-     *  
-     */
-    constructor(/**@type {string}**/basePath, /**@type {number}**/port) {
-      this.routes = [];
-      this.middlewares = [];
-      this.errorMiddlewares = [];
-      this.listeners = [];
-       
-      this.basePath = basePath;
-     
-    }
-  
-    /**
-     * @method get
-     * @param {String} path
-     * @param {Function} handler
-     * @param {{a:b}} req  request object
-     * @description This method is used to register a get route
-     * @returns {void}
-     * @memberof Express
-     */
-    get(path,  handler) {
-     
-      this.routes.push({
-        path,
-        handler,
-        method: 'get',
-      });
-    }
-    /**
-     * @method use
-     * @description This method allows you to use middlewares
-     * @param {Function} middleware 
-     */
-  
-    use(/* path, */ middleware) {
-      this.middlewares.push(middleware);
-    }
-  
-    /**
-     * @method listen
-     * @param {String} port - unique id for the listener
-     * @param {Function} callback - callback function
-     * @description This method is used to start listening to the routes
-     * @returns {void}
-     * 
-     */
-  
-    listen(port, callback) {
-      if(!port){
-       port = Math.random().toString(36).substring(7);
-      }
-      this.listeners.push(port);
-      if (this.listeners.length === 1) {
-        this.handleRoute(window.location.hash);
-      }else{
-        this.listeners.pop();
-      }
-      if (callback) {
-        callback();
-      }
-      window.onhashchange = () => {
-        this.handleRoute(window.location.hash);
-      }
-    }
-    /**
-     * @method extractParams
-     * @description This method is used to extract parameters from the route path
-     * @param {*} routePath
-     * @param {*} hash 
-     * @returns  {Object} params
-     * @memberof Express
-     */
-  
-    extractParams(routePath, hash) {
-      const routeParts = routePath.split('/');
-      const hashParts = hash.split('/');
-      const params = {};
-      routeParts.forEach((part, index) => {
-        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];
-        }
-      });
-      return params;
-    }
-    extractQueryParams(hash){
-      
-      const queryParams = hash.split('?')[1];
-      if(!queryParams){
-        return {};
-      }
-      const params = {};
-      queryParams.split('&').forEach((param)=>{
-        const [key, value] = param.split('=');
-        params[key] = value;
-      })
-      return params;
-    }
-  
-    /**
-     * @method handleRoute
-     * @param {String} hash
-     * @description This method is used to handle the route
-     */
-  
-    handleRoute(hash) {
-      hash = hash.slice(1);
-      let status = 200;
-      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('*')){
-          return true;
-        }
-        const params = this.extractParams( route.path, hash);
-        return Object.keys(params).length > 0;
-      });
-    
-      if (!route) {
-        route = this.routes.find((route) => {
-           
-           if(route.path === '/404'){
-            return  true;
-           }else{
-             window.location.hash = this.basePath  
-           }
-        });
-  
-        route ? status = 200 :
-  
-        status = 404;
-      }
-  
-       
-      const queryParams = this.extractQueryParams(hash);
-      const params =  route && route.path ? this.extractParams(route.path, hash) : {};
-      const req = {
-        headers: {},
-        params: params,
-        query: queryParams,
-        path: hash,
-        method: route ? route.method : 'get',
-      };
-    
-      // @ts-ignore
-      window.$CURRENT_URL = req.path
-     
-      // @ts-ignore
-      window.$FULL_URL = window.location.href.replace('#', '')
-     
-      const res = {
-        status: status,
-        /**
-         * @method log
-         * @param {String} type 
-         * @description This method is used to log the request and response
-         */
-        log: (type) => {
-          if(type === undefined){
-            console.log(`${req.path} ${req.method} ${res.status} ${req.timestamp}`);
-          }else{
-            console.table({
-              'Request Path': req.path,
-              'Request Method': route.method,
-              'Response Status': res.status,
-              'Request Timestamp': req.timestamp,
-            });
-          }
-        },
-        render: async (/**@type {Component} */ Component, req, res) => {
-          
-            if(!Component.default || !Component.constructor){
-              let message = !Component.default ? 'default' : 'constructor';
-              switch(message){
-                case 'default':
-                  throw new Error(`Component must have a default export ex: return {default: Component}`);
-                  
-                case 'constructor':
-                  throw new Error(`Component is invalid, please check the constructor`);
-                  
-              }
-             
-            }
-        
-            Component = Component.default ? new Component.default() :  Component.constructor ? new Component() : Component;
-            
-         
-            Component.mounted = true;
-            
-            if(!document.querySelector('#root')){
-              throw new Error('Root element not found, please add an element with id root');
-            }
-            Component.request = req;
-            Component.response = res;
-            document.querySelector('#root').innerHTML =   Component.render() 
-            Component.bindMount();
-            Component.onMount()
-           
-        },
-        send: (data) => {
-          document.querySelector('#root').innerHTML = data;
-        },
-        json: (selector, data) => {
-          
-          if(typeof selector === 'string'){
-            // @ts-ignore
-            let obj = document.createElement('object');
-             // data url
-            obj.data =  URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}));
-            // @ts-ignore
-            document.querySelector(selector).appendChild(obj);
-          }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;
-  
-  export default VaderRouter;
-   
+import Vader from"./vader.js";let middlewares=[];class Router{constructor(t,e){this.routes=[],this.middlewares=[],this.errorMiddlewares=[],this.listeners=[],this.basePath=t}get(t,e){this.routes.push({method:"get",path:t,handler:e})}use(t){this.middlewares.push(t)}matchingRoute(){return routes.find((t=>t.url===window.location.pathname||window.location.pathname.split("/")[1]===t.url.split("/")[1]||void 0))}listen(t,e){t||(t=Math.random().toString(36).substring(7)),this.listeners.push(t),window.onpopstate=async t=>{let e=window.location.pathname;if(e.includes("#noNavigation"))return;let r=`/${e.split("/")[1]}`,n=(new DOMParser).parseFromString(await fetch(r,{cache:"reload"}).then((t=>t.text())),"text/html").documentElement,s=(n.querySelector("head"),n.querySelector("body"));document.querySelector("#app").innerHTML=s.querySelector("#app").innerHTML;let o=document.createElement("script");o.id="router",o.innerHTML=s.querySelector('script[id="router"]').innerHTML,o.setAttribute("type","module"),document.body.appendChild(o)},window.location.pathname.includes("#noNavigation")||(console.log("no navigation"),this.handleRoute(window.location.pathname)),e&&e()}render(t){document.querySelector("#app").innerHTML="",Vader.render(t,document.querySelector("#app"))}extractParams(t,e){const r=t.split("/").filter((t=>""!==t)),n=e.split("/").filter((t=>""!==t)),s={};return r.forEach(((t,e)=>{if(t.startsWith(":")){const r=t.slice(1);s[r]=n[e]}else if(t.startsWith("*")){n.slice(e).forEach(((t,e)=>{s[e]=t}))}})),s}extractQueryParams(t){const e=t.split("?")[1];if(!e)return{};const r={};return e.split("&").forEach((t=>{const[e,n]=t.split("=");r[e]=n})),r}checkroute(t){return(t=t.endsWith("/")?t.slice(0,-1):t).includes("?")&&(t=t.split("?")[0]),this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(e.path.includes("*")||e.path.includes(":")){const r=e.path.split("/").filter((t=>""!==t)),n=t.split("/").filter((t=>""!==t));if(this.basePath&&n.shift(),console.log(r,n),r.length!==n.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<r.length;t++){const e=r[t],s=n[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==s)return!1}return!0}const r=this.extractParams(e.path,t);return Object.keys(r).length>0}))}handleRoute(t){let e=200,r={},n=t,s=this.checkroute(t);console.log(s),s||(e=404,s=this.routes.find((t=>"*"===t.path)),s&&(r=this.extractParams(s.path,t)));const o=this.extractQueryParams(n),a=s&&s.path?this.extractParams(s.path,n):r;Object.keys(a).forEach((t=>{a[t]=a[t].split("?")?a[t].split("?")[0]:a[t]}));const i={headers:{},params:a,query:o,path:t,fileUrl:window.location.href.split(window.location.origin)[1],url:window.location.href,method:s?s.method:"get",pause:!1,timestamp:Date.now()};window.$CURRENT_URL=i.path,window.$FULL_URL=window.location.href.replace("#","");const l={status:e,log:t=>{void 0===t?console.log(`${i.path} ${i.method} ${l.status} ${i.timestamp}`):console.table({"Request Path":i.path,"Request Method":s.method,"Response Status":l.status,"Request Timestamp":i.timestamp})},refresh:()=>{this.handleRoute(window.location.pathname)},redirect:t=>{!t.startsWith("/")&&(t=`/${t}`),window.history.pushState({},"",t),window.dispatchEvent(new Event("popstate"))},render:async t=>{document.querySelector("#app").innerHTML="",Vader.render(t,document.querySelector("#app"),{passProps:{router:{req:i,res:l}}})},setQuery:t=>{let e="";Object.keys(t).forEach(((r,n)=>{e+=`${0===n?"?":"&"}${r}=${t[r]}`}));let r=window.location.hash.split("?")[0];e=e.replace("/","-").replaceAll("/","-"),window.location.hash=`${r}${e}`},send:t=>{document.querySelector("#app").innerHTML=t},json:t=>{const e=document.querySelector("#app");e.innerHTML="";const r=document.createElement("pre");r.textContent=JSON.stringify(t,null,2),e.appendChild(r)}};middlewares.forEach((t=>{t(i,l)})),s?l.render(s.handler):l.status(404).send("Not Found")}}export default Router;

package/runtime/vader.js

@@ -0,0 +1 @@
+let hasMounted=[],hasRendered=[];export const Mounted=(e,t,r=!1)=>{let s=setInterval((()=>{switch(!0){case r&&hasMounted.includes(t.key):return clearInterval(s);case r&&!hasMounted.includes(t.key):hasMounted.push(t.key),e();break;case!document.querySelector(`[key="${t.key}"]`):return;default:e(),clearInterval(s)}}),100)};export class Component{constructor(e){this.state={},this.__internalInstance=null,this.key=e?.key||Math.random(),this.checkMount(),this.mounted=!1}setState(e){this.state=Object.assign({},this.state,e),this.updateInstance(this.__internalInstance)}useState(e,t){this.state[e]||(this.state[e]=t);let r=this.state[e];return r=(()=>this.state[e]||t)(),[r,t=>{r=t,this.state[e]=t,this.updateInstance(this.__internalInstance)}]}useReducer(e,t,r){this.state[e]||(this.state[e]=r);let s=this.state[e];return s=(()=>this.state[e]||r)(),[s,r=>{const n=t(s,r);s=n,this.state[e]=n,this.updateInstance(this.__internalInstance)}]}useRef(e,t){return this.state[e]||(this.state[e]=t),{current:this.state[e]}}onMount(){}domDifference(e,t){let r=[];for(let s=0;s<e.length;s++){let n=e[s],a=t[s];if(n&&a&&n.childNodes.length>0&&a.childNodes.length>0){switch(!0){case n.attributes&&a.attributes&&n.attributes.length!==a.attributes.length:r.push({type:"attributeSwap",old:n,new:a});break;case!n.isEqualNode(a)&&n.nodeName===a.nodeName:r.push({type:"replace",old:n,new:a})}let e=this.domDifference(Array.from(n.childNodes),Array.from(a.childNodes));return r.push(...e),r}!n&&a&&r.push({type:"add",old:n,new:a})}return r}checkMount(){if(this.mounted)return;setInterval((()=>{document.querySelector(`[key="${this.key}"]`)&&!this.mounted&&(this.mounted=!0,this.onMount())}))}updateChangedElements(e){e.forEach((e=>{if(e)switch(e.type){case"replace":if(e.old.panrntNode&&"BODY"===e.old.parentNode.nodeName)return;e.old.replaceWith(e.new.cloneNode(!0));break;case"remove":e.old.remove();break;case"attributeSwap":let t=Array.from(e.old.attributes),r=Array.from(e.new.attributes);t.forEach((t=>{e.old.removeAttribute(t.name)})),r.forEach((t=>{e.old.setAttribute(t.name,t.value)}));break;case"add":e.old.appendChild(e.new.cloneNode(!0))}}))}async updateInstance(e){console.log(e);let t=document.querySelector(`[key="${this.key}"]`)||document.querySelector("#app").firstChild,r=await vjsxx.render(e,t,{return:!0});console.log(r);let s=this.domDifference(Array.from(t.childNodes),Array.from(r.childNodes));this.updateChangedElements(s)}parseStyle(e){let t="";return Object.keys(e).forEach((r=>{let s=e[r];r=r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),t+=`${r}:${s};`})),t}}class vjsx{constructor(){this._vjsx=!0}isClass(e){return/^\s*class\s+/.test(e.toString())}instanizeClass(e,t={}){if("string"==typeof e||"object"==typeof e)return e;switch(this.isClass(e)){case!0:let r=new e(t);return r.$$typeof="vjsx",r.type=e.name,r.key=t?.key||r.name,r.props=t,r.__internalInstance=()=>r.render(),r.render();case!1:let s=new Component;s.key=e.name+Math.random(),s.__internalInstance=()=>e.bind(s)(t),e.$$typeof="vjsx",e.useState=s.useState.bind(s),e.setState=s.setState.bind(s),e.state=s.state;let n={},a={};return t?.router&&(n=t.router.req,a=t.router.res),e.apply?e.apply(s,[n,a,t]):e}}createElement(e,t,r,...s){let n="function"==typeof e,a=s.find((e=>"vjsx"===e?.$$typeof));if(n)return t.key=r||Math.random(),t.parent=a,this.instanizeClass(e,t);let o={type:e,RootParent:a,props:{...t,key:t?.key||Math.random(),children:Array.isArray(t.children)?t.children:[t.children]}};return"TEXT_ELEMENT"===("string"==typeof o?"TEXT_ELEMENT":o.type)?createTextElement(o):o}async render(e,t,r){let s=this.instanizeClass(e,r?.passProps);if(r&&r?.passProps&&r?.passProps?.router){let e=r.passProps.router.req,s=r.passProps.router.res;e.pause&&await new Promise((n=>{let a=setInterval((()=>{e.pause?s.render&&"function"==typeof s.render&&!hasRendered.includes(s.render.toString())&&(Vader.render(s.render(e,s,r.passProps),t),hasRendered.push(s.render.toString())):(clearInterval(a),n())}),0)}))}if(!s.type)return;let n="TEXT_ELEMENT"===s.type?document.createTextNode(""):document.createElement(s.type),isListener=e=>e.startsWith("on");if(s.props&&(s.props.key&&(s.key=s.props.key),Object.keys(s.props).filter(isListener).forEach((e=>{let t=e.toLowerCase().substring(2);n.addEventListener(t,s.props[e].bind(s))})),Object.keys(s.props).filter((e=>!isListener(e))).forEach((e=>{switch(e){case"classname":n.setAttribute("class",s.props[e]),delete s.props[e];break;case"ref":if(Array.isArray(s.props[e].current))return void s.props[e].current.push(n);s.props[e].current=n;break;case"htmlFor":n.setAttribute("for",s.props[e]);break;case"style":n.setAttribute("style",Component.prototype.parseStyle(s.props[e]));case"children":break;default:n.setAttribute(e,s.props[e])}"TEXT_ELEMENT"!==s.type||(n.nodeValue=s.props[e])}))),s.props&&s.props.children&&Array.isArray(s.props.children)&&s.props?.children&&s.props.children.forEach((e=>{if(Array.isArray(e))return void e.forEach((e=>{null!==e&&this.render(e,n,!0)}));if(!e)return;let t="function"==typeof e?this.instanizeClass(e):e;"TEXT_ELEMENT"!==(t?.type?t.type:"TEXT_ELEMENT")?this.render(t,n):n.appendChild(document.createTextNode(t))})),r?.return)return n;s.key&&n.setAttribute("key",s.key),!r?.return&&document.body.contains(t)&&(s?.RootParent?.onMount(),t.innerHTML=""),r?.return||t.appendChild(n)}}function createTextElement(e){return{type:"TEXT_ELEMENT",props:{nodeValue:e,children:[]}}}export const useState=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];return t=(()=>this.state[key]||e)(),[t,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export const useReducer=(e,t)=>{const[r,s]=useState(t);return[r,t=>{const n=e(r,t);s(n)}]};export const useRef=e=>{this.state[key]||(this.state[key]=e);let t=this.state[key];return t=(()=>this.state[key]||e)(),[t,e=>{t=e,this.state[key]=e,this.updateInstance(this.__internalInstance)}]};export class Html extends Component{constructor(e){super(e),this.key=e?.key||"DOCUMENT_ROOT",this.props=e,this.checkMount()}render(){return $SERVER?(this.props.lang&&document.documentElement.setAttribute("lang",this.props.lang),vjsxx.createElement("html",{children:this.props.children})):vjsxx.createElement("div",{children:this.props.children,key:this.key})}onMount(){this.props?.parent&&this.props?.parent&&this.props.parent.onMount()}}export class Head extends Component{constructor(e){super(e),this.head=document.createElement("head")}render(){if($SERVER||this.props.updateOnReload){Array.isArray(this.props.children)&&this.props.children.forEach((e=>{this.head.appendChild(vjsxx.render(e,this.head,{return:!0}))})),Object.keys(this.props).includes("children")&&!Array.isArray(this.props.children)&&this.head.appendChild(vjsxx.render(this.props.children,this.head,{return:!0}));let e=document.head;this.head.querySelectorAll("*").forEach((t=>{switch(t.tagName){case"TITLE":e.querySelector("title")&&e.querySelector("title").remove(),e.appendChild(t);break;case"META":if(this.props.updateOnReload)return;return void(e.querySelector(`meta[name="${t.name}"]`)&&e.querySelector(`meta[name="${t.name}"]`).remove());case"LINK":if($SERVER)return void(e.querySelector(`link[href="${t.href}"]`)||e.appendChild(t));case"SCRIPT":if(!t.hasAttribute("eager"))return void(document.querySelector(`script[src="${t.src}"]`)||e.appendChild(t));if(document.querySelector(`script[srcid="${t.src}"]`))return;fetch(t.src).then((e=>e.text())).then((r=>{let s=document.createElement("script");s.innerHTML=r,s.setAttribute("srcid",t.src),s.setAttribute("type",t.type),s.setAttribute("async",t.async||!1),s.setAttribute("defer",t.defer||!1),e.querySelector(`script[srcid="${t.src}"]`)||e.prepend(s)})).catch((e=>{console.warn("Error fetching script",e)}));break;default:console.warn("Unknown tag",t.tagName)}}))}return""}}export class Link extends Component{constructor(e){super(e),this.key=e?.key||Math.random(),this.props=e,this.checkMount()}render(){return vjsxx.createElement("a",{class:this.props.class||this.props.className,style:this.props.style,onClick:e=>{switch(e.preventDefault(),!0){case"outside"===this.props.action:e.preventDefault(),window.open(this.props.href,"_blank");break;case"function"==typeof this.props.action:this.props.action(e);break;default:e.preventDefault(),window.history.pushState({},"",this.props.href),window.dispatchEvent(new Event("popstate"))}},children:this.props.children},this.props?.key,null)}}let vjsxx=new vjsx,Vader={createElement:vjsxx.createElement,useState:useState,instanizeClass:vjsxx.instanizeClass,render:vjsxx.render,useRef:useRef,isClass:vjsxx.isClass,Head:Head,Html:Html,Mounted:Mounted,Component:Component,Link:Link};export default Vader;

package/vader.js

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+import fs from 'fs';
+let vaderisInstalled = process.cwd() + '/node_modules/vaderjs/binaries/main.js'
+if(!fs.existsSync(process.cwd() +'/_dev')){ 
+  fs.mkdirSync(process.cwd() +'/_dev');
+}
+
+if(!fs.existsSync(process.cwd() +'/_dev/vader.js')){
+    console.log('Copying vader to dev folder....')
+    fs.copyFileSync(vaderisInstalled, process.cwd() +'/_dev/vader.js');
+}  
+
+let args = process.argv.slice(2);
+
+function run(arg){ 
+    if(!fs.existsSync(process.cwd() + '/package.json')){
+        fs.writeFileSync(process.cwd() + '/package.json', JSON.stringify({name: 'my_app', version: '1.0.0'}, null, 2));
+        return;
+    }
+    let packageJson = JSON.parse(fs.readFileSync(process.cwd() + '/package.json').toString());
+    if(!packageJson.scripts){
+        packageJson.scripts = {};
+    }
+    packageJson.scripts['dev'] = 'bun run ./_dev/vader.js dev';
+    packageJson.scripts['build'] = 'bun run ./_dev/vader.js build';
+    packageJson.scripts['start'] = 'bun run ./_dev/vader.js start';
+    if(!packageJson.dependencies){
+        packageJson.dependencies = {};
+    }
+    fs.writeFileSync(process.cwd() + '/package.json', JSON.stringify(packageJson, null, 2));
+    console.log(` 
+    Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
+        
+    Usage: vader <command> 
+        
+    Commands:
+    
+       bun run dev  -p <number>    Start the development server
+        
+       bun run build   Build the project to ./dist
+        
+       bun run start  -p <number>  Production Mode (default 3000 or process.env.PORT)
+          
+    Learn more about vader:           https://vader-js.pages.dev/
+            
+        `) 
+}
+
+
+run()

package/runtime/static/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vaderjs v1.3.3</title>
-    <meta name="description" content="Vader.js is a modern web framework for building web applications.">
-    <link rel="shortcut icon" href="https://raw.githubusercontent.com/Postr-Inc/Vader.js/vader1.3.3-beta/logo.png" type="image/x-icon">
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module">
-        import VaderRouter from './public/vader/router.js'
-         
-        const router = new VaderRouter('/', 3000)
-        window.router = router
-        await import('./app.js')
-        router.listen(3000)
-    </script> 
-</body>
-</html>