sygnal 7.0.0 → 7.2.0-preview.0

package/src/core/instance.ts

@@ -21,7 +21,7 @@ import type {App} from './runtime'
 import {tearDown, INST, SEED} from './teardown'
 import {CoreDef, defOf, isObj} from './define'
 import {Cell, CalcCell, calcCell, keyCell, lensCell, localCell, pathOf} from './cell'
-import {hosts, posts, pres, resolvers} from './registry'
+import {ext, hosts, posts, pres, resolvers} from './registry'
 import {handle} from './actions'
 import {viewOf} from './view'
 import {makeCommandSource} from '../extra/command'
@@ -31,13 +31,22 @@ 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 {
+export 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)
 }
 
+/** a binding whose target is known (a key, a byId selection): its deletion ends the child */
+export const known = (b: any) => typeof b == 'string' || b?.[BINDING]
+/** F-3: `owner` watches child (or Switchable page) `k`'s target: notify() disposes it when deleted */
+export function watch(owner: Inst, k: any) {
+  k.bs = bindingState(k)
+  ;(owner.bound ||= new Set()).add(k)
+  owner.app.watchers.add(owner)
+}
+
 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
@@ -118,6 +127,8 @@ let left = 0
 export const sameTree = (a: any, b: any): boolean => (left = SAME_MAX, same(a, b))
 function same(a: any, b: any): boolean {
   if (a === b) return true
+  // CV-3: a compiled block (its inside is its hole values)
+  if (b?.$b) return !!a?.$b && ext.sb!(a, b)
   if (--left < 0 || !a || !b || a.sel !== b.sel || a.key !== b.key || a.text !== b.text || b.data?.hook || !sameData(a.data, b.data)) return false
   const x = a.children, y = b.children
   if (x === y) return true
@@ -129,8 +140,23 @@ function same(a: any, b: any): boolean {
 const EMPTY_CTX: any = Object.freeze({})
 /** a view read every key (spread, Object.keys): any context change re-renders it */
 const ALL = '\u0000all'
+// D168 read-tracking: one handler for every view; each render's Proxy targets a holder of that
+// render's context (c) and the instance's key set (k), so a read after the view returned (a
+// closure the view made) still sees its own render's context
+const track = (h: any, k: any) => (typeof k == 'string' && h.k.add(k), k)
+const TRACK: ProxyHandler<any> = {
+  get: (h, k) => h.c[track(h, k)],
+  has: (h, k) => track(h, k) in h.c,
+  ownKeys: (h) => (h.k.add(ALL), Reflect.ownKeys(h.c)),
+  getOwnPropertyDescriptor: (h, k) => Reflect.getOwnPropertyDescriptor(h.c, k),
+}
 
 let IDS = 0
+// shared defaults (one per module, not per instance): the first render's "last state", no
+// slots, no tag children (reconcile() makes an instance its own Map on its first child)
+const UNSET = {}
+const NOSLOTS: Record<string, any[]> = Object.freeze({}) as any
+const NOKIDS = new Map<string, any>()
 
 /**
  * a child that failed to instantiate: renders the owner's error fallback (SYG408). It keeps its
@@ -144,6 +170,31 @@ class Failed {
   dispose() {}
 }
 
+/**
+ * The intent's sources: a Proxy whose own properties are the source names, in the table's order
+ * (spread, Object.keys, `in`, destructuring as on a plain object), each made when read; one
+ * handler for every instance (a property defined with Object.defineProperty per instance was
+ * ~1 µs of its creation). Its target holds the instance and what the intent adds
+ */
+const table = (t: any) => t[INST].app.srcDesc(!!t[INST].parent)
+const tab = (t: any, k: any): any => typeof k == 'string' && table(t)[k]
+const SRC: ProxyHandler<any> = {
+  get: (t, k) => { const g = tab(t, k); return g ? g(t[INST]) : t[k] },
+  has: (t, k) => !!tab(t, k) || k in t,
+  ownKeys: (t) => Object.keys(table(t)).concat(Reflect.ownKeys(t) as any),
+  getOwnPropertyDescriptor: (t, k) => { const g = tab(t, k); return g ? {value: g(t[INST]), enumerable: true, configurable: true} : Reflect.getOwnPropertyDescriptor(t, k) },
+  // a source is read-only, as the getter-only property it was: a write fails (a TypeError in strict code)
+  set: (t, k, v) => !tab(t, k) && ((t[k] = v), true),
+}
+
+/** an intent stream's listener: its action (an object, no closures per stream) */
+class Listener {
+  constructor(public i: Inst, public t: string) {}
+  next(d: any) { const i = this.i; i.dying ? handle(i, this.t, d, 'intent') : i.app.dispatch(i, this.t, d, 'intent') }
+  // (no code of its own yet: R4's diagnostics may add one)
+  error(e: any) { const i = this.i; console.error(`[Sygnal] ${i.def.name}: intent stream '${this.t}' errored; it stops emitting`, e); i.app.appError(i, e, 'intent', this.t) }
+}
+
 export class Inst {
   readonly id = IDS++
   disposed = false
@@ -159,41 +210,47 @@ export class Inst {
   children!: any[]
   /** the children as the parent passed them (slots included) */
   raw!: any[]
-  slots: Record<string, any[]> = {}
-  kids = new Map<string, any>()
+  slots = NOSLOTS
+  kids = NOKIDS
   /** the children with a string / byId binding: the presence scan's (notify) */
   bound?: Set<any>
   uidBase: string
+  // (the fields most instances set are initialized here, so they are the object's own slots;
+  // the ones few instances use are left out until used)
   /** the parent's view of this instance's output (last vnode / READY it injected) */
   last: any; lr = true
   outv: any
   // the last render's inputs: state, props, children, context, the context keys its view read
-  ls: any = {}; lp: any; lc: any; lctx: any; keys: Set<string> | null = null; tmpl: any; forced = true
+  ls: any = UNSET; lp: any; lc: any; lctx: any; keys: Set<string> | null = null; tmpl: any; forced = true
   postSels: string[] | null = null
   // context memo: the app's write version it was computed at, the value
   cver = -1; cv: any
   subs: any[] = []
-  srcs: Record<string, any> | null = null
-  fb: Record<string, any> | null = null
-  ac: AbortController | null = null
+  /** a Collection item's key; the isolate memo (runtime scopeValue) */
+  k: any; $iso: any
+  /** canvas-three F2: a template node's last injected copy, by the node (its children array, `.r` the copy) */
+  ic?: WeakMap<any, any>
+  srcs?: Record<string, any>
+  fb?: Record<string, any>
+  ac?: AbortController | null
   disp$: any
   st$: any; stLast: any; stateSrc: any
   props$: any; children$: any
   /** CHILD.select listeners (the children's PARENT values) */
-  hub: Set<(e: any) => void> | null = null
+  hub?: Set<(e: any) => void> | null
   wd: any; so: any; el: any
   iv: any
   cmds: any
   /** the app's render epoch it last rendered at (G-311) */
   ep = 0
   /** pending next() timers (G-300) */
-  timers: Set<any> | null = null
+  timers?: Set<any> | null
   // statics.ts: the [sink, static] pairs it declares, the last values sent, the state / shown
   // flag they were computed from; its reply streams
-  st: Array<[string, string]> | null = null
-  sv: Record<string, any> | null = null
-  sS: any; sH: any
-  rep: any[] | null = null
+  st?: Array<[string, string]> | null
+  sv?: Record<string, any> | null
+  sS: any; sH: any; sC: any
+  rep?: any[] | null
 
   constructor(
     public app: App, public def: CoreDef, public parent: Inst | null, public base: Cell,
@@ -204,7 +261,8 @@ export class Inst {
     this.setChildren(children)
     this.uidBase = uidBase
     this.ready = !def.ready
-    this.cell = def.calculated || def.idle ? calcCell(base, def) : {get: () => base.get(), set: (v) => base.set(v), raw: () => base.get()}
+    // (no calculated fields: the base cell itself)
+    this.cell = def.calculated || def.idle ? calcCell(base, def) : base as CalcCell
     const H = app.hooks
     // the initial state, synchronously (INITIALIZE at construction, D165): a root (or the state an
     // HMR swap keeps), an isolated child's local state. D174: an isolated child bound to a slice
@@ -226,7 +284,7 @@ export class Inst {
         if (reset || (!has && def.model)) app.dispatch(this, SEED, {v: init, r: reset, b}, 'built-in')
         else if (has) H.onStateSeed?.(viewOf(this), b.get(), init)
       }
-    } else if (def.idle && isObj(this.cell.raw()) && !parent) this.cell.set(this.cell.raw())
+    } else if (def.idle && isObj(this.rawState()) && !parent) this.cell.set(this.rawState())
     H.onCreate?.(viewOf(this))
     dbg(this, () => 'Instantiated')
     if (def.handlers.has('INITIALIZE')) app.dispatch(this, 'INITIALIZE', init, 'built-in')
@@ -245,6 +303,8 @@ export class Inst {
   }
 
   get name() { return this.def.name }
+  /** the state with calculated fields only as stored (STATE.stream) */
+  rawState() { return this.cell === this.base ? this.base.get() : this.cell.raw() }
 
   // ---------------------------------------------------------------- sources (the stream edge)
   subscribe() {
@@ -264,11 +324,7 @@ export class Inst {
         const s = actions[type]
         if (s == null) continue
         if (typeof s.subscribe != 'function') fail('SYG603', this, `intent entry '${type}' is not a stream`, 'Return { ACTION: stream$ }')
-        this.subs.push(s.subscribe({
-          next: (d: any) => this.dying ? handle(this, type, d, 'intent') : app.dispatch(this, type, d, 'intent'),
-          // (no code of its own yet: R4's diagnostics may add one)
-          error: (e: any) => { console.error(`[Sygnal] ${def.name}: intent stream '${type}' errored; it stops emitting`, e); app.appError(this, e, 'intent', type) },
-        }))
+        this.subs.push(s.subscribe(new Listener(this, type)))
       }
     } catch (e) {
       // a failed instance keeps no subscription (its parent renders the error fallback)
@@ -280,10 +336,7 @@ export class Inst {
   }
 
   sources() {
-    if (this.so) return this.so
-    const so = this.so = Object.defineProperties({}, this.app.srcDesc(!!this.parent))
-    Object.defineProperty(so, INST, {value: this})
-    return so
+    return this.so ||= new Proxy({[INST]: this}, SRC)
   }
   /** a driver source isolated to this instance (the parent's, isolated to this scope; cached) */
   src(n: string): any {
@@ -297,7 +350,7 @@ export class Inst {
   stateSource() {
     if (this.stateSrc) return this.stateSrc
     this.st$ = xs.createWithMemory()
-    const v = this.stLast = this.cell.raw()
+    const v = this.stLast = this.rawState()
     if (v !== undefined) this.st$.shamefullySendNext(v)
     this.app.watchers.add(this)
     return (this.stateSrc = new StateSource(this.st$, 'STATE', this.dispose$(), 1))
@@ -321,7 +374,7 @@ export class Inst {
       }
     }
     if (this.st$) {
-      const v = this.cell.raw()
+      const v = this.rawState()
       if (v !== this.stLast && v !== undefined) { this.stLast = v; this.st$.shamefullySendNext(v) }
     }
   }
@@ -342,9 +395,8 @@ export class Inst {
   setChildren(children: any[]) {
     // G-294: the raw children (before the slots are split out) decide whether the view re-runs
     this.raw = children
-    const [kids, slots] = children.length ? extractSlots(children) : [children, {}]
-    this.children = kids
-    this.slots = slots
+    if (children.length) [this.children, this.slots] = extractSlots(children)
+    else this.children = children, this.slots = NOSLOTS
   }
   setProps(props: Record<string, any>, children: any[]) {
     this.props = props
@@ -458,10 +510,11 @@ export class Inst {
       if (v !== k.last || k.ready !== k.lr) { k.last = v; k.lr = k.ready; kidsDirty = true }
     }
     if (!viewDirty && !kidsDirty) return this.outv
-    if (same && !kidsDirty) { this.app.hooks.onRender?.(viewOf(this), this.tmpl); return this.outv }
+    // CV-3: hooks (dev checks, devtools, testing) see a compiled block's vnodes (ext.xb)
+    if (same && !kidsDirty) { this.app.hooks.onRender?.(viewOf(this), ext.xb ? ext.xb(this.tmpl) : this.tmpl); return this.outv }
     let v = this.kids.size ? this.inject(this.tmpl, 'r') : this.tmpl
     if (this.postSels) for (const s of this.postSels) v = posts[s](v, this)
-    this.app.hooks.onRender?.(viewOf(this), v)
+    this.app.hooks.onRender?.(viewOf(this), ext.xb ? ext.xb(v) : v)
     return (this.outv = this.parent ? this.app.scopeValue(this.parent, 'DOM', v, this) : v)
   }
 
@@ -478,12 +531,10 @@ export class Inst {
     const def = this.def
     let keys: Set<string> | null = null, context = ctx
     if (ctx !== EMPTY_CTX) {
-      const ks = keys = new Set<string>()
-      context = new Proxy(ctx, {
-        get: (t, k) => (typeof k == 'string' && ks.add(k), t[k as any]),
-        has: (t, k) => (typeof k == 'string' && ks.add(k), k in t),
-        ownKeys: (t) => (ks.add(ALL), Reflect.ownKeys(t)),
-      })
+      // (the last render's set, read by ctxChanged before this call)
+      keys = this.keys || new Set<string>()
+      keys.clear()
+      context = new Proxy({c: ctx, k: keys}, TRACK)
     }
     try {
       this.tmpl = def.view({...this.props, state, children: this.children, slots: this.slots, context, uid: this.uid})
@@ -536,12 +587,8 @@ export class Inst {
         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, 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)
-        }
+        else (this.kids === NOKIDS ? this.kids = new Map() : this.kids).set(id, k = host ? this.host(host, props, children, id, n) : this.child(view, props, children, id, !!data.props?.resetState))
+        if (known(props[binding])) watch(this, k)
         return
       }
       if (posts[sel] && !(ps ||= []).includes(sel)) ps.push(sel)
@@ -604,7 +651,13 @@ export class Inst {
       const v = this.inject(c[i], path + '.' + i)
       if (v !== c[i]) (out ||= c.slice())[i] = v
     }
-    return out ? {...n, children: out} : n
+    if (!out) return n
+    // canvas-three F2: the same children as this node's last injection: its last copy, so snabbdom
+    // skips an element (and its hooks: a widget's postpatch) above components that didn't change
+    const p = (this.ic ||= new WeakMap()).get(n)
+    if (p && p.length == out.length && p.every((x: any, i: number) => x === out[i])) return p.r
+    this.ic.set(n, out)
+    return out.r = {...n, children: out}
   }
 
   // ---------------------------------------------------------------- actions

package/src/core/markers/portal.ts

@@ -33,6 +33,9 @@ function mount(st: PortalState, target: string): boolean {
   container.appendChild(anchor)
   st.pv = st.v.data._portalVnode = (patch ||= snabbdomInit(defaultModules))(anchor, box(st.kids))
   st.c = st.v.data._portalContainer = container
+  // ui-sweep R4: the placeholder names its content, so ELEMENT commands and sygnal/ui parts find
+  // elements the component renders into the portal (extra/elementCommands.ts, ui/shared.ts)
+  if (st.v.elm) st.v.elm.__portal = st.pv.elm
   return true
 }
 
@@ -74,6 +77,7 @@ export function portalPlaceholder(target: string, children: any[]): any {
           if (!st.pv) return
           st.pv = newVnode.data._portalVnode = patch(st.pv, box(st.kids))
           newVnode.data._portalContainer = st.c
+          if (newVnode.elm) newVnode.elm.__portal = st.pv.elm
         },
         destroy: (vnode: any) => {
           const st: PortalState | undefined = vnode.data?._p

package/src/core/registry.ts

@@ -27,3 +27,7 @@ export const posts: Record<string, (vnode: any, owner: any) => any> = {}
 export const resolvers: Array<(view: ComponentFn, owner: any) => ComponentFn | undefined> = []
 /** definition time, every app: (src, view) -> src (behaviors, undo, selection, pager, persist, resources) */
 export const defHooks: Array<(src: DefSource, view: ComponentFn) => DefSource | void> = []
+/** CV-3 (compiled blocks, src/pragma/blocks.ts, registered by the first block): xb expands blocks
+ * into plain vnodes for a DOM driver that doesn't patch them (not `DOMDriver.blocks`); sb, the
+ * same-output check for two blocks */
+export const ext: {xb?: (v: any) => any; sb?: (a: any, b: any) => boolean} = {}

package/src/core/runtime.ts

@@ -21,14 +21,16 @@ import xs from '../extra/xstreamCompat'
 import {makeDOMDriver} from '../cycle/dom/index'
 import eventBusDriver from '../extra/eventDriver'
 import logDriver from '../extra/logDriver'
-import {NOT_SINK, isAbort} from '../shared'
+import {NOT_SINK, isAbort, delivering} from '../shared'
 import {error as logError, callHook} from '../extra/diagnostics/legacy'
 import type {ComponentFn, DefSource, Hooks, RuntimeAPI, ActionCause} from './hooks'
 import {CoreDef, defOf, rootDef} from './define'
 import {rootCell} from './cell'
 import {Inst} from './instance'
+import {seen} from './actions'
 import {viewOf} from './view'
-import {stopQueued, INST, SET, SEED} from './teardown'
+import {ext} from './registry'
+import {stopQueued, SET, SEED} from './teardown'
 import {scanSources} from './statics'
 // the public ClientOnly is a separate bundle (sygnal/vike/ClientOnly) with no core of its own, so
 // its marker handler registers with the core (the other markers register from their modules)
@@ -56,6 +58,8 @@ export interface StartOptions {
   __state?: any
   /** internal: an HMR swap: the instances its first flush makes get no BOOTSTRAP (as today's `__hmr`) */
   __swap?: boolean
+  /** internal: the handlers' now() / random() / uuid() (renderComponent's fixed clock, seeded random, ids) */
+  __entropy?: {now?: () => number; random?: () => number; uuid?: () => string}
   /** internal: renderComponent's root (test intent, initial state, name) */
   __override?: Partial<DefSource> & {name?: string; testActions?: string[]}
 }
@@ -81,6 +85,8 @@ export class App {
   last: any
   /** P46-P: a view ran but kept its last vnode (the flush still emits, as when it changed) */
   ran = false
+  /** CV-3: the DOM driver patches compiled blocks itself (makeDOMDriver's DOMDriver.blocks) */
+  bd = false
   vdomL: any
   vdom$: any
   sources: Record<string, any> = {}
@@ -149,6 +155,8 @@ export class App {
   /** `src`: for a reply, the source that delivered it (the action log's replySink) */
   dispatch(inst: Inst, type: any, data: any, cause: ActionCause = 'intent', src?: string) {
     if (this.disposed) return
+    // 7.2: at enqueue, with the DOM event being delivered (a string type: not setState / a seed)
+    typeof type == 'string' && this.hooks.onDispatch?.(viewOf(inst), type, data, cause, delivering)
     this.queue.push(inst, type, data, cause, src)
     if (!this.draining && !this.rendering) this.drain()
   }
@@ -165,8 +173,9 @@ export class App {
           if (q[i + 1] === SET) {
             const f = q[i + 2], c = inst.cell
             const v = typeof f == 'function' ? f(c.get()) : f
-            // (ABORT: no change, as from a reducer)
-            if (v !== c.get() && !isAbort(v)) c.set(v)
+            // (ABORT: no change, as from a reducer). 7.2: seen by onAction as a 'setState' action
+            // with the new state (false: dropped)
+            if (v !== c.get() && !isAbort(v) && seen(inst, 'setState', v, 'setState')) c.set(v)
           } else if (q[i + 1] === SEED) {
             // G-309: decided when it is applied: a parent write queued before it keeps the slice (D174)
             const d = q[i + 2], b = d.b
@@ -283,8 +292,9 @@ export class App {
       if (v !== this.last || this.ran) {
         this.ran = false
         this.last = v
-        this.hooks.onPatch?.(v)
-        this.vdomL?.next(v ?? null)
+        this.hooks.onPatch?.(ext.xb ? ext.xb(v) : v)
+        // CV-3: compiled blocks are patched only by the browser DOM driver; any other gets their vnodes
+        this.vdomL?.next(ext.xb && !this.bd ? ext.xb(v ?? null) : v ?? null)
       }
       if (this.dq.length) this.stopLater()
     } finally {
@@ -350,7 +360,7 @@ export class App {
   scopeValue(parent: Inst, _: string, v: any, inst: Inst) {
     const d = parent.dom
     if (!d || inst.scope === undefined) return v
-    if (typeof d.isolateValue == 'function') return d.isolateValue(v, inst.scope)
+    if (typeof d.isolateValue == 'function') return d.isolateValue(v, inst.scope, inst)
     let r: any
     this.pipe(inst, '\u0000DOM', v, (s$) => d.isolateSink(s$, inst.scope), (x) => { r = x })
     return r
@@ -376,22 +386,21 @@ export class App {
   }
 
   // ---------------------------------------------------------------- intent sources
-  /** the getters of an instance's intent sources (one descriptor map per app and kind) */
-  srcDesc(child: boolean) {
+  /** an instance's intent sources by name, each a getter of its instance (one table per app and kind; Inst SRC) */
+  srcDesc(child: boolean): Record<string, (i: Inst) => any> {
     const k = +child
     if (this.desc[k]) return this.desc[k]
-    const d: any = {}
-    const get = (f: (i: Inst) => any) => ({get(this: any) { return f(this[INST]) }, enumerable: true, configurable: true})
-    for (const n in this.sources) if (n !== 'DOM') d[n] = get(i => i.src(n))
-    d.DOM = get(i => i.dom && (i.wd ||= wrapDOM(i.dom)))
-    d.STATE = get(i => i.stateSource())
-    d.CHILD = get(i => i.childSource())
-    d.dispose$ = get(i => i.dispose$())
+    const d: any = Object.create(null)
+    for (const n in this.sources) if (n !== 'DOM') d[n] = (i: Inst) => i.src(n)
+    d.DOM = (i: Inst) => i.dom && (i.wd ||= wrapDOM(i.dom))
+    d.STATE = (i: Inst) => i.stateSource()
+    d.CHILD = (i: Inst) => i.childSource()
+    d.dispose$ = (i: Inst) => i.dispose$()
     if (child) {
-      d.props$ = get(i => i.props$ || seeded(i, 'props$', i.props))
-      d.children$ = get(i => i.children$ || seeded(i, 'children$', i.children))
+      d.props$ = (i: Inst) => i.props$ || seeded(i, 'props$', i.props)
+      d.children$ = (i: Inst) => i.children$ || seeded(i, 'children$', i.children)
       // a Command passed as a prop (createCommand): its messages, as today's `commands$`
-      d.commands$ = get(i => i.commands())
+      d.commands$ = (i: Inst) => i.commands()
     }
     return (this.desc[k] = d)
   }
@@ -437,9 +446,8 @@ export class App {
           : k == 'wrapHandler' ? (i: any, t: any, s: any, f: any) => { const x = b(i, t, s, f) || f; return a(i, t, s, x) || x }
           : k == 'wrapSources' ? (i: any, s: any) => { const x = b(i, s) || s; return a(i, x) || x }
           : k == 'transformDef' ? (src: any, v: any) => { const x = b(src, v) || src; return a(x, v) || x }
-          // onElementCommand: false (not run) from either layer
-          : k == 'onElementCommand' ? (i: any, c: any) => { const x = b(i, c); return a(i, c) === false || x === false ? false : undefined }
-          : (...args: any[]) => { b(...args); a(...args) }
+          // false from either layer: onElementCommand (not run), onAction (dropped)
+          : (...args: any[]) => { const x = b(...args); return a(...args) === false || x === false ? false : undefined }
       }
     }
     // D168's safety net (R4): a view context tracking skipped, offered for a re-run check
@@ -460,9 +468,9 @@ export class App {
   }
 }
 
-function wrapDOM(dom: any) {
-  return new Proxy(dom, {get: (t, p, r) => (typeof p == 'symbol' || p in t ? Reflect.get(t, p, r) : (sel: any) => t.select(sel).events(p))})
-}
+// (one handler for every instance's DOM source)
+const DOMH: ProxyHandler<any> = {get: (t, p, r) => (typeof p == 'symbol' || p in t ? Reflect.get(t, p, r) : (sel: any, o?: any) => t.select(sel).events(p, o))}
+const wrapDOM = (dom: any) => new Proxy(dom, DOMH)
 /** props$ / children$: a memory stream with the current value, fed by setProps */
 function seeded(i: any, k: string, v: any) {
   const s = xs.createWithMemory()
@@ -529,6 +537,7 @@ export function start(Root: ComponentFn, drivers: Record<string, any> = {}, opts
   }
   // the Cycle run loop, reduced: a proxy sink per driver, the driver's source, then the app's
   // streams imitated (values reach a driver synchronously; the DOM gets one vnode per flush)
+  app.bd = !!all.DOM?.blocks
   for (const n in all) {
     const p = app.proxies[n] = xs.create()
     const src = app.sources[n] = all[n](p, n)

package/src/core/statics.ts

@@ -76,17 +76,17 @@ const shownOf = (inst: Inst) => {
 /** recompute the instance's declarations when its state or shown flag changed; send the changed ones */
 export function checkStatics(inst: Inst) {
   if (inst.disposed) return
-  const s = inst.cell.get(), shown = shownOf(inst)
+  const s = inst.cell.get(), shown = shownOf(inst), c = inst.context()
   // no state yet: nothing declared (as the state stream, which skips undefined)
-  if (s === undefined || (s === inst.sS && shown === inst.sH)) return
-  inst.sS = s; inst.sH = shown
+  if (s === undefined || (s === inst.sS && shown === inst.sH && c === inst.sC)) return
+  inst.sS = s; inst.sH = shown; inst.sC = c
   const view = inst.def.view, sv = inst.sv!
   for (const [n, k] of inst.st!) {
     const f = view[k]
     let v: any = f
     try {
-      if (typeof f == 'function') v = f(s)
-      else if (f && typeof f == 'object') { v = {}; for (const r in f) v[r] = f[r](s) }
+      if (typeof f == 'function') v = f(s, c)
+      else if (f && typeof f == 'object') { v = {}; for (const r in f) v[r] = f[r](s, c) }
     } catch (e) {
       // as today: nothing sent; the next value is sent even when equal to the last one
       inst.app.caught(inst, 'SYG216', `${k} threw; nothing sent`, e, 'declaration')

package/src/cycle/dom/EventDelegator.ts

@@ -7,6 +7,7 @@ import {EventsFnOptions} from './DOMSource';
 import {Scope} from './isolate';
 import SymbolTree from './SymbolTree';
 import PriorityQueue from './PriorityQueue';
+import {deliver} from '../../shared';
 import {
   fromEvent,
   preventDefaultConditional,
@@ -382,46 +383,49 @@ export class EventDelegator {
     passive: boolean,
     bubbles = true
   ): void {
-    const cycleEvent = this.patchEvent(event);
-    const target = event.target as Element;
-    const rootElement = this.isolateModule.getRootElement(target);
-
-    if (bubbles) {
-      const namespace = this.isolateModule.getNamespace(target);
-      if (!namespace) {
-        return;
-      }
-      const listeners = this.getVirtualListeners(eventType, namespace);
-      const phase = (useCapture: boolean) => this.bubble(
-        eventType,
-        target,
-        rootElement,
-        cycleEvent,
-        listeners,
-        namespace,
-        namespace.length - 1,
-        useCapture,
-        passive
-      );
-      phase(true);
-      phase(false);
-    } else {
-      const phase = (useCapture: boolean) => {
-        this.putNonBubblingListener(eventType, target, useCapture, passive);
-        this.doBubbleStep(
+    // 7.2: the event is recorded while it is delivered (the core's onDispatch hook)
+    deliver(event, () => {
+      const cycleEvent = this.patchEvent(event);
+      const target = event.target as Element;
+      const rootElement = this.isolateModule.getRootElement(target);
+
+      if (bubbles) {
+        const namespace = this.isolateModule.getNamespace(target);
+        if (!namespace) {
+          return;
+        }
+        const listeners = this.getVirtualListeners(eventType, namespace);
+        const phase = (useCapture: boolean) => this.bubble(
           eventType,
           target,
           rootElement,
           cycleEvent,
-          this.virtualNonBubblingListener,
+          listeners,
+          namespace,
+          namespace.length - 1,
           useCapture,
           passive
         );
-      };
-      phase(true);
-      phase(false);
-      event.stopPropagation();
-    }
+        phase(true);
+        phase(false);
+      } else {
+        const phase = (useCapture: boolean) => {
+          this.putNonBubblingListener(eventType, target, useCapture, passive);
+          this.doBubbleStep(
+            eventType,
+            target,
+            rootElement,
+            cycleEvent,
+            this.virtualNonBubblingListener,
+            useCapture,
+            passive
+          );
+        };
+        phase(true);
+        phase(false);
+        event.stopPropagation();
+      }
+    });
   }
 
   private bubble(

package/src/cycle/dom/MainDOMSource.ts

@@ -28,19 +28,24 @@ export class MainDOMSource {
     private _eventDelegator: EventDelegator,
     private _name: string
   ) {
-    this.isolateSource = (source, scope) =>
-      new MainDOMSource(
-        source._rootElement$,
-        source._sanitation$,
-        source._namespace.concat(getScopeObj(scope)),
-        source._isolateModule,
-        source._eventDelegator,
-        source._name
-      );
-    this.isolateSink = makeIsolateSink(this._namespace) as any;
-    this.isolateValue = makeIsolateValue(this._namespace);
   }
 
+  // (methods and lazily made functions, not closures per source: one source per instance)
+  public isolateSource(source: MainDOMSource, scope: string): MainDOMSource {
+    return new MainDOMSource(
+      source._rootElement$,
+      source._sanitation$,
+      source._namespace.concat(getScopeObj(scope)),
+      source._isolateModule,
+      source._eventDelegator,
+      source._name
+    );
+  }
+  private _is?: IsolateSink<VNode>;
+  private _iv?: (node: any, scope: string, memo?: any) => any;
+  get isolateSink(): IsolateSink<VNode> { return this._is ||= makeIsolateSink(this._namespace) as any }
+  get isolateValue(): (node: any, scope: string, memo?: any) => any { return this._iv ||= makeIsolateValue(this._namespace) }
+
   private _elements(): Stream<Array<Element>> {
     if (this._namespace.length === 0) {
       return this._rootElement$.map(x => [x]);
@@ -148,7 +153,4 @@ export class MainDOMSource {
     this._sanitation$.shamefullySendNext(null);
   }
 
-  public isolateSource: (source: MainDOMSource, scope: string) => MainDOMSource;
-  public isolateSink: IsolateSink<VNode>;
-  public isolateValue: (node: any, scope: string) => any;
 }