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-view/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-view/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-view/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.

package/everyState-view/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-view/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view Examples</title>
+  <style>
+    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
+    a { display: block; padding: 0.5rem 0; color: #3b82f6; }
+    .note { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; }
+  </style>
+</head>
+<body>
+  <h1>@everystate/view Examples</h1>
+  <p>Interactive examples demonstrating <code>@everystate/view</code> - view-as-state:</p>
+  <ul>
+    <li><a href="001/counter/">001 - Counter</a></li>
+    <li><a href="002/datatable/">002 - DataTable</a></li>
+    <li><a href="003/todo/">003 - Todo (View-as-State)</a></li>
+    <li><a href="004/quotesFetcher/">004 - Quotes Fetcher</a></li>
+    <li><a href="004_01/quotesFetcher/">004_01 - Quotes Fetcher (Split Modules)</a></li>
+    <li><a href="004_02/quotesFetcher/">004_02 - Quotes Fetcher (Dot-Path Registry)</a></li>
+    <li><a href="004_03/quotesFetcher/">004_03 - Quotes Fetcher (Uniform Resource Architecture)</a></li>
+    <li><a href="004_04/quotesFetcher/">004_04 - Quote Explorer (URA + Archive, Deep Composition)</a></li>
+    <li><a href="004_05/quoteExplorer/">004_05 - Conditional Rendering & Parameterization (no showIf, no props)</a></li>
+    <li><a href="004_08_V2/">004_08_V2 - Quote Explorer Pro (transparent auto-intent)</a></li>
+    <li><a href="006/api-datatable/">006 - API DataTable + Perf</a></li>
+    <li><a href="007/apiUsers/">007 - API Users DataTable</a></li>
+  </ul>
+  <div class="note">
+    <strong>Note:</strong> These examples use <code>@everystate/view</code> which requires
+    <code>resolve.js</code> and <code>project.js</code> from the <code>everystate-view</code> package.
+    They must be served from the <code>everystateAll/</code> root directory.
+  </div>
+</body>
+</html>

package/index.js CHANGED Viewed

@@ -1,8 +1,3 @@
 /**
  * @everystate/examples
- *
- * EveryState wrapper for @uistate/examples
- * Re-exports all functionality from the underlying @uistate/examples package
  */
-export * from '@uistate/examples';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@everystate/examples",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "EveryState Examples: Example applications and patterns",
   "type": "module",
   "keywords": [
@@ -20,7 +20,5 @@
     "type": "git",
     "url": "https://github.com/ImsirovicAjdin/everystate-examples"
   },
-  "dependencies": {
-    "@uistate/examples": "^1.0.2"
-  }
+  "dependencies": {}
 }