vaderjs 1.7.5 → 1.7.7

package/bundler/index.js

@@ -41,36 +41,84 @@ try {
       outdir: process.cwd() + "/dist/", 
       format: "esm",
       ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-      packages: "bundle",
-      external: ['*.jsx', '*.js', '*.ts']
+      packages: "bundle",  
+      external:["vaderjs"]
   });
 } catch (error) {
 console.error(error)
 }
 
-let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
 
-function handleReplacements(code) {
-  let lines = code.split("\n");
-  let newLines = [];
+let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
+console.log({builtCode, path:path.join(process.cwd(), 'dist', process.env.filePath) })
+const handleReplacements = (code) => {
+  let lines = code.split('\n')
+  let newLines = []
   for (let line of lines) {
       let hasImport = line.includes('import')
-      if (hasImport && line.includes('from') && !newLines.includes(line)) {
+      if(hasImport && line.includes('vaderjs')){
+          line = line.replace('vaderjs', '/src/vader/index.js')
+      }
+      if (hasImport && line.includes('.css')) {
           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)
+              let isSmallColon = line.includes("'")
+              let url = isSmallColon ? line.split("'")[1] : line.split('"')[1]
+              // start from "/" not "/app"
+              // remvoe all ./ and ../
+              url = url.replaceAll('./', '/').replaceAll('../', '/')
+
+              let p = path.join(process.cwd(), '/', url)
+              line = '';
+              url = url.replace(process.cwd() + '/app', '')
+              url = url.replace(/\\/g, '/')
+              if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
+                  bindes.push(`
+                  <style>
+                    ${fs.readFileSync(p, 'utf-8')}
+                  </style>
+                  `)
+              }
           } catch (error) {
-              continue;
+              console.error(error)
           }
-      } else {
-          newLines.push(line)
       }
+      if (line.toLowerCase().includes('genkey()')) {
+          line = line.toLowerCase().replace('genkey()', `this.key = "${crypto.randomUUID()}"`)
+      }
+      if (!hasImport && line.includes('useFetch')) {
+          line = line.replace('useFetch', 'this.useFetch')
+      }
+      if (!hasImport && line.includes('useState') && line.includes('[')) {
+          let key = line.split(',')[0].split('[')[1].replace(' ', '')
+          let b4 = line
+          b4 = line.replace('useState(', `this.useState('${key}',`)
+          line = b4
+      }
+      if (!hasImport && line.includes('useAsyncState')) {
+          let key = line.split(',')[0].split('[')[1].replace(' ', '')
+          let b4 = line
+          b4 = line.replace('useAsyncState(', `this.useAsyncState('${key}',`)
+          line = b4
+      }
+      if (!hasImport && line.includes('useEffect')) {
+          let b4 = line
+          b4 = line.replace('useEffect(', `this.useEffect(`)
+          line = b4
+      }
+      if (!hasImport && line.includes('useRef')) {
+          let b4 = line
+          let key = line.split(' ')[1].split('=')[0]
+          b4 = line.replace('useRef(', `this.useRef('${key}',`)
+          line = b4
+      }
+
+      newLines.push(line)
   }
-  return newLines.join("\n");
+  let c = newLines.join('\n')
+  return c
 } 
 builtCode = handleReplacements(builtCode)
+ 
 fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
 
 let isClass = function (element) { 
@@ -140,7 +188,8 @@ const generatePage = async (
       )
   );
   process.exit(0);
