@dtudury/streamo 0.1.0

package/public/streamo/h.js

@@ -0,0 +1,202 @@
+/**
+ * h — HTML template parser
+ *
+ * Usage:
+ *   const nodes = h`<div class=${cls}>${() => streamo.get('name')}</div>`
+ *
+ * Parses the template into a virtual tree of HElement / HText nodes.
+ * Interpolated values (slots) are stored as-is — functions are NOT called here.
+ * Pass the result to `mount` (./mount.js) to render it into the DOM.
+ */
+
+const VOID = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr'
+])
+
+// ── Virtual tree types ───────────────────────────────────────────────────
+
+export class HElement {
+  constructor (tag, attrs, children) {
+    this.tag = tag
+    this.attrs = attrs       // Array.<{name, value}|any>
+    this.children = children // Array of slots
+  }
+}
+
+export class HText {
+  constructor (value) {
+    this.value = value // string
+  }
+}
+
+// ── Scanner ──────────────────────────────────────────────────────────────
+
+class Scanner {
+  #tokens
+  #i = 0
+
+  constructor (strings, values) {
+    this.#tokens = []
+    for (let i = 0; i < strings.length; i++) {
+      for (const c of strings[i]) this.#tokens.push(c)
+      if (i < values.length) this.#tokens.push({ slot: values[i] })
+    }
+  }
+
+  peek (offset = 0) { return this.#tokens[this.#i + offset] }
+  isSlot (offset = 0) { return this.peek(offset)?.slot !== undefined }
+  advance () { return this.#tokens[this.#i++] }
+  get done () { return this.#i >= this.#tokens.length }
+
+  readIf (str) {
+    for (let i = 0; i < str.length; i++) {
+      const c = this.peek(i)
+      if (!c || c.slot !== undefined || c !== str[i]) return false
+    }
+    this.#i += str.length
+    return true
+  }
+
+  assertChar (re) {
+    const c = this.peek()
+    if (!c || c.slot !== undefined || !c.match(re)) {
+      throw new Error(`expected ${re}, got ${JSON.stringify(c)} at token ${this.#i}`)
+    }
+    this.#i++
+  }
+
+  skipSpace () {
+    while (!this.done && !this.isSlot() && this.peek().match(/\s/)) this.#i++
+  }
+
+  /** Read chars until regex matches or a slot is hit. */
+  readTo (re) {
+    const parts = []
+    while (!this.done && !this.isSlot() && !this.peek().match(re)) {
+      const c = this.peek()
+      if (c === '&') {
+        parts.push(this.#readEscaped())
+      } else {
+        parts.push(c)
+        this.#i++
+      }
+    }
+    return parts.join('')
+  }
+
+  #readEscaped () {
+    this.#i++ // consume '&'
+    for (const [seq, char] of [['amp;', '&'], ['apos;', "'"], ['gt;', '>'], ['lt;', '<'], ['quot;', '"'], ['nbsp;', '\u00a0']]) {
+      if (this.readIf(seq)) return char
+    }
+    throw new Error('unknown HTML escape sequence')
+  }
+
+  /**
+   * Read an attribute value that may contain interleaved slots and literal text.
+   * Returns a string if there are no slots, otherwise an array of string/slot parts.
+   */
+  readAttrValue (closingQuote) {
+    const parts = []
+    while (!this.done) {
+      if (this.isSlot()) {
+        parts.push(this.advance().slot)
+      } else if (this.peek() === closingQuote) {
+        break
+      } else if (this.peek() === '&') {
+        parts.push(this.#readEscaped())
+      } else {
+        let s = ''
+        while (!this.done && !this.isSlot() && this.peek() !== closingQuote && this.peek() !== '&') {
+          s += this.peek()
+          this.#i++
+        }
+        if (s) parts.push(s)
+      }
+    }
+    if (parts.every(p => typeof p === 'string')) return parts.join('')
+    return parts
+  }
+}
+
+// ── Parser ───────────────────────────────────────────────────────────────
+
+const END_ATTRS = Symbol('end')
+
+function parseAttr (sc) {
+  sc.skipSpace()
+  const c = sc.peek()
+  if (!c || c === '/' || c === '>') return END_ATTRS
+  // dynamic attribute object spread (e.g. ${attrs})
+  if (sc.isSlot()) return sc.advance().slot
+  const name = sc.readTo(/[\s=/>]/)
+  if (!name) throw new Error('attribute must have a name')
+  sc.skipSpace()
+  if (!sc.readIf('=')) return { name }
+  sc.skipSpace()
+  if (sc.isSlot()) return { name, value: sc.advance().slot }
+  const quote = (sc.peek() === '"' || sc.peek() === "'") ? sc.advance() : null
+  if (quote) {
+    const raw = sc.readAttrValue(quote)
+    sc.assertChar(new RegExp(quote))
+    const value = Array.isArray(raw) && raw.length === 1 ? raw[0] : raw
+    return { name, value }
+  }
+  return { name, value: sc.readTo(/[\s/>]/) }
+}
+
+function parseAttrs (sc) {
+  const attrs = []
+  while (true) {
+    const attr = parseAttr(sc)
+    if (attr === END_ATTRS) return attrs
+    attrs.push(attr)
+  }
+}
+
+function parseTag (sc) {
+  sc.skipSpace()
+  if (sc.isSlot()) return sc.advance().slot
+  return sc.readTo(/[\s/>]/)
+}
+
+function parseElement (sc) {
+  if (sc.isSlot()) return sc.advance().slot
+  if (sc.peek() !== '<') {
+    const text = sc.readTo(/</)
+    return text ? new HText(text) : null
+  }
+  sc.assertChar(/</)
+  const closing = sc.readIf('/')
+  const tag = parseTag(sc)
+  const isVoid = VOID.has(tag)
+  const attrs = parseAttrs(sc)
+  const selfClose = sc.readIf('/') || isVoid
+  sc.assertChar(/>/)
+  if (closing) return { _closing: tag }
+  const children = selfClose ? [] : parseChildren(sc, tag)
+  return new HElement(tag, attrs, children)
+}
+
+function parseChildren (sc, closingTag) {
+  const children = []
+  while (!sc.done) {
+    const node = parseElement(sc)
+    if (node === null) continue
+    if (node?._closing) return children
+    children.push(node)
+  }
+  return children
+}
+
+/**
+ * Tagged template literal — parses the template into a virtual tree.
+ * @param {TemplateStringsArray} strings
+ * @param {...any} values
+ * @returns {Array} array of HElement / HText / slot values
+ */
+export function h (strings, ...values) {
+  const sc = new Scanner(strings, values)
+  return parseChildren(sc, null)
+}

package/public/streamo/h.mount.test.js

@@ -0,0 +1,67 @@
+import { describe } from './utils/testing.js'
+import { h } from './h.js'
+import { mount } from './mount.js'
+import { Streamo } from './Streamo.js'
+
+const IS_NODE = typeof process !== 'undefined' && process.versions?.node != null
+
+if (IS_NODE) {
+  const { mockDocument, MockNode } = await import('./utils/mockDOM.js')
+  globalThis.document = mockDocument
+  globalThis.Node = MockNode
+}
+
+describe(import.meta.url, ({ test }) => {
+  test('mounts a static element with text', ({ assert }) => {
+    const container = document.createElement('div')
+    mount(h`<span>hello</span>`, container)
+    const span = container.childNodes[0]
+    assert.equal(span.textContent, 'hello')
+  })
+
+  test('reactive text slot updates after stream.set', async ({ assert }) => {
+    const stream = new Streamo()
+    stream.set({ greeting: 'hello' })
+    const container = document.createElement('div')
+    mount(h`<span>${() => stream.get('greeting')}</span>`, container, stream.recaller)
+
+    const span = container.childNodes[0]
+    assert.equal(span.textContent, 'hello', 'initial render')
+
+    stream.set('greeting', 'world')
+    await new Promise(resolve => setTimeout(resolve, 20))
+    assert.equal(span.textContent, 'world', 'updated after set')
+  })
+
+  test('reactive attribute updates after stream.set', async ({ assert }) => {
+    const stream = new Streamo()
+    stream.set({ cls: 'active' })
+    const container = document.createElement('div')
+    mount(h`<div class=${() => stream.get('cls')}></div>`, container, stream.recaller)
+
+    const div = container.childNodes[0]
+    assert.equal(div.getAttribute('class'), 'active', 'initial attribute')
+
+    stream.set('cls', 'inactive')
+    await new Promise(resolve => setTimeout(resolve, 20))
+    assert.equal(div.getAttribute('class'), 'inactive', 'updated attribute')
+  })
+
+  test('unrelated stream.set does not re-render slot', async ({ assert }) => {
+    const stream = new Streamo()
+    stream.set({ a: 'unchanged', b: 'watched' })
+    let renderCount = 0
+    const container = document.createElement('div')
+    mount(h`<span>${() => { renderCount++; return stream.get('b') }}</span>`, container, stream.recaller)
+
+    assert.equal(renderCount, 1, 'initial render')
+
+    stream.set('a', 'changed')
+    await new Promise(resolve => setTimeout(resolve, 20))
+    assert.equal(renderCount, 1, 'no re-render when unrelated key changes')
+
+    stream.set('b', 'also changed')
+    await new Promise(resolve => setTimeout(resolve, 20))
+    assert.equal(renderCount, 2, 're-renders when watched key changes')
+  })
+})

package/public/streamo/h.test.js

@@ -0,0 +1,121 @@
+import { describe } from './utils/testing.js'
+import { h, HElement, HText } from './h.js'
+
+describe(import.meta.url, ({ test }) => {
+  test('plain element', ({ assert }) => {
+    const [div] = h`<div></div>`
+    assert.ok(div instanceof HElement)
+    assert.equal(div.tag, 'div')
+    assert.deepEqual(div.attrs, [])
+    assert.deepEqual(div.children, [])
+  })
+
+  test('void element produces no children', ({ assert }) => {
+    const [br] = h`<br>`
+    assert.ok(br instanceof HElement)
+    assert.equal(br.tag, 'br')
+    assert.deepEqual(br.children, [])
+  })
+
+  test('static attributes', ({ assert }) => {
+    const [el] = h`<input type="text" placeholder='name'>`
+    assert.equal(el.attrs[0].name, 'type')
+    assert.equal(el.attrs[0].value, 'text')
+    assert.equal(el.attrs[1].name, 'placeholder')
+    assert.equal(el.attrs[1].value, 'name')
+  })
+
+  test('boolean attribute (no value)', ({ assert }) => {
+    const [el] = h`<button disabled></button>`
+    assert.equal(el.attrs[0].name, 'disabled')
+    assert.equal(el.attrs[0].value, undefined)
+  })
+
+  test('dynamic attribute value', ({ assert }) => {
+    const cls = 'active'
+    const [el] = h`<div class=${cls}></div>`
+    assert.equal(el.attrs[0].name, 'class')
+    assert.equal(el.attrs[0].value, 'active')
+  })
+
+  test('function slot as attribute value', ({ assert }) => {
+    const fn = () => 'red'
+    const [el] = h`<div style=${'color:' + fn()}></div>`
+    assert.equal(el.attrs[0].value, 'color:red')
+  })
+
+  test('text node child', ({ assert }) => {
+    const [el] = h`<p>hello world</p>`
+    assert.equal(el.children.length, 1)
+    assert.ok(el.children[0] instanceof HText)
+    assert.equal(el.children[0].value, 'hello world')
+  })
+
+  test('dynamic child slot', ({ assert }) => {
+    const val = 42
+    const [el] = h`<span>${val}</span>`
+    assert.equal(el.children[0], 42)
+  })
+
+  test('function child slot preserved as function', ({ assert }) => {
+    const fn = () => 'dynamic'
+    const [el] = h`<span>${fn}</span>`
+    assert.equal(typeof el.children[0], 'function')
+    assert.equal(el.children[0](), 'dynamic')
+  })
+
+  test('nested elements', ({ assert }) => {
+    const [ul] = h`<ul><li>a</li><li>b</li></ul>`
+    assert.equal(ul.tag, 'ul')
+    assert.equal(ul.children.length, 2)
+    assert.equal(ul.children[0].tag, 'li')
+    assert.equal(ul.children[1].tag, 'li')
+  })
+
+  test('mixed text and element children', ({ assert }) => {
+    const [p] = h`<p>hello <strong>world</strong></p>`
+    assert.ok(p.children[0] instanceof HText)
+    assert.equal(p.children[0].value, 'hello ')
+    assert.equal(p.children[1].tag, 'strong')
+  })
+
+  test('HTML entity decoding', ({ assert }) => {
+    const [el] = h`<p>a &amp; b &lt; c &gt; d</p>`
+    assert.equal(el.children[0].value, 'a & b < c > d')
+  })
+
+  test('multiple root nodes', ({ assert }) => {
+    const nodes = h`<li>a</li><li>b</li>`
+    assert.equal(nodes.length, 2)
+    assert.equal(nodes[0].tag, 'li')
+    assert.equal(nodes[1].tag, 'li')
+  })
+
+  test('self-closing syntax', ({ assert }) => {
+    const [el] = h`<MyComponent />`
+    assert.ok(el instanceof HElement)
+    assert.equal(el.tag, 'MyComponent')
+    assert.deepEqual(el.children, [])
+  })
+
+  test('mixed static/dynamic attribute value parts', ({ assert }) => {
+    // A plain string slot gets joined into the surrounding text
+    const color = 'red'
+    const [el1] = h`<div style="color: ${color}; font-size: 12px"></div>`
+    assert.equal(el1.attrs[0].value, 'color: red; font-size: 12px')
+
+    // A function slot stays as an array so mount() can wire up reactivity
+    const colorFn = () => 'blue'
+    const [el2] = h`<div style="color: ${colorFn}; font-size: 12px"></div>`
+    assert.ok(Array.isArray(el2.attrs[0].value))
+    assert.equal(el2.attrs[0].value[0], 'color: ')
+    assert.equal(typeof el2.attrs[0].value[1], 'function')
+    assert.equal(el2.attrs[0].value[2], '; font-size: 12px')
+  })
+
+  test('spread attribute object', ({ assert }) => {
+    const extra = { id: 'foo', 'data-x': '1' }
+    const [el] = h`<div ${extra}></div>`
+    assert.deepEqual(el.attrs[0], extra)
+  })
+})

package/public/streamo/mount.js

@@ -0,0 +1,248 @@
+/**
+ * mount — reactive DOM renderer for h virtual trees
+ *
+ * Cells are functions interpolated into an h template. There are four positions
+ * a cell can appear, each with a consistent contract: the first argument is always
+ * the relevant DOM element (or container), and the return value is what gets applied.
+ *
+ *   Position          Syntax                    Called as       Return value
+ *   ─────────────────────────────────────────────────────────────────────────
+ *   child slot        ${cell}                   cell(container) rendered as children
+ *   attribute value   attr=${cell}              cell(el)        set as attribute
+ *   event handler     onclick=${cell}           cell(el)        assigned to el.onclick
+ *   mixed attribute   attr="prefix-${cell}"     cell(el)        stringified and joined
+ *
+ * All cells are wrapped in a recaller.watch() so they re-run automatically
+ * whenever reactive data they accessed is mutated.
+ *
+ * For event handlers (on* attributes), the cell returns the handler function.
+ * That handler's first argument is the DOM Event.
+ */
+
+import { HElement, HText } from './h.js'
+
+// ── Watcher cleanup registry ──────────────────────────────────────────────
+//
+// Each node tracks the watcher functions registered against it.
+// cleanupNode() walks the subtree unwatching all of them, so removed
+// nodes never accumulate stale watchers.
+
+const nodeCleanups = new WeakMap() // Node → Set<Function>
+
+function addCleanup (node, f) {
+  let set = nodeCleanups.get(node)
+  if (!set) { set = new Set(); nodeCleanups.set(node, set) }
+  set.add(f)
+}
+
+function cleanupNode (node, recaller) {
+  const fns = nodeCleanups.get(node)
+  if (fns) {
+    for (const f of fns) recaller.unwatch(f)
+    nodeCleanups.delete(node)
+  }
+  for (const child of [...node.childNodes]) cleanupNode(child, recaller)
+}
+
+/**
+ * Mount an array of virtual nodes (result of h``) into `container`.
+ * @param {Array} nodes
+ * @param {Element} container
+ * @param {import('./utils/Recaller.js').Recaller} recaller
+ */
+export function mount (nodes, container, recaller) {
+  for (const node of [nodes].flat()) {
+    mountNode(node, container, recaller)
+  }
+}
+
+function mountNode (node, container, recaller) {
+  if (node == null) return
+  if (Array.isArray(node)) {
+    node.forEach(n => mountNode(n, container, recaller))
+    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
+    )
+    for (const attr of node.attrs) {
+      if (attr == null) continue
+      applyAttr(el, attr, recaller)
+    }
+    mount(node.children, el, recaller)
+    container.appendChild(el)
+    return
+  }
+  if (node instanceof HText) {
+    container.appendChild(document.createTextNode(node.value))
+    return
+  }
+  if (node instanceof Node) {
+    container.appendChild(node)
+    return
+  }
+  if (typeof node === 'function') {
+    mountSlot(node, container, recaller)
+    return
+  }
+  // primitive — string, number, etc.
+  container.appendChild(document.createTextNode(String(node)))
+}
+
+// ── Child slot ────────────────────────────────────────────────────────────
+//
+// ${cell} in content position.
+// Comment anchors delimit the slot's DOM range. On re-render, existing
+// 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) {
+  const start = document.createComment('')
+  const end = document.createComment('')
+  container.appendChild(start)
+  container.appendChild(end)
+
+  const watcher = () => {
+    const newVNodes = [cell(container)].flat(Infinity).filter(n => n != null)
+    reconcileSlot(start, end, newVNodes, recaller)
+  }
+  addCleanup(start, watcher)
+  recaller.watch(cell.name || '(h cell)', watcher)
+}
+
+function reconcileSlot (start, end, newVNodes, recaller) {
+  // Collect existing Element nodes between the anchors — only elements can be recycled
+  const existingEls = []
+  let node = start.nextSibling
+  while (node !== end) {
+    if (node.nodeType === Node.ELEMENT_NODE) existingEls.push(node)
+    node = node.nextSibling
+  }
+
+  // Build lookup: keyed elements by data-key, unkeyed elements pooled by tag.
+  // Keyed and unkeyed pools are kept separate so a keyed vnode never steals
+  // an unkeyed element and vice versa.
+  const keyedMap = new Map()
+  const tagPool = new Map()
+  for (const el of existingEls) {
+    const key = el.getAttribute('data-key')
+    if (key != null) {
+      keyedMap.set(key, el)
+    } else {
+      const tag = el.tagName.toLowerCase()
+      if (!tagPool.has(tag)) tagPool.set(tag, [])
+      tagPool.get(tag).push(el)
+    }
+  }
+
+  // Match each new HElement vnode to an existing element
+  const recycledEls = new Set()
+  const vnodeToEl = new Map()
+  for (const vnode of newVNodes) {
+    if (!(vnode instanceof HElement)) continue
+    const keyAttr = vnode.attrs.find(a => a?.name === 'data-key')
+    const keyVal = keyAttr?.value
+    // Only use static (non-reactive) key values for matching
+    const key = (keyVal != null && typeof keyVal !== 'function' && !Array.isArray(keyVal))
+      ? String(keyVal) : null
+
+    let el = null
+    if (key != null) {
+      // Keyed: only match an existing element with the same data-key
+      const candidate = keyedMap.get(key)
+      if (candidate && !recycledEls.has(candidate)) el = candidate
+    } else {
+      // Unkeyed: take the first unused same-tag element from the pool
+      const pool = tagPool.get(vnode.tag)
+      if (pool) el = pool.find(e => !recycledEls.has(e)) ?? null
+    }
+
+    if (el) {
+      recycledEls.add(el)
+      vnodeToEl.set(vnode, el)
+    }
+  }
+
+  // Detach recycled elements before wiping so they survive the cleanup pass
+  for (const el of recycledEls) el.remove()
+
+  // Clean up and remove all remaining old content
+  while (start.nextSibling !== end) {
+    const old = start.nextSibling
+    cleanupNode(old, recaller)
+    old.remove()
+  }
+
+  // Reinsert recycled elements (static attrs patched) and mount fresh ones, in order
+  for (const vnode of newVNodes) {
+    const recycled = vnodeToEl.get(vnode)
+    if (recycled) {
+      patchElement(recycled, vnode)
+      end.before(recycled)
+    } else {
+      const frag = document.createDocumentFragment()
+      mountNode(vnode, frag, recaller)
+      end.before(frag)
+    }
+  }
+}
+
+// Update static attributes on a recycled element.
+// Reactive (function/array) attrs are already self-updating via their existing watchers.
+function patchElement (el, vnode) {
+  for (const attr of vnode.attrs) {
+    if (attr == null) continue
+    if (typeof attr === 'object' && !attr.name) continue // spread — skip
+    if (typeof attr.value === 'function' || Array.isArray(attr.value)) continue // reactive — skip
+    if (attr.value !== undefined) setAttr(el, attr.name, attr.value)
+    else el.toggleAttribute(attr.name, true)
+  }
+}
+
+// ── 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
+
+function applyAttr (el, attr, recaller) {
+  if (typeof attr === 'object' && !attr.name) {
+    // spread object: ${attrs} in attribute position
+    for (const [k, v] of Object.entries(attr)) applyAttr(el, { name: k, value: v }, recaller)
+    return
+  }
+  const { name, value } = attr
+  if (typeof value === 'function') {
+    const watcher = () => setAttr(el, name, value(el))
+    addCleanup(el, watcher)
+    recaller.watch(`attr:${name}`, watcher)
+    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(''))
+    }
+    addCleanup(el, watcher)
+    recaller.watch(`attr:${name}`, watcher)
+    return
+  }
+  if (value !== undefined) setAttr(el, name, value)
+  else el.toggleAttribute(name, true) // boolean attribute (no value)
+}
+
+function setAttr (el, name, value) {
+  if (name.startsWith('on')) {
+    el[name] = typeof value === 'function' ? value : null
+  } else if (name === 'value' && 'value' in el) {
+    el.value = value
+  } else if (typeof value === 'boolean') {
+    el.toggleAttribute(name, value)
+  } else if (value == null) {
+    el.removeAttribute(name)
+  } else {
+    el.setAttribute(name, value)
+  }
+}

