npm - @uistate/core - Versions diffs - 5.2.0 → 5.3.0 - Mend

@uistate/core 5.2.0 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uistate/core",
-  "version": "5.2.0",
+  "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 ADDED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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>