vaderjs 1.3.3-alpha-20 → 1.3.3-alpha-21

package/README.md

@@ -1,174 +1,176 @@
-<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/file
-```
-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/file
-
- 
-```
-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 which is much better than react vdom,  simply pass the ref key to state and only that element will update - no vdom required!!
-
-```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. 
+<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/file
+```
+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/file
+
+ 
+```
+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. 

package/client/index.js

@@ -434,6 +434,12 @@ export class Component {
    
       paramNames = paramNames.replace(/,,/g, ',');
     let newparamnames = paramNames.replaceAll(',,', ',')
+     params.forEach((param, index) => {
+       if(param && Object.keys(param).includes('detail')){ 
+         param = param['detail']['target']['event']
+         params[index] = param
+       }
+     });
       // Remove trailing commas
       paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
       console.log(paramNames)
@@ -711,6 +717,12 @@ export const constant = (value) => {
   }
   return constants[key];
 };
+/**
+ * @method useRef
+ * @description  Allows you to use a reference to a DOM element
+ * @param {*} initialState 
+ * @returns 
+ */
 
 export const useRef = (initialState) => {
   return {

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-20",
+  "version": "1.3.3-alpha-21",
   "bin": {
     "vader": "./vader.js"
   },

package/runtime/router.js

@@ -198,8 +198,9 @@ class VaderRouter{
             });
           }
         },
-        redirect: (path) => {
-          window.location.hash = path;
+        redirect: (path) => { 
+          !path.startsWith('/') ? path = `/${path}` : null;
+          window.location.hash = `#${path}`;
         },
         render: async (/**@type {Component} */ Component, req, res) => {
           

package/runtime/vader.js

@@ -167,22 +167,10 @@ export class Component {
     this.checkIFMounted();
     this.memoizes = []
     
-    this.vdom =  []
+    
     
     this.children = []
-    let dom = new DOMParser().parseFromString(this.render(), 'text/html').body.firstChild;
-    dom.querySelectorAll('*').forEach((el) => {
-       let obj = {
-          el: el,
-          tag: el.tagName,
-          html: el.innerHTML,
-          content: el.textContent,
-          value: el.value,
-          attributes: el.attributes,
-          children: el.childNodes,
-       } 
-       this.vdom.push(obj)
-    });
+   
      
     /**
      * Parent of the current component.
@@ -434,6 +422,12 @@ export class Component {
    
       paramNames = paramNames.replace(/,,/g, ',');
     let newparamnames = paramNames.replaceAll(',,', ',')
+     params.forEach((param, index) => {
+       if(param && Object.keys(param).includes('detail')){ 
+         param = param['detail']['target']['event']
+         params[index] = param
+       }
+     });
       // Remove trailing commas
       paramNames.endsWith(',') ? paramNames = paramNames.slice(0, -1) : null;
       console.log(paramNames)
@@ -546,28 +540,45 @@ export class Component {
   }
 
   /**
-   * Uses state to dynamically update the component.
-   * @method useState
-   * @param {string} [key=null] - The auto-generated key.
-   * @param {*} initialState - The initial state.
-   * @param {Component.render} [func=null] - The render function.
-   * @returns {Array} - An array containing the state value and the setter function.
-   */
-  useState(key = null, initialState) {
-    if (!this.state[key]) {
-      this.state[key] = initialState;
-    }
-    let updatedValue = () => this.state[key];
-    const getValue = updatedValue()
-    const set = (newValue, hook) => { 
-      this.state[key] = newValue;
-      this.hydrate(hook);
-    };
-    this[`set${key}`] = set;
-    this[`get${key}`] = getValue;
-    return [getValue, set];
+ * useState hook.
+ *
+ * @template T
+ * @param {string} key - The key for the state property.
+ * @param {T} initialState - The initial state value.
+ * @returns {[() => T, (newValue: T, hook: Function) => void]} - A tuple with getter and setter functions.
+ */
+ useState(key, initialState) {
+  if (!this.state[key]) {
+    this.state[key] = initialState;
   }
 
+  /**
+   * Get the current state value.
+   *
+   * @returns {T} The current state value.
+   */
+  let updatedValue = () => this.state[key];
+
+  const getValue = updatedValue();
+
+  /**
+   * Set a new value for the state.
+   *
+   * @param {T} newValue - The new value to set.
+   * @param {Function} hook - The hook to hydrate after setting the value.
+   */
+  const set = (newValue, hook) => {
+    this.state[key] = newValue;
+    this.hydrate(hook);
+  };
+
+ 
+
+  return  [this.state[key], set];
+}
+
+  
+
   useRef(key = null, initialState) {
     if (!this.state[key]) {
       this.state[key] = initialState;
@@ -675,22 +686,41 @@ export const require = async (path, noresolve = false) => {
 
 
 window.require = require;
-
 /**
- * @method useState - type
- * @param {*} initialState
- * @returns  {Array} [value, set]
- * @description Allows you to use state to dynamically update your component
+ *  useState hook.
+ *
+ * @param {string} key - The key for the state property.
+ * @param {*} initialState - The initial state value.
+ * @returns {[*]} - A tuple with the current state value and a setter function.
  */
-export const useState = (initialState) => {
-  let key = ''
-  let value = initialState;
-  if (key && !states[key]) {
-    this.states[key] = initialState;
+export const useState = (key, initialState) => {
+  if (!states[key]) {
+    states[key] = initialState;
   }
-  return [value, (newValue) => {}];
+
+  /**
+   * Get the current state value.
+   *
+   * @returns {*} The current state value.
+   */
+  let updatedValue = () => states[key];
+
+  /**
+   * Set a new value for the state.
+   *
+   * @param {*} newValue - The new value to set.
+   * @param {Function} hook - The hook to hydrate after setting the value.
+   */
+  const set = (newValue, hook) => {
+    states[key] = newValue;
+    this.hydrate(hook);
+  };
+
+  return [states[key], set];
 };
 
+ 
+
 /**
  * @method useReducer
  * @param {*} initialState 
@@ -712,12 +742,26 @@ export const constant = (value) => {
   return constants[key];
 };
 
+ /**
+ *  useRef hook.
+ *
+ * @param {*} initialState - The initial state value for the ref.
+ * @returns {{ current: *, bind: string }} - An object containing the current value and a bind string.
+ */
 export const useRef = (initialState) => {
   return {
+    /**
+     * @description The current value of the ref.
+     
+     */
     current: initialState,
+    /**
+     * @description A unique string that can be used to bind the ref to an element.
+     */
     bind: '',
   };
 };
+
 export default {
   Component,
   require,

package/vader.js

@@ -447,18 +447,6 @@ function Compiler(func) {
         value = value.match(regex) ? value.match(regex)[0].split("useRef(")[1].split(")")[0].trim() : value
         let newState = `${type} ${key} = this.useRef('${key}', ${value}`;
 
-        string = string.replace(line, newState);
-      }else if (line.includes("useReducer") && !line.includes("import")){
-        line = line.trim();
-        // let ref = useRef(null)
-        let type = line.split(" ")[0];
-        let key = line.split("=")[0].split(" ")[1].trim();
-        let value = line.split("=")[1].split("useReducer(")[1] 
-         
-        let regex = /useReducer\((.*)\)/gs
-        value = value.match(regex) ? value.match(regex)[0].split("useReducer(")[1].split(")")[0].trim() : value
-        let newState = `${type} ${key} = this.useReducer('${key}', ${value}`;
-
         string = string.replace(line, newState);
       }
     }
@@ -757,7 +745,9 @@ switch (true) {
   case process.argv.includes('--watch'):
 
     console.log(`
-Vader.js v1.3.3  
+Vader.js v1.3.3
+- Watching for changes in ./pages
+- Watching for changes in ./src
 `)
     Build()