sygnal 6.5.0 → 7.0.0

package/src/core/instance.ts

@@ -15,7 +15,7 @@
  */
 import xs from '../extra/xstreamCompat'
 import {StateSource} from '../cycle/state/StateSource'
-import {uidPart} from '../shared'
+import {uidPart, BINDING} from '../shared'
 import {warn, error as logError, fail} from '../extra/diagnostics/legacy'
 import type {App} from './runtime'
 import {tearDown, INST, SEED} from './teardown'
@@ -29,6 +29,20 @@ import {attach, detach} from './statics'
 import {dbg} from './debug'
 import {sameData} from '../cycle/dom/utils'
 
+// v7: a known binding target joins key/id/path in the lifetime identity. Fresh equivalent
+// byId helpers retain identity; opaque lenses need an explicit key for a new target.
+function bindingChanged(a: any, b: any): boolean {
+  if (a === b) return false
+  const x = a?.[BINDING], y = b?.[BINDING]
+  return x && y ? !x.every((v: any, i: number) => Object.is(v, y[i]))
+    : !!(x || y || typeof a == 'string' || typeof b == 'string' || a === undefined || b === undefined)
+}
+
+function bindingState(k: any): any {
+  const c = k.base || k.cell || k.arr
+  return c && (c.has?.() ?? c.get() !== undefined) ? (k.cell || k.arr).get() : undefined
+}
+
 const ERR_FIX = 'See the attached error'
 
 // 4-I G-557: a fragment root (a Collection's): each of its top-level elements is marked.
