@uistate/core 5.1.1 → 5.3.0

package/eventStateNew.js

@@ -61,7 +61,13 @@ export function createEventState(initial = {}) {
     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);
+      const parts = path.split('.');
+      let cur = state;
+      for (const p of parts) {
+        if (cur == null) return undefined;
+        cur = cur[p];
+      }
+      return cur;
     },
 
     /**
@@ -140,7 +146,7 @@ export function createEventState(initial = {}) {
 
         if (destroyed) throw new Error('Cannot setAsync on destroyed store');
 
-        this.set(path, data);
+        this.set(`${path}.data`, data);
         this.set(`${path}.status`, 'success');
         return data;
       } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uistate/core",
-  "version": "5.1.1",
+  "version": "5.3.0",
   "description": "Lightweight event-driven state management with slot orchestration and experimental event-sequence testing (eventTest.js available under dual license)",
   "type": "module",
   "main": "index.js",
@@ -10,7 +10,8 @@
     "./eventStateNew": "./eventStateNew.js",
     "./cssState": "./cssState.js",
     "./stateSerializer": "./stateSerializer.js",
-    "./templateManager": "./templateManager.js"
+    "./templateManager": "./templateManager.js",
+    "./query": "./queryClient.js"
   },
   "files": [
     "index.js",
@@ -19,11 +20,10 @@
     "cssState.js",
     "stateSerializer.js",
     "templateManager.js",
+    "queryClient.js",
     "eventTest.js",
     "LICENSE",
-    "LICENSE-eventTest.md",
-    "examples/",
-    "playground/"
+    "LICENSE-eventTest.md"
   ],
   "keywords": [
     "state-management",

package/queryClient.js

@@ -0,0 +1,55 @@
+// Mini QueryClient wrapper for EventState
+// Thin async layer with standard query patterns
+
+export const createQueryClient = (store) => {
+  return {
+    // Run a query with async state handling
+    async query(key, fetcher) {
+      return await store.setAsync(`query.${key}`, fetcher);
+    },
+
+    // Subscribe to query data
+    subscribe(key, cb) {
+      return store.subscribe(`query.${key}.data`, cb);
+    },
+
+    // Subscribe to query status
+    subscribeToStatus(key, cb) {
+      return store.subscribe(`query.${key}.status`, cb);
+    },
+
+    // Subscribe to query errors
+
+    subscribeToError(key, cb) {
+      return store.subscribe(`query.${key}.error`, cb);
+    },
+
+    // Read current query data
+    getData(key) {
+      return store.get(`query.${key}.data`);
+    },
+
+    // Read current query status
+    getStatus(key) {
+      return store.get(`query.${key}.status`);
+    },
+
+    // Read current query error
+    getError(key) {
+      return store.get(`query.${key}.error`);
+    },
+
+    // Cancel active query
+    cancel(key) {
+      store.cancel(`query.${key}`);
+    },
+
+    // Reset query to idle
+    invalidate(key) {
+      const p = `query.${key}`;
+      store.set(`${p}.data`, null);
+      store.set(`${p}.status`, "idle");
+      store.set(`${p}.error`, null);
+    },
+  };
+};

package/examples/001-counter/README.md

@@ -1,44 +0,0 @@
-# 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/index.html

@@ -1,33 +0,0 @@
-<!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>
-  <script type="importmap">
-    { "imports": { "@uistate/core": "../../index.js" } }
-  </script>
-</head>
-<body>
-  <h1>Counter: <span id="count">0</span></h1>
-  <button id="increment">+</button>
-
-  <script type="module">
-    import { createEventState } from '@uistate/core';
-
-    // 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

@@ -1,44 +0,0 @@
-# 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/index.html

@@ -1,47 +0,0 @@
-<!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>
-  <script type="importmap">
-    { "imports": { "@uistate/core": "../../index.js" } }
-  </script>
-</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 '@uistate/core';
-
-    // 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>

package/examples/003-input-reactive/README.md

@@ -1,44 +0,0 @@
-# 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/003-input-reactive/index.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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>
-  <input type="text" id="textInput" placeholder="Start typing...">
-  <p id="output"></p>
-
-  <script type="module">
-    import { createEventState } from '@uistate/core';
-
-    // Create store
-    const store = createEventState({ text: '' });
-
-    // Subscribe to text changes
-    store.subscribe('text', (value) => {
-      document.getElementById('output').textContent = value;
-    });
-
-    // Update state on input
-    document.getElementById('textInput').oninput = (e) => {
-      store.set('text', e.target.value);
-    };
-  </script>
-</body>
-</html>

package/examples/004-computed-state/README.md

@@ -1,45 +0,0 @@
-# 004 Computed State - Derived Values
-
-Shows how trivial it is to create computed/derived state in EventState.
-
-## What's Here
-
-- Two inputs: `firstName` and `lastName`
-- Two computed values: `fullName` and `charCount`
-- **Zero framework magic** - just functions
-
-## How It Works
-
-```javascript
-// 1. Define a function that computes derived state
-const updateFullName = () => {
-  const first = store.get('firstName');
-  const last = store.get('lastName');
-  const fullName = `${first} ${last}`.trim();
-  document.getElementById('fullName').textContent = fullName;
-};
-
-// 2. Subscribe to wildcard to catch all changes
-store.subscribe('*', () => {
-  updateFullName();
-  updateCharCount();
-});
-
-// 3. That's it. No special API needed.
-```
-
-## Key Insight
-
-**Computed state is just a function.** 
-
-Other frameworks need:
-- Vue: `computed()`
-- React: `useMemo()`
-- Svelte: `$:` reactive declarations
-- MobX: `@computed` decorators
-
-**EventState:** Just write a function and call it when state changes.
-
-## Run It
-
-Open `index.html` in a browser. Type in the inputs and watch the computed values update.

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

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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 '@uistate/core';
-
-    // Create store
-    const store = createEventState({
-      firstName: '',
-      lastName: ''
-    });
-
-    // Computed: full name (derived from firstName + lastName)
-    const updateFullName = () => {
-      const first = store.get('firstName');
-      const last = store.get('lastName');
-      const fullName = `${first} ${last}`.trim();
-      document.getElementById('fullName').textContent = fullName || '(empty)';
-    };
-
-    // Computed: character count
-    const updateCharCount = () => {
-      const first = store.get('firstName');
-      const last = store.get('lastName');
-      const total = (first + last).length;
-      document.getElementById('charCount').textContent = total;
-    };
-
-    // Subscribe to any state change and recompute
-    store.subscribe('*', () => {
-      updateFullName();
-      updateCharCount();
-    });
-
-    // Wire up inputs
-    document.getElementById('firstName').oninput = (e) => {
-      store.set('firstName', e.target.value);
-    };
-
-    document.getElementById('lastName').oninput = (e) => {
-      store.set('lastName', e.target.value);
-    };
-
-    // Initial render
-    updateFullName();
-    updateCharCount();
-  </script>
-</body>
-</html>

package/examples/005-conditional-rendering/README.md

@@ -1,42 +0,0 @@
-# 005 Conditional Rendering - Show/Hide Elements
-
-Demonstrates how to conditionally render elements based on state.
-
-## What's Here
-
-- Checkbox to toggle visibility
-- Message that shows/hides based on state
-- **No `v-if` or `{#if}` needed** - just DOM manipulation
-
-## How It Works
-
-```javascript
-// 1. Store boolean state
-const store = createEventState({ isVisible: false });
-
-// 2. Subscribe and toggle display
-store.subscribe('isVisible', (value) => {
-  const message = document.getElementById('message');
-  message.style.display = value ? 'block' : 'none';
-});
-
-// 3. Update state on checkbox change
-document.getElementById('toggle').onchange = (e) => {
-  store.set('isVisible', e.target.checked);
-};
-```
-
-## Key Insight
-
-**Conditional rendering is just DOM manipulation.**
-
-Other frameworks need:
-- React: `{isVisible && <p>Message</p>}`
-- Vue: `v-if="isVisible"`
-- Svelte: `{#if isVisible}`
-
-**EventState:** Just set `style.display` in a subscriber. That's it.
-
-## Run It
-
-Open `index.html` in a browser. Check the box to reveal the message.

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

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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>
-
-  <script type="module">
-    import { createEventState } from '@uistate/core';
-
-    // Create store
-    const store = createEventState({ isVisible: false });
-
-    // Subscribe to visibility changes
-    store.subscribe('isVisible', (value) => {
-      const message = document.getElementById('message');
-      message.style.display = value ? 'block' : 'none';
-    });
-
-    // Toggle on checkbox change
-    document.getElementById('toggle').onchange = (e) => {
-      store.set('isVisible', e.target.checked);
-    };
-  </script>
-</body>
-</html>

package/examples/006-list-rendering/README.md

@@ -1,49 +0,0 @@
-# 006 List Rendering - Dynamic Arrays
-
-Demonstrates how to render lists from array state.
-
-## What's Here
-
-- Input to add items
-- Dynamic list that updates on state change
-- **No `v-for` or `.map()` in JSX** - just `innerHTML`
-
-## How It Works
-
-```javascript
-// 1. Store array in state
-const store = createEventState({ items: [] });
-
-// 2. Render function
-const renderList = () => {
-  const items = store.get('items');
-  const list = document.getElementById('itemList');
-  list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
-};
-
-// 3. Subscribe to array changes
-store.subscribe('items', renderList);
-
-// 4. Add items by creating new array
-const items = store.get('items');
-store.set('items', [...items, newItem]);
-```
-
-## Key Insight
-
-**List rendering is just string concatenation.**
-
-Other frameworks need:
-- React: `{items.map(item => <li>{item}</li>)}`
-- Vue: `v-for="item in items"`
-- Svelte: `{#each items as item}`
-
-**EventState:** Just use `.map()` and `innerHTML`. That's it.
-
-## Important
-
-We create a **new array** with `[...items, newItem]` instead of mutating. This ensures the subscription fires (new reference = change detected).
-
-## Run It
-
-Open `index.html` in a browser. Type items and click Add (or press Enter).

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

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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 '@uistate/core';
-
-    // Create store
-    const store = createEventState({ items: [] });
-
-    // Render list
-    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 {
-        list.innerHTML = items.map(item => `<li>${item}</li>`).join('');
-      }
-    };
-
-    // Subscribe to items changes
-    store.subscribe('items', renderList);
-
-    // Add item
-    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]);
-        input.value = '';
-      }
-    };
-
-    // Add on Enter key
-    document.getElementById('itemInput').onkeypress = (e) => {
-      if (e.key === 'Enter') {
-        document.getElementById('addBtn').click();
-      }
-    };
-
-    // Initial render
-    renderList();
-  </script>
-</body>
-</html>