initiated modular openscript

Author: levizwannah

examples/advanced-features.js

@@ -1,77 +1,76 @@
-import { Component, h, state, putContext, context } from "../index.js";
+import { Component, h, state, putContext, context, app } from "../index.js";
 
 // 1. Fragments Example
 class FragmentComponent extends Component {
-    render(...args) {
-        // h.$ or h._ creates a document fragment
-        // This allows returning multiple elements without a parent wrapper
-        return h.$(
-            h.h3("Fragment Header"),
-            h.p("This content is inside a fragment."),
-            h.p("No extra div wrapper is added to the DOM.")
-        );
-    }
+  render(...args) {
+    // h.$ or h._ creates a document fragment
+    // This allows returning multiple elements without a parent wrapper
+    return h.$(
+      h.h3("Fragment Header"),
+      h.p("This content is inside a fragment."),
+      h.p("No extra div wrapper is added to the DOM.")
+    );
+  }
 }
 
 // 2. State Management Example
 const counter = state(0);
 
 class CounterComponent extends Component {
-    render(...args) {
-        // Pass the state to the component to auto-subscribe
-        // The component will re-render when 'counter' changes
-        return h.div(
-            h.h3(`Count: ${counter.value}`),
-            h.button(
-                { onclick: () => counter.value++ },
-                "Increment"
-            ),
-            ...args
-        );
-    }
+  render(...args) {
+    // Pass the state to the component to auto-subscribe
+    // The component will re-render when 'counter' changes
+    return h.div(
+      h.h3(`Count: ${counter.value}`),
+      h.button({ onclick: () => counter.value++ }, "Increment"),
+      ...args
+    );
+  }
 }
 
 // 3. Context Example
 // Define a context (normally this would be in a separate file)
 class ThemeContext {
-    constructor() {
-        this.theme = state("light");
-    }
+  constructor() {
+    this.theme = state("light");
+  }
 
-    toggle() {
-        this.theme.value = this.theme.value === "light" ? "dark" : "light";
-    }
+  toggle() {
+    this.theme.value = this.theme.value === "light" ? "dark" : "light";
+  }
 }
 
 // Register the context
 // putContext(referenceName, qualifiedName)
 // Since we are not loading from a file here, we just register it manually for this example
 // In a real app, you might use: putContext("Theme", "contexts.ThemeContext")
 const themeCtx = new ThemeContext();
-context("Theme", themeCtx); // Manually putting it in the provider for this example
+// Manually putting it in the provider for this example using the IoC container
+app("contextProvider").map.set("Theme", themeCtx);
 
 class ThemedComponent extends Component {
-    constructor() {
-        super();
-        // Access the context
-        this.themeContext = context("Theme");
-    }
+  constructor() {
+    super();
+    // Access the context
+    this.themeContext = context("Theme");
+  }
 
-    render(...args) {
-        const currentTheme = this.themeContext.theme.value;
-        
-        return h.div(
-            {
-                style: `background-color: ${currentTheme === 'light' ? '#fff' : '#333'}; color: ${currentTheme === 'light' ? '#000' : '#fff'}; padding: 20px;`
-            },
-            h.h3(`Current Theme: ${currentTheme}`),
-            h.button(
-                { onclick: () => this.themeContext.toggle() },
-                "Toggle Theme"
-            ),
-            ...args
-        );
-    }
+  render(...args) {
+    const currentTheme = this.themeContext.theme.value;
+
+    return h.div(
+      {
+        style: `background-color: ${
+          currentTheme === "light" ? "#fff" : "#333"
+        }; color: ${
+          currentTheme === "light" ? "#000" : "#fff"
+        }; padding: 20px;`,
+      },
+      h.h3(`Current Theme: ${currentTheme}`),
+      h.button({ onclick: () => this.themeContext.toggle() }, "Toggle Theme"),
+      ...args
+    );
+  }
 }
 
 export { FragmentComponent, CounterComponent, ThemedComponent };

examples/basic-usage.js

@@ -1,23 +1,28 @@
-import { Runner, Component, h, State } from "../index.js";
+import { app, State, Component, ojs } from "openscriptjs";
 
 // Define a State
 const counter = State.state(0);
+const h = app("h");
 
 // Define a Component
 class CounterComponent extends Component {
-    render(...args) {
-        return h.div(
-            h.h1(`Counter: ${counter.value}`),
-            h.button(
-                {
-                    onclick: () => counter.value++,
-                },
-                "Increment"
-            ),
-            ...args
-        );
-    }
+  render(counter, ...args) {
+    return h.div(
+      h.h1(`Counter: ${counter.value}`),
+      h.button(
+        {
+          onclick: this.method("increment"),
+        },
+        "Increment"
+      ),
+      ...args
+    );
+  }
+
+  increment() {
+    counter.value++;
+  }
 }
 
 // Mount the Component
-new Runner().run(CounterComponent);
+ojs(CounterComponent);

examples/component-example.js

@@ -1,26 +1,26 @@
-import { Component, h, broker } from "../index.js";
+import { Component, h, app } from "../index.js";
 
 class SenderComponent extends Component {
-    render(...args) {
-        return h.button(
-            {
-                onclick: () => {
-                    broker.emit("message", "Hello from Sender!");
-                },
-            },
-            "Send Message",
-            ...args
-        );
-    }
+  render(...args) {
+    return h.button(
+      {
+        onclick: () => {
+          app("broker").emit("message", "Hello from Sender!");
+        },
+      },
+      "Send Message",
+      ...args
+    );
+  }
 }
 
 class ReceiverComponent extends Component {
-    constructor() {
-        super();
-        this.message = "Waiting...";
-    }
+  constructor() {
+    super();
+    this.message = "Waiting...";
+  }
 
-    render(...args) {
-        return h.div(`Received: ${this.message}`, ...args);
-    }
+  render(...args) {
+    return h.div(`Received: ${this.message}`, ...args);
+  }
 }

examples/context-state-example.js

@@ -3,7 +3,7 @@
  * Demonstrates best practice: defining states in contexts and passing to components
  */
 
-import { Component, h, context, putContext, state, dom } from "../index.js";
+import { Component, h, context, putContext, state, dom } from "openscriptjs";
 
 // ============================================
 // 1. INITIALIZE CONTEXTS AND STATES