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

@uistate/core 5.2.0 → 5.4.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 (142) hide show

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>

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>