@invisibleloop/pulse 0.20.11 → 0.20.20

package/src/mcp/validate-worker.js

@@ -12,9 +12,25 @@
 import { validateSpec } from '../spec/schema.js'
 
 import { existsSync } from 'fs'
+import { isAbsolute }  from 'path'
 
 const tmpFile = process.argv[2]
 if (!tmpFile) { process.stdout.write('Invalid: no file path provided'); process.exit(0) }
+// A relative path here resolves against THIS FILE's location (src/mcp/), not the
+// caller's cwd — a path like "src/pages/home.js" then looks to Node's ESM resolver
+// like a bare package specifier ("Cannot find package 'src'"), which reads as an
+// import-resolution bug in the spec rather than what it actually is: this worker
+// was invoked with the wrong kind of path. Catch it here with a precise message
+// instead of letting it fall through to the generic import-failure branch below.
+if (!isAbsolute(tmpFile)) {
+  process.stdout.write(
+    `Invalid: validate-worker.js requires an absolute path, got a relative one — ${tmpFile}\n` +
+    `  A relative path resolves against this worker's own location, not your cwd, and often ` +
+    `fails with a confusing "Cannot find package" error that looks like a bug in the spec's ` +
+    `imports. Pass an absolute path instead.`
+  )
+  process.exit(0)
+}
 if (!existsSync(tmpFile)) { process.stdout.write(`Invalid: file not found — ${tmpFile}`); process.exit(0) }
 
 let mod
@@ -155,7 +171,8 @@ try {
 
   // Inline <script> blocks in view — blocked by Pulse CSP nonce policy
   // meta.scripts is the correct way to add JS: it receives the server nonce automatically.
-  if (/<script[\s>]/i.test(html)) {
+  // External scripts (<script src="…">) are allowed by script-src 'self', so only flag tags without a src.
+  if (/<script(?=[\s>])(?![^>]*\ssrc\s*=)/i.test(html)) {
     warnings.push('Inline <script> block detected in view — Pulse\'s CSP (script-src with nonces) will block these scripts at runtime. Move JavaScript to a file in public/ and reference it via meta.scripts: [\'/my-script.js\'] in the spec instead.')
   }
 

package/src/runtime/index.js

@@ -29,6 +29,21 @@ const loadStore = () => _storeModule
 const dispatchStoreMutationLazy = (name, payload) =>
   loadStore().then(({ dispatchStoreMutation }) => dispatchStoreMutation(name, payload))
 
+// Best-effort error reporting to the dev-only error journal. The endpoint
+// only exists when the server is running in dev mode — in production this
+// POSTs to a route that 404s, so there's no dev-detection needed here and
+// no risk to production behaviour. Never throws, never blocks the UI.
+function reportError({ phase, message, stack }) {
+  try {
+    fetch('/__pulse/error', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ route: location.pathname, phase, message, stack }),
+      keepalive: true,
+    }).catch(() => {})
+  } catch { /* fetch unavailable or blocked — drop it */ }
+}
+
 // ---------------------------------------------------------------------------
 // Mount
 // ---------------------------------------------------------------------------
