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/006/api-datatable/index.html ADDED Viewed

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: API DataTable Demo</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@everystate/core": "../../../../everystate-core/index.js",
+        "@everystate/core/queryClient": "../../../../everystate-core/queryClient.js",
+        "@everystate/perf": "../../../../everystate-perf/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>
+  <div id="app"></div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { createQueryClient } from '@everystate/core/queryClient';
+    import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+    import { flatten } from '@everystate/view/resolve';
+    import { mount } from '@everystate/view/project';
+    // 1. Store + QueryClient + Perf
+    const store = createEveryState({
+      users: [],
+      loading: false,
+      error: '',
+      sortBy: 'name',
+      sortDir: 'asc',
+      searchTerm: '',
+      currentPage: 1,
+      usersPerPage: 5,
+      loadingStatus: '',
+      filteredCount: 0,
+      totalPages: 1,
+      paginatedUsers: []
+    });
+    const qc = createQueryClient(store);
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    // Fetch users from API
+    async function fetchUsers() {
+      store.set('loading', true);
+      store.set('error', '');
+      store.set('loadingStatus', 'Loading...');
+      try {
+        const data = await qc.query('users', async (signal) => {
+          const res = await fetch('https://jsonplaceholder.typicode.com/users', { signal });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          return res.json();
+        });
+        // Store users as a simple array (like todo example)
+        const users = data.map(user => ({
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          company: user.company.name,
+          phone: user.phone,
+          website: user.website
+        }));
+        store.set('users', users);
+        updateComputedValues();
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          store.set('error', 'Failed to fetch users: ' + err.message);
+          store.set('loadingStatus', 'Failed to fetch users: ' + err.message);
+        }
+      } finally {
+        store.set('loading', false);
+        if (!store.get('error')) {
+          store.set('loadingStatus', '');
+        }
+      }
+    }
+    // Simple filtering and sorting (like todo example)
+    function getFilteredUsers() {
+      const users = store.get('users') || [];
+      const searchTerm = store.get('searchTerm') || '';
+      const sortBy = store.get('sortBy');
+      const sortDir = store.get('sortDir');
+      // Filter
+      let filtered = users;
+      if (searchTerm) {
+        filtered = users.filter(user =>
+          user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          user.company.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+      }
+      // Sort
+      filtered = [...filtered].sort((a, b) => {
+        const va = a[sortBy], vb = b[sortBy];
+        if (typeof va === 'number') return sortDir === 'asc' ? va - vb : vb - va;
+        return sortDir === 'asc'
+          ? String(va).localeCompare(String(vb))
+          : String(vb).localeCompare(String(va));
+      });
+      return filtered;
+    }
+    function getPaginatedUsers() {
+      const filtered = getFilteredUsers();
+      const currentPage = store.get('currentPage');
+      const usersPerPage = store.get('usersPerPage');
+      const start = (currentPage - 1) * usersPerPage;
+      return filtered.slice(start, start + usersPerPage);
+    }
+    function getTotalPages() {
+      const filtered = getFilteredUsers();
+      const usersPerPage = store.get('usersPerPage');
+      return Math.ceil(filtered.length / usersPerPage) || 1;
+    }
+    // Update computed values when relevant state changes
+    function updateComputedValues() {
+      const filtered = getFilteredUsers();
+      const paginated = getPaginatedUsers();
+      store.set('filteredCount', filtered.length);
+      store.set('totalPages', getTotalPages());
+      store.set('paginatedUsers', paginated);
+    }
+    // Subscribe to changes - let EveryState's reactivity do the work
+    store.subscribe('users', updateComputedValues);
+    store.subscribe('searchTerm', () => {
+      store.set('currentPage', 1); // Reset to first page on search
+      updateComputedValues();
+    });
+    store.subscribe('sortBy', updateComputedValues);
+    store.subscribe('sortDir', updateComputedValues);
+    store.subscribe('currentPage', updateComputedValues);
+    // 2. View
+    flatten({
+      tag: 'div',
+      class: 'api-datatable',
+      children: [
+        { tag: 'h1', text: '📊 API DataTable + 🚀 Performance Monitor' },
+        { tag: 'p', class: 'subtitle', text: 'Real-time data from JSONPlaceholder API with performance tracking' },
+        // Controls
+        {
+          tag: 'div',
+          class: 'controls',
+          children: [
+            {
+              tag: 'div',
+              class: 'search-box',
+              children: [
+                { tag: 'input',
+                  type: 'text',
+                  placeholder: 'Search users...',
+                  bind: 'searchTerm'
+                }
+              ]
+            },
+            {
+              tag: 'div',
+              class: 'actions',
+              children: [
+                { tag: 'button', text: '🔄 Refresh', onClick: 'fetchUsers', disabled: '{loading}' },
+                { tag: 'span', class: 'status', text: '{loadingStatus}' }
+              ]
+            }
+          ]
+        },
+        // Stats
+        {
+          tag: 'div',
+          class: 'stats',
+          children: [
+            { tag: 'span', text: 'Total: {users.length} users' },
+            { tag: 'span', text: 'Filtered: {filteredCount} results' },
+            { tag: 'span', text: 'Page {currentPage} of {totalPages}' }
+          ]
+        },
+        // Table
+        {
+          tag: 'div',
+          class: 'table-container',
+          children: [
+            {
+              tag: 'table',
+              children: [
+                {
+                  tag: 'thead',
+                  children: [{
+                    tag: 'tr',
+                    children: [
+                      { tag: 'th', text: 'Name ↕', onClick: 'sortByCol(name)' },
+                      { tag: 'th', text: 'Email ↕', onClick: 'sortByCol(email)' },
+                      { tag: 'th', text: 'Company ↕', onClick: 'sortByCol(company)' },
+                      { tag: 'th', text: 'Phone ↕', onClick: 'sortByCol(phone)' },
+                      { tag: 'th', text: 'Website ↕', onClick: 'sortByCol(website)' }
+                    ]
+                  }]
+                },
+                {
+                  tag: 'tbody',
+                  forEach: 'paginatedUsers',
+                  as: 'user',
+                  template: {
+                    tag: 'tr',
+                    children: [
+                      { tag: 'td', text: 'user.name' },
+                      { tag: 'td', text: 'user.email' },
+                      { tag: 'td', text: 'user.company' },
+                      { tag: 'td', text: 'user.phone' },
+                      {
+                        tag: 'td',
+                        children: [
+                          {
+                            tag: 'a',
+                            href: 'http://{user.website}',
+                            target: '_blank',
+                            text: 'user.website'
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        // Pagination
+        {
+          tag: 'div',
+          class: 'pagination',
+          children: [
+            {
+              tag: 'button',
+              text: '← Previous',
+              onClick: 'prevPage',
+              disabled: '{currentPage === 1}'
+            },
+            {
+              tag: 'span',
+              class: 'page-info',
+              text: '{currentPage} / {totalPages}'
+            },
+            {
+              tag: 'button',
+              text: 'Next →',
+              onClick: 'nextPage',
+              disabled: '{currentPage >= totalPages}'
+            }
+          ]
+        },
+        // Performance Comparison
+        {
+          tag: 'div',
+          class: 'performance-section',
+          children: [
+            { tag: 'h3', text: '⚡ Performance Comparison' },
+            { tag: 'p', class: 'perf-note', text: 'EveryState vanilla JS: No bundler, no virtual DOM, direct state-to-DOM rendering' },
+            {
+              tag: 'div',
+              class: 'perf-stats',
+              children: [
+                { tag: 'div', class: 'perf-item', children: [
+                  { tag: 'strong', text: 'Bundle Size:' },
+                  { tag: 'span', text: '~0KB (vanilla JS)' }
+                ]},
+                { tag: 'div', class: 'perf-item', children: [
+                  { tag: 'strong', text: 'Build Step:' },
+                  { tag: 'span', text: 'None' }
+                ]},
+                { tag: 'div', class: 'perf-item', children: [
+                  { tag: 'strong', text: 'Virtual DOM:' },
+                  { tag: 'span', text: 'No (direct DOM)' }
+                ]},
+                { tag: 'div', class: 'perf-item', children: [
+                  { tag: 'strong', text: 'Testing:' },
+                  { tag: 'span', text: 'DOMless (state-only)' }
+                ]},
+                { tag: 'div', class: 'perf-item', children: [
+                  { tag: 'strong', text: 'Hot Reload:' },
+                  { tag: 'span', text: 'Instant (no compilation)' }
+                ]}
+              ]
+            },
+            {
+              tag: 'div',
+              class: 'perf-display',
+              children: [
+                { tag: 'h4', text: 'Performance Stats' },
+                { tag: 'div', class: 'perf-note', text: 'Performance tracking via @everystate/perf overlay (bottom-right corner). Download JSON reports for analysis.' }
+              ]
+            }
+          ]
+        }
+      ]
+    }, store, 'view');
+    // 3. Handlers
+    const handlers = {
+      fetchUsers() {
+        fetchUsers();
+      },
+      sortByCol(col) {
+        if (!col || typeof col !== 'string') return;
+        const current = store.get('sortBy');
+        if (current === col) {
+          store.set('sortDir', store.get('sortDir') === 'asc' ? 'desc' : 'asc');
+        } else {
+          store.set('sortBy', col);
+          store.set('sortDir', 'asc');
+        }
+      },
+      prevPage() {
+        const current = store.get('currentPage');
+        if (current > 1) {
+          store.set('currentPage', current - 1);
+        }
+      },
+      nextPage() {
+        const current = store.get('currentPage');
+        const totalPages = getTotalPages();
+        if (current < totalPages) {
+          store.set('currentPage', current + 1);
+        }
+      }
+    };
+    // 4. Mount
+    mount(store, 'view', document.getElementById('app'), handlers);
+    // 5. Initial data fetch
+    fetchUsers();
+  </script>
+</body>
+</html>

package/everyState-view/007/apiUsers/index.html ADDED Viewed

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@everystate/view: API Users DataTable</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@everystate/core": "../../../../everystate-core/index.js",
+        "@everystate/perf": "../../../../everystate-perf/index.js",
+        "@everystate/view/resolve": "../../../../everystate-view/resolve.js",
+        "@everystate/view/project": "../../../../everystate-view/project.js"
+      }
+    }
+  </script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; color: #1e293b; padding: 2rem; }
+    h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
+    .subtitle { color: #64748b; margin-bottom: 1.5rem; font-size: 0.9rem; }
+    .toolbar { display: flex; gap: 0.75rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
+    .toolbar input { padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.9rem; width: 250px; }
+    .toolbar input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
+    .toolbar button { padding: 0.5rem 1rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; background: #fff; cursor: pointer; font-size: 0.9rem; transition: background 0.15s; }
+    .toolbar button:hover { background: #f1f5f9; }
+    .toolbar .active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+    .status { padding: 0.5rem 0.75rem; background: #e0f2fe; border-radius: 0.5rem; font-size: 0.85rem; color: #0369a1; }
+    .status.error { background: #fef2f2; color: #dc2626; }
+    table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+    th { background: #f1f5f9; padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.85rem; color: #475569; cursor: pointer; user-select: none; border-bottom: 2px solid #e2e8f0; }
+    th:hover { background: #e2e8f0; }
+    th .sort-indicator { margin-left: 0.35rem; font-size: 0.7rem; }
+    td { padding: 0.65rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: 0.9rem; }
+    tr:hover td { background: #f8fafc; }
+    .pagination { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; font-size: 0.9rem; }
+    .pagination button { padding: 0.35rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; background: #fff; cursor: pointer; }
+    .pagination button:disabled { opacity: 0.4; cursor: default; }
+    .pagination button:not(:disabled):hover { background: #f1f5f9; }
+    .pagination .page-info { color: #64748b; }
+    .stats { margin-top: 1rem; font-size: 0.85rem; color: #64748b; }
+    #app { max-width: 960px; margin: 0 auto; }
+    .loading { text-align: center; padding: 2rem; color: #64748b; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h1>@everystate/view: API Users</h1>
+    <p class="subtitle">Live data from JSONPlaceholder. Search, sort, paginate - all reactive state.</p>
+    <div class="toolbar">
+      <input type="text" id="search" placeholder="Search users..." oninput="onSearch(this.value)">
+      <button onclick="fetchUsers()">Refresh</button>
+      <span class="status" id="statusEl">Loading...</span>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th onclick="sortBy('id')">ID <span class="sort-indicator" id="sort-id"></span></th>
+          <th onclick="sortBy('name')">Name <span class="sort-indicator" id="sort-name"></span></th>
+          <th onclick="sortBy('email')">Email <span class="sort-indicator" id="sort-email"></span></th>
+          <th onclick="sortBy('company')">Company <span class="sort-indicator" id="sort-company"></span></th>
+          <th onclick="sortBy('city')">City <span class="sort-indicator" id="sort-city"></span></th>
+        </tr>
+      </thead>
+      <tbody id="tableBody"></tbody>
+    </table>
+    <div class="pagination">
+      <button onclick="prevPage()" id="prevBtn" disabled>Prev</button>
+      <span class="page-info" id="pageInfo">Page 1 of 1</span>
+      <button onclick="nextPage()" id="nextBtn" disabled>Next</button>
+    </div>
+    <div class="stats" id="statsEl"></div>
+  </div>
+  <script type="module">
+    import { createEveryState } from '@everystate/core';
+    import { createPerfMonitor, mountOverlay } from '@everystate/perf';
+    // ============================================================
+    // Store + Perf (perf wraps store BEFORE any subscriptions)
+    // ============================================================
+    const store = createEveryState({
+      users: [],
+      filteredUsers: [],
+      paginatedUsers: [],
+      searchTerm: '',
+      sortCol: 'id',
+      sortDir: 'asc',
+      currentPage: 1,
+      pageSize: 5,
+      totalPages: 1,
+      status: 'loading',
+      error: null,
+    });
+    const perf = createPerfMonitor(store);
+    mountOverlay(perf, document.body);
+    // ============================================================
+    // Derived state: filter + sort + paginate
+    // ============================================================
+    function recompute() {
+      const users = store.get('users') || [];
+      const term = (store.get('searchTerm') || '').toLowerCase();
+      const col = store.get('sortCol');
+      const dir = store.get('sortDir');
+      const page = store.get('currentPage');
+      const size = store.get('pageSize');
+      // Filter
+      let filtered = users;
+      if (term) {
+        filtered = users.filter(u =>
+          u.name.toLowerCase().includes(term) ||
+          u.email.toLowerCase().includes(term) ||
+          u.company.toLowerCase().includes(term) ||
+          u.city.toLowerCase().includes(term)
+        );
+      }
+      // Sort
+      filtered = [...filtered].sort((a, b) => {
+        const va = (a[col] ?? '').toString().toLowerCase();
+        const vb = (b[col] ?? '').toString().toLowerCase();
+        if (col === 'id') return dir === 'asc' ? a.id - b.id : b.id - a.id;
+        return dir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
+      });
+      // Paginate
+      const totalPages = Math.max(1, Math.ceil(filtered.length / size));
+      const safePage = Math.min(page, totalPages);
+      const start = (safePage - 1) * size;
+      const paginated = filtered.slice(start, start + size);
+      store.set('filteredUsers', filtered);
+      store.set('paginatedUsers', paginated);
+      store.set('totalPages', totalPages);
+      if (safePage !== page) store.set('currentPage', safePage);
+    }
+    // Subscribe to triggers
+    store.subscribe('users', recompute);
+    store.subscribe('searchTerm', recompute);
+    store.subscribe('sortCol', recompute);
+    store.subscribe('sortDir', recompute);
+    store.subscribe('currentPage', recompute);
+    // ============================================================
+    // DOM rendering (reactive subscriptions)
+    // ============================================================
+    const tableBody = document.getElementById('tableBody');
+    const statusEl = document.getElementById('statusEl');
+    const pageInfo = document.getElementById('pageInfo');
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    const statsEl = document.getElementById('statsEl');
+    store.subscribe('paginatedUsers', () => {
+      const users = store.get('paginatedUsers') || [];
+      tableBody.innerHTML = '';
+      if (users.length === 0) {
+        const tr = document.createElement('tr');
+        tr.innerHTML = '<td colspan="5" style="text-align:center;color:#94a3b8;padding:2rem">No users found</td>';
+        tableBody.appendChild(tr);
+        return;
+      }
+      for (const u of users) {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `<td>${u.id}</td><td>${u.name}</td><td>${u.email}</td><td>${u.company}</td><td>${u.city}</td>`;
+        tableBody.appendChild(tr);
+      }
+    });
+    store.subscribe('status', () => {
+      const s = store.get('status');
+      const err = store.get('error');
+      statusEl.className = 'status' + (s === 'error' ? ' error' : '');
+      if (s === 'loading') statusEl.textContent = 'Loading...';
+      else if (s === 'error') statusEl.textContent = 'Error: ' + (err || 'unknown');
+      else {
+        const total = (store.get('users') || []).length;
+        const filtered = (store.get('filteredUsers') || []).length;
+        statusEl.textContent = filtered === total ? `${total} users` : `${filtered} of ${total} users`;
+      }
+    });
+    store.subscribe('searchTerm', () => {
+      const total = (store.get('users') || []).length;
+      const filtered = (store.get('filteredUsers') || []).length;
+      const s = store.get('status');
+      if (s === 'ready') {
+        statusEl.className = 'status';
+        statusEl.textContent = filtered === total ? `${total} users` : `${filtered} of ${total} users`;
+      }
+    });
+    store.subscribe('totalPages', () => {
+      const page = store.get('currentPage');
+      const total = store.get('totalPages');
+      pageInfo.textContent = `Page ${page} of ${total}`;
+      prevBtn.disabled = page <= 1;
+      nextBtn.disabled = page >= total;
+    });
+    store.subscribe('currentPage', () => {
+      const page = store.get('currentPage');
+      const total = store.get('totalPages');
+      pageInfo.textContent = `Page ${page} of ${total}`;
+      prevBtn.disabled = page <= 1;
+      nextBtn.disabled = page >= total;
+    });
+    store.subscribe('sortCol', updateSortIndicators);
+    store.subscribe('sortDir', updateSortIndicators);
+    function updateSortIndicators() {
+      const col = store.get('sortCol');
+      const dir = store.get('sortDir');
+      for (const c of ['id', 'name', 'email', 'company', 'city']) {
+        const el = document.getElementById('sort-' + c);
+        if (el) el.textContent = c === col ? (dir === 'asc' ? '\u25B2' : '\u25BC') : '';
+      }
+    }
+    // Stats line
+    store.subscribe('filteredUsers', () => {
+      const all = (store.get('users') || []).length;
+      const filtered = (store.get('filteredUsers') || []).length;
+      const page = store.get('currentPage');
+      const size = store.get('pageSize');
+      const start = (page - 1) * size + 1;
+      const end = Math.min(page * size, filtered);
+      if (filtered > 0) {
+        statsEl.textContent = `Showing ${start}-${end} of ${filtered} users` + (filtered < all ? ` (filtered from ${all})` : '');
+      } else {
+        statsEl.textContent = `No results from ${all} users`;
+      }
+    });
+    // ============================================================
+    // Fetch real data from JSONPlaceholder
+    // ============================================================
+    async function fetchUsers() {
+      store.set('status', 'loading');
+      store.set('error', null);
+      try {
+        const res = await fetch('https://jsonplaceholder.typicode.com/users');
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const raw = await res.json();
+        // Flatten to table-friendly shape
+        const users = raw.map(u => ({
+          id: u.id,
+          name: u.name,
+          email: u.email.toLowerCase(),
+          company: u.company?.name || '',
+          city: u.address?.city || '',
+          phone: u.phone,
+          website: u.website,
+        }));
+        store.set('users', users);
+        store.set('currentPage', 1);
+        store.set('status', 'ready');
+      } catch (e) {
+        store.set('error', e.message);
+        store.set('status', 'error');
+      }
+    }
+    // ============================================================
+    // User actions (exposed to onclick handlers)
+    // ============================================================
+    window.fetchUsers = fetchUsers;
+    window.onSearch = function(val) {
+      store.set('searchTerm', val);
+      store.set('currentPage', 1);
+    };
+    window.sortBy = function(col) {
+      const current = store.get('sortCol');
+      if (current === col) {
+        store.set('sortDir', store.get('sortDir') === 'asc' ? 'desc' : 'asc');
+      } else {
+        store.set('sortCol', col);
+        store.set('sortDir', 'asc');
+      }
+    };
+    window.prevPage = function() {
+      const p = store.get('currentPage');
+      if (p > 1) store.set('currentPage', p - 1);
+    };
+    window.nextPage = function() {
+      const p = store.get('currentPage');
+      if (p < store.get('totalPages')) store.set('currentPage', p + 1);
+    };
+    // Boot
+    fetchUsers();
+  </script>
+</body>
+</html>