sygnal 6.3.0 → 6.5.0

package/dist/diagnostics.esm.js

@@ -249,6 +249,11 @@ const CODE_TITLES = {
     SYG425: 'isolatedState slice lacks initialState keys',
     // PLAN-9 (D471): checks/next.ts; dev entry and sygnal-check
     SYG426: 'Deprecated lowercase marker tag',
+    // checks/next.ts and sygnal-check: a component reference that is not a function (an import of
+    // a name the module doesn't export is undefined under Vitest)
+    SYG427: 'CHILD.select() of something that is not a component',
+    // 6.5.0 (checks/next.ts): state="a.b" / from="a.b" is a path; the parent state has a literal "a.b" key
+    SYG428: 'A state path that names a key containing a dot',
     // PLAN-9 (D470): checks/next.ts; dev entry
     SYG453: 'Two children with the same identity share one instance',
     SYG601: "Retired in 6.0: Missing or invalid sources",
@@ -455,6 +460,10 @@ const DEV_CODE_SEVERITY = {
     SYG425: 'warn',
     // PLAN-9 (checks/next.ts): D471 a lowercase <collection> / <switchable> tag (deprecated in 6.3.0)
     SYG426: 'warn',
+    // checks/next.ts: CHILD.select(undefined), usually a missing export
+    SYG427: 'error',
+    // checks/next.ts: a path designator that 6.4 read as one key with a dot
+    SYG428: 'warn',
     // PLAN-9 (checks/next.ts): D470 key identity, two children with one identity
     SYG453: 'warn',
     SYG612: 'error',
@@ -771,11 +780,20 @@ const underTest = (c) => {
     const dom = c?.sources?.[c.DOMSourceName || 'DOM'];
     return !!dom && typeof dom == 'object' && '_hub' in dom;
 };
-// G-620: an LLM / chat sink gets the chat driver's fix, not makeFetchDriver's
-const driverFix = (sink) => `Pass a driver named ${sink} to run(): ` + (/^(LLM|CHAT|AI|ASSISTANT)$/.test(sink)
-    ? `run(App, { ${sink}: makeChatDriver({ transport: openResponses({ baseURL: 'http://localhost:11434/v1', model: 'llama3.2' }) }) }) (from 'sygnal/ai'; uiMessageStream('/api/chat') for an AI SDK server)`
-    : `run(App, { ${sink}: makeFetchDriver() }) for HTTP, or driverFromAsync(fn) / your own driver`) +
-    `. Check the spelling against the drivers you pass`;
+// G-620: the usual driver for a known sink name (an LLM / chat sink gets the chat driver's fix,
+// SW the service worker's), the generic text for any other name
+const DRIVER_FOR = [
+    [/^(LLM|CHAT|AI|ASSISTANT)$/, (s) => `run(App, { ${s}: makeChatDriver({ transport: openResponses({ baseURL: 'http://localhost:11434/v1', model: 'llama3.2' }) }) }) (from 'sygnal/ai'; uiMessageStream('/api/chat') for an AI SDK server)`],
+    [/^(SW|SERVICE_WORKER)$/, (s) => `run(App, { ${s}: makeServiceWorkerDriver('/sw.js', { enabled: import.meta.env.PROD }) }) (enabled: false keeps the driver, with no service worker, on a dev server)`],
+    [/^(HTTP|API|FETCH)$/, (s) => `run(App, { ${s}: makeFetchDriver() })`],
+    [/^(WS|SOCKET)$/, (s) => `run(App, { ${s}: makeSocketDriver() })`],
+];
+const driverFix = (sink) => {
+    const known = DRIVER_FOR.find(([re]) => re.test(sink));
+    return `Pass a driver named ${sink} to run(): ` +
+        (known ? known[1](sink) : `run(App, { ${sink}: makeFetchDriver() }) for HTTP, or driverFromAsync(fn) / your own driver`) +
+        `. Check the spelling against the drivers you pass`;
+};
 const wiringCheck = {
     id: 'wiring',
     onIntent(component, actionNames) {
@@ -1119,25 +1137,44 @@ function checkCollection(component, el) {
             state = component.addCalculated(state);
     }
     catch (_) { }
-    let problem;
-    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 (typeof from === 'string')
+        return checkFrom(component, name, from, ofName, state);
+    // a lens or an invalid value: the core's (SYG401 / SYG412)
     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$1(state)}, not an array`;
-    }
-    if (!problem || !once(`SYG401:${name}:undefined`))
+    if (Array.isArray(state) || (state && Array.isArray(state.value)))
+        return;
+    if (!once(`SYG401:${name}:undefined`))
         return;
     reportSafely('SYG401', {
         component,
-        message: `<Collection of={${ofName}}> ${problem}, so it renders no items`,
-        fix,
+        message: `<Collection of={${ofName}}> has no 'from' prop, so it uses ${name}'s whole state, which is ${describe$1(state)}, not an array, so it renders no items`,
+        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`,
         data: { from: 'undefined', of: ofName },
     });
 }
+/** `from` a key or a path ('board.cards', 'boards[0].cards'), as the core reads it (cell.ts pathOf) */
+function checkFrom(component, name, from, ofName, state) {
+    const ks = from.replace(/\[(\d+)\]/g, '.$1').split('.');
+    const calc = component._calculatedFieldNames;
+    if (calc?.has?.(ks[0]))
+        return;
+    const at = ks.slice(0, -1).reduce((o, k) => (o == null ? o : o[k]), state), last = ks[ks.length - 1];
+    if (!isPlainObject(at) && !Array.isArray(at))
+        return; // a level still missing: renders once it appears (D178)
+    let message;
+    if (!(last in at)) {
+        const arrays = Object.keys(at).filter(k => Array.isArray(at[k]));
+        message = `Collection from="${from}" is not in state${arrays.length ? ` (array fields: '${arrays.join("', '")}')` : ''}; it renders nothing until it exists`;
+    }
+    else if (!Array.isArray(at[last]))
+        message = `Collection 'from' field '${from}' is not an array; it renders nothing`;
+    else
+        return;
+    if (!once(`SYG401:${name}:${from}`))
+        return;
+    reportSafely('SYG401', { component, message, fix: 'Set it to an array in initialState', data: { from, of: ofName } });
+}
 const WRAPPED = '__sygnalDiagWrapped';
 const collectionsCheck = {
     id: 'collections',
@@ -1324,6 +1361,10 @@ onReset(() => {
 });
 const unref = (t) => { if (t && typeof t.unref === 'function')
     t.unref(); return t; };
+/**
+ * The view's source, plus the words sygnal/vite registered for the component (its module's and
+ * its relative imports' string literals: markup a view helper draws), when it did
+ */
 function viewSource(component) {
     const view = component && component.view;
     if (typeof view !== 'function')
@@ -1336,6 +1377,9 @@ function viewSource(component) {
         catch (_) {
             src = '';
         }
+        const registered = globalThis.__SYGNAL_VIEW_TOKENS__?.get?.(view);
+        if (typeof registered == 'string')
+            src += '\n' + registered;
         viewTokens.set(view, src);
     }
     return src;
@@ -2980,7 +3024,8 @@ const persistCheck = {
         const o = p.options, init = view.initialState;
         if (!o || !init || typeof init != 'object')
             return;
-        const keys = Object.keys(init);
+        // a behavior's slice (`uses = { chat: chat() }`) is a state key too
+        const keys = [...Object.keys(init), ...Object.keys(view.uses || {})];
         for (const opt of ['pick', 'omit']) {
             for (const k of Array.isArray(o[opt]) ? o[opt] : []) {
                 if (keys.includes(k) || !once(`SYG223:${name}:${opt}:${k}`))
@@ -3694,6 +3739,34 @@ function removed(component, name, anchor, detail) {
         data: { form: anchor, guide: `${MIGRATE}#${anchor}`, ...(detail ? { detail } : {}) },
     });
 }