package/public/streamo/originSync.js

@@ -0,0 +1,60 @@
+import WebSocket from 'ws'
+import { hexToBytes } from './utils.js'
+
+/**
+ * Connect to a remote outlet and begin full-duplex sync for `stream`.
+ *
+ * Sends a handshake (the hex public key), then:
+ *   local → remote: all existing chunks, then new ones as they arrive
+ *   remote → local: chunks verified against the stream's public key
+ *
+ * @param {import('./Stream.js').Stream} stream
+ * @param {string} publicKeyHex  hex-encoded public key identifying this stream
+ * @param {string} host
+ * @param {number} port
+ * @returns {Promise<WebSocket>}  resolves when the connection is open and sync has started
+ */
+export function originSync (stream, publicKeyHex, host, port) {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(`ws://${host}:${port}`)
+
+    ws.on('open', () => {
+      // Handshake: identify which stream we want to sync
+      ws.send(publicKeyHex)
+
+      // Local → remote: replay all chunks, then stream new ones
+      const reader = stream.makeReadableStream().getReader()
+      ;(async () => {
+        try {
+          while (true) {
+            const { value, done } = await reader.read()
+            if (done) break
+            if (ws.readyState === WebSocket.OPEN) ws.send(value)
+            else break
+          }
+        } catch {}
+      })()
+
+      // Remote → local: verify signature chunks before accepting
+      const publicKey = hexToBytes(publicKeyHex)
+      const writer = stream.makeVerifiedWritableStream(publicKey).getWriter()
+
+      ws.on('message', data => {
+        writer.write(new Uint8Array(data)).catch(e => {
+          console.error(`[origin] rejected chunk: ${e.message}`)
+          ws.close()
+        })
+      })
+
+      ws.on('close', () => reader.cancel().catch(() => {}))
+      ws.on('error', err => {
+        console.error('[origin] connection error:', err.message)
+        reader.cancel().catch(() => {})
+      })
+
+      resolve(ws)
+    })
+
+    ws.on('error', reject)
+  })
+}