vaderjs 1.7.4 → 1.7.6

package/bundler/index.js

@@ -38,60 +38,108 @@ try {
       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']
+      packages: "bundle",  
   });
 } 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') 
+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('.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) {
-  return element.toString().startsWith("class");
+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 (isClass(html)) {
+  globalThis.isServer = true; 
+  if(!html){
+    return
+  }
+  if (isClass(html) ) {
       html = new html();
       html.Mounted = true;
       html = html.render();
   } else {
       isFunction = true;
-      let instance = new Component();
+      let instance = new Component(); 
       html = html.bind(instance);
       instance.render = html;
       html = instance.render();
@@ -108,8 +156,12 @@ const generatePage = async (
       headHtml = document(head());
   }
 
+
+
   if (h.includes("<head>")) { 
       h = h.replace("<head>", `<head>${process.env.bindes}`)
+  }else{
+    h += process.env.bindes
   }
 
   await Bun.write(
@@ -133,10 +185,9 @@ const generatePage = async (
   );
   process.exit(0);
 };
-try {
-  if (process.env.isTs == undefined && process.env.isImport) {
-      generatePage({ path: process.env.INPUT, route: process.env.OUT })
-  } else if (process.env.isTs == undefined) {
+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 })
   }
 } catch (error) {

package/index.ts

@@ -124,7 +124,8 @@ globalThis.Fragment = Fragment;
  * @returns
  */
 export const e = (element, props, ...children) => {
-  if(!element) return "" 
+  if (!element)
+    return "";
   let instance;
   switch (true) {
     case isClassComponent(element):
@@ -136,13 +137,16 @@ export const e = (element, props, ...children) => {
     case typeof element === "function":
       instance = new Component;
       instance.render = element;
+      if(element.name.toLowerCase() == "default"){
+        throw new Error("Function name must be unique")
+      } 
+      instance.key = element.name
       instance.Mounted = true;
       let firstEl = instance.render({ key: instance.key, children, ...props }, children);
-      instance.children = children; 
+      instance.children = children;
       if (!firstEl)
         firstEl = { type: "div", props: { key: instance.key, ...props }, children };
       firstEl.props = { key: instance.key, ...firstEl.props, ...props };
-       
       return firstEl;
     default:
       return { type: element, props: props || {}, children: children || [] };
@@ -659,10 +663,14 @@ export function render(element, container) {
   } else {
     let memoizedInstance = memoizeClassComponent(Component);
     memoizedInstance.Mounted = true;
-    memoizedInstance.render = element.bind(memoizedInstance);
-    let el = memoizedInstance.toElement();
-    el.key = memoizedInstance.key;
+    memoizedInstance.render = element.bind(memoizedInstance); 
+    if(element.name == "default"){
+      throw new Error("Function name Must be a unique function name as it is used for a element key")
+    }
+    memoizedInstance.key = element.name
+    let el = memoizedInstance.toElement(); 
+    el.key = element.name
     container.innerHTML = "";
     container.replaceWith(el);
   }
-}
+}

package/main.js

@@ -200,10 +200,10 @@ 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
             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,6 +227,7 @@ 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(),
@@ -239,8 +240,12 @@ async function generateApp() {
                     DEV: mode === 'development',
                     size,
                     bindes: bindes.join('\n'),
+                    isTs: beforeR.endsWith(".tsx"),
                     filePath: r,
-                    INPUT: `../app/${r.replace('.js', '.jsx').replace('.tsx', '.js')}`,
+                    
+                    isJsx:  beforeR.endsWith('.tsx') || beforeR.endsWith(".jsx") ,
+                    isAppFile: true,
+                    INPUT: `../app/${beforeR}`,
                 },
                 onExit({ exitCode: code }) {
                     if (code === 0) {
@@ -314,13 +319,13 @@ function handleFiles() {
                 var file = i
                 fs.mkdirSync(path.join(process.cwd() + '/dist', path.dirname(file)), { recursive: true })
                 // turn jsx to js
-                if (file.includes('.jsx') || file.includes('.tsx')) {
+                if (file.endsWith('.jsx') || file.endsWith('.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)
+                    fs.writeFileSync(path.join(process.cwd() + '/dist', file.replace('.jsx', '.js').replace('.tsx', '.js')), code) 
                     await Bun.spawn({
                         cmd: ['bun', 'run', './dev/bundler.js'],
                         cwd: process.cwd(),
@@ -334,8 +339,9 @@ function handleFiles() {
                             DEV: mode === 'development',
                             size: code.length / 1024,
                             filePath: file.replace('.jsx', '.js'),
-                            isTs: file.includes('.tsx'),
-                            INPUT: path.join(process.cwd(), file.replace('.js', '.jsx').replace('.tsx', '.js')),
+                            isJsx: url.endsWith('.tsx') || url.endsWith(".jsx") ,
+                            isAppFile: false,
+                            INPUT: path.join(process.cwd(), url),
                         },
                         onExit({ exitCode: code }) {
                             if (code === 0) {
@@ -345,7 +351,7 @@ function handleFiles() {
                             }
                         }
                     })
-                } else if (file.includes('.ts')) {
+                } else if (file.endsWith('.ts')) {
                     let code = await Bun.file(file).text()
                     code = handleReplacements(code)
                     file = file.replace('.ts', '.js')
@@ -385,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
 
@@ -527,4 +533,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.4",
+    "version": "1.7.6",
     "description": "A simple and powerful JavaScript library for building modern web applications.", 
     "bin": {
         "vaderjs": "./main.js"