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/003/todo/index.html ADDED Viewed

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: View-as-State Demo</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@everystate/core": "../../../../everystate-core/index.js",
+        "@everystate/view/resolve": "../../../../everystate-view/resolve.js",
+        "@everystate/view/project": "../../../../everystate-view/project.js"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <header>
+    <h1>@everystate/view: View-as-State</h1>
+    <p>The UI is not a function of state. The UI <strong>is</strong> state. Data + view in one store. DOMless testing. Surgical updates.</p>
+  </header>
+  <div class="layout">
+    <!-- Left: Live App -->
+    <div class="panel">
+      <h2>Live App (projected from store)</h2>
+      <div id="app"></div>
+    </div>
+    <!-- Right: State Inspector -->
+    <div class="panel">
+      <div class="tabs">
+        <button class="tab active" data-tab="data">Data State</button>
+        <button class="tab" data-tab="view">View State</button>
+        <button class="tab" data-tab="ssr">SSR Output</button>
+      </div>
+      <div id="dataView" class="state-inspector"></div>
+      <div id="viewView" class="state-inspector" style="display:none;"></div>
+      <div id="ssrView" class="ssr-output" style="display:none;"></div>
+    </div>
+  </div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { normalize, flatten, resolveTree, serialize, resetIdCounter } from '@everystate/view/resolve';
+    import { mount } from '@everystate/view/project';
+    // == 1. Create the store with data ==================================
+    const store = createEveryState({
+      todos: [
+        { id: 1, text: 'Learn EveryState', done: true },
+        { id: 2, text: 'Build @everystate/view', done: true },
+        { id: 3, text: 'Ship it', done: false }
+      ],
+      inputText: '',
+      nextId: 4
+    });
+    // == 2. Define the view as a tree spec ==============================
+    flatten({
+      tag: 'div',
+      class: 'todo-app',
+      children: [
+        { tag: 'h2', text: 'Todo ({todos.length})' },
+        {
+          tag: 'div',
+          class: 'input-row',
+          children: [
+            { tag: 'input', type: 'text', placeholder: 'Add a todo...', bind: 'inputText', onEnter: 'addTodo' },
+            { tag: 'button', text: 'Add', onClick: 'addTodo' }
+          ]
+        },
+        {
+          tag: 'ul',
+          class: 'todo-list',
+          forEach: 'todos',
+          as: 'todo',
+          template: {
+            tag: 'li',
+            classIf: { done: 'todo.done' },
+            children: [
+              { tag: 'button', class: 'toggle', text: '\u2713', onClick: 'toggleTodo(todo.id)' },
+              { tag: 'span', text: 'todo.text', onDblClick: 'editTodo(todo.id)' },
+              { tag: 'button', text: '✕', onClick: 'deleteTodo(todo.id)' }
+            ]
+          }
+        },
+        {
+          tag: 'div',
+          class: 'stats',
+          children: [
+            { tag: 'span', text: 'Total: <strong>{todos.length}</strong>' },
+            { tag: 'span', text: 'Done: <strong>{todos.filter(t => t.done).length}</strong>' }
+          ]
+        }
+      ]
+    }, store, 'view');
+    // == 3. Define intent handlers ======================================
+    const handlers = {
+      addTodo() {
+        const text = store.get('inputText');
+        if (!text || !text.trim()) return;
+        const todos = store.get('todos') || [];
+        const id = store.get('nextId');
+        store.set('todos', [...todos, { id, text: text.trim(), done: false }]);
+        store.set('nextId', id + 1);
+        store.set('inputText', '');
+      },
+      toggleTodo(id) {
+        const todos = store.get('todos') || [];
+        store.set('todos', todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
+      },
+      deleteTodo(id) {
+        const todos = store.get('todos') || [];
+        store.set('todos', todos.filter(t => t.id !== id));
+      },
+      editTodo(id, e) {
+        const span = e.target;
+        const li = span.closest('li');
+        if (!li || li.querySelector('.edit-input')) return;
+        const input = document.createElement('input');
+        input.className = 'edit-input';
+        input.value = span.textContent;
+        span.replaceWith(input);
+        input.focus();
+        let saved = false;
+        function save() {
+          if (saved) return;
+          saved = true;
+          const text = input.value.trim();
+          if (text) {
+            const todos = store.get('todos') || [];
+            store.set('todos', todos.map(t => t.id === id ? { ...t, text } : t));
+          }
+        }
+        input.addEventListener('blur', save);
+        input.addEventListener('keydown', (ev) => {
+          if (ev.key === 'Enter') { ev.preventDefault(); save(); }
+          if (ev.key === 'Escape') { saved = true; store.set('todos', store.get('todos')); }
+        });
+      }
+    };
+    // == 4. Mount (project view state -> DOM) ============================
+    const container = document.getElementById('app');
+    const cleanup = mount(store, 'view', container, handlers);
+    // == 5. State inspector ============================================-
+    const dataView = document.getElementById('dataView');
+    const viewView = document.getElementById('viewView');
+    const ssrView = document.getElementById('ssrView');
+    function syntaxHighlight(json) {
+      return json
+        .replace(/(".*?")\s*:/g, '<span class="state-key">$1</span>:')
+        .replace(/: (".*?")/g, ': <span class="state-string">$1</span>')
+        .replace(/: (\d+)/g, ': <span class="state-number">$1</span>')
+        .replace(/: (true|false)/g, ': <span class="state-bool">$1</span>')
+        .replace(/: (null)/g, ': <span class="state-null">$1</span>')
+        .replace(/([{}[\]])/g, '<span class="state-bracket">$1</span>');
+    }
+    function updateInspector() {
+      // Data state
+      const data = {
+        todos: store.get('todos'),
+        inputText: store.get('inputText'),
+        nextId: store.get('nextId')
+      };
+      dataView.innerHTML = syntaxHighlight(JSON.stringify(data, null, 2));
+      // View state
+      const viewState = {
+        rootId: store.get('view.rootId'),
+        nodes: store.get('view.nodes')
+      };
+      viewView.innerHTML = syntaxHighlight(JSON.stringify(viewState, null, 2));
+      // SSR
+      try {
+        const nodes = store.get('view.nodes');
+        const rootId = store.get('view.rootId');
+        if (nodes && rootId) {
+          const resolved = resolveTree(nodes, rootId, (p) => store.get(p));
+          ssrView.textContent = serialize(resolved);
+        }
+      } catch (e) {
+        ssrView.textContent = 'Error: ' + e.message;
+      }
+    }
+    updateInspector();
+    store.subscribe('*', () => setTimeout(updateInspector, 10));
+    // == Tabs ==
+    document.querySelectorAll('.tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const which = tab.dataset.tab;
+        dataView.style.display = which === 'data' ? '' : 'none';
+        viewView.style.display = which === 'view' ? '' : 'none';
+        ssrView.style.display = which === 'ssr' ? '' : 'none';
+      });
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,124 @@
+body {
+  font-family: system-ui, sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100vh;
+  margin: 0;
+  padding: 3rem 1rem;
+}
+.quotes-app {
+  width: 100%;
+  max-width: 560px;
+}
+.quotes-app h1 {
+  color: #38bdf8;
+  font-size: 1.6rem;
+  margin: 0 0 0.25rem;
+}
+.subtitle {
+  color: #64748b;
+  font-size: 0.8rem;
+  margin: 0 0 1.5rem;
+}
+.card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  min-height: 140px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.quote-text {
+  font-size: 1.15rem;
+  line-height: 1.6;
+  color: #f1f5f9;
+  margin: 0 0 0.5rem;
+  font-style: italic;
+}
+.quote-text::before { content: '\201C'; }
+.quote-text::after { content: '\201D'; }
+.quote-author {
+  color: #38bdf8;
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin: 0 0 1rem;
+}
+.quote-author:not(:empty)::before {
+  content: '- ';
+  color: #64748b;
+}
+.message {
+  color: #94a3b8;
+  font-size: 0.85rem;
+  margin: 0 0 1rem;
+  min-height: 1.2em;
+}
+.card button {
+  align-self: flex-start;
+  font-size: 0.9rem;
+  padding: 0.6rem 1.5rem;
+  background: #38bdf8;
+  color: #0f172a;
+  border: none;
+  border-radius: 8px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.card button:hover {
+  background: #7dd3fc;
+}
+.quotes-app h2 {
+  color: #94a3b8;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0 0 0.75rem;
+}
+.history {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.history li {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.hist-quote {
+  color: #cbd5e1;
+  font-size: 0.85rem;
+  font-style: italic;
+}
+.hist-author {
+  color: #38bdf8;
+  font-size: 0.8rem;
+  font-weight: 600;
+}

package/everyState-view/004/quotesFetcher/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>@everystate/view: Quotes Fetcher</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@everystate/core": "../../../../everystate-core/index.js",
+        "@everystate/core/queryClient": "../../../../everystate-core/queryClient.js",
+        "@everystate/view/resolve": "../../../../everystate-view/resolve.js",
+        "@everystate/view/project": "../../../../everystate-view/project.js"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { createQueryClient } from '@everystate/core/queryClient';
+    import { flatten } from '@everystate/view/resolve';
+    import { mount } from '@everystate/view/project';
+    // 1. Store + QueryClient
+    const store = createEveryState({
+      quote: '',
+      author: '',
+      history: [],
+      message: 'Click the button to fetch a quote'
+    });
+    const qc = createQueryClient(store);
+    // Fetch and store a quote
+    async function fetchQuote() {
+      store.set('message', 'Fetching...');
+      try {
+        const data = await qc.query('quote', async (signal) => {
+          const res = await fetch('https://dummyjson.com/quotes/random', { signal });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          return res.json();
+        });
+        store.set('quote', data.quote);
+        store.set('author', data.author);
+        store.set('message', '');
+        // Prepend to history
+        const history = store.get('history') || [];
+        store.set('history', [{ quote: data.quote, author: data.author }, ...history].slice(0, 10));
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          store.set('message', 'Error: ' + err.message);
+        }
+      }
+    }
+    // 2. View
+    flatten({
+      tag: 'div',
+      class: 'quotes-app',
+      children: [
+        { tag: 'h1', text: '💬 Quote Fetcher' },
+        { tag: 'p', class: 'subtitle', text: 'Powered by setAsync + QueryClient' },
+        {
+          tag: 'div',
+          class: 'card',
+          children: [
+            { tag: 'p', class: 'quote-text', text: '{quote}' },
+            { tag: 'p', class: 'quote-author', text: '{author}' },
+            { tag: 'p', class: 'message', text: '{message}' },
+            { tag: 'button', text: 'New Quote', onClick: 'fetchQuote' }
+          ]
+        },
+        { tag: 'h2', text: 'History ({history.length})' },
+        {
+          tag: 'ul',
+          class: 'history',
+          forEach: 'history',
+          as: 'item',
+          template: {
+            tag: 'li',
+            children: [
+              { tag: 'span', class: 'hist-quote', text: 'item.quote' },
+              { tag: 'span', class: 'hist-author', text: 'item.author' }
+            ]
+          }
+        }
+      ]
+    }, store, 'view');
+    // 3. Handlers
+    const handlers = {
+      fetchQuote() {
+        fetchQuote();
+      }
+    };
+    // 4. Mount
+    mount(store, 'view', document.getElementById('app'), handlers);
+    // Fetch one on load
+    fetchQuote();
+  </script>
+</body>
+</html>

package/everyState-view/004_01/quotesFetcher/app.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { flatten } from '@everystate/view/resolve';
+import { mount } from '@everystate/view/project';
+import { store, fetchQuote } from './store.js';
+import { quoteCard } from './components/quoteCard.js';
+import { historyList } from './components/historyList.js';
+import { appHeader } from './components/appHeader.js';
+import { historyHeading } from './components/historyHeading.js';
+// 1. View - compose spec tree from imported fragments
+flatten({
+  tag: 'div',
+  class: 'quotes-app',
+  children: [
+    appHeader,
+    quoteCard,
+    historyHeading,
+    historyList,
+  ]
+}, store, 'view');
+// 2. Handlers
+const handlers = {
+  fetchQuote() {
+    fetchQuote();
+  }
+};
+// 3. Mount
+mount(store, 'view', document.getElementById('app'), handlers);
+// 4. Fetch one on load
+fetchQuote();

package/everyState-view/004_01/quotesFetcher/components/appHeader/appSubtitle.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // App subtitle
2	+ export const appSubtitle = { tag: 'p', class: 'subtitle', text: 'Powered by setAsync + QueryClient' };

package/everyState-view/004_01/quotesFetcher/components/appHeader/appTitle.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // App title
2	+ export const appTitle = { tag: 'h1', text: '💬 Quote Fetcher' };

package/everyState-view/004_01/quotesFetcher/components/appHeader.js ADDED Viewed

@@ -0,0 +1,9 @@
+// App header - title and subtitle
+import { appTitle } from './appHeader/appTitle.js';
+import { appSubtitle } from './appHeader/appSubtitle.js';
+export const appHeader = {
+  tag: 'div',
+  class: 'app-header',
+  children: [appTitle, appSubtitle]
+};

package/everyState-view/004_01/quotesFetcher/components/historyHeading.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // History section heading with dynamic count
2	+ export const historyHeading = { tag: 'h2', text: 'History ({history.length})' };

package/everyState-view/004_01/quotesFetcher/components/historyList/histAuthor.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // History item author name
2	+ export const histAuthor = { tag: 'span', class: 'hist-author', text: 'item.author' };

package/everyState-view/004_01/quotesFetcher/components/historyList/histQuote.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // History item quote text
2	+ export const histQuote = { tag: 'span', class: 'hist-quote', text: 'item.quote' };

package/everyState-view/004_01/quotesFetcher/components/historyList.js ADDED Viewed

@@ -0,0 +1,14 @@
+// History list - renders the last 10 fetched quotes
+import { histQuote } from './historyList/histQuote.js';
+import { histAuthor } from './historyList/histAuthor.js';
+export const historyList = {
+  tag: 'ul',
+  class: 'history',
+  forEach: 'history',
+  as: 'item',
+  template: {
+    tag: 'li',
+    children: [histQuote, histAuthor]
+  }
+};

package/everyState-view/004_01/quotesFetcher/components/quoteCard/fetchButton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Fetch new quote button
2	+ export const fetchButton = { tag: 'button', text: 'New Quote', onClick: 'fetchQuote' };

package/everyState-view/004_01/quotesFetcher/components/quoteCard/quoteAuthor.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Quote author display
2	+ export const quoteAuthor = { tag: 'p', class: 'quote-author', text: '{author}' };

package/everyState-view/004_01/quotesFetcher/components/quoteCard/quoteMessage.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Status message display
2	+ export const quoteMessage = { tag: 'p', class: 'message', text: '{message}' };

package/everyState-view/004_01/quotesFetcher/components/quoteCard/quoteText.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ // Quote text display
2	+ export const quoteText = { tag: 'p', class: 'quote-text', text: '{quote}' };

package/everyState-view/004_01/quotesFetcher/components/quoteCard.js ADDED Viewed

@@ -0,0 +1,11 @@
+// Quote card - displays current quote, author, status message, and fetch button
+import { quoteText } from './quoteCard/quoteText.js';
+import { quoteAuthor } from './quoteCard/quoteAuthor.js';
+import { quoteMessage } from './quoteCard/quoteMessage.js';
+import { fetchButton } from './quoteCard/fetchButton.js';
+export const quoteCard = {
+  tag: 'div',
+  class: 'card',
+  children: [quoteText, quoteAuthor, quoteMessage, fetchButton]
+};