npm - @everystate/examples - Versions diffs - 1.0.0 → 1.0.1 - Mend

@everystate/examples 1.0.0 → 1.0.1

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 (152) hide show

package/everyState-core/010-decoupled-components/index.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!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 - EveryState</title>
+  <style>
+    .component { border: 2px solid #333; padding: 20px; margin: 10px 0; }
+  </style>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Decoupled Components</h1>
+  <p>Three independent "components" sharing state without knowing about each other.</p>
+  <div class="component">
+    <h2>Component A: Writer</h2>
+    <input type="text" id="messageInput" placeholder="Type a message...">
+    <button id="sendBtn">Send</button>
+  </div>
+  <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>
+  <div class="component">
+    <h2>Component C: Logger</h2>
+    <ul id="messageLog"></ul>
+  </div>
+  <hr>
+  <button id="runTests">Run Tests</button>
+  <pre id="testLog"></pre>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+    const store = createEveryState({ message: '', messageCount: 0 });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    // Component A: Writer
+    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
+    store.subscribe('message', (value) => {
+      document.getElementById('messageDisplay').textContent = value || '(nothing yet)';
+    });
+    store.subscribe('messageCount', (value) => {
+      document.getElementById('messageCount').textContent = value;
+    });
+    // Component C: Logger
+    store.subscribe('message', (value) => {
+      if (value) {
+        const li = document.createElement('li');
+        li.textContent = `[${new Date().toLocaleTimeString()}] ${value}`;
+        document.getElementById('messageLog').appendChild(li);
+      }
+    });
+    // Event Sequence Tests
+    document.getElementById('runTests').onclick = () => {
+      const results = [];
+      let pass = 0, fail = 0;
+      function assert(label, cond) {
+        if (cond) { pass++; results.push('  OK  ' + label); }
+        else { fail++; results.push('  FAIL  ' + label); }
+      }
+      store.set('message', 'test-msg');
+      assert('reader shows message', document.getElementById('messageDisplay').textContent === 'test-msg');
+      store.set('messageCount', 0);
+      store.set('messageCount', store.get('messageCount') + 1);
+      assert('count incremented', store.get('messageCount') === 1);
+      assert('count DOM updated', document.getElementById('messageCount').textContent === '1');
+      // Multiple subscribers on same path
+      let fires = 0;
+      const u1 = store.subscribe('message', () => fires++);
+      const u2 = store.subscribe('message', () => fires++);
+      store.set('message', 'multi');
+      assert('multiple subs both fire', fires === 2);
+      u1(); u2();
+      assert('logger has entries', document.getElementById('messageLog').querySelectorAll('li').length > 0);
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('message', '');
+      store.set('messageCount', 0);
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/011-async-patterns/README.md ADDED Viewed

@@ -0,0 +1,98 @@
+# 011 Async Patterns - Debouncing & Loading States
+Demonstrates how to handle async operations with EveryState.
+## 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
+**EveryState:** 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.

package/everyState-core/011-async-patterns/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>011 Async Patterns - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Async Patterns</h1>
+  <h2>Debounced Search</h2>
+  <input type="text" id="searchInput" placeholder="Type to search...">
+  <p id="searchStatus"></p>
+  <p><strong>Search result:</strong> <span id="searchResult">(type something)</span></p>
+  <hr>
+  <h2>Simulated API Call</h2>
+  <button id="fetchBtn">Fetch Data</button>
+  <p id="loadingStatus"></p>
+  <p><strong>Data:</strong> <span id="apiData">(not loaded)</span></p>
+  <hr>
+  <button id="runTests">Run Tests</button>
+  <pre id="testLog"></pre>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+    const store = createEveryState({
+      searchQuery: '', searchResult: '', isSearching: false,
+      apiData: null, isLoading: false
+    });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    let searchTimeout = null;
+    const performSearch = (query) => new Promise((resolve) => {
+      setTimeout(() => resolve(`Results for "${query}": Found ${query.length} items`), 500);
+    });
+    store.subscribe('searchQuery', async (value) => {
+      clearTimeout(searchTimeout);
+      if (!value) { store.set('searchResult', ''); store.set('isSearching', false); return; }
+      store.set('isSearching', true);
+      searchTimeout = setTimeout(async () => {
+        const result = await performSearch(value);
+        store.set('searchResult', result);
+        store.set('isSearching', false);
+      }, 300);
+    });
+    store.subscribe('isSearching', (value) => {
+      document.getElementById('searchStatus').textContent = value ? 'Searching...' : '';
+    });
+    store.subscribe('searchResult', (value) => {
+      document.getElementById('searchResult').textContent = value || '(type something)';
+    });
+    document.getElementById('searchInput').oninput = (e) => { store.set('searchQuery', e.target.value); };
+    const fetchData = () => new Promise((resolve) => {
+      setTimeout(() => resolve({ id: Math.floor(Math.random() * 1000), timestamp: new Date().toLocaleTimeString() }), 1000);
+    });
+    store.subscribe('isLoading', (value) => {
+      document.getElementById('loadingStatus').textContent = value ? 'Loading...' : '';
+      document.getElementById('fetchBtn').disabled = value;
+    });
+    store.subscribe('apiData', (value) => {
+      if (value) document.getElementById('apiData').textContent = `ID: ${value.id}, Time: ${value.timestamp}`;
+    });
+    document.getElementById('fetchBtn').onclick = async () => {
+      store.set('isLoading', true);
+      try {
+        const data = await fetchData();
+        store.set('apiData', data);
+      } catch (error) {
+        console.error('Fetch failed:', error);
+      } finally {
+        store.set('isLoading', false);
+      }
+    };
+    // Event Sequence Tests
+    document.getElementById('runTests').onclick = () => {
+      const results = [];
+      let pass = 0, fail = 0;
+      function assert(label, cond) {
+        if (cond) { pass++; results.push('  OK  ' + label); }
+        else { fail++; results.push('  FAIL  ' + label); }
+      }
+      // Sync tests (async search tested manually)
+      store.set('isLoading', true);
+      assert('isLoading set', store.get('isLoading') === true);
+      assert('button disabled while loading', document.getElementById('fetchBtn').disabled === true);
+      store.set('isLoading', false);
+      assert('button enabled after load', document.getElementById('fetchBtn').disabled === false);
+      store.set('searchQuery', 'test');
+      assert('searchQuery stored', store.get('searchQuery') === 'test');
+      assert('isSearching set', store.get('isSearching') === true);
+      // Wildcard test
+      let wildFired = false;
+      const unsub = store.subscribe('*', () => { wildFired = true; });
+      store.set('isLoading', true);
+      assert('global wildcard fires', wildFired);
+      unsub();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('searchQuery', '');
+      store.set('isLoading', false);
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>