synstate-dom 0.5.0 → 0.7.0

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

@@ -0,0 +1,42 @@
+import { isImeKeyDown } from './is-ime-key-down.mjs';
+
+// Plain objects stand in for `KeyboardEvent`s: it reads only these fields, and
+// Node.js has no `KeyboardEvent`.
+describe(isImeKeyDown, () => {
+  test('is a key down sent while an input method is composing', () => {
+    assert.isTrue(isImeKeyDown(keyDown('a', 229, true)));
+
+    assert.isTrue(isImeKeyDown(keyDown('ArrowUp', 229, true)));
+  });
+
+  test.each(['Enter', 'Escape'])(
+    'is %s with key code 229, which Safari sends after compositionend',
+    (key) => {
+      assert.isTrue(isImeKeyDown(keyDown(key, 229)));
+    },
+  );
+
+  test('is not another key with key code 229, as an Android virtual keyboard sends every key', () => {
+    assert.isFalse(isImeKeyDown(keyDown('ArrowUp', 229)));
+  });
+
+  test.each([
+    ['Enter', 13],
+    ['Escape', 27],
+    ['a', 65],
+  ] as const)('is not a plain %s', (key, code) => {
+    assert.isFalse(isImeKeyDown(keyDown(key, code)));
+  });
+});
+
+/** The fields of a key down that `isImeKeyDown` reads. */
+const keyDown = (
+  key: string,
+  code: number,
+  isComposing: boolean = false,
+): Readonly<{ key: string; keyCode: number; isComposing: boolean }> =>
+  ({
+    key,
+    keyCode: code,
+    isComposing,
+  }) as const;

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());