synstate-dom 0.6.0 → 0.7.1

package/dist/jsx/element-props.d.mts

@@ -13,13 +13,15 @@ import type { EventPropNames } from './event-prop-names.mjs';
  * - `style` is either a `cssText` string or an object of CSS properties, each
  *   bound with `style.setProperty`, so the keys are the hyphenated names
  *   (`'background-color'`, `'--accent'`).
+ * - An `aria-*` attribute also takes a number (`aria-level`, `aria-valuenow`)
+ *   and a boolean, written as `"true"` or `"false"`.
  */
 export type CommonElementProps<E extends Element> = Readonly<{
     ref?: (element: E) => void;
     children?: Child;
     class?: Bindable<string> | ClassObject;
     style?: Bindable<string> | StyleObject;
-}> & Partial<ReadonlyRecord<`aria-${string}` | `data-${string}`, Bindable<string | undefined>>>;
+}> & Partial<ReadonlyRecord<`aria-${string}`, Bindable<boolean | number | string | undefined>>> & Partial<ReadonlyRecord<`data-${string}`, Bindable<string | undefined>>>;
 /** `class` as one `Bindable<boolean>` per class name. */
 export type ClassObject = ReadonlyRecord<string, Bindable<boolean>>;
 /**

package/dist/jsx/element-props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"element-props.d.mts","sourceRoot":"","sources":["../../src/jsx/element-props.mts"],"names":[],"mappings":"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"}
+{"version":3,"file":"element-props.d.mts","sourceRoot":"","sources":["../../src/jsx/element-props.mts"],"names":[],"mappings":"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"}

package/dist/jsx/jsx.mjs

@@ -1,6 +1,6 @@
 import { hasKey, isRecord } from 'ts-data-forge';
 import { bindProps } from '../bind/index.mjs';
-import { svgTagNames } from '../internal/index.mjs';
+import { appendTo, mountThenInsert, svgTagNames } from '../internal/index.mjs';
 import { isChild, mountChild } from './child.mjs';
 import { mountable } from './mountable.mjs';
 
@@ -36,7 +36,7 @@ const mountElement = (tag, props) => {
     }
 
     if (hasKey(props, 'children') && isChild(props.children)) {
-        element.append(...mountChild(props.children));
+        mountThenInsert(mountChild, props.children, appendTo, element);
     }
     bindProps(element, props);
     return element;

package/dist/jsx/jsx.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"jsx.mjs","sourceRoot":"","sources":["../../src/jsx/jsx.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAkB,MAAM,iBAAiB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAiD,EACjD,KAAQ,EACR,GAAa,EACF,EAAE;IACb,6EAA6E;IAC7E,sEAAsE;IACtE,MAAM,YAAY,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAY,CAAC;IAE9E,OAAO,OAAO,IAAI,KAAK,QAAQ;QAC7B,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,iEAAiE;AACjE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAqC,EAAa,EAAE,CAC3E,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;AAEpD,MAAM,aAAa,GAAG,CAAC,KAAc,EAAuC,EAAE,CAC5E,OAAO,KAAK,KAAK,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,KAAc,EAAW,EAAE;IAC5D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC;QACpC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC;QAC7C,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEhC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAED,wEAAwE;IACxE,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzD,OAAO,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAE1B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,4BAA4B,CAAC;AAElD,MAAM,aAAa,GAAwB,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC"}
+{"version":3,"file":"jsx.mjs","sourceRoot":"","sources":["../../src/jsx/jsx.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAc,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAkB,MAAM,iBAAiB,CAAC;AAE5D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAiD,EACjD,KAAQ,EACR,GAAa,EACF,EAAE;IACb,6EAA6E;IAC7E,sEAAsE;IACtE,MAAM,YAAY,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,GAAG,EAAY,CAAC;IAE9E,OAAO,OAAO,IAAI,KAAK,QAAQ;QAC7B,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,iEAAiE;AACjE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAqC,EAAa,EAAE,CAC3E,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC;AAEpD,MAAM,aAAa,GAAG,CAAC,KAAc,EAAuC,EAAE,CAC5E,OAAO,KAAK,KAAK,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,KAAc,EAAW,EAAE;IAC5D,MAAM,OAAO,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC;QACpC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC;QAC7C,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAEhC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAED,wEAAwE;IACxE,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzD,eAAe,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;IAED,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAE1B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,4BAA4B,CAAC;AAElD,MAAM,aAAa,GAAwB,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC"}

package/dist/render.d.mts

@@ -5,7 +5,8 @@ import { type JSX } from './jsx/index.mjs';
  *
  * `app` is called once, inside a new root scope; everything created while it
  * and the description it returns are mounted belongs to that scope, and
- * unmounting disposes it and removes the nodes.
+ * unmounting disposes it and removes the nodes. If mounting throws, what was
+ * mounted is disposed and removed before the error is rethrown.
  *
  * `render(App, el)` rather than `render(<App />, el)`: taking the component
  * makes it plain that it is evaluated here.

package/dist/render.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.mts","sourceRoot":"","sources":["../src/render.mts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,QACZ,MAAM,GAAG,CAAC,OAAO,aACX,OAAO,KACjB,CAAC,MAAM,IAAI,CAcb,CAAC"}
+{"version":3,"file":"render.d.mts","sourceRoot":"","sources":["../src/render.mts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,QACZ,MAAM,GAAG,CAAC,OAAO,aACX,OAAO,KACjB,CAAC,MAAM,IAAI,CAmCb,CAAC"}

package/dist/render.mjs

@@ -1,4 +1,5 @@
 import { createScope } from 'synstate';
+import { appendTo, mountThenInsert } from './internal/index.mjs';
 import { toNodes } from './jsx/index.mjs';
 
 
@@ -11,15 +12,29 @@ import { toNodes } from './jsx/index.mjs';
 
 
 
+
 export const render = (app, container) => {
     const root = createScope(undefined);
-    const nodes = root.run(() => toNodes(app().mount()));
-    container.append(...nodes);
-    return () => {
+    const mut_inserted = { nodes: [] };
+    const unmount = () => {
         root.dispose();
-        for (const node of nodes) {
+        for (const node of mut_inserted.nodes) {
             node.remove();
         }
     };
+    try {
+        root.run(() => mountThenInsert(mountApp, app, (into, nodes) => {
+            mut_inserted.nodes = nodes;
+            appendTo(into, nodes);
+        }, container));
+    }
+    catch (error) {
+
+
+        unmount();
+        throw error;
+    }
+    return unmount;
 };
+const mountApp = (app) => toNodes(app().mount());
 //# sourceMappingURL=render.mjs.map

package/dist/render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"render.mjs","sourceRoot":"","sources":["../src/render.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAY,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,GAAsB,EACtB,SAAkB,EACJ,EAAE;IAChB,MAAM,IAAI,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAErD,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC;IAE3B,OAAO,GAAG,EAAE;QACV,IAAI,CAAC,OAAO,EAAE,CAAC;QAEf,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"render.mjs","sourceRoot":"","sources":["../src/render.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAY,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,GAAsB,EACtB,SAAkB,EACJ,EAAE;IAChB,MAAM,IAAI,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAoC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAEpE,MAAM,OAAO,GAAG,GAAS,EAAE;QACzB,IAAI,CAAC,OAAO,EAAE,CAAC;QAEf,KAAK,MAAM,IAAI,IAAI,YAAY,CAAC,KAAK,EAAE,CAAC;YACtC,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CACZ,eAAe,CACb,QAAQ,EACR,GAAG,EACH,CAAC,IAAa,EAAE,KAA2B,EAAE,EAAE;YAC7C,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;YAE3B,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC,EACD,SAAS,CACV,CACF,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,yEAAyE;QACzE,0EAA0E;QAC1E,OAAO,EAAE,CAAC;QAEV,MAAM,KAAK,CAAC;IACd,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,GAAsB,EAAwB,EAAE,CAChE,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synstate-dom",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Compiler-free fine-grained UI library that binds synstate observables directly to the DOM",
   "repository": {
     "type": "git",
@@ -44,21 +44,21 @@
   },
   "devDependencies": {
     "@vitest/browser-playwright": "5.0.5",
-    "eslint-config-typed": "7.3.1",
-    "eslint-plugin-ts-data-forge": "0.10.8",
-    "eslint-plugin-ts-fortress": "1.3.12",
-    "eslint-plugin-ts-type-forge": "0.8.17",
+    "eslint-config-typed": "7.5.0",
+    "eslint-plugin-ts-data-forge": "0.10.10",
+    "eslint-plugin-ts-fortress": "1.3.14",
+    "eslint-plugin-ts-type-forge": "0.8.19",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-packagejson": "3.0.2",
-    "synstate": "6.2.1",
-    "ts-data-forge": "14.10.2",
-    "ts-repo-utils": "10.7.1"
+    "synstate": "7.0.1",
+    "ts-data-forge": "14.11.0",
+    "ts-repo-utils": "10.7.3"
   },
   "peerDependencies": {
-    "synstate": ">=6.2.1",
-    "ts-data-forge": ">=14.10.2"
+    "synstate": ">=7.0.1",
+    "ts-data-forge": ">=14.11.0"
   },
   "engines": {
     "node": ">=22.23.4",

package/src/bind/bind-props.mts

@@ -49,6 +49,25 @@ const writeAttribute = (
   element.setAttribute(name, unknownToString(value));
 };
 
+/**
+ * An `aria-*` attribute reads `""` as its default, so a boolean is written as
+ * `"true"` or `"false"`, as React does (#3165); anything else as
+ * {@link writeAttribute} writes it.
+ */
+const writeAriaAttribute = (
+  element: Element,
+  name: string,
+  value: unknown,
+): void => {
+  if (isBoolean(value)) {
+    element.setAttribute(name, value ? 'true' : 'false');
+
+    return;
+  }
+
+  writeAttribute(element, name, value);
+};
+
 /**
  * Every value is a `Bindable` at run time: what is neither an observable nor a
  * view is a constant. An omitted prop is `undefined`, which is not.
@@ -269,8 +288,10 @@ const bindProp = (element: Element, key: string, value: unknown): void => {
 
   const name = attributeNameOf[key] ?? key;
 
+  const write = name.startsWith('aria-') ? writeAriaAttribute : writeAttribute;
+
   bindValue(value, (v) => {
-    writeAttribute(element, name, v);
+    write(element, name, v);
   });
 };
 

package/src/control/for.mts

@@ -11,7 +11,12 @@ import {
 import { Arr, Optional } from 'ts-data-forge';
 import type { BivariantHack } from 'ts-type-forge';
 import { toObservable, type Bindable } from '../constant/index.mjs';
-import { bindValue } from '../internal/index.mjs';
+import {
+  applyWhenAttached,
+  bindValue,
+  insertBefore,
+  mountThenInsert,
+} from '../internal/index.mjs';
 import { mountable, toNodes, type JSX } from '../jsx/index.mjs';
 import { longestIncreasingSubsequence } from './longest-increasing-subsequence.mjs';
 
@@ -31,6 +36,12 @@ import { longestIncreasingSubsequence } from './longest-increasing-subsequence.m
  * nodes; the rows that stay are moved as little as the longest increasing
  * subsequence allows.
  *
+ * An update that arrives before the anchor is in a parent (a later sibling
+ * wrote `items` while the enclosing element was still mounting its children) is
+ * applied, with the latest `items`, once the nodes `For` returned are inserted.
+ * One that a row being mounted writes is applied, with the latest `items`, once
+ * the rows of the update under way are all mounted and inserted (#3141).
+ *
  * `key` is required, as in React; `(_, i) => i` matches rows by position. A key
  * that appears twice is reported with `console.error`, and its later
  * occurrences are rebuilt on every update.
@@ -72,7 +83,10 @@ export const For = <T,>({
 
     const rowStarts = new WeakSet<Node>();
 
-    const mut_initial: { nodes: readonly ChildNode[] } = { nodes: [] };
+    const mut_initial: { nodes: readonly ChildNode[]; built: boolean } = {
+      nodes: [],
+      built: false,
+    };
 
     /** Creates a row in a scope of its own and returns its first nodes. */
     const createRow = (
@@ -161,12 +175,11 @@ export const For = <T,>({
       range.deleteContents();
     };
 
-    bindValue(entries$, (entries) => {
+    /** Brings the attached rows in line with `entries`. */
+    const update = (entries: Entries<T>): void => {
       const previousOrder = Array.from(mut_rows.keys());
 
-      if (anchor.parentNode !== null) {
-        removeAllAtOnceIfEveryKeyGoes(previousOrder, entries);
-      }
+      removeAllAtOnceIfEveryKeyGoes(previousOrder, entries);
 
       for (const [rowKey, row] of mut_rows) {
         if (entries.byKey.has(rowKey)) {
@@ -178,16 +191,6 @@ export const For = <T,>({
         mut_rows.delete(rowKey);
       }
 
-      if (anchor.parentNode === null) {
-        mut_initial.nodes = entries.order.flatMap((rowKey) => {
-          const entry = entries.byKey.get(rowKey);
-
-          return entry === undefined ? [] : createRow(rowKey, entry);
-        });
-
-        return;
-      }
-
       if (Arr.eq(previousOrder, entries.order)) {
         return;
       }
@@ -224,11 +227,14 @@ export const For = <T,>({
             continue;
           }
 
-          const [start, ...rest] = createRow(rowKey, entry);
+          const [start] = mountThenInsert(
+            (e: Entry<T>) => createRow(rowKey, e),
+            entry,
+            insertBefore,
+            mut_next,
+          );
 
           if (start !== undefined) {
-            mut_next.before(start, ...rest);
-
             mut_next = start;
           }
 
@@ -243,6 +249,24 @@ export const For = <T,>({
       }
 
       reorderMap(mut_rows, entries.order);
+    };
+
+    const updateWhenAttached = applyWhenAttached(anchor, update);
+
+    bindValue(entries$, (entries) => {
+      if (!mut_initial.built) {
+        mut_initial.built = true;
+
+        mut_initial.nodes = entries.order.flatMap((rowKey) => {
+          const entry = entries.byKey.get(rowKey);
+
+          return entry === undefined ? [] : createRow(rowKey, entry);
+        });
+
+        return;
+      }
+
+      updateWhenAttached(entries);
     });
 
     return Arr.toPushed(mut_initial.nodes, anchor);

package/src/control/mount-switch.mts

@@ -6,7 +6,12 @@ import {
 } from 'synstate';
 import { Arr } from 'ts-data-forge';
 import type { Bindable } from '../constant/index.mjs';
-import { bindValue } from '../internal/index.mjs';
+import {
+  applyWhenAttached,
+  bindValue,
+  insertBefore,
+  mountThenInsert,
+} from '../internal/index.mjs';
 import { toNodes, type Mountable, type MountedNodes } from '../jsx/index.mjs';
 
 /**
@@ -22,6 +27,12 @@ import { toNodes, type Mountable, type MountedNodes } from '../jsx/index.mjs';
  *
  * `branch` runs inside the new scope, so whatever it creates belongs to the
  * branch.
+ *
+ * A value that arrives before the anchor is in a parent (a later sibling wrote
+ * it while the enclosing element was still mounting its children) is kept, and
+ * the switch follows the latest one once the nodes it returned are inserted.
+ * A value the branch being mounted writes itself is applied once that branch is
+ * inserted (#3141).
  */
 export const mountSwitch = <V, K>(
   value: Bindable<V>,
@@ -37,17 +48,8 @@ export const mountSwitch = <V, K>(
     initialNodes: readonly ChildNode[];
   } = { current: undefined, initialNodes: [] };
 
-  bindValue(value, (v) => {
-    const key = keyOf(v);
-
-    if (mut_state.current !== undefined) {
-      if (Object.is(mut_state.current.key, key)) {
-        return;
-      }
-
-      mut_state.current.scope.dispose();
-    }
-
+  /** Mounts the branch for `v` in a scope of its own and returns its nodes. */
+  const mountBranch = (key: K, v: V): readonly ChildNode[] => {
     const scope = createScope(parent);
 
     const nodes = scope.run(() => {
@@ -64,10 +66,31 @@ export const mountSwitch = <V, K>(
 
     mut_state.current = { key, scope };
 
-    if (anchor.parentNode === null) {
-      mut_state.initialNodes = nodes;
+    return nodes;
+  };
+
+  /** Switches the attached switch to the branch for `v`. */
+  const switchTo = (v: V): void => {
+    const key = keyOf(v);
+
+    if (mut_state.current !== undefined) {
+      if (Object.is(mut_state.current.key, key)) {
+        return;
+      }
+
+      mut_state.current.scope.dispose();
+    }
+
+    mountThenInsert((k: K) => mountBranch(k, v), key, insertBefore, anchor);
+  };
+
+  const switchWhenAttached = applyWhenAttached(anchor, switchTo);
+
+  bindValue(value, (v) => {
+    if (mut_state.current === undefined) {
+      mut_state.initialNodes = mountBranch(keyOf(v), v);
     } else {
-      anchor.before(...nodes);
+      switchWhenAttached(v);
     }
   });
 

package/src/control/portal.mts

@@ -1,4 +1,5 @@
 import { onScopeDispose } from 'synstate';
+import { appendTo, mountThenInsert } from '../internal/index.mjs';
 import { mountChild, mountable, type Child, type JSX } from '../jsx/index.mjs';
 
 /**
@@ -18,9 +19,12 @@ export const Portal = ({
   children: Child;
 }>): JSX.Element =>
   mountable(() => {
-    const nodes = mountChild(children);
-
-    (target ?? document.body).append(...nodes);
+    const nodes = mountThenInsert(
+      mountChild,
+      children,
+      appendTo,
+      target ?? document.body,
+    );
 
     onScopeDispose(() => {
       for (const node of nodes) {

package/src/internal/after-attach.mts

@@ -0,0 +1,238 @@
+import { getCurrentScope, onScopeDispose } from 'synstate';
+
+/**
+ * Nodes are mounted before they are inserted: an element mounts all its
+ * children and then appends them, `render` mounts the app and then appends it,
+ * and `For` and `If` mount a row or a branch and then insert it. A child
+ * mounted later that writes to what an earlier `For` or `If` reads updates them
+ * while their anchor is in no parent yet (#2935).
+ *
+ * Every mount-and-insert goes through {@link mountThenInsert}. A `For` or a
+ * switch takes {@link applyWhenAttached} when it is mounted, which notes the
+ * mount open then; a value that arrives while its anchor is detached is kept,
+ * and the latest one is applied once that mount has inserted its nodes.
+ *
+ * `mount` takes `arg` rather than closing over it, so that the element and
+ * `render` paths allocate nothing; a mount that nothing defers to allocates no
+ * frame.
+ */
+export const mountThenInsert = <A, N, T>(
+  mount: (input: A) => N,
+  arg: A,
+  insert: (into: T, mounted: N) => void,
+  target: T,
+): N => {
+  mut_state.depth += 1;
+
+  mut_state.lastId += 1;
+
+  const { depth } = mut_state;
+
+  mut_state.ids[depth] = mut_state.lastId;
+
+  // Left behind by a mount at this depth that threw.
+  takeFrame(depth);
+
+  const nodes = runMount(mount, arg, depth);
+
+  const frame = takeFrame(depth);
+
+  insert(target, nodes);
+
+  if (frame !== undefined) {
+    runAll(frame);
+  }
+
+  return nodes;
+};
+
+/** Appends `nodes` to `parent`: an `insert` for {@link mountThenInsert}. */
+export const appendTo = (
+  parent: Element,
+  nodes: readonly ChildNode[],
+): void => {
+  parent.append(...nodes);
+};
+
+/** Inserts `nodes` in front of `next`: an `insert` for {@link mountThenInsert}. */
+export const insertBefore = (
+  next: ChildNode,
+  nodes: readonly ChildNode[],
+): void => {
+  next.before(...nodes);
+};
+
+/**
+ * Returns the function a `For` or a switch calls with each value after its
+ * first. While `anchor` is attached the value is applied at once, and replaces
+ * any value still waiting. While it is detached the value is kept, and the
+ * latest one is applied once the mount open now has inserted its nodes, and
+ * only if `anchor` is then attached: it is not when the `For` or switch was
+ * disposed in between.
+ *
+ * Mounted outside every {@link mountThenInsert} (a description mounted by hand),
+ * there is nothing to wait for: a value that arrives while `anchor` is detached
+ * is dropped.
+ *
+ * A value that arrives while `apply` runs (a row or a branch it mounts writes
+ * what chose it, #3141) is kept too, and the latest one is applied once `apply`
+ * returns, if `anchor` is still attached: applying it at once would act on rows
+ * or a branch the running call has not finished recording. A write that keeps
+ * coming back this way is an error after {@link maxReapply} passes, as synstate
+ * stops a nested update loop.
+ *
+ * Once the scope current when it was taken is disposed, nothing more is
+ * applied: `anchor` can still have a parent then, a disposed element that held
+ * the `For` or switch.
+ */
+export const applyWhenAttached = <V,>(
+  anchor: Node,
+  apply: (value: V) => void,
+): ((value: V) => void) => {
+  const { depth } = mut_state;
+
+  const id = mut_state.ids[depth];
+
+  const mut_pending: { latest: Readonly<{ value: V }> | undefined } = {
+    latest: undefined,
+  };
+
+  const mut_running = { current: false };
+
+  const mut_disposed = { current: false };
+
+  if (getCurrentScope() !== undefined) {
+    onScopeDispose(() => {
+      mut_disposed.current = true;
+    });
+  }
+
+  const attached = (): boolean =>
+    !mut_disposed.current && anchor.parentNode !== null;
+
+  /** Applies `value`, then each value that arrived meanwhile, while attached. */
+  const applyNow = (value: V): void => {
+    mut_running.current = true;
+
+    try {
+      apply(value);
+
+      for (let mut_pass = 1; ; mut_pass += 1) {
+        const { latest } = mut_pending;
+
+        mut_pending.latest = undefined;
+
+        if (latest === undefined || !attached()) {
+          return;
+        }
+
+        if (mut_pass >= maxReapply) {
+          throw new Error(reapplyLoopMessage);
+        }
+
+        apply(latest.value);
+      }
+    } finally {
+      mut_running.current = false;
+    }
+  };
+
+  const flush = (): void => {
+    const { latest } = mut_pending;
+
+    mut_pending.latest = undefined;
+
+    if (latest !== undefined && attached()) {
+      applyNow(latest.value);
+    }
+  };
+
+  return (value) => {
+    if (mut_running.current) {
+      mut_pending.latest = { value };
+
+      return;
+    }
+
+    if (attached()) {
+      mut_pending.latest = undefined;
+
+      applyNow(value);
+
+      return;
+    }
+
+    const scheduled = mut_pending.latest !== undefined;
+
+    mut_pending.latest = { value };
+
+    if (scheduled) {
+      return;
+    }
+
+    if (depth === 0 || mut_state.depth < depth || mut_state.ids[depth] !== id) {
+      // That mount has ended: its nodes are inserted.
+      flush();
+
+      return;
+    }
+
+    const mut_frame = mut_state.frames[depth];
+
+    if (mut_frame === undefined) {
+      mut_state.frames[depth] = [flush];
+    } else {
+      mut_frame.push(flush);
+    }
+  };
+};
+
+/** How many times a value written from inside `apply` is applied in a row. */
+const maxReapply = 100;
+
+const reapplyLoopMessage =
+  `synstate-dom: a For or a switch was updated more than ${maxReapply.toString()} times in a row by the rows or branch it was mounting: a row or branch keeps writing the value that chose it. Make the write stop (a condition, or a value that leads to rows or a branch that do not write).` as const;
+
+const mut_state: {
+  depth: number;
+  lastId: number;
+  /** The id of the mount open at each depth. */
+  ids: number[];
+  /** What was deferred to the mount open at each depth, in order. */
+  frames: ((() => void)[] | undefined)[];
+} = { depth: 0, lastId: 0, ids: [0], frames: [] };
+
+/** Takes what was deferred to the mount at `depth` out of the state. */
+const takeFrame = (depth: number): readonly (() => void)[] | undefined => {
+  const frame = mut_state.frames[depth];
+
+  mut_state.frames[depth] = undefined;
+
+  return frame;
+};
+
+/**
+ * Runs what was deferred to a mount. One that throws does not keep the rest
+ * from running, or they would keep their value waiting for good; the first
+ * error is rethrown once they have run.
+ */
+const runAll = (frame: readonly (() => void)[]): void => {
+  for (const [index, apply] of frame.entries()) {
+    try {
+      apply();
+    } catch (error) {
+      runAll(frame.slice(index + 1));
+
+      throw error;
+    }
+  }
+};
+
+/** A mount that throws must not leave the depth raised. */
+const runMount = <A, N>(mount: (input: A) => N, arg: A, depth: number): N => {
+  try {
+    return mount(arg);
+  } finally {
+    mut_state.depth = depth - 1;
+  }
+};