vaderjs 1.4.1-ui7iuy47 → 1.4.2-jpbvml56

package/router/index.ts

@@ -0,0 +1,208 @@
+ 
+//@ts-nocheck
+import fs from 'fs'   
+const router = new Bun.FileSystemRouter({
+    dir: process.cwd() + '/pages',
+    style:'nextjs'
+})
+let wsClients = []  
+function handleContentTypes(url: string){
+    let types: any = {
+        'html': 'text/html',
+        'css': 'text/css',
+        'js': 'text/javascript',
+        'json': 'application/json',
+        'png': 'image/png',
+        'jpg': 'image/jpg',
+        'jpeg': 'image/jpeg',
+        'svg': 'image/svg+xml',
+        'gif': 'image/gif',
+        'ico': 'image/x-icon',
+        'tiff': 'image/tiff',
+        'woff': 'font/woff',
+        'woff2': 'font/woff2',
+    }
+
+    let typeArray = Array.from(Object.keys(types))
+    
+    let ext = url.split('.').pop()
+    if(typeArray.includes(ext)){
+        return types[ext]
+    }
+
+}
+
+ 
+function spawn_ssr_server(config: any ){ 
+    if(!fs.existsSync(process.cwd() + '/routes')){
+        throw new Error('SSR requires a routes directory to be present in your project')
+    }
+    let routesRouter = new Bun.FileSystemRouter({
+        dir: process.cwd() + '/routes',
+        style: 'nextjs'
+    }) 
+   async function serve (req,res){ 
+    routesRouter.reload()
+    if(res.upgrade(req)){
+        return
+    }
+    let url = new URL(req.url)
+    if(url.pathname.includes('.')){
+         url.pathname = url.pathname.replace('/\/', '/').replace('/build/', '')
+         if(url.pathname.includes('/build')){
+                 url.pathname = url.pathname.replace('/build', '')
+         }
+         let file = process.cwd() + '/build' + url.pathname   
+         let fileType = handleContentTypes(file)
+          if(fs.existsSync(file)){
+                 let content = await Bun.file(file).text()
+                 let data = Buffer.from(content, 'utf-8');
+                 const compressed = Bun.gzipSync(data);
+                 return new Response(compressed, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader', 
+                'Content-Encoding':'gzip',
+                 ...config?.routes.find(route => route.pathname === "*" || route.pathname === url.pathname)?.headers}})
+          }
+    }
+    let routeMatch = routesRouter.match(url.pathname) 
+    if(routeMatch){
+        let route = require(routeMatch.filePath).default
+         
+        if(route?.name !== req?.method){
+            return new Response('Method Not Allowed', {status: 405})
+        }else{ 
+           try {
+            let Request = { 
+                req,
+                res
+            }
+            let response = await route(Request)
+           
+            if(response instanceof Response){ 
+                // set x-powered-by header
+                response.headers.set('x-powered-by', 'Vader')
+                response.headers.set('Content-Type', 'text/html')
+                return response
+            }
+            throw new Error(`Route ${routeMatch.filePath.split('/routes')[1]} did not return a response in file ${routeMatch.filePath}`)
+           } catch (error) {
+                  console.log(error)
+                  return new Response('Internal Server Error', {status: 500})
+           }
+        }
+         
+
+    }
+   }
+   let server =  Bun.serve({
+        port:  config?.env?.PORT || 3000,
+        hostname: config?.host?.hostname || 'localhost', 
+        reusePort: true,
+        lowMemoryMode: true,
+        development: false, 
+        ...(config?.Router?.tls && {tls: {cert: config.Router.tls.cert, key: config.Router.tls.key}}),
+        websocket: {
+        message(event){
+            
+        },
+        
+        open(ws){
+            wsClients.push(ws)
+        },
+       },
+       async  fetch(req,res){
+             return await serve(req,res)
+        },
+
+        error(error) {
+            console.log(error)
+        }
+    }) 
+     
+    return {serve, server}
+}
+ 
+function spawnServer(config: any){
+    Bun.serve({
+        port:  config.env.PORT || 3000,
+        hostname: config.host.hostname || 'localhost',
+        reusePort: true,
+        websocket: {
+        message(event){
+            
+        },
+        open(ws){
+            wsClients.push(ws)
+        },
+       },
+       async  fetch(req,res){
+            router.reload()
+            if(res.upgrade(req)){
+                return
+            }
+            let url = new URL(req.url)
+            if(url.pathname.includes('.')){
+               url.pathname = url.pathname.replace('/\/', '/')
+               url.pathname = url.pathname.replace('/build/', '') 
+               
+               let file = process.cwd() + '/build' + url.pathname  
+               let fileType = handleContentTypes(file)
+                if(fs.existsSync(file)){
+                     let content = await Bun.file(file).text()
+                     let data = Buffer.from(content, 'utf-8');
+                     const compressed = Bun.gzipSync(data);
+
+                     return new Response(compressed, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader',  'x-powered-by': 'Vader', 
+                     'Content-Encoding':'gzip',
+                     'Accept-Encoding': 'gzip, deflate, br','Connection': 'keep-alive', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': '0',  ...config?.Router?.headers}})
+                }
+            }
+            let route = router.match(url.pathname)
+            if(route){ 
+              let isParamRoute = route.filePath.includes('[') && route.filePath.includes(']')
+              let path = route.filePath.split('/pages')[1].replace('.jsx', '.js').replace('.tsx', '.js').replace('.ts', '.js')  
+              path = isParamRoute ?  'index.html' : path
+              let html = fs.readFileSync(process.cwd() + `/build/${path.replace('.js', '.html')}`).toString()
+              html = html + `
+              <script>
+               let ws = new WebSocket('ws://${config.host.hostname || 'localhost'}:${config.env.PORT || 3000}')
+                ws.onmessage = function(event){
+                     console.log(event.data)
+                }
+                ws.onclose = function(event){
+                    window.location.reload()
+                }
+              </script>
+              ` 
+              const data = Buffer.from(html, 'utf-8');
+              const compressed = Bun.gzipSync(data);
+              return new Response(compressed, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader', 
+              'Content-Encoding':'gzip',
+              'Accept-Encoding': 'gzip, deflate, br','Connection': 'keep-alive', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': '0',
+              ...config?.Router?.headers}})
+            }
+            return new Response('Not Found', {status: 404})
+        }
+    })
+
+    
+} 
+/**
+ * @name Vader Router
+ * @description This plugin is responsible for routing and serving the application
+ */
+export default {
+    name: 'Vader Router',
+    version: '1.0.0',
+    once: true,
+    init:  ( ) => {  
+         if(!globalThis.isListening){ 
+             let config = require(process.cwd() + '/vader.config.js').default  
+             if(process.env.mode === 'production'){
+                console.log(`\x1b[32msuccess \x1b[0m- listening on port ${config.env.PORT || 3000}`)
+                spawnServer(config)
+             }  
+             config?.env?.SSR ? spawn_ssr_server(config ) : spawnServer(config)  
+             globalThis.isListening = true
+         }  
+    }
+}

