vaderjs 1.4.1-lv56aadeg5 → 1.4.2-bml56

package/plugins/cloudflare/toCopy/src/router.js

@@ -0,0 +1,235 @@
+/**
+ * @fileoverview - A simple router for vaderjs - Kuai
+ * @version - 1.0.0
+ */
+export class Kuai{
+    constructor(config = { container: '#app'}){
+        this.routes = [];
+        this.middleware = [];
+        this.container =  config.container ? config.container : document.getElementById('app');
+        this.renderPlugins = [];
+    }
+  
+    res = {
+        /** 
+         * @description render text to the container
+         * @param {string} data 
+         */
+        text: (data) => {
+            this.container.innerHTML = data;
+        },
+        /**
+         * @method html
+         * @description render html to the container
+         * @param {any} data 
+         * @returns 
+         */
+        html: (data) => {
+            switch(typeof data){
+                case 'function':
+                    if(this.renderPlugins.length > 0){
+                        this.renderPlugins.forEach((plugin) => {
+                            if(plugin.for === 'html'){
+                                console.log('Plugin', plugin)
+                                plugin.plugin(data, this.container)
+                            }
+                        })
+                        return;
+                    }
+                    this.container.innerHTML = data();
+                    break;
+                case 'string':
+                    this.container.innerHTML = data;
+                    break;
+            } 
+  
+        },
+        /**
+         * @method json
+         * @description render json to the container
+         * @param {Object} data 
+         */
+        json: (data) => {
+            this.container.innerHTML =  `<Oject data=${JSON.stringify(data)}></Object>`
+        }
+    }
+    req = {
+        /**
+         * @method navigate
+         * @description - navigate to a new route
+         * @param {string} path 
+         */
+        navigate: (path) => {
+            window.history.pushState({}, '', path);
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        },
+        /**
+         * @method back
+         * @description - go back to the previous route
+         */
+        back: () => {
+            window.history.back();
+        },
+
+        /**
+         * @method forward
+         * @description - go forward to the next route
+         * @returns {void}
+         * **/
+        forward: () => {
+            window.history.forward();
+        },
+        url: window.location
+    }
+    /**
+     * @private
+     */
+    extractQueryParams(path){
+        let params = new URLSearchParams(path);
+        let query = {};
+        for(let param of params){
+            query[param[0]] = param[1];
+        }
+        return query;
+    }
+     /**
+     * @private
+     */
+    extractParams(routePath, currentPath){
+        const routeParts = routePath.split('/').filter((part) => part !== '');
+        const hashParts = currentPath.split('/').filter((part) => part !== ''); 
+        const params = {};
+        routeParts.forEach((part, index) => {
+          if (part.startsWith(':')) {
+            const paramName = part.slice(1);
+            params[paramName] = hashParts[index];
+          }else if(part.startsWith('*')){ 
+            let array = hashParts.slice(index)
+            array.forEach((i, index)=>{
+              params[index] = i
+            })
+          };
+        });
+        return params;
+    }
+    use(path, middleware){
+        this.middleware.push({path, middleware}); 
+    }
+    /**
+     * @method usePlugin
+     * @description - add a plugin to handle how the route should be rendered
+     * @param {Function} plugin 
+     * @param {('html')} method 
+     */
+    usePlugin(plugin, method){
+        this.renderPlugins.push({plugin, for: method})
+    }
+    /**
+     * @method match
+     * @description - match a route to the current path and return the route object
+     * @param {string} route 
+     * @returns  {Object} -  {path: string, callback: Function, params: Object}
+     */
+    match(hash){
+        hash = hash.endsWith('/') ? hash.slice(0, -1) : hash;  
+        hash.includes('index.html') ? hash = hash.replace('index.html', '') : null;
+        if(hash.includes('?')){
+          hash = hash.split('?')[0]
+       } 
+        let route = this.routes.find((route) => {  
+          if (route.path === hash) { 
+            return true;
+          }
+  
+          if(hash === '' && route.path === '/'){
+            return true
+          }
+      
+          
+          if (route.path.includes('*') || route.path.includes(':')) {
+            const routeParts = route.path.split('/').filter((part) => part !== ''); 
+            const hashParts = hash.split('/').filter((part) => part !== '');  
+              if(this.basePath){
+                  hashParts.shift();
+              } 
+            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;
+          }  
+          
+        });  
+        if(route){
+          let params = this.extractParams(route.path, hash)
+          return { ...route, params}
+        }
+        return null;
+   
+    }
+  
+    /**
+     * @description - create a new route
+     * @param {string} path 
+     * @param {Function} callback 
+     */
+    get(path, callback){
+        this.routes.push({path, callback});
+    }
+  
+    /**
+     * @method listen
+     * @description - listen for route changes
+     */
+    listen(){ 
+        let currentPath = this.match(window.location.pathname.replace('/index.html', '')) 
+        if(currentPath){
+            this.middleware.forEach((middleware) => {
+                if(middleware.path === currentPath.path){
+                    middleware.middleware();
+                }
+            });
+            this.currentRoute = currentPath.path
+            let obj = {
+                ...this.res,
+                res: this.res,
+                req:{
+                    ...this.req,
+                    params: (param) => currentPath.params[param]
+                
+                }
+            }
+            currentPath.callback(obj);
+        }
+        window.onpopstate = () => {
+            let currentPath = this.match(window.location.pathname.replace('/index.html', ''))
+            if(currentPath){
+                this.currentRoute = currentPath.path
+                currentPath.callback(this.res, currentPath.params, this.extractQueryParams(window.location.search));
+            }
+        }
+    
+    }
+  }
+  
+  export default Kuai;

