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/examples/007-form-validation/README.md DELETED Viewed

@@ -1,52 +0,0 @@
-# 007 Form Validation - Real-time Feedback
-Demonstrates form validation with multiple state paths and computed validity.
-## What's Here
-- Email and password inputs
-- Real-time validation messages
-- Submit button enabled only when form is valid
-- **No form library needed** - just state and functions
-## How It Works
-```javascript
-// 1. Store input values AND validation state
-const store = createEventState({
-  email: '',
-  password: '',
-  emailValid: false,
-  passwordValid: false
-});
-// 2. Validate on input change
-store.subscribe('email', (value) => {
-  const isValid = validateEmail(value);
-  store.set('emailValid', isValid);
-  // Show error message
-});
-// 3. Enable submit when all fields valid
-store.subscribe('emailValid', updateSubmitButton);
-store.subscribe('passwordValid', updateSubmitButton);
-```
-## Key Insight
-**Validation is just derived state.**
-- Input values are **source state**
-- Validation flags are **derived state**
-- Submit button state is **computed from derived state**
-Other frameworks need:
-- React: `useForm` hooks, validation libraries
-- Vue: `v-model` + validation plugins
-- Svelte: Stores + validation actions
-**EventState:** Just subscribe to inputs, validate, and update state. That's it.
-## Run It
-Open `index.html` in a browser. Type invalid data to see error messages. Submit button enables when both fields are valid.

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

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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 '@uistate/core';
-    // Create store
-    const store = createEventState({
-      email: '',
-      password: '',
-      emailValid: false,
-      passwordValid: false
-    });
-    // Validate email
-    const validateEmail = (email) => {
-      return email.includes('@') && email.includes('.');
-    };
-    // Validate password
-    const validatePassword = (password) => {
-      return password.length >= 8;
-    };
-    // Update submit button state
-    const updateSubmitButton = () => {
-      const emailValid = store.get('emailValid');
-      const passwordValid = store.get('passwordValid');
-      document.getElementById('submitBtn').disabled = !(emailValid && passwordValid);
-    };
-    // Subscribe to email changes
-    store.subscribe('email', (value) => {
-      const isValid = validateEmail(value);
-      store.set('emailValid', isValid);
-      const error = document.getElementById('emailError');
-      error.textContent = value && !isValid ? 'Invalid email address' : '';
-    });
-    // Subscribe to password changes
-    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' : '';
-    });
-    // Subscribe to validation state changes
-    store.subscribe('emailValid', updateSubmitButton);
-    store.subscribe('passwordValid', updateSubmitButton);
-    // Wire up inputs
-    document.getElementById('email').oninput = (e) => {
-      store.set('email', e.target.value);
-    };
-    document.getElementById('password').oninput = (e) => {
-      store.set('password', e.target.value);
-    };
-    // Handle submit
-    document.getElementById('submitBtn').onclick = () => {
-      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 = '';
-      store.set('email', '');
-      store.set('password', '');
-    };
-  </script>
-</body>
-</html>

package/examples/008-undo-redo/README.md DELETED Viewed

