vaderjs 2.1.6 → 2.1.8

package/bundler/index.js

@@ -63,6 +63,11 @@ globalThis.window = {
     pathname: "",
   },
 } 
+
+globalThis.localStorage = {
+  setItem: (key, value) => { },
+  getItem: (key) => { },
+}
 try {
   await Bun.build({
     entrypoints: [process.env.ENTRYPOINT],
@@ -73,7 +78,7 @@ try {
     ...(JSON.parse(process.env.DEV) ? { sourcemap: "inline" } : {}),
     packages: "bundle",
     env: "inline", 
-    external: ["vaderjs"]
+    external: ["vaderjs", "*.png", "*.jpg", "*.jpeg", "*.gif", "*.svg", "*.css"],
   });
 } catch (error) {
   console.error(error)
@@ -81,7 +86,7 @@ try {
 
 
 let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
-
+ 
 const handleReplacements = (code) => {
   let lines = code.split('\n')
   let newLines = []
@@ -89,6 +94,20 @@ const handleReplacements = (code) => {
     let hasImport = line.includes('import')
     if (hasImport && line.includes('vaderjs')) {
       line = line.replace('vaderjs', '/src/vader/index.js')
+    } 
+    if (hasImport && line.includes('react')) {
+      line = line.replace('react', '/src/vader/index.js')
+    } 
+    if(hasImport && line.includes('public') && line.includes('.png') ||
+     line.includes('.jpg') || line.includes('.jpeg') || line.includes('.gif') || line.includes('.svg')) {
+       let url = line.split('"')[1]
+       // replace ../../
+        var b4 = url
+        let filevariable = line.split("import")[1].split("from")[0].replace(" ", "").replace("{", "").replace("}","")
+         
+        url =   url.replace('../../', '').replace('../', '').replace('./', '')
+        line = `var ${filevariable} = "${url}"`
+        console.log(line)
     }
     if (hasImport && line.includes('.css')) {
       try {
@@ -210,7 +229,27 @@ const generatePage = async (
     html = instance.render();
   }
 
+  
   let h = document(html);
+  if(process.env.bindes.includes('<link rel="stylesheet" ')){
+    // turn stylesheet into inline style
+    let links = process.env.bindes.split('<link rel="stylesheet" ')
+    let styles = []
+    for(let link of links){
+      if(link.includes('href')){
+        let href = link.split('href=')[1].split('>')[0].replace('"', '').replace('"', '')
+        let file = fs.readFileSync(path2.join(process.cwd() + "/dist/", href), 'utf-8')
+        styles.push(file)
+      }
+    } 
+    let style = styles.join('\n')
+    process.env.bindes = `
+    <style>
+      ${style}
+    </style>
+    `
+  }
+
   if (!fs.existsSync(process.cwd() + "/dist" + path2.dirname(route))) {
     fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
       recursive: true,

package/index.ts

@@ -58,7 +58,36 @@ if(isServer){
 export const useFetch = (url: string, options: any) => {
   return [null, true, null];
 };
-
+/**
+ * @description - Bypasses this error when using state in a non parent function
+ * @param funct 
+ * @param context 
+ * @returns 
+ * @example
+ * // - src/index.ts
+ * 
+ * export default function useAuth(){ 
+ *  let [isAuthenticated, setAuthenticated] = useState(false)
+ * }
+ * 
+ * // app/index.jsx
+ * 
+ * export default function(){
+ *  // this will error because this is not present in the cild function
+ *  const { isAuthenticated } = useAuth()
+ *  // to declare this we need to use bound from vaderjs module
+ *  const { isAuthenticated } = bound(useAuth)()
+ *  return ( 
+ *   <div></div>
+ * 
+ *  )
+ * }
+ */
+export function bound(funct: Function, context: any) {
+  return function() {
+    return funct.apply(context, arguments);
+  };
+}
 /**
  * @description - useRef allows you to store a reference to a DOM element
  * @param value

package/main.js

@@ -129,7 +129,15 @@ const handleReplacements = (code) => {
     let newLines = []
     for (let line of lines) {
         let hasImport = line.includes('import')
+ 
+        if(hasImport && line.includes('public')){
+            // remove ../ from path 
+
+            line = line.replaceAll('../', '').replaceAll('./', '')
 
+            line = line.replace('public', '/public')
+            console.log(line)
+        }
         if (hasImport && line.includes('.css')) {
             try {
                 let isSmallColon = line.includes("'")
@@ -198,6 +206,11 @@ let start = Date.now()
 async function generateApp() {
     globalThis.isBuilding = true;
     console.log(ansiColors.green('Building...')) 
+    if (mode === 'development') {
+        fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
+    } else {
+        fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
+    }
     let plugins = config.plugins || []
     for (let plugin of plugins) {
         if (plugin.onBuildStart) {
@@ -205,11 +218,7 @@ async function generateApp() {
         }
     }
 
-    if (mode === 'development') {
-        fs.rmdirSync(process.cwd() + '/dist', { recursive: true })
-    } else {
-        fs.mkdirSync(process.cwd() + '/dist', { recursive: true })
-    }
+    
     return new Promise(async (resolve, reject) => {
         let routes = new Bun.FileSystemRouter({
             dir: path.join(process.cwd(), '/app'),
@@ -426,56 +435,60 @@ function handleFiles() {
 globalThis.clients = []
 
 if (mode === 'development') {
-    await generateApp()
-    await handleFiles()
-    const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true })
-    let isBuilding = false; // Flag to track build status
-
-    // Initialize a variable to hold the timeout ID
-    let debounceTimeout;
-
-    // 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')
-        ) {
-            // delete files cache
-            if (file.endsWith('vader.config.ts')){
-                delete require.cache[require.resolve(process.cwd() + '/vader.config.ts')]
-
-                config = require(process.cwd() + '/vader.config.ts').default
-                port = config.port;
-                host_provider = config.host_provider
-                host = config.host
-
-                globalThis.config = config
-            }
-            if (file.includes('dist')) return
-            clearTimeout(debounceTimeout);
-            debounceTimeout = setTimeout(async () => {
-                if (!isBuilding) { // Check if not already building
-                    isBuilding = true; // Set build flag to true
-                    try {
-                        await generateApp();
-                        await handleFiles();
-                        let t = setTimeout(() => {
-                            clients.forEach(c => {
-                                c.send('reload');
-                            });
-                            clearTimeout(t)
-                        }, 1000)
-                    } catch (error) {
-                        console.error(error);
-                    } finally {
-                        isBuilding = false; // Reset build flag
-                    }
+    try {
+        await generateApp()
+        await handleFiles()
+        const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true })
+        let isBuilding = false; // Flag to track build status
+    
+        // Initialize a variable to hold the timeout ID
+        let debounceTimeout;
+    
+        // 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')
+            ) {
+                // delete files cache
+                if (file.endsWith('vader.config.ts')){
+                    delete require.cache[require.resolve(process.cwd() + '/vader.config.ts')]
+    
+                    config = require(process.cwd() + '/vader.config.ts').default
+                    port = config.port;
+                    host_provider = config.host_provider
+                    host = config.host
+    
+                    globalThis.config = config
                 }
-            }, 500);
-        }
-    };
-
-    // Event listeners with debounced handling
-    watcher.on('change', handleFileChangeDebounced);
+                if (file.includes('dist')) return
+                clearTimeout(debounceTimeout);
+                debounceTimeout = setTimeout(async () => {
+                    if (!isBuilding) { // Check if not already building
+                        isBuilding = true; // Set build flag to true
+                        try {
+                            await generateApp();
+                            await handleFiles();
+                            let t = setTimeout(() => {
+                                clients.forEach(c => {
+                                    c.send('reload');
+                                });
+                                clearTimeout(t)
+                            }, 1000)
+                        } catch (error) {
+                            console.error(error);
+                        } finally {
+                            isBuilding = false; // Reset build flag
+                        }
+                    }
+                }, 500);
+            }
+        };
+    
+        // Event listeners with debounced handling
+        watcher.on('change', handleFileChangeDebounced);
+    } catch (error) {
+        console.error(error)    
+    }
 
 }
 else if (mode == 'production') {

package/package.json

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

package/plugins/tailwind.ts

@@ -14,6 +14,10 @@ function checkIfTailwindInstalled() {
 function initTailwind() { 
     const tailwindConfig = path.resolve(process.cwd(), 'tailwind.config.js')
     const postcssConfig = path.resolve(process.cwd(), 'postcss.config.js')
+    const tailwindCssFile = path.join(process.cwd(), '/public/styles.css')
+    if(!fs.existsSync(tailwindCssFile)){
+        fs.writeFileSync(tailwindCssFile, `@import "tailwindcss"`)
+    }
     if (!fs.existsSync(tailwindConfig)) {
         fs.writeFileSync(postcssConfig, `module.exports = {
             plugins: {
@@ -39,23 +43,25 @@ module.exports = {
 export default {
     name: 'tailwindcss',
     description: 'TailwindCSS plugin for Vader.js',
-    version: '0.0.1',
+    version: '0.0.2',
     onBuildStart: async (vader) => {
         if (!checkIfTailwindInstalled()) {
-            console.error('TailwindCSS is not installed. Please install it using `bun install  tailwindcss postcss-cli autoprefixer`')
+            console.error('TailwindCSS is not installed. Please install it using `bun  install tailwindcss @tailwindcss/postcss postcss \n more info: https://tailwindcss.com/docs/installation/using-postcss`')
             process.exit(1)
         }else{
            initTailwind()
+           console.log('Building TailwindCSS...')
            
            if(vader.isDev){
             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.injectHTML(`<link rel="stylesheet" href="/public/tailwind.css">`)
            }) 
            }
            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>`)
+           vader.injectHTML(`<link rel="stylesheet" href="/public/tailwind.css">`) 
+
         }  
         
         return