vaderjs 1.6.4 → 1.6.6

package/README.MD

@@ -12,7 +12,25 @@
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs)
 
-
+```tsx
+import { useState, Switch, Match } from "vaderjs"
+
+export default function(){
+  let [count, setCount] = useState(0)
+  return(
+    <div>
+     <Switch>
+      <Match when={count() > 10}>
+           <h1>Count is greater than 10 </h1>
+      </Match>
+      <Match when={count() < 10}>
+       <h1>Count is less than 10 </h1>
+      </Match>
+     </Switch>
+   </div>
+  )
+}
+```
 # Installation
 
 ```js

package/bundler/index.js

@@ -37,42 +37,39 @@ await Bun.build({
     entrypoints: [process.env.ENTRYPOINT],
     minify: false,
     root: process.cwd() + "/dist/",
-    outdir: process.cwd() + "/dist/", 
+    outdir: process.cwd() + "/dist/",
+    
     format: "esm",
     ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-    external:['*.jsx', '*.js', '*.ts', '*.tsx']
+    external:['*.jsx', '*.js', '*.ts']
 });
 
 let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
+ 
 function handleReplacements(code) {
     let lines = code.split("\n");
     let newLines = [];
     for (let line of lines) {
         let hasImport = line.includes('import')
-        if(hasImport && line.includes('from')){
-            try { 
+        if(hasImport && line.includes('from') && !newLines.includes(line)){
+            try {
                 let url = line.includes("'") ? line.split("'")[1] : line.split('"')[1]
-                 
                 line = line.replace(url, url.replace('.jsx', '.js').replace('.tsx', '.js'))
                 line  = line.replace(url, url.replace('.ts', '.js').replace('.tsx', '.js'))
                 newLines.push(line)
-            } catch (error) { 
+            } catch (error) {
                 continue;
             }
         }else{
-            newLines.push(line)
+              newLines.push(line)
         }
-        
     }
-    return  newLines.join('\n')
+    return newLines.join("\n");
 }
-if(!process.env.isTs){
-    
-builtCode = handleReplacements(builtCode) 
+builtCode = handleReplacements(builtCode)
 fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
-}
+
 let isClass = function (element) {
-    if (!element) return false;
     return element.toString().startsWith("class");
 };
 const generatePage = async (
@@ -84,10 +81,6 @@ const generatePage = async (
     let { head } = await import(path).then((m) => m);
     let isFunction = false;
     globalThis.isServer = true;
-    if(!html) {
-        console.log(ansiColors.red(`No default export found in ${path}`))
-        process.exit(0)
-    }
     if (isClass(html)) {
         html = new html();
         html.Mounted = true;
@@ -107,8 +100,8 @@ const generatePage = async (
         });
     }
     let headHtml = "";
-    if (head) {
-        headHtml = document(head()); 
+    if (head) { 
+        headHtml = document(head());  
     }
   
     await Bun.write(

package/main.js

@@ -6,6 +6,8 @@ const args = Bun.argv.slice(2)
 globalThis.isBuilding = false;
 import fs from 'fs'
 import path from 'path'
+
+
 if (!fs.existsSync(process.cwd() + '/app') && !args.includes('init')) {
     console.error(`App directory not found in ${process.cwd()}/app`)
     process.exit(1)
@@ -24,6 +26,7 @@ export default  defineConfig({
     host_provider: 'apache'
 })`)
 }
