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/006-list-rendering/index.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!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 - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/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>
+  <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({ items: [] });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    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('');
+      }
+    };
+    store.subscribe('items', renderList);
+    document.getElementById('addBtn').onclick = () => {
+      const input = document.getElementById('itemInput');
+      const value = input.value.trim();
+      if (value) {
+        store.set('items', [...store.get('items'), value]);
+        input.value = '';
+      }
+    };
+    document.getElementById('itemInput').onkeypress = (e) => {
+      if (e.key === 'Enter') document.getElementById('addBtn').click();
+    };
+    renderList();
+    // 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('items', []);
+      assert('starts empty', store.get('items').length === 0);
+      store.set('items', ['Milk']);
+      assert('add one item', store.get('items').length === 1);
+      assert('DOM has 1 li', document.getElementById('itemList').querySelectorAll('li').length === 1);
+      store.set('items', ['Milk', 'Bread', 'Eggs']);
+      assert('set 3 items', store.get('items').length === 3);
+      assert('DOM has 3 li', document.getElementById('itemList').querySelectorAll('li').length === 3);
+      let fired = false;
+      const unsub = store.subscribe('items', () => { fired = true; });
+      store.set('items', []);
+      assert('subscriber fires on clear', fired);
+      unsub();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/007-form-validation/README.md ADDED Viewed

@@ -0,0 +1,52 @@
+# 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 = createEveryState({
+  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
+**EveryState:** 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/everyState-core/007-form-validation/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>007 Form Validation - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/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>
+  <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({ email: '', password: '', emailValid: false, passwordValid: false });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    const validateEmail = (email) => email.includes('@') && email.includes('.');
+    const validatePassword = (password) => password.length >= 8;
+    const updateSubmitButton = () => {
+      document.getElementById('submitBtn').disabled = !(store.get('emailValid') && store.get('passwordValid'));
+    };
+    store.subscribe('email', (value) => {
+      const isValid = validateEmail(value);
+      store.set('emailValid', isValid);
+      document.getElementById('emailError').textContent = value && !isValid ? 'Invalid email address' : '';
+    });
+    store.subscribe('password', (value) => {
+      const isValid = validatePassword(value);
+      store.set('passwordValid', isValid);
+      document.getElementById('passwordError').textContent = value && !isValid ? 'Password must be at least 8 characters' : '';
+    });
+    store.subscribe('emailValid', updateSubmitButton);
+    store.subscribe('passwordValid', updateSubmitButton);
+    document.getElementById('email').oninput = (e) => { store.set('email', e.target.value); };
+    document.getElementById('password').oninput = (e) => { store.set('password', e.target.value); };
+    document.getElementById('submitBtn').onclick = () => {
+      document.getElementById('submitMessage').textContent = `Form submitted for ${store.get('email')}`;
+      document.getElementById('email').value = '';
+      document.getElementById('password').value = '';
+      store.set('email', '');
+      store.set('password', '');
+    };
+    // 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('email', 'bad');
+      assert('invalid email sets emailValid=false', store.get('emailValid') === false);
+      store.set('email', 'a@b.c');
+      assert('valid email sets emailValid=true', store.get('emailValid') === true);
+      store.set('password', 'short');
+      assert('short password invalid', store.get('passwordValid') === false);
+      assert('submit disabled when invalid', document.getElementById('submitBtn').disabled === true);
+      store.set('password', 'longpassword');
+      assert('long password valid', store.get('passwordValid') === true);
+      assert('submit enabled when both valid', document.getElementById('submitBtn').disabled === false);
+      // Cascading: email fires emailValid fires updateSubmitButton
+      const seq = [];
+      const u1 = store.subscribe('emailValid', () => seq.push('emailValid'));
+      store.set('email', 'x@y.z');
+      assert('cascading: email -> emailValid', seq.includes('emailValid'));
+      u1();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('email', '');
+      store.set('password', '');
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/008-undo-redo/README.md ADDED Viewed

@@ -0,0 +1,70 @@
+# 008 Undo/Redo - Time Travel Debugging
+Demonstrates how EveryState'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 EveryState 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
+**EveryState:** 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 EveryState 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/everyState-core/008-undo-redo/index.html ADDED Viewed

@@ -0,0 +1,133 @@
+<!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 - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/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">x2</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>
+  <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({ count: 0 });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    let history = [0];
+    let historyIndex = 0;
+    let isTimeTravel = false;
+    const updateUI = () => {
+      document.getElementById('count').textContent = store.get('count');
+      document.getElementById('undo').disabled = historyIndex === 0;
+      document.getElementById('redo').disabled = historyIndex === history.length - 1;
+      document.getElementById('historyInfo').textContent = `${historyIndex + 1} of ${history.length} states`;
+    };
+    store.subscribe('count', (value) => {
+      updateUI();
+      if (!isTimeTravel) {
+        history = history.slice(0, historyIndex + 1);
+        history.push(value);
+        historyIndex = history.length - 1;
+        updateUI();
+      }
+    });
+    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); };
+    document.getElementById('undo').onclick = () => {
+      if (historyIndex > 0) {
+        historyIndex--;
+        isTimeTravel = true;
+        store.set('count', history[historyIndex]);
+        isTimeTravel = false;
+        updateUI();
+      }
+    };
+    document.getElementById('redo').onclick = () => {
+      if (historyIndex < history.length - 1) {
+        historyIndex++;
+        isTimeTravel = true;
+        store.set('count', history[historyIndex]);
+        isTimeTravel = false;
+        updateUI();
+      }
+    };
+    updateUI();
+    // 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); }
+      }
+      // Reset
+      history = [0]; historyIndex = 0; isTimeTravel = false;
+      store.set('count', 0);
+      // clear history added by the set above
+      history = [0]; historyIndex = 0;
+      store.set('count', 1);
+      store.set('count', 2);
+      store.set('count', 3);
+      assert('history has 4 entries', history.length === 4);
+      assert('current is 3', store.get('count') === 3);
+      // Undo
+      historyIndex--;
+      isTimeTravel = true;
+      store.set('count', history[historyIndex]);
+      isTimeTravel = false;
+      assert('undo to 2', store.get('count') === 2);
+      // Redo
+      historyIndex++;
+      isTimeTravel = true;
+      store.set('count', history[historyIndex]);
+      isTimeTravel = false;
+      assert('redo to 3', store.get('count') === 3);
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      history = [0]; historyIndex = 0;
+      store.set('count', 0);
+      history = [0]; historyIndex = 0;
+      updateUI();
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/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 = createEveryState({ 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
+**EveryState:** 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/everyState-core/009-localStorage-side-effects/index.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!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 - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/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>
+  <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 STORAGE_KEY = 'everystate-counter';
+    const savedCount = localStorage.getItem(STORAGE_KEY);
+    const initialCount = savedCount !== null ? parseInt(savedCount, 10) : 0;
+    const store = createEveryState({ count: initialCount });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    store.subscribe('count', (value) => {
+      localStorage.setItem(STORAGE_KEY, value);
+      document.getElementById('count').textContent = value;
+    });
+    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); };
+    document.getElementById('count').textContent = initialCount;
+    // 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('count', 42);
+      assert('localStorage synced', localStorage.getItem(STORAGE_KEY) === '42');
+      store.set('count', 0);
+      assert('reset syncs localStorage', localStorage.getItem(STORAGE_KEY) === '0');
+      let fired = false;
+      const unsub = store.subscribe('count', () => { fired = true; });
+      store.set('count', 1);
+      assert('subscriber fires', fired);
+      unsub();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('count', 0);
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/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 = createEveryState({ 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
+**EveryState:** 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 the full EveryState 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.