vaderjs 1.3.3-alpha-34 → 1.3.3-alpha-36

package/README.md

@@ -1,3 +1,4 @@
+
 <p align="center">
   <a href="https://vader-js.pages.dev">
     <picture>
@@ -73,8 +74,9 @@ For pages that have [params] you can derive it using this.request
 
 ```jsx
 // pages/home.jsx
-let {Component, useState} = await import('vaderjs/client') // this will be automatically handled by vader in compile time
-let Mycomponent = await require('./pages/mycomponent')
+import  {Component, useState, useRef} = from 'vaderjs/client'
+import Mycomponent from './src/mycomponent.jsx' 
+
 class Home extends Vader {
   constructor() {
     super();
@@ -90,7 +92,7 @@ class Home extends Vader {
   }
 }
 
-return {default:Home}
+export default Home
 ```
 
  
@@ -174,3 +176,183 @@ VaderJS is released under the MIT License. See the [LICENSE](https://github.com/
 ## Join the Community
 
 Connect with the VaderJS community on [GitHub](https://github.com/Postr-Inc/Vader.js). Contribute, share feedback, and improve VaderJS for SPA development. 
+=======
+<p align="center">
+  <a href="https://vader-js.pages.dev">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
+      <img src="./logo.png" height="128">
+    </picture>
+    <h1 align="center">Vader.js</h1>
+  </a>
+</p>
+
+# VaderJS: A Powerful Reactive Framework for SPAs inspired by react.js!
+
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs) 
+
+ 
+
+## Get Started 
+
+2. Install vaderjs
+
+ ```bash
+   npm i vaderjs@latest
+ ```
+
+3. Install five server - recommended to watch the index.html file as you edit your code
+
+[Vscode 5 Server](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server)
+
+4.  Create Proper Folders
+
+Create a pages folder - which allows you to have nextjs page like routing via buns file based router
+
+Tip: Each folder can be deep nested up to 4 levels!
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/
+/pages/test/[...]/index.jsx = /path/test/*
+/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
+```
+Keyword folders - all files are passed from these folders to the `dist` folder
+
+```bash
+
+pages - used for jsx route files
+src  - used for your jsx components / javascript files
+public - used for anything 
+
+```
+
+ 
+
+5. And your done - Run `npx vaderjs` and the compiled output is visible inside of the `/dist/` folder!
+
+
+## Key Features & Examples
+ 
+### File based routing
+vader's compiler automatically handles routing so you wont need to! - it uses a similar page routing to nextjs
+
+```bash
+/pages/index.jsx = /
+/pages/home/[page].jsx  = /home/:page
+/pages/path/index.jsx = /path/
+/pages/path/[...].jsx = /path/*
+ 
+```
+For pages that have [params] you can derive it using this.request
+ 
+
+### Simplified Component Creation
+
+```jsx
+// pages/home.jsx
+let {Component, useState} = await import('vaderjs/client') // this will be automatically handled by vader in compile time
+let Mycomponent = await require('./pages/mycomponent')
+class Home extends Vader {
+  constructor() {
+    super();
+    this.key = '2'
+  }
+  render() {
+    return  <>
+      <div key={this.key}>
+        <p>Hello World</p>
+      </div>
+      <Mycomponent ..props />
+    </>
+  }
+}
+
+return {default:Home}
+```
+
+ 
+
+### State Management
+Vaderjs uses partial hydration & full reflection
+
+You can pass a reference to the dom target like an id for the element u want to change - or you can just swap the value and the entire component will rerender
+
+```jsx
+let {Component, useState, useRef} = await import('vaderjs/client') 
+
+class MyApp extends Component{
+  contructor(){
+   super()
+   this.key = 'static key for state changes'
+  }
+  
+  render(){
+    let [count, setCount] = useState(0)
+    let ref = useRef('')
+   
+    return  <>
+     <p ref={ref.bind}>Count is ${count}</p>
+     ${/**
+       pass anything used from the toplevel render to the lowerlevel function params to be able to invoke!
+      **/}
+     <button onclick={(setCount, count, ref)=>{
+      setCount(count + 1, ref.bind)
+     }}>Increment</button>
+    </>
+    
+  }
+}
+
+return {default:MyApp}
+```
+
+
+### Function Binding
+
+Vaderjs allows you to bind functions directly to html elements just like react
+there are two ways - top level invokes like below
+
+```javascript
+// vader uses params[0] as the event target object and other parameters resolve after
+
+function click(event, otherparams){
+    console.log(event.target, otherparams)
+}
+
+const hello = function(event, otherparams){
+
+}
+ 
+return <>
+ <button onclick={()=>click()}>Click Me</button>
+</>
+```
+ 
+and lower level invokes - these operate the same just allow you to pass items from top level to lower level: ex - I have a variable named car and i want the button to log it i can pass it as a parameter to allow it to be added to the buttons function scope
+
+```jsx
+let car = {
+  model: 'tesla',
+  price: 'toomiuch'
+}
+return <>
+<button onclick={(car)=>{
+ console.log(car.model)
+}}>Log</button>
+```
+
+ 
+
+ 
+ 
+
+## License
+
+VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for details.
+
+## Join the Community
+
+Connect with the VaderJS community on [GitHub](https://github.com/Postr-Inc/Vader.js). Contribute, share feedback, and improve VaderJS for SPA development. 
+>>>>>>> 2a55d1782fcc399a8d0a72467bc88dfcfe49db88

package/package.json

@@ -2,7 +2,7 @@
   "name": "vaderjs",
   "description": "A Reactive library aimed to helping you build reactive applications inspired by react.js",
   "module": "vader.js",
-  "version": "1.3.3-alpha-34",
+  "version": "1.3.3-alpha-36",
   "bin": {
     "vader": "./vader.js"
   },

package/vader.js

@@ -659,6 +659,7 @@ function Compiler(func) {
   string += `\n\n //wascompiled`;
 
   string = string.replaceAll("undefined", "");
+  let exportss = {}
   string.split('\n').forEach(line => {
     if(line.includes('import')){
       let asyncimportMatch = line.match(/import\((.*)\)/gs) 
@@ -721,10 +722,12 @@ function Compiler(func) {
       let b4line = line;
       let exports = line.split('export')[1].trim();
       let isDefault = exports.includes('default');  
-      let newExport = '';
+       
       let name = ''
       switch (true) {
-        case exports &&  isDefault: 
+        case exports &&  isDefault:
+          console.log('default')
+
           let expt = exports.split('default')[1].trim();
           // Check if it's a class definition
           if (expt.includes('class')) {
@@ -733,14 +736,15 @@ function Compiler(func) {
             let className =  match ? match[0].split('class')[1].split('extends')[0].trim() : expt.split('class')[1].split('{')[0].trim();
              name = className
 
-            newExport =  isDefault ? `return {default: ${className}}` : `return ${className}`;
+            exportss['default'] = className
           } else if (expt.includes('function')) {
             let funcName = expt.split('function')[1].split('(')[0].trim();
             name = funcName
-            newExport =  isDefault ? `return {default: ${funcName}}` : `return ${funcName}`;
+              exportss[isDefault ? 'default' : funcName] = funcName
           }else{
             name = expt
-            newExport = isDefault ? `return {default: ${expt}}` : `return ${expt}`;
+            exportss[isDefault ? 'default' : expt] = expt
+            
           }
           break;
     
@@ -748,23 +752,24 @@ function Compiler(func) {
           let expt2 =  exports
           if(expt2.includes('function')){
             let funcName = expt2.split('function')[1].split('(')[0].trim();
-            newExport = `return ${funcName}`;
+            exportss[funcName] = funcName
           }else if(expt2.includes('class')){
             let match =  expt2.match(/class\s*([a-zA-Z0-9_-]+)\s*extends\s*([a-zA-Z0-9_-]+)/gs)
             let className =  match ? match[0].split('class')[1].split('extends')[0].trim() : expt2.split('class')[1].split('{')[0].trim();
             name = className
-            newExport = `return ${className}`;
+            exportss[className] = className
           }
           break;
       }
     
-      if (newExport) { 
-        string = string.replace(b4line, b4line.replaceAll(/\s+/g, " ").trim().split('export').join('').split('default').join('').trim());
-        string = `${string}\n${newExport}`;
-      }
+      string = string.replace(b4line, b4line.replaceAll(/\s+/g, " ").trim().split('export').join('').split('default').join('').trim());
     }
     
+     
   })
+  if(exportss){
+    string = string + `\n return ${Object.keys(exportss).length > 0 ? `{${Object.keys(exportss).map(key => key + ':' + exportss[key]).join(',')}}` : Object.keys(exportss)[0]}`
+  }
    
   return string;
 }