+const config = require(process.cwd() + '/vader.config.ts').default
 const mode = args.includes('dev') ? 'development' : args.includes('prod') || args.includes('build') ? 'production' : args.includes('init') ? 'init' : args.includes('serve') ? 'serve' : null;
 if (!mode) {
     console.log(`
@@ -74,7 +77,37 @@ if (!fs.existsSync(process.cwd() + '/jsconfig.json')) {
 }
 
 var bindes = []
+var fnmap = []
+const vader = {
+    onFileChange: (file, cb) => {
+        fs.watch(file, cb)
+    },
+    runCommand: (cmd) => {
+        return new Promise((resolve, reject) => {
+            Bun.spawn(cmd, {
+                stdout: 'inherit',
+                cwd: process.cwd(),
+                onExit({ exitCode: code }) {
+                    if (code === 0) {
+                        resolve()
+                    } else {
+                        reject()
+                    }
+                }
+            })
+
 
+        })
+    },
+    onBuildStart: (cb) => {
+        if (!fnmap.find(v => v.code == cb.toString())) {
+            fnmap.push({ code: cb.toString(), fn: cb })
+        }
+    },
+    injectHTML: (html) => {
+        bindes.push(html)
+    },
+}
 const handleReplacements = (code) => {
     let lines = code.split('\n')
     let newLines = []
@@ -133,6 +166,7 @@ const handleReplacements = (code) => {
             b4 = line.replace('useRef(', `this.useRef('${key}',`)
             line = b4
         }
+
         newLines.push(line)
     }
     let c = newLines.join('\n')
@@ -145,6 +179,10 @@ async function generateApp() {
     globalThis.isBuilding = true;
     console.log(ansiColors.green('Building...'))
     console.log(`Starting build at ${new Date().toLocaleTimeString()}`)
+    for (let fn of fnmap) {
+        await fn.fn(vader)
+        fnmap = fnmap.filter(v => v.code !== fn.code)
+    }
     // remove files from dist
     if (mode === 'development') {
         fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
@@ -246,9 +284,16 @@ async function generateApp() {
                 let data = ''
 
         }
-
+        // run all plugins that have onBuildFinish
+        let plugins = config.plugins || []
+        for (let plugin of plugins) {
+            if (plugin.onBuildFinish) {
+                await plugin.onBuildFinish(vader)
+            }
+        }
     })
 
+
 }
 
 function handleFiles() {
@@ -376,10 +421,10 @@ if (mode === 'development') {
     // Event listeners with debounced handling 
     watcher.on('change', handleFileChangeDebounced);
 
-} 
-else if(mode == 'production'){  
+}
+else if (mode == 'production') {
     await handleFiles()
-    await generateApp() 
+    await generateApp()
 }
 else {
     if (isBuilding) console.log(`Build complete in ${Date.now() - start}ms at ${new Date().toLocaleTimeString()}`);
@@ -464,6 +509,6 @@ if (mode == 'development' || mode == 'serve') {
 
         }
     })
-    
+
     console.log(ansiColors.green('Server started at http://localhost:' + port || 8080))
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "1.6.4",
+    "version": "1.6.6",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"

package/plugins/tailwind.ts

@@ -0,0 +1,50 @@
+//@ts-nocheck
+import fs from 'fs'
+import path from 'path'
+function checkIfTailwindInstalled() {
+    try {
+        //@ts-ignore
+        require.resolve('tailwindcss')
+        return true
+    } catch (e) {
+        return false
+    }
+}
+
+function initTailwind() { 
+    const tailwindConfig = path.resolve(process.cwd(), 'tailwind.config.js')
+    if (!fs.existsSync(tailwindConfig)) {
+        fs.writeFileSync(tailwindConfig, `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './app/**/*.{html,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`) 
+
+}
+
+}
+
+
+export default {
+    name: 'tailwindcss',
+    description: 'TailwindCSS plugin for Vader.js',
+    version: '0.0.1',
+    onBuildFinish: async (vader) => {
+        if (!checkIfTailwindInstalled()) {
+            console.error('TailwindCSS is not installed. Please install it using `bun install tailwindcss`')
+            process.exit(1)
+        }else{
+           initTailwind()
+           vader.onFileChange('tailwind.config.js', async () => {
+                console.log('Rebuilding TailwindCSS...')
+                await vader.runCommand(['bun', 'run', 'tailwindcss', 'build', '-o', 'public/styles.css'])
+                console.log('TailwindCSS rebuilt successfully!')
+           }) 
+           vader.runCommand(['bun', 'run', 'tailwindcss', 'build', '-o', 'public/styles.css'])
+        }
+    },
+
+}

package/plugins/tailwindcss/index.ts

@@ -0,0 +1,61 @@
+//@ts-nocheck
+import fs from 'fs'
+import path from 'path'
+function checkIfTailwindInstalled() {
+    try {
+        //@ts-ignore
+        require.resolve('tailwindcss')
+        return true
+    } catch (e) {
+        return false
+    }
+}
+
+function initTailwind() { 
+    const tailwindConfig = path.resolve(process.cwd(), 'tailwind.config.js')
+    const postcssConfig = path.resolve(process.cwd(), 'postcss.config.js')
+    if (!fs.existsSync(tailwindConfig)) {
+        fs.writeFileSync(postcssConfig, `module.exports = {
+            plugins: {
+              tailwindcss: {},  
+              autoprefixer: {},
+              }
+              }`)
+
+        fs.writeFileSync(tailwindConfig, `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './app/**/*.{html,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}`) 
+
+}
+
+}
+
+
+export default {
+    name: 'tailwindcss',
+    description: 'TailwindCSS plugin for Vader.js',
+    version: '0.0.1',
+    onBuildFinish: async (vader) => {
+        if (!checkIfTailwindInstalled()) {
+            console.error('TailwindCSS is not installed. Please install it using `bun install  tailwindcss postcss-cli autoprefixer`')
+            process.exit(1)
+        }else{
+           initTailwind()
+           vader.onBuildStart(() => {
+               vader.injectHTML(`<link rel="stylesheet" href="/public/tailwind.css">`)
+           })
+           vader.onFileChange('tailwind.config.js', async () => {
+                console.log('Rebuilding TailwindCSS...')
+                await vader.runCommand(['bun', 'run', 'postcss', 'public/styles.css', '-o', 'dist/public/tailwind.css'])
+                console.log('TailwindCSS rebuilt successfully!')
+           }) 
+           vader.runCommand(['bun', 'run', 'postcss', 'public/styles.css', '-o', 'dist/public/tailwind.css'])
+        } 
+    },
+
+}