@@ -65,8 +79,8 @@ const idOf = (n: any, path: string) => {
 }
 
 /**
- * a component vnode's props, without `resetState` (D174: read at creation, like `state`, never a
- * prop of the child)
+ * a component vnode's props, without `resetState` (D174: read at creation, never a
+ * prop of the child). Known `state` target changes start a new lifetime in v7.
  */
 function propsOf(p: any) {
   if (!p) return {}
@@ -118,12 +132,15 @@ const ALL = '\u0000all'
 
 let IDS = 0
 
-/** a child that failed to instantiate: renders the owner's error fallback (SYG408) */
+/**
+ * a child that failed to instantiate: renders the owner's error fallback (SYG408). It keeps its
+ * props, so only a changed binding target makes another attempt (not every owner render)
+ */
 class Failed {
   last: any; lr = true; ready = true; def: any = null; disposed = false; shown = true
-  constructor(public outv: any) {}
+  constructor(public outv: any, public props?: any) {}
   render() { return this.outv }
-  setProps() {}
+  setProps(p: any) { this.props = p }
   dispose() {}
 }
 
@@ -144,6 +161,8 @@ export class Inst {
   raw!: any[]
   slots: Record<string, any[]> = {}
   kids = new Map<string, any>()
+  /** the children with a string / byId binding: the presence scan's (notify) */
+  bound?: Set<any>
   uidBase: string
   /** the parent's view of this instance's output (last vnode / READY it injected) */
   last: any; lr = true
@@ -177,7 +196,7 @@ export class Inst {
   rep: any[] | null = null
 
   constructor(
-    public app: App, public def: CoreDef, public parent: Inst | null, base: Cell,
+    public app: App, public def: CoreDef, public parent: Inst | null, public base: Cell,
     public dom: any, props: Record<string, any>, children: any[], public scope: string | undefined,
     uidBase: string, public kind: 'root' | 'child' | 'item' | 'page' = parent ? 'child' : 'root', reset = false,
   ) {
@@ -285,8 +304,26 @@ export class Inst {
   }
   /** called after each action and before each render pass: STATE.stream emits a new state */
   notify() {
-    const v = this.cell.raw()
-    if (v !== this.stLast && v !== undefined) { this.stLast = v; this.st$.shamefullySendNext(v) }
+    // A completed action can remove and reinsert a target before the next render. Owners
+    // observe each transition, including hidden pages; the current action finishes first.
+    // only the bound children (a string / byId binding), not every child
+    if (this.bound) for (const k of this.bound) {
+      if (k.disposed) { this.bound.delete(k); continue }
+      const previous = k.bs, state = k.bs = bindingState(k)
+      if (previous !== undefined && state === undefined) {
+        // Cleanup reads its last owned snapshot. A dying path must not recreate the
+        // deleted target; the fresh lifetime receives a new writable cell at reconciliation.
+        const cell = k.cell || k.arr
+        cell.get = () => previous
+        cell.set = () => {}
+        k.dispose()
+        this.forced = true
+      }
+    }
+    if (this.st$) {
+      const v = this.cell.raw()
+      if (v !== this.stLast && v !== undefined) { this.stLast = v; this.st$.shamefullySendNext(v) }
+    }
   }
   dispose$() {
     return this.disp$ ||= xs.create()
@@ -495,9 +532,16 @@ export class Inst {
         let view = data.c
         if (view) for (const r of resolvers) view = r(view, this) || view
         let k = this.kids.get(id)
-        if (k && view && k.def && k.def.view !== view) { k.dispose(); this.kids.delete(id); k = undefined }
+        // Collection and VirtualCollection share an array cell; Switchable binds `state`.
+        const binding = host && sel != 'switchable' ? 'from' : 'state'
+        if (k && (k.disposed || (view && k.def && k.def.view !== view) || bindingChanged(k.props?.[binding], props[binding]))) { k.dispose(); this.kids.delete(id); k = undefined }
         if (k) k.setProps(props, children, n, id)
-        else this.kids.set(id, host ? this.host(host, props, children, id, n) : this.child(view, props, children, id, !!data.props?.resetState))
+        else this.kids.set(id, k = host ? this.host(host, props, children, id, n) : this.child(view, props, children, id, !!data.props?.resetState))
+        if (typeof props[binding] == 'string' || props[binding]?.[BINDING]) {
+          k.bs = bindingState(k)
+          ;(this.bound ||= new Set()).add(k)
+          this.app.watchers.add(this)
+        }
         return
       }
       if (posts[sel] && !(ps ||= []).includes(sel)) ps.push(sel)
@@ -511,11 +555,11 @@ export class Inst {
 
   /** a host (Collection, Switchable); one that throws renders the owner's error fallback (SYG408) */
   host(make: any, props: Record<string, any>, children: any[], id: string, n: any): any {
-    try { return make(this, props, children, id, n) } catch (err) { return this.failed(err) }
+    try { return make(this, props, children, id, n) } catch (err) { return this.failed(err, props) }
   }
 
   /** the owner's error fallback for a child that failed to instantiate (SYG408) */
-  failed(err: any): Failed {
+  failed(err: any, props?: any): Failed {
     const e = err instanceof Error ? err : new Error(String(err))
     let out: any = errorDiv(this.def.name)
     if (this.def.onError) {
@@ -523,7 +567,7 @@ export class Inst {
       catch (fe) { logError('SYG407', this, 'onError threw; rendering an empty error <div>', 'Make onError return a vnode', fe) }
     }
     this.app.caught(this, 'SYG408', 'Sub-component threw; rendering the error fallback', e, 'instantiate')
-    return new Failed(out)
+    return new Failed(out, props)
   }
 
   /** a tag child: state="key" | state={lens} | none (the parent's state) | isolatedState (D174: `resetState`) */
@@ -543,7 +587,7 @@ export class Inst {
       return new Inst(app, def, this, cell, this.dom && this.dom.isolateSource(this.dom, scope), props, children, scope,
         this.uid(uidPart(id.replace(/.*::(r\.)?/, ''))), 'child', reset)
     } catch (err) {
-      return this.failed(err)
+      return this.failed(err, props)
     }
   }
 
@@ -589,7 +633,7 @@ export class Inst {
     const subs = this.subs
     if (subs.length) tearDown(() => { for (const s of subs) s.unsubscribe() }, app.dq, this)
     this.subs = []
-    if (this.st$) app.watchers.delete(this)
+    app.watchers.delete(this)
     this.hub = null
   }
 }

package/src/core/runtime.ts

@@ -96,6 +96,8 @@ export class App {
   /** run()'s hooks, then each addHooks() layer (G-297) */
   layers: Hooks[]
   born: Inst[] = []
+  /** Last state version delivered to stream listeners and binding owners. */
+  nv?: number
   watchers = new Set<Inst>()
   /** streams the disposed instances left without listeners, stopped when the drain / flush ends */
   dq: any[] = []
@@ -185,6 +187,8 @@ export class App {
   }
   /** STATE.stream: the instances whose state changed emit it */
   notify() {
+    if (this.nv === this.ver) return
+    this.nv = this.ver
     for (const i of this.watchers) i.notify()
   }
 
@@ -280,7 +284,7 @@ export class App {
         this.ran = false
         this.last = v
         this.hooks.onPatch?.(v)
-        this.vdomL?.next(v)
+        this.vdomL?.next(v ?? null)
       }
       if (this.dq.length) this.stopLater()
     } finally {

package/src/core/view.ts

@@ -14,6 +14,8 @@ class View implements InstanceView {
   get state() { return this.i.cell.get() }
   get props() { return this.i.props }
   get context() { return this.i.context() }
+  /** D530: the context keys the last render's view read (null: none rendered, or no context) */
+  get reads() { return this.i.keys }
   get isRoot() { return !this.i.parent }
   get kind() { return this.i.kind }
   /** false on a hidden Switchable page and below it */

package/src/cycle/dom/utils.ts

@@ -88,9 +88,11 @@ export function makeInsert(
 }
 
 // G-261: a DOM change Sygnal makes outside a patch (a Transition's leave, a Portal mounted late)
-// re-emits the DOM source of the app whose root contains `el` (makeDOMDriver listens on its root)
+// re-emits the DOM source of the app whose root contains `el` (makeDOMDriver listens on its root).
+// The event comes from the element's own window: jsdom refuses an `Event` from another realm (a
+// Transition's leave timer that fires after a jsdom test environment was torn down)
 export const POKE = 'sygnal-dom';
-export const pokeDOM = (el: any): any => el?.dispatchEvent(new Event(POKE, {bubbles: true}));
+export const pokeDOM = (el: any): any => el?.dispatchEvent(new (el.ownerDocument?.defaultView?.Event || Event)(POKE, {bubbles: true}));
 
 const obj = (o: any) => o !== null && typeof o == 'object' && !Array.isArray(o);
 /**

package/src/devtools.d.ts

@@ -168,3 +168,16 @@ export declare function installMcpBridge(
   hot: { on(event: string, cb: (data: any) => void): void; send(event: string, data?: any): void } | undefined,
   options?: McpBridgeOptions
 ): void
+
+// ── PLAN-10 P-2: the app side of sygnal/vite's graph page (/__sygnal/graph) ──
+
+export interface GraphBridgeOptions {
+  /** The BroadcastChannel the graph page listens on (default 'sygnal:graph') */
+  channel?: string
+}
+/**
+ * Answer the dev server's graph page ("Live data": instances, action flashes, state) over a
+ * same-origin BroadcastChannel. sygnal/vite calls it in dev while the graph route is on (the
+ * default; `graph: false` turns it off); you don't call it yourself.
+ */
+export declare function installGraphBridge(options?: GraphBridgeOptions): void

package/src/devtools.ts

@@ -35,3 +35,6 @@ export function copyAsTest(target?: any, options?: CopyAsTestOptions): string {
 
 // PLAN-6 E-1: the page side of sygnal/vite's dev MCP endpoint (`sygnal({ mcp: true })`)
 export {installMcpBridge} from './extra/devMcp'
+
+// PLAN-10 P-2 (D544): the app side of the graph page's "Live data" (sygnal/vite's /__sygnal/graph)
+export {installGraphBridge} from './extra/devGraph'

package/src/extra/ai/chat/behavior.ts

@@ -92,7 +92,7 @@
  * closed as not run, an app confirm dropped (a server approval stays answerable), and a card that
  * was composing composed again; open client calls stay answerable.
  */
-import {defineBehavior} from '../../behaviors'
+import {defineBehavior, fromPrevious} from '../../behaviors'
 import {ABORT} from '../../../shared'
 import {report} from '../../diagnostics/index'
 import xs from '../../xstreamCompat'
@@ -529,7 +529,7 @@ export const chat = (options: any = {}): any => {
         ...(c.ask?.controls && DOM && {CONTROL: DOM.select('[data-compose-control]').events('click').map(controlOf).filter((x: any) => !!x)}),
       }
     },
-    model: {
+    model: fromPrevious({
       PROMPT: (s: any, p: any) => typeof p == 'string' && p !== s.prompt ? {...s, prompt: p} : ABORT,
       SEND: {
         STATE: (s: any, d: any) => sendStep(s, d) || ABORT,
@@ -609,7 +609,7 @@ export const chat = (options: any = {}): any => {
         ANSWER: {STATE: stateOf(S.answerCard), ...sinks(S.answerCard)},
         CONTROL: (s: any, d: any) => S.controlStep(s, d) || ABORT,
       }),
-    },
+    }),
   })(options)
   // the `prompt` option is a selector, not the slice's start value (defineBehavior's option override)
   b.state = {...b.state, prompt: ''}

package/src/extra/ai/commandBar.ts

@@ -48,7 +48,7 @@
  * It reaches the runtime through the shared link (./link.ts, D283), as `chat` does.
  */
 import xs from 'xstream'
-import {defineBehavior} from '../behaviors'
+import {defineBehavior, fromPrevious} from '../behaviors'
 import {ABORT} from '../../shared'
 import {agentTools, labelsUntrusted} from './agent/index'
 import {decide as decideRequest} from './decide'
@@ -242,7 +242,7 @@ export const commandBar = (options: any = {}): any => {
         ...(deny && {DENY: on(DOM, deny)}),
       }
     },
-    model: {
+    model: fromPrevious({
       INPUT: (s: any, v: any) => typeof v == 'string' && v !== s.text ? {...s, text: v} : ABORT,
       RUN: {
         STATE: (s: any, d: any, _n: any, p: any, o: any, k: string) => runStep(s, d, E(p, k, o))?.s || ABORT,
@@ -275,7 +275,7 @@ export const commandBar = (options: any = {}): any => {
       // a command ran (or was refused): the result; the input is cleared when it was this command
       DONE: (s: any, d: any) => s.status != 'running' ? ABORT
         : {...s, status: 'ready', command: null, pending: null, result: d, text: d?.ok && s.text.trim() === d.command ? '' : s.text},
-    },
+    }),
   })(options)
   return linked(b)
 }

package/src/extra/ai/compose/behavior.ts

@@ -34,7 +34,7 @@
  * reads it as `props.state` (the pre-action state), and one memo per behavior value makes STATE,
  * the sink and EFFECT of one action compute the same step.
  */
-import {defineBehavior} from '../../behaviors'
+import {defineBehavior, fromPrevious} from '../../behaviors'
 import {ABORT} from '../../../shared'
 import {fail} from '../../diagnostics/legacy'
 import {finish, fromTree, removeNode, toTree} from './layout'
@@ -144,7 +144,7 @@ export function composeBehavior(catalog: Catalog, options: any = {}): any {
           .map(({key, name, value}: any) => ({key, name, value}))}),
       }
     },
