vaderjs 1.4.2-jpiml56 → 1.4.2-kml56

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

@@ -1 +1,235 @@
-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;
+/**
+ * @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

@@ -1,5 +1,5 @@
 import * as Bun from 'bun'
-import {  Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
+import { Element, Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
 import { renderToString } from '../../server'
 import fs from 'fs'
 let routes = new Bun.FileSystemRouter({
@@ -11,77 +11,35 @@ async function generate(){
   let config = await import(process.cwd() + '/vader.config.js').then((config) => { return config.default })
   let provider = config?.host?.provider   
 
-  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] 
-            
-      }
-  })
+  let providerRoutes = []
   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 dom =  await renderToString(comp)
-    let isHtml = dom.includes('<html')  
+    let comp =  require(file).default
+    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'
+    let name = comp.name
     file = file.replace(/\\/g, '/').replace('\/\/', '/').replace(process.cwd().replace(/\\/g, '/'), '').split('/pages')[1].replace('.tsx', '.js').replace('.jsx', '.js')
-    let isParamRoute = routes[i].params ? true : false 
+    let isParamRoute = path.includes('[')
     let baseFolder = ''
     if(isParamRoute){
-        let route  = routes[i].params[0]
-        baseFolder =  i.split('[')[0] 
+        baseFolder = path.split('[')[0]
         let providerPath;
         switch(true){
             case provider === 'vercel':
-                 if(route.isCatchAll){
-                    providerPath = `${baseFolder}/*`
-                    providerRoutes.push({source: providerPath, destination: `${path}/index.html`})
-                    break;
-                 }
-                 providerPath = `${baseFolder}:${route.name}`
-                 providerRoutes.push({source: providerPath, dest: `/`}) 
+                 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;
-            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;
@@ -97,48 +55,17 @@ async function generate(){
                 providerPath = `RewriteRule ^${path.replace('/', '')}/$ ${path}/index.html [L]`
                 providerRoutes.push(providerPath)
                 break;
-           
             
         }
-    } 
-    dom = preRender ? dom : '<div id="root"></div>' + `
-    <script type="module"> 
-        
+    }
+    dom = dom + `
+    <script type="module">
        import { render } from '/src/client.js'
-       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 ${name} from '/pages/${file.replace(process.cwd(), '')}'
        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}, ${
-            isHtml ? `document.documentElement`: `document.body.firstChild`
-            }, c.req, c.res)
+            render(${name}, document.getElementById('root'), c.req, c.res)
        })
 
        kuai.listen()
@@ -173,7 +100,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/router/index.ts

@@ -56,11 +56,7 @@ function spawn_ssr_server(config: any ){
          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}})
+                 return new Response(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
           }
     }
     let routeMatch = routesRouter.match(url.pathname) 
@@ -80,7 +76,6 @@ 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}`)
@@ -94,12 +89,11 @@ 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){
             
@@ -143,42 +137,21 @@ function spawnServer(config: any){
             if(url.pathname.includes('.')){
                url.pathname = url.pathname.replace('/\/', '/')
                url.pathname = url.pathname.replace('/build/', '') 
-               
-               let file = process.cwd() + '/build' + url.pathname  
+               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',  '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(content, {status: 200, headers: {'Content-Type': fileType, 'x-powered-by': 'Vader'}})
                 }
             }
             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(html, {status: 200, headers: {'Content-Type': 'text/html', 'x-powered-by': 'Vader'}})
             }
             return new Response('Not Found', {status: 404})
         }
@@ -198,7 +171,7 @@ export default {
          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}`)
+                console.log(`Listening at - http://${config.host.hostname}:${config.env.PORT}`)
                 spawnServer(config)
              }  
              config?.env?.SSR ? spawn_ssr_server(config ) : spawnServer(config)  

package/server/index.js

@@ -47,22 +47,8 @@ class Component {
     }
 
 }
-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')
-    }
+export async function renderToString(element, args = []) {  
+    let data = typeof element === 'function' ? await element(args) : element
     let doc = new Document()
     let el = doc.createElement(data)
     

package/plugins/tailwindcss/index.ts

@@ -1,93 +0,0 @@
-//@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";
-          Bun.spawn({
-              cmd: [ cmd, "tailwindcss", process.cwd() + '/tailwind.config.js' ,  "-i", "src/public/styles/tailwind.css", "-o", config?.tailwind?.output || "public/styles/tailwind.css", "--minify"],
-              cwd: process.cwd(),
-              stdin: "inherit",
-              stderr: "inherit",
-          });
-      },
-  }