dignity.js 0.6.0 → 0.7.1

package/docs/assets/playground.js

@@ -0,0 +1,248 @@
+import { PLAYGROUND_DEMOS } from './playground-demos.js';
+
+const dignityPromise = import('./dignity.esm.js').then((mod) => mod.default || mod);
+
+const els = {
+  featureSelect: document.getElementById('feature-select'),
+  featureDesc: document.getElementById('feature-desc'),
+  editor: document.getElementById('code-editor'),
+  highlightCode: document.getElementById('code-highlight'),
+  highlightPre: document.querySelector('.playground-editor-highlight'),
+  runBtn: document.getElementById('run-btn'),
+  resetBtn: document.getElementById('reset-btn'),
+  clearBtn: document.getElementById('clear-btn'),
+  output: document.getElementById('output'),
+  status: document.getElementById('run-status')
+};
+
+let highlightTimer = null;
+
+let activeCleanup = null;
+let running = false;
+
+function getDemoById(id) {
+  return PLAYGROUND_DEMOS.find((demo) => demo.id === id) || PLAYGROUND_DEMOS[0];
+}
+
+function populateFeatureSelect() {
+  els.featureSelect.innerHTML = PLAYGROUND_DEMOS.map(
+    (demo) => `<option value="${demo.id}">${demo.title}</option>`
+  ).join('');
+}
+
+function syncEditorScroll() {
+  if (!els.highlightPre) {
+    return;
+  }
+  els.highlightPre.scrollTop = els.editor.scrollTop;
+  els.highlightPre.scrollLeft = els.editor.scrollLeft;
+}
+
+function updateHighlight() {
+  if (!els.highlightCode || typeof hljs === 'undefined') {
+    return;
+  }
+
+  const source = els.editor.value;
+  els.highlightCode.textContent = source.endsWith('\n') ? source : `${source}\n`;
+
+  if (typeof hljs.highlight === 'function') {
+    const { value } = hljs.highlight(source, { language: 'javascript' });
+    els.highlightCode.innerHTML = value;
+    els.highlightCode.classList.add('hljs', 'language-javascript');
+  } else {
+    hljs.highlightElement(els.highlightCode);
+  }
+
+  syncEditorScroll();
+}
+
+function scheduleHighlight() {
+  if (highlightTimer) {
+    cancelAnimationFrame(highlightTimer);
+  }
+  highlightTimer = requestAnimationFrame(() => {
+    highlightTimer = null;
+    updateHighlight();
+  });
+}
+
+function loadDemo(demo, { pushHash = true } = {}) {
+  els.featureSelect.value = demo.id;
+  els.featureDesc.textContent = demo.description;
+  els.editor.value = demo.code;
+  scheduleHighlight();
+  if (pushHash) {
+    history.replaceState(null, '', `#${demo.id}`);
+  }
+}
+
+function appendOutputLine(line, className = '') {
+  const row = document.createElement('div');
+  row.className = `playground-output__line${className ? ` ${className}` : ''}`;
+  row.textContent = line;
+  els.output.appendChild(row);
+  els.output.scrollTop = els.output.scrollHeight;
+}
+
+function clearOutput() {
+  els.output.innerHTML = '';
+}
+
+function setStatus(text, kind = '') {
+  els.status.textContent = text;
+  els.status.className = `playground-toolbar__status${kind ? ` is-${kind}` : ''}`;
+}
+
+function createHelpers() {
+  const tracked = [];
+  const cleanupFns = [];
+
+  return {
+    fastSecurity(overrides = {}) {
+      return {
+        appPassword: 'playground-app-password',
+        powEnabled: false,
+        signingEnabled: false,
+        encryptionEnabled: false,
+        ...overrides
+      };
+    },
+    sleep(ms = 30) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    },
+    track(...nodes) {
+      tracked.push(...nodes);
+    },
+    onCleanup(fn) {
+      cleanupFns.push(fn);
+    },
+    async cleanupAll() {
+      for (const fn of cleanupFns.splice(0)) {
+        try {
+          await fn();
+        } catch (_ignored) {
+          // ignore cleanup errors
+        }
+      }
+      for (const node of tracked.splice(0)) {
+        try {
+          if (node && typeof node.stop === 'function') {
+            await node.stop();
+          }
+        } catch (_ignored) {
+          // ignore stop errors
+        }
+      }
+    }
+  };
+}
+
+async function runCleanup() {
+  if (typeof activeCleanup === 'function') {
+    await activeCleanup();
+    activeCleanup = null;
+  }
+}
+
+async function runCode() {
+  if (running) {
+    return;
+  }
+
+  running = true;
+  els.runBtn.disabled = true;
+  clearOutput();
+  setStatus('Running…', 'running');
+
+  await runCleanup();
+
+  const helpers = createHelpers();
+  activeCleanup = () => helpers.cleanupAll();
+
+  const log = (...args) => {
+    const line = args
+      .map((value) => {
+        if (typeof value === 'string') {
+          return value;
+        }
+        try {
+          return JSON.stringify(value);
+        } catch (_ignored) {
+          return String(value);
+        }
+      })
+      .join(' ');
+    appendOutputLine(line);
+  };
+
+  try {
+    const dignity = await dignityPromise;
+    const userCode = els.editor.value;
+    const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+    const runner = new AsyncFunction('dignity', 'log', 'helpers', `"use strict";\n${userCode}`);
+    await runner(dignity, log, helpers);
+    setStatus('Done', 'ok');
+  } catch (error) {
+    appendOutputLine(String(error?.stack || error?.message || error), 'is-error');
+    setStatus('Error', 'error');
+  } finally {
+    await runCleanup();
+    running = false;
+    els.runBtn.disabled = false;
+  }
+}
+
+function initEditor() {
+  els.editor.addEventListener('input', scheduleHighlight);
+  els.editor.addEventListener('scroll', syncEditorScroll);
+
+  els.editor.addEventListener('keydown', (event) => {
+    if (event.key !== 'Tab') {
+      return;
+    }
+    event.preventDefault();
+    const { selectionStart, selectionEnd, value } = els.editor;
+    const next = `${value.slice(0, selectionStart)}  ${value.slice(selectionEnd)}`;
+    els.editor.value = next;
+    els.editor.selectionStart = els.editor.selectionEnd = selectionStart + 2;
+    scheduleHighlight();
+  });
+}
+
+function initFromHash() {
+  const id = window.location.hash.replace('#', '');
+  const demo = id ? getDemoById(id) : PLAYGROUND_DEMOS[0];
+  loadDemo(demo, { pushHash: Boolean(id) });
+}
+
+populateFeatureSelect();
+initFromHash();
+initEditor();
+updateHighlight();
+
+els.featureSelect.addEventListener('change', () => {
+  loadDemo(getDemoById(els.featureSelect.value));
+});
+
+els.runBtn.addEventListener('click', () => {
+  runCode();
+});
+
+els.resetBtn.addEventListener('click', () => {
+  loadDemo(getDemoById(els.featureSelect.value), { pushHash: false });
+  clearOutput();
+  setStatus('Reset to example');
+});
+
+els.clearBtn.addEventListener('click', () => {
+  clearOutput();
+  setStatus('');
+});
+
+window.addEventListener('hashchange', () => {
+  const id = window.location.hash.replace('#', '');
+  if (id) {
+    loadDemo(getDemoById(id), { pushHash: false });
+  }
+});

package/docs/assets/styles.css

@@ -14,7 +14,7 @@
   --green: #1a7f37;
   --green-bg: #dafbe1;
   --sidebar-width: 280px;
-  --header-height: 56px;
+  --header-height: 64px;
   --content-max: 920px;
   --radius: 8px;
   --shadow: 0 1px 3px rgba(27, 31, 36, 0.08);
@@ -89,6 +89,22 @@ pre code.hljs {
   padding: 16px 18px;
 }
 
+.playground-cta {
+  display: inline-block;
+  font-weight: 600;
+  padding: 10px 16px;
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+  border: 1px solid var(--accent);
+  text-decoration: none;
+}
+
+.playground-cta:hover {
+  background: var(--accent);
+  color: #fff;
+  text-decoration: none;
+}
+
 /* Header */
 .site-header {
   position: sticky;
@@ -119,7 +135,7 @@ pre code.hljs {
 }
 
 .site-header__brand img {
-  height: 40px;
+  height: 54px;
   width: auto;
 }
 

package/docs/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="dignity.js v0.6.0 — REST-like P2P object API for decentralized JavaScript applications." />
+    <meta name="description" content="dignity.js v0.7.1 — REST-like P2P object API for decentralized JavaScript applications." />
     <title>dignity.js · Documentation</title>
     <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="./favicon.ico" sizes="32x32" />
@@ -16,11 +16,12 @@
       <a class="site-header__brand" href="#overview">
         <img src="./assets/dignity-logo.svg" alt="" width="344" height="80" />
         <!-- <span>dignity.js</span> -->
-        <span class="site-header__version">v0.6.0</span>
+        <span class="site-header__version">v0.7.1</span>
       </a>
       <div class="site-header__links">
         <a href="https://www.npmjs.com/package/dignity.js" target="_blank" rel="noopener noreferrer">npm</a>
         <a href="https://github.com/jose-compu/dignity.js" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <a href="./playground/index.html">Playground</a>
         <a href="./chess/index.html">3D Chess</a>
         <a href="./openapi-like.json">API JSON</a>
       </div>
@@ -36,6 +37,7 @@
             <a href="#installation">Installation</a>
             <a href="#tutorial">Tutorial</a>
             <a href="#quick-start">Quick start</a>
+            <a href="./playground/index.html">Live playground</a>
             <a href="#browser">Browser usage</a>
           </nav>
         </div>
@@ -294,6 +296,17 @@ await bob.stop();</code></pre>
             </div>
           </section>
 
+          <section id="playground" class="section">
+            <h2>Live playground</h2>
+            <p>
+              Try dignity.js features in the browser: pick a scenario, edit the code on the left,
+              and see output on the right. Uses the bundled ESM build with an in-memory mesh — no install required.
+            </p>
+            <p>
+              <a class="playground-cta" href="./playground/index.html">Open live playground →</a>
+            </p>
+          </section>
+
           <section id="browser" class="section">
             <h2>Browser usage</h2>
             <p>Pre-built bundles are published to npm and available via CDN:</p>
@@ -578,6 +591,8 @@ node.getPeerGroupStats();
             </div>
 
             <h3>Roadmap</h3>
+            <p><strong>v0.7.1 (current)</strong> — live docs playground, demo fixes, syntax highlighting.</p>
+            <p><strong>v0.7.0 (shipped)</strong> — credential-derived keys, identity rotation, PeerGroup hardening, stress harness.</p>
             <p><strong>v0.6.0 (shipped)</strong> — core gossip, chess spectators, unit + e2e tests.</p>
             <p><strong>v0.6.x polish</strong> — <code>subscribeObjectFeed</code> wrapper, connection LRU trim, IndexedDB joined-group persistence, React <code>usePeerGroup</code> hook, 50+ node integration test.</p>
             <p><strong>Future</strong> — publisher rate limits, partial snapshot / delta feeds, cross-group fan-in metrics.</p>
@@ -932,6 +947,11 @@ const pool = createDefaultSignalingPool({
                     <td>Replicated move history with compact board model</td>
                     <td><code>npm run example:chess</code></td>
                   </tr>
+                  <tr>
+                    <td><a href="./playground/index.html"><code>docs/playground/</code></a></td>
+                    <td>Live browser playground — editable in-memory demos per feature</td>
+                    <td><code>npm run docs:serve</code></td>
+                  </tr>
                   <tr>
                     <td><a href="./chess/index.html"><code>docs/chess/</code></a></td>
                     <td>3D browser chess — PeerJS mesh, dual-signed resume links, IndexedDB, React hooks</td>
@@ -965,7 +985,7 @@ npm run example:chess</code></pre>
 
           <footer class="site-footer">
             <p>
-              dignity.js v0.6.0 ·
+              dignity.js v0.7.1 ·
               <a href="https://github.com/jose-compu/dignity.js/blob/main/LICENSE">Apache 2.0</a> ·
               <a href="https://github.com/jose-compu/dignity.js">GitHub</a> ·
               <a href="https://www.npmjs.com/package/dignity.js">npm</a>

package/docs/openapi-like.json

@@ -1,6 +1,6 @@
 {
   "name": "dignity.js",
-  "version": "0.5.4",
+  "version": "0.7.1",
   "description": "REST-like object API over peer-to-peer replication",
   "resources": {
     "collections/{collection}/{id}": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dignity.js",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "P2P object API for decentralized JavaScript applications",
   "homepage": "https://jose-compu.github.io/dignity.js/",
   "repository": {
@@ -42,6 +42,8 @@
     "test": "jest --coverage",
     "test:unit": "jest tests/unit --runInBand",
     "test:peer-group": "jest tests/unit/peer-group-gossip.test.js tests/unit/peer-group-helpers.test.js tests/integration/peer-group-gossip-e2e.test.js --runInBand --coverage=false",
+    "test:stress-peer-group": "RUN_STRESS_TESTS=1 jest tests/stress/peer-group-scale.test.js --runInBand --coverage=false",
+    "stress:peer-group": "node scripts/stress-peer-group.js",
     "test:cloudflare-live": "RUN_CLOUDFLARE_LIVE_TESTS=1 jest tests/integration/cloudflare-signaling-live.test.js --runInBand",
     "test:pow-calibrate": "RUN_POW_CALIBRATE=1 jest tests/unit/sloth-vdf-timing.test.js --runInBand --coverage=false",
     "build": "node scripts/build.js",
@@ -51,7 +53,7 @@
     "docs:dev": "node scripts/serve-docs.js",
     "docs:serve": "node scripts/serve-docs.js",
     "docs:stop": "node scripts/stop-docs.js",
-    "docs:check": "node -e \"const fs=require('fs');['docs/index.html','docs/favicon.ico','docs/chess/index.html','docs/chess/favicon.ico','docs/assets/favicon.svg','docs/chess/assets/chess-app.js','docs/assets/highlight/highlight.min.js','docs/assets/highlight/github.min.css','docs/assets/highlight/github-dark.min.css'].forEach(p=>fs.accessSync(p));\"",
+    "docs:check": "node -e \"const fs=require('fs');['docs/index.html','docs/favicon.ico','docs/playground/index.html','docs/assets/playground.js','docs/assets/playground-demos.js','docs/assets/playground.css','docs/chess/index.html','docs/chess/favicon.ico','docs/assets/favicon.svg','docs/chess/assets/chess-app.js','docs/assets/dignity.esm.js','docs/assets/highlight/highlight.min.js','docs/assets/highlight/github.min.css','docs/assets/highlight/github-dark.min.css'].forEach(p=>fs.accessSync(p));\"",
     "example:tictactoe": "node examples/decentralized-tictactoe.js",
     "example:chess": "node examples/decentralized-chess-lite.js",
     "prepublishOnly": "npm test && npm run build"
@@ -63,7 +65,7 @@
     "rest",
     "objects"
   ],
-  "license": "Apache 2.0",
+  "license": "Apache-2.0",
   "peerDependencies": {
     "react": ">=18"
   },