sygnal 5.3.7 → 6.0.0

package/src/cycle/dom/IsolateModule.ts

@@ -4,15 +4,24 @@ import {Scope} from './isolate';
 import {isEqualNamespace} from './utils';
 import SymbolTree from './SymbolTree';
 
+// G-356 (D196): the element an event bubbles to and a scope walk goes up to: a moved element's
+// home (`__sygnalHome`), else its parent. G-381: a home inside the element (a cycle) isn't
+// followed, nor more than 98 homes per walk (`c` counts them: two elements naming each other)
+export const upOf = (e: any, c: any): any => {
+  const h = e.__sygnalHome;
+  return h && !e.contains(h) && (c.$h = (c.$h | 0) + 1) < 99 ? h : e.parentNode;
+};
+
 export class IsolateModule {
-  private namespaceTree = new SymbolTree<Element, Scope>(x => x.scope);
-  private namespaceByElement: Map<Element, Array<Scope>>;
+  // G-144: a scope can own several root elements (a fragment-rooted component)
+  private namespaceTree = new SymbolTree<Set<Element>, Scope>(x => x.scope);
+  private namespaceByElement: WeakMap<Element, Array<Scope>>;
   private eventDelegator: EventDelegator | undefined;
 
-  private vnodesBeingRemoved: Array<VNode>;
+  private vnodesBeingRemoved: Array<Element>;
 
   constructor() {
-    this.namespaceByElement = new Map<Element, Array<Scope>>();
+    this.namespaceByElement = new WeakMap<Element, Array<Scope>>();
     this.vnodesBeingRemoved = [];
   }
 
@@ -22,22 +31,23 @@ export class IsolateModule {
 
   private insertElement(namespace: Array<Scope>, el: Element): void {
     this.namespaceByElement.set(el, namespace);
-    this.namespaceTree.set(namespace, el);
+    this.namespaceTree.get(namespace, () => new Set())!.add(el);
   }
 
+  // the element keeps its scope (a leaving element under a Transition still is the
+  // child's); only the scope's set of root elements forgets it
   private removeElement(elm: Element): void {
-    this.namespaceByElement.delete(elm);
-    const namespace = this.getNamespace(elm);
-    if (namespace) {
-      this.namespaceTree.delete(namespace);
+    const namespace = this.namespaceByElement.get(elm);
+    const els = namespace && this.namespaceTree.get(namespace);
+    if (els) {
+      els.delete(elm);
+      // P45-A: an unmounted scope leaves no node behind
+      if (!els.size) this.namespaceTree.delete(namespace!);
     }
   }
 
-  public getElement(
-    namespace: Array<Scope>,
-    max?: number
-  ): Element | undefined {
-    return this.namespaceTree.get(namespace, undefined, max);
+  public getElements(namespace: Array<Scope>): Array<Element> {
+    return [...(this.namespaceTree.get(namespace) || [])];
   }
 
   public getRootElement(elm: Element): Element | undefined {
@@ -45,13 +55,17 @@ export class IsolateModule {
       return elm;
     }
 
+    // G-356 (D196): an element a hook moved out of its component's DOM (a toaster region
+    // re-parented into an open modal <dialog>) names where it belongs as `__sygnalHome` (an
+    // element of its component), so it stays in its component's scope. With no scope root above
+    // elm (moved without one, or out of the app) the event has no scope here (before: threw
+    // 'No root element found'). G-381: upOf guards against a home cycle
     let curr = elm;
+    const c = {};
     while (!this.namespaceByElement.has(curr)) {
-      curr = curr.parentNode as Element;
-      if (!curr) {
+      curr = upOf(curr, c);
+      if (!curr || curr.tagName === 'HTML') {
         return undefined;
-      } else if (curr.tagName === 'HTML') {
-        throw new Error('No root element found, this should not happen at all');
       }
     }
     return curr;
@@ -67,14 +81,35 @@ export class IsolateModule {
 
   public createModule() {
     const self = this;
+    // G-564: a vnode can be in the old tree and the new one (a component's cached vnode, a
+    // Collection item's copy, a hoisted vnode). When an ancestor is recreated (`alt ? <ol>{c}</ol>
+    // : <ul>{c}</ul>`, a new key), snabbdom creates it again and gives it the new element before it
+    // destroys the old subtree, so destroy hooks saw the new element (a widget inside wasn't
+    // unmounted, its scope lost the new element). A created element notes its children's elements
+    // (M: a child with one is mounted, or was), before they are created; a destroyed vnode gives
+    // its noted children their old elements back for their destroy hooks (and theirs, down the
+    // subtree), and they get the new ones again when the removal starts (S), before the insert
+    // hooks. (A vnode that moves to another parent still gives its own destroy hook the new one)
+    const M = new Map<any, any>(), S: any[] = [];
+    // G-573: a vnode in the new tree twice: its first note (its element before the patch) wins.
+    // A destroy hook that throws ends the patch before remove / post: the next patch first gives
+    // the vnodes their new elements back and forgets the notes (pre)
+    const back = (c: any) => M.has(c) && (S.push(c, c.elm), c.elm = M.get(c));
+    const ret = () => { for (let e; S.length; ) e = S.pop(), S.pop().elm = e; };
     return {
+      pre() {
+        ret();
+        M.clear();
+      },
+
       create(emptyVNode: VNode, vNode: VNode) {
-        const {elm, data = {}} = vNode;
+        const {elm, data = {}, children} = vNode;
         const namespace: Array<Scope> = (data as any).isolate;
 
         if (Array.isArray(namespace)) {
           self.insertElement(namespace, elm as Element);
         }
+        children?.forEach((c: any) => c?.elm && M.set(c, M.get(c) || c.elm));
       },
 
       update(oldVNode: VNode, vNode: VNode) {
@@ -93,32 +128,27 @@ export class IsolateModule {
         }
       },
 
+      // (the elements as they are now: post runs after the vnodes got their new ones back)
       destroy(vNode: VNode) {
-        self.vnodesBeingRemoved.push(vNode);
+        vNode.children?.forEach(back);
+        self.vnodesBeingRemoved.push(vNode.elm as Element);
       },
 
       remove(vNode: VNode, cb: Function) {
-        self.vnodesBeingRemoved.push(vNode);
+        self.vnodesBeingRemoved.push(vNode.elm as Element);
+        ret();
         cb();
       },
 
       post() {
-        const vnodesBeingRemoved = self.vnodesBeingRemoved;
-        for (let i = vnodesBeingRemoved.length - 1; i >= 0; i--) {
-          const vnode = vnodesBeingRemoved[i];
-          const namespace =
-            vnode.data !== undefined
-              ? (vnode.data as any).isolation
-              : undefined;
-          if (namespace !== undefined) {
-            self.removeElement(namespace);
-          }
-          (self.eventDelegator as EventDelegator).removeElement(
-            vnode.elm as Element,
-            namespace
-          );
+        // G-144: a removed root element is no longer one of its scope's roots (an element no
+        // scope has as a root isn't in any set: removing it does nothing)
+        for (const elm of self.vnodesBeingRemoved) {
+          self.removeElement(elm);
+          (self.eventDelegator as EventDelegator).removeElement(elm);
         }
         self.vnodesBeingRemoved = [];
+        M.clear();
       },
     };
   }

package/src/cycle/dom/MainDOMSource.ts

@@ -8,9 +8,11 @@ import {BodyDOMSource} from './BodyDOMSource';
 import {VNode} from './snabbdom';
 import {enrichEventStream, EnrichedEventStream} from './enrichEventStream';
 import {ElementFinder} from './ElementFinder';
-import {makeIsolateSink, getScopeObj, Scope, IsolateSink} from './isolate';
+import {makeIsolateSink, makeIsolateValue, getScopeObj, Scope, IsolateSink} from './isolate';
 import {IsolateModule} from './IsolateModule';
 import {EventDelegator} from './EventDelegator';
+// [diagnostics hook] no-op when diagnostics are off
+import {onSelector} from '../../extra/diagnostics/index';
 
 export interface SpecialSelector {
   body: BodyDOMSource;
@@ -36,6 +38,7 @@ export class MainDOMSource {
         source._name
       );
     this.isolateSink = makeIsolateSink(this._namespace) as any;
+    this.isolateValue = makeIsolateValue(this._namespace);
   }
 
   private _elements(): Stream<Array<Element>> {
@@ -77,7 +80,9 @@ export class MainDOMSource {
     selector: T
   ): SpecialSelector[T];
   public select(selector: string): MainDOMSource;
-  public select(selector: string): DOMSource {
+  public select(selector: any): DOMSource {
+    // CT-1: a control (controls()) selects its elements by its marker, [data-control="<Key>"]
+    if (selector?.__sygnalControl) selector = '' + selector;
     if (typeof selector !== 'string') {
       throw new Error(
         `DOM driver's select() expects the argument to be a ` +
@@ -91,6 +96,8 @@ export class MainDOMSource {
       return new BodyDOMSource(this._name);
     }
 
+    if (selector !== ':root') onSelector(this, selector.trim());
+
     const namespace =
       selector === ':root'
         ? []
@@ -111,6 +118,9 @@ export class MainDOMSource {
     options?: EventsFnOptions,
     bubbles?: boolean
   ): EnrichedEventStream<HTMLElementEventMap[K]>;
+  // PLAN-5 0-S6: any other name (a custom element's 'wa-hover', a widget's or element's
+  // CustomEvent): the overload above only typed the built-in names (types only)
+  public events(eventType: string, options?: EventsFnOptions, bubbles?: boolean): EnrichedEventStream<Event>;
   public events(
     eventType: string,
     options: EventsFnOptions = {},
@@ -140,4 +150,5 @@ export class MainDOMSource {
 
   public isolateSource: (source: MainDOMSource, scope: string) => MainDOMSource;
   public isolateSink: IsolateSink<VNode>;
+  public isolateValue: (node: any, scope: string) => any;
 }

package/src/cycle/dom/PriorityQueue.ts

@@ -20,13 +20,15 @@ export default class PriorityQueue<T> {
     }
   }
 
-  public delete(t: T): void {
+  // returns how many are left
+  public delete(t: T): number {
     for (let i = 0; i < this.arr.length; i++) {
       if (this.arr[i] === t) {
         this.arr.splice(i, 1);
         this.prios.splice(i, 1);
-        return;
+        break;
       }
     }
+    return this.arr.length;
   }
 }

package/src/cycle/dom/SymbolTree.ts

@@ -1,56 +1,30 @@
-type Node<Payload> = [Payload | undefined, InternalTree<Payload>];
+// [payload, children, number of children]: the count makes delete's "is this node empty" O(1)
+// (G-290: Object.keys(children) per removal made removing n siblings O(n²))
+type Node<Payload> = [Payload | undefined, InternalTree<Payload>, number];
 
 interface InternalTree<Payload> {
   [name: string]: Node<Payload>;
 }
 
 export default class SymbolTree<Payload, T> {
-  private tree: Node<Payload> = [undefined, {}];
+  private tree: Node<Payload> = [, {}, 0];
 
   constructor(private mapper: (t: T) => string) {}
 
-  public set(path: Array<T>, element: Payload | undefined, max?: number): void {
-    let curr = this.tree;
-    const _max = max !== undefined ? max : path.length;
-    for (let i = 0; i < _max; i++) {
-      const n = this.mapper(path[i]);
-      let child: Node<Payload> = curr[1][n];
-      if (!child) {
-        child = [undefined, {}];
-        curr[1][n] = child;
-      }
-      curr = child;
-    }
-    curr[0] = element;
-  }
-
-  public getDefault(
-    path: Array<T>,
-    mkDefaultElement: () => Payload,
-    max?: number
-  ): Payload {
-    return this.get(path, mkDefaultElement, max) as Payload;
-  }
-
   public get(
     path: Array<T>,
     mkDefaultElement?: () => Payload,
-    max?: number
+    max = path.length
   ): Payload | undefined {
     let curr = this.tree;
-    const _max = max !== undefined ? max : path.length;
-    for (let i = 0; i < _max; i++) {
+    for (let i = 0; i < max; i++) {
       const n = this.mapper(path[i]);
-      let child: Node<Payload> = curr[1][n];
-      if (!child) {
-        if (mkDefaultElement) {
-          child = [undefined, {}];
-          curr[1][n] = child;
-        } else {
-          return undefined;
-        }
+      if (!curr[1][n]) {
+        if (!mkDefaultElement) return undefined;
+        curr[2]++; // G-290: count the children
+        curr[1][n] = [, {}, 0];
       }
-      curr = child;
+      curr = curr[1][n];
     }
     if (mkDefaultElement && !curr[0]) {
       curr[0] = mkDefaultElement();
@@ -58,15 +32,12 @@ export default class SymbolTree<Payload, T> {
     return curr[0];
   }
 
-  public delete(path: Array<T>): void {
-    let curr = this.tree;
-    for (let i = 0; i < path.length - 1; i++) {
-      const child = curr[1][this.mapper(path[i])];
-      if (!child) {
-        return;
-      }
-      curr = child;
-    }
-    delete curr[1][this.mapper(path[path.length - 1])];
+  // P45-A: drop the payload at path and prune the nodes left empty; true when node is empty
+  public delete(path: Array<T>, max = path.length, node = this.tree, i = 0): boolean {
+    if (i < max) {
+      const k = this.mapper(path[i]), child = node[1][k];
+      if (child && this.delete(path, max, child, i + 1)) delete node[1][k], node[2]--;
+    } else node[0] = undefined;
+    return !node[0] && !node[2];
   }
 }

package/src/cycle/dom/classNameModule.ts

@@ -0,0 +1,76 @@
+/**
+ * Snabbdom module that unsets a removed `className` prop (B-012).
+ *
+ * Problem: `className` goes through snabbdom's propsModule, which writes new
+ * and changed props but never unsets a prop that disappears. So when snabbdom
+ * reuses an element (`<p className="placeholder">` -> `<p>`), the old class
+ * stays. A nullish `className` is worse: propsModule writes the string
+ * "null"/"false".
+ *
+ * Fix: runs after propsModule. When `className` is gone (or nullish/false),
+ * drop the classes it had set, keeping the classes from the selector
+ * (`p.foo`) and the truthy `class={{...}}` entries.
+ */
+
+import type {VNode} from 'snabbdom/build/vnode.js';
+
+function classObject(vnode: VNode): Array<string> {
+  const out: Array<string> = [];
+  const klass: any = vnode.data?.class;
+  if (klass && typeof klass === 'object') {
+    for (const name in klass) if (klass[name]) out.push(name);
+  }
+  return out;
+}
+
+function baseClasses(vnode: VNode): Array<string> {
+  const sel = vnode.sel || '';
+  const hashIdx = sel.indexOf('#');
+  const dotIdx = sel.indexOf('.', hashIdx);
+  const fromSel = dotIdx > 0 ? sel.slice(dotIdx + 1).split('.') : [];
+  return fromSel.concat(classObject(vnode));
+}
+
+function addAll(elm: any, names: Array<string>): void {
+  for (const name of names) if (name) elm.classList.add(name);
+}
+
+const isSet = (cn: any) => cn != null && cn !== false;
+const tokens = (cn: any) => (typeof cn === 'string' ? cn.split(/\s+/).filter(Boolean) : []);
+
+function syncClassName(oldVnode: VNode, vnode: VNode): void {
+  const props: any = vnode.data?.props;
+  const oldProps: any = oldVnode.data?.props;
+  const hasKey = !!props && 'className' in props;
+  const oldCn = oldProps ? oldProps.className : undefined;
+  // P45-A: keyed on the prop (B-012), not the tag: nothing to do when neither vnode has one
+  if (!hasKey && !isSet(oldCn)) return;
+  const elm = vnode.elm as any;
+  if (!elm || !elm.classList) return;
+  const cn = hasKey ? props.className : undefined;
+  if (isSet(cn)) {
+    // propsModule replaced the whole attribute: put the selector classes and the
+    // class={{...}} entries back
+    if (!oldProps || oldProps.className !== cn) addAll(elm, baseClasses(vnode));
+    return;
+  }
+  if (hasKey) {
+    // propsModule wrote String(cn) over the whole attribute: rebuild it
+    if (!oldProps || oldProps.className !== cn) {
+      elm.className = baseClasses(vnode).join(' ');
+      if (elm.className === '') elm.removeAttribute('class');
+    }
+    return;
+  }
+  const keep = baseClasses(vnode);
+  for (const name of tokens(oldCn)) {
+    if (keep.indexOf(name) === -1) elm.classList.remove(name);
+  }
+  addAll(elm, keep);
+  if (elm.getAttribute('class') === '') elm.removeAttribute('class');
+}
+
+export const classNameModule = {
+  create: syncClassName,
+  update: syncClassName,
+};

package/src/cycle/dom/controlledInputModule.ts

@@ -0,0 +1,50 @@
+/**
+ * Snabbdom module that keeps controlled form fields in sync with the vnode (B-004).
+ *
+ * Problem: snabbdom's propsModule only writes `value`/`checked` when the prop
+ * differs from the previous vnode's prop. If the user types 'x' and an action
+ * resets the state to '' within one render window, the 'x' render is
+ * coalesced away: the vnodes go '' -> '' and the typed text stays in the DOM.
+ *
+ * Fix: after propsModule has run, compare `value`/`checked` props against the
+ * live element and write them when they differ. Only form fields (INPUT,
+ * TEXTAREA, SELECT; not input type=file) are controlled: `value` compares as a
+ * string, `checked` as a boolean (1H-7). A present-but-nullish `value` keeps an
+ * input/textarea at '' and a nullish `checked` at false (D49); an absent prop
+ * leaves the field to the user. D196: a form-associated custom element is a field
+ * too (its value is written as the prop). Other elements with a value prop
+ * (<progress>, <meter>, custom elements that aren't form-associated) are left alone.
+ *
+ * (PLAN-4.6 R6, G-347: G-146's input stamps are gone with the old core: the core renders a
+ * state in the flush it is written in, so no render shows an older state than the field.)
+ */
+
+import type {VNode} from 'snabbdom/build/vnode.js';
+
+// P45-A: a form field by its vnode's tag (sel), checked before any other work: most vnodes aren't.
+// D196: a form-associated custom element (a hyphenated tag whose class has `static
+// formAssociated = true`, e.g. Web Awesome's wa-input / wa-rating) is a field too; only a
+// hyphenated tag's element is read
+export const isField = (vnode: VNode): any =>
+  /^(input|textarea|select)(?![\w-])/i.test(vnode.sel as string) || /^\w+-/.test(vnode.sel as string) && (vnode.elm as any).constructor.formAssociated;
+
+function syncControlled(oldVnode: VNode, vnode: VNode): void {
+  if (!isField(vnode)) return;
+  const props = vnode.data?.props;
+  const elm = vnode.elm as any;
+  if (!props || !elm || elm.type == 'file') return;
+  const oldProps: any = oldVnode.data?.props || {};
+  const {value, checked} = props;
+  // Only the case propsModule skipped (prop unchanged); it handles real changes.
+  // A nullish <select> value is left alone: on create the browser shows the first option.
+  if ('value' in props && value === oldProps.value && (value != null || elm.tagName != 'SELECT')) {
+    const v = value == null ? '' : String(value);
+    // a custom element's value can be a number: compared as a string, written as the prop
+    if (String(elm.value) !== v) elm.value = elm.constructor.formAssociated ? value : v;
+  }
+  if ('checked' in props && checked === oldProps.checked && elm.checked !== !!checked) {
+    elm.checked = !!checked;
+  }
+}
+
+export const controlledInputModule = {update: syncControlled};

package/src/cycle/dom/enrichEventStream.ts

@@ -15,8 +15,16 @@ export interface EnrichedEventStream<T = Event> extends Stream<T> {
 
   key(): EnrichedEventStream<string>;
   key<R>(fn: (key: string) => R): EnrichedEventStream<R>;
+
+  /** e.detail: a CustomEvent's payload (a widget's emit(name, detail), a web component's event) */
+  detail<D = any>(): EnrichedEventStream<D>;
+  detail<R, D = any>(fn: (detail: D) => R): EnrichedEventStream<R>;
 }
 
+// one enricher: a method that maps each event through `get`, then `fn` when given
+const pick = (s$: any, get: (e: any) => any) => (fn?: (v: any) => any): any =>
+  enrichEventStream(s$.map((e: any) => (e = get(e), fn ? fn(e) : e)))
+
 /**
  * Adds chainable convenience methods to a DOM event stream.
  *
@@ -26,53 +34,29 @@ export interface EnrichedEventStream<T = Event> extends Stream<T> {
  *   DOM.click('.item').data('id', Number)
  *   DOM.change('.checkbox').checked()
  *   DOM.keydown('.field').key()
+ *   DOM.select('.due').events('change').detail()
  */
 export function enrichEventStream(stream$: any): any {
-  // .value(fn?) — extract e.target.value
-  stream$.value = function value(fn?: (val: any) => any): any {
-    const mapped = stream$.map((e: any) => {
-      const val = e?.target?.value
-      return fn ? fn(val) : val
-    });
-    return enrichEventStream(mapped);
-  }
-
-  // .checked(fn?) — extract e.target.checked
-  stream$.checked = function checked(fn?: (val: any) => any): any {
-    const mapped = stream$.map((e: any) => {
-      const val = !!e?.target?.checked
-      return fn ? fn(val) : val
-    });
-    return enrichEventStream(mapped);
-  }
-
-  // .data(name, fn?) — extract e.target.dataset[name]
-  stream$.data = function data(name: string, fn?: (val: any) => any): any {
-    const mapped = stream$.map((e: any) => {
-      const el = e?.target instanceof Element ? e.target.closest(`[data-${name}]`) || e.target : e?.target
-      const val = el?.dataset?.[name]
-      return fn ? fn(val) : val
-    });
-    return enrichEventStream(mapped);
+  // .value(fn?) — e.target.value; .checked(fn?) — e.target.checked as a boolean
+  stream$.value = pick(stream$, (e: any) => e?.target?.value)
+  stream$.checked = pick(stream$, (e: any) => !!e?.target?.checked)
+  // .data(name, fn?) — dataset[name] from e.target or its nearest ancestor that has it.
+  // dataset keys are camelCase but attributes are kebab-case (`taskId` is `data-task-id`), so the
+  // closest() selector converts (B-028). The name may be given either way: `.data('taskId')` and
+  // `.data('task-id')` read the same attribute (3E/R3).
+  stream$.data = (name: string, fn?: (v: any) => any): any => {
+    const key = String(name).replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+    const attr = `[data-${key.replace(/[A-Z]/g, c => '-' + c.toLowerCase())}]`
+    return pick(stream$, (e: any) => {
+      const t = e?.target
+      const el = typeof t?.closest == 'function' ? t.closest(attr) || t : t
+      return el?.dataset?.[key]
+    })(fn)
   }
-
-  // .target(fn?) — extract e.target
-  stream$.target = function target(fn?: (el: any) => any): any {
-    const mapped = stream$.map((e: any) => {
-      const el = e?.target
-      return fn ? fn(el) : el
-    });
-    return enrichEventStream(mapped);
-  }
-
-  // .key(fn?) — extract e.key (keyboard events)
-  stream$.key = function key(fn?: (val: any) => any): any {
-    const mapped = stream$.map((e: any) => {
-      const val = e?.key
-      return fn ? fn(val) : val
-    });
-    return enrichEventStream(mapped);
-  }
-
+  // .target(fn?) — e.target; .key(fn?) — e.key (keyboard events)
+  stream$.target = pick(stream$, (e: any) => e?.target)
+  stream$.key = pick(stream$, (e: any) => e?.key)
+  // .detail(fn?) — e.detail (CustomEvents: widgets' emit(), web components) (PLAN-5 W-3)
+  stream$.detail = pick(stream$, (e: any) => e?.detail)
   return stream$
 }

package/src/cycle/dom/fragment.ts

@@ -0,0 +1,7 @@
+import {Fragment as _Fragment} from 'snabbdom/build/jsx.js';
+
+// Tag Fragment so we can identify it even after minification mangles Function.name.
+// Its own module so the JSX runtime entries (which keep snabbdom external, D188) take it
+// without the rest of the snabbdom barrel
+(_Fragment as any).__sygnalFragment = true;
+export const Fragment = _Fragment;

package/src/cycle/dom/isolate.ts

@@ -15,37 +15,40 @@ export type IsolateSink<T extends VNode> = (
 export function makeIsolateSink<T extends VNode>(
   namespace: Array<Scope>
 ): IsolateSink<T> {
-  return (sink, scope) => {
-    if (scope === ':root') {
-      return sink;
-    }
+  const value = makeIsolateValue(namespace);
+  return (sink, scope) => scope === ':root' ? sink : sink.map(node => value(node, scope) as T);
+}
 
-    return sink.map(node => {
-      if (!node) {
-        return node;
-      }
-      const scopeObj = getScopeObj(scope);
-      const newNode = {
-        ...(node as any),
-        data: {
-          ...node.data,
-          isolate:
-            !node.data || !Array.isArray((node.data as any).isolate)
-              ? namespace.concat([scopeObj])
-              : (node.data as any).isolate,
-        },
-      };
-      return {
-        ...newNode,
-        key:
-          newNode.key !== undefined
-            ? newNode.key
-            : JSON.stringify(newNode.data.isolate),
-      } as T;
-    });
+/**
+ * PLAN-4.6: the value-level isolateSink (the core scopes each instance's vnode without a
+ * stream per instance): the same mapping, applied to one vnode
+ */
+export function makeIsolateValue(namespace: Array<Scope>): (node: any, scope: string) => any {
+  return (node, scope) => {
+    if (scope === ':root' || !node) {
+      return node;
+    }
+    const isolate = namespace.concat([getScopeObj(scope)]);
+    const newNode = scoped(node, isolate);
+    return {
+      ...newNode,
+      key:
+        newNode.key !== undefined
+          ? newNode.key
+          : JSON.stringify((newNode.data && newNode.data.isolate) || isolate),
+    };
   };
 }
 
+// G-144: a fragment has no element of its own, so each of its top-level elements (through
+// nested fragments) carries the scope; the fragment keeps the key
+function scoped(node: any, isolate: Array<Scope>): any {
+  return !node || typeof node != 'object' ? node
+    : node.sel ? {...node, data: {...node.data, isolate: node.data && Array.isArray(node.data.isolate) ? node.data.isolate : isolate}}
+    : node.children ? {...node, children: node.children.map((c: any) => scoped(c, isolate))}
+    : node;
+}
+
 export function getScopeObj(scope: string): Scope {
   return {
     type: isClassOrId(scope) ? 'sibling' : 'total',