@@ -174,6 +189,7 @@ export function mount(spec, el, serverState = {}, options = {}) {
       html = resolveView(spec, state, getEffectiveServerState())
     } catch (err) {
       console.error('[Pulse] view error:', err)
+      reportError({ phase: 'view', message: err.message, stack: err.stack })
       const serverState = getEffectiveServerState()
       html = spec.onViewError
         ? spec.onViewError(err, state, serverState)
@@ -250,6 +266,7 @@ export function mount(spec, el, serverState = {}, options = {}) {
       applyResult(action.onSuccess(state, result))
     } catch (error) {
       console.error(`[Pulse] action "${name}" failed:`, error)
+      reportError({ phase: 'action', message: `action "${name}" failed: ${error.message}`, stack: error.stack })
       applyResult(action.onError(state, error))
     }
 
@@ -323,10 +340,19 @@ function resolveView(spec, state, serverState) {
  * Uses event delegation — one listener per event type per element.
  *
  * Attribute format:
- *   data-event="mutationName"           → fires on click
- *   data-event="change:mutationName"    → fires on change
- *   data-event="input:mutationName"     → fires on input
- *   data-action="actionName"            → fires on form submit
+ *   data-event="mutationName"             → fires on click
+ *   data-event="change:mutationName"      → fires on change
+ *   data-event="input:mutationName"       → fires on input
+ *   data-event="pointerdown:mutationName" → fires on pointerdown, captures the pointer
+ *   data-event="pointermove:mutationName" → fires on pointermove (while captured)
+ *   data-event="pointerup:mutationName"   → fires on pointerup or pointercancel
+ *   data-event="keydown:mutationName"     → fires on keydown
+ *   data-action="actionName"              → fires on form submit
+ *
+ * data-event accepts multiple space-separated bindings on one element —
+ * needed for pointer drag, where pointerdown/pointermove/pointerup must all
+ * resolve on the same captured element:
+ *   data-event="pointerdown:start pointermove:drag pointerup:end"
  *
  * @param {HTMLElement} el
  * @param {function} dispatch
@@ -376,8 +402,8 @@ function bindEvents(el, dispatch, signal) {
     // Spec events
     const target = e.target?.closest?.('[data-event]')
     if (!target) return
-    const [type, name] = parseEventAttr(target.dataset.event)
-    if (type !== 'click') return
+    const name = findEventBinding(target, 'click')
+    if (!name) return
     e.preventDefault()
     dispatch(name, e)
   }, opts)
@@ -391,8 +417,8 @@ function bindEvents(el, dispatch, signal) {
     }
     const target = e.target?.closest?.('[data-event]')
     if (!target) return
-    const [type, name] = parseEventAttr(target.dataset.event)
-    if (type !== 'change') return
+    const name = findEventBinding(target, 'change')
+    if (!name) return
     dispatchTimed(target, name, e, dispatch)
   }, opts)
 
@@ -405,8 +431,8 @@ function bindEvents(el, dispatch, signal) {
     }
     const target = e.target?.closest?.('[data-event]')
     if (!target) return
-    const [type, name] = parseEventAttr(target.dataset.event)
-    if (type !== 'input') return
+    const name = findEventBinding(target, 'input')
+    if (!name) return
     dispatchTimed(target, name, e, dispatch)
   }, opts)
 
@@ -417,6 +443,57 @@ function bindEvents(el, dispatch, signal) {
     dispatch(target.dataset.action, new FormData(target))
     if (target.hasAttribute('data-reset')) target.reset()
   }, opts)
