Replace auto-discovery with manual component registration v0.2.0 (#3)

BREAKING CHANGES:
- Remove ArizonaSvelteDiscovery class and auto-discovery functionality
- Remove componentsDir and pattern constructor options
- Remove init() and getDiscovery() methods

NEW FEATURES:
- Add registerComponents() method for batch component registration
- Add components option to constructor for immediate registration
- Simplified API focused on manual component management

IMPROVEMENTS:
- Update README with new registration patterns and index.js approach
- Add comprehensive JSDoc documentation with examples
- Add tests for new batch registration functionality
- Remove dependency on import.meta.glob static path limitations

This version provides more control and reliability for component registration
while removing the brittle auto-discovery system that couldn't work across
different project structures.

Users should now register components explicitly:
new ArizonaSvelte({ components: { Counter, HelloWorld } })

Author: williamthome

README.md

@@ -94,14 +94,28 @@ my_page(_Bindings) ->
     """).
 ```
 
-### 2. JavaScript Side - Initialize Svelte Integration
+### 2. JavaScript Side - Register Components and Initialize
 
 ```javascript
 // assets/js/main.js
 import ArizonaSvelte from '@arizona-framework/svelte';
+import Counter from '../svelte/components/Counter.svelte';
+import HelloWorld from '../svelte/components/HelloWorld.svelte';
+
+// Option 1: Register components in constructor (recommended)
+const arizonaSvelte = new ArizonaSvelte({
+  components: {
+    Counter,
+    HelloWorld
+  }
+});
 
-// Initialize Arizona Svelte
-const arizonaSvelte = new ArizonaSvelte();
+// Option 2: Register components manually
+// const arizonaSvelte = new ArizonaSvelte();
+// arizonaSvelte.registerComponents({
+//   Counter,
+//   HelloWorld
+// });
 
 // Start automatic component lifecycle monitoring
 arizonaSvelte.startMonitoring({
@@ -115,6 +129,28 @@ arizonaSvelte.startMonitoring({
 globalThis.arizonaSvelte = arizonaSvelte;
 ```
 
+### Alternative: Using an Index File
+
+Create a centralized component index:
+
+```javascript
+// svelte/components/index.js
+export { default as Counter } from './Counter.svelte';
+export { default as HelloWorld } from './HelloWorld.svelte';
+export { default as Dashboard } from './Dashboard.svelte';
+```
+
+Then import all at once:
+
+```javascript
+// assets/js/main.js
+import ArizonaSvelte from '@arizona-framework/svelte';
+import * as components from '../svelte/components/index.js';
+
+const arizonaSvelte = new ArizonaSvelte({ components });
+arizonaSvelte.startMonitoring();
+```
+
 ### 3. Create Your Svelte Components
 
 ```svelte
@@ -136,9 +172,9 @@ globalThis.arizonaSvelte = arizonaSvelte;
 
 - **🔄 Automatic Lifecycle Management**: Components mount/unmount automatically
 when DOM changes
-- **🏗️ Component Discovery**: Auto-discovers and registers Svelte components
+- **🏗️ Flexible Component Registration**: Register components via constructor or batch methods
 - **📡 Real-time Integration**: Works seamlessly with Arizona's WebSocket updates
-- **🎯 Minimal Configuration**: Just install and start monitoring
+- **🎯 Simple Setup**: Register components and start monitoring in a few lines
 - **🧪 Development Friendly**: Built-in logging and debugging support
 - **⚡ High Performance**: Zero-debounce monitoring for immediate responsiveness
 
@@ -181,6 +217,30 @@ arizona_svelte:render_component(Component, Props) -> Template.
 
 Creates a new Arizona Svelte instance.
 
+**Options:**
+
+- `components: Object` - Components to register on instantiation
+
+```javascript
+const arizonaSvelte = new ArizonaSvelte({
+  components: {
+    Counter: CounterComponent,
+    HelloWorld: HelloWorldComponent
+  }
+});
+```
+
+#### `arizonaSvelte.registerComponents(components)`
+
+Register multiple components at once.
+
+```javascript
+arizonaSvelte.registerComponents({
+  Dashboard: DashboardComponent,
+  Modal: ModalComponent
+});
+```
+
 #### `arizonaSvelte.startMonitoring(options?)`
 
 Starts automatic component lifecycle monitoring.
@@ -198,6 +258,9 @@ Starts automatic component lifecycle monitoring.
 - `arizonaSvelte.isMonitoring()` - Check if monitoring is active
 - `arizonaSvelte.getRegistry()` - Get component registry
 - `arizonaSvelte.getLifecycle()` - Get lifecycle manager
+- `arizonaSvelte.getComponent(name)` - Get a specific component
+- `arizonaSvelte.hasComponent(name)` - Check if component is registered
+- `arizonaSvelte.getComponentNames()` - Get all registered component names
 
 ## Requirements
 

assets/js/arizona-svelte-discovery.js

@@ -71,6 +71,31 @@ class ArizonaSvelteRegistry {
     return this.components.delete(name);
   }
 
+  /**
+   * Register multiple components at once
+   * @param {Object.<string, Function>} components - Object mapping component names to component classes
+   * @returns {number} Number of components registered
+   * @example
+   * registry.registerComponents({
+   *   Counter: CounterComponent,
+   *   HelloWorld: HelloWorldComponent,
+   *   Dashboard: DashboardComponent
+   * });
+   */
+  registerComponents(components) {
+    if (!components || typeof components !== 'object') {
+      throw new Error('Components must be an object mapping names to component classes');
+    }
+
+    let registeredCount = 0;
+    for (const [name, component] of Object.entries(components)) {
+      this.registerComponent(name, component);
+      registeredCount++;
+    }
+
+    return registeredCount;
+  }
+
   /**
    * Clear all registered components
    */

assets/js/arizona-svelte-discovery.test.js

@@ -41,4 +41,20 @@ describe('ArizonaSvelteRegistry', () => {
 
     expect(registry.getComponentNames()).toEqual([]);
   });
+
+  it('should register multiple components at once', () => {
+    const components = {
+      Counter: class Counter {},
+      HelloWorld: class HelloWorld {},
+      Dashboard: class Dashboard {},
+    };
+
+    const count = registry.registerComponents(components);
+
+    expect(count).toBe(3);
+    expect(registry.hasComponent('Counter')).toBe(true);
+    expect(registry.hasComponent('HelloWorld')).toBe(true);
+    expect(registry.hasComponent('Dashboard')).toBe(true);
+    expect(registry.getComponentNames()).toEqual(['Counter', 'HelloWorld', 'Dashboard']);
+  });
 });