refactor: replace StoreConnector with direct state management implementation

Author: ralyodio

public/js/components/simple-counter.js

@@ -1,46 +1,46 @@
 /**
  * Simple Counter Component
- * 
- * This demonstrates the simplified state management approach using the simple-state.js library.
- * It provides a much cleaner API compared to the current implementation.
+ *
+ * This demonstrates a simplified state management approach without using the StoreConnector.
  */
-import { createStore, StoreConnector } from '../../js/deps.js';
+import { createStore } from '../../js/deps.js';
 
 // Create a store for our counter component
 const counterStore = createStore('counter', {
   count: 0,
   theme: 'light'
 });
 
-// Define the base component class
-class SimpleCounterBase extends HTMLElement {
+// Define the component class
+class SimpleCounter extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._storeUnsubscribe = null;
   }
 
   connectedCallback() {
+    // Subscribe to store changes
+    this._storeUnsubscribe = counterStore.subscribe((state, property) => {
+      this.render();
+      
+      // Update document theme if theme property changed
+      if (property === 'theme') {
+        document.documentElement.setAttribute('data-theme', state.theme);
+      }
+    });
+    
+    // Initial render
     this.render();
     this.setupEventListeners();
-    
-    // Connect specific elements to state properties
-    this.bindElement(
-      this.shadowRoot.querySelector('.counter-value'),
-      'count',
-      (value) => `Counter: ${value}`
-    );
-    
-    // Connect the theme toggle button text
-    this.bindElement(
-      this.shadowRoot.querySelector('#theme-toggle'),
-      'theme',
-      (theme) => `Toggle Theme (Current: ${theme})`
-    );
-    
-    // Update the component's theme when the theme changes
-    this.connect('theme', (state) => {
-      this.shadowRoot.host.setAttribute('data-theme', state.theme);
-    });
+  }
+  
+  disconnectedCallback() {
+    // Unsubscribe from store changes
+    if (this._storeUnsubscribe) {
+      this._storeUnsubscribe();
+      this._storeUnsubscribe = null;
+    }
   }
 
   render() {
@@ -118,12 +118,15 @@ class SimpleCounterBase extends HTMLElement {
         </div>
       </div>
     `;
+    
+    // Update host attribute for theme
+    this.setAttribute('data-theme', theme);
   }
 
   setupEventListeners() {
     // Increment button
     this.shadowRoot.getElementById('increment').addEventListener('click', () => {
-      // Direct state manipulation - much cleaner!
+      // Direct state manipulation
       counterStore.state.count++;
     });
 
@@ -143,16 +146,10 @@ class SimpleCounterBase extends HTMLElement {
     this.shadowRoot.getElementById('theme-toggle').addEventListener('click', () => {
       // Toggle theme with a simple assignment
       counterStore.state.theme = counterStore.state.theme === 'light' ? 'dark' : 'light';
-      
-      // Update document theme
-      document.documentElement.setAttribute('data-theme', counterStore.state.theme);
     });
   }
 }
 
-// Create the connected component using the StoreConnector mixin
-const SimpleCounter = StoreConnector(counterStore)(SimpleCounterBase);
-
 // Register the custom element
 customElements.define('simple-counter', SimpleCounter);
 

public/js/components/state-example.js

@@ -1,19 +1,39 @@
 /**
- * Example component demonstrating state manager integration
+ * Example component demonstrating state management
  */
 console.log('Loading state-example.js');
-import { createStateManager, createConnectedComponent } from '../modules/state-manager/dist/index.js';
-console.log('Imported createStateManager from state-manager module');
 
-// Create a state manager with initial state
-const stateManager = createStateManager({
+// Create a simple state object with a Proxy for reactivity
+const createSimpleState = (initialState = {}) => {
+  const listeners = new Set();
+  
+  const state = new Proxy(initialState, {
+    set(target, property, value) {
+      const oldValue = target[property];
+      target[property] = value;
+      
+      if (oldValue !== value) {
+        listeners.forEach(listener => listener(value, property, target));
+      }
+      
+      return true;
+    }
+  });
+  
+  return {
+    state,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+};
+
+// Create a state store with initial state
+const stateStore = createSimpleState({
   counter: 0,
   theme: document.documentElement.getAttribute('data-theme') || 'light',
   user: { loggedIn: false }
-}, {
-  enablePersistence: true,
-  persistenceKey: 'state_example',
-  debug: true
 });
 
 // Define the component class
@@ -22,33 +42,50 @@ class StateExampleElement extends HTMLElement {
     super();
     console.log('StateExampleElement constructor called');
     this.attachShadow({ mode: 'open' });
+    this._unsubscribe = null;
   }
 
   connectedCallback() {
     console.log('StateExampleElement connected to DOM');
-    this.render();
-  }
-
-  /**
-   * This method will be called when state changes
-   * @param {object} state - The current state
-   * @param {string} path - The path that changed
-   * @param {object} fullState - The full state object
-   */
-  stateChanged(state, path, fullState) {
-    console.log('State changed in component:', path);
-    console.log('New state:', fullState);
-    console.log('State value:', state);
 
-    // Re-render the component
-    this.render();
+    // Subscribe to state changes
+    this._unsubscribe = stateStore.subscribe((value, property, fullState) => {
+      console.log('State changed in component:', property);
+      console.log('New state:', fullState);
+      console.log('State value:', value);
+      
+      // Re-render the component
+      this.render();
+      
+      // If the theme changed, update the document theme
+      if (property === 'theme') {
+        document.documentElement.setAttribute('data-theme', value);
+      }
+    });
 
-    // If the theme changed, update the document theme
-    if (path === 'theme') {
-      document.documentElement.setAttribute('data-theme', state);
+    this.render();
+  }
+  
+  disconnectedCallback() {
+    // Clean up subscription when element is removed
+    if (this._unsubscribe) {
+      this._unsubscribe();
+      this._unsubscribe = null;
     }
   }
 
+  // Helper method to get state
+  getState(property) {
+    return stateStore.state[property];
+  }
+  
+  // Helper method to set state
+  setState(updates) {
+    Object.entries(updates).forEach(([key, value]) => {
+      stateStore.state[key] = value;
+    });
+  }
+
   render() {
     // Get current values from state
     const counter = this.getState('counter') || 0;
@@ -212,9 +249,7 @@ class StateExampleElement extends HTMLElement {
   }
 }
 
-// Register the component with the state manager
-createConnectedComponent('state-example', StateExampleElement, {
-  statePaths: ['counter', 'theme', 'user']
-}, stateManager);
+// Register the custom element
+customElements.define('state-example', StateExampleElement);
 
 export default StateExampleElement;