-}; 
+};
+console.log(process.env.isJsx, process.env.isAppFile == "true" )
 try {  
     if (process.env.isJsx == "true" && process.env.isAppFile == "true"  ) {
       generatePage({ path: process.env.INPUT, route: process.env.OUT })

package/index.ts

@@ -322,33 +322,62 @@ export class Component {
         executeCallback();
       }
     }
-  } useState(key, defaultValue, persist = false) {
+  } 
+  useState(key, defaultValue, persist = false) {
     if (typeof window === "undefined")
-      return [defaultValue, () => {
-      }];
-    let value = sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+      return [defaultValue, () => {}];
+  
+    // Retrieve initial value from sessionStorage or defaultValue
+    let value = sessionStorage.getItem("state_" + key)
+      ? JSON.parse(sessionStorage.getItem("state_" + key)).value
+      : defaultValue;
+  
+    // Parse stringified values safely
     if (typeof value === "string") {
       try {
         value = JSON.parse(value);
-      } catch (error) {
+      } catch {
+        // Value remains a string if parsing fails
       }
     }
-    if (!window["listener" + key] && !isServer) {
-      window["listener" + key] = true;
+  
+    // Ensure event listener is added only once
+    if (!window[`listener_${key}`]) {
+      window[`listener_${key}`] = true;
       window.addEventListener("beforeunload", () => {
-        !persist && sessionStorage.removeItem("state_" + key);
+        if (!persist) sessionStorage.removeItem("state_" + key);
       });
     }
+  
     const setValue = (newValue) => {
       if (typeof newValue === "function") {
         newValue = newValue(value);
       }
-      sessionStorage.setItem("state_" + key, JSON.stringify({ value: newValue }));
-      this.forceUpdate(this.key);
+   
+      const currentValue = sessionStorage.getItem("state_" + key)
+        ? JSON.parse(sessionStorage.getItem("state_" + key)).value
+        : defaultValue;
+  
+      if (JSON.stringify(currentValue) === JSON.stringify(newValue)) {
+        return; // Skip if the value hasn't changed
+      }
+  
+      sessionStorage.setItem(
+        "state_" + key,
+        JSON.stringify({ value: newValue })
+      );
+   
+      if (this.forceUpdate) {
+        this.forceUpdate(this.key);
+      }
     };
+  
     const getVal = () => {
-      return sessionStorage.getItem("state_" + key) ? JSON.parse(sessionStorage.getItem("state_" + key)).value : defaultValue;
+      return sessionStorage.getItem("state_" + key)
+        ? JSON.parse(sessionStorage.getItem("state_" + key)).value
+        : defaultValue;
     };
+  
     return [getVal, setValue];
   }
   useFetch(url, options) {

package/main.js

@@ -200,8 +200,7 @@ async function generateApp() {
         Object.keys(routes.routes).forEach(async (route) => {
 
             let r = routes.routes[route]
-            let code = await Bun.file(r).text()
-            code = handleReplacements(code)
+            let code = await Bun.file(r).text() 
             let size = code.length / 1024
             r = r.replace(process.cwd().replace(/\\/g, '/') + '/app', '')
             var beforeR = r
@@ -229,39 +228,35 @@ async function generateApp() {
                 loader: 'ts',
             }).transformSync(await Bun.file(require.resolve('vaderjs')).text()))
              
-            try {
-                Bun.spawn({
-                    cmd: ['bun', 'run', './dev/bundler.js'],
-                    cwd: process.cwd(),
-                    stdout: 'inherit',
-                    env: {
-                        ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r)),
-                        ROOT: process.cwd() + '/app/',
-                        OUT: path.dirname(r),
-                        file: process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r),
-                        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}`,
-                    },
-                    onExit({ exitCode: code }) {
-                        if (code === 0) {
-                            bindes = []
-                            console.log(`Built ${r} in ${Date.now() - start}ms`)
-                            resolve()
-                        } else {
-                            reject()
-                        }
+            Bun.spawn({
+                cmd: ['bun', 'run', './dev/bundler.js'],
+                cwd: process.cwd(),
+                stdout: 'inherit',
+                env: {
+                    ENTRYPOINT: path.join(process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r)),
+                    ROOT: process.cwd() + '/app/',
+                    OUT: path.dirname(r),
+                    file: process.cwd() + '/dist/' + path.dirname(r) + '/' + path.basename(r),
+                    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}`,
+                },
+                onExit({ exitCode: code }) {
+                    if (code === 0) {
+                        bindes = []
+                        console.log(`Built ${r} in ${Date.now() - start}ms`)
+                        resolve()
+                    } else {
+                        reject()
                     }
-                })
-            } catch (error) {
-                
-            }
+                }
+            })
 
         })
 
@@ -396,9 +391,9 @@ function handleFiles() {
 }
 globalThis.clients = []
 
-if (mode === 'development') {
-    await generateApp()
+if (mode === 'development') { 
     await handleFiles()
+    await generateApp() 
     const watcher = fs.watch(path.join(process.cwd() + '/'), { recursive: true })
     let isBuilding = false; // Flag to track build status
 

package/package.json

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