sygnal 7.2.0-preview.0 → 7.2.0-preview.1

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 All notable changes to Sygnal are listed here. Versions follow [semantic versioning](https://semver.org). Releases before 5.4.0 are described in the [GitHub releases](https://github.com/tpresley/sygnal/releases) and tags.
 
+## 7.2.0-preview.1 — dev preview
+
+Fixes and additions from porting a large React app to the 7.2 preview. Everything is additive except
+the two entries marked **Behaviour change** (a view returning `null`, and `false` on a string prop).
+
+**New.**
+- **Streamed responses on `makeFetchDriver`:** a request with `stream: 'sse' | 'ndjson' | 'text'` (a
+  POST too) sends each piece to its `chunk` action, then `ok` with `{ status, headers }` at the end.
+  `done: '[DONE]'` (or a predicate) ends the stream on a sentinel; `meta: true` gives SSE pieces as
+  `{ data, event, id }`. `abort`, `latest` and `timeoutMs` (the time to the first byte) apply; retry,
+  the cache, `parse` and `validate` don't, and resources never stream. Tests: `t.push('HTTP', piece)`,
+  then `t.respond('HTTP', null)` to end it.
+- **`keepHeaders: ['X-Computed-At']` on a request:** a resource's state gets `headers` (lowercased
+  names, `null` when absent) next to `data`. The query cache stores them, so cache hits, SSR
+  `dehydrate()` / `hydrate()` and refetches keep them. `cache.set(request, data, headers?)`.
+- **`{ reset: true | tag | tags | '/prefix' | predicate }` on the HTTP sink** (logout): matching cache
+  entries are dropped and matching mounted resources go back to `'loading'` with no data, then refetch
+  (React Query's `resetQueries`). `queryCache().clear()` drops every entry.
+- **Response headers on failures:** the `error` reply, `errors()` and the Error itself carry `headers`.
+- **`Comp<{ state, props, actions, calculated, context, parent, ... }>` / `RootComp<{ ... }>`**
+  (`ComponentSpec`, `RootComponentSpec`): components typed by name instead of seven positional
+  generics; `parent: Payload` types the parent's `CHILD.select(C)`. A misspelled key is a type error.
+  The positional `Component<...>` is unchanged. This is the form docs and llms.txt now show; 8.0 plans
+  to make it `Component`'s only form.
+- **`t.location.query`** (the parsed query, as `state.route.query`).
+
+**Changed.**
+- **Behaviour change:** a view returning `null`, `false` or `undefined` renders nothing (an empty
+  comment), as in React; it rendered an empty `<div>`. `ClientOnly` with no children renders nothing too.
+- **Behaviour change:** `false` on a string DOM property (`title={on && 'tip'}`) removes the attribute,
+  as React and `renderToString` already did; it rendered `title="false"`. `value`, `contentEditable`
+  and custom-element properties are unchanged.
+- A `next()` timeout in `renderComponent` names the usual cause: an awaited `t.respond` /
+  `t.simulateEvent` has already settled, so read `t.state`.
+
+**Fixed.**
+- A resource whose behaviour-only fields change (`refetchEvery: s.live ? 5000 : undefined`,
+  `keepPrevious`, `retry`, `staleTime`, `ok` / `error`, …) keeps its data and status: polling starts,
+  stops or reschedules without a new request. It went back to `'loading'` with its data cleared.
+- Components inside `<Portal>` are instantiated (they rendered as a literal tag).
+- On the server, a child without a `state` prop gets its parent's state, as on the client (it got its
+  own `initialState`).
+
+**Docs.** Reading response headers (`keepHeaders`, or a `parse` function, which is uncached), the logout
+reset, a cursor infinite list, streamed POSTs (a live demo), and the router block's leave-page prompt in
+llms.txt.
+
+**Companion packages.** sygnal-check accepts `chunk` as an HTTP reply action.
+
 ## 7.2.0-preview.0 — dev preview
 
 A dev preview (`npm install sygnal@next sygnal-check@next`). Its new subpaths and the `compile` option are

package/dist/astro/server.cjs.js

@@ -2885,6 +2885,17 @@ const isObj = (o) => o !== null && typeof o == 'object' && !Array.isArray(o);
  * Children read through their parent's decorated cell, so they see its calculated fields, and a
  * child's write stores freshly computed ones (4-F).
  */
