vaderjs 1.7.6 → 1.7.8

package/bundler/index.js

@@ -15,8 +15,8 @@ let path2 = require("path");
 globalThis.Fragment = Fragment;
 globalThis.window = {
   location: {
-      hash: "",
-      host: "",
+    hash: "",
+    host: "",
   },
 };
 globalThis.Component = Component;
@@ -35,138 +35,157 @@ globalThis.document = {
 };
 try {
   await Bun.build({
-      entrypoints: [process.env.ENTRYPOINT],
-      minify: false,
-      root: process.cwd() + "/dist/",
-      outdir: process.cwd() + "/dist/", 
-      format: "esm",
-      ...(process.env.DEV ? { sourcemap: "inline" } : {}),
-      packages: "bundle",  
+    entrypoints: [process.env.ENTRYPOINT],
+    minify: false,
+    root: process.cwd() + "/dist/",
+    outdir: process.cwd() + "/dist/",
+    format: "esm",
+    ...(process.env.DEV ? { sourcemap: "inline" } : {}),
+    packages: "bundle",
+    external: ["vaderjs"]
   });
 } catch (error) {
-console.error(error)
+  console.error(error)
 }
 
 
-let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8') 
+let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
+
 const handleReplacements = (code) => {
   let lines = code.split('\n')
   let newLines = []
   for (let line of lines) {
-      let hasImport = line.includes('import')
-
-      if (hasImport && line.includes('.css')) {
-          try {
-              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(`
+    let hasImport = line.includes('import')
+    if (hasImport && line.includes('vaderjs')) {
+      line = line.replace('vaderjs', '/src/vader/index.js')
+    }
+    if (hasImport && line.includes('.css')) {
+      try {
+        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) {
-              console.error(error)
-          }
-      }
-      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
+        }
+      } catch (error) {
+        console.error(error)
       }
+    }
+    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.match(/\buseState\d*\(/) && line.includes('[') && !line.includes("this")) {
+     
+
+      let key = line.split(',')[0].split('[')[1].replace(' ', '');
+
+      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key}',`);
+
+      line = updatedLine; 
+    }
+
+    if (!hasImport && line.match(/\buseAsyncState\d*\(/) && line.includes('[') && !line.includes("this")) {
+       
+
+      let key = line.split(',')[0].split('[')[1].replace(' ', '');
+
+      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key}',`);
+
+      line = updatedLine; 
+    }
+
+    if (!hasImport && line.match(/\buseEffect\d*\(/) && !line.includes("this")) {
+   
+
+      let updatedLine = line.replace(/\buseEffect\d*\(/, `this.useEffect(`);
+
+      line = updatedLine; 
+    }
+
+    if (!hasImport && line.match(/\buseRef\d*\(/) && !line.includes("this")) {
+     
+
+      let key = line.split(' ')[1].split('=')[0];
+
+      let updatedLine = line.replace(/\buseRef\d*\(/, `this.useRef('${key}',`);
+
+      line = updatedLine; 
+    }
+
 
-      newLines.push(line)
+    newLines.push(line)
   }
   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) { 
+let isClass = function (element) {
   return element && element.toString().startsWith("class");
 };
 const generatePage = async (
   data = { path: process.env.INPUT, route: process.env.OUT }
 ) => {
   const { path, route } = data;
-  if (path.includes("root.js")) return; 
+  if (path.includes("root.js")) return;
   let html = await import(path).then((m) => m.default);
-   
+
   let { head } = await import(path).then((m) => m);
   let isFunction = false;
-  globalThis.isServer = true; 
-  if(!html){
+  globalThis.isServer = true;
+  if (!html) {
     return
   }
-  if (isClass(html) ) {
-      html = new html();
-      html.Mounted = true;
-      html = html.render();
+  if (isClass(html)) {
+    html = new html();
+    html.Mounted = true;
+    html = html.render();
   } else {
-      isFunction = true;
-      let instance = new Component(); 
-      html = html.bind(instance);
-      instance.render = html;
-      html = instance.render();
+    isFunction = true;
+    let instance = new Component();
+    html = html.bind(instance);
+    instance.render = html;
+    html = instance.render();
   }
 
   let h = document(html);
   if (!fs.existsSync(process.cwd() + "/dist" + path2.dirname(route))) {
-      fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
-          recursive: true,
-      });
+    fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
+      recursive: true,
+    });
   }
   let headHtml = "";
   if (head) {
-      headHtml = document(head());
+    headHtml = document(head());
   }
 
 
 
-  if (h.includes("<head>")) { 
-      h = h.replace("<head>", `<head>${process.env.bindes}`)
-  }else{
+  if (h.includes("<head>")) {
+    h = h.replace("<head>", `<head>${process.env.bindes}`)
+  } else {
     h += process.env.bindes
   }
 
   await Bun.write(
-      process.cwd() + "/dist/" + route + "/index.html",
-      `<!DOCTYPE html>
+    process.cwd() + "/dist/" + route + "/index.html",
+    `<!DOCTYPE html>
       ${h} 
       <script type="module"> 
         import c from '${process.env.filePath}'
@@ -177,18 +196,18 @@ const generatePage = async (
             `
   );
   console.log(
-      ansiColors.blue(
-          `${process.env.filePath.replace(".js", ".jsx")} - ${parseInt(
-              process.env.size
-          ).toFixed(2)}kb`
-      )
+    ansiColors.blue(
+      `${process.env.filePath.replace(".js", ".jsx")} - ${parseInt(
+        process.env.size
+      ).toFixed(2)}kb`
+    )
   );
   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 })
+ 
+try {
+  if (process.env.isJsx == "true" && process.env.isAppFile == "true") {
+    generatePage({ path: process.env.INPUT, route: process.env.OUT })
   }
 } catch (error) {
   console.log(ansiColors.red(error))

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/package.json

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