synstate-dom 0.5.0 → 0.7.0

package/dist/keyboard/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../src/keyboard/index.mts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/keyboard/index.mjs

@@ -0,0 +1,2 @@
+export * from './is-ime-key-down.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/keyboard/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../src/keyboard/index.mts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/keyboard/is-ime-key-down.d.mts

@@ -0,0 +1,11 @@
+import type { StrictPick } from 'ts-type-forge';
+/**
+ * Whether a key down is an input method's rather than the field's: one sent
+ * while a composition is going on, or the Enter or Escape that confirmed or
+ * cancelled one, which Safari sends after `compositionend`, told from the
+ * field's by its key code alone. Other keys with that key code are the field's:
+ * a virtual keyboard on Android sends it for the keys that type text, and its
+ * arrow keys may carry it too.
+ */
+export declare const isImeKeyDown: (event: StrictPick<KeyboardEvent, 'isComposing' | 'key' | 'keyCode'>) => boolean;
+//# sourceMappingURL=is-ime-key-down.d.mts.map

package/dist/keyboard/is-ime-key-down.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-ime-key-down.d.mts","sourceRoot":"","sources":["../../src/keyboard/is-ime-key-down.mts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,UAChB,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,KAAK,GAAG,SAAS,CAAC,KAClE,OAI8B,CAAC"}

package/dist/keyboard/is-ime-key-down.mjs

@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+export const isImeKeyDown = (event) => event.isComposing ||
+    ((event.key === 'Enter' || event.key === 'Escape') &&
+
+        event.keyCode === imeKeyCode);
+
+const imeKeyCode = 229;
+//# sourceMappingURL=is-ime-key-down.mjs.map

package/dist/keyboard/is-ime-key-down.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-ime-key-down.mjs","sourceRoot":"","sources":["../../src/keyboard/is-ime-key-down.mts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAmE,EAC1D,EAAE,CACX,KAAK,CAAC,WAAW;IACjB,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC;QAChD,6GAA6G;QAC7G,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC;AAElC,6DAA6D;AAC7D,MAAM,UAAU,GAAG,GAAG,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.5.0",
+  "version": "0.7.0",
   "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.0",
-    "eslint-plugin-ts-data-forge": "0.10.7",
-    "eslint-plugin-ts-fortress": "1.3.12",
-    "eslint-plugin-ts-type-forge": "0.8.17",
+    "eslint-config-typed": "7.4.0",
+    "eslint-plugin-ts-data-forge": "0.10.9",
+    "eslint-plugin-ts-fortress": "1.3.13",
+    "eslint-plugin-ts-type-forge": "0.8.18",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-packagejson": "3.0.2",
-    "synstate": "6.1.1",
-    "ts-data-forge": "14.10.1",
-    "ts-repo-utils": "10.7.1"
+    "synstate": "7.0.0",
+    "ts-data-forge": "14.11.0",
+    "ts-repo-utils": "10.7.2"
   },
   "peerDependencies": {
-    "synstate": ">=6.1.1",
-    "ts-data-forge": ">=14.10.1"
+    "synstate": ">=7.0.0",
+    "ts-data-forge": ">=14.11.0"
   },
   "engines": {
     "node": ">=22.23.4",

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,10 @@ 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.
+ *
  * `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 +81,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 +173,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 +189,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 +225,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 +247,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,10 @@ 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.
  */
 export const mountSwitch = <V, K>(
   value: Bindable<V>,
@@ -37,17 +46,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 +64,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/index.mts

@@ -1,5 +1,6 @@
 export * from './constant/index.mjs';
 export * from './control/index.mjs';
 export * from './jsx/index.mjs';
+export * from './keyboard/index.mjs';
 export * from './render.mjs';
 export * from './scope/index.mjs';

package/src/internal/after-attach.mts

@@ -0,0 +1,173 @@
+/**
+ * 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.
+ */
+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 flush = (): void => {
+    const { latest } = mut_pending;
+
+    mut_pending.latest = undefined;
+
+    if (latest !== undefined && anchor.parentNode !== null) {
+      apply(latest.value);
+    }
+  };
+
+  return (value) => {
+    if (anchor.parentNode !== null) {
+      mut_pending.latest = undefined;
+
+      apply(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);
+    }
+  };
+};
+
+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;
+  }
+};

package/src/internal/as-constant.mts

@@ -1,10 +1,10 @@
 import type { Constant } from '../constant/index.mjs';
 
 /**
- * The one type assertion in the library. `Constant<T>` is a brand that exists
- * only in the type system, so marking a value as one changes nothing at run
- * time; this is what {@link constant} and the helpers that derive one constant
- * from another call.
+ * The one type assertion that brands a value. `Constant<T>` is a brand that
+ * exists only in the type system, so marking a value as one changes nothing at
+ * run time; this is what {@link constant} and the helpers that derive one
+ * constant from another call.
  */
 export const asConstant = <T,>(value: T): Constant<T> =>
   // eslint-disable-next-line total-functions/no-unsafe-type-assertion -- a brand has no run-time part to check

package/src/internal/dom-tables.mts

@@ -28,6 +28,9 @@ export const propertyNames = [
  */
 export const attributeNameOf: ReadonlyRecord<string, string> = {
   acceptCharset: 'accept-charset',
+  defaultMuted: 'muted',
+  defaultSelected: 'selected',
+  encoding: 'enctype',
   htmlFor: 'for',
   httpEquiv: 'http-equiv',
 } as const;

package/src/internal/index.mts

@@ -1,3 +1,4 @@
+export * from './after-attach.mjs';
 export * from './as-constant.mjs';
 export * from './bind-value.mjs';
 export * from './dom-tables.mjs';

package/src/jsx/element-props.mts

@@ -118,7 +118,20 @@ type IsWritable<E, K extends keyof E> =
 
 /**
  * Writable primitive properties that are not attributes, or that are props of
- * their own (`class`, `style`).
+ * their own (`class`, `style`). The binding would pass them to `setAttribute`,
+ * which makes an attribute nothing reads (#2934): the parts of `<a>`'s `href`
+ * (`hash` … `username`), the text of `<a>`, `<option>`, `<script>` and
+ * `<title>` (`text`), media playback state (`currentTime` … `volume`), and form
+ * control state (`returnValue` … `length`), and the obsolete `ch` and `chOff`
+ * of table cells, whose attributes are `char` and `charoff`. A property written as a property is
+ * in `propertyNames`, and one whose attribute is spelt differently in
+ * `attributeNameOf`. Checked in Chromium by setting the attribute and reading
+ * the property back.
+ *
+ * The keys are left out of every element, so a name that is an attribute on one
+ * element and not on another goes by the common case: `<body>`'s obsolete
+ * `text` attribute is left out with the rest, and `<style>`'s `disabled`, which
+ * has no attribute, stays in with every other `disabled`.
  */
 type ExcludedKey =
   | 'className'
@@ -129,4 +142,28 @@ type ExcludedKey =
   | 'outerText'
   | 'scrollLeft'
   | 'scrollTop'
-  | 'textContent';
+  | 'textContent'
+  | 'hash'
+  | 'host'
+  | 'hostname'
+  | 'password'
+  | 'pathname'
+  | 'port'
+  | 'protocol'
+  | 'search'
+  | 'username'
+  | 'text'
+  | 'currentTime'
+  | 'defaultPlaybackRate'
+  | 'playbackRate'
+  | 'preservesPitch'
+  | 'volume'
+  | 'returnValue'
+  | 'selectedIndex'
+  | 'selectionDirection'
+  | 'selectionEnd'
+  | 'selectionStart'
+  | 'valueAsNumber'
+  | 'length'
+  | 'ch'
+  | 'chOff';

package/src/jsx/jsx.mts

@@ -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, type Child } from './child.mjs';
 import { mountable, type Mountable } from './mountable.mjs';
 
@@ -50,7 +50,7 @@ const mountElement = (tag: string, props: unknown): Element => {
 
   // Children first, so that a `<select>`'s `value` finds its `<option>`s.
   if (hasKey(props, 'children') && isChild(props.children)) {
-    element.append(...mountChild(props.children));
+    mountThenInsert(mountChild, props.children, appendTo, element);
   }
 
   bindProps(element, props);

package/src/keyboard/index.mts

@@ -0,0 +1 @@
+export * from './is-ime-key-down.mjs';

package/src/keyboard/is-ime-key-down.mts

@@ -0,0 +1,20 @@
+import type { StrictPick } from 'ts-type-forge';
+
+/**
+ * Whether a key down is an input method's rather than the field's: one sent
+ * while a composition is going on, or the Enter or Escape that confirmed or
+ * cancelled one, which Safari sends after `compositionend`, told from the
+ * field's by its key code alone. Other keys with that key code are the field's:
+ * a virtual keyboard on Android sends it for the keys that type text, and its
+ * arrow keys may carry it too.
+ */
+export const isImeKeyDown = (
+  event: StrictPick<KeyboardEvent, 'isComposing' | 'key' | 'keyCode'>,
+): boolean =>
+  event.isComposing ||
+  ((event.key === 'Enter' || event.key === 'Escape') &&
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- the key code is all that tells Safari's apart
+    event.keyCode === imeKeyCode);
+
+/** The key code of a key down that an input method takes. */
+const imeKeyCode = 229;