@uistate/core 5.2.0 → 5.4.0

package/index.js

@@ -1,17 +1,10 @@
 /**
  * UIstate v5 - Core barrel exports
  * 
- * EventState is now the primary export for application state management.
- * cssState remains available for CSS variable/theme management use cases.
+ * EventState is the primary export for application state management.
+ * CSS state management has moved to @uistate/css.
  */
 
 // Primary: EventState (recommended for application state)
 export { createEventState } from './eventStateNew.js';
 export { createEventState as default } from './eventStateNew.js';
-
-// Specialized: CSS State (for CSS variables and theme management)
-export { createCssState } from './cssState.js';
-
-// Utilities
-export { default as stateSerializer } from './stateSerializer.js';
-export { createTemplateManager } from './templateManager.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uistate/core",
-  "version": "5.2.0",
+  "version": "5.4.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",
@@ -8,22 +8,16 @@
     ".": "./index.js",
     "./eventState": "./eventState.js",
     "./eventStateNew": "./eventStateNew.js",
-    "./cssState": "./cssState.js",
-    "./stateSerializer": "./stateSerializer.js",
-    "./templateManager": "./templateManager.js"
+    "./query": "./queryClient.js"
   },
   "files": [
     "index.js",
     "eventState.js",
     "eventStateNew.js",
-    "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/cssState.js

@@ -1,212 +0,0 @@
-/**
- * UIstate - CSS-based state management module with integrated serialization
- * Part of the UIstate declarative state management system
- * Uses CSS custom properties and data attributes for state representation
- * Features modular extension capabilities for DOM binding and events
- */
-import StateSerializer from './stateSerializer.js';
-
-const createCssState = (initialState = {}, serializer = StateSerializer) => {
-    const state = {
-        _sheet: null,
-        _observers: new Map(),
-        _serializer: serializer,
-        _specialHandlers: {},
-        _eventHandlers: new Map(), // Store custom event binding handlers
-
-        init(serializerConfig) {
-            if (!this._sheet) {
-                const style = document.createElement('style');
-                document.head.appendChild(style);
-                this._sheet = style.sheet;
-                this._addRule(':root {}');
-            }
-
-            // Configure serializer if options provided
-            if (serializerConfig && typeof serializerConfig === 'object') {
-                this._serializer.configure(serializerConfig);
-            }
-
-            // Initialize with any provided state
-            if (initialState && typeof initialState === 'object') {
-                Object.entries(initialState).forEach(([key, value]) => {
-                    this.setState(key, value);
-                });
-            }
-
-            return this;
-        },
-
-        setState(key, value) {
-            // Use serializer for CSS variables
-            const cssValue = this._serializer.serialize(key, value);
-            document.documentElement.style.setProperty(`--${key}`, cssValue);
-
-            // Use serializer to handle all attribute application consistently
-            this._serializer.applyToAttributes(key, value);
-
-            // Notify any registered observers of the state change
-            this._notifyObservers(key, value);
-            return value;
-        },
-
-        setStates(stateObject) {
-            Object.entries(stateObject).forEach(([key, value]) => {
-                this.setState(key, value);
-            });
-            return this;
-        },
-
-        getState(key) {
-            const value = getComputedStyle(document.documentElement).getPropertyValue(`--${key}`).trim();
-            if (!value) return '';
-
-            // Use serializer for deserialization
-            return this._serializer.deserialize(key, value);
-        },
-
-        observe(key, callback) {
-            if (!this._observers.has(key)) {
-                this._observers.set(key, new Set());
-            }
-            this._observers.get(key).add(callback);
-            return () => {
-                const observers = this._observers.get(key);
-                if (observers) {
-                    observers.delete(callback);
-                }
-            };
-        },
-
-        _notifyObservers(key, value) {
-            const observers = this._observers.get(key);
-            if (observers) {
-                observers.forEach(cb => cb(value));
-            }
-        },
-
-        registerSpecialHandler(stateKey, handlerFn) {
-            this._specialHandlers[stateKey] = handlerFn;
-            return this;
-        },
-
-        // New method for registering event bindings
-        registerEventBinding(eventType, handler) {
-            this._eventHandlers.set(eventType, handler);
-            return this;
-        },
-
-        setupObservers(container = document) {
-            container.querySelectorAll('[data-observe]:not([data-observing])').forEach(el => {
-                const stateKey = el.dataset.observe;
-
-                this.observe(stateKey, (value) => {
-                    // Special handlers should run first to set data-state
-                    if (this._specialHandlers[stateKey]?.observe) {
-                        this._specialHandlers[stateKey].observe(value, el);
-                    } else if (stateKey.endsWith('-state') && el.hasAttribute('data-state')) {
-                        // Only update data-state for elements that already have this attribute
-                        el.dataset.state = value;
-                    } else {
-                        // For normal state observers like theme, counter, etc.
-                        el.textContent = value;
-                    }
-                });
-
-                // Trigger initial state
-                const initialValue = this.getState(stateKey);
-                if (this._specialHandlers[stateKey]?.observe) {
-                    this._specialHandlers[stateKey].observe(initialValue, el);
-                } else if (stateKey.endsWith('-state') && el.hasAttribute('data-state')) {
-                    // Only set data-state for elements that should have this attribute
-                    el.dataset.state = initialValue;
-                } else {
-                    // For normal elements
-                    el.textContent = initialValue;
-                }
-
-                el.dataset.observing = 'true';
-            });
-
-            return this;
-        },
-
-        // Default event handlers available for implementations to use
-        defaultClickHandler(e) {
-            const target = e.target.closest('[data-state-action]');
-            if (!target) return;
-
-            const stateAction = target.dataset.stateAction;
-            if (!stateAction) return;
-
-            // Special handlers get first priority
-            if (this._specialHandlers[stateAction]?.action) {
-                this._specialHandlers[stateAction].action(target);
-                return;
-            }
-
-            // Handle direct value setting via data-state-value
-            if (target.dataset.stateValue !== undefined) {
-                const valueToSet = target.dataset.stateValue;
-                this.setState(stateAction, valueToSet);
-            }
-        },
-
-        defaultInputHandler(e) {
-            const target = e.target;
-            const stateAction = target.dataset.stateAction;
-
-            if (!stateAction) return;
-
-            // Special handlers should access any needed data directly from the target
-            if (this._specialHandlers[stateAction]?.action) {
-                this._specialHandlers[stateAction].action(target);
-            }
-        },
-
-        // Updated setupStateActions to use registered event handlers
-        setupStateActions(container = document) {
-            // Only bind the registered event types
-            this._eventHandlers.forEach((handler, eventType) => {
-                container.addEventListener(eventType, handler);
-            });
-
-            // If no event handlers registered, register the default ones
-            if (this._eventHandlers.size === 0) {
-                container.addEventListener('click', (e) => this.defaultClickHandler(e));
-                container.addEventListener('input', (e) => this.defaultInputHandler(e));
-            }
-
-            return this;
-        },
-
-        _addRule(rule) {
-            if (this._sheet) {
-                this._sheet.insertRule(rule, this._sheet.cssRules.length);
-            }
-        },
-
-        // Add serializer configuration method
-        configureSerializer(config) {
-            if (this._serializer.configure) {
-                this._serializer.configure(config);
-            }
-            return this;
-        },
-
-        // Clean up resources
-        destroy() {
-            this._observers.clear();
-            // The style element will remain in the DOM
-            // as removing it would affect the UI state
-        }
-    };
-
-    return state.init();
-};
-
-// Create a singleton instance for easy usage
-const UIstate = createCssState();
-
-export { createCssState };
-export default UIstate;

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>