vaderjs 1.3.6 → 1.3.7-alpha-1

package/README.md

@@ -0,0 +1,167 @@
+<p align="center">
+  <a href="https://vader-js.pages.dev">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
+      <img src="logo.png" height="128">
+    </picture>
+    <h1 align="center">Vader.js</h1>
+  </a>
+</p>
+
+# VaderJS: A Powerful Reactive Framework for SPAs inspired by react.js!
+
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs) 
+
+ 
+
+## Get Started
+
+1. Install Bun.js 
+
+Need more help? [Bun guide](https://bun.sh/docs/installation)
+
+```sh
+ curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
+ ```
+
+> Skip if you are not using windows!
+[How to open folder in wsl](https://code.visualstudio.com/docs/remote/wsl)
+
+1. Open a WSL terminal window (using the start menu item or by typing wsl from a command prompt / PowerShell).
+
+2. Navigate to a folder you'd like to open in VS Code (including, but not limited to, Windows filesystem mounts like /mnt/c)
+
+3. Type code . in the terminal. When doing this for the first time, you should see VS Code fetching components needed to run in WSL. This should only take a short while, and is only needed once.
+
+Open folder in vsc - open terminal and type wsl then type `code .` and continue to the next step
+
+2. Installing vaderjs
+
+ ```bash
+   npm i vaderjs
+ ```
+
+3.  Create Proper Folders
+
+Create a pages folder - which allows you to have nextjs page like routing via buns file based router
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/file
+```
+Keyword folders - all files are passed from these folders to the `dist` folder
+
+```bash
+
+pages - used for jsx route files
+src  - used for your jsx components / javascript files
+public - used for anything 
+
+```
+
+ 
+
+4. And your done - Run `npm run build` and the compiled output is visible inside of the `/dist/` folder!
+
+## Key Features & Examples
+ 
+### File based routing
+vader's compiler automatically handles routing so you wont need to!
+below is valid paths for parsing per [Buns fileSystem Routing Api](https://bun.sh/docs/api/file-system-router)
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/file
+
+ 
+```
+You can grab the request object  from `this.request` and response object from `this.response!`
+ 
+
+### Simplified Component Creation
+
+```jsx
+// pages/home.jsx
+let {Component, useState} = await import('./vader.js') // always use ./vader.js as files reference vaders main file
+let Mycomponent = await require('./pages/mycomponent')
+class Home extends Vader {
+  constructor() {
+    super();
+    this.key = '2'
+  }
+  render() {
+    return  <>
+      <div key={this.key}>
+        <p>Hello World</p>
+      </div>
+      <Mycomponent ..props />
+    </>
+  }
+}
+
+return {default:Home}
+```
+
+ 
+
+### State Management
+
+```jsx
+let {Component, useState} = await import('./vader.js') 
+
+class MyApp extends Component{
+  contructor(){
+   super()
+   this.key = 'static key for state changes'
+  }
+  
+  render(){
+    let [count, setCount] = useState(0)
+    function increment(){
+        setCount(count()+ 1)
+    }
+    return  <>
+     <p>Count is ${count}</p>
+     <button onclick={()=>increment()}>Increment</button>
+    </>
+    
+  }
+}
+
+return {default:MyApp}
+```
+
+
+### Function Binding
+
+Vaderjs allows you to bind functions directly to html elements just like react
+
+```javascript
+// vader uses params[0] as the event target object and other parameters resolve after
+
+function click(event, otherparams){
+    console.log(event.target, otherparams)
+}
+ 
+return <>
+ <button onclick={()=>click()}>Click Me</button>
+</>
+```
+ 
+ 
+ 
+
+ 
+
+ 
+ 
+
+## License
+
+VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for details.
+
+## Join the Community
+
+Connect with the VaderJS community on [GitHub](https://github.com/Postr-Inc/Vader.js). Contribute, share feedback, and improve VaderJS for SPA development. 

package/package.json

@@ -1,29 +1,21 @@
 {
   "name": "vaderjs",
-  "version": "1.3.6",
-  "description": "A Reactive Framework for Building Content Rich Single-Page Applications (SPA)",
-  "main": "index.js",
-  "scripts": {
-    "test": "tsc --noEmit "
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Postr-Inc/Vader.js.git"
+  "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
+  "module": "vader.js",
+  "version": "1.3.7-alpha-1",
+  "bin": {
+    "vader": "./vader"
   },
-  "keywords": [
-    "Reactjs",
-    "Vuejs",
-    "Reduxjs.",
-    "Nextjs",
-    "Vaderjs"
-  ],
-  "author": "Malikwhitten67",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Postr-Inc/Vader.js/issues"
+  "scripts": {
+    "build": "bunx vader --build",
+    "watch": "bun run vader --watch",
+    "help": "bunx vader"
   },
-  "homepage": "https://vader-js.pages.dev",
+  "type": "module",
   "devDependencies": {
-    "typescript": "^5.2.2"
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
   }
-}
+}

package/runtime/router.js

@@ -0,0 +1,261 @@
+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;
+   

package/runtime/static/index.html

@@ -0,0 +1,21 @@
+<!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>

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "liveServer.settings.port": 5501,
-    "js/ts.implicitProjectConfig.checkJs": true,
-    "js/ts.implicitProjectConfig.experimentalDecorators": true
-}

package/.vscode/vaderjs.autosense.json

@@ -1,5 +0,0 @@
-{
-      "className":{
-         "name":"className"
-      }
-}

package/index.js

@@ -1,12 +0,0 @@
-/**
- * @file index.js
- * @description This is the entry point for the library. This file exports all the necessary classes and functions.
- * @version 1.1.5
- *
- */
-import Vader, { include} from './vader.js';
-// @ts-ignore
-import VaderRouter from './vaderRouter.js';
-
-export { include, VaderRouter };
-export default Vader;

package/jsconfig.json

@@ -1,17 +0,0 @@
-{
-    "compilerOptions": {
-      "allowJs": true,
-      "checkJs": true,
-      "target": "es6",
-      "module": "commonjs",
-      "alwaysStrict": true
- 
-    },
-    "exclude": [
-      "node_modules",
-      "dist"
-    ],
-    "include": [
-      "**/*.js"
-    ]
-}