@dtudury/streamo 0.1.1 → 0.2.0

package/public/apps/chat/main.js

@@ -1,74 +1,33 @@
-import { Signer } from '/streamo/Signer.js'
-import { RepoRegistry } from '/streamo/RepoRegistry.js'
-import { registrySync } from '/streamo/registrySync.js'
-import { bytesToHex } from '/streamo/utils.js'
+import { h } from '../../streamo/h.js'
+import { mount } from '../../streamo/mount.js'
+import { Recaller } from '../../streamo/utils/Recaller.js'
+import { Signer } from '../../streamo/Signer.js'
+import { RepoRegistry } from '../../streamo/RepoRegistry.js'
+import { registrySync } from '../../streamo/registrySync.js'
+import { bytesToHex } from '../../streamo/utils.js'
 
-const loginEl  = document.getElementById('login')
-const chatEl   = document.getElementById('chat')
-const statusEl = document.getElementById('status')
-const myNameEl = document.getElementById('my-name')
-const msgsEl   = document.getElementById('messages')
-const inputEl  = document.getElementById('msg-input')
-const sendBtn  = document.getElementById('send-btn')
-const joinBtn  = document.getElementById('join-btn')
-
-const { rootKey } = await fetch('/api/chat-info').then(r => r.json())
-
-// ── Helpers ────────────────────────────────────────────────────────────────
+const { primaryKeyHex: rootKey } = await fetch('/api/info').then(r => r.json())
 
 function fmt (ts) {
   return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
-// ── Rendering ──────────────────────────────────────────────────────────────
-
-let myKey = null
-
-/** Flat list of { name, text, at, mine } sorted by `at` */
-function collectMessages (registry) {
-  const all = []
-  for (const [keyHex, repo] of registry) {
-    const name = repo.get('name')
-    const messages = repo.get('messages') ?? []
-    for (const msg of messages) {
-      const text = typeof msg === 'string' ? msg : msg?.text ?? String(msg)
-      const at   = msg?.at ?? 0
-      all.push({ name, text, at, mine: keyHex === myKey })
-    }
-  }
-  all.sort((a, b) => a.at - b.at)
-  return all
-}
-
-let rendered = 0
-
-function renderMessages (registry) {
-  const all = collectMessages(registry)
-  // Only append new messages (simple: clear + rebuild if out of order, else append)
-  if (all.length < rendered) {
-    msgsEl.innerHTML = ''
-    rendered = 0
-  }
-  for (let i = rendered; i < all.length; i++) {
-    const { name, text, at, mine } = all[i]
-    const div = document.createElement('div')
-    div.className = `msg ${mine ? 'mine' : 'theirs'}`
-    div.innerHTML = `
-      ${!mine ? `<div class="sender">${escHtml(name)}</div>` : ''}
-      <div class="text">${escHtml(text)}</div>
+function Msg ({ name, text, at, mine }) {
+  return h`
+    <div class=${['msg', mine ? 'mine' : 'theirs']} data-key=${at}>
+      ${!mine ? h`<div class="sender">${name}</div>` : null}
+      <div class="text">${text}</div>
       <div class="time">${fmt(at)}</div>
-    `
-    msgsEl.appendChild(div)
-  }
-  rendered = all.length
-  if (all.length > rendered - 1) msgsEl.scrollTop = msgsEl.scrollHeight
+    </div>
+  `
 }
 
-function escHtml (s) {
-  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// ── Join ───────────────────────────────────────────────────────────────────
+const loginEl  = document.getElementById('login')
+const chatEl   = document.getElementById('chat')
+const msgsEl   = document.getElementById('messages')
+const inputEl  = document.getElementById('msg-input')
+const statusEl = document.getElementById('status')
+const joinBtn  = document.getElementById('join-btn')
 
 joinBtn.onclick = async () => {
   const username = document.getElementById('username').value.trim()
@@ -79,50 +38,74 @@ joinBtn.onclick = async () => {
   statusEl.textContent = 'connecting…'
 
   try {
-    const signer = new Signer(username, password, 1)
+    const signer  = new Signer(username, password, 1)
     const { publicKey } = await signer.keysFor('chat')
-    myKey = bytesToHex(publicKey)
-
+    const myKey   = bytesToHex(publicKey)
     const registry = new RepoRegistry()
 
     const session = await registrySync(registry, location.hostname, Number(location.port) || 80, {
-      filter: k => k === rootKey,
-      follow: (keyHex, repo, subscribe) => {
-        for (const memberKey of repo.get('members') ?? []) subscribe(memberKey)
-      },
-      onAnnounce: (key) => {
-        session.subscribe(key)
-      }
+      filter:     k => k === rootKey,
+      follow:     (keyHex, repo, subscribe) => {
+                    for (const memberKey of repo.get('members') ?? []) subscribe(memberKey)
+                  },
+      onAnnounce: key => session.subscribe(key)
     })
 
-    // Open own repo
     const myRepo = await registry.open(myKey)
-    if (!myRepo.get('name')) {
-      myRepo.set({ name: username, messages: [] })
-    }
+    myRepo.attachSigner(signer, 'chat')
+    if (!myRepo.get('name')) myRepo.set({ name: username, messages: [] })
 
     session.interest(rootKey)
     session.announce(myKey, rootKey)
 
-    // Switch to chat view
     loginEl.style.display = 'none'
-    chatEl.style.display = 'flex'
-    myNameEl.textContent = `(${username})`
+    chatEl.style.display  = 'flex'
+    document.getElementById('my-name').textContent = `(${username})`
+
+    // ── Reactive message list ──────────────────────────────────────────────
+    //
+    // Each repo has its own internal Recaller, so repo.get() inside a mount
+    // slot won't automatically re-trigger mount's recaller. Bridge via
+    // reportKey*: repo.watch() calls reportKeyMutation when data changes;
+    // the slot calls reportKeyAccess to register the dependency.
+
+    const recaller = new Recaller('chat')
+    const signal   = {}
+
+    function triggerRender () {
+      recaller.reportKeyMutation(signal, 'data')
+      requestAnimationFrame(() => { msgsEl.scrollTop = msgsEl.scrollHeight })
+    }
 
-    // Reactive rendering: re-render on any repo change
     function watchRepo (keyHex, repo) {
-      repo.watch(`chat-render:${keyHex}`, () => renderMessages(registry))
+      repo.watch(`chat:${keyHex}`, triggerRender)
     }
+
     for (const [k, r] of registry) watchRepo(k, r)
-    registry.onOpen((keyHex, repo) => {
-      watchRepo(keyHex, repo)
-      renderMessages(registry)
-    })
-    renderMessages(registry)
+    registry.onOpen((keyHex, repo) => { watchRepo(keyHex, repo); triggerRender() })
+
+    mount(h`${function messages () {
+      recaller.reportKeyAccess(signal, 'data')
+      const all = []
+      for (const [keyHex, repo] of registry) {
+        if (keyHex === rootKey) continue
+        const name = repo.get('name')
+        for (const msg of repo.get('messages') ?? []) {
+          const text = typeof msg === 'string' ? msg : msg?.text ?? String(msg)
+          const at   = msg?.at ?? 0
+          all.push({ name, text, at, mine: keyHex === myKey })
+        }
+      }
+      all.sort((a, b) => a.at - b.at)
+      return all.map(({ name, text, at, mine }) =>
+        h`<${Msg} name=${name} text=${text} at=${at} mine=${mine}/>`)
+    }}`, msgsEl, recaller)
 
     // ── Send ────────────────────────────────────────────────────────────────
 
-    async function sendMessage () {
+    const sendBtn = document.getElementById('send-btn')
+
+    function sendMessage () {
       const text = inputEl.value.trim()
       if (!text) return
       inputEl.value = ''

package/public/apps/chat/server.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+import { config } from 'dotenv'
+import { StreamoServer } from '../../streamo/StreamoServer.js'
+
+const envFile = process.argv.find((_, i) => process.argv[i - 1] === '--env-file')
+if (envFile) config({ path: envFile })
+
+const name       = process.env.STREAMO_NAME             ?? 'chat'
+const username   = process.env.STREAMO_USERNAME         ?? 'relay'
+const password   = process.env.STREAMO_PASSWORD         ?? ''
+const port       = +(process.env.STREAMO_WEB            ?? 8080)
+const dataDir    = process.env.STREAMO_DATA_DIR         ?? '.streamo'
+const keyIter    = +(process.env.STREAMO_KEY_ITERATIONS ?? 100000)
+
+const server = await StreamoServer.create({ name, username, password, dataDir, keyIterations: keyIter })
+
+console.log(`[chat] room key: ${server.publicKeyHex}`)
+console.log(`[chat] serving on http://localhost:${port}/apps/chat/`)
+
+if (!server.streamo.get('members')) {
+  server.streamo.set({ ...(server.streamo.get() ?? {}), members: [] })
+  console.log('[chat] initialized chat room')
+}
+
+await server.web(port, {
+  onAnnounce: (key, topic) => {
+    if (topic !== server.publicKeyHex) return
+    const members = server.streamo.get('members') ?? []
+    if (!members.includes(key)) {
+      server.streamo.set({ ...(server.streamo.get() ?? {}), members: [...members, key] })
+      console.log(`[chat] new member: ${key.slice(0, 12)}…`)
+    }
+  }
+})

package/public/streamo/Repo.js

@@ -18,6 +18,42 @@ import { Streamo, changedPaths } from './Streamo.js'
  * for read-only inspection or direct use with the explicit commit() API.
  */
 export class Repo extends Streamo {
+  #signer      = null
+  #signerName  = null
+  #signing     = false
+  #signPending = false
+
+  /**
+   * Attach a signer so every commit is automatically signed.
+   * Concurrent commits are batched: if a sign is in flight when another
+   * commit lands, one more sign runs after the current one finishes,
+   * covering all accumulated commits in a single signature.
+   *
+   * @param {import('./Signer.js').Signer} signer
+   * @param {string} name  stream name passed to signer.keysFor()
+   */
+  attachSigner (signer, name) {
+    this.#signer     = signer
+    this.#signerName = name
+  }
+
+  #scheduleSign () {
+    if (!this.#signer) return
+    if (this.#signing) { this.#signPending = true; return }
+    this.#signing = true
+    this.sign(this.#signer, this.#signerName)
+      .then(() => {
+        this.#signing = false
+        if (this.#signPending) {
+          this.#signPending = false
+          this.#scheduleSign()
+        }
+      })
+      .catch(() => {
+        this.#signing = false
+        if (this.byteLength > this.signedLength) this.#scheduleSign()
+      })
+  }
   /**
    * The latest commit record, or null if nothing has been committed yet.
    * Registers a reactive dependency on the commit log length.
@@ -171,6 +207,8 @@ export class Repo extends Streamo {
     const parent = parentAddr >= 0 ? parentAddr : undefined
     const dataAddress = this.copyFrom(workingStreamo, workingStreamo.byteLength - 1)
     const code = this.encode({ message, date: new Date(), dataAddress, parent })
-    return this.append(code)
+    const result = this.append(code)
+    this.#scheduleSign()
+    return result
   }
 }

package/public/streamo/StreamoComponent.js

@@ -0,0 +1,92 @@
+/**
+ * StreamoComponent — base class for hot-reloadable custom element components
+ *
+ * Two levels of component in streamo:
+ *
+ *   1. Function components — plain functions used directly as tags in h``:
+ *
+ *        function Card ({ title, children }) {
+ *          return h`<div class="card"><h2>${title}</h2>${children}</div>`
+ *        }
+ *        mount(h`<${Card} title="Hello"><p>hi</p></${Card}>`, body, recaller)
+ *
+ *      Attr values are passed as-is: reactive function attrs stay as functions,
+ *      so the component can forward them straight into its own slots.
+ *
+ *   2. Custom element components (this file) — for hot-reloading via content
+ *      addresses. Each file version gets a unique element name; stale elements
+ *      become orphans (different tag → no recycling → cleaned up automatically).
+ *
+ *      Typical pattern:
+ *
+ *        // When the address of Card.js changes in the reactive store:
+ *        const cardTag = () => {
+ *          const addr = repo.get('components.card')
+ *          if (!addr) return null
+ *          return defineComponent(componentKey('s-card', addr), ({ title }) =>
+ *            h`<div class="card"><h2>${title}</h2></div>`
+ *          )
+ *        }
+ *        mount(h`${() => { const t = cardTag(); return t && h`<${t} title="Hello"/>` }}`, body, recaller)
+ */
+
+import { Recaller } from './utils/Recaller.js'
+import { mount, dismount } from './mount.js'
+
+export class StreamoComponent extends HTMLElement {
+  #recaller
+  #root
+
+  connectedCallback () {
+    this.#recaller = new Recaller(this.localName)
+    this.#root = this.attachShadow({ mode: 'open' })
+    mount(this.render(this.#buildProps()), this.#root, this.#recaller)
+  }
+
+  disconnectedCallback () {
+    if (this.#root) {
+      dismount(this.#root, this.#recaller)
+      this.#root = null
+    }
+  }
+
+  // Override in subclasses or via defineComponent.
+  render (props) { return [] }
+
+  #buildProps () {
+    const props = {}
+    for (const { name, value } of this.attributes) props[name] = value
+    props.children = [...this.childNodes]
+    return props
+  }
+}
+
+/**
+ * Generate a valid custom element name from a prefix and a content address.
+ * The address provides uniqueness — a new address means a new element name,
+ * so stale elements are naturally orphaned without any explicit cleanup.
+ *
+ * @param {string} prefix  e.g. 's-card' (must contain a hyphen)
+ * @param {string} address hex content address from the reactive store
+ * @returns {string} e.g. 's-card-a1b2c3d4e5f6g7h8'
+ */
+export function componentKey (prefix, address) {
+  return `${prefix}-${String(address).slice(0, 16).toLowerCase()}`
+}
+
+/**
+ * Register a render function as a custom element. Safe to call multiple times
+ * with the same name — subsequent calls are no-ops.
+ *
+ * @param {string}   name      valid custom element name (must contain a hyphen)
+ * @param {Function} renderFn  (props) => virtual nodes
+ * @returns {string} the name, for use directly as a tag
+ */
+export function defineComponent (name, renderFn) {
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends StreamoComponent {
+      render (props) { return renderFn(props) }
+    })
+  }
+  return name
+}

package/public/streamo/StreamoServer.js

@@ -0,0 +1,71 @@
+import { Repo } from './Repo.js'
+import { RepoRegistry } from './RepoRegistry.js'
+import { Signer } from './Signer.js'
+import { archiveSync } from './archiveSync.js'
+import { fileSync } from './fileSync.js'
+import { originSync } from './originSync.js'
+import { outletSync } from './outletSync.js'
+import { s3Sync } from './s3Sync.js'
+import { stateFileSync } from './stateFileSync.js'
+import { bytesToHex } from './utils.js'
+import { webSync } from './webSync.js'
+
+export class StreamoServer {
+  #dataDir
+  #keyIterations
+
+  name
+  username
+  publicKeyHex
+  signer
+  streamo
+  registry
+
+  constructor (fields) {
+    Object.assign(this, fields)
+  }
+
+  static async create ({ name, username, password, dataDir = '.streamo', keyIterations = 100000 }) {
+    const signer = new Signer(username, password, keyIterations)
+    const { publicKey } = await signer.keysFor(name)
+    const publicKeyHex = bytesToHex(publicKey)
+
+    const registry = new RepoRegistry(async key => {
+      const repo = new Repo()
+      await archiveSync(repo, dataDir, key)
+      return repo
+    })
+    const streamo = await registry.open(publicKeyHex)
+    streamo.attachSigner(signer, name)
+
+    const server = new StreamoServer({ name, username, publicKeyHex, signer, streamo, registry })
+    server.#dataDir = dataDir
+    server.#keyIterations = keyIterations
+    return server
+  }
+
+  async web (port, peerOptions = {}) {
+    return webSync(this.registry, this.publicKeyHex, port, this.name, this.#keyIterations, peerOptions)
+  }
+
+  outlet (port) {
+    return outletSync(this.registry, port)
+  }
+
+  async connect (hostPort) {
+    const [host, port] = hostPort.split(':')
+    return originSync(this.streamo, this.publicKeyHex, host, +port)
+  }
+
+  async files (folder = '.') {
+    return fileSync(this.streamo, folder, this.#dataDir)
+  }
+
+  async s3 ({ bucket, endpoint, region, accessKeyId, secretAccessKey }) {
+    return s3Sync(this.streamo, this.publicKeyHex, { bucket, endpoint, region, accessKeyId, secretAccessKey })
+  }
+
+  stateFile (path) {
+    return stateFileSync(this.streamo, path)
+  }
+}

package/public/streamo/chat-cli.js

@@ -25,11 +25,12 @@ const signer = new Signer(username, password, 1)
 const { publicKey } = await signer.keysFor('chat')
 const myKey = bytesToHex(publicKey)
 
-// Fetch root key from server
+// Fetch root key from server (/api/info is the canonical endpoint)
 let rootKey
 try {
-  const res = await fetch(`http://${host}:${port}/api/chat-info`)
-  ;({ rootKey } = await res.json())
+  const res = await fetch(`http://${host}:${port}/api/info`)
+  const info = await res.json()
+  rootKey = info.primaryKeyHex ?? info.rootKey
 } catch (e) {
   console.error(`could not reach server at http://${host}:${port}: ${e.message}`)
   process.exit(1)

package/public/streamo/mount.js

@@ -21,6 +21,9 @@
 
 import { HElement, HText } from './h.js'
 
+const HTML_NS = 'http://www.w3.org/1999/xhtml'
+const SVG_NS  = 'http://www.w3.org/2000/svg'
+
 // ── Watcher cleanup registry ──────────────────────────────────────────────
 //
 // Each node tracks the watcher functions registered against it.
@@ -44,34 +47,48 @@ function cleanupNode (node, recaller) {
   for (const child of [...node.childNodes]) cleanupNode(child, recaller)
 }
 
+// Call when removing a mounted root (e.g. in disconnectedCallback of a custom element).
+export function dismount (root, recaller) {
+  cleanupNode(root, recaller)
+}
+
 /**
  * Mount an array of virtual nodes (result of h``) into `container`.
- * @param {Array} nodes
+ * @param {Array}  nodes
  * @param {Element} container
  * @param {import('./utils/Recaller.js').Recaller} recaller
+ * @param {string} [ns]  XML namespace inherited from parent (defaults to XHTML)
  */
-export function mount (nodes, container, recaller) {
+export function mount (nodes, container, recaller, ns = HTML_NS) {
   for (const node of [nodes].flat()) {
-    mountNode(node, container, recaller)
+    mountNode(node, container, recaller, ns)
   }
 }
 
-function mountNode (node, container, recaller) {
+function mountNode (node, container, recaller, ns = HTML_NS) {
   if (node == null) return
   if (Array.isArray(node)) {
-    node.forEach(n => mountNode(n, container, recaller))
+    node.forEach(n => mountNode(n, container, recaller, ns))
     return
   }
   if (node instanceof HElement) {
-    const el = document.createElementNS(
-      node.attrs.find(a => a?.name === 'xmlns')?.value ?? 'http://www.w3.org/1999/xhtml',
-      node.tag
-    )
+    if (typeof node.tag === 'function') {
+      mountNode(node.tag(buildProps(node)), container, recaller, ns)
+      return
+    }
+    // Determine this element's namespace:
+    //   xmlns attr > svg tag > foreignObject resets to HTML > inherit from parent
+    const nsAttr = node.attrs.find(a => a?.name === 'xmlns')?.value
+    const elemNs = nsAttr
+      ?? (node.tag === 'svg' ? SVG_NS
+        : node.tag === 'foreignObject' ? HTML_NS
+        : ns)
+    const el = document.createElementNS(elemNs, node.tag)
     for (const attr of node.attrs) {
       if (attr == null) continue
       applyAttr(el, attr, recaller)
     }
-    mount(node.children, el, recaller)
+    mount(node.children, el, recaller, elemNs)
     container.appendChild(el)
     return
   }
@@ -84,7 +101,7 @@ function mountNode (node, container, recaller) {
     return
   }
   if (typeof node === 'function') {
-    mountSlot(node, container, recaller)
+    mountSlot(node, container, recaller, ns)
     return
   }
   // primitive — string, number, etc.
@@ -98,7 +115,7 @@ function mountNode (node, container, recaller) {
 // elements are matched by data-key (exact) or tag (positional fallback)
 // and recycled in place. Unmatched nodes are cleaned up before removal.
 
-function mountSlot (cell, container, recaller) {
+function mountSlot (cell, container, recaller, ns = HTML_NS) {
   const start = document.createComment('')
   const end = document.createComment('')
   container.appendChild(start)
@@ -106,13 +123,13 @@ function mountSlot (cell, container, recaller) {
 
   const watcher = () => {
     const newVNodes = [cell(container)].flat(Infinity).filter(n => n != null)
-    reconcileSlot(start, end, newVNodes, recaller)
+    reconcileSlot(start, end, newVNodes, recaller, ns)
   }
   addCleanup(start, watcher)
   recaller.watch(cell.name || '(h cell)', watcher)
 }
 
-function reconcileSlot (start, end, newVNodes, recaller) {
+function reconcileSlot (start, end, newVNodes, recaller, ns = HTML_NS) {
   // Collect existing Element nodes between the anchors — only elements can be recycled
   const existingEls = []
   let node = start.nextSibling
@@ -183,7 +200,7 @@ function reconcileSlot (start, end, newVNodes, recaller) {
       end.before(recycled)
     } else {
       const frag = document.createDocumentFragment()
-      mountNode(vnode, frag, recaller)
+      mountNode(vnode, frag, recaller, ns)
       end.before(frag)
     }
   }
@@ -201,11 +218,30 @@ function patchElement (el, vnode) {
   }
 }
 
+// ── Function components ───────────────────────────────────────────────────
+//
+// When an HElement's tag is a function, call it with a props object instead
+// of creating a DOM element. Attr values are passed as-is — reactive function
+// attrs stay as functions so the component can forward them into its own slots.
+
+function buildProps (node) {
+  const props = {}
+  for (const attr of node.attrs) {
+    if (attr == null) continue
+    if (typeof attr === 'object' && attr.name) props[attr.name] = attr.value
+    else if (typeof attr === 'object') Object.assign(props, attr) // spread
+  }
+  props.children = node.children
+  return props
+}
+
 // ── Attribute cells ───────────────────────────────────────────────────────
 //
 // attr=${cell}          → cell(el), return value applied via setAttr
 // onclick=${cell}       → cell(el), return value assigned to el.onclick
 // attr="prefix-${cell}" → each fn part called with el, results joined as string
+// class=${[...]}        → falsy items filtered, truthy items joined with space
+// class=${{k:bool}}     → keys with truthy values joined with space
 
 function applyAttr (el, attr, recaller) {
   if (typeof attr === 'object' && !attr.name) {
@@ -221,12 +257,17 @@ function applyAttr (el, attr, recaller) {
     return
   }
   if (Array.isArray(value)) {
-    // mixed static/dynamic: each function part is a cell called with el
-    const watcher = () => {
-      setAttr(el, name, value.map(p => typeof p === 'function' ? p(el) : String(p ?? '')).join(''))
+    if (value.some(p => typeof p === 'function')) {
+      // Mixed static/dynamic attr from template interpolation — evaluate and concatenate
+      const watcher = () => {
+        setAttr(el, name, value.map(p => typeof p === 'function' ? p(el) : String(p ?? '')).join(''))
+      }
+      addCleanup(el, watcher)
+      recaller.watch(`attr:${name}`, watcher)
+    } else {
+      // Static array value (e.g. class list) — delegate to setAttr for normalization
+      setAttr(el, name, value)
     }
-    addCleanup(el, watcher)
-    recaller.watch(`attr:${name}`, watcher)
     return
   }
   if (value !== undefined) setAttr(el, name, value)
@@ -234,6 +275,14 @@ function applyAttr (el, attr, recaller) {
 }
 
 function setAttr (el, name, value) {
+  // Normalize class arrays and objects into a space-separated string
+  if (name === 'class') {
+    if (Array.isArray(value)) {
+      value = value.filter(Boolean).join(' ')
+    } else if (value !== null && value !== undefined && typeof value === 'object') {
+      value = Object.entries(value).filter(([, v]) => v).map(([k]) => k).join(' ')
+    }
+  }
   if (name.startsWith('on')) {
     el[name] = typeof value === 'function' ? value : null
   } else if (name === 'value' && 'value' in el) {

package/public/streamo/webSync.js

@@ -25,7 +25,7 @@ const publicDir = join(dirname(fileURLToPath(import.meta.url)), '..')
  * @param {number} port
  * @returns {Promise<import('http').Server>}
  */
-export async function webSync (registry, primaryKeyHex, port, name, keyIterations = 100000) {
+export async function webSync (registry, primaryKeyHex, port, name, keyIterations = 100000, peerOptions = {}) {
   const app = express()
 
   app.use(express.static(publicDir))
@@ -108,7 +108,7 @@ export async function webSync (registry, primaryKeyHex, port, name, keyIteration
 
   const server = createServer(app)
 
-  attachStreamSync(new WebSocketServer({ server }), registry, 'web')
+  attachStreamSync(new WebSocketServer({ server }), registry, 'web', peerOptions)
 
   await new Promise((resolve, reject) => {
     server.listen(port, err => err ? reject(err) : resolve())