synstate-dom 0.3.0 → 0.5.0

package/dist/jsx/jsx.mjs

@@ -23,6 +23,7 @@ export const createMountable = (type, props, key) => {
 };
 
 export const Fragment = (props) => mountable(() => mountChild(props.children ?? []));
+const isRefCallback = (value) => typeof value === 'function';
 const mountElement = (tag, props) => {
     const element = svgTagNameSet.has(tag)
         ? document.createElementNS(svgNamespace, tag)
@@ -42,5 +43,4 @@ const mountElement = (tag, props) => {
 };
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const svgTagNameSet = new Set(svgTagNames);
-const isRefCallback = (value) => typeof value === 'function';
 //# sourceMappingURL=jsx.mjs.map

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,0EAA0E;IAC1E,yEAAyE;IACzE,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,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;AAEhE,MAAM,aAAa,GAAG,CAAC,KAAc,EAAuC,EAAE,CAC5E,OAAO,KAAK,KAAK,UAAU,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,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"}

package/dist/jsx/mountable.d.mts

@@ -1,7 +1,7 @@
 import { mountableTag } from '../internal/index.mjs';
 /**
- * What a JSX expression evaluates to: a description that creates DOM nodes
- * when mounted, not the nodes themselves (SPEC.md 6.1).
+ * What a JSX expression evaluates to: a description that creates DOM nodes when
+ * mounted, not the nodes themselves (SPEC.md 6.1).
  *
  * The children of a JSX element are evaluated before the element, so a
  * description that created its nodes at once would create both branches of
@@ -10,8 +10,8 @@ import { mountableTag } from '../internal/index.mjs';
  * It is an object rather than a function: a props object with a `then` prop
  * holding a function would be taken for a thenable.
  *
- * The same description may be mounted any number of times; each mount
- * creates new nodes.
+ * The same description may be mounted any number of times; each mount creates
+ * new nodes.
  */
 export type Mountable = Readonly<{
     [mountableTag]: true;

package/dist/jsx-dev-runtime.d.mts

@@ -1,7 +1,7 @@
 /**
  * The module `"jsxImportSource": "synstate-dom"` makes TypeScript import for
- * `"jsx": "react-jsxdev"`. The extra arguments (`key`, source location) are
- * not used.
+ * `"jsx": "react-jsxdev"`. The extra arguments (`key`, source location) are not
+ * used.
  */
 export { Fragment, createMountable as jsxDEV, type JSX } from './jsx/index.mjs';
 //# sourceMappingURL=jsx-dev-runtime.d.mts.map

package/dist/scope/index.d.mts

@@ -0,0 +1,2 @@
+export * from './scope-effects.mjs';
+//# sourceMappingURL=index.d.mts.map

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

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

package/dist/scope/index.mjs

@@ -0,0 +1,2 @@
+export * from './scope-effects.mjs';
+//# sourceMappingURL=index.mjs.map

package/dist/scope/index.mjs.map

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

package/dist/scope/scope-effects.d.mts

@@ -0,0 +1,25 @@
+import { type Observable } from 'synstate';
+import type { StrictPick } from 'ts-type-forge';
+/**
+ * Calls `next` with every value of `source`, the current one first, until the
+ * current scope is disposed — what a component that is called once does in
+ * place of an effect.
+ */
+export declare const subscribeInScope: <A>(source: Observable<A>, next: (value: A) => void) => void;
+/** Listens to `type` on `target` until the current scope is disposed. */
+export declare const listenInScope: (target: Readonly<StrictPick<EventTarget, 'addEventListener' | 'removeEventListener'>>, type: string, listener: (event: Event) => void, options?: Readonly<{
+    capture?: boolean;
+    passive?: boolean;
+}>) => void;
+/**
+ * Makes the function that runs work once the update under way has finished:
+ * in a microtask, so before the next paint, with the DOM bound to the update
+ * already written — and nothing written to a state while another is still
+ * propagating, which synstate warns of. Work for a scope disposed by then is
+ * dropped.
+ *
+ * Also what runs after the first mount: a component's nodes are attached to the
+ * document only once the whole description they are in is mounted.
+ */
+export declare const createAfterUpdate: () => ((work: () => void) => void);
+//# sourceMappingURL=scope-effects.d.mts.map

package/dist/scope/scope-effects.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-effects.d.mts","sourceRoot":"","sources":["../../src/scope/scope-effects.mts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,UACxB,UAAU,CAAC,CAAC,CAAC,QACf,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KACvB,IAMF,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,WAChB,QAAQ,CACd,UAAU,CAAC,WAAW,EAAE,kBAAkB,GAAG,qBAAqB,CAAC,CACpE,QACK,MAAM,YACF,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,YACtB,QAAQ,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,KAC3D,IAMF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,QAAO,CAAC,CAAC,IAAI,EAAE,MAAM,IAAI,KAAK,IAAI,CAc/D,CAAC"}

package/dist/scope/scope-effects.mjs

@@ -0,0 +1,43 @@
+import { onScopeDispose } from 'synstate';
+
+
+
+
+
+export const subscribeInScope = (source, next) => {
+    const subscription = source.subscribe(next);
+    onScopeDispose(() => {
+        subscription.unsubscribe();
+    });
+};
+
+export const listenInScope = (target, type, listener, options) => {
+    target.addEventListener(type, listener, options);
+    onScopeDispose(() => {
+        target.removeEventListener(type, listener, options);
+    });
+};
+
+
+
+
+
+
+
+
+
+
+export const createAfterUpdate = () => {
+    let mut_alive = true;
+    onScopeDispose(() => {
+        mut_alive = false;
+    });
+    return (work) => {
+        queueMicrotask(() => {
+            if (mut_alive) {
+                work();
+            }
+        });
+    };
+};
+//# sourceMappingURL=scope-effects.mjs.map

package/dist/scope/scope-effects.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope-effects.mjs","sourceRoot":"","sources":["../../src/scope/scope-effects.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAmB,MAAM,UAAU,CAAC;AAG3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,MAAqB,EACrB,IAAwB,EAClB,EAAE;IACR,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE5C,cAAc,CAAC,GAAG,EAAE;QAClB,YAAY,CAAC,WAAW,EAAE,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,yEAAyE;AACzE,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,MAEC,EACD,IAAY,EACZ,QAAgC,EAChC,OAA4D,EACtD,EAAE;IACR,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAEjD,cAAc,CAAC,GAAG,EAAE;QAClB,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAiC,EAAE;IAClE,IAAI,SAAS,GAAG,IAAI,CAAC;IAErB,cAAc,CAAC,GAAG,EAAE;QAClB,SAAS,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,IAAI,EAAE,EAAE;QACd,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,EAAE,CAAC;YACT,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synstate-dom",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Compiler-free fine-grained UI library that binds synstate observables directly to the DOM",
   "repository": {
     "type": "git",
@@ -44,24 +44,24 @@
   },
   "devDependencies": {
     "@vitest/browser-playwright": "5.0.5",
-    "eslint-config-typed": "5.19.2",
-    "eslint-plugin-ts-data-forge": "0.10.3",
-    "eslint-plugin-ts-fortress": "1.3.8",
-    "eslint-plugin-ts-type-forge": "0.8.13",
+    "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",
     "playwright": "1.64.1",
     "prettier": "3.9.10",
     "prettier-plugin-organize-imports": "4.3.0",
     "prettier-plugin-packagejson": "3.0.2",
-    "synstate": "6.0.0",
-    "ts-data-forge": "14.10.0",
+    "synstate": "6.1.1",
+    "ts-data-forge": "14.10.1",
     "ts-repo-utils": "10.7.1"
   },
   "peerDependencies": {
-    "synstate": ">=6.0.0",
-    "ts-data-forge": ">=14.10.0"
+    "synstate": ">=6.1.1",
+    "ts-data-forge": ">=14.10.1"
   },
   "engines": {
-    "node": ">=22.22.2",
+    "node": ">=22.23.4",
     "pnpm": ">=9.0.0"
   },
   "publishConfig": {

package/src/bind/bind-props.mts

@@ -8,12 +8,13 @@ import {
   propertyNames,
   viewTag,
 } from '../internal/index.mjs';
+import { listenInScope } from '../scope/index.mjs';
 
 /**
- * Binds every prop of an intrinsic element except `ref` and `children`
- * (SPEC.md 7): `class`, `style`, event handlers, the DOM properties of
- * `propertyNames`, and attributes for the rest. Subscriptions and listeners
- * are released when the current scope is disposed.
+ * Binds every prop of an intrinsic element except `ref` and `children` (SPEC.md
+ * 7): `class`, `style`, event handlers, the DOM properties of `propertyNames`,
+ * and attributes for the rest. Subscriptions and listeners are released when
+ * the current scope is disposed.
  */
 export const bindProps = (
   element: Element,
@@ -24,43 +25,42 @@ export const bindProps = (
   }
 };
 
-const bindProp = (element: Element, key: string, value: unknown): void => {
-  if (key === 'children' || key === 'ref' || !isBindable(value)) {
-    return;
-  }
-
-  if (key === 'class') {
-    bindClass(element, value);
-
-    return;
-  }
-
-  if (key === 'style') {
-    bindStyle(element, value);
+/**
+ * `true` writes an empty attribute, and `false`, `undefined` and `null` remove
+ * it.
+ */
+const writeAttribute = (
+  element: Element,
+  name: string,
+  value: unknown,
+): void => {
+  if (isBoolean(value)) {
+    element.toggleAttribute(name, value);
 
     return;
   }
 
-  if (isEventKey(key) && isEventHandler(value)) {
-    bindEvent(element, key.slice(2).toLowerCase(), value);
+  if (value === undefined || value === null) {
+    element.removeAttribute(name);
 
     return;
   }
 
-  if (propertyNameSet.has(key)) {
-    bindValue(value, (v) => {
-      Reflect.set(element, key, v);
-    });
-
-    return;
-  }
+  element.setAttribute(name, unknownToString(value));
+};
 
-  const name = attributeNameOf[key] ?? key;
+/**
+ * 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.
+ */
+const isBindable = (value: unknown): value is Bindable<unknown> =>
+  value !== undefined && value !== null;
 
-  bindValue(value, (v) => {
-    writeAttribute(element, name, v);
-  });
-};
+/** `class` and `style` in their object form: neither an observable nor a view. */
+const isPlainObject = (
+  value: unknown,
+): value is ReadonlyRecord<string, unknown> =>
+  isRecord(value) && !isObservable(value) && !hasKey(value, viewTag);
 
 const bindClass = (element: Element, value: Bindable<unknown>): void => {
   if (!isPlainObject(value)) {
@@ -116,59 +116,162 @@ const bindStyle = (element: Element, value: Bindable<unknown>): void => {
   }
 };
 
-const bindEvent = (
-  element: Element,
-  type: string,
-  handler: EventListener,
-): void => {
-  element.addEventListener(type, handler);
+/**
+ * The radio buttons of `input`'s group: those of the same `name` and form in
+ * the same document or shadow root. Any other input is a group of its own.
+ */
+const radioGroupOf = (input: HTMLInputElement): readonly HTMLInputElement[] => {
+  const root = input.getRootNode();
+
+  if (
+    input.type !== 'radio' ||
+    input.name === '' ||
+    !(root instanceof Document || root instanceof ShadowRoot)
+  ) {
+    return [input];
+  }
 
-  onScopeDispose(() => {
-    element.removeEventListener(type, handler);
-  });
+  return Array.from(
+    root.querySelectorAll<HTMLInputElement>(
+      `input[type="radio"][name="${CSS.escape(input.name)}"]`,
+    ),
+  ).filter((radio) => radio.form === input.form);
 };
 
 /**
- * `true` writes an empty attribute, and `false`, `undefined` and `null`
- * remove it.
+ * The controlled properties of an element, created with the `change` listener
+ * that sets them back. The listener is a capturing one, which runs before the
+ * element's own handlers, so no handler on the element can stop it.
  */
-const writeAttribute = (
-  element: Element,
-  name: string,
-  value: unknown,
-): void => {
-  if (isBoolean(value)) {
-    element.toggleAttribute(name, value);
+const controlledOf = (element: HTMLInputElement): Controlled => {
+  const existing = controlled.get(element);
 
-    return;
+  if (existing !== undefined) {
+    return existing;
   }
 
-  if (value === undefined || value === null) {
-    element.removeAttribute(name);
+  const mut_restorers = new Map<ControlledKey, () => void>();
+
+  const created: Controlled = {
+    add: (key, restore) => {
+      mut_restorers.set(key, restore);
+    },
+    restore: () => {
+      for (const restore of mut_restorers.values()) {
+        restore();
+      }
+    },
+  } as const;
+
+  const onChange = (): void => {
+    requestAnimationFrame(() => {
+      for (const input of radioGroupOf(element)) {
+        controlled.get(input)?.restore();
+      }
+    });
+  };
 
-    return;
-  }
+  controlled.set(element, created);
 
-  element.setAttribute(name, unknownToString(value));
-};
+  listenInScope(element, 'change', onChange, { capture: true });
 
-const propertyNameSet: ReadonlySet<string> = new Set(propertyNames);
+  onScopeDispose(() => {
+    controlled.delete(element);
+  });
+
+  return created;
+};
 
 /**
- * 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.
+ * `checked` and `indeterminate` are controlled (SPEC.md 7.2): after a `change`,
+ * the element is drawn as the bound values again, so a change its owner did not
+ * take undoes itself. This waits for the next frame, after every handler of the
+ * event, the ancestors' included, has seen the user's change, and before it is
+ * painted. Checking a radio button unchecks the others of its group with no
+ * event on them, so a change on one sets back every bound button of the group.
  */
-const isBindable = (value: unknown): value is Bindable<unknown> =>
-  value !== undefined && value !== null;
+const bindControlled = (
+  element: HTMLInputElement,
+  key: ControlledKey,
+  value: Bindable<unknown>,
+): void => {
+  const mut_bound: { current: unknown } = { current: undefined };
 
-/** `class` and `style` in their object form: neither an observable nor a view. */
-const isPlainObject = (
-  value: unknown,
-): value is ReadonlyRecord<string, unknown> =>
-  isRecord(value) && !isObservable(value) && !hasKey(value, viewTag);
+  bindValue(value, (v) => {
+    mut_bound.current = v;
+
+    Reflect.set(element, key, v);
+  });
+
+  controlledOf(element).add(key, () => {
+    if (Reflect.get(element, key) !== mut_bound.current) {
+      Reflect.set(element, key, mut_bound.current);
+    }
+  });
+};
+
+type ControlledKey = 'checked' | 'indeterminate';
+
+type Controlled = Readonly<{
+  add: (key: ControlledKey, restore: () => void) => void;
+  /** Writes every bound property back to the element. */
+  restore: () => void;
+}>;
+
+const isControlledKey = (key: string): key is ControlledKey =>
+  key === 'checked' || key === 'indeterminate';
+
+/** The elements bound by {@link bindControlled}. */
+const controlled = new WeakMap<HTMLInputElement, Controlled>();
 
 /** `onClick`, `onPointerDown`: `on` and an upper-case letter. */
 const isEventKey = (key: string): boolean => /^on[A-Z]/u.test(key);
 
 const isEventHandler = (value: unknown): value is EventListener =>
   typeof value === 'function';
+
+const bindProp = (element: Element, key: string, value: unknown): void => {
+  if (key === 'children' || key === 'ref' || !isBindable(value)) {
+    return;
+  }
+
+  if (key === 'class') {
+    bindClass(element, value);
+
+    return;
+  }
+
+  if (key === 'style') {
+    bindStyle(element, value);
+
+    return;
+  }
+
+  if (isEventKey(key) && isEventHandler(value)) {
+    listenInScope(element, key.slice(2).toLowerCase(), value);
+
+    return;
+  }
+
+  if (isControlledKey(key) && element instanceof HTMLInputElement) {
+    bindControlled(element, key, value);
+
+    return;
+  }
+
+  if (propertyNameSet.has(key)) {
+    bindValue(value, (v) => {
+      Reflect.set(element, key, v);
+    });
+
+    return;
+  }
+
+  const name = attributeNameOf[key] ?? key;
+
+  bindValue(value, (v) => {
+    writeAttribute(element, name, v);
+  });
+};
+
+const propertyNameSet: ReadonlySet<string> = new Set(propertyNames);

package/src/constant/constant.mts

@@ -6,8 +6,8 @@ import { asConstant } from '../internal/index.mjs';
  * A value that is written once and never updated. A brand that exists only in
  * the type system: at run time it is the value itself.
  *
- * A slot that takes data accepts a `Constant<T>` but not a plain `T`, so that
- * a value read once and never updated (`count$.getSnapshot().value`) is a type
+ * A slot that takes data accepts a `Constant<T>` but not a plain `T`, so that a
+ * value read once and never updated (`count$.getSnapshot().value`) is a type
  * error rather than a binding that silently stays stale.
  */
 export type Constant<T> = Brand<T, 'synstate-dom/Constant'>;

package/src/constant/derive.mts

@@ -1,7 +1,6 @@
 import {
-  combine,
+  derive as deriveObservable,
   isObservable,
-  map,
   type InitializedObservable,
 } from 'synstate';
 import { Arr } from 'ts-data-forge';
@@ -16,22 +15,22 @@ import { toObservable } from './to-observable.mjs';
  * When every input is a constant, `fn` runs once and the result is a constant:
  * a static part of the view never enters the graph. Otherwise the constants
  * become `just` and the views are turned into observables, and the result is
- * `combine(...).pipe(map(...))`.
+ * synstate's `derive` over them: one observable, which passes on a result only
+ * when it is not `Object.is` the one it holds.
  */
 export const derive = <const BS extends NonEmptyTuple<Bindable<unknown>>, R>(
   bindables: BS,
   fn: (...values: BindableValues<BS>) => R,
 ): Bindable<R> => {
-  // `values` holds, position by position, the value of each of `bindables`:
-  // the constants themselves, or what `combine` emits for their observables.
-  // The checker cannot follow a position through `Arr.map` and `combine`,
-  // which carry one element type for the whole tuple.
-  const apply = (values: readonly unknown[]): R =>
-    // eslint-disable-next-line total-functions/no-unsafe-type-assertion -- see above
-    fn(...(values as BindableValues<BS>));
+  // `fn` is called with the value of each of `bindables`, position by position:
+  // the constants themselves, or their observables' values. The checker cannot
+  // follow a position through `Arr.map`, which carries one element type for the
+  // whole tuple.
+  // eslint-disable-next-line total-functions/no-unsafe-type-assertion -- see above
+  const project = fn as (...values: readonly unknown[]) => R;
 
   if (Arr.every(bindables, isConstant)) {
-    return asConstant(apply(bindables));
+    return asConstant(project(...bindables));
   }
 
   const observables: NonEmptyTuple<InitializedObservable<unknown>> = Arr.map(
@@ -39,7 +38,7 @@ export const derive = <const BS extends NonEmptyTuple<Bindable<unknown>>, R>(
     toObservable,
   );
 
-  return combine(observables).pipe(map(apply));
+  return deriveObservable(observables, project);
 };
 
 /** The value types of a tuple of {@link Bindable}s, position by position. */

package/src/constant/derive.test.mts

@@ -1,4 +1,4 @@
-import { createState, isObservable } from 'synstate';
+import { createState, isChildObservable, isObservable } from 'synstate';
 import { expectType } from 'ts-data-forge';
 import type { Bindable } from './bindable.mjs';
 import { constant } from './constant.mjs';
@@ -61,4 +61,28 @@ describe(derive, () => {
 
     assert.strictEqual(result$.getSnapshot().value, '2-B');
   });
+
+  test('observables give one observable, whose parents are the inputs', () => {
+    const [a$, setA] = createState(1);
+
+    const [b$] = createState(2);
+
+    const fn = vi.fn((a: number, b: number) => a + b);
+
+    const result = derive([a$, b$], fn);
+
+    const result$ = toObservable(result);
+
+    assert.isTrue(isChildObservable(result$));
+
+    if (isChildObservable(result$)) {
+      assert.deepStrictEqual(result$.parents, [a$, b$]);
+    }
+
+    setA(2);
+
+    assert.strictEqual(result$.getSnapshot().value, 4);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
 });

package/src/constant/view.mts

@@ -5,9 +5,9 @@ import { viewTag } from '../internal/index.mjs';
  * An observable and a function to apply to each of its values, bound without
  * creating a node in the graph. Made by {@link view}.
  *
- * The source's value type is hidden behind `open`, which hands the pair back
- * to a callback that is generic in it: whoever opens a view sees a source and
- * a function that agree with each other, with no assertion on either side.
+ * The source's value type is hidden behind `open`, which hands the pair back to
+ * a callback that is generic in it: whoever opens a view sees a source and a
+ * function that agree with each other, with no assertion on either side.
  */
 export type View<T> = Readonly<{
   [viewTag]: true;

package/src/control/for.mts

@@ -31,8 +31,8 @@ import { longestIncreasingSubsequence } from './longest-increasing-subsequence.m
  * nodes; the rows that stay are moved as little as the longest increasing
  * subsequence allows.
  *
- * `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
+ * `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.
  */
 export const For = <T,>({
@@ -57,8 +57,8 @@ export const For = <T,>({
     );
 
     // `index$` is a node of its own in every row, visited on every update of
-    // `items`; a `children` that declares no second parameter is not given
-    // one, as Solid's `For` does.
+    // `items`; a `children` that declares no second parameter is not given one,
+    // as Solid's `For` does.
     const usesIndex = children.length >= 2;
 
     const callChildren: BivariantHack<
@@ -132,8 +132,8 @@ export const For = <T,>({
     /**
      * When no key stays, takes every row's nodes out in one range, rather than
      * one by one as each row's scope is disposed: clearing or replacing the
-     * whole list is then one DOM operation. The scopes are disposed after,
-     * and find their nodes already detached.
+     * whole list is then one DOM operation. The scopes are disposed after, and
+     * find their nodes already detached.
      */
     const removeAllAtOnceIfEveryKeyGoes = (
       previousOrder: readonly unknown[],
@@ -295,12 +295,12 @@ const toEntries = <T,>(
 };
 
 /**
- * One field of a row's entry, as a single child of `entries$`, where
- * `map`, `filter`, `withInitialValue` and `skipIfNoChange` would make four:
+ * One field of a row's entry, as a single child of `entries$`, where `map`,
+ * `filter`, `withInitialValue` and `skipIfNoChange` would make four:
  * creating and disposing a row costs roughly its number of nodes.
  *
- * A row whose key has gone keeps its last value; its scope is disposed in
- * the same update.
+ * A row whose key has gone keeps its last value; its scope is disposed in the
+ * same update.
  */
 const rowField = <T, A>(
   entries$: Observable<Entries<T>>,

package/src/control/if.mts

@@ -3,8 +3,8 @@ import { mountable, type JSX } from '../jsx/index.mjs';
 import { mountSwitch } from './mount-switch.mjs';
 
 /**
- * Mounts `then` while `cond` is `true` and `else` while it is `false`
- * (SPEC.md 8.2). Nothing is mounted for an omitted `else`.
+ * Mounts `then` while `cond` is `true` and `else` while it is `false` (SPEC.md
+ * 8.2). Nothing is mounted for an omitted `else`.
  *
  * Both branches are descriptions, so only the one chosen is mounted. A branch
  * is rebuilt only when `cond` flips; flipping disposes the previous branch's