+/**
+ * SPIKE (state paths): a state designator as segments. A plain key is one segment; 'a.b.0' and
+ * 'a[0].b' are paths into nested objects and arrays. No array form: an array `from` / `state` is
+ * the data passed by mistake (SYG410 / SYG412), and ['x', 'y'] would be ambiguous.
+ */
+const pathOf = (p) => p.replace(/\[(\d+)\]/g, '.$1').split('.');
+const getIn = (o, ks) => { for (const k of ks) {
+    if (o == null)
+        return undefined;
+    o = o[k];
+} return o; };
 // ------------------------------------------------------------------ Collection items
 /**
  * An item's key: the `id` of an object item (anything but undefined / null, compared as a string,
@@ -3099,7 +3110,7 @@ function withResources(def, state, ctx) {
         }
         catch (_) { }
         const E = q && ssrCache ? ssrCache.get(ssrCache.key(q, 1)) : undefined;
-        out[n] = E && E.at > 0 ? { status: 'success', data: E.v } : { status: q ? 'loading' : 'idle' };
+        out[n] = E && E.at > 0 ? { status: 'success', data: E.v, ...(E.h && { headers: E.h }) } : { status: q ? 'loading' : 'idle' };
     }
     return out;
 }
@@ -3116,7 +3127,10 @@ function childUid(uid, vnode, path) {
 // G-567: a view that returns a string or a number renders it as text (core/instance.ts view());
 // another falsy value, an empty <div>
 const textOr = (r) => typeof r == 'string' || typeof r == 'number' ? { text: '' + r } : r;
-const viewOut = (r) => textOr(r) || { sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined };
+// a view that returns null, false or undefined renders nothing: an empty comment, as the client's
+// (core/instance.ts view()), so hydration pairs it
+const nothing = () => ({ sel: '!', data: {}, children: undefined, text: '', elm: undefined, key: undefined });
+const viewOut = (r) => textOr(r) || nothing();
 const errorDiv = () => ({ sel: 'div', data: { attrs: { 'data-sygnal-error': '' } }, children: [], text: undefined, elm: undefined, key: undefined });
 /**
  * A view threw: the component's onError boundary picks the fallback (the error <div> without
@@ -3229,9 +3243,7 @@ function renderRoot(componentDef, options) {
         // Error boundary
         vnode = viewFailed(componentDef, err, componentDef.componentName || componentDef.name || 'Component');
     }
-    if (!vnode) {
-        vnode = { sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined };
-    }
+    vnode = viewOut(vnode);
     // Process special components in the VNode tree
     vnode = processSSRTree(vnode, mergedContext, resolvedState, uid, 'r');
     // PLAN-4 3-R: mark the root element (a fragment's first element) as Sygnal's server markup, so
@@ -3248,7 +3260,7 @@ function renderRoot(componentDef, options) {
                     return f;
             }
     };
-    const first = vnode?.sel ? vnode : firstEl(vnode);
+    const first = firstEl(vnode);
     if (first && !innerHtmlMode)
         first.data = { ...first.data, attrs: { 'data-sygnal-ssr': '', ...first.data?.attrs } };
     // Serialize to HTML
@@ -3425,16 +3437,26 @@ function renderSubComponent(vnode, context, parentState, uid) {
             key: undefined,
         };
     }
-    // Determine child state via state lens
-    let childState = componentDef.initialState;
-    const stateProp = childProps.state;
-    if (typeof stateProp === 'string' && parentState != null && parentState[stateProp] != null) {
-        childState = parentState[stateProp];
-    }
-    else if (stateProp != null && typeof stateProp !== 'string') {
-        // State passed directly
-        childState = stateProp;
+    // the child's state, as the client's cells give it (core/cell.ts, Inst.child): a key or path
+    // (`"a.b"`, `"a[0].b"`), a lens's get(), else the parent's state (an isolatedState child: its
+    // initialState; a `state` prop that is not a lens: the parent's whole state, SYG410)
+    const stateProp = childProps.state, own = componentDef.initialState;
+    let childState;
+    if (typeof stateProp === 'string') {
+        childState = parentState == null ? undefined : getIn(parentState, pathOf(stateProp));
+        if (childState === undefined)
+            childState = own;
+    }
+    else if (typeof stateProp?.get === 'function') {
+        try {
+            childState = stateProp.get(parentState);
+        }
+        catch (_) {
+            childState = undefined;
+        }
     }
+    else
+        childState = componentDef.isolatedState ? own : parentState;
     childState = withResources(componentDef, childState, contextOf(componentDef, childState, context));
     // Build child context
     const childContext = contextOf(componentDef, childState, context);
@@ -3591,14 +3613,15 @@ function renderCollection(vnode, context, parentState, uid, limit, skip, deco) {
         catch (err) {
             itemVnode = viewFailed(itemComponent, err, itemComponent.name || 'CollectionItem');
         }
-        const out = processSSRTree(textOr(itemVnode), itemContext, itemState, itemUid, 'r');
+        const out = processSSRTree(viewOut(itemVnode), itemContext, itemState, itemUid, 'r');
         // PLAN-5 A-1: the names the client's Collection gives a keyed item's root element
-        const named = vtn && isItemObj && itemState.id != null && out?.sel
+        const el = out?.sel && out.sel != '!';
+        const named = vtn && isItemObj && itemState.id != null && el
             ? { ...out, data: { ...out.data, style: vtStyle(vtn, itemState.id, out.data?.style) } }
             : out;
         // a VirtualCollection's row decoration, with the row's position in the list (G-431: counted
         // before the rows that render nothing are left out, as the client counts them)
-        return deco && named?.sel ? deco(named, pos) : named;
+        return deco && el ? deco(named, pos) : named;
     }).filter((v) => v != null);
     return frag(renderedItems);
 }
@@ -3641,59 +3664,19 @@ function renderVirtual(vnode, context, parentState, uid) {
     ]);
 }
 /**
- * Render a Switchable by determining the active component from state.
+ * A Switchable: its `current` page of `of`, rendered as the client's host makes it
+ * (core/hosts/switchable.ts): the Switchable's props and children, its `state` (a key, a lens,
+ * or a per-page map `{ page: key | lens }`; none: the owner's state). A `current` that isn't a
+ * key of `of` renders nothing (the client renders the owner's error fallback, SYG416)
  */
 function renderSwitchable(vnode, context, parentState, uid) {
-    const props = vnode.data?.props || {};
-    const { components, active, initial } = props;
-    if (!components) {
-        return { sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined };
-    }
-    // Determine which component to render
-    let activeName;
-    if (typeof active === 'string') {
-        // Direct name or state property
-        if (components[active]) {
-            activeName = active;
-        }
-        else if (parentState && typeof parentState[active] === 'string') {
-            activeName = parentState[active];
-        }
-    }
-    if (!activeName && initial) {
-        activeName = initial;
-    }
-    if (!activeName) {
-        activeName = Object.keys(components)[0];
-    }
-    const activeComponent = components[activeName];
-    if (!activeComponent || typeof activeComponent !== 'function') {
-        return { sel: 'div', data: {}, children: [], text: undefined, elm: undefined, key: undefined };
-    }
-    return renderToStringInternal(activeComponent, parentState, context, uid + '-' + uidPart(activeName));
-}
-/**
- * Internal helper: render a component def to a VNode (not HTML string).
- */
-function renderToStringInternal(componentDef, state, context, uid) {
-    const own = state !== undefined ? state : componentDef.initialState;
-    const resolvedState = withResources(componentDef, own, contextOf(componentDef, own, context));
-    const mergedContext = contextOf(componentDef, resolvedState, context);
-    collectHead(componentDef, resolvedState, mergedContext);
-    let vnode;
-    try {
-        vnode = componentDef({
-            state: resolvedState,
-            children: [],
-            slots: {},
-            context: mergedContext,
-            uid: makeUid(uid),
-        });
-    }
-    catch (err) {
-        vnode = viewFailed(componentDef, err, componentDef.name || 'Component');
-    }
-    return processSSRTree(viewOut(vnode), mergedContext, resolvedState, uid, 'r');
+    const props = vnode.data?.props || {}, of = props.of, cur = props.current;
+    const page = of && typeof cur == 'string' && of[cur];
+    if (typeof page != 'function')
+        return null;
+    const st = props.state, map = st && typeof st == 'object' && typeof st.get != 'function' ? st : null;
+    const pageProps = { ...props, state: map ? map[cur] : st };
+    return renderSubComponent({ sel: cur, data: { props: pageProps, c: page }, children: vnode.children }, context, parentState, uid + '-' + uidPart(cur));
 }
 const ws = (t) => t.replace(/[\t\n\f\r ]+/g, ' ').replace(/^ | $/g, '');
 const fieldValue = (data) => data?.props?.value ?? data?.attrs?.value;
@@ -3730,6 +3713,8 @@ function vnodeToHtml(vnode, sv) {
         return escapeHtml(String(vnode.text));
     // VNode with text content and a selector
     const sel = vnode.sel;
+    if (sel == '!')
+        return `<!--${String(vnode.text ?? '').replace(/--/g, '- -')}-->`;
     if (!sel) {
         if (vnode.text != null)
             return escapeHtml(String(vnode.text));