package/server/index.js

@@ -0,0 +1,143 @@
+import { Document, Element} from "vaderjs/binaries/Kalix" 
+class Component {
+    constructor(props){
+        this.props = props
+        this._key =  Math.random().toString(36).substring(7)
+        this.state = {}
+        this.htmlNode = null
+        this.firstChild = null
+        this.Element = Element
+    }
+
+
+    setState(newState){
+        this.state = newState
+    }
+
+    
+    useState(name,   initialValue){
+        if(!this.state[name]){
+            this.state[name] = initialValue
+        } 
+        
+        let getState = () => this.state[name]
+        let setState = (newValue) => { 
+           
+            
+        }  
+        return  [getState, setState] 
+
+    }
+    useReducer(name, reducer, initialState){
+        let [state, setState] = this.useState(name, initialState)
+        let dispatch = (action) => {
+            let newState = reducer(state(), action) 
+            setState(newState)
+        }
+
+        return  [state, dispatch]
+    }
+
+    useEffect(effect, deps){
+
+    }
+
+    render(){
+        return null
+    }
+
+}
+export async function renderToString(element, args = []) {   
+    globalThis.isServer = true
+    globalThis.preRender = true
+    let data = typeof element === 'function' ? await element(args) : element  
+    if(data?.tagName === 'html'){
+       let body = data.querySelector('body') || new Document().createElement('body')
+       let innerHTML = body.innerHTML
+       innerHTML = `${innerHTML}`
+       body.tagName = 'div'
+       body.setAttribute('id', 'root')
+       body.innerHTML = innerHTML
+       data.removeChild(data.querySelector('body'))
+       data.appendChild(body)
+    }else if(data){ 
+        data.firstChild.setAttribute('id', 'root')
+    }
+    let doc = new Document()
+    let el = doc.createElement(data)
+    
+    return el.toString()
+     
+}
+
+/**
+ * @description This function is used to generate the server side rendered page
+ * @param {Element} element 
+ * @param {Object} options 
+ * @param {string} options.entry - The entry file for the component (refers to /build/pages/~)
+ * @param {Function} options.props - The server side props function 
+ * @param {Array} args - The arguments to pass to the props function - ie Request or any other data
+ * @param {*} args 
+ * @returns 
+ */
+ 
+export async function generatePage(element, options =  {entry:"", props: any}, args = []) { 
+    let config = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
+    //@ts-ignore
+    globalThis.isServer = true  
+    // @ts-ignore  
+    let serverSideProps = await options.props({req: args[0], res: args[1]}, args.slice(2))
+    let name = element.name 
+  
+    let comp = new Component(serverSideProps?.props) 
+    element = element.bind(comp)
+    comp.render = (props)=>  {  
+        return element(props)
+    } 
+    let data = new Document().createElement(comp.render({props: serverSideProps.props, ...args}))
+    let document = new Document()
+    document.documentElement.setContent(data.querySelector('html') ? data.querySelector('html').innerHTML : '')
+    document.documentElement.setAttribute('lang', data.querySelector('html') ? data.querySelector('html').getAttribute('lang') : 'en')
+    document.head.setContent(data.querySelector('head') ? data.querySelector('head').innerHTML : '') 
+    data.removeChild(data.querySelector('head'))
+    let div = new Document().createElement('div')
+    div.setAttribute('id', 'app')
+    div.setContent(data.innerHTML)  
+    document.body.appendChild(div)
+    let script = new Document().createElement('script')
+    script.setAttribute('type', 'module')  
+    
+    script.setContent(script.innerHTML + '\n' + `
+    
+    import ${name} from "${options?.entry}" 
+    import {render} from '/src/client.js'
+    import Kuai from '/src/router.js' 
+    let kuai = new Kuai({container: document.getElementById('app')})
+    kuai.get('/',  (c) => {   
+        c.html(render(${name}, document.getElementById('app'), {...c, props: ${JSON.stringify(serverSideProps.props)}}))
+    })
+   kuai.use('/', () => console.log('Middleware'))
+   kuai.listen() 
+    ${
+        config?.mode === 'development' ? `
+        let ws = new WebSocket('ws://localhost:${env.PORT || 3000}')
+        ws.onopen = () => {
+             ws.send('Hello')
+        }
+        ws.onmessage = (e) => {
+             if(e.data === 'reload'){
+                    window.location.reload() 
+             }
+        }
+        ws.onclose = () => {
+            console.log('Connection closed')
+            window.location.reload()
+        } 
+        ` :''
+    }
+    `)  
+    document.body.appendChild(script) 
+    return  `<!DOCTYPE html><html lang="${document.documentElement.getAttribute('lang')}">${document.head.toString()}${document.body.innerHTML}</html>`
+}
+
+export default renderToString

