vaderjs 1.4.2-bml56 → 1.4.2-jpbvml56

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

@@ -1,235 +1 @@
-/**
- * @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;
+export class Kuai{constructor(t={container:"#app"}){this.routes=[],this.middleware=[],this.container=t.container?t.container:document.getElementById("app"),this.renderPlugins=[]}res={text:t=>{this.container.innerHTML=t},html:t=>{switch(typeof t){case"function":if(this.renderPlugins.length>0)return void this.renderPlugins.forEach((e=>{"html"===e.for&&(console.log("Plugin",e),e.plugin(t,this.container))}));this.container.innerHTML=t();break;case"string":this.container.innerHTML=t}},json:t=>{this.container.innerHTML=`<Oject data=${JSON.stringify(t)}></Object>`}};req={navigate:t=>{window.history.pushState({},"",t);let e=this.match(window.location.pathname.replace("/index.html",""));e&&(this.currentRoute=e.path,e.callback(this.res,e.params,this.extractQueryParams(window.location.search)))},back:()=>{window.history.back()},forward:()=>{window.history.forward()},url:window.location};extractQueryParams(t){let e=new URLSearchParams(t),i={};for(let t of e)i[t[0]]=t[1];return i}extractParams(t,e){const i=t.split("/").filter((t=>""!==t)),r=e.split("/").filter((t=>""!==t)),a={};return i.forEach(((t,e)=>{if(t.startsWith(":")){const i=t.slice(1);a[i]=r[e]}else if(t.startsWith("*")){r.slice(e).forEach(((t,e)=>{a[e]=t}))}})),a}use(t,e){this.middleware.push({path:t,middleware:e})}usePlugin(t,e){this.renderPlugins.push({plugin:t,for:e})}match(t){(t=t.endsWith("/")?t.slice(0,-1):t).includes("index.html")&&(t=t.replace("index.html","")),t.includes("?")&&(t=t.split("?")[0]);let e=this.routes.find((e=>{if(e.path===t)return!0;if(""===t&&"/"===e.path)return!0;if(e.path.includes("*")||e.path.includes(":")){const i=e.path.split("/").filter((t=>""!==t)),r=t.split("/").filter((t=>""!==t));if(this.basePath&&r.shift(),i.length!==r.length&&!e.path.endsWith("*"))return!1;for(let t=0;t<i.length;t++){const e=i[t],a=r[t];if(!e.startsWith(":")&&!e.startsWith("*")&&e!==a)return!1}return!0}}));if(e){let i=this.extractParams(e.path,t);return{...e,params:i}}return null}get(t,e){this.routes.push({path:t,callback:e})}listen(){let t=this.match(window.location.pathname.replace("/index.html",""));if(t){this.middleware.forEach((e=>{e.path===t.path&&e.middleware()})),this.currentRoute=t.path;let e={...this.res,res:this.res,req:{...this.req,params:e=>t.params[e]}};t.callback(e)}window.onpopstate=()=>{let t=this.match(window.location.pathname.replace("/index.html",""));t&&(this.currentRoute=t.path,t.callback(this.res,t.params,this.extractQueryParams(window.location.search)))}}}export default Kuai;

package/plugins/ssg/index.js

@@ -11,38 +11,77 @@ async function generate(){
   let config = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
   let provider = config?.host?.provider   
 
-  let providerRoutes = []
+  let providerRoutes = [] 
+    Object.keys(routes).map((route) => {
+      if(route.includes('[')){
+               
+               let root = Object.keys(routes).find((r) => {
+                   return r === '/'
+               } ) 
+            
+                
+                let param = route.split('/[')[1].split(']')[0] 
+                let p = {}
+                let existingParams = routes[root]?.params || []
+                existingParams.push({
+                    isCatchAll: route.includes('[[catchall]]') ? true : false,  
+                    name: param,
+                    file: routes[route],
+                    baseFolder: route.split('[')[0]
+                }) 
+                p.file = routes[root]
+                p.params = existingParams
+                routes[root] = p 
+                delete routes[route] 
+            
+      }
+  })
   for(var i in routes){
-    let path = i 
+    let path = i  
     let file = routes[i]
+    if(typeof file === 'object'){
+        file = file.file
+    } 
     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 dom =  await renderToString(comp)
+    let isHtml = dom.includes('<html')  
     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 isParamRoute = routes[i].params ? true : false 
     let baseFolder = ''
     if(isParamRoute){
-        baseFolder = path.split('[')[0]
+        let route  = routes[i].params[0]
+        baseFolder =  i.split('[')[0] 
         let providerPath;
         switch(true){
             case provider === 'vercel':
-                 providerPath = `${baseFolder}:${path.split('[')[1].split(']')[0]}`
-                 providerRoutes.push({source: providerPath, dest: `${path}/index.html`}) 
+                 if(route.isCatchAll){
+                    providerPath = `${baseFolder}/*`
+                    providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                    break;
+                 }
+                 providerPath = `${baseFolder}:${route.name}`
+                 providerRoutes.push({source: providerPath, dest: `/`}) 
                  break;
             case provider === 'nginx': 
                 providerPath = `RewriteRule ^${baseFolder.replace('/', '')}.*$ ${path}/index.html [L]`
                 providerRoutes.push(providerPath)
                 break;
+            case provider === 'cloudflare':
+                if(route.isCatchAll){
+                    providerPath = `${baseFolder}/*`
+                    providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                    break;
+                }
+                providerPath = `${baseFolder}/*`
+                providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
+                break;
         }
     }else{
         let providerPath;
@@ -58,17 +97,48 @@ async function generate(){
                 providerPath = `RewriteRule ^${path.replace('/', '')}/$ ${path}/index.html [L]`
                 providerRoutes.push(providerPath)
                 break;
+           
             
         }
-    }
-    dom = dom + `
-    <script type="module">
+    } 
+    dom = preRender ? dom : '<div id="root"></div>' + `
+    <script type="module"> 
+        
        import { render } from '/src/client.js'
-       import ${name} from '/pages/${file.replace(process.cwd(), '')}'
+       let ${name} = await import('/pages/${file.replace(process.cwd(), '')}')
+         if(${name}.default){
+            ${name} = ${name}.default
+        }else{
+                let keys = Object.keys(${name})
+                ${name} = ${name}[keys[0]]
+        }
        import Kuai from '/src/router.js'
        let kuai = new Kuai()
+       ${
+         routes[i].params ? 
+         routes[i].params.map((param) => {
+                let name = param.name
+                let file = param.file.replace(/\\/g, '/').replace('\/\/', '/').replace(process.cwd().replace(/\\/g, '/'), '').split('/pages')[1].replace('.tsx', '.js').replace('.jsx', '.js')
+                return `
+                // handle if default or named
+                let ${name} = await import('/pages/${file}')
+                if(${name}.default){
+                    ${name} = ${name}.default
+                }else{
+                     let keys = Object.keys(${name})
+                     ${name} = ${name}[keys[0]]
+                }
+                kuai.get('${param.baseFolder}:${name}', (c) => {
+                    render(${name}, ${
+                    isHtml ? `document.documentElement`: `document.body.firstChild`
+                    }, c.req, c.res)
+                })`
+         }).join('\n') : ''
+       }
        kuai.get('${path}', (c) => {
-            render(${name}, document.getElementById('root'), c.req, c.res)
+            render(${name}, ${
+            isHtml ? `document.documentElement`: `document.body.firstChild`
+            }, c.req, c.res)
        })
 
        kuai.listen()
@@ -103,7 +173,7 @@ Header add x-powered-by "vaderjs"
 </IfModule>
         `
          fs.writeFileSync(process.cwd() + '/.htaccess', full)
-        break;
+        break; 
   }
   console.log(`\x1b[32mSuccess\x1b[0m - Static files generated`)
 

package/plugins/tailwind/index.ts

@@ -0,0 +1,102 @@
+//@ts-nocheck
+
+function checkIFtailwindInstalled() {
+    try {
+      require.resolve('tailwindcss');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  
+  
+  export default {
+      name: "tailwind",
+      description: "A plugin to install tailwindcss",
+      once: true,
+      init: async () => {
+          let config = require(process.cwd() + "/vader.config.js").default;
+          const fs = require("fs");
+          const path = require("path");
+          const { exec} = require("child_process");
+          const tailwindConfig = `
+          /** @type {import('tailwindcss').Config} */
+          module.exports = {
+            content: ['./src/**/*.{jsx,tsx,js,ts}', './pages/**/*.{jsx,tsx,js,ts}', './components/**/*.{jsx,tsx,js,ts}'],
+            theme: {
+              ${
+                  config?.tailwind?.theme ? JSON.stringify(config.tailwind.theme, null, 2) : ``
+              }
+              },
+            plugins: [
+               ${
+                  config?.tailwind?.plugins ? config?.tailwind?.plugins.map((plugin) => {
+                      return `require('${plugin}')`
+                  }).join(",") : ``
+               }
+            ]
+          }
+          `;
+          fs.writeFileSync(
+              path.join(process.cwd(), "tailwind.config.js"),
+              tailwindConfig
+          );
+          if (!checkIFtailwindInstalled()) {  
+              console.log(`\x1b[36mwait \x1b[0m  -  installing tailwindcss  & ${config?.tailwind?.plugins ? config?.tailwind?.plugins.length + " plugins" : ""} (First time only)`);
+              let npmPath = process.platform === "win32" ? "npm.cmd" : "npm";
+              Bun.spawnSync({
+                  cmd: [npmPath, "install", "tailwindcss", "postcss", "autoprefixer" , ...config?.tailwind?.plugins || []],
+                  cwd:  process.cwd(),  
+                  stderr: "inherit",
+              })
+              console.log(`\x1b[32msuccess \x1b[0m  - tailwindcss installed`)
+               
+  
+              const postcssConfig = `
+              module.exports = {
+                  plugins: {
+                    tailwindcss: {},
+                    autoprefixer: {},
+                  },
+                }
+              `;
+              fs.mkdirSync(path.join(process.cwd(), "src/public/styles"), {
+                  recursive: true,
+              });
+              fs.writeFileSync(
+                  path.join(process.cwd(), "src/public/styles/tailwind.css"),
+                  `@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';`
+              );
+              fs.writeFileSync(
+                  path.join(process.cwd(), "postcss.config.js"),
+                  postcssConfig
+              ); 
+          }
+  
+          if(!fs.existsSync(path.join(process.cwd(), "src/public/styles/tailwind.css"))){
+              fs.mkdirSync(path.join(process.cwd(), "src/public/styles"), {
+                  recursive: true,
+              });
+              fs.writeFileSync(
+                  path.join(process.cwd(), "src/public/styles/tailwind.css"),
+                  `@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';`
+              );
+          }
+  
+          let cmd = process.platform === "win32" ? "npx.cmd" : "npx"; 
+          let ws = new WebSocket(`ws://${config.host.hostname || 'localhost'}:${config.env.PORT || 3000}`)
+         
+         
+          Bun.spawnSync({
+              cmd: [ cmd, "tailwindcss", process.cwd() + '/tailwind.config.js' ,  "-i", "src/public/styles/tailwind.css", "-o", config?.tailwind?.output || "build/public/styles/tailwind.css", "--minify"],
+              cwd: process.cwd(),
+              stdin: "inherit",
+              stderr: "inherit",
+          });
+  
+          let content = await Bun.file(process.cwd() + '/build/public/styles/tailwind.css').text()
+          fs.writeFileSync(process.cwd() + '/public/styles/tailwind.css', content)
+          
+          ws.send(JSON.stringify({type: "css:reload"}) )
+      },
+  }

package/router/index.ts

@@ -56,7 +56,11 @@ function spawn_ssr_server(config: any ){
          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 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) 
@@ -76,6 +80,7 @@ function spawn_ssr_server(config: any ){
             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}`)
@@ -89,11 +94,12 @@ function spawn_ssr_server(config: any ){
     }
    }
    let server =  Bun.serve({
-        port:  config.env.PORT || 3000,
-        hostname: config.host.hostname || 'localhost', 
+        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){
             
@@ -137,21 +143,42 @@ function spawnServer(config: any){
             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 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 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()
-              return new Response(html, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader'}})
+              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})
         }
@@ -171,7 +198,7 @@ export default {
          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}`)
+                console.log(`\x1b[32msuccess \x1b[0m- listening on port ${config.env.PORT || 3000}`)
                 spawnServer(config)
              }  
              config?.env?.SSR ? spawn_ssr_server(config ) : spawnServer(config)  

package/server/index.js

@@ -48,7 +48,21 @@ class Component {
 
 }
 export async function renderToString(element, args = []) {   
-    let data = typeof element === 'function' ? await element(args) : element
+    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)