+/**
+ * SYG428 (6.5.0): `state="a.b"` / `from="a.b"` is a path, read as `state.a.b`. Before 6.5.0 it was
+ * one key named "a.b"; when the owner's state still has such a key, the designator now misses it.
+ */
+function dottedKey(f, what, designator, ownerState) {
+    if (typeof designator != 'string' || !/[.[]/.test(designator) || !isPlainObject(ownerState))
+        return;
+    if (!Object.prototype.hasOwnProperty.call(ownerState, designator) || !once(`SYG428:${f.name}:${designator}`))
+        return;
+    devReport('SYG428', {
+        component: f.name,
+        message: `${what}="${designator}" is a path (since 6.5.0), read as ${designator.replace(/\[(\d+)\]/g, '.$1').split('.').map((k) => `[${JSON.stringify(k)}]`).join('')}, but the state has a key named "${designator}"`,
+        fix: `Rename the key so it has no dot (and point ${what} at it), or use a lens: ${what}={{ get: (s) => s['${designator}'], set: (s, v) => ({ ...s, '${designator}': v }) }}`,
+        data: { designator, what },
+    });
+}
+/** SYG427: CHILD.select(x) with no component (an import of a name the module doesn't export) */
+function notComponent(f, x) {
+    if (!once(`SYG427:${f.name}`))
+        return;
+    const got = x === null ? 'null' : typeof x == 'object' ? 'an object' : String(x);
+    devReport('SYG427', {
+        component: f.name,
+        message: `${f.name}'s intent calls CHILD.select(${got}): that is not a component, so it never emits`,
+        fix: "Pass the child component itself, and check its import: a name its module doesn't export is undefined (Vitest runs on; the browser fails to link the module). Export it: export function Child() { … }",
+        data: { got },
+    });
+}
 /** the removed forms a definition shows (statics, view arity, model keys), once per function */
 let seenDefs = new WeakSet();
 // G-332: resetChecks() forgets them (as the once() dedupe)
@@ -4048,12 +4121,18 @@ function nextHooks(_api) {
     // G-527: one chain of SYG149 checks over the latest patches (G-501: it stops once every instance
     // that renders a named Collection is disposed, the app's dispose included)
     const vtCheck = vtChecker(() => vtp.size && on());
+    // SYG428: the live instances by id, to read a child's parent state
+    const live = new Map();
     return {
         onCreate(iv) {
+            live.set(iv.id, iv);
             if (!on())
                 return;
             log.onCreate(iv);
             const f = fac(iv);
+            const parent = live.get(iv.parentId);
+            if (parent)
+                dottedKey(f, `<${f.name} state`, iv.props?.state, parent.state);
             removedStatics(f);
             if (!iv.def.intent)
                 wire(iv, []);
@@ -4077,8 +4156,13 @@ function nextHooks(_api) {
                     const v = t[k];
                     if (k !== 'CHILD' || !v || typeof v.select != 'function')
                         return v;
-                    return { ...v, select: (x, ...r) => { if (typeof x == 'string')
-                            removed(f, f.name, 'child-select-name', `CHILD.select('${x}')`); return v.select(x, ...r); } };
+                    return { ...v, select: (x, ...r) => {
+                            if (typeof x == 'string')
+                                removed(f, f.name, 'child-select-name', `CHILD.select('${x}')`);
+                            else if (typeof x != 'function')
+                                notComponent(f, x);
+                            return v.select(x, ...r);
+                        } };
                 },
             });
         },
@@ -4107,6 +4191,7 @@ function nextHooks(_api) {
         },
         onDispose(iv) {
             vtp.delete(iv);
+            live.delete(iv.id);
             H.onDispose(fac(iv));
         },
         onAction(iv, a) { log.onAction(iv, a); },
@@ -4154,6 +4239,7 @@ function nextHooks(_api) {
                 checkCollection(f, { data: { props } });
             }
             catch (_) { /* ignore */ }
+            dottedKey(f, `<${sel == 'collection' ? 'Collection' : 'VirtualCollection'} from`, props.from, owner.state);
             // G-419: SYG148 for a prefix that isn't an identifier; a valid one is checked for
             // duplicate names after each patch (SYG149). G-460: a falsy one names nothing (as the host)
             const p = props.viewTransitionName;