package/vader_dev.js

@@ -0,0 +1,177 @@
+#!/usr/bin/env node
+import { exec } from "child_process";
+import fs from "fs";
+globalThis.currentCommand = null;
+globalThis.isRunning = false;
+let vaderisInstalled = process.cwd() + "/node_modules/vaderjs/binaries/vader.js";
+if (!fs.existsSync(process.cwd() + "/_dev")) {
+  fs.mkdirSync(process.cwd() + "/_dev");
+  !fs.existsSync(process.cwd() + "/_dev/readme.md") && fs.writeFileSync(process.cwd() + "/_dev/readme.md", `This folder is used by vader.js to store important files, deletables include: Bun, Chrome - These should only be uninstalled if you need to reinstall them.`);
+}
+
+if (!fs.existsSync(process.cwd() + "/_dev/vader.js")) {
+  console.log("Copying vader to dev folder....");
+  fs.copyFileSync(vaderisInstalled, process.cwd() + "/_dev/vader.js");
+}
+
+function checkIFBundleIsInstalled() {
+  if (fs.existsSync(process.cwd() + "/_dev/bun")) {
+    return new Promise((resolve, reject) => {
+      resolve(true);
+    });
+  }
+  return new Promise((resolve, reject) => {
+    exec("bun -v", (err, stdout, stderr) => { 
+      if (err) {
+        reject(err);
+      }
+      if (stdout) {
+        resolve(`Bun.js is installed: ${stdout}`);
+      }
+      if (stderr) {
+        reject(`Bun.js is not installed: ${stderr}`);
+      }
+    });
+  });
+}
+
+function run() {
+  if(!fs.existsSync(process.cwd() + "/pages")) {
+    fs.mkdirSync(process.cwd() + "/pages");
+  }
+  if(!fs.existsSync(process.cwd() + "/public")) {
+    fs.mkdirSync(process.cwd() + "/public");
+  } 
+  if(!fs.existsSync(process.cwd() + "/src")) {
+    fs.mkdirSync(process.cwd() + "/src");
+  }
+  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));
+
+  if (currentCommand) {
+    let child = exec(currentCommand);
+    child.stdout.pipe(process.stdout);
+    child.stderr.pipe(process.stderr);
+    child.on("exit", (code) => {
+      process.exit(code);
+    });
+    child.on("message", (message) => {
+      console.log(message.toString());
+    });
+    child.on("error", (err) => {
+      console.error(err);
+    });
+
+    return;
+  }
+
+  console.log(` 
+  Vader.js is a reactive framework for building interactive applications for the web built ontop of bun.js!
+            
+  Usage: npx vaderjs <command> 
+            
+   Commands:
+        
+   vaderjs run dev  -p <number>    Start the development server
+            
+   vaderjs run build   Build the project to ./dist
+            
+   vaderjs run start  -p <number>  Production Mode (default 3000 or process.env.PORT)
+              
+   Learn more about vader:      https://vader-js.pages.dev/
+                
+   `);
+}
+ 
+let Commands = {
+  dev: `bun run dev`,
+  build: `bun run build`,
+  start: `bun run start`,
+};
+let port = process.argv.includes("-p") || process.argv.includes("--port") ? process.argv[process.argv.indexOf("-p") + 1] || process.argv[process.argv.indexOf("--port") + 1] || process.env.PORT || 3000 : process.env.PORT || 3000;
+switch (true) {
+  case process.argv.includes("dev") && !process.argv.includes("build") && !process.argv.includes("start"):
+    currentCommand = Commands.dev + (port ? ` -p ${port}` : "");
+    break;
+  case process.argv.includes("build") && !process.argv.includes("dev") && !process.argv.includes("start"):
+    currentCommand = Commands.build + (port ? ` -p ${port}` : "");
+    break;
+  case process.argv.includes("start") && !process.argv.includes("dev") && !process.argv.includes("build"):
+    currentCommand = Commands.start + (port ? ` -p ${port}` : "");
+    break;
+  default:
+    currentCommand = null;
+    break;
+}
+checkIFBundleIsInstalled()
+.then((stdout) => {
+  if (stdout && !isRunning) {
+    if (!fs.existsSync(process.cwd() + "/_dev/bun")) {
+      fs.writeFileSync(process.cwd() + "/_dev/bun", `Installed: ${stdout}`);
+    }
+    run();
+    globalThis.isRunning = true;
+  }
+})
+.catch(async (err) => {
+  console.log("Bun.js is not installed. Installing....");
+  let installScipt = {
+    windows: 'powershell -c "irm bun.sh/install.ps1|iex',
+    others: "curl -fsSL https://bun.sh/install.sh | bash",
+  };
+  let scriptotRun = process.platform === "win32" ? installScipt.windows : installScipt.others;
+  exec(scriptotRun, async (err, stdout, stderr) => {
+    if (err) {
+      console.log("Error installing bun.js, may want to install manually");
+      process.exit(1);
+    }
+    if (stdout) {
+      if (!process.platform === "win32") {
+        await new Promise((resolve, reject) => {
+          console.log(`Adding bun.js to path...`); 
+          exec("source ~/.bashrc", (err, stdout, stderr) => {
+            if (err) {
+              console.log("Error installing bun.js");
+              return;
+            }
+            if (stdout) {
+              run();
+            }
+            if (stderr) {
+              console.log("Error installing bun.js");
+              process.exit(1);
+            }
+          });
+        });
+        exec("chmod +x bun.sh/install.sh", (err, stdout, stderr) => {
+          if (err) {
+            console.log("Error installing bun.js");
+            return;
+          }
+          if (stdout) {
+            console.log("Bun.js installed successfully");
+            run();
+          }
+          if (stderr) {
+            console.log("Error installing bun.js");
+            process.exit(1);
+          }
+        });
+      }
+      run();
+    }
+  });
+});