sygnal 5.3.6 → 5.4.0

package/src/cycle/dom/MainDOMSource.ts

@@ -11,6 +11,8 @@ import {ElementFinder} from './ElementFinder';
 import {makeIsolateSink, 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;
@@ -91,6 +93,8 @@ export class MainDOMSource {
       return new BodyDOMSource(this._name);
     }
 
+    if (selector !== ':root') onSelector(this, selector.trim());
+
     const namespace =
       selector === ':root'
         ? []

package/src/cycle/dom/classNameModule.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 elm = vnode.elm as any;
+  if (!elm || !elm.classList) return;
+  const props: any = vnode.data?.props;
+  const oldProps: any = oldVnode.data?.props;
+  const hasKey = !!props && 'className' in props;
+  const cn = hasKey ? props.className : undefined;
+  if (isSet(cn)) {
+    // propsModule replaced the whole attribute: put the class={{...}} entries back
+    if (!oldProps || oldProps.className !== cn) addAll(elm, classObject(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 oldCn = oldProps ? oldProps.className : undefined;
+  if (!isSet(oldCn)) 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: (emptyVnode: VNode, vnode: VNode) => syncClassName(emptyVnode, vnode),
+  update: syncClassName,
+};

package/src/cycle/dom/controlledInputModule.ts

@@ -0,0 +1,33 @@
+/**
+ * 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). Other elements with a value prop
+ * (<progress>, <meter>, custom elements with object values) are left alone.
+ */
+
+import type {VNode} from 'snabbdom/build/vnode.js';
+
+function syncControlled(oldVnode: VNode, vnode: VNode): void {
+  const props = vnode.data?.props;
+  const elm = vnode.elm as any;
+  if (!props || !elm || !/^(INPUT|TEXTAREA|SELECT)$/.test(elm.tagName) || 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.
+  if (value === oldProps.value && value != null && elm.value !== String(value)) {
+    elm.value = String(value);
+  }
+  if (checked === oldProps.checked && checked != null && elm.checked !== !!checked) {
+    elm.checked = !!checked;
+  }
+}
+
+export const controlledInputModule = {update: syncControlled};

package/src/cycle/dom/enrichEventStream.ts

@@ -46,11 +46,17 @@ export function enrichEventStream(stream$: any): any {
     return enrichEventStream(mapped);
   }
 
-  // .data(name, fn?) — extract e.target.dataset[name]
+  // .data(name, fn?) — extract 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 = function data(name: string, fn?: (val: 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())}]`
     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]
+      const t = e?.target
+      const el = typeof t?.closest == 'function' ? t.closest(attr) || t : t
+      const val = el?.dataset?.[key]
       return fn ? fn(val) : val
     });
     return enrichEventStream(mapped);

package/src/cycle/dom/makeDOMDriver.ts

@@ -1,8 +1,7 @@
 import {Driver} from '../run/types';
 import {init, Module, Options as SnabbdomOptions, VNode, toVNode} from './snabbdom';
 import xs, {Stream, Listener} from 'xstream';
-import concat from 'xstream/extra/concat.js';
-import sampleCombine from 'xstream/extra/sampleCombine.js';
+import {concat, sampleCombine} from '../../extra/xstreamExtras';
 import {MainDOMSource} from './MainDOMSource';
 import {VNodeWrapper} from './VNodeWrapper';
 import {getValidNode, checkValidContainer} from './utils';

package/src/cycle/dom/mockDOMSource.ts

@@ -3,6 +3,22 @@ import {DevToolEnabledSource, FantasyObservable} from '../run/types';
 import {VNode} from './snabbdom';
 import {EventsFnOptions} from './DOMSource';
 import {adapt} from '../run/adapt';
+import {enrichEventStream} from './enrichEventStream';
+
+/**
+ * Optional simulated-event hub (used by renderComponent's simulateEvent): a
+ * stream of `{type, event, match(path)}`; each source's events(type) also emits
+ * the hub events whose `match` accepts its selector path (isolation scopes
+ * included as '.___scope' segments).
+ */
+export type MockEventHub = Stream<{type: string; event: any; match: (path: string[]) => boolean}>;
+
+/**
+ * Optional listener callback (renderComponent): called with `live` undefined when events() is
+ * called (SYG103/104 checks), then with true / false when that hub listener is subscribed /
+ * unsubscribed (simulateEvent waits for a just-mounted child's listeners, G-039).
+ */
+export type MockOnEvents = (path: string[], eventType: string, live?: boolean) => void;
 
 export type MockConfig = {
   [name: string]: FantasyObservable<any> | MockConfig;
@@ -13,7 +29,12 @@ const SCOPE_PREFIX = '___';
 export class MockedDOMSource {
   private _elements: FantasyObservable<any>;
 
-  constructor(private _mockConfig: MockConfig) {
+  constructor(
+    private _mockConfig: MockConfig,
+    private _hub?: MockEventHub,
+    public _path: string[] = [],
+    private _onEvents?: MockOnEvents
+  ) {
     if (_mockConfig.elements) {
       this._elements = _mockConfig.elements as FantasyObservable<any>;
     } else {
@@ -43,10 +64,31 @@ export class MockedDOMSource {
     options?: EventsFnOptions,
     bubbles?: boolean
   ): any {
-    const streamForEventType = this._mockConfig[eventType] as any;
-    const out: DevToolEnabledSource & FantasyObservable<any> = adapt(
-      streamForEventType || xs.empty()
-    );
+    const configured = this._mockConfig[eventType] as any;
+    const {_hub: hub, _path: path, _onEvents: on} = this;
+    if (on) on(path, eventType);
+    let hub$: Stream<any> | undefined;
+    if (hub) {
+      const ev$ = hub.filter(e => e.type === eventType && e.match(path)).map(e => e.event);
+      let l: any;
+      hub$ = on
+        ? xs.create({
+            start: (x: any) => {
+              ev$.addListener(l = {next: (v: any) => x.next(v), error: (e: any) => x.error(e), complete: () => x.complete()});
+              on(path, eventType, true);
+            },
+            stop: () => {
+              ev$.removeListener(l);
+              on(path, eventType, false);
+            },
+          })
+        : ev$;
+    }
+    const out: DevToolEnabledSource & FantasyObservable<any> = enrichEventStream(adapt(
+      hub$
+        ? xs.merge(configured ? xs.fromObservable(configured) : xs.empty(), hub$)
+        : configured || xs.empty()
+    ));
 
     out._isCycleSource = 'MockedDOM';
 
@@ -56,7 +98,12 @@ export class MockedDOMSource {
   public select(selector: string): MockedDOMSource {
     const mockConfigForSelector = this._mockConfig[selector] || {};
 
-    return new MockedDOMSource(mockConfigForSelector as MockConfig);
+    return new MockedDOMSource(
+      mockConfigForSelector as MockConfig,
+      this._hub,
+      this._path.concat(selector),
+      this._onEvents
+    );
   }
 
   public isolateSource(
@@ -69,6 +116,9 @@ export class MockedDOMSource {
   public isolateSink(sink: any, scope: string): any {
     return adapt(
       xs.fromObservable<any>(sink).map((vnode: VNode) => {
+        // B-025: a Switchable's DOM sink starts with undefined (nothing rendered yet); the
+        // real DOM driver's isolateSink passes it through too
+        if (!vnode) return vnode;
         if (vnode.sel && vnode.sel.indexOf(SCOPE_PREFIX + scope) !== -1) {
           return vnode;
         } else {
@@ -80,6 +130,10 @@ export class MockedDOMSource {
   }
 }
 
-export function mockDOMSource(mockConfig: MockConfig): MockedDOMSource {
-  return new MockedDOMSource(mockConfig);
+export function mockDOMSource(
+  mockConfig: MockConfig,
+  hub?: MockEventHub,
+  onEvents?: MockOnEvents
+): MockedDOMSource {
+  return new MockedDOMSource(mockConfig, hub, [], onEvents);
 }

package/src/cycle/dom/modules.ts

@@ -1,16 +1,20 @@
 import {Module, classModule, propsModule, attributesModule, datasetModule} from './snabbdom';
 import {styleModule} from './styleModule';
 import {selectModule} from './selectModule';
+import {controlledInputModule} from './controlledInputModule';
+import {classNameModule} from './classNameModule';
 
 const modules: Array<Module> = [
   styleModule,
   classModule,
   propsModule,
+  classNameModule, // after propsModule (B-012)
   attributesModule,
   datasetModule,
   selectModule,
+  controlledInputModule,
 ];
 
-export {styleModule, classModule, propsModule, attributesModule, datasetModule, selectModule};
+export {styleModule, classModule, propsModule, attributesModule, datasetModule, selectModule, controlledInputModule, classNameModule};
 
 export default modules;

package/src/cycle/state/Collection.ts

@@ -106,9 +106,11 @@ export function makeCollection<S, So = any, Si = any>(
     const itemKey = opts.itemKey;
     const itemScope = opts.itemScope || defaultItemScope;
     const state$ = xs.fromObservable((sources[name] as StateSource<S>).stream);
+    const dict = new Map();
+    let disposed = false;
     const instances$ = state$.fold(
       (acc: InternalInstances<Si>, nextState: Array<any> | any) => {
-        const dict = acc.dict;
+        if (disposed) return acc;
         if (Array.isArray(nextState)) {
           const nextInstArray = Array(nextState.length) as Array<
             Si & {_key: string}
@@ -167,8 +169,16 @@ export function makeCollection<S, So = any, Si = any>(
           return {dict: dict, arr: [sinks]};
         }
       },
-      {dict: new Map(), arr: []} as InternalInstances<Si>
+      {dict, arr: []} as InternalInstances<Si>
     );
-    return opts.collectSinks(new Instances<Si>(instances$));
+    const sinks = opts.collectSinks(new Instances<Si>(instances$));
+    // B-024: disposing the collection (its owner was disposed or stopped rendering it)
+    // disposes every live item, and so their subtrees
+    sinks.__dispose = () => {
+      disposed = true;
+      dict.forEach((s: any) => s.__dispose?.());
+      dict.clear();
+    };
+    return sinks;
   };
 }

package/src/cycle/state/StateSource.ts

@@ -1,5 +1,5 @@
 import xs, {Stream, MemoryStream} from 'xstream';
-import dropRepeats from 'xstream/extra/dropRepeats.js';
+import {dropRepeats} from '../../extra/xstreamExtras';
 import {DevToolEnabledSource} from '../run/types';
 import {adapt} from '../run/adapt';
 import {Getter, Setter, Scope, Reducer} from './types';

package/src/cycle/state/pickCombine.ts

@@ -43,6 +43,28 @@ class PickCombineListener<Si, T>
   public _c(): void {}
 }
 
+// True when the items present both before and after appear in a different relative
+// order. Additions emit through the new item's sink and removals are handled
+// separately, so only a permutation of the surviving items counts here.
+function isReordered(prev: Array<string>, next: Array<string>, dict: Map<string, any>): boolean {
+  const m = prev.length;
+  if (m === next.length) {
+    let same = true;
+    for (let i = 0; i < m && same; ++i) same = prev[i] === next[i];
+    if (same) return false;
+  }
+  let j = 0;
+  const seen = new Set(prev);
+  for (let i = 0; i < next.length; ++i) {
+    const key = next[i];
+    if (!seen.has(key)) continue;
+    while (j < m && !dict.has(prev[j])) ++j;
+    if (prev[j] !== key) return true;
+    ++j;
+  }
+  return false;
+}
+
 class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
   public type = 'combine';
   public ins: Stream<InternalInstances<Si>>;
@@ -50,6 +72,8 @@ class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
   public sel: string;
   public ils: Map<string, PickCombineListener<Si, R>>;
   public inst: InternalInstances<Si>;
+  // item keys in the order of the last instances (B-010: detect pure reorders)
+  public keys: Array<string>;
 
   constructor(sel: string, ins: Stream<InternalInstances<Si>>) {
     this.ins = ins;
@@ -57,6 +81,7 @@ class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
     this.out = null as any;
     this.ils = new Map();
     this.inst = null as any;
+    this.keys = [];
   }
 
   public _start(out: Stream<Array<R>>): void {
@@ -77,6 +102,7 @@ class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
     this.out = null as any;
     this.ils = new Map();
     this.inst = null as any;
+    this.keys = [];
   }
 
   public up(): void {
@@ -120,13 +146,16 @@ class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
       }
     });
     if (n === 0) {
+      this.keys = [];
       out._n([]);
       return;
     }
     // add
+    const keys: Array<string> = Array(n);
     for (let i = 0; i < n; ++i) {
       const sinks = arrSinks[i];
       const key = (sinks as any)._key as string;
+      keys[i] = key;
       if (!(sinks as any)[sel]) {
         throw new Error('pickCombine found an undefined child sink stream');
       }
@@ -136,7 +165,12 @@ class PickCombine<Si, R> implements Operator<InternalInstances<Si>, Array<R>> {
         sink._add(ils.get(key) as PickCombineListener<Si, R>);
       }
     }
-    if (removed) {
+    const reordered = isReordered(this.keys, keys, dict);
+    this.keys = keys;
+    // B-010: a permutation (swap, reverse, move) neither removes an item nor makes an
+    // item sink emit, so re-emit whenever the order of keys changed. up() waits until
+    // every item has emitted, so a brand new item still triggers its own emission.
+    if (removed || reordered) {
       this.up();
     }
   }

package/src/cycle/state/withState.ts

@@ -1,5 +1,5 @@
 import xs, {Stream} from 'xstream';
-import concat from 'xstream/extra/concat.js';
+import {concat} from '../../extra/xstreamExtras';
 import {MainFn, Reducer} from './types';
 import {StateSource} from './StateSource';
 

package/src/extra/devtools.ts

@@ -1,3 +1,6 @@
+import {getDiagnostics} from './diagnostics/index';
+import type {Diagnostic} from './diagnostics/index';
+
 const DEVTOOLS_SOURCE = '__SYGNAL_DEVTOOLS_PAGE__';
 const EXTENSION_SOURCE = '__SYGNAL_DEVTOOLS_EXTENSION__';
 const DEFAULT_MAX_HISTORY = 200;
@@ -68,6 +71,11 @@ class SygnalDevTools {
     this._maxHistory = DEFAULT_MAX_HISTORY;
   }
 
+  /** Diagnostics collected by the shared diagnostics core (see src/extra/diagnostics). */
+  getDiagnostics(): Diagnostic[] {
+    return getDiagnostics();
+  }
+
   get connected(): boolean {
     return this._connected && typeof window !== 'undefined';
   }

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

@@ -0,0 +1,67 @@
+/**
+ * SYG401 — <Collection> has no `from` and the whole state is not an array (warn).
+ * A defined `from` is checked by the core (D22).
+ *
+ * Reported through diagnostics in addition to the existing console output.
+ *
+ * Mechanism: the core has no hook at Collection instantiation, and the
+ * Collection marker vnode is gone by the time onRender sees the tree. So, at
+ * onModel (construction time, before the first render), this check wraps the
+ * component INSTANCE's instantiateCollection method (an own property that
+ * shadows the prototype method; Component calls `this.instantiateCollection`
+ * for every new Collection). The wrapper inspects the marker's props and the
+ * component's current state, then always calls the original. This only
+ * happens when the dev-only 'sygnal/diagnostics' entry is loaded and
+ * diagnostics are on. Reported once per component name and `from` value.
+ */
+import type {DiagnosticCheck} from '../index'
+import {reportSafely, once, nameOf, isPlainObject} from './shared'
+
+const describe = (v: any): string =>
+  v === null ? 'null' : v === undefined ? 'undefined' : Array.isArray(v) ? 'an array' : typeof v === 'object' ? 'an object' : `a ${typeof v}`
+
+function checkCollection(component: any, el: any): void {
+  const props = (el && el.data && el.data.props) || {}
+  const from = props.from
+  const of = props.of
+  const ofName = typeof of === 'function' ? (of.componentName || of.label || of.name || 'component') : String(of)
+  const name = nameOf(component)
+
+  let state = component.currentState
+  try { if (typeof component.addCalculated === 'function') state = component.addCalculated(state) } catch (_) {}
+
+  let problem: string | undefined
+  let fix = `Pass the name of an array field in ${name}'s state, e.g. <Collection of={${ofName}} from="items" />, and initialize that field to [] in initialState`
+  // Every defined `from` (string field, lens object, or an invalid value) is reported by
+  // the core itself (SYG401/SYG412, retrofitted in 1E) in every diagnostics mode (D22), so
+  // this check only covers a missing `from`.
+  if (from !== undefined) return
+  if (!Array.isArray(state) && !(state && Array.isArray(state.value))) {
+    problem = `has no 'from' prop, so it uses ${name}'s whole state, which is ${describe(state)}, not an array`
+  }
+
+  if (!problem || !once(`SYG401:${name}:undefined`)) return
+  reportSafely('SYG401', {
+    component,
+    message: `<Collection of={${ofName}}> ${problem}, so it renders no items`,
+    fix,
+    data: {from: 'undefined', of: ofName},
+  })
+}
+
+const WRAPPED = '__sygnalDiagWrapped'
+
+export const collectionsCheck: DiagnosticCheck = {
+  id: 'collections',
+
+  onModel(component) {
+    const original = component && component.instantiateCollection
+    if (typeof original !== 'function' || original[WRAPPED]) return
+    const wrapped = function (this: any, el: any, ...rest: any[]) {
+      try { checkCollection(this, el) } catch (_) {}
+      return original.call(this, el, ...rest)
+    }
+    ;(wrapped as any)[WRAPPED] = true
+    component.instantiateCollection = wrapped
+  },
+}