npm - @uistate/examples - Versions diffs - 1.0.0 - Mend

@uistate/examples 1.0.0

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 (137) hide show

package/eventState/032-todo-app-with-eventTest/index.html ADDED Viewed

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>009 Todo App with eventTest</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body data-theme="dark" data-bind="data-theme: ui.theme">
+  <nav style="display:flex; gap:10px; align-items:center; padding:10px 12px;">
+    <a href="/" data-link>Home</a>
+    <a href="/todo-demo" data-link>Todo app demo</a>
+    <span class="loading-badge" aria-live="polite">Loading…</span>
+    <span style="flex:1"></span>
+    <button class="btn" title="Toggle theme" data-on="click: toggleTheme() | log('toggle theme') | logPath('ui.theme')">Theme</button>
+  </nav>
+  <div data-route-root></div>
+  <script type="module" src="./app/router.js"></script>
+  <!-- Expose the store globally so stateTracker (optional) can bind without tight coupling -->
+  <script type="module">
+    import store from './app/store.js';
+    window.stateTrackerStore = store;
+    // Bind loading badge to route transitioning state (after DOM ready)
+    requestAnimationFrame(() => {
+      const badge = document.querySelector('.loading-badge');
+      if (badge) {
+        store.subscribe('ui.route.transitioning', (isTransitioning) => {
+          badge.style.display = isTransitioning ? 'inline' : 'none';
+        });
+        // Set initial state (default hidden in CSS)
+        badge.style.display = store.get('ui.route.transitioning') ? 'inline' : 'none';
+      }
+    });
+  </script>
+  <!-- Install behaviors runtime with a minimal action registry + recorder hook -->
+  <script type="module">
+    import store from './app/store.js';
+    import { installBehaviors } from './runtime/core/behaviors.runtime.js';
+    import { registry } from './app/actions/index.js';
+    window.behaviorsWhitelistDefault = ['ui.counter', 'ui.name', 'ui.items', 'ui.newItem', 'ui.itemsCount', 'ui.guard.whitelist', 'ui.theme', 'intent.**'];
+    window.behaviorsWhitelist = [...window.behaviorsWhitelistDefault];
+    const recUn = window.__recorder?.install?.(store);
+    window.behaviorsUninstall = installBehaviors(store, {
+      registry,
+      root: document,
+      writablePrefixes: ['ui.','intent.'],
+      writableWhitelist: window.behaviorsWhitelist,
+      debug: true,
+      onStep: (e) => {
+        try { window.__recorder?.onStep?.(e); } catch{}
+        // Log all behavior steps to telemetry
+        try {
+          if (e.phase === 'started') {
+            console.log(`[action] ${e.name}(${e.args?.join(', ') || ''})`, { event: e.event?.type, element: e.el?.tagName });
+          }
+          if (e.phase === 'applied' && e.write) {
+            console.log(`[write] ${e.write}`, store.get(e.write));
+          }
+          if (e.phase === 'blocked') {
+            console.warn(`[blocked] ${e.name} tried to write ${e.write}`, e.reason);
+          }
+        } catch{}
+      },
+    });
+    try { store.set('ui.guard.whitelist', [...window.behaviorsWhitelist]); } catch {}
+    try {
+      const cur = store.get('ui.theme');
+      if (!cur) {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        store.set('ui.theme', prefersDark ? 'dark' : 'light');
+      }
+      try { store.subscribe && store.subscribe('ui.theme', () => { try { localStorage.setItem('ui.theme', store.get('ui.theme')); } catch {} }); } catch {}
+    } catch {}
+  </script>
+  <script type="module" src="./devtools/stateTracker.js"></script>
+  <!-- Dev dock MUST load first so __devdock is available -->
+  <script type="module" src="./devtools/dock.js"></script>
+  <!-- Now load tools that register with the dock -->
+  <script type="module" src="./devtools/telemetry.js"></script>
+  <script type="module" src="./devtools/typeGenerator.js"></script>
+  <script type="module" src="./devtools/stateTracker.dock.js"></script>
+  <!-- App bridges: intent→domain and derived wildcards -->
+  <script type="module" src="./app/bridges.js"></script>
+</body>
+</html>