@uistate/core 4.1.2 → 5.0.0

package/eventState.js

@@ -1,78 +1,87 @@
 const createEventState = (initial = {}) => {
     const store = JSON.parse(JSON.stringify(initial));
 
-    const bus = document.createElement("x-store");
-
-    bus.style.display = "none";
-    document.documentElement.appendChild(bus);
+    const bus = new EventTarget();
+    let destroyed = false;
 
     return {
         get: (path) => {
+            if (destroyed) throw new Error('Cannot get from destroyed store');
             if (!path) return store;
-            return path
-                .split(".")
-                .reduce(
-                    (obj, prop) =>
-                        obj && obj[prop] !== undefined ? obj[prop] : undefined,
-                    store
-                );
-        },
 
-        set: (path, value) => {
-            if(!path) return;
+            // Parse dot-paths: 'items.0' → ['items', '0']
+            const parts = path.split('.').flatMap(part => {
+                const match = part.match(/([^\[]+)\[(\d+)\]/);
+                return match ? [match[1], match[2]] : part;
+            });
 
-            let target = store;
-            const parts = path.split(".");
+            return parts.reduce(
+                (obj, prop) => (obj && obj[prop] !== undefined ? obj[prop] : undefined),
+                store
+            );
+        },
+        set: (path, value) => {
+            if (destroyed) throw new Error('Cannot set on destroyed store');
+            if (!path) return;
+            const parts = path.split('.');
             const last = parts.pop();
+            let target = store;
 
-            parts.forEach((part) => {
-                if (!target[part] || typeof target[part] !== "object") {
-                    target[part] = {};
-                }
-                target = target[part];
-            });
+            for (const key of parts) {
+              // create intermediate objects as needed
+              if (typeof target[key] !== 'object' || target[key] === null) {
+                target[key] = {};
+              }
+              target = target[key];
+            }
 
             target[last] = value;
 
-            bus.dispatchEvent(new CustomEvent(path, { detail: value }));
+            if (!destroyed) {
+                // exact path
+                bus.dispatchEvent(new CustomEvent(path, { detail: value }));
 
-            if (parts.length > 0) {
-                let parentPath = "";
-                for (const part of parts) {
-                    parentPath = parentPath ? `${parentPath}.${part}` : part;
-                    bus.dispatchEvent(
-                        new CustomEvent(`${parentPath}.*`, {
-                            detail: { path, value },
-                        })
-                    );
+                // parent wildcards: a, a.b -> 'a.*', 'a.b.*'
+                for (let i = 1; i <= parts.length; i++) {
+                    const parent = parts.slice(0, i).join('.');
+                    bus.dispatchEvent(new CustomEvent(`${parent}.*`, { detail: { path, value } }));
                 }
 
-                bus.dispatchEvent(
-                    new CustomEvent("*", {
-                        detail: { path, value},
-                    })
-                );
+                // root wildcard
+                bus.dispatchEvent(new CustomEvent('*', { detail: { path, value } }));
             }
 
             return value;
         },
+        subscribe(path, handler) {
+            if (destroyed) throw new Error('store destroyed');
+            if (!path || typeof handler !== 'function') {
+                throw new TypeError('subscribe(path, handler) requires a string path and function handler');
+            }
+            const onEvent = (evt) => handler(evt.detail, evt);
+            bus.addEventListener(path, onEvent);
 
-        subscribe: (path, callback) => {
-            if (!path || typeof callback !== "function") return () => {};
-
-            const handler = (e) => callback(e.detail, path);
-            bus.addEventListener(path, handler);
-
-            return () => bus.removeEventListener(path, handler);
+            return function unsubscribe() {
+                bus.removeEventListener(path, onEvent);
+            };
         },
-
-        destroy: () => {
-            if (bus.parentNode) {
-                bus.parentNode.removeChild(bus);
+        addStateListener: subscribe,
+        off(unsubscribe) {
+            if (typeof unsubscribe !== 'function') {
+                throw new TypeError('off(unsubscribe) requires a function returned by subscribe');
             }
+            return unsubscribe();
         },
+
+        destroy() {
+            if (!destroyed) {
+                destroyed = true;
+                // EventTarget has no parentNode - just mark as destroyed
+                // Future sets/subscribes will be blocked by destroyed flag
+            }
+        }
     };
-};
+}
 
 export default createEventState;
 export { createEventState };

package/eventTest.js

@@ -0,0 +1,196 @@
+/**
+ * eventTest.js - Event-Sequence Testing for UIstate
+ * 
+ * Copyright (c) 2025 Ajdin Imsirovic
+ * 
+ * This file is licensed under a PROPRIETARY LICENSE.
+ * 
+ * Permission is hereby granted to USE this software for:
+ * - Personal projects
+ * - Open-source projects
+ * - Educational purposes
+ * 
+ * RESTRICTIONS:
+ * - Commercial use requires a separate license (contact: your@email.com)
+ * - Modification and redistribution of this file are NOT permitted
+ * - This file may not be included in derivative works without permission
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
+ * 
+ * For commercial licensing inquiries: your@email.com
+ * 
+ * eventTest.js - Event-Sequence Testing for EventState
+ * 
+ * Provides TDD-style testing with type extraction capabilities
+ */
+
+import { createEventState } from './eventState.js';
+
+export function createEventTest(initialState = {}) {
+  const store = createEventState(initialState);
+  const eventLog = [];
+  const typeAssertions = [];
+
+  // Spy on all events
+  store.subscribe('*', (detail) => {
+    const { path, value } = detail;
+    eventLog.push({ timestamp: Date.now(), path, value });
+  });
+
+  const api = {
+    store,
+
+    // Trigger a state change
+    trigger(path, value) {
+      store.set(path, value);
+      return this;
+    },
+
+    // Assert exact value
+    assertPath(path, expected) {
+      const actual = store.get(path);
+      if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+        throw new Error(`Expected ${path} to be ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
+      }
+      return this;
+    },
+
+    // Assert type (for type generation)
+    assertType(path, expectedType) {
+      const actual = store.get(path);
+      const actualType = typeof actual;
+      
+      if (actualType !== expectedType) {
+        throw new Error(`Expected ${path} to be type ${expectedType}, got ${actualType}`);
+      }
+      
+      // Store for type generation
+      typeAssertions.push({ path, type: expectedType });
+      return this;
+    },
+
+    // Assert array with element shape (for type generation)
+    assertArrayOf(path, elementShape) {
+      const actual = store.get(path);
+      
+      if (!Array.isArray(actual)) {
+        throw new Error(`Expected ${path} to be an array, got ${typeof actual}`);
+      }
+      
+      // Validate first element matches shape (if array not empty)
+      if (actual.length > 0) {
+        validateShape(actual[0], elementShape, path);
+      }
+      
+      // Store for type generation
+      typeAssertions.push({ path, type: 'array', elementShape });
+      return this;
+    },
+
+    // Assert object shape (for type generation)
+    assertShape(path, objectShape) {
+      const actual = store.get(path);
+      
+      if (typeof actual !== 'object' || actual === null || Array.isArray(actual)) {
+        throw new Error(`Expected ${path} to be an object, got ${typeof actual}`);
+      }
+      
+      validateShape(actual, objectShape, path);
+      
+      // Store for type generation
+      typeAssertions.push({ path, type: 'object', shape: objectShape });
+      return this;
+    },
+
+    // Assert array length
+    assertArrayLength(path, expectedLength) {
+      const actual = store.get(path);
+      
+      if (!Array.isArray(actual)) {
+        throw new Error(`Expected ${path} to be an array`);
+      }
+      
+      if (actual.length !== expectedLength) {
+        throw new Error(`Expected ${path} to have length ${expectedLength}, got ${actual.length}`);
+      }
+      
+      return this;
+    },
+
+    // Assert event fired N times
+    assertEventFired(path, times) {
+      const count = eventLog.filter(e => e.path === path).length;
+      if (times !== undefined && count !== times) {
+        throw new Error(`Expected ${path} to fire ${times} times, fired ${count}`);
+      }
+      return this;
+    },
+
+    // Get event log
+    getEventLog() {
+      return [...eventLog];
+    },
+
+    // Get type assertions (for type generation)
+    getTypeAssertions() {
+      return [...typeAssertions];
+    }
+  };
+
+  return api;
+}
+
+// Helper to validate object shape
+function validateShape(actual, shape, path) {
+  for (const [key, expectedType] of Object.entries(shape)) {
+    if (!(key in actual)) {
+      throw new Error(`Expected ${path} to have property ${key}`);
+    }
+    
+    const actualValue = actual[key];
+    
+    // Handle nested objects
+    if (typeof expectedType === 'object' && !Array.isArray(expectedType)) {
+      validateShape(actualValue, expectedType, `${path}.${key}`);
+    } else {
+      // Primitive type check
+      const actualType = typeof actualValue;
+      if (actualType !== expectedType) {
+        throw new Error(`Expected ${path}.${key} to be type ${expectedType}, got ${actualType}`);
+      }
+    }
+  }
+}
+
+// Simple test runner
+export function test(name, fn) {
+  try {
+    fn();
+    console.log(`✓ ${name}`);
+    return true;
+  } catch (error) {
+    console.error(`✗ ${name}`);
+    console.error(`  ${error.message}`);
+    return false;
+  }
+}
+
+// Run multiple tests
+export function runTests(tests) {
+  console.log('\n🧪 Running tests...\n');
+  
+  let passed = 0;
+  let failed = 0;
+  
+  for (const [name, fn] of Object.entries(tests)) {
+    if (test(name, fn)) {
+      passed++;
+    } else {
+      failed++;
+    }
+  }
+  
+  console.log(`\n📊 Results: ${passed} passed, ${failed} failed\n`);
+  
+  return { passed, failed };
+}

package/examples/001-counter/README.md

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EventState Example
+
+The simplest possible EventState example: a counter with one button.
+
+## What's Here
+
+- `eventState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+
+## How It Works
+
+```javascript
+// 1. Create store
+const store = createEventState({ count: 0 });
+
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+
+That's it. No framework, no build step, just reactive data.
+
+## Run It
+
+Open `index.html` in a browser. Click the `+` button to increment.
+
+## Key Concepts
+
+- **`createEventState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+
+## Next Steps
+
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/examples/001-counter/eventState.js

@@ -0,0 +1,86 @@
+const createEventState = (initial = {}) => {
+    const store = JSON.parse(JSON.stringify(initial));
+
+    const bus = new EventTarget();
+    let destroyed = false;
+
+    return {
+        get: (path) => {
+            if (destroyed) throw new Error('Cannot get from destroyed store');
+            if (!path) return store;
+
+            // Parse dot-paths: 'items.0' → ['items', '0']
+            const parts = path.split('.').flatMap(part => {
+                const match = part.match(/([^\[]+)\[(\d+)\]/);
+                return match ? [match[1], match[2]] : part;
+            });
+
+            return parts.reduce(
+                (obj, prop) => (obj && obj[prop] !== undefined ? obj[prop] : undefined),
+                store
+            );
+        },
+        set: (path, value) => {
+            if (destroyed) throw new Error('Cannot set on destroyed store');
+            if (!path) return;
+            const parts = path.split('.');
+            const last = parts.pop();
+            let target = store;
+
+            for (const key of parts) {
+              // create intermediate objects as needed
+              if (typeof target[key] !== 'object' || target[key] === null) {
+                target[key] = {};
+              }
+              target = target[key];
+            }
+
+            target[last] = value;
+
+            if (!destroyed) {
+                // exact path
+                bus.dispatchEvent(new CustomEvent(path, { detail: value }));
+
+                // parent wildcards: a, a.b -> 'a.*', 'a.b.*'
+                for (let i = 1; i <= parts.length; i++) {
+                    const parent = parts.slice(0, i).join('.');
+                    bus.dispatchEvent(new CustomEvent(`${parent}.*`, { detail: { path, value } }));
+                }
+
+                // root wildcard
+                bus.dispatchEvent(new CustomEvent('*', { detail: { path, value } }));
+            }
+
+            return value;
+        },
+        subscribe(path, handler) {
+            if (destroyed) throw new Error('store destroyed');
+            if (!path || typeof handler !== 'function') {
+                throw new TypeError('subscribe(path, handler) requires a string path and function handler');
+            }
+            const onEvent = (evt) => handler(evt.detail, evt);
+            bus.addEventListener(path, onEvent);
+
+            return function unsubscribe() {
+                bus.removeEventListener(path, onEvent);
+            };
+        },
+        off(unsubscribe) {
+            if (typeof unsubscribe !== 'function') {
+                throw new TypeError('off(unsubscribe) requires a function returned by subscribe');
+            }
+            return unsubscribe();
+        },
+
+        destroy() {
+            if (!destroyed) {
+                destroyed = true;
+                // EventTarget has no parentNode - just mark as destroyed
+                // Future sets/subscribes will be blocked by destroyed flag
+            }
+        }
+    };
+}
+
+export default createEventState;
+export { createEventState };

package/examples/001-counter/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>001 Counter - EventState</title>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+
+  <script type="module">
+    import { createEventState } from './eventState.js';
+
+    // Create store
+    const store = createEventState({ count: 0 });
+
+    // Subscribe to count changes
+    store.subscribe('count', ( value ) => {
+      document.getElementById('count').textContent = value;
+    });
+
+    // Increment on button click
+    document.getElementById('increment').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current + 1);
+    };
+  </script>
+</body>
+</html>

package/examples/002-counter-improved/README.md

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EventState Example
+
+The simplest possible EventState example: a counter with one button.
+
+## What's Here
+
+- `eventState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+
+## How It Works
+
+```javascript
+// 1. Create store
+const store = createEventState({ count: 0 });
+
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+
+That's it. No framework, no build step, just reactive data.
+
+## Run It
+
+Open `index.html` in a browser. Click the `+` button to increment.
+
+## Key Concepts
+
+- **`createEventState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+
+## Next Steps
+
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/examples/002-counter-improved/eventState.js

@@ -0,0 +1,86 @@
+const createEventState = (initial = {}) => {
+    const store = JSON.parse(JSON.stringify(initial));
+
+    const bus = new EventTarget();
+    let destroyed = false;
+
+    return {
+        get: (path) => {
+            if (destroyed) throw new Error('Cannot get from destroyed store');
+            if (!path) return store;
+
+            // Parse dot-paths: 'items.0' → ['items', '0']
+            const parts = path.split('.').flatMap(part => {
+                const match = part.match(/([^\[]+)\[(\d+)\]/);
+                return match ? [match[1], match[2]] : part;
+            });
+
+            return parts.reduce(
+                (obj, prop) => (obj && obj[prop] !== undefined ? obj[prop] : undefined),
+                store
+            );
+        },
+        set: (path, value) => {
+            if (destroyed) throw new Error('Cannot set on destroyed store');
+            if (!path) return;
+            const parts = path.split('.');
+            const last = parts.pop();
+            let target = store;
+
+            for (const key of parts) {
+              // create intermediate objects as needed
+              if (typeof target[key] !== 'object' || target[key] === null) {
+                target[key] = {};
+              }
+              target = target[key];
+            }
+
+            target[last] = value;
+
+            if (!destroyed) {
+                // exact path
+                bus.dispatchEvent(new CustomEvent(path, { detail: value }));
+
+                // parent wildcards: a, a.b -> 'a.*', 'a.b.*'
+                for (let i = 1; i <= parts.length; i++) {
+                    const parent = parts.slice(0, i).join('.');
+                    bus.dispatchEvent(new CustomEvent(`${parent}.*`, { detail: { path, value } }));
+                }
+
+                // root wildcard
+                bus.dispatchEvent(new CustomEvent('*', { detail: { path, value } }));
+            }
+
+            return value;
+        },
+        subscribe(path, handler) {
+            if (destroyed) throw new Error('store destroyed');
+            if (!path || typeof handler !== 'function') {
+                throw new TypeError('subscribe(path, handler) requires a string path and function handler');
+            }
+            const onEvent = (evt) => handler(evt.detail, evt);
+            bus.addEventListener(path, onEvent);
+
+            return function unsubscribe() {
+                bus.removeEventListener(path, onEvent);
+            };
+        },
+        off(unsubscribe) {
+            if (typeof unsubscribe !== 'function') {
+                throw new TypeError('off(unsubscribe) requires a function returned by subscribe');
+            }
+            return unsubscribe();
+        },
+
+        destroy() {
+            if (!destroyed) {
+                destroyed = true;
+                // EventTarget has no parentNode - just mark as destroyed
+                // Future sets/subscribes will be blocked by destroyed flag
+            }
+        }
+    };
+}
+
+export default createEventState;
+export { createEventState };

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

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>002 Counter Improved - EventState</title>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+  <button id="decrement">-</button>
+  <button id="double">x2</button>
+
+  <script type="module">
+    import { createEventState } from './eventState.js';
+
+    // Create store
+    const store = createEventState({ count: 0 });
+
+    // Subscribe to count changes
+    store.subscribe('count', ( value ) => {
+      document.getElementById('count').textContent = value;
+    });
+
+    // Increment on button click
+    document.getElementById('increment').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current + 1);
+    };
+
+    // Decrement on button click
+    document.getElementById('decrement').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current - 1);
+    };
+
+    // Decrement on button click
+    document.getElementById('double').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current * 2);
+    };    
+  </script>
+</body>
+</html>