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/README.md CHANGED Viewed

@@ -24,6 +24,21 @@ npm install @everystate/examples
 Each example is a standalone HTML file that can be opened in a browser or served locally.
+## Ecosystem
+| Package | Description | License |
+|---|---|---|
+| [@everystate/aliases](https://www.npmjs.com/package/@everystate/aliases) | Ergonomic single-character and short-name DOM aliases for vanilla JS | MIT |
+| [@everystate/core](https://www.npmjs.com/package/@everystate/core) | Path-based state management with wildcard subscriptions and async support. Core state engine (you are here). | MIT |
+| [@everystate/css](https://www.npmjs.com/package/@everystate/css) | Reactive CSSOM engine: design tokens, typed validation, WCAG enforcement, all via path-based state | MIT |
+| [@everystate/examples](https://www.npmjs.com/package/@everystate/examples) | Example applications and patterns | MIT |
+| [@everystate/perf](https://www.npmjs.com/package/@everystate/perf) | Performance monitoring overlay | MIT |
+| [@everystate/react](https://www.npmjs.com/package/@everystate/react) | React hooks adapter: `usePath`, `useIntent`, `useAsync` hooks and `EveryStateProvider` | MIT |
+| [@everystate/renderer](https://www.npmjs.com/package/@everystate/renderer) | Direct-binding reactive renderer: `bind-*`, `set`, `each` attributes. Zero build step | Proprietary |
+| [@everystate/router](https://www.npmjs.com/package/@everystate/router) | SPA routing as state | MIT |
+| [@everystate/test](https://www.npmjs.com/package/@everystate/test) | Event-sequence testing for EveryState stores. Zero dependency. | Proprietary |
+| [@everystate/view](https://www.npmjs.com/package/@everystate/view) | State-driven view: DOMless resolve + surgical DOM projector. View tree as first-class state | MIT |
 ## License
 MIT © Ajdin Imsirovic

package/everyState-core/001-counter/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EveryState Example
+The simplest possible EveryState example: a counter with one button.
+## What's Here
+- `everyState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEveryState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEveryState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/everyState-core/001-counter/index.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>001 Counter - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/aliases": "../../../everystate-aliases/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+  <hr>
+  <button id="runTests">Run Tests</button>
+  <pre id="testLog"></pre>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { $ } from '@everystate/aliases';
+    import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+    // Create store
+    const store = createEveryState({ count: 0 });
+    // Attach perf monitor
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    // Subscribe to count changes
+    store.subscribe('count', (value) => {
+      $('count').textContent = value;
+    });
+    // Increment on button click
+    $('increment').onclick = () => {
+      const current = store.get('count');
+      store.set('count', current + 1);
+    };
+    // Event Sequence Tests
+    $('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', 0);
+      assert('initial count is 0', store.get('count') === 0);
+      store.set('count', 5);
+      assert('set count to 5', store.get('count') === 5);
+      assert('DOM updated', $('count').textContent === '5');
+      let fired = false;
+      const unsub = store.subscribe('count', () => { fired = true; });
+      store.set('count', 6);
+      assert('subscriber fires on set', fired);
+      unsub();
+      fired = false;
+      store.set('count', 7);
+      assert('unsubscribe stops fire', !fired);
+      // Perf recorded events
+      const r = perf.report();
+      assert('perf tracked sets', r.summary.totalSets > 0);
+      store.set('count', 0);
+      $('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/002-counter-improved/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EveryState Example
+The simplest possible EveryState example: a counter with one button.
+## What's Here
+- `everyState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEveryState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEveryState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/everyState-core/002-counter-improved/index.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>002 Counter Improved - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Counter: <span id="count">0</span></h1>
+  <button id="increment">+</button>
+  <button id="decrement">-</button>
+  <button id="double">x2</button>
+  <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);
+    store.subscribe('count', (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('double').onclick = () => {
+      store.set('count', store.get('count') * 2);
+    };
+    // 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', 0);
+      assert('reset to 0', store.get('count') === 0);
+      store.set('count', store.get('count') + 1);
+      assert('increment to 1', store.get('count') === 1);
+      store.set('count', store.get('count') - 1);
+      assert('decrement back to 0', store.get('count') === 0);
+      store.set('count', 3);
+      store.set('count', store.get('count') * 2);
+      assert('double 3 = 6', store.get('count') === 6);
+      const seq = [];
+      const unsub = store.subscribe('count', (v) => seq.push(v));
+      store.set('count', 10);
+      store.set('count', 20);
+      assert('subscriber sequence', seq[0] === 10 && seq[1] === 20);
+      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/003-input-reactive/README.md ADDED Viewed

@@ -0,0 +1,44 @@
+# 001 Counter - Minimal EveryState Example
+The simplest possible EveryState example: a counter with one button.
+## What's Here
+- `everyState.js` - ~60 lines of reactive state management
+- `index.html` - Counter UI with subscription
+## How It Works
+```javascript
+// 1. Create store
+const store = createEveryState({ count: 0 });
+// 2. Subscribe to changes
+store.subscribe('count', ({ value }) => {
+  document.getElementById('count').textContent = value;
+});
+// 3. Update state
+store.set('count', store.get('count') + 1);
+```
+That's it. No framework, no build step, just reactive data.
+## Run It
+Open `index.html` in a browser. Click the `+` button to increment.
+## Key Concepts
+- **`createEveryState(initial)`** - Creates a reactive store
+- **`store.get(path)`** - Read state at dot-path
+- **`store.set(path, value)`** - Write state and notify subscribers
+- **`store.subscribe(path, handler)`** - React to changes
+## Next Steps
+See `examples/009-todo-app-with-eventTest/` for a full application with:
+- Router
+- Bridges (intent → domain pattern)
+- Tests with type generation
+- Dev tools

package/everyState-core/003-input-reactive/index.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>003 Input Reactive - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Type something:</h1>
+  <input type="text" id="textInput" placeholder="Start typing...">
+  <p id="output"></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({ text: '' });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    store.subscribe('text', (value) => {
+      document.getElementById('output').textContent = value;
+    });
+    document.getElementById('textInput').oninput = (e) => {
+      store.set('text', e.target.value);
+    };
+    // 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('text', 'hello');
+      assert('set text', store.get('text') === 'hello');
+      assert('DOM updated', document.getElementById('output').textContent === 'hello');
+      store.set('text', '');
+      assert('clear text', store.get('text') === '');
+      const seq = [];
+      const unsub = store.subscribe('text', (v) => seq.push(v));
+      store.set('text', 'a');
+      store.set('text', 'ab');
+      assert('subscriber sequence', seq[0] === 'a' && seq[1] === 'ab');
+      unsub();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('text', '');
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/004-computed-state/README.md ADDED Viewed

@@ -0,0 +1,45 @@
+# 004 Computed State - Derived Values
+Shows how trivial it is to create computed/derived state in EveryState.
+## What's Here
+- Two inputs: `firstName` and `lastName`
+- Two computed values: `fullName` and `charCount`
+- **Zero framework magic** - just functions
+## How It Works
+```javascript
+// 1. Define a function that computes derived state
+const updateFullName = () => {
+  const first = store.get('firstName');
+  const last = store.get('lastName');
+  const fullName = `${first} ${last}`.trim();
+  document.getElementById('fullName').textContent = fullName;
+};
+// 2. Subscribe to wildcard to catch all changes
+store.subscribe('*', () => {
+  updateFullName();
+  updateCharCount();
+});
+// 3. That's it. No special API needed.
+```
+## Key Insight
+**Computed state is just a function.**
+Other frameworks need:
+- Vue: `computed()`
+- React: `useMemo()`
+- Svelte: `$:` reactive declarations
+- MobX: `@computed` decorators
+**EveryState:** Just write a function and call it when state changes.
+## Run It
+Open `index.html` in a browser. Type in the inputs and watch the computed values update.

package/everyState-core/004-computed-state/index.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>004 Computed State - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/index.js"
+    }}
+  </script>
+</head>
+<body>
+  <h1>Computed State</h1>
+  <label>First Name: <input type="text" id="firstName" placeholder="Abraham"></label><br>
+  <label>Last Name: <input type="text" id="lastName" placeholder="Lincoln"></label><br>
+  <p><strong>Full Name:</strong> <span id="fullName"></span></p>
+  <p><strong>Character Count:</strong> <span id="charCount">0</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({ firstName: '', lastName: '' });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    const updateFullName = () => {
+      const first = store.get('firstName');
+      const last = store.get('lastName');
+      document.getElementById('fullName').textContent = `${first} ${last}`.trim() || '(empty)';
+    };
+    const updateCharCount = () => {
+      const first = store.get('firstName');
+      const last = store.get('lastName');
+      document.getElementById('charCount').textContent = (first + last).length;
+    };
+    store.subscribe('*', () => { updateFullName(); updateCharCount(); });
+    document.getElementById('firstName').oninput = (e) => { store.set('firstName', e.target.value); };
+    document.getElementById('lastName').oninput = (e) => { store.set('lastName', e.target.value); };
+    updateFullName();
+    updateCharCount();
+    // 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('firstName', 'Alice');
+      store.set('lastName', 'Smith');
+      assert('fullName computed', document.getElementById('fullName').textContent === 'Alice Smith');
+      assert('charCount computed', document.getElementById('charCount').textContent === '10');
+      // Global wildcard fires on any path
+      let globalFired = 0;
+      const unsub = store.subscribe('*', () => globalFired++);
+      store.set('firstName', 'Bob');
+      assert('global wildcard fires', globalFired >= 1);
+      unsub();
+      assert('perf tracked', perf.report().summary.totalSets > 0);
+      store.set('firstName', '');
+      store.set('lastName', '');
+      document.getElementById('testLog').textContent = results.join('\n') + `\n\n${pass} passed, ${fail} failed`;
+    };
+  </script>
+</body>
+</html>

package/everyState-core/005-conditional-rendering/README.md ADDED Viewed

@@ -0,0 +1,42 @@
+# 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 = createEveryState({ 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}`
+**EveryState:** 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/everyState-core/005-conditional-rendering/index.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!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 - EveryState</title>
+  <script type="importmap">
+    { "imports": {
+      "@everystate/core": "../../../everystate-core/index.js",
+      "@everystate/perf": "../../../everystate-perf/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>
+  <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({ isVisible: false });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    store.subscribe('isVisible', (value) => {
+      document.getElementById('message').style.display = value ? 'block' : 'none';
+    });
+    document.getElementById('toggle').onchange = (e) => {
+      store.set('isVisible', e.target.checked);
+    };
+    // 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); }
+      }
+      assert('initially hidden', store.get('isVisible') === false);
+      assert('DOM hidden', document.getElementById('message').style.display === 'none');
+      store.set('isVisible', true);
+      assert('set visible', store.get('isVisible') === true);
+      assert('DOM shown', document.getElementById('message').style.display === 'block');
+      store.set('isVisible', false);
+      assert('set hidden again', document.getElementById('message').style.display === 'none');
+      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/006-list-rendering/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# 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 = createEveryState({ 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}`
+**EveryState:** 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).