vaderjs 1.7.9 → 1.8.0

package/bundler/index.js

@@ -93,7 +93,7 @@ const handleReplacements = (code) => {
 
       let key = line.split(',')[0].split('[')[1].replace(' ', '');
 
-      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key + Math.random()}',`);
+      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key}',`);
 
       line = updatedLine; 
     }
@@ -103,7 +103,7 @@ const handleReplacements = (code) => {
 
       let key = line.split(',')[0].split('[')[1].replace(' ', '');
 
-      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key + Math.random()}',`);
+      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key}',`);
 
       line = updatedLine; 
     }
@@ -191,7 +191,7 @@ const generatePage = async (
         import c from '${process.env.filePath}'
         import {render, e} from '/src/vader/index.js'
         window.e = e
-        render(c, document.body)
+        render(c, document.body.firstChild)
       </script> 
             `
   );

package/main.js

@@ -201,9 +201,9 @@ async function generateApp() {
 
             let r = routes.routes[route]
             let code = await Bun.file(r).text()
+            code = handleReplacements(code)
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
-            var beforeR = r
             r = r.replace('.jsx', '.js').replace('.tsx', '.js') 
             fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(r)), { recursive: true })
             fs.writeFileSync(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r), `
@@ -227,7 +227,6 @@ async function generateApp() {
             fs.writeFileSync(process.cwd() + '/dist/src/vader/index.js', await new Bun.Transpiler({
                 loader: 'ts',
             }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
-
             Bun.spawn({
                 cmd: ['bun', 'run', './dev/bundler.js'],
                 cwd: process.cwd(),
@@ -240,12 +239,10 @@ async function generateApp() {
                     DEV: mode === 'development',
                     size,
                     bindes: bindes.join('\n'),
-                    isTs: beforeR.endsWith(".tsx"),
                     filePath: r,
-
-                    isJsx: beforeR.endsWith('.tsx') || beforeR.endsWith(".jsx"),
                     isAppFile: true,
-                    INPUT: `../app/${beforeR}`,
+                    isJsx: true,
+                    INPUT: `../app/${r.replace('.js', '.jsx').replace('.tsx', '.js')}`,
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
@@ -305,6 +302,7 @@ async function generateApp() {
 function handleFiles() {
     return new Promise(async (resolve, reject) => {
         try {
+            console.log(Glob)
             let glob = new Glob('public/**/*')
             for await (var i of glob.scan()) {
                 let file = i
@@ -319,11 +317,11 @@ function handleFiles() {
                 var file = i
                 fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
                 // turn jsx to js
-                if (file.endsWith('.jsx') || file.endsWith('.tsx')) {
+                if (file.includes('.jsx') || file.includes('.tsx')) {
                     let code = await Bun.file(file).text()
 
                     code = handleReplacements(code)
-                    var url = file
+
                     file = file.replace('.jsx', '.js').replace('.tsx', '.js')
                     fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code)
                     await Bun.spawn({
@@ -339,9 +337,8 @@ function handleFiles() {
                             DEV: mode === 'development',
                             size: code.length / 1024,
                             filePath: file.replace('.jsx', '.js'),
-                            isJsx: url.endsWith('.tsx') || url.endsWith(".jsx"),
-                            isAppFile: false,
-                            INPUT: path.join(process.cwd(), url),
+                            isTs: file.includes('.tsx'),
+                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx').replace('.tsx', '.js')),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -351,7 +348,7 @@ function handleFiles() {
                             }
                         }
                     })
-                } else if (file.endsWith('.ts')) {
+                } else if (file.includes('.ts')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -392,8 +389,8 @@ function handleFiles() {
 globalThis.clients = []
 
 if (mode === 'development') {
-    await handleFiles()
     await generateApp()
+    await handleFiles()
     const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true })
     let isBuilding = false; // Flag to track build status
 
@@ -403,10 +400,10 @@ if (mode === 'development') {
     // Function to handle file changes with debounce
     const handleFileChangeDebounced = async (change, file) => {
         if (file.endsWith('.tsx') || file.endsWith('.jsx') || file.endsWith('.css') || file.endsWith('.ts')
-            && !file.includes('node_module')
+        && !file.includes('node_module')
         ) {
             // delete files cache
-            if (file.endsWith('vader.config.ts')) {
+            if (file.endsWith('vader.config.ts')){
                 delete require.cache[require.resolve(process.cwd() + '/vader.config.ts')]
 
                 config = require(process.cwd() + '/vader.config.ts').default
@@ -494,16 +491,16 @@ if (mode == 'development' || mode == 'serve') {
                 style: 'nextjs'
             })
             router.reload()
-            let route = router.match(url.pathname) 
+            let route = router.match(url.pathname)
             if (!route) {
                 return new Response('Not found', { status: 404 })
             }
             let p = route.pathname;
             let base = path.dirname(route.filePath)
             base = base.replace(/\\/g, '/')
-            base = base.replace(path.join(process.cwd() + '/app').replace(/\\/g, '/'), '');
-            base = base.replace(/\\/g, '/').replace(/\/app(\/|$)/, '/dist$1');
-            base = process.cwd() + '/dist/' + base; 
+            base = base.replace(path.join(process.cwd() + '/app').replace(/\\/g, '/'), '')
+            base = base.replace(/\\/g, '/').replace('/app', '/dist')
+            base = process.cwd() + "/dist/" + base
             let data = await Bun.file(path.join(base, 'index.html')).text()
             if (mode == "development") {
                 return new Response(data + `
@@ -533,4 +530,4 @@ 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.7.9",
+    "version": "1.8.0",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"

package/plugins/tailwindcss/index.ts

@@ -1,72 +0,0 @@
-//@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(path.join(process.cwd(), '/public/styles.css'))){
-
-        fs.writeFileSync(path.join(process.cwd(), '/public/styles.css'), `
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        `)
-    }
-    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',
-    onBuildStart: 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.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!')
-           })
-           await vader.runCommand(['bun', 'run', 'postcss', './public/styles.css', '-o', 'dist/public/tailwind.css'])
-           vader.injectHTML(`<style>${fs.readFileSync(path.resolve(process.cwd(), 'dist/public/tailwind.css'))}</style>`)
-        }
-
-    },
-    onBuildFinish: async (vader) => {
-        console.log('TailwindCSS plugin finished building')
-    },
-
-}