npm - @uistate/examples - Versions diffs - 1.0.0 - Mend

@uistate/examples 1.0.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 (137) hide show

package/eventState/007-form-validation/index.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!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/eventState/008-undo-redo/README.md ADDED Viewed

@@ -0,0 +1,70 @@
+# 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/eventState/008-undo-redo/index.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!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/eventState/009-localStorage-side-effects/README.md ADDED Viewed

@@ -0,0 +1,72 @@
+# 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/eventState/009-localStorage-side-effects/index.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!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/eventState/010-decoupled-components/README.md ADDED Viewed

@@ -0,0 +1,74 @@
+# 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/eventState/010-decoupled-components/index.html ADDED Viewed

@@ -0,0 +1,93 @@
+<!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>

package/eventState/011-async-patterns/README.md ADDED Viewed

@@ -0,0 +1,98 @@
+# 011 Async Patterns - Debouncing & Loading States
+Demonstrates how to handle async operations with EventState.
+## What's Here
+- **Debounced search:** Wait for user to stop typing before searching
+- **Loading states:** Show loading indicator during async operations
+- **Error handling:** Graceful failure with try/catch
+- **No async library needed** - just Promises and state
+## How It Works
+### Debounced Search
+```javascript
+let searchTimeout = null;
+store.subscribe('searchQuery', async (value) => {
+  clearTimeout(searchTimeout);
+  store.set('isSearching', true);
+  // Wait 300ms before searching
+  searchTimeout = setTimeout(async () => {
+    const result = await performSearch(value);
+    store.set('searchResult', result);
+    store.set('isSearching', false);
+  }, 300);
+});
+```
+### Loading States
+```javascript
+document.getElementById('fetchBtn').onclick = async () => {
+  store.set('isLoading', true);
+  try {
+    const data = await fetchData();
+    store.set('apiData', data);
+  } finally {
+    store.set('isLoading', false);
+  }
+};
+```
+## Key Insight
+**Async is just state changes over time.**
+Pattern for any async operation:
+1. Set loading state to `true`
+2. Perform async operation
+3. Set result state
+4. Set loading state to `false`
+Other frameworks need:
+- React: `useState` + `useEffect` + cleanup functions
+- Vue: `ref` + `watch` + async watchers
+- Svelte: Reactive statements + `#await` blocks
+**EventState:** Just use async/await in subscribers. That's it.
+## Patterns Demonstrated
+### 1. Debouncing
+Wait for user to stop typing before triggering expensive operations.
+### 2. Loading Indicators
+Show feedback during async operations to improve UX.
+### 3. Disabling Actions
+Prevent duplicate requests by disabling buttons during loading.
+### 4. Cleanup
+Clear timeouts to prevent race conditions.
+## Run It
+Open `index.html`:
+- Type in the search box (notice the 300ms delay)
+- Click "Fetch Data" (notice the loading state)
+## Try This
+Open DevTools Network tab and throttle to "Slow 3G" to see loading states more clearly.
+## Real-World Usage
+This pattern works for:
+- ✅ API calls
+- ✅ Autocomplete
+- ✅ Form submission
+- ✅ File uploads
+- ✅ Any async operation
+Just manage loading/error/success states in the store.