@@ -1,70 +0,0 @@
-# 008 Undo/Redo - Time Travel Debugging
-Demonstrates how EventState's event-driven architecture makes undo/redo trivial.
-## What's Here
-- Counter with multiple operations
-- Undo/Redo buttons
-- History tracking showing current position
-- **No special library needed** - just an array
-## How It Works
-```javascript
-// 1. Track history in an array
-let history = [0];
-let historyIndex = 0;
-// 2. Record state changes via subscription
-store.subscribe('count', (value) => {
-  if (!isTimeTravel) {
-    history.push(value);
-    historyIndex = history.length - 1;
-  }
-});
-// 3. Undo = go back in history
-document.getElementById('undo').onclick = () => {
-  historyIndex--;
-  isTimeTravel = true;
-  store.set('count', history[historyIndex]);
-  isTimeTravel = false;
-};
-```
-## Key Insight
-**Time travel is just replaying state.**
-Because EventState uses **events** for all state changes, you can:
-- ✅ Record every change automatically (wildcard subscription)
-- ✅ Replay any previous state
-- ✅ Build undo/redo in ~30 lines
-Other frameworks need:
-- React: Redux DevTools, Immer, or custom middleware
-- Vue: Vuex plugins or manual history tracking
-- Svelte: Custom stores with history logic
-**EventState:** Just subscribe to `'*'` and push to an array. That's it.
-## This is Telemetry
-This example shows the **foundation of telemetry**:
-- Every state change is an event
-- Events can be logged, replayed, or analyzed
-- Time-travel debugging comes for free
-In the full UIstate framework, this becomes:
-- Automatic telemetry logging
-- Event sequence testing (`eventTest.js`)
-- Production debugging and replay
-## Run It
-Open `index.html` in a browser. Click operations, then use Undo/Redo to travel through time.
-## Try This
-Make multiple changes, undo halfway, then make a new change. Notice how the "future" states are discarded (like Git branches).

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

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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 '@uistate/core';
-    // Create store
-    const store = createEventState({ count: 0 });
-    // History tracking
-    let history = [0]; // Start with initial state
-    let historyIndex = 0;
-    let isTimeTravel = false; // Flag to prevent recording during undo/redo
-    // Update UI
-    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 =
-        `${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();
-      }
-    });
-    // Counter operations
-    document.getElementById('increment').onclick = () => {
-      store.set('count', store.get('count') + 1);
-    };
-    document.getElementById('decrement').onclick = () => {
-      store.set('count', store.get('count') - 1);
-    };
-    document.getElementById('double').onclick = () => {
-      store.set('count', store.get('count') * 2);
-    };
-    // Undo
-    document.getElementById('undo').onclick = () => {
-      if (historyIndex > 0) {
-        historyIndex--;
-        isTimeTravel = true;
-        store.set('count', history[historyIndex]);
-        isTimeTravel = false;
-        updateUI();
-      }
-    };
-    // Redo
-    document.getElementById('redo').onclick = () => {
-      if (historyIndex < history.length - 1) {
-        historyIndex++;
-        isTimeTravel = true;
-        store.set('count', history[historyIndex]);
-        isTimeTravel = false;
-        updateUI();
-      }
-    };
-    // Initial UI update
-    updateUI();
-  </script>
-</body>
-</html>

package/examples/009-localStorage-side-effects/README.md DELETED Viewed

@@ -1,72 +0,0 @@
-# 009 localStorage Side Effects - Persistent State
-Demonstrates how to sync state with localStorage for persistence across page reloads.
-## What's Here
-- Counter that persists across browser sessions
-- Automatic save on every state change
-- Load saved state on page load
-- **No persistence library needed** - just localStorage API
-## How It Works
-```javascript
-// 1. Load initial state from localStorage
-const savedCount = localStorage.getItem('counter');
-const initialCount = savedCount !== null ? parseInt(savedCount, 10) : 0;
-// 2. Create store with saved state
-const store = createEventState({ count: initialCount });
-// 3. Side effect: save on every change
-store.subscribe('count', (value) => {
-  localStorage.setItem('counter', value);
-  // Also update UI
-  document.getElementById('count').textContent = value;
-});
-```
-## Key Insight
-**Side effects are just subscribers.**
-Subscriptions aren't only for UI updates. They're for:
-- ✅ Saving to localStorage
-- ✅ Logging to analytics
-- ✅ Syncing to server
-- ✅ Triggering other actions
-Other frameworks need:
-- React: `useEffect` with dependency arrays
-- Vue: `watch` or `watchEffect`
-- Svelte: Reactive statements with side effects
-**EventState:** Just subscribe and do whatever you want. That's it.
-## Pattern: Separation of Concerns
-Notice the subscriber does TWO things:
-1. Saves to localStorage (side effect)
-2. Updates the DOM (UI effect)
-You could split these into separate subscribers:
-```javascript
-store.subscribe('count', (value) => {
-  localStorage.setItem('counter', value);
-});
-store.subscribe('count', (value) => {
-  document.getElementById('count').textContent = value;
-});
-```
-This is the **single responsibility principle** in action.
-## Run It
-Open `index.html`, increment the counter, then reload the page. Your count persists!
-## Try This
-Open DevTools → Application → Local Storage to see the saved value update in real-time.

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

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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 '@uistate/core';
-    const STORAGE_KEY = 'eventstate-counter';
-    // Load initial state from localStorage
-    const savedCount = localStorage.getItem(STORAGE_KEY);
-    const initialCount = savedCount !== null ? parseInt(savedCount, 10) : 0;
-    // Create store with saved state
-    const store = createEventState({ count: initialCount });
-    // Side effect: save to localStorage on every change
-    store.subscribe('count', (value) => {
-      localStorage.setItem(STORAGE_KEY, value);
-      document.getElementById('count').textContent = value;
-    });
-    // Operations
-    document.getElementById('increment').onclick = () => {
-      store.set('count', store.get('count') + 1);
-    };
-    document.getElementById('decrement').onclick = () => {
-      store.set('count', store.get('count') - 1);
-    };
-    document.getElementById('reset').onclick = () => {
-      store.set('count', 0);
-    };
-    // Initial render
-    document.getElementById('count').textContent = initialCount;
-  </script>
-</body>
-</html>

package/examples/010-decoupled-components/README.md DELETED Viewed

@@ -1,74 +0,0 @@
-# 010 Decoupled Components - Shared State
-Demonstrates how components can communicate through shared state without direct coupling.
-## What's Here
-- **Component A (Writer):** Sends messages
-- **Component B (Reader):** Displays current message
-- **Component C (Logger):** Logs all messages with timestamps
-- **Zero coupling:** Components don't know about each other
-## How It Works
-```javascript
-// Shared store - the ONLY connection
-const store = createEventState({ message: '' });
-// Component A: Writes to state
-document.getElementById('sendBtn').onclick = () => {
-  store.set('message', inputValue);
-};
-// Component B: Reads from state
-store.subscribe('message', (value) => {
-  document.getElementById('display').textContent = value;
-});
-// Component C: Also reads from state
-store.subscribe('message', (value) => {
-  logMessage(value);
-});
-```
-## Key Insight
-**State is the interface between components.**
-Components communicate by:
-1. Writing to shared state
-2. Subscribing to shared state
-3. **Never** calling each other directly
-This is the **pub/sub pattern** in action:
-- ✅ Components are decoupled
-- ✅ Easy to add/remove components
-- ✅ No prop drilling
-- ✅ No callbacks passed down
-Other frameworks need:
-- React: Context API, prop drilling, or state management libraries
-- Vue: Provide/inject or Vuex
-- Svelte: Context API or stores
-**EventState:** Just share the store. That's it.
-## Architecture Pattern
-This demonstrates the **mediator pattern**:
-- Components don't talk to each other
-- They talk to the store
-- The store mediates all communication
-This is how your full UIstate framework works:
-- Intents → State changes
-- State changes → UI updates
-- Everything is decoupled through events
-## Run It
-Open `index.html`, type messages, and watch all three components react independently.
-## Try This
-Add a fourth component that counts vowels in messages. It only needs to subscribe to `'message'` - no other code changes needed.

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

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>010 Decoupled Components - EventState</title>
-  <style>
-    .component {
-      border: 2px solid #333;
-      padding: 20px;
-      margin: 10px 0;
-    }
-  </style>
-  <script type="importmap">
-    { "imports": { "@uistate/core": "../../index.js" } }
-  </script>
-</head>
-<body>
-  <h1>Decoupled Components</h1>
-  <p>Two independent "components" sharing state without knowing about each other.</p>
-  <!-- Component A: Writer -->
-  <div class="component">
-    <h2>Component A: Writer</h2>
-    <input type="text" id="messageInput" placeholder="Type a message...">
-    <button id="sendBtn">Send</button>
-  </div>
-  <!-- Component B: Reader -->
-  <div class="component">
-    <h2>Component B: Reader</h2>
-    <p><strong>Received:</strong> <span id="messageDisplay">(nothing yet)</span></p>
-    <p><small>Message count: <span id="messageCount">0</span></small></p>
-  </div>
-  <!-- Component C: Logger -->
-  <div class="component">
-    <h2>Component C: Logger</h2>
-    <ul id="messageLog"></ul>
-  </div>
-  <script type="module">
-    import { createEventState } from '@uistate/core';
-    // Shared store - the ONLY connection between components
-    const store = createEventState({
-      message: '',
-      messageCount: 0
-    });
-    // ===== COMPONENT A: Writer =====
-    // Knows nothing about B or C, just writes to state
-    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);
-        input.value = '';
-      }
-    };
-    document.getElementById('messageInput').onkeypress = (e) => {
-      if (e.key === 'Enter') {
-        document.getElementById('sendBtn').click();
-      }
-    };
-    // ===== COMPONENT B: Reader =====
-    // Knows nothing about A or C, just reads from state
-    store.subscribe('message', (value) => {
-      document.getElementById('messageDisplay').textContent = value || '(nothing yet)';
-    });
-    store.subscribe('messageCount', (value) => {
-      document.getElementById('messageCount').textContent = value;
-    });
-    // ===== COMPONENT C: Logger =====
-    // Knows nothing about A or B, just logs all messages
-    store.subscribe('message', (value) => {
-      if (value) {
-        const log = document.getElementById('messageLog');
-        const timestamp = new Date().toLocaleTimeString();
-        const li = document.createElement('li');
-        li.textContent = `[${timestamp}] ${value}`;
-        log.appendChild(li);
-      }
-    });
-  </script>
-</body>
-</html>