package/plugins/ssg/index.js

@@ -0,0 +1,127 @@
+import * as Bun from 'bun'
+import {  Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
+import { renderToString } from '../../server'
+import fs from 'fs'
+let routes = new Bun.FileSystemRouter({
+    dir: process.cwd() + '/pages',
+    style:"nextjs"
+}).routes 
+globalThis.isNotFirstRun = false
+async function generate(){     
+  let config = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
+  let provider = config?.host?.provider   
+
+  let providerRoutes = []
+  for(var i in routes){
+    let path = i 
+    let file = routes[i]
+    let comp =  require(file).default 
+    if(!comp){
+        continue;
+    }
+    let document = new Document()
+    let div = document.createElement('div')
+    div.setAttribute('id', 'root') 
+    let dom =  await renderToString(comp)   
+    div.setContent(dom) 
+    dom = div.toString("outerHTML")   
+    let folder = path.split('/pages')[0]
+    let newPath = process.cwd() + '/build' + folder + '/index.html'
+    let name = comp.name || 'App'
+    file = file.replace(/\\/g, '/').replace('\/\/', '/').replace(process.cwd().replace(/\\/g, '/'), '').split('/pages')[1].replace('.tsx', '.js').replace('.jsx', '.js')
+    let isParamRoute = path.includes('[')
+    let baseFolder = ''
+    if(isParamRoute){
+        baseFolder = path.split('[')[0]
+        let providerPath;
+        switch(true){
+            case provider === 'vercel':
+                 providerPath = `${baseFolder}:${path.split('[')[1].split(']')[0]}`
+                 providerRoutes.push({source: providerPath, dest: `${path}/index.html`}) 
+                 break;
+            case provider === 'nginx': 
+                providerPath = `RewriteRule ^${baseFolder.replace('/', '')}.*$ ${path}/index.html [L]`
+                providerRoutes.push(providerPath)
+                break;
+        }
+    }else{
+        let providerPath;
+        switch(true){
+            case provider === 'vercel':
+                 providerPath = `${path}`
+                 providerRoutes.push({source: providerPath, dest: `${path}/index.html`}) 
+                 break;
+            case provider === 'nginx': 
+                if(i == '/'){
+                    break;
+                }
+                providerPath = `RewriteRule ^${path.replace('/', '')}/$ ${path}/index.html [L]`
+                providerRoutes.push(providerPath)
+                break;
+            
+        }
+    }
+    dom = dom + `
+    <script type="module">
+       import { render } from '/src/client.js'
+       import ${name} from '/pages/${file.replace(process.cwd(), '')}'
+       import Kuai from '/src/router.js'
+       let kuai = new Kuai()
+       kuai.get('${path}', (c) => {
+            render(${name}, document.getElementById('root'), c.req, c.res)
+       })
+
+       kuai.listen()
+
+        `
+    dom = dom + `</script>`
+    Bun.write(newPath, dom)
+    
+  }
+  switch(true){
+      case provider === 'vercel': 
+          let vercelJSON = process.cwd() + '/vercel.json'
+          let vercel = {
+              "rewrites": providerRoutes
+          }
+         
+          fs.writeFileSync(vercelJSON, JSON.stringify(vercel))
+          break;
+    case provider === 'nginx':
+        let full = `
+Header add x-powered-by "vaderjs" 
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+
+  # If the request is not for a file or directory
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+
+  # Rewrite specific paths to index.html 
+   ${providerRoutes.join('\n')}
+</IfModule>
+        `
+         fs.writeFileSync(process.cwd() + '/.htaccess', full)
+        break;
+  }
+  console.log(`\x1b[32mSuccess\x1b[0m - Static files generated`)
+
+  return true
+}
+
+
+/**
+ * @name Vaderjs SSG Plugin
+ * @description This plugin is used to generate static files from the deep object - using kalix.js
+ * @version 0.0.1
+ */
+export default {
+    name: 'Vaderjs SSG Plugin',
+    version: '0.0.1',
+    init: async (component) => { 
+        
+  console.log(`\x1b[36mwait \x1b[0m  - generating static files`)
+           return generate(component)
+    }
+}

package/plugins/vercel/functions/index.ts

@@ -0,0 +1,8 @@
+export default {
+    name: "vercel",
+    description: "Vercel functions",
+    version: "0.0.1",
+    init: async function (config) {
+        console.warn("Vercel functions are not yet supported");
+    }
+}

package/router/index.ts

@@ -0,0 +1,181 @@
+ 
+//@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()
+                 return new Response(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
+          }
+    }
+    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')
+                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, 
+        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/', '') 
+               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()
+                     return new Response(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
+                }
+            }
+            let route = router.match(url.pathname)
+            if(route){ 
+              let path = route.filePath.split('/pages')[1].replace('.jsx', '.js').replace('.tsx', '.js').replace('.ts', '.js')  
+              let html = fs.readFileSync(process.cwd() + `/build/${path.replace('.js', '.html')}`).toString()
+              return new Response(html, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader'}})
+            }
+            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(`Listening at - http://${config.host.hostname}:${config.env.PORT}`)
+                spawnServer(config)
+             }  
+             config?.env?.SSR ? spawn_ssr_server(config ) : spawnServer(config)  
+             globalThis.isListening = true
+         }  
+    }
+}

package/server/index.js

@@ -0,0 +1,129 @@
+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 = []) {   
+    let data = typeof element === 'function' ? await element(args) : element
+    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