-    model: {
+    model: fromPrevious({
       PROMPT: (s: any, p: any) => typeof p == 'string' && p !== s.prompt ? {...s, prompt: p} : ABORT,
       COMPOSE: {HOST: host(start), [S]: sink(start)},
       REPLY: {
@@ -178,6 +178,6 @@ export function composeBehavior(catalog: Catalog, options: any = {}): any {
       CONTROL: (s: any, c: any) => c && typeof c.key == 'string' && typeof c.name == 'string'
         ? {...s, ui: {...s.ui, [c.key]: {...s.ui?.[c.key], [c.name]: c.value}}} : ABORT,
       DONE: () => ABORT,
-    },
+    }),
   })(rest)
 }

package/src/extra/ai/transports/shared.ts

@@ -60,8 +60,12 @@ export async function post(url: string, body: any, req: any, signal: AbortSignal
   return res;
 }
 
-/** the SSE frames of a response body: `{ event, data }` (data: the joined data lines) */
-export async function* sse(res: any): AsyncGenerator<{event: string; data: string}> {
+/**
+ * the SSE frames of a response body: `{ event, data }` (data: the joined data lines). PLAN-11
+ * E-1: `meta` (optional) follows the stream's `id` (the last event id, kept across frames) and
+ * `retry` (ms) fields, as EventSource does, for a reconnect
+ */
+export async function* sse(res: any, meta?: {id?: string; retry?: number}): AsyncGenerator<{event: string; data: string}> {
   const reader = res.body.getReader(), dec = new TextDecoder();
   let buf = '', cr = '', done = false;
   try {
@@ -84,6 +88,8 @@ export async function* sse(res: any): AsyncGenerator<{event: string; data: strin
           const v = c < 0 ? '' : line.slice(c + 1).replace(/^ /, '');
           if (field == 'event') event = v;
           else if (field == 'data') data.push(v);
+          else if (meta && field == 'id' && !v.includes('\0')) meta.id = v;
+          else if (meta && field == 'retry' && /^\d+$/.test(v)) meta.retry = +v;
         }
         if (data.length) yield {event, data: data.join('\n')};
       }

package/src/extra/behaviors.ts

@@ -45,6 +45,27 @@
  */
 import xs from './xstreamCompat'
 import {isAbort} from '../shared'
+/** A behavior output's slice from before the action (outputs get the updated one): for a transition shared with STATE */
+export const was = (s: any, p: any, k: string) => p?.previousState ? p.previousState[k] : s
+/**
+ * A behavior model whose outputs compute from the state before the action (its slice and
+ * `props.state`), for behaviors whose STATE and outputs share one transition; STATE / HOST as is
+ */
+export const fromPrevious = (model: any) => {
+  const out: any = {}
+  for (const a in model) {
+    const e = model[a]
+    if (!e || typeof e != 'object') { out[a] = e; continue }
+    const m: any = {}
+    for (const s in e) {
+      const f = e[s]
+      m[s] = s == 'STATE' || s == 'HOST' || typeof f != 'function' ? f
+        : (x: any, d: any, n: any, p: any, o: any, k: string) => f(was(x, p, k), d, n, p?.previousState ? {...p, state: p.previousState} : p, o, k)
+    }
+    out[a] = m
+  }
+  return out
+}
 // a model entry as { sink: fn }: a constant is sent as is, `true` sends the action's data, an
 // EFFECT constant does nothing (as the core treats them)
 const sinksOf = (e: any, S: string): any => {

package/src/extra/devGraph.ts

@@ -0,0 +1,111 @@
+/**
+ * PLAN-10 P-2 (D544): the app side of the graph page's "Live data" (sygnal/vite serves the page at
+ * `/__sygnal/graph` in dev, W-2 / D543). Dev only: it is part of the 'sygnal/devtools' entry, and
+ * sygnal/vite's 'virtual:sygnal/graph' module (served by the dev server, never in a build) calls
+ * installGraphBridge().
+ *
+ * The page is served by the dev server on the app's own origin, so the two talk over a
+ * BroadcastChannel ('sygnal:graph'): no server round trip, no HMR traffic, nothing a page on
+ * another origin can join. Every message carries `v: 1`.
+ *
+ *   page → apps  { type: 'who', watch? }          every 2 s while the page is open; `watch` names
+ *                                                 the tab the page follows (it keeps that tab
+ *                                                 sending for 6 s)
+ *   app  → page  { type: 'here', tab, url, title, at, ok }   the answer, and on load / focus
+ *                                                 (`at`: when the tab was last loaded or focused;
+ *                                                 `ok`: inspect() is there, i.e. diagnostics on)
+ *   app  → page  { type: 'graph', tab, graph }    inspect({ actions: 200 }) of the page's apps, JSON
+ *                                                 safe: when it starts being watched, then 150 ms
+ *                                                 after the last action or component change
+ *   app  → page  { type: 'action', tab, record }  { type, instance, component } at once (a flash)
+ *   page → app   { type: 'get-state', tab, req, id }   an instance's state
+ *   app  → page  { type: 'state', tab, req, id, value?, error? }
+ *   app  → page  { type: 'bye', tab }             the tab is going away (pagehide)
+ *
+ * State values go through the DevTools preview (JSON safe, as the MCP tools send them). The static
+ * keys the page joins on are on the component functions (sygnal/vite's dev transform) and come out
+ * of inspect() as `key`.
+ */
+import {getDevTools} from './devtools'
+import {onAction} from './devtoolsActions'
+import {addLayer} from './devtoolsNext'
+import {pageTools, trackApps} from './devMcp'
+
+export const GRAPH_CHANNEL = 'sygnal:graph'
+const WATCH_MS = 6000
+const SETTLE_MS = 150
+
+export interface GraphBridgeOptions {
+  /** the BroadcastChannel name (default 'sygnal:graph') */
+  channel?: string
+}
+
+let installed = false
+
+/** Connect this page to the graph page's "Live data" (sygnal/vite calls it in dev). Once per page. */
+export function installGraphBridge(options: GraphBridgeOptions = {}): void {
+  const g: any = globalThis
+  if (installed || typeof g.BroadcastChannel != 'function' || !g.window) return
+  installed = true
+  trackApps()
+  const bc = new g.BroadcastChannel(options.channel || GRAPH_CHANNEL)
+  const tab = Math.random().toString(36).slice(2, 10) + Date.now().toString(36)
+  const tools = pageTools({})
+  let at = Date.now()
+  let watchedUntil = 0
+  let timer: any = 0
+
+  const inspect = () => {
+    const f = g.__SYGNAL_DIAGNOSTICS__?.inspect || (getDevTools() as any)?.inspect
+    return typeof f == 'function' ? f : null
+  }
+  const post = (m: any) => { try { bc.postMessage({v: 1, tab, ...m}) } catch (_) { /* closed */ } }
+  const here = () => post({type: 'here', url: String(g.location?.href || ''), title: String(g.document?.title || ''), at, ok: !!inspect()})
+  const watched = () => Date.now() < watchedUntil
+
+  const sendGraph = () => {
+    clearTimeout(timer)
+    timer = 0
+    const f = inspect()
+    if (!watched() || !f) return
+    let graph: any
+    try { graph = JSON.parse(JSON.stringify(f({actions: 200}))) } catch (_) { return }
+    post({type: 'graph', graph})
+  }
+  const settle = () => {
+    if (!watched()) return
+    clearTimeout(timer)
+    timer = setTimeout(sendGraph, SETTLE_MS)
+  }
+  const watch = () => {
+    const was = watched()
+    watchedUntil = Date.now() + WATCH_MS
+    if (!was) sendGraph()
+  }
+
+  bc.onmessage = (e: any) => {
+    const m = e && e.data
+    if (!m || m.v !== 1 || typeof m.type != 'string') return
+    if (m.type == 'who') {
+      if (m.watch === tab) watch()
+      here()
+    } else if (m.type == 'get-state' && m.tab === tab) {
+      let value: any, error: string | undefined
+      try { value = (tools.get_state({component: String(m.id)}, m.req) as any).state } catch (err: any) { error = String(err?.message || err) }
+      post({type: 'state', req: m.req, id: m.id, ...(error ? {error} : {value})})
+    }
+  }
+
+  onAction((a: any, kind) => {
+    if (!watched()) return
+    if (kind == 'add' && a) post({type: 'action', record: {type: a.type, instance: String(a.instance), component: a.component}})
+    settle()
+  })
+  addLayer(() => ({onCreate: settle, onDispose: settle}))
+
+  const seen = () => { at = Date.now(); here() }
+  g.addEventListener?.('focus', seen)
+  g.document?.addEventListener?.('visibilitychange', () => { if (g.document.visibilityState == 'visible') seen() })
+  g.addEventListener?.('pagehide', () => post({type: 'bye'}))
+  here()
+}

package/src/extra/devMcp.ts

@@ -91,7 +91,7 @@ function appLayer(api: any) {
   }
 }
 
-function trackApps() {
+export function trackApps(): void {
   if (tracking) return
   tracking = true
   addLayer(appLayer)

package/src/extra/devtools.ts

@@ -146,6 +146,24 @@ export class SygnalDevTools {
       case 'GET_STATE':
         this._sendComponentState(msg.payload.componentId);
         break;
+      case 'GET_GRAPH':
+        this._post('GRAPH', this._graph(msg.payload));
+        break;
+    }
+  }
+
+  /**
+   * PLAN-10 P-1: the runtime app graph for the panel's App graph view: inspect() with the recent
+   * actions, JSON-safe. inspect() is on this object only when 'sygnal/diagnostics' is loaded
+   * (sygnal/vite loads it in dev); without it the panel shows why.
+   */
+  _graph(opts?: {actions?: number}): {graph: any; reason?: string; message?: string} {
+    const inspect = (this as any).inspect;
+    if (typeof inspect !== 'function') return {graph: null, reason: 'no-diagnostics'};
+    try {
+      return {graph: JSON.parse(JSON.stringify(inspect({actions: opts?.actions ?? 200})))};
+    } catch (e: any) {
+      return {graph: null, reason: 'error', message: String(e?.message ?? e)};
     }
   }
 

package/src/extra/diagnostics/checks/fetch.ts

@@ -12,6 +12,9 @@
  * SYG635 — `cache: true` / `staleTime` / `{ prefetch }` sent to a driver without a
  *          `queryCache()` (D88): nothing is cached (warn). The source's `__inspect().cache`
  *          is undefined without one
+ * SYG636 — PLAN-11 U-1: `progress` that can't be reported as asked: on a resource or a
+ *          `batch` request (ignored), or with fetch-only `init` options that XMLHttpRequest
+ *          doesn't support (ignored for that request) (warn)
  *
  * Mechanism: onModel wraps the component's own model stream for every sink whose source
  * takes the `resources` static (makeFetchDriver and renderComponent's HTTP fake) and checks
@@ -24,6 +27,12 @@ import {devReport, once, nameOf} from './shared'
 import {isStandardSchema} from '../../standardSchema'
 
 const IDEMPOTENT = /^(GET|HEAD)$/i
+// PLAN-11 U-1: fetch() init options a progress request (XMLHttpRequest) can't honour
+const XHR_IGNORES = ['keepalive', 'priority', 'cache', 'redirect', 'integrity', 'mode', 'referrer', 'referrerPolicy', 'window', 'duplex']
+const reportProgress = (component: any, sink: string, url: string, why: string, fix: string) => {
+  if (!once(`SYG636:${nameOf(component)}:${url}:${why}`)) return
+  devReport('SYG636', {component, message: `${sink} ${url ? url + ' ' : ''}has progress, but ${why}`, fix, data: {sink, url}})
+}
 
 /** instance → reply key lanes it has sent, and ok name → the other key it was sent under */
 const lanes = new WeakMap<object, {used: Set<string>; keyed: Map<string, string>}>()
@@ -48,7 +57,7 @@ function checkOne(component: any, sink: string, req: any, where: string) {
   if (!req || typeof req !== 'object') return
   const name = nameOf(component)
   const url = typeof req.url === 'string' ? req.url : ''
-  const method = String(req.method || (req.json !== undefined || req.body !== undefined ? 'POST' : 'GET')).toUpperCase()
+  const method = String(req.method || (req.json !== undefined || req.body !== undefined || req.multipart !== undefined ? 'POST' : 'GET')).toUpperCase()
   if ((req.cache === true || req.staleTime != null) && !IDEMPOTENT.test(method) && once(`SYG630:${name}:${method}:${url}`)) {
     devReport('SYG630', {
       component,
@@ -58,6 +67,17 @@ function checkOne(component: any, sink: string, req: any, where: string) {
     })
   }
   if (req.cache === true || req.staleTime != null) reportNoCache(component, sink, req.cache === true ? 'cache: true' : 'staleTime', url)
+  if (req.progress) {
+    if (where.includes('.resources.'))
+      reportProgress(component, sink, url, 'resources report no progress (it is ignored)', 'Send the download as a request with progress and reply actions instead of a resource, or remove progress')
+    else if (req.batch)
+      reportProgress(component, sink, url, 'a batch request reports no progress (it is ignored)', 'Send the parts as separate requests with progress, or remove progress')
+    else {
+      const bad = XHR_IGNORES.filter(k => req.init && req.init[k] !== undefined)
+      if (bad.length) reportProgress(component, sink, url, `it goes over XMLHttpRequest, which ignores init.${bad.join(', init.')}`,
+        `Remove ${bad.join(', ')} from init for this request, or drop progress if the request needs ${bad.length > 1 ? 'them' : 'it'}`)
+    }
+  }
   if ('validate' in req && !isStandardSchema(req.validate) && once(`SYG631:${name}:${url}`)) {
     devReport('SYG631', {
       component,

package/src/extra/diagnostics/checks/forms.ts

@@ -133,14 +133,15 @@ export const formsCheck: DiagnosticCheck = {
       })
       const model = Object.keys(view.model || {}).map(a => a.split('|')[0].trim()), own = ownActions(b)
       const clash = own.includes(o.submit)
-      if (typeof o.submit != 'string' || !model.includes(o.submit) || clash) {
+      // PLAN-11 F-3: with `request`, the form sends the submit itself and `submit` is optional
+      if (o.request ? o.submit !== undefined && (typeof o.submit != 'string' || !model.includes(o.submit) || clash) : typeof o.submit != 'string' || !model.includes(o.submit) || clash) {
         devReport('SYG234', {
           component,
-          message: typeof o.submit != 'string' ? `${name}'s form '${key}' has no submit action, so a valid submit dispatches nothing`
+          message: typeof o.submit != 'string' ? `${name}'s form '${key}' has no submit action and no request, so a valid submit dispatches nothing`
             : clash ? `${name}'s form '${key}' names submit: '${o.submit}', one of the form's own actions; a valid submit dispatches the form's '${key}.${o.submit}'${model.includes(o.submit) ? `, never ${name}'s '${o.submit}' entry` : ''}`
             : `${name}'s form '${key}' dispatches '${o.submit}' on a valid submit, but ${name} has no model entry '${o.submit}'`,
           fix: clash ? SUBMIT_FIX(key, o.submit, own)
-            : `Name a host action and add it to the model: submit: 'SIGN_UP', model: { SIGN_UP: { HTTP: (state, values) => ({ url, json: values, ok: '${key}.DONE', error: '${key}.ERRORS' }) } }`,
+            : `Give the form a request, form(schema, { values, request: { url: '/api/signup' } }) (it sends the valid submit itself), or name a host action and add it to the model: submit: 'SIGN_UP', model: { SIGN_UP: { HTTP: (state, values) => ({ url, json: values, ok: '${key}.DONE', error: '${key}.ERRORS' }) } }`,
           data: {key, submit: o.submit},
         })
       }

package/src/extra/diagnostics/checks/index.ts

@@ -107,10 +107,11 @@ import {nextHooks} from './next'
 
 export {checkEventBus} from './events'
 export {configureStrict, isStrictEnabled} from './strict'
+export {configureTimingAudit, isTimingAuditEnabled} from './timingAudit'
 export type {EventBusSummary} from './events'
 export {RXJS_HINTS} from './rxjsHints'
 export {inspect} from './inspect'
-export type {InspectResource, InspectCacheEntry, InspectGraph, InspectComponent, InspectAction, InspectActionTrigger, InspectChild, InspectSelector, InspectControl, InspectDiagnostic, InspectRelatedLocation, InspectFix, InspectTextEdit, InspectOptions, InspectRecentAction} from './public'
+export type {InspectResource, InspectCacheEntry, InspectGraph, InspectComponent, InspectAction, InspectActionTrigger, InspectChild, InspectSelector, InspectControl, InspectDiagnostic, InspectRelatedLocation, InspectFix, InspectTextEdit, InspectOptions, InspectRecentAction, InspectLocation, InspectChildSelect} from './public'
 export {listCodes, getCodeInfo} from '../codes'
 export type {DiagnosticCodeInfo} from '../codes'