vaderjs 1.0.0-rv1 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.0.0-rv1",
+  "version": "1.0.1",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
   "main": "vader.js",
   "scripts": {

package/readme.md

@@ -0,0 +1,101 @@
+# 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) 
+
+VaderJS is a powerful reactive framework for building Single-Page Applications (SPAs), inspired by React.js.
+
+## Key Features
+
+### Declarative Routing
+
+```javascript
+const router = new vaderRouter('/');
+router.use('/');
+router.on('/test/:hello', (req) => {
+    console.log(req.params);
+});
+router.start();
+```
+
+### State Management
+
+```javascript
+const [state, setState] = useState("count", initialState);
+function increment(){
+   setState(state + 1)
+}
+registerFunction('increment', increment)
+useEffect((state)=>{
+  console.log('New State for count' + state)
+}[state])
+<button onclick="increment()">Increment</button>
+```
+
+### Function Binding
+
+```javascript
+registerFunction('login', login);
+return html`<button onclick="login()">Login</button>`;
+```
+
+### Authentication & Authorization
+
+```javascript
+const auth = useAuth({
+    rulesets: rules,
+    user: currentUser
+});
+if (auth.can('edit')) {
+    // Display edit button
+}
+```
+
+### Global State Management
+
+```javascript
+const store = createStore(initialState);
+const { state, setState, subscribe } = store;
+```
+
+### Simplified Component Creation
+
+```javascript
+async function myComponent(props){
+   return vhtml`
+    <div>${props.message}</div>
+   `
+}
+
+async function app(props){
+   let html  = await createComponent(myComponent, {
+      message: 'Hello Vader'
+   })
+   return vhtml `
+   <div>
+   ${html}
+   </div>
+   `
+}
+ 
+```
+
+## 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.
+
+4. Create dynamic SPAs with enhanced user experiences.
+
+## 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/readme.MD

@@ -1,54 +0,0 @@
-# VaderJS: A Reactive Framework for Single-Page Applications (SPA)
-
-[![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 and innovative reactive framework designed to simplify the development of Single-Page Applications (SPAs). Built with inspiration from React.js, VaderJS empowers developers to create dynamic and interactive web applications by leveraging a collection of functions and utilities tailored to the SPA paradigm. This overview provides insights into the core features and functionalities of VaderJS based on the discussions and code snippets shared in this conversation.
-
-## Key Features
-
-### Declarative Routing
-
-VaderJS offers a declarative routing system that simplifies the navigation within your SPA. The `vaderRouter` class provides an intuitive interface for defining routes, handling errors, and managing URL parameters. By using the `start`, `get`, `use`, and `on` methods, developers can effortlessly create routes and associate them with corresponding components, enhancing the user experience through smooth navigation.
-
-### State Management
-
-The framework includes a versatile state management solution with functions like `useState`, allowing developers to efficiently manage and update the application's state. This approach ensures that your components remain responsive to changes and user interactions. Additionally, the `useSyncStore` and `useExternalStore` hooks facilitate synchronization and management of state across different components and interactions.
-
-### Function Binding
-
-VaderJS introduces the `registerFunction` utility, enabling seamless binding of JavaScript functions to vhtml elements within your components. This feature enhances code organization and promotes reusability by enabling developers to create functions that interact directly with the component's scope.
-
-### Authentication and Authorization
-
-With the `useAuth` function, VaderJS provides a comprehensive authentication and authorization system. Developers can define rulesets, roles, and conditions to control user access to specific actions and components. This feature ensures that your application remains secure and grants the appropriate level of access to authorized users.
-
-### Global State Management
-
-The framework includes the `createStore` function, which establishes a global state management solution. This centralized store allows components to subscribe to state changes and maintain synchronization throughout the application. The `useSyncStore` and `useExternalStore` hooks provide further options for accessing and manipulating global state.
-
-### Simplified Component Creation
-
-VaderJS streamlines the process of creating components with the `createComponent` function. This utility enables developers to define component functions and props, facilitating the creation of reusable and modular UI elements.
-
-## Get Started with VaderJS
-
-To start using VaderJS in your SPA project, follow these steps:
-
-1. Install VaderJS from your preferred package manager:
-   ```sh
-   npm install vaderjs
-   ```
-
-2. Import the necessary components and utilities into your project files.
-   
-3. Leverage the provided classes, functions, and hooks to implement routing, state management, function binding, authentication, and more.
-
-4. Utilize the declarative syntax and intuitive APIs to create dynamic and responsive SPAs with enhanced user experiences.
-
-## License
-
-VaderJS is released under the MIT License. See the [LICENSE](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) file for more details.
-
-## Join the VaderJS Community
-
-Stay connected with the VaderJS community by following our [GitHub repository](https://github.com/Postr-Inc/Vader.js) and engaging in discussions, submitting issues, and contributing to the project's development. We welcome your feedback and contributions to make VaderJS even better for SPA development.