+
+  // Pointer events — click/input/change only cover discrete interactions.
+  // Continuous drag (grab a vertex, drag a slider handle, resize a panel) needs
+  // the raw pointer stream. pointerdown sets pointer capture on the target so
+  // pointermove/pointerup keep firing on it even once the cursor leaves the
+  // element's bounds — without capture, dragging fast loses the element under
+  // the cursor and the drag appears to "let go".
+  el.addEventListener('pointerdown', e => {
+    const target = e.target?.closest?.('[data-event]')
+    if (!target) return
+    const name = findEventBinding(target, 'pointerdown')
+    if (!name) return
+    target.setPointerCapture?.(e.pointerId)
+    dispatch(name, e)
+  }, opts)
+
+  el.addEventListener('pointermove', e => {
+    // Pointer capture routes the event straight to the captured target, so no
+    // closest() lookup is needed (and none would work once the cursor is
+    // outside the element's bounds).
+    const target = e.target
+    if (!target?.dataset?.event) return
+    const name = findEventBinding(target, 'pointermove')
+    if (!name) return
+    dispatchTimed(target, name, e, dispatch)
+  }, opts)
+
+  el.addEventListener('pointerup', e => {
+    const target = e.target
+    const name = target?.dataset?.event ? findEventBinding(target, 'pointerup') : null
+    if (name) dispatch(name, e)
+    target?.releasePointerCapture?.(e.pointerId)
+  }, opts)
+
+  // pointercancel fires instead of pointerup for interrupted gestures (browser
+  // gesture takeover, tab switch mid-drag, etc). Routed to the same handler
+  // as pointerup so a drag never gets stuck "in progress".
+  el.addEventListener('pointercancel', e => {
+    const target = e.target
+    const name = target?.dataset?.event ? findEventBinding(target, 'pointerup') : null
+    if (name) dispatch(name, e)
+    target?.releasePointerCapture?.(e.pointerId)
+  }, opts)
+
+  el.addEventListener('keydown', e => {
+    const target = e.target?.closest?.('[data-event]')
+    if (!target) return
+    const name = findEventBinding(target, 'keydown')
+    if (!name) return
+    dispatch(name, e)
+  }, opts)
 }
 
 /**
@@ -535,10 +612,44 @@ function morphAttrs(cur, nxt) {
     if (cur.tagName === 'DIALOG' && name === 'open') continue
     if (!nxt.hasAttribute(name)) cur.removeAttribute(name)
   }
+  syncFormProperty(cur, nxt)
 }
 
 /**
- * Parse a data-event attribute value.
+ * setAttribute('value', …) / setAttribute('checked', …) above only touch the
+ * *default* value/checkedness a form control resets to — not the live
+ * `.value`/`.checked` property the browser actually renders. Once a user has
+ * focused+edited a field (or any code has assigned `.value`/`.checked`
+ * directly), the attribute and the property permanently diverge — this is
+ * standard DOM behaviour, not a Pulse bug in the attribute-sync loop above.
+ * Re-rendering after that point (e.g. a `change:`-committed input, a value
+ * driven by a drag elsewhere on the page) would otherwise leave the field
+ * showing a stale value even though the attribute updated correctly. Sync
+ * the live property directly for the form-control elements where this
+ * matters, skipping the element the user is actively typing in — the
+ * common "don't destroy focus for a live input:-bound field" case already
+ * has its own guidance (use FormData, not a controlled value) but this
+ * covers every other legitimate re-render source.
+ */
+function syncFormProperty(cur, nxt) {
+  const tag = cur.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA') {
+    const type = cur.type
+    if (type === 'checkbox' || type === 'radio') {
+      const next = nxt.hasAttribute('checked')
+      if (cur.checked !== next) cur.checked = next
+    } else if (document.activeElement !== cur) {
+      const next = nxt.getAttribute('value') ?? ''
+      if (cur.value !== next) cur.value = next
+    }
+  } else if (tag === 'SELECT' && document.activeElement !== cur) {
+    const next = nxt.getAttribute('value')
+    if (next !== null && cur.value !== next) cur.value = next
+  }
+}
+
+/**
+ * Parse a single data-event binding.
  * "click:increment" → ['click', 'increment']
  * "increment"       → ['click', 'increment']  (click is default)
  *
@@ -551,6 +662,28 @@ function parseEventAttr(value) {
   return [parts[0], parts[1]]
 }
 
+/**
+ * Look up the mutation/action name bound to `eventType` on `target`'s
+ * data-event attribute. Supports multiple space-separated bindings on one
+ * element — needed for pointer drag, where pointerdown/pointermove/pointerup
+ * must all resolve on the same captured element:
+ *   data-event="pointerdown:start pointermove:drag pointerup:end"
+ * A plain single binding ("increment" or "change:setName") still works
+ * unchanged — split() on a string with no spaces returns a one-element array.
+ *
+ * @param {HTMLElement} target
+ * @param {string} eventType
+ * @returns {string|null}
+ */
+function findEventBinding(target, eventType) {
+  for (const binding of target.dataset.event.split(' ')) {
+    if (!binding) continue
+    const [type, name] = parseEventAttr(binding)
+    if (type === eventType) return name
+  }
+  return null
+}
+
 /**
  * Dispatch a mutation, applying debounce or throttle if declared on the element.
  * data-debounce="300" — waits 300ms after the last event before firing

package/src/runtime/runtime.test.js

@@ -54,6 +54,53 @@ function parseElements(html, selector) {
   return matches
 }
 
+/**
+ * A more realistic element for exercising bindEvents() delegation directly —
+ * unlike FakeElement above (which stubs addEventListener as a no-op and is
+ * only used to assert on rendered innerHTML), this one wires real listeners
+ * via the native EventTarget and supports closest()/dataset/pointer capture,
+ * so pointerdown/pointermove/pointerup/keydown routing can be verified.
+ */
+class DelegatingElement extends EventTarget {
+  constructor() {
+    super()
+    this.innerHTML = ''
+    this._captured = new Map()
+  }
+}
+
+class ChildElement extends EventTarget {
+  constructor(attrs = {}, parent = null) {
+    super()
+    this.dataset = {}
+    for (const [k, v] of Object.entries(attrs)) this.dataset[k] = v
+    this._parent = parent
+  }
+  closest(selector) {
+    const attr = selector.match(/\[([^\]]+)\]/)?.[1]
+    const key  = attr === 'data-event' ? 'event'
+      : attr === 'data-action' ? 'action'
+      : attr === 'data-store-event' ? 'storeEvent'
+      : attr === 'data-dialog-open' ? 'dialogOpen'
+      : attr === 'data-dialog-close' ? 'dialogClose'
+      : null
+    let node = this
+    while (node) {
+      if (key && node.dataset && node.dataset[key] !== undefined) return node
+      node = node._parent
+    }
+    return null
+  }
+  setPointerCapture(id) { this._root?._captured.set(id, this) }
+  releasePointerCapture(id) { this._root?._captured.delete(id) }
+}
+
+function fireOn(root, target, type, props = {}) {
+  const event = Object.assign(new Event(type, { bubbles: true }), props)
+  Object.defineProperty(event, 'target', { value: target, configurable: true })
+  root.dispatchEvent(event)
+}
+
 // ---------------------------------------------------------------------------
 // Test runner
 // ---------------------------------------------------------------------------
