@uistate/core 5.0.2 → 5.1.0

package/eventStateNew.js

@@ -0,0 +1,149 @@
+/**
+ * EventState v2 - Optimized Path-Based State Management
+ *
+ * A lightweight, performant state management library using path-based subscriptions.
+ * Optimized for selective notifications and granular updates.
+ *
+ * Features:
+ * - Path-based get/set operations (e.g., 'user.profile.name')
+ * - Selective subscriptions (only relevant subscribers fire)
+ * - Wildcard subscriptions (e.g., 'user.*' catches all user changes)
+ * - Global subscriptions (e.g., '*' catches all changes)
+ * - Zero dependencies
+ * - ~2KB minified
+ *
+ * Performance characteristics:
+ * - 2-9x faster than Zustand for selective subscriptions
+ * - Competitive overall performance
+ * - Minimal rendering overhead (1.27x faster paint times)
+ *
+ * @example
+ * const store = createEventState({ count: 0, user: { name: 'Alice' } });
+ *
+ * // Subscribe to specific path (receives value directly)
+ * const unsub = store.subscribe('count', (value) => {
+ *   console.log('Count changed:', value);
+ * });
+ *
+ * // Update state
+ * store.set('count', 1);
+ *
+ * // Get state
+ * const count = store.get('count');
+ *
+ * // Wildcard subscription
+ * store.subscribe('user.*', ({ path, value }) => {
+ *   console.log(`User field ${path} changed to:`, value);
+ * });
+ *
+ * // Global subscription
+ * store.subscribe('*', ({ path, value }) => {
+ *   console.log(`State changed at ${path}:`, value);
+ * });
+ *
+ * // Cleanup
+ * unsub();
+ * store.destroy();
+ */
+
+export function createEventState(initial = {}) {
+  const state = JSON.parse(JSON.stringify(initial));
+  const listeners = new Map();
+  let destroyed = false;
+
+  return {
+    /**
+     * Get value at path
+     * @param {string} path - Dot-separated path (e.g., 'user.profile.name')
+     * @returns {*} Value at path, or entire state if no path provided
+     */
+    get(path) {
+      if (destroyed) throw new Error('Cannot get from destroyed store');
+      if (!path) return state;
+      return path.split(".").reduce((obj, key) => obj?.[key], state);
+    },
+
+    /**
+     * Set value at path and notify subscribers
+     * @param {string} path - Dot-separated path (e.g., 'user.profile.name')
+     * @param {*} value - New value
+     * @returns {*} The value that was set
+     */
+    set(path, value) {
+      if (destroyed) throw new Error('Cannot set on destroyed store');
+      if (!path) return value;
+
+      const parts = path.split(".");
+      const key = parts.pop();
+      let cur = state;
+
+      // Navigate to parent object, creating nested objects as needed
+      for (const p of parts) {
+        if (!cur[p]) cur[p] = {};
+        cur = cur[p];
+      }
+
+      const oldValue = cur[key];
+      cur[key] = value;
+
+      if (!destroyed) {
+        const detail = { path, value, oldValue };
+
+        // Notify exact path subscribers (pass value directly for backwards compatibility)
+        const exactListeners = listeners.get(path);
+        if (exactListeners) {
+          exactListeners.forEach(cb => cb(value));
+        }
+
+        // Notify wildcard subscribers for all parent paths (pass detail object)
+        for (let i = 0; i < parts.length; i++) {
+          const parentPath = parts.slice(0, i + 1).join('.');
+          const wildcardListeners = listeners.get(`${parentPath}.*`);
+          if (wildcardListeners) {
+            wildcardListeners.forEach(cb => cb(detail));
+          }
+        }
+
+        // Notify global subscribers (pass detail object)
+        const globalListeners = listeners.get('*');
+        if (globalListeners) {
+          globalListeners.forEach(cb => cb(detail));
+        }
+      }
+
+      return value;
+    },
+
+    /**
+     * Subscribe to changes at path
+     * @param {string} path - Path to subscribe to (supports wildcards: 'user.*', '*')
+     * @param {Function} handler - Callback function receiving { path, value, oldValue }
+     * @returns {Function} Unsubscribe function
+     */
+    subscribe(path, handler) {
+      if (destroyed) throw new Error('Cannot subscribe to destroyed store');
+      if (!path || typeof handler !== 'function') {
+        throw new TypeError('subscribe requires path and handler');
+      }
+
+      if (!listeners.has(path)) {
+        listeners.set(path, new Set());
+      }
+      listeners.get(path).add(handler);
+
+      return () => listeners.get(path)?.delete(handler);
+    },
+
+    /**
+     * Destroy store and clear all subscriptions
+     */
+    destroy() {
+      if (!destroyed) {
+        destroyed = true;
+        listeners.clear();
+      }
+    }
+  };
+}
+
+export default createEventState;

package/eventTest.js

@@ -24,7 +24,7 @@
  * Provides TDD-style testing with type extraction capabilities
  */
 
-import { createEventState } from './eventState.js';
+import { createEventState } from './eventStateNew.js';
 
 export function createEventTest(initialState = {}) {
   const store = createEventState(initialState);

package/examples/002-counter-improved/index.html

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>002 Counter Improved - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Counter: <span id="count">0</span></h1>
@@ -12,7 +15,7 @@
   <button id="double">x2</button>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
     const store = createEventState({ count: 0 });

package/examples/003-input-reactive/index.html

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>003 Input Reactive - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Type something:</h1>
@@ -11,7 +14,7 @@
   <p id="output"></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
     const store = createEventState({ text: '' });

package/examples/004-computed-state/index.html

@@ -4,23 +4,26 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>004 Computed State - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Computed State</h1>
-  
+
   <label>First Name: <input type="text" id="firstName" placeholder="Abraham"></label><br>
   <label>Last Name: <input type="text" id="lastName" placeholder="Lincoln"></label><br>
-  
+
   <p><strong>Full Name:</strong> <span id="fullName"></span></p>
   <p><strong>Character Count:</strong> <span id="charCount">0</span></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
-    const store = createEventState({ 
-      firstName: '', 
-      lastName: '' 
+    const store = createEventState({
+      firstName: '',
+      lastName: ''
     });
 
     // Computed: full name (derived from firstName + lastName)

package/examples/005-conditional-rendering/index.html

@@ -4,19 +4,22 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>005 Conditional Rendering - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Conditional Rendering</h1>
-  
+
   <label>
     <input type="checkbox" id="toggle">
     Show secret message
   </label>
-  
-  <p id="message" style="display: none;">🎉 You found the secret message!</p>
+
+  <p id="message" style="display: none;">You found the secret message!</p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
     const store = createEventState({ isVisible: false });

package/examples/006-list-rendering/index.html

@@ -4,17 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>006 List Rendering - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Shopping List</h1>
-  
+
   <input type="text" id="itemInput" placeholder="Add item...">
   <button id="addBtn">Add</button>
-  
+
   <ul id="itemList"></ul>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
     const store = createEventState({ items: [] });
@@ -23,7 +26,7 @@
     const renderList = () => {
       const items = store.get('items');
       const list = document.getElementById('itemList');
-      
+
       if (items.length === 0) {
         list.innerHTML = '<li><em>No items yet</em></li>';
       } else {
@@ -38,7 +41,7 @@
     document.getElementById('addBtn').onclick = () => {
       const input = document.getElementById('itemInput');
       const value = input.value.trim();
-      
+
       if (value) {
         const items = store.get('items');
         store.set('items', [...items, value]);

package/examples/007-form-validation/index.html

@@ -4,30 +4,33 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>007 Form Validation - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Sign Up Form</h1>
-  
+
   <label>
     Email:
     <input type="email" id="email" placeholder="you@example.com">
   </label>
   <p id="emailError" style="color: red;"></p>
-  
+
   <label>
     Password:
     <input type="password" id="password" placeholder="Min 8 characters">
   </label>
   <p id="passwordError" style="color: red;"></p>
-  
+
   <button id="submitBtn" disabled>Submit</button>
   <p id="submitMessage" style="color: green;"></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
-    const store = createEventState({ 
+    const store = createEventState({
       email: '',
       password: '',
       emailValid: false,
@@ -55,7 +58,7 @@
     store.subscribe('email', (value) => {
       const isValid = validateEmail(value);
       store.set('emailValid', isValid);
-      
+
       const error = document.getElementById('emailError');
       error.textContent = value && !isValid ? 'Invalid email address' : '';
     });
@@ -64,7 +67,7 @@
     store.subscribe('password', (value) => {
       const isValid = validatePassword(value);
       store.set('passwordValid', isValid);
-      
+
       const error = document.getElementById('passwordError');
       error.textContent = value && !isValid ? 'Password must be at least 8 characters' : '';
     });
@@ -87,7 +90,7 @@
       const email = store.get('email');
       const message = document.getElementById('submitMessage');
       message.textContent = `✓ Form submitted for ${email}`;
-      
+
       // Clear form
       document.getElementById('email').value = '';
       document.getElementById('password').value = '';

package/examples/008-undo-redo/index.html

@@ -4,25 +4,28 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>008 Undo/Redo - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Counter with Time Travel</h1>
-  
+
   <h2>Count: <span id="count">0</span></h2>
-  
+
   <button id="increment">+1</button>
   <button id="decrement">-1</button>
   <button id="double">×2</button>
-  
+
   <hr>
-  
+
   <button id="undo" disabled>⟲ Undo</button>
   <button id="redo" disabled>⟳ Redo</button>
-  
+
   <p><small>History: <span id="historyInfo">0 states</span></small></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
     const store = createEventState({ count: 0 });
@@ -36,29 +39,29 @@
     const updateUI = () => {
       const count = store.get('count');
       document.getElementById('count').textContent = count;
-      
+
       // Update button states
       document.getElementById('undo').disabled = historyIndex === 0;
       document.getElementById('redo').disabled = historyIndex === history.length - 1;
-      
+
       // Update history info
-      document.getElementById('historyInfo').textContent = 
+      document.getElementById('historyInfo').textContent =
         `${historyIndex + 1} of ${history.length} states`;
     };
 
     // Subscribe to count changes and record history
     store.subscribe('count', (value) => {
       updateUI();
-      
+
       // Only record if not time traveling
       if (!isTimeTravel) {
         // Remove any "future" states if we're in the middle of history
         history = history.slice(0, historyIndex + 1);
-        
+
         // Add new state
         history.push(value);
         historyIndex = history.length - 1;
-        
+
         updateUI();
       }
     });

package/examples/009-localStorage-side-effects/index.html

@@ -4,20 +4,23 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>009 localStorage Side Effects - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Persistent Counter</h1>
-  
+
   <h2>Count: <span id="count">0</span></h2>
-  
+
   <button id="increment">+1</button>
   <button id="decrement">-1</button>
   <button id="reset">Reset</button>
-  
+
   <p><small>Reload the page - your count persists!</small></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     const STORAGE_KEY = 'eventstate-counter';
 

package/examples/010-decoupled-components/index.html

@@ -11,6 +11,9 @@
       margin: 10px 0;
     }
   </style>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Decoupled Components</h1>
@@ -37,10 +40,10 @@
   </div>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Shared store - the ONLY connection between components
-    const store = createEventState({ 
+    const store = createEventState({
       message: '',
       messageCount: 0
     });
@@ -50,7 +53,7 @@
     document.getElementById('sendBtn').onclick = () => {
       const input = document.getElementById('messageInput');
       const value = input.value.trim();
-      
+
       if (value) {
         store.set('message', value);
         store.set('messageCount', store.get('messageCount') + 1);

package/examples/011-async-patterns/index.html

@@ -4,27 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>011 Async Patterns - EventState</title>
+  <script type="importmap">
+    { "imports": { "@uistate/core": "../../index.js" } }
+  </script>
 </head>
 <body>
   <h1>Async Patterns</h1>
-  
+
   <h2>Debounced Search</h2>
   <input type="text" id="searchInput" placeholder="Type to search...">
   <p id="searchStatus"></p>
   <p><strong>Search result:</strong> <span id="searchResult">(type something)</span></p>
-  
+
   <hr>
-  
+
   <h2>Simulated API Call</h2>
   <button id="fetchBtn">Fetch Data</button>
   <p id="loadingStatus"></p>
   <p><strong>Data:</strong> <span id="apiData">(not loaded)</span></p>
 
   <script type="module">
-    import { createEventState } from './eventState.js';
+    import { createEventState } from '@uistate/core';
 
     // Create store
-    const store = createEventState({ 
+    const store = createEventState({
       searchQuery: '',
       searchResult: '',
       isSearching: false,
@@ -48,16 +51,16 @@
     store.subscribe('searchQuery', async (value) => {
       // Clear previous timeout
       clearTimeout(searchTimeout);
-      
+
       if (!value) {
         store.set('searchResult', '');
         store.set('isSearching', false);
         return;
       }
-      
+
       // Show searching indicator
       store.set('isSearching', true);
-      
+
       // Debounce: wait 300ms before searching
       searchTimeout = setTimeout(async () => {
         const result = await performSearch(value);
@@ -68,12 +71,12 @@
 
     // Update UI for search status
     store.subscribe('isSearching', (value) => {
-      document.getElementById('searchStatus').textContent = 
-        value ? '🔍 Searching...' : '';
+      document.getElementById('searchStatus').textContent =
+        value ? 'Searching...' : '';
     });
 
     store.subscribe('searchResult', (value) => {
-      document.getElementById('searchResult').textContent = 
+      document.getElementById('searchResult').textContent =
         value || '(type something)';
     });
 
@@ -83,12 +86,12 @@
     };
 
     // ===== SIMULATED API CALL =====
-    
+
     // Simulate API fetch
     const fetchData = () => {
       return new Promise((resolve) => {
         setTimeout(() => {
-          resolve({ 
+          resolve({
             id: Math.floor(Math.random() * 1000),
             timestamp: new Date().toLocaleTimeString()
           });
@@ -98,7 +101,7 @@
 
     // Subscribe to loading state
     store.subscribe('isLoading', (value) => {
-      document.getElementById('loadingStatus').textContent = 
+      document.getElementById('loadingStatus').textContent =
         value ? '⏳ Loading...' : '';
       document.getElementById('fetchBtn').disabled = value;
     });
@@ -106,7 +109,7 @@
     // Subscribe to API data
     store.subscribe('apiData', (value) => {
       if (value) {
-        document.getElementById('apiData').textContent = 
+        document.getElementById('apiData').textContent =
           `ID: ${value.id}, Time: ${value.timestamp}`;
       }
     });
@@ -114,7 +117,7 @@
     // Fetch button
     document.getElementById('fetchBtn').onclick = async () => {
       store.set('isLoading', true);
-      
+
       try {
         const data = await fetchData();
         store.set('apiData', data);

package/examples/028-counter-improved-eventTest/app/store.js

@@ -1,5 +1,5 @@
 // store.js — singleton eventState store for counter app
-import { createEventState } from '../runtime/core/eventState.js';
+import { createEventState } from '../runtime/core/eventStateNew.js';
 
 const initial = {
   count: 0