vaderjs 1.4.2-kml56 → 1.4.2-npiml56

package/plugins/ssg/index.js

@@ -1,5 +1,5 @@
 import * as Bun from 'bun'
-import { Element, Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
+import {  Document, DOMParser} from 'vaderjs/binaries/Kalix/index.js'
 import { renderToString } from '../../server'
 import fs from 'fs'
 let routes = new Bun.FileSystemRouter({
@@ -11,35 +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]
-    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")   
+    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 folder = path.split('/pages')[0]
     let newPath = process.cwd() + '/build' + folder + '/index.html'
-    let name = comp.name
+    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;
@@ -55,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()
@@ -100,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/tailwindcss/index.ts

@@ -0,0 +1,93 @@
+//@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",
+          });
+      },
+  }

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

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