synstate-dom 0.6.0 → 0.7.1

package/src/internal/bind-value.mts

@@ -37,7 +37,14 @@ export const bindValue = <T,>(
   write(bindable);
 };
 
-/** A completed observable is written once and not subscribed to. */
+/**
+ * A completed observable is written once and not subscribed to.
+ *
+ * `subscribe` delivers the current value before it adds the subscriber, so a
+ * value written by the first `write` itself (a `For` row or a switch branch
+ * mounted then writes what chose it, #3141) reaches no subscriber; it is
+ * written once the subscription is in place.
+ */
 const bindObservable = <A,>(
   source: InitializedObservable<A>,
   write: (value: A) => void,
@@ -48,5 +55,11 @@ const bindObservable = <A,>(
     return;
   }
 
+  const { updateToken } = source;
+
   subscribeInScope(source, write);
+
+  if (source.updateToken !== updateToken) {
+    write(source.getSnapshot().value);
+  }
 };

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

@@ -18,6 +18,8 @@ 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;
@@ -27,10 +29,11 @@ export type CommonElementProps<E extends Element> = Readonly<{
 }> &
   Partial<
     ReadonlyRecord<
-      `aria-${string}` | `data-${string}`,
-      Bindable<string | undefined>
+      `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/src/jsx/element-props.test.mts

@@ -1,4 +1,6 @@
 import { expectType } from 'ts-data-forge';
+import type { Bindable } from '../constant/index.mjs';
+import type { CommonElementProps } from './element-props.mjs';
 import type { EventPropNames } from './event-prop-names.mjs';
 
 describe('EventPropNames', () => {
@@ -26,3 +28,19 @@ describe('EventPropNames', () => {
     assert.isTrue(true);
   });
 });
+
+describe('CommonElementProps', () => {
+  test('an aria-* attribute takes a boolean and a number, a data-* one neither (#3165)', () => {
+    expectType<
+      CommonElementProps<HTMLElement>['aria-busy'],
+      Bindable<boolean | number | string | undefined> | undefined
+    >('=');
+
+    expectType<
+      CommonElementProps<HTMLElement>['data-row'],
+      Bindable<string | undefined> | undefined
+    >('=');
+
+    assert.isTrue(true);
+  });
+});

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/render.mts

@@ -1,4 +1,5 @@
 import { createScope } from 'synstate';
+import { appendTo, mountThenInsert } from './internal/index.mjs';
 import { type JSX, toNodes } from './jsx/index.mjs';
 
 /**
@@ -7,7 +8,8 @@ import { type JSX, toNodes } 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.
@@ -18,15 +20,39 @@ export const render = (
 ): (() => void) => {
   const root = createScope(undefined);
 
-  const nodes = root.run(() => toNodes(app().mount()));
+  const mut_inserted: { nodes: readonly ChildNode[] } = { nodes: [] };
 
-  container.append(...nodes);
-
-  return () => {
+  const unmount = (): void => {
     root.dispose();
 
-    for (const node of nodes) {
+    for (const node of mut_inserted.nodes) {
       node.remove();
     }
   };
+
+  try {
+    root.run(() =>
+      mountThenInsert(
+        mountApp,
+        app,
+        (into: Element, nodes: readonly ChildNode[]) => {
+          mut_inserted.nodes = nodes;
+
+          appendTo(into, nodes);
+        },
+        container,
+      ),
+    );
+  } catch (error) {
+    // An update applied after the app was appended can throw; take back what
+    // was mounted rather than leave it in `container` with no way to unmount.
+    unmount();
+
+    throw error;
+  }
+
+  return unmount;
 };
+
+const mountApp = (app: () => JSX.Element): readonly ChildNode[] =>
+  toNodes(app().mount());