working on openscript docs

Author: levizwannah

README.md

@@ -1,6 +1,6 @@
 # OpenScriptJs
 
-[![npm version](https://badge.fury.io/js/openscriptjs.svg)](https://www.npmjs.com/package/openscriptjs)
+[![npm version](https://badge.fury.io/js/modular-openscriptjs.svg)](https://www.npmjs.com/package/modular-openscriptjs)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A lightweight, reactive JavaScript framework for building modern web applications with components, state management, routing, and event-driven architecture.
@@ -20,52 +20,45 @@ A lightweight, reactive JavaScript framework for building modern web application
 
 ### Installation
 
-```bash
-npm install openscriptjs
-```
-
-### Create a New Project
-
-```bash
-npm create openscript my-app
-cd my-app
-npm run dev
-```
-
-Choose from templates:
+````bash
 - `basic` - Clean starter with vanilla CSS
 - `tailwind` - Pre-configured with TailwindCSS
 
 ## 📖 Basic Usage
 
 ```javascript
-import { Component, h, state } from 'openscriptjs';
+import { Component, app, state } from "modular-openscriptjs";
+
+const h = app("h");
 
 class Counter extends Component {
-    constructor() {
-        super();
-        this.count = state(0);
-    }
-
-    increment() {
-        this.count.value++;
-    }
-
-    render() {
-        return h.div(
-            h.h2("Count: ", this.count.value),
-            h.button({
-                listeners: { click: this.increment.bind(this) }
-            }, "Increment")
-        );
-    }
+  constructor() {
+    super();
+    this.count = state(0);
+  }
+
+  increment() {
+    this.count.value++;
+  }
+
+  render() {
+    return h.div(
+      h.h2("Count: ", this.count.value),
+      h.button(
+        {
+          listeners: { click: this.increment.bind(this) },
+        },
+        "Increment"
+      )
+    );
+  }
 }
 
 // Mount and render
 const counter = new Counter();
 await counter.mount();
 h.Counter({ parent: document.body });
-```
+````
 
 ## 🏗️ Project Structure
 
@@ -85,23 +78,21 @@ my-app/
 ### Components
 
 ```javascript
-import { Component, h } from 'openscriptjs';
+import { Component, app } from "modular-openscriptjs";
+
+const h = app("h");
 
 class MyComponent extends Component {
-    render(...args) {
-        return h.div(
-            { class: "container" },
-            h.h1("Hello OpenScript!"),
-            ...args
-        );
-    }
+  render(...args) {
+    return h.div({ class: "container" }, h.h1("Hello OpenScript!"), ...args);
+  }
 }
 ```
 
 ### State Management
 
 ```javascript
-import { state } from 'openscriptjs';
+import { state } from "modular-openscriptjs";
 
 // Create reactive state
 const count = state(0);
@@ -110,20 +101,23 @@ const count = state(0);
 count.value = 10;
 
 // Listen to changes
-count.listener((s) => console.log('New value:', s.value));
+count.listener((s) => console.log("New value:", s.value));
 ```
 
 ### Routing
 
 ```javascript
-import { router, h } from 'openscriptjs';
+import { app } from "modular-openscriptjs";
+
+const router = app("router");
+const h = app("h");
 
-router.on('/home', () => {
-    h.HomePage({ parent: document.body, resetParent: true });
+router.on("/home", () => {
+  h.HomePage({ parent: document.body, resetParent: true });
 });
 
-router.on('/about', () => {
-    h.AboutPage({ parent: document.body, resetParent: true });
+router.on("/about", () => {
+  h.AboutPage({ parent: document.body, resetParent: true });
 });
 
 router.listen();
@@ -132,7 +126,9 @@ router.listen();
 ### Context & Global State
 
 ```javascript
-import { context, putContext } from 'openscriptjs';
+import { context, putContext, app } from "modular-openscriptjs";
+
+const h = app("h");
 
 // Register contexts
 putContext(["global", "user"], "AppContext");
@@ -141,8 +137,8 @@ const gc = context("global");
 
 // Initialize states
 gc.states({
-    appName: "My App",
-    theme: "light"
+  appName: "My App",
+  theme: "light",
 });
 
 // Pass to components
@@ -154,18 +150,22 @@ h.MyComponent(gc.appName, { parent: document.body });
 OpenScript works seamlessly with Tailwind:
 
 ```javascript
+import { app } from "modular-openscriptjs";
+
+const h = app("h");
+
 h.div(
-    { class: "bg-blue-500 text-white p-4 rounded-lg" },
-    h.h1({ class: "text-2xl font-bold" }, "Styled with Tailwind")
-)
+  { class: "bg-blue-500 text-white p-4 rounded-lg" },
+  h.h1({ class: "text-2xl font-bold" }, "Styled with Tailwind")
+);
 ```
 
 See [Tailwind Integration Guide](./docs/TAILWIND_INTEGRATION.md) for details.
 
 ## 🔧 Building Your App
 
 ```bash
-# Development  
+# Development
 npm run dev
 
 # Production build
@@ -181,13 +181,11 @@ For proper minification handling:
 
 ```javascript
 // vite.config.js
-import { openScriptComponentPlugin } from 'openscriptjs/plugin';
+import { openScriptComponentPlugin } from "modular-openscriptjs/plugin";
 
 export default {
-    plugins: [
-        openScriptComponentPlugin()
-    ]
-}
+  plugins: [openScriptComponentPlugin()],
+};
 ```
 
 This ensures component names survive minification.
@@ -209,9 +207,9 @@ MIT © Levi Kamara Zwannah
 
 ## 🔗 Links
 
-- [GitHub Repository](https://github.com/yourusername/openscriptjs)
-- [Issue Tracker](https://github.com/yourusername/openscriptjs/issues)
-- [npm Package](https://www.npmjs.com/package/openscriptjs)
+- [GitHub Repository](https://github.com/yourusername/modular-openscriptjs)
+- [Issue Tracker](https://github.com/yourusername/modular-openscriptjs/issues)
+- [npm Package](https://www.npmjs.com/package/modular-openscriptjs)
 
 ---
 

README.npm.md

@@ -85,7 +85,7 @@ async function createProject(projectName, template = "basic") {
       preview: "vite preview",
     },
     dependencies: {
-      openscriptjs: "^1.0.0",
+      "modular-openscriptjs": "^1.0.0",
     },
     devDependencies: {
       vite: "^5.0.7",

bin/create-ojs-app

@@ -1,4 +1,6 @@
-import { Component, h, state, putContext, context, app } from "../index.js";
+import { Component, app, state, putContext, context } from "../index.js";
+
+const h = app("h");
 
 // 1. Fragments Example
 class FragmentComponent extends Component {

examples/advanced-features.js

@@ -3,64 +3,66 @@
  * Centralized event catalog following OpenScript best practices
  */
 
-import { broker } from "../../index.js";
+import { app } from "../../index.js";
+
+const broker = app("broker");
 
 /**
  * Application Events
  * Structure: Nested object where keys become namespaced event names
  * Example: app.started becomes "app:started"
  */
 export const $e = {
-    app: {
-        started: true,
-        ready: true,
-    },
+  app: {
+    started: true,
+    ready: true,
+  },
 
-    todo: {
-        added: true,
-        updated: true,
-        deleted: true,
-        completed: true,
-        uncompleted: true,
+  todo: {
+    added: true,
+    updated: true,
+    deleted: true,
+    completed: true,
+    uncompleted: true,
 
-        needs: {
-            add: true,
-            update: true,
-            delete: true,
-            toggle: true,
-            filter: true,
-        },
+    needs: {
+      add: true,
+      update: true,
+      delete: true,
+      toggle: true,
+      filter: true,
+    },
 
-        has: {
-            addError: true,
-            updateError: true,
-            deleteError: true,
-            list: true,
-        }
+    has: {
+      addError: true,
+      updateError: true,
+      deleteError: true,
+      list: true,
     },
+  },
 
-    filter: {
-        changed: true,
-        cleared: true,
+  filter: {
+    changed: true,
+    cleared: true,
 
-        needs: {
-            apply: true,
-            clear: true,
-        }
+    needs: {
+      apply: true,
+      clear: true,
     },
+  },
 
-    ui: {
-        needs: {
-            modal: true,
-            confirm: true,
-            toast: true,
-        },
+  ui: {
+    needs: {
+      modal: true,
+      confirm: true,
+      toast: true,
+    },
 
-        modal: {
-            opened: true,
-            closed: true,
-        }
-    }
+    modal: {
+      opened: true,
+      closed: true,
+    },
+  },
 };
 
 // Register all events with the broker

examples/basic-app/events.js

@@ -16,7 +16,10 @@ import { loadTodosFromLocalStorage } from "./helpers.js";
 import "./routes.js";
 
 // Import OpenScript utilities
-import { broker, router } from "../../index.js";
+import { app } from "../../index.js";
+
+const broker = app("broker");
+const router = app("router");
 
 // ============================================
 // APPLICATION INITIALIZATION
@@ -27,10 +30,10 @@ console.log("🚀 Initializing Todo App...");
 // Load saved todos from localStorage
 const savedTodos = loadTodosFromLocalStorage();
 if (savedTodos.length > 0) {
-    tc.todos.value = savedTodos;
-    // Update nextId based on loaded todos
-    const maxId = Math.max(...savedTodos.map(t => t.id || 0));
-    tc.nextId = maxId + 1;
+  tc.todos.value = savedTodos;
+  // Update nextId based on loaded todos
+  const maxId = Math.max(...savedTodos.map((t) => t.id || 0));
+  tc.nextId = maxId + 1;
 }
 
 // Emit app started event