@@ -866,5 +913,157 @@ await testAsync('_toast in onError is stripped from spec state', async () => {
 
 // ---------------------------------------------------------------------------
 
+console.log('\nPointer / keyboard event binding\n')
+
+test('pointerdown dispatches mutation and captures the pointer', () => {
+  const el = new DelegatingElement()
+  const dragSpec = {
+    route: '/drag',
+    state: { dragging: false },
+    view: (state) => `<div data-event="pointerdown:startDrag">${state.dragging}</div>`,
+    mutations: { startDrag: (state) => ({ dragging: true }) },
+  }
+  mount(dragSpec, el)
+
+  const child = new ChildElement({ event: 'pointerdown:startDrag' })
+  child._root = el
+  let captured = null
+  child.setPointerCapture = (id) => { captured = id }
+  fireOn(el, child, 'pointerdown', { pointerId: 1 })
+
+  assert(el.innerHTML.includes('true'), `Expected dragging=true, got: ${el.innerHTML}`)
+  assert(captured === 1, `Expected pointer capture with id 1, got ${captured}`)
+})
+
+test('pointermove dispatches mutation while captured, ignores elements without data-event', () => {
+  const el = new DelegatingElement()
+  const dragSpec = {
+    route: '/drag-move',
+    state: { x: 0 },
+    view: (state) => `<div data-event="pointermove:move">${state.x}</div>`,
+    mutations: { move: (state, e) => ({ x: e.clientX }) },
+  }
+  mount(dragSpec, el)
+
+  const child = new ChildElement({ event: 'pointermove:move' })
+  child._root = el
+  fireOn(el, child, 'pointermove', { clientX: 42 })
+  assert(el.innerHTML.includes('42'), `Expected x=42, got: ${el.innerHTML}`)
+
+  const plainChild = new ChildElement({})
+  plainChild._root = el
+  fireOn(el, plainChild, 'pointermove', { clientX: 999 })
+  assert(el.innerHTML.includes('42'), `Element without data-event should not dispatch: ${el.innerHTML}`)
+})
+
+test('pointerup dispatches mutation and releases capture', () => {
+  const el = new DelegatingElement()
+  const dragSpec = {
+    route: '/drag-up',
+    state: { dragging: true },
+    view: (state) => `<div data-event="pointerup:endDrag">${state.dragging}</div>`,
+    mutations: { endDrag: () => ({ dragging: false }) },
+  }
+  mount(dragSpec, el)
+
+  const child = new ChildElement({ event: 'pointerup:endDrag' })
+  child._root = el
+  let released = null
+  child.releasePointerCapture = (id) => { released = id }
+  fireOn(el, child, 'pointerup', { pointerId: 7 })
+
+  assert(el.innerHTML.includes('false'), `Expected dragging=false, got: ${el.innerHTML}`)
+  assert(released === 7, `Expected pointer capture released with id 7, got ${released}`)
+})
+
+test('pointercancel dispatches the same mutation as pointerup and releases capture', () => {
+  const el = new DelegatingElement()
+  const dragSpec = {
+    route: '/drag-cancel',
+    state: { dragging: true },
+    view: (state) => `<div data-event="pointerup:endDrag">${state.dragging}</div>`,
+    mutations: { endDrag: () => ({ dragging: false }) },
+  }
+  mount(dragSpec, el)
+
+  const child = new ChildElement({ event: 'pointerup:endDrag' })
+  child._root = el
+  let released = null
+  child.releasePointerCapture = (id) => { released = id }
+  fireOn(el, child, 'pointercancel', { pointerId: 3 })
+
+  assert(el.innerHTML.includes('false'), `Expected dragging=false after cancel, got: ${el.innerHTML}`)
+  assert(released === 3, `Expected pointer capture released on cancel, got ${released}`)
+})
+
+test('keydown dispatches mutation with the key', () => {
+  const el = new DelegatingElement()
+  const keySpec = {
+    route: '/key',
+    state: { key: '' },
+    view: (state) => `<div data-event="keydown:onKey">${state.key}</div>`,
+    mutations: { onKey: (state, e) => ({ key: e.key }) },
+  }
+  mount(keySpec, el)
+
+  const child = new ChildElement({ event: 'keydown:onKey' })
+  child._root = el
+  fireOn(el, child, 'keydown', { key: 'ArrowLeft' })
+
+  assert(el.innerHTML.includes('ArrowLeft'), `Expected key=ArrowLeft, got: ${el.innerHTML}`)
+})
+
+test('data-event supports multiple space-separated bindings on one element', () => {
+  const el = new DelegatingElement()
+  const dragSpec = {
+    route: '/drag-multi',
+    state: { dragging: false, x: 0 },
+    view: (state) => `<div data-event="pointerdown:startDrag pointermove:dragMove pointerup:endDrag">${state.dragging}:${state.x}</div>`,
+    mutations: {
+      startDrag: () => ({ dragging: true }),
+      dragMove:  (state, e) => state.dragging ? { x: e.clientX } : {},
+      endDrag:   () => ({ dragging: false }),
+    },
+  }
+  mount(dragSpec, el)
+
+  const child = new ChildElement({ event: 'pointerdown:startDrag pointermove:dragMove pointerup:endDrag' })
+  child._root = el
+
+  fireOn(el, child, 'pointerdown', { pointerId: 1 })
+  assert(el.innerHTML.includes('true:0'), `Expected dragging=true, got: ${el.innerHTML}`)
+
+  fireOn(el, child, 'pointermove', { clientX: 55 })
+  assert(el.innerHTML.includes('true:55'), `Expected x=55 while dragging, got: ${el.innerHTML}`)
+
+  fireOn(el, child, 'pointerup', { pointerId: 1 })
+  assert(el.innerHTML.includes('false:55'), `Expected dragging=false, got: ${el.innerHTML}`)
+
+  // pointermove after release is a no-op because the mutation gates on `dragging`
+  fireOn(el, child, 'pointermove', { clientX: 999 })
+  assert(el.innerHTML.includes('false:55'), `Expected no change after release, got: ${el.innerHTML}`)
+})
+
+test('pointerdown/pointerup ignore wrong event type on the same element', () => {
+  const el = new DelegatingElement()
+  const spec = {
+    route: '/only-down',
+    state: { count: 0 },
+    view: (state) => `<div data-event="pointerdown:bump">${state.count}</div>`,
+    mutations: { bump: (state) => ({ count: state.count + 1 }) },
+  }
+  mount(spec, el)
+
+  const child = new ChildElement({ event: 'pointerdown:bump' })
+  child._root = el
+  fireOn(el, child, 'pointerup', { pointerId: 1 })   // wrong type — should not fire
+  assert(el.innerHTML.includes('>0<'), `Should not have dispatched on pointerup: ${el.innerHTML}`)
+
+  fireOn(el, child, 'pointerdown', { pointerId: 1 }) // correct type — should fire
+  assert(el.innerHTML.includes('>1<'), `Expected count 1, got: ${el.innerHTML}`)
+})
+
+// ---------------------------------------------------------------------------
+
 console.log(`\n${passed + failed} tests: ${passed} passed, ${failed} failed\n`)
 if (failed > 0) process.exit(1)

package/src/runtime/ssr.js

@@ -365,7 +365,7 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
     : ''
 
   const styleLinks = (meta.styles || [])
-    .map((href, i) => `<link rel="stylesheet" href="${esc(href)}"${i === 0 ? ' fetchpriority="high"' : ''}>`)
+    .map((href, i) => `<link rel="stylesheet" href="${esc(href)}"${i < 2 ? ' fetchpriority="high"' : ''}>`)
     .join('\n  ')
 
   // Deferred styles — injected via a nonce'd script so CSP is respected.
@@ -461,23 +461,30 @@ function mergeStoreKeys(spec, serverState, storeState) {
 /**
  * Merge per-request extras set by the server into the view's server state:
  *
- *   ctx._form      → serverState.form  — the return value of spec.submit() on a
+ *   ctx._form      → serverState.form   — the return value of spec.submit() on a
  *                    POST re-render (validation errors, submitted values, etc.)
- *   ctx._csrfField → serverState.csrf  — ready-to-embed hidden <input> for CSRF;
+ *   ctx._csrfField → serverState.csrf   — ready-to-embed hidden <input> for CSRF;
  *                    views include it inside <form method="POST"> as ${server.csrf}
+ *   ctx.nonce      → serverState.nonce  — the per-request CSP nonce, for views that
+ *                    need to hand-write a <script nonce="${server.nonce}"> tag (e.g.
+ *                    third-party scripts like AdSense/GTM that require an inline
+ *                    snippet the framework itself doesn't generate). ctx.nonce is
+ *                    always set (buildContext defaults it to '' if none was passed),
+ *                    so this key is always present — unlike form/csrf, which are
+ *                    conditional on spec.submit.
  *
- * Only set by the server for specs that declare `submit` — other pages see
- * neither key. Explicit server fetcher keys with the same names win.
+ * Explicit server fetcher keys with the same names win over all of the above.
  *
  * @param {Object} serverState
  * @param {Object} ctx
  * @returns {Object}
  */
 function applyCtxExtras(serverState, ctx) {
-  if (ctx?._form === undefined && ctx?._csrfField === undefined) return serverState
+  if (ctx?._form === undefined && ctx?._csrfField === undefined && !ctx?.nonce) return serverState
   const extras = {}
   if (ctx._form      !== undefined) extras.form = ctx._form
   if (ctx._csrfField !== undefined) extras.csrf = ctx._csrfField
+  if (ctx.nonce)                    extras.nonce = ctx.nonce
   return { ...extras, ...serverState }
 }
 

package/src/runtime/ssr.test.js

@@ -139,6 +139,37 @@ await test('passes ctx to server data fetchers', async () => {
   assert(html.includes('Hello Andy'), `Got: ${html}`)
 })
 
+await test('exposes ctx.nonce to the view as server.nonce', async () => {
+  // Regression: ctx.nonce was already available to guard/server fetchers
+  // (buildContext sets it directly on ctx), but never reached the view
+  // itself — there was no documented way for a hand-written <script> tag
+  // (e.g. third-party scripts like AdSense that require an inline snippet
+  // the framework doesn't generate) to receive the per-request CSP nonce.
+  const spec = {
+    route: '/ads',
+    state: {},
+    view: (s, server) => `<script nonce="${server.nonce}">/* ad init */</script>`,
+  }
+  const { html } = await renderToString(spec, { nonce: 'abc123' })
+  assert(html.includes('nonce="abc123"'), `Got: ${html}`)
+})
+
+await test('server.nonce is absent (not empty string) when ctx.nonce is unset', async () => {
+  const { serverState } = await renderToString(helloSpec, {})
+  assert(serverState.nonce === undefined, `Expected no nonce key, got: ${serverState.nonce}`)
+})
+
+await test('an explicit server.nonce fetcher wins over ctx.nonce', async () => {
+  const spec = {
+    route: '/custom-nonce',
+    state: {},
+    server: { nonce: async () => 'explicit-value' },
+    view: (s, server) => `<p>${server.nonce}</p>`,
+  }
+  const { serverState } = await renderToString(spec, { nonce: 'from-ctx' })
+  assert(serverState.nonce === 'explicit-value', `Got: ${serverState.nonce}`)
+})
+
 await test('returns serverState from resolved fetchers', async () => {
   const { serverState } = await renderToString(serverDataSpec)
   assert(Array.isArray(serverState.products), 'Expected products array')