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/004_01/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_01/quotesFetcher/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!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 (Split Modules)</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" src="app.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,35 @@
+import { createEveryState } from '@everystate/core';
+import { createQueryClient } from '@everystate/core/queryClient';
+// 1. Store
+export const store = createEveryState({
+  quote: '',
+  author: '',
+  history: [],
+  message: 'Click the button to fetch a quote'
+});
+// 2. QueryClient
+export const qc = createQueryClient(store);
+// 3. Actions
+export 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);
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import { flatten } from '@everystate/view/resolve';
+import { mount } from '@everystate/view/project';
+import { store, fetchQuote } from './store.js';
+import { resolve } from './components.js';
+// 1. View - resolve the full spec tree from dot-path registry
+flatten(resolve('app'), 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_02/quotesFetcher/components.js ADDED Viewed

@@ -0,0 +1,46 @@
+// ─── Dot-path component registry ───────────────────────────────
+// Every component is a flat key. The dot path encodes the hierarchy.
+// children and template use dot-path strings, resolved at mount time.
+export const c = {
+  // ── Header ──
+  'header.title':       { tag: 'h1', text: '💬 Quote Fetcher' },
+  'header.subtitle':    { tag: 'p', class: 'subtitle', text: 'Powered by setAsync + QueryClient' },
+  'header':             { tag: 'div', class: 'app-header', children: ['header.title', 'header.subtitle'] },
+  // ── Quote Card ──
+  'card.text':          { tag: 'p', class: 'quote-text', text: '{quote}' },
+  'card.author':        { tag: 'p', class: 'quote-author', text: '{author}' },
+  'card.message':       { tag: 'p', class: 'message', text: '{message}' },
+  'card.fetchBtn':      { tag: 'button', text: 'New Quote', onClick: 'fetchQuote' },
+  'card':               { tag: 'div', class: 'card', children: ['card.text', 'card.author', 'card.message', 'card.fetchBtn'] },
+  // ── History ──
+  'historyHeading':     { tag: 'h2', text: 'History ({history.length})' },
+  'history.quote':      { tag: 'span', class: 'hist-quote', text: 'item.quote' },
+  'history.author':     { tag: 'span', class: 'hist-author', text: 'item.author' },
+  'history.item':       { tag: 'li', children: ['history.quote', 'history.author'] },
+  'history':            { tag: 'ul', class: 'history', forEach: 'history', as: 'item', template: 'history.item' },
+  // ── Root ──
+  'app':                { tag: 'div', class: 'quotes-app', children: ['header', 'card', 'historyHeading', 'history'] },
+};
+// ─── Resolver ──────────────────────────────────────────────────
+// Recursively replaces dot-path strings in children/template
+// with the actual spec objects from the registry.
+export function resolve(key) {
+  const node = c[key];
+  if (!node) return null;
+  const resolved = { ...node };
+  if (Array.isArray(resolved.children)) {
+    resolved.children = resolved.children.map(child =>
+      typeof child === 'string' ? resolve(child) : child
+    );
+  }
+  if (typeof resolved.template === 'string') {
+    resolved.template = resolve(resolved.template);
+  }
+  return resolved;
+}

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

@@ -0,0 +1,23 @@
+<!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 (Dot-Path Registry)</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" src="app.js"></script>
+</body>
+</html>

package/everyState-view/004_02/quotesFetcher/store.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { createEveryState } from '@everystate/core';
+import { createQueryClient } from '@everystate/core/queryClient';
+// 1. Store
+export const store = createEveryState({
+  quote: '',
+  author: '',
+  history: [],
+  message: 'Click the button to fetch a quote'
+});
+// 2. QueryClient
+export const qc = createQueryClient(store);
+// 3. Actions
+export 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);
+    }
+  }
+}

package/everyState-view/004_03/quotesFetcher/actions.js ADDED Viewed

@@ -0,0 +1,27 @@
+// ─── Action registry ───────────────────────────────────────────
+// Every action is a dot-path key → function(store, ...deps).
+// Components reference actions as 'actions.fetchQuote' etc.
+export const actions = {
+  'fetchQuote': async (store, qc) => {
+    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', '');
+      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);
+      }
+    }
+  },
+};

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

@@ -0,0 +1,19 @@
+import { flatten } from '@everystate/view/resolve';
+import { mount } from '@everystate/view/project';
+import { store, qc } from './store.js';
+import { c } from './components.js';
+import { actions } from './actions.js';
+import { resolveTree, resolveActions } from './resolve.js';
+// 1. Resolve component tree from dot-path registry
+const spec = resolveTree(c, 'app');
+// 2. Resolve action handlers from dot-path registry
+const handlers = resolveActions(actions, store, qc);
+// 3. Flatten + Mount
+flatten(spec, store, 'view');
+mount(store, 'view', document.getElementById('app'), handlers);
+// 4. Fire initial action by dot path
+handlers['actions.fetchQuote']();

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

@@ -0,0 +1,28 @@
+// ─── Component registry ────────────────────────────────────────
+// Every component is a dot-path key → spec object.
+// children/template are dot-path strings, resolved at mount time.
+// onClick values use 'actions.*' dot paths into the action registry.
+export const c = {
+  // ── Header ──
+  'header.title':       { tag: 'h1', text: '💬 Quote Fetcher' },
+  'header.subtitle':    { tag: 'p', class: 'subtitle', text: 'Powered by setAsync + QueryClient' },
+  'header':             { tag: 'div', class: 'app-header', children: ['header.title', 'header.subtitle'] },
+  // ── Quote Card ──
+  'card.text':          { tag: 'p', class: 'quote-text', text: '{quote}' },
+  'card.author':        { tag: 'p', class: 'quote-author', text: '{author}' },
+  'card.message':       { tag: 'p', class: 'message', text: '{message}' },
+  'card.fetchBtn':      { tag: 'button', text: 'New Quote', onClick: 'actions.fetchQuote' },
+  'card':               { tag: 'div', class: 'card', children: ['card.text', 'card.author', 'card.message', 'card.fetchBtn'] },
+  // ── History ──
+  'historyHeading':     { tag: 'h2', text: 'History ({history.length})' },
+  'history.quote':      { tag: 'span', class: 'hist-quote', text: 'item.quote' },
+  'history.author':     { tag: 'span', class: 'hist-author', text: 'item.author' },
+  'history.item':       { tag: 'li', children: ['history.quote', 'history.author'] },
+  'history':            { tag: 'ul', class: 'history', forEach: 'history', as: 'item', template: 'history.item' },
+  // ── Root ──
+  'app':                { tag: 'div', class: 'quotes-app', children: ['header', 'card', 'historyHeading', 'history'] },
+};

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

@@ -0,0 +1,23 @@
+<!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 (Uniform Resource Architecture)</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" src="app.js"></script>
+</body>
+</html>

package/everyState-view/004_03/quotesFetcher/resolve.js ADDED Viewed

@@ -0,0 +1,34 @@
+// ─── Unified resolver ──────────────────────────────────────────
+// Two functions, one pattern: dot paths → values.
+/**
+ * resolveTree - recursively builds a spec tree from the component registry.
+ * Replaces dot-path strings in children/template with resolved spec objects.
+ */
+export function resolveTree(registry, key) {
+  const node = registry[key];
+  if (!node) return null;
+  const resolved = { ...node };
+  if (Array.isArray(resolved.children)) {
+    resolved.children = resolved.children.map(child =>
+      typeof child === 'string' ? resolveTree(registry, child) : child
+    );
+  }
+  if (typeof resolved.template === 'string') {
+    resolved.template = resolveTree(registry, resolved.template);
+  }
+  return resolved;
+}
+/**
+ * resolveActions - builds a handlers map from the action registry.
+ * Maps 'actions.fetchQuote' → () => actions['fetchQuote'](store, ...deps)
+ * so mount() can wire onClick strings directly.
+ */
+export function resolveActions(actionRegistry, store, ...deps) {
+  const handlers = {};
+  for (const [key, fn] of Object.entries(actionRegistry)) {
+    handlers[`actions.${key}`] = (...args) => fn(store, ...deps, ...args);
+  }
+  return handlers;
+}