fixing auto imports

Author: levizwannah

build/vite-plugin-openscript.js

@@ -0,0 +1,184 @@
+# OpenScript Component Auto-Import System
+
+## How to Use (For Developers)
+
+### 1. Install OpenScript
+
+```bash
+npm install modular-openscriptjs
+```
+
+### 2. Configure Vite
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+import { openScriptComponentPlugin } from "modular-openscriptjs/plugin";
+
+export default defineConfig({
+  plugins: [
+    openScriptComponentPlugin({
+      componentsDir: "src/components", // default
+      autoRegister: true, // auto-register components
+      generateTypes: true, // generate .d.ts for IDE
+    }),
+  ],
+});
+```
+
+### 3. Create Components
+
+```javascript
+// src/components/TodoList.js
+import { Component, app, state } from "modular-openscriptjs";
+
+const h = app("h");
+
+export default class TodoList extends Component {
+  constructor() {
+    super();
+    this.todos = state([]);
+  }
+
+  render() {
+    return h.div(
+      h.h2("My Todos"),
+      h.ul(...this.todos.value.map((todo) => h.li(todo.text)))
+    );
+  }
+}
+```
+
+### 4. Use Components with Auto-Import
+
+```javascript
+// src/main.js
+import { app } from "modular-openscriptjs";
+import "virtual:openscript-components"; // Auto-imports all components
+
+const h = app("h");
+
+// IDE will autocomplete ComponentName!
+// Component is automatically imported and bundled by Vite!
+h.TodoList({ parent: document.body });
+```
+
+## Features
+
+✅ **IDE Autocomplete**: Type `h.` and see all your components
+✅ **Auto-Import**: No need to manually import components
+✅ **TypeScript Support**: Generated `.d.ts` files
+✅ **HMR Support**: Hot module replacement during development
+✅ **Automatic Bundling**: Vite includes all components in bundle
+✅ **Nested Components**: Supports subdirectories in components/
+
+## How It Works
+
+1. **Component Discovery**: Plugin scans `src/components/` for all Component files
+2. **Type Generation**: Creates `openscript-components.d.ts` with type definitions
+3. **Virtual Module**: Creates a virtual module that imports all components
+4. **Auto-Registration**: Optionally auto-registers all components on app start
+5. **IDE Support**: TypeScript definitions provide autocomplete and type checking
+
+## Advanced Usage
+
+### Manual Component Registration
+
+```javascript
+// vite.config.js
+openScriptComponentPlugin({
+  autoRegister: false, // Disable auto-registration
+});
+```
+
+```javascript
+// src/main.js
+import components, {
+  registerAllComponents,
+} from "virtual:openscript-components";
+
+// Manually register when needed
+await registerAllComponents();
+
+// Or register individually
+const todoList = new components.TodoList();
+await todoList.mount();
+```
+
+### Custom Components Directory
+
+```javascript
+openScriptComponentPlugin({
+  componentsDir: "src/ui/components",
+});
+```
+
+### Exclude Components from Auto-Discovery
+
+Name files with lowercase or prefix with underscore:
+
+- `utils.js` ❌ (lowercase, won't be discovered)
+- `_BaseComponent.js` ❌ (underscore prefix, won't be discovered)
+- `TodoList.js` ✅ (PascalCase, will be discovered)
+
+## TypeScript Example
+
+```typescript
+// src/main.ts
+import { app } from "modular-openscriptjs";
+import "virtual:openscript-components";
+
+const h = app("h");
+
+// Full type safety!
+h.TodoList({
+  parent: document.body,
+  resetParent: true,
+});
+```
+
+## Comparison with JSX
+
+**JSX/React:**
+
+```jsx
+import TodoList from "./components/TodoList";
+<TodoList />;
+```
+
+**OpenScript (with plugin):**
+
+```javascript
+import "virtual:openscript-components";
+h.TodoList();
+```
+
+Both provide:
+
+- ✅ IDE autocomplete
+- ✅ Type checking
+- ✅ Proper bundling
+- ✅ HMR support
+
+## Migration from Manual Imports
+
+**Before:**
+
+```javascript
+import TodoList from "./components/TodoList";
+import Header from "./components/Header";
+
+const todoList = new TodoList();
+await todoList.mount();
+h.TodoList({ parent: document.body });
+```
+
+**After:**
+
+```javascript
+import "virtual:openscript-components";
+
+// Components auto-registered and available on h!
+h.TodoList({ parent: document.body });
+h.Header({ parent: document.body });
+```

docs/COMPONENT_AUTO_IMPORT.md

@@ -0,0 +1,39 @@
+## Component Auto-Import Feature
+
+OpenScript provides automatic component discovery and import, similar to JSX, giving you IDE autocomplete and ensuring all components are properly bundled.
+
+### Setup
+
+```javascript
+// vite.config.js
+import { openScriptComponentPlugin } from "modular-openscriptjs/plugin";
+
+export default {
+  plugins: [openScriptComponentPlugin()],
+};
+```
+
+### Usage
+
+```javascript
+// src/main.js
+import { app } from "modular-openscriptjs";
+import "virtual:openscript-components"; // Auto-imports all components!
+
+const h = app("h");
+
+// IDE will autocomplete component names!
+// Components are automatically imported and bundled!
+h.TodoList({ parent: document.body });
+h.Header({ parent: document.body });
+```
+
+**Benefits:**
+
+- ✅ IDE autocomplete for `h.ComponentName`
+- ✅ Automatic component imports (no manual imports needed)
+- ✅ TypeScript support with generated `.d.ts` files
+- ✅ Proper Vite bundling
+- ✅ Hot Module Replacement (HMR)
+
+See [Component Auto-Import Guide](./docs/COMPONENT_AUTO_IMPORT.md) for details.

docs/COMPONENT_AUTO_IMPORT_README_SECTION.md

@@ -0,0 +1,24 @@
+// Example vite.config.js for OpenScript projects
+import { defineConfig } from "vite";
+import { openScriptComponentPlugin } from "modular-openscriptjs/plugin";
+
+export default defineConfig({
+  plugins: [
+    openScriptComponentPlugin({
+      // Directory where your components are located
+      componentsDir: "src/components",
+
+      // Auto-register all components on app start
+      // Set to false if you want manual control
+      autoRegister: true,
+
+      // Generate TypeScript definitions for IDE autocomplete
+      // Creates src/openscript-components.d.ts
+      generateTypes: true,
+    }),
+  ],
+
+  build: {
+    target: "es2015",
+  },
+});

examples/vite.config.example.js

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

package.json

@@ -4,8 +4,6 @@ import BrokerRegistrar from "../broker/BrokerRegistrar.js";
 import State from "../core/State.js";
 import { container } from "../core/Container.js";
 
-const h = container.resolve("h");
-
 /**
  * Base Component Class
  */
@@ -113,6 +111,7 @@ export default class Component {
       routeChanged: () => {
         setTimeout(() => {
           if (this.markup().length == 0) {
+            const h = container.resolve("h");
             if (this.isAnonymous) {
               return h.deleteComponent(this.name);
             }
@@ -146,6 +145,7 @@ export default class Component {
     if (!Array.isArray(args)) {
       args = [args];
     }
+    const h = container.resolve("h");
     return h.func([this, name], ...args);
   }
 
@@ -167,6 +167,7 @@ export default class Component {
       );
     }
 
+    const h = container.resolve("h");
     return h.getComponent(splitted[0]).method(splitted[1], args);
   }
 
@@ -255,6 +256,7 @@ export default class Component {
   getDeclaredListeners() {
     let obj = this;
     let seen = new Set();
+    const h = container.resolve("h");
 
     do {
       if (!(obj instanceof Component)) break;
@@ -343,7 +345,7 @@ export default class Component {
       );
       return;
     }
-
+    const h = container.resolve("h");
     h.component(this.name, this);
 
     this.claimListeners();
@@ -376,6 +378,7 @@ export default class Component {
    * visible
    */
   checkVisibility() {
+    const h = container.resolve("h");
     let elem = h.dom.querySelector(`ojs-${this.kebab(this.name)}`);
 
     if (elem && elem.parentElement?.style.display !== "none" && !this.visible) {
@@ -422,7 +425,7 @@ export default class Component {
    */
   async bindComponent() {
     this.emit(this.EVENTS.prebind);
-
+    const h = container.resolve("h");
     let all = h.dom.querySelectorAll(`ojs-${this.kebab(this.name)}-tmp--`);
 
     if (all.length == 0 && !this.bindCalled) {
@@ -469,6 +472,7 @@ export default class Component {
    * @returns
    */
   markup(parent = null) {
+    const h = container.resolve("h");
     if (!parent) parent = h.dom;
 
     return parent.querySelectorAll(`ojs-${this.kebab(this.name)}`);
@@ -550,6 +554,7 @@ export default class Component {
    * Gets all the listeners for itself and adds them to itself
    */
   claimListeners() {
+    const h = container.resolve("h");
     if (!h.eventsMap.has(this.name)) return;
 
     let events = h.eventsMap.get(this.name);
@@ -596,6 +601,7 @@ export default class Component {
    * @returns {DocumentFragment|HTMLElement|String|Array<DocumentFragment|HTMLElement|String>}
    */
   render(...args) {
+    const h = container.resolve("h");
     return h.ojs(...args);
   }
 
@@ -671,6 +677,7 @@ export default class Component {
    * @returns
    */
   wrap(...args) {
+    const h = container.resolve("h");
     const lastArg = args[args.length - 1];
     let { index, parent, resetParent, states, replaceParent, firstOfParent } =
       this.getParentAndListen(args);

src/component/Component.js

@@ -1,8 +1,8 @@
 import DOMReconciler from "./DOMReconciler.js";
 import Utils from "../utils/Utils.js";
-import { h } from "./h.js"; // Circular dependency? h is used in MarkupEngine
 import Component from "./Component.js";
 import State from "../core/State.js";
+import { container } from "../core/Container.js";
 
 /**
  * Base Markup Engine Class
@@ -494,6 +494,7 @@ export default class MarkupEngine {
 				sc.forEach((c) => {
 					if (!isComponentName(c.tagName.toLowerCase())) return;
 					let cmpName = getComponentName(c.tagName);
+					const h = container.resolve("h");
 					h.getComponent(cmpName)?.emit(event, eventParams);
 				});
 			}