Merge pull request #4 from OpenScriptJs/develop

finished the documentation and added local state initialization

Author: levizwannah

README.md

@@ -3,7 +3,7 @@
 <p align="center">
   <a href="https://github.com/OpenScriptJs/modular-openscript" target="_blank">
     <!-- You can add a logo here if available -->
-    <img src="https://via.placeholder.com/200x50?text=OpenScriptJs" alt="OpenScriptJs Logo" width="200">
+    <img src="assets/images/OpenScript.Js.png" alt="OpenScriptJs Logo" width="200">
   </a>
 </p>
 
@@ -885,7 +885,7 @@ count.listener((s) => {
 
 ### Global vs Local State
 
-- **Local State**: Defined inside a component's constructor (`this.count = state(0)`). Used for component-specific logic (toggles, form inputs).
+- **Local State**: Defined inside a component's constructor (`this.count = state(0); this.count.listener(this)`). Used for component-specific logic (toggles, form inputs).
 - **Global State**: Defined in a shared file (e.g., `contexts.js` or `store.js`) and imported by multiple components. Used for app-wide data (user profile, theme, cart).
 
 ---

assets/images/OpenScript.Js.png

@@ -1,6 +1,6 @@
 {
   "name": "modular-openscriptjs",
-  "version": "2.0.16",
+  "version": "2.1.0",
   "description": "OpenScriptJs Framework - A lightweight, reactive JavaScript framework for building modern web applications",
   "type": "module",
   "main": "./dist/modular-openscriptjs.umd.js",

package.json

@@ -320,7 +320,6 @@ export default class Component {
     let final = {
       index: -1,
       parent: null,
-      states: [],
       resetParent: false,
       replaceParent: false,
       firstOfParent: false,
@@ -335,7 +334,6 @@ export default class Component {
       ) {
         args[i].listener(`component-${this.id}`);
         this.states[args[i].$__id__] = args[i];
-        final.states.push(args[i].$__id__);
       } else if (
         !(
           args[i] instanceof DocumentFragment || args[i] instanceof HTMLElement
@@ -394,7 +392,6 @@ export default class Component {
       index,
       parent,
       resetParent,
-      states,
       replaceParent,
       firstOfParent,
       reconcileParent,
@@ -456,7 +453,7 @@ export default class Component {
 
     let uuid = this.id;
 
-    if (states?.length) {
+    if (this.states?.length) {
       container.resolve("repository").addComponentArgs(this.id, args ?? []);
     }
 
@@ -478,7 +475,7 @@ export default class Component {
       }
     }
 
-    states.forEach((id) => {
+    Object.keys(this.states).forEach((id) => {
       attr[`s-${id}`] = id;
     });
 

src/component/Component.js

@@ -65,6 +65,10 @@ export default class State {
       }
 
       this.$__listeners__.set(`component-${listener.id}`, listener);
+
+      // Add the state to the component's states
+      listener.states[this.$__id__] = this;
+
       return `component-${listener.id}`;
     } else {
       let id = this.$__CALLBACK_ID__++;