vaderjs 1.1.4 → 1.1.6

package/.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5501,
+    "js/ts.implicitProjectConfig.checkJs": true,
+    "js/ts.implicitProjectConfig.experimentalDecorators": true
 }

package/index.js

@@ -0,0 +1,12 @@
+
+/**
+ * @file index.js
+ * @description This is the entry point for the library. This file exports all the necessary classes and functions.
+ * @version 1.1.5
+ * 
+ */
+import { Vader } from "./vader.js";
+// @ts-ignore
+import { VaderRouter } from "./vader-router.js";
+
+export { Vader, VaderRouter };

package/jsconfig.json

@@ -1,14 +1,17 @@
 {
     "compilerOptions": {
-        "allowJs": true,
-        "checkJs": true,
-        "jsx": "react",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "noEmit": true,
-        "strict": true, // Enforce strict type checking
-        "forceConsistentCasingInFileNames": true, // Ensures consistent file name casing
-        "noImplicitAny": true,
+      "allowJs": true,
+      "checkJs": true,
+      "target": "es6",
+      "module": "commonjs",
+      "alwaysStrict": true
+ 
     },
-    "include": ["/"]
-}
+    "exclude": [
+      "node_modules",
+      "dist"
+    ],
+    "include": [
+      "**/*.js"
+    ]
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "vaderjs",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
-  "main": "vader.js",
+  "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "tsc --noEmit "
   },
   "repository": {
     "type": "git",
@@ -22,5 +22,8 @@
   "bugs": {
     "url": "https://github.com/Postr-Inc/Vader.js/issues"
   },
-  "homepage": "https://github.com/Postr-Inc/Vader.js#readme"
+  "homepage": "https://github.com/Postr-Inc/Vader.js#readme",
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  }
 }

package/readme.md

@@ -1,42 +1,116 @@
+<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 Reactive Framework for SPAs
 
 [![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) 
 
-VaderJS is a powerful reactive framework for building Single-Page Applications (SPAs), inspired by React.js.
+VaderJS is powerful component based reactive library for spa inspired by react.js
+
+
+## Get Started
+
+1. Install VaderJS:
+
+```sh
+  npm install vaderjs
+ ```
+
+or
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/vaderjs@latest/index.js" ></script>
+<script type="module" src="https://unpkg.com/vaderjs@latest/index.js">
+ ```
+
+2. Import components and utilities into your project.
+
+ - Heres an example import map
+
+ ```html
+   <script type="importmap">
+        {
+            "imports":{
+                "vaderjs":"./dist/vader/index.js",
+            }
+        }
+    </script>
+ ```
+
+ - Then you can import like this
+
+ ```js
+  import { Vader, VaderRouter } from 'vaderjs'
+  ```
+
+3. Use VaderJS features for routing, state management, auth, and more.
+
+4. Create dynamic SPAs with enhanced user experiences.
 
 ## Key Features
 
 ### Declarative Routing
 
 ```javascript
-const router = new vaderRouter('/');
-router.use('/');
-router.on('/test/:hello', (req) => {
-    console.log(req.params);
-});
-router.start();
+import { VaderRouter } from "vader-router";
+import { MyComponent } from './components/my-component.js'
+const app = new VaderRouter('/') // intial route
+
+app.use('/') // use the route
+
+app.get('/', async (req, res) => {
+    res.render('#app', await MyComponent.render())
+})
+
+app.on('/', async (req, res) => {
+    res.render('#app', await MyComponent.render())
+})
+app.get('/:hello', (req, res) => {
+    res.render('#app', `<h1>Hello ${req.params.hello}</h1>`)
+})
+
+app.start()
 ```
+ 
 
 ### State Management
 
 ```javascript
-const [state, setState] = useState("count", initialState);
-function increment(){
-   setState(state + 1)
+import { Vader } from "vaderjs"
+
+class MyApp extends Vader.Component{
+  contructor(){
+   super()
+   
+  }
+  
+  render(){
+    const [state, setState] = this.useState('state', 0, ()=>{
+     // this is a  callback that is ran on state change!
+    })
+    
+    let myfunc = this.$Function(function fn(){
+      setState(state + 1)
+    })
+
+    this.useEffect(()=>{
+      // this is a callback that is ran on component mount
+    }, [])
+    
+    return this.html(`
+     <p>count ${state} </p>
+     <button onclick="${myfunc}">Change State by 1</button>
+    `)
+    
+  }
 }
-rf('increment', increment)
-useEffect((state)=>{
-  console.log('New State for count' + state)
-}[state])
-<button onclick="increment()">Increment</button>
-
-// useRef in v1.1.2 - allows you to reference a dom element and efficiently update it, update takes the given html and checks for differences and only update the element if necessary
-componentDidMount: () => {
-        let title = useRef('title').current
-        title.innerHTML = 'Home'
-        useRef('title').update(`<span class="text-2xl font-bold">Home</span>`)
-},
-
 ```
 
 ### Signals
@@ -47,36 +121,48 @@ Signals are a way to communicate between components. Signals are similar to even
 
 ```javascript
 
-let count = signal('count', 0)
-function increment(){
-   count.set(count.get() + 1)
-} 
+let count = this.signal('count', 0)
 
-signal.subscribe( (detail)=>{
-   console.log(detail)
+let increment = this.$Function(function increment(){
+  count.set(count.get() + 1)
 })
 
+count.subscribe( (detail)=>{
+   console.log(detail)
+}, true) // true means it will run on once
+
 // call the signal
-signal.call()
+count.call()
 
-signal.cleanup()  // cleans up the signal
+count.cleanup()  // cleans up the signal
 
-signal.get() // returns the signal detail
+count.get() // returns the signal detail
  
 
+
 ```
+- Signals also allow you to share state between scopes
+
+```javascript
+window.addEventListener('signalDispatch', (e)=>{
+  console.log(e.detail)
+})
+````
 
 ### Function Binding
 
 ```javascript
-rf('login', login);
-return html`<button onclick="login()">Login</button>`;
+const fn = this.$Function(function fn() {
+    console.log("Hello World");
+});
+ 
+return html`<button onclick="${fn}">Click Me</button>`
 ```
 
 ### Authentication & Authorization
 
 ```javascript
-const auth = useAuth({
+const auth = this.useAuth({
     rulesets: rules,
     user: currentUser
 });
@@ -85,65 +171,20 @@ if (auth.can('edit')) {
 }
 ```
 
-### Global State Management
-
-```javascript
-const store = createStore(initialState);
-const { state, setState, subscribe } = store;
-```
-
+ 
 ### Simplified Component Creation
 
 ```javascript
-// id is a unique component key in which allows vader to update the component state!
-const myComponent = (id) = component(id, {
- render: (states, props) => {
-   return vhtml(`
-    <div>${props.message}</div>
-   `)
+import { Vader } from 'vaderjs';
+
+export class App extends Vader.Component{
+  constructor(){
+    super('App')
+  }
+  render(){
+    return html`<div>Hello World</div>`
+  }
 }
-})
-
- // then call
-
-myComponent(key).render({props})
-
-//example
-
-import VaderRouter from "./router.js";
-import { vhtml, component, rf } from './script.js'
-
-const app = component('app', {
-  render: (states) => {
-    let [count, setCount] = useState('count', 0);
-    useEffect(() => {
-      console.log(states)
-      console.log('App component mounted');
-    }, [count]);
-
-    function incrementHandler() {
-      setCount(count + 1);
-    }
-    rf('incrementHandler', incrementHandler);
-
-
-    return vhtml(`
-     
-      <div>
-        <button className="btn" onclick="incrementHandler()"
-        
-        >Count: ${count}</button>
-        ${
-          count > 10 ? '<h1 style="color:lightBlue">Greater Than 10</h1>' : 'Less than 10'
-        }
-      </div>
-    `)
-  },
-})
-
-(async ()=>{
-   document.body.innerHTML = await app.render()
-})
 ```
 
 ## Include views
@@ -162,30 +203,20 @@ ${
 
 ```js
 // home.js
-import { vhtml, component, rf, include } from 'vader.js'
-const Home = component('Home', {
- render: async () =>{
-  let html = await include('views/app.html')
-  return vhtml(html)  
-  },
- componentDidMount: () =>{
-  console.log('home mounted')
- }
-})
-```
-
-## Get Started
-
-1. Install VaderJS:
-   ```sh
-   npm install vaderjs
-   ```
-
-2. Import components and utilities into your project.
-
-3. Use VaderJS features for routing, state management, auth, and more.
+import {  Vader, include } from "vaderjs";
+
+class Home extends Vader.Component {
+  constructor() {
+    super();
+  }
+  render() {
+    return this.html(include("views/app.html"));
+  }
+}
 
-4. Create dynamic SPAs with enhanced user experiences.
+ 
+```
+ 
 
 ## License
 

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "commonjs",
+        "allowJs": true,
+        "checkJs": true 
+  
+    },
+    "include": [
+        "**/*.js"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "website"
+    ],
+    "compileOnSave": true,
+}