@es-joy/jsoe 0.25.1 → 0.26.0

package/dist/subTypes/blobHTMLType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blobHTMLType.d.ts","sourceRoot":"","sources":["../../src/subTypes/blobHTMLType.js"],"names":[],"mappings":";+BASa,mBAAmB,GAAG;IAC9B,gBAAgB,EAAE;QAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,MAAM,GAAC,IAAI,CAAA;KAAC,CAAA;CACvD;AAHJ;;;;GAIG;AAEH;;;;GAIG;AACH,4BAJU,OAAO,aAAa,EAAE,UAAU,GAAG;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CAC1C,CA4LF"}
+{"version":3,"file":"blobHTMLType.d.ts","sourceRoot":"","sources":["../../src/subTypes/blobHTMLType.js"],"names":[],"mappings":";+BAUa,mBAAmB,GAAG;IAC9B,gBAAgB,EAAE;QAAC,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,MAAM,GAAC,IAAI,CAAA;KAAC,CAAA;CACvD;AAHJ;;;;GAIG;AAEH;;;;GAIG;AACH,4BAJU,OAAO,aAAa,EAAE,UAAU,GAAG;IACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CAC1C,CAwLF"}

package/dist/typeChoices.d.ts

@@ -32,6 +32,7 @@ export type SetStyles = () => void;
 export type AddEditUI = (info: {
     editUI: HTMLElement;
 }) => void;
+export type WhenReady = () => Promise<void>;
 export type TypeChoicesElementAPI = HTMLSelectElement & {
     $addAndValidateEditUI: AddAndValidateEditUI;
     $setStyles: SetStyles;
@@ -41,6 +42,7 @@ export type TypeChoicesElementAPI = HTMLSelectElement & {
     $addEditUI: AddEditUI;
     $validate: Validate;
     $setTypeNoEditUI: SetTypeNoEditUI;
+    $whenReady: WhenReady;
 };
 export type GetValue = (stateObj?: import("./types.js").StateObject | undefined, currentPath?: string | undefined) => import("./formats.js").StructuredCloneValue;
 export type GetType = () => string;
@@ -70,5 +72,6 @@ export type BuildTypeChoices = (cfg: {
     getType: GetType;
     validValuesSet: ValidValuesSet;
     setValue: SetValue;
+    whenReady: Promise<void>;
 };
 //# sourceMappingURL=typeChoices.d.ts.map

package/dist/typeChoices.d.ts.map

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

package/dist/utils/timing.d.ts

@@ -1,2 +1,9 @@
 export function tick(): Promise<void>;
+/**
+ * Default upper bound, in {@link tick}s, for {@link whenConnected}. A control
+ *   that is never attached to the document should be given up on rather than
+ *   awaited forever.
+ */
+export const MAX_CONNECT_WAIT_TICKS: 50;
+export function whenConnected(el: Element, maxTicks?: number): Promise<boolean>;
 //# sourceMappingURL=timing.d.ts.map

package/dist/utils/timing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../src/utils/timing.js"],"names":[],"mappings":"AASO,wBAFM,OAAO,CAAC,IAAI,CAAC,CAIxB"}
+{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../src/utils/timing.js"],"names":[],"mappings":"AASO,wBAFM,OAAO,CAAC,IAAI,CAAC,CAIxB;AAEF;;;;GAIG;AACH,qCAAsC,EAAE,CAAC;AAclC,kCAJI,OAAO,aACP,MAAM,GACJ,OAAO,CAAC,OAAO,CAAC,CAY5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-joy/jsoe",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./src/index.js",

package/src/formatAndTypeChoices.js

@@ -42,10 +42,20 @@ import {$e, DOM} from './utils/templateUtils.js';
  * @returns {Promise<void>}
  */
 
+/**
+ * Settles once the most recently built type choices have finished their
+ * deferred build work. `await` it (or the `whenReady` on the
+ * `formatAndTypeChoices` result) instead of guessing a `setTimeout` delay
+ * after `$setFormat` / a format change.
+ * @callback WhenReady
+ * @returns {Promise<void>}
+ */
+
 /**
  * @typedef {HTMLSelectElement & {
  *   $setFormat: SetFormat,
- *   $buildTypeChoices: TypeChoiceBuilder
+ *   $buildTypeChoices: TypeChoiceBuilder,
+ *   $whenReady: WhenReady
  * }} FormatChoices
  */
 
@@ -151,6 +161,7 @@ export const getFormatAndSchemaChoices = ({
  *   getType: () => string,
  *   validValuesSet: () => boolean,
  *   setValue: SetValue,
+ *   whenReady: Promise<void>,
  *   formats: import('./formats.js').default,
  *   types: import('./types.js').default
  * }>} The selector for types and the container for them. Both should be
@@ -179,6 +190,12 @@ export async function formatAndTypeChoices ({
     : arbitraryJS
       ? 'arbitraryJS'
       : 'structuredCloning';
+
+  // Tracks the `whenReady` of the type choices currently in `typesHolder`,
+  //   updated on every (re)build so `$whenReady()` and the returned
+  //   `whenReady` always reflect the latest control.
+  let typeChoicesReady = /** @type {Promise<void>} */ (Promise.resolve());
+
   const formatChoices = /** @type {FormatChoices} */ (jml('select', {
     class: 'formatChoices',
     hidden: singleValue,
@@ -199,13 +216,20 @@ export async function formatAndTypeChoices ({
         await this.$buildTypeChoices(autoTrigger);
       },
 
+      /**
+       * @type {WhenReady}
+       */
+      $whenReady () {
+        return typeChoicesReady;
+      },
+
       /**
        * @type {TypeChoiceBuilder}
        */
       async $buildTypeChoices (autoTrigger) {
         DOM.removeChildren(typesHolder);
         const {schema} = this.selectedOptions[0].dataset;
-        jml({'#': buildTypeChoices({
+        const built = buildTypeChoices({
           autoTrigger,
           topRoot: /** @type {HTMLDivElement} */ (
             $e(typesHolder, 'div[data-type]')
@@ -223,7 +247,10 @@ export async function formatAndTypeChoices ({
           schemaContent: schema
             ? await getSchemaContent?.(schema)
             : undefined
-        }).domArray}, typesHolder);
+        });
+        typeChoicesReady = built.whenReady;
+        jml({'#': built.domArray}, typesHolder);
+        await built.whenReady;
       }
     },
     $on: {
@@ -266,7 +293,7 @@ export async function formatAndTypeChoices ({
     ? formatChoices.selectedOptions[0].dataset.schema
     : undefined;
 
-  jml({'#': buildTypeChoices({
+  const initialTypeChoices = buildTypeChoices({
     // resultType: 'both',
     topRoot: /** @type {HTMLDivElement} */ ($e(typesHolder, 'div[data-type]')),
     format,
@@ -279,7 +306,9 @@ export async function formatAndTypeChoices ({
     schemaContent: schema === undefined
       ? undefined
       : await getSchemaContent?.(schema)
-  }).domArray}, typesHolder);
+  });
+  typeChoicesReady = initialTypeChoices.whenReady;
+  jml({'#': initialTypeChoices.domArray}, typesHolder);
 
   return {
     formats,
@@ -289,6 +318,14 @@ export async function formatAndTypeChoices ({
     // Easier for Jamilih
     domArray: [formatChoices, typesHolder],
 
+    /**
+     * Settles once the initial type choices have finished their deferred
+     *   build work. After a later `$setFormat` / format change, use
+     *   `formatChoices.$whenReady()` for the current control instead.
+     * @type {Promise<void>}
+     */
+    whenReady: typeChoicesReady,
+
     // Normal API
 
     /**

package/src/fundamentalTypes/arrayType.js

@@ -12,6 +12,7 @@ import {
 } from '../utils/jsonPointer.js';
 import FileList from '../utils/FileList.js';
 import {isUnionLike} from '../utils/types.js';
+import {tick} from '../utils/timing.js';
 
 let optionalPropertyId = 0;
 
@@ -2253,13 +2254,21 @@ const arrayType = {
                       const diff = (/^\d+$/u).test(prev)
                         ? Math.trunc(Number(this.value)) - Math.trunc(Number(prev))
                         : 0;
-                      for (let i = 0; i < diff; i++) {
-                        // Timeout needed by Cypress at least or will get
-                        //   validation triggered which prevents moving forward
-                        setTimeout(() => {
+                      // Grow the array to the new length outside this `change`
+                      //   event's synchronous phase: `$addArrayElement` runs
+                      //   `$validate` / `$resort` on the sibling property
+                      //   inputs, and doing that mid-`change` aborts the
+                      //   interaction (a native validation bubble, a re-sort
+                      //   that detaches nodes) before the length change lands.
+                      //   Yield a tick before each add so each completes in
+                      //   order rather than racing N queued timers.
+                      (async () => {
+                        for (let i = 0; i < diff; i++) {
+                          // eslint-disable-next-line no-await-in-loop -- Ordered by design
+                          await tick();
                           div.$addArrayElement({});
-                        }, 0);
-                      }
+                        }
+                      })();
                     }
                   }
                   this.$oldvalue = this.value;

package/src/fundamentalTypes/functionType.js

@@ -270,65 +270,72 @@ const functionType = {
       }
     );
 
+    const buildFnTypeChoices =
+      /** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+        buildTypeChoices
+      );
+    const argsChoices = buildFnTypeChoices({
+      // resultType,
+      topRoot: /** @type {HTMLDivElement} */ (topRoot),
+      format: 'schema', // We're always supplying a schema
+      // schemaOriginal: schemaContent,
+      schemaContent: args,
+      state: type,
+      // itemIndex,
+      typeNamespace
+    });
+    const bodyChoices = buildFnTypeChoices({
+      // resultType,
+      topRoot: /** @type {HTMLDivElement} */ (topRoot),
+      format: 'schema', // We're always supplying a schema
+      // schemaOriginal: schemaContent,
+      schemaContent: {type: 'string'},
+      state: type,
+      // itemIndex,
+      typeNamespace
+    });
+
     const div = jml('div', {dataset: {type: 'function'}}, [
       ['b', ['Arguments']],
       ['br'],
-
-      ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
-        buildTypeChoices
-      )({
-        // resultType,
-        topRoot: /** @type {HTMLDivElement} */ (topRoot),
-        format: 'schema', // We're always supplying a schema
-        // schemaOriginal: schemaContent,
-        schemaContent: args,
-        state: type,
-        // itemIndex,
-        typeNamespace
-      }).domArray),
-
+      ...argsChoices.domArray,
       ['b', ['Function body']],
       ['br'],
-      ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
-        buildTypeChoices
-      )({
-        // resultType,
-        topRoot: /** @type {HTMLDivElement} */ (topRoot),
-        format: 'schema', // We're always supplying a schema
-        // schemaOriginal: schemaContent,
-        schemaContent: {type: 'string'},
-        state: type,
-        // itemIndex,
-        typeNamespace
-      }).domArray)
+      ...bodyChoices.domArray
+    ]);
+
+    // Both type-choice controls build their edit UI (the argument and body
+    //   textareas) a tick after they are connected. Wait on their `whenReady`
+    //   rather than guessing with nested `setTimeout`s.
+    const whenControlsReady = Promise.all([
+      argsChoices.whenReady, bodyChoices.whenReady
     ]);
 
     if (value) {
-      setTimeout(() => {
+      (async () => {
         // Fire-and-forget population; swallow rejections from a still-settling
         //   editor so they cannot surface as an unhandled rejection.
-        setValueAndTooltips({
-          root: div,
-          value,
-          specificSchemaObject
-        // eslint-disable-next-line promise/prefer-await-to-then -- Convenient
-        }).catch(() => { /* best-effort */ });
-      }, 0);
+        try {
+          await whenControlsReady;
+          await setValueAndTooltips({root: div, value, specificSchemaObject});
+        } catch {
+          // best-effort
+        }
+      })();
     } else if (specificSchemaObject) {
-      setTimeout(() => {
-        setTimeout(() => {
-          // Should have some empty textareas by now
-          const textareas = /** @type {HTMLTextAreaElement[]} */ (
-            $$e(div, 'textarea')
-          );
-          const textareaBody = /** @type {HTMLTextAreaElement} */ (
-            textareas.pop()
-          );
-          setTooltips({
-            root: div, specificSchemaObject, textareas, textareaBody
-          });
-        }, 0);
-      }, 0);
+      (async () => {
+        await whenControlsReady;
+        // The auto-triggered controls have their textareas by now.
+        const textareas = /** @type {HTMLTextAreaElement[]} */ (
+          $$e(div, 'textarea')
+        );
+        const textareaBody = /** @type {HTMLTextAreaElement} */ (
+          textareas.pop()
+        );
+        setTooltips({
+          root: div, specificSchemaObject, textareas, textareaBody
+        });
+      })();
     }
 
     return [div];

package/src/subTypes/blobHTMLType.js

@@ -5,6 +5,7 @@ import {schemaLabel} from '../utils/schemaMeta.js';
 
 import dialogs from '../utils/dialogs.js';
 import {isNullish} from '../utils/types.js';
+import {whenConnected} from '../utils/timing.js';
 
 /**
  * @typedef {HTMLTextAreaElement & {
@@ -146,14 +147,11 @@ const blobHTMLType = {
     //   connected to the document. The caller attaches `root` after the build
     //   pipeline returns, and re-parenting an SCEditor iframe reloads it, so we
     //   wait here for connection rather than initialising eagerly (or letting
-    //   the build pipeline await us, which would deadlock).
-    let connectionTries = 0;
-    const createWhenConnected = () => {
-      if (!textarea.isConnected) {
-        /* istanbul ignore else -- Bounded guard against a never-attached UI */
-        if (connectionTries++ < 250) {
-          setTimeout(createWhenConnected, 20);
-        }
+    //   the build pipeline await us, which would deadlock). The wait is bounded
+    //   (`whenConnected`) so a never-attached editor is abandoned, not polled
+    //   forever.
+    (async () => {
+      if (!await whenConnected(textarea, 250)) {
         return;
       }
       // Push onto these: https://www.sceditor.com/documentation/formats/xhtml/
@@ -199,8 +197,7 @@ const blobHTMLType = {
           this
         ).setValue({root, value});
       }
-    };
-    setTimeout(createWhenConnected, 0);
+    })();
     return [root];
   }
 };

package/src/typeChoices.js

@@ -6,33 +6,9 @@ import {$e, DOM} from './utils/templateUtils.js';
 import {isUnionLike} from './utils/types.js';
 import {getXorBranchMatchInfo, valueMatchesSchema} from './formats/schema.js';
 import dialogs from './utils/dialogs.js';
-import {tick} from './utils/timing.js';
+import {whenConnected} from './utils/timing.js';
 import deepEqual from 'fast-deep-equal/es6/index.js';
 
-/**
- * A deferred `setValue`/auto-select runs a tick after the control is built, but
- * the caller may only connect it to the document on a deferred tick of its own
- * (e.g. `setTimeout(0)` DOM insertion). Wait this many ticks for the connection
- * before giving up, rather than dropping the pre-set value on the first miss.
- */
-const MAX_CONNECT_WAIT_TICKS = 50;
-
-/**
- * @param {HTMLSelectElement} sel
- * @returns {Promise<boolean>} Whether `sel` became connected within the bound.
- */
-const waitForConnection = async (sel) => {
-  for (
-    let waited = 0;
-    !sel.isConnected && waited < MAX_CONNECT_WAIT_TICKS;
-    waited++
-  ) {
-    // eslint-disable-next-line no-await-in-loop -- Sequential by design
-    await tick();
-  }
-  return sel.isConnected;
-};
-
 // This is technically just `import('./index.js').SetType`, but our
 //   redirect file causes problems, so we redefine here
 /**
@@ -85,6 +61,10 @@ const waitForConnection = async (sel) => {
  * @typedef {(info: {editUI: HTMLElement}) => void} AddEditUI
  */
 
+/**
+ * @typedef {() => Promise<void>} WhenReady
+ */
+
 /**
  * @typedef {HTMLSelectElement & {
  *   $addAndValidateEditUI: AddAndValidateEditUI,
@@ -94,7 +74,8 @@ const waitForConnection = async (sel) => {
  *   $getTopRoot: () => HTMLDivElement,
  *   $addEditUI: AddEditUI,
  *   $validate: Validate,
- *   $setTypeNoEditUI: SetTypeNoEditUI
+ *   $setTypeNoEditUI: SetTypeNoEditUI,
+ *   $whenReady: WhenReady
  * }} TypeChoicesElementAPI
  */
 
@@ -149,7 +130,8 @@ const waitForConnection = async (sel) => {
  *   getValue: GetValue,
  *   getType: GetType,
  *   validValuesSet: ValidValuesSet,
- *   setValue: SetValue
+ *   setValue: SetValue,
+ *   whenReady: Promise<void>
  * }}
  */
 
@@ -162,7 +144,7 @@ const waitForConnection = async (sel) => {
 const typeChoicesAPIMethods = [
   '$getValue', '$setType', '$setTypeNoEditUI', '$setStyles', '$getTypeRoot',
   '$addAndValidateEditUI', '$addTypeAndEditUI', '$addEditUI', '$getContainer',
-  '$getTopRoot', '$validate'
+  '$getTopRoot', '$validate', '$whenReady'
 ];
 
 /**
@@ -413,6 +395,25 @@ export const buildTypeChoices = ({
 
   let editUI;
 
+  /**
+   * `whenReady` resolves once the deferred (auto-trigger / `setValue`) build
+   *   work scheduled at the end of this function has finished and its edit UI
+   *   is in place — or on the next tick when there is no deferred work.
+   *   Callers that need to read from, validate, or drive the control
+   *   immediately after building it can `await` it instead of guessing with a
+   *   `setTimeout`. It always settles (the connection wait is bounded — see
+   *   `whenConnected` — so it resolves even if the control never connects),
+   *   so awaiting it cannot hang.
+   * @type {() => void}
+   */
+  let markReady;
+  const whenReady = /** @type {Promise<void>} */ (
+    // eslint-disable-next-line promise/avoid-new, unicorn/prefer-promise-with-resolvers -- Target lib predates `Promise.withResolvers`
+    new Promise((resolve) => {
+      markReady = resolve;
+    })
+  );
+
   /** @type {GetValue} */
   const $getValue = (stateObj, currentPath) => {
     const root = /** @type {HTMLDivElement} */ (
@@ -443,6 +444,12 @@ export const buildTypeChoices = ({
     // is: 'type-choices',
     $custom: {
       $getValue,
+      /**
+       * @type {WhenReady}
+       */
+      $whenReady () {
+        return whenReady;
+      },
       /**
        * @this {TypeChoicesElementAPI}
        * @param {Parameters<SetType>[0]} cfg
@@ -689,62 +696,79 @@ export const buildTypeChoices = ({
 
   if (autoTrigger && !setValue && typeOptions.length === 1) {
     setTimeout(async () => {
-      if (!await waitForConnection(sel)) {
-        return;
+      try {
+        if (!await whenConnected(sel)) {
+          return;
+        }
+        sel.selectedIndex = 1;
+        sel.dispatchEvent(new Event('change'));
+      } finally {
+        markReady();
       }
-      sel.selectedIndex = 1;
-      sel.dispatchEvent(new Event('change'));
     }, 0);
   } else if (setValue || (requireObject && !objectHasValue)) {
     setTimeout(async () => {
-      if (!await waitForConnection(sel)) {
-        return;
-      }
-      if (!setValue) { // if (requireObject && !objectHasValue) {
-        // Todo (low): We could auto-populate keypath if has
-        //   keypath (and we probably also only want if
-        //   not autoincrement)
-        value = {};
-      }
       try {
-        const {
-          rootUI: rootEditUI,
-          specificSchemas
-        } = await formats.getControlsForFormatAndValue(
-          types,
-          format,
-          value,
-          {
-            readonly: false,
-            typeNamespace,
-            schema,
-            schemaContent,
-            formats,
-            types
-          }
-        );
-        const type =
-          Types.getTypeForRoot(/** @type {HTMLDivElement} */ (
-            rootEditUI
-          ));
-        /** @type {HTMLSelectElement & {$addTypeAndEditUI: AddTypeAndEditUI}} */ (
-          sel
-        ).$addTypeAndEditUI({
-          type,
-          editUI: rootEditUI,
-          // We do actually want the first one
-          specificSchema: specificSchemas?.[0]
-        });
-      } catch (err) {
-        /* istanbul ignore next -- At least some errors handled earlier */
-        dialogs.alert({
-          message: 'The object to be added had types not supported ' +
-            'by the current format.'
-        });
-        /* istanbul ignore next -- How to trigger? */
-        console.log('err', err);
+        if (!await whenConnected(sel)) {
+          return;
+        }
+        if (!setValue) { // if (requireObject && !objectHasValue) {
+          // Todo (low): We could auto-populate keypath if has
+          //   keypath (and we probably also only want if
+          //   not autoincrement)
+          value = {};
+        }
+        try {
+          const {
+            rootUI: rootEditUI,
+            specificSchemas
+          } = await formats.getControlsForFormatAndValue(
+            types,
+            format,
+            value,
+            {
+              readonly: false,
+              typeNamespace,
+              schema,
+              schemaContent,
+              formats,
+              types
+            }
+          );
+          const type =
+            Types.getTypeForRoot(/** @type {HTMLDivElement} */ (
+              rootEditUI
+            ));
+          /**
+           * @type {HTMLSelectElement & {$addTypeAndEditUI: AddTypeAndEditUI}}
+           */ (
+            sel
+          ).$addTypeAndEditUI({
+            type,
+            editUI: rootEditUI,
+            // We do actually want the first one
+            specificSchema: specificSchemas?.[0]
+          });
+        } catch (err) {
+          /* istanbul ignore next -- At least some errors handled earlier */
+          dialogs.alert({
+            message: 'The object to be added had types not supported ' +
+              'by the current format.'
+          });
+          /* istanbul ignore next -- How to trigger? */
+          console.log('err', err);
+        }
+      } finally {
+        markReady();
       }
     }, 0);
+  } else {
+    // No deferred build work; still settle on a later tick so `$whenReady()`
+    //   behaves consistently for callers that connect `sel` on a deferred
+    //   tick of their own.
+    setTimeout(() => {
+      markReady();
+    }, 0);
   }
 
   return {
@@ -753,6 +777,13 @@ export const buildTypeChoices = ({
       typeContainer
     ],
 
+    /**
+     * Settles once the deferred build work (if any) scheduled above has
+     *   finished; `await` it instead of guessing a `setTimeout` delay.
+     * @type {Promise<void>}
+     */
+    whenReady,
+
     /** @type {GetValue} */
     getValue: $getValue,
 

package/src/utils/timing.js

@@ -10,3 +10,34 @@
 export const tick = () => new Promise((resolve) => {
   setTimeout(resolve, 0);
 });
+
+/**
+ * Default upper bound, in {@link tick}s, for {@link whenConnected}. A control
+ *   that is never attached to the document should be given up on rather than
+ *   awaited forever.
+ */
+export const MAX_CONNECT_WAIT_TICKS = 50;
+
+/**
+ * Resolves once `el` is connected to the document, re-checking once per
+ *   macrotask via {@link tick}. A control is built synchronously, but its
+ *   consumer may only attach it a deferred tick later (e.g. a `setTimeout(0)`
+ *   DOM insertion), and connection-dependent initialisation — an SCEditor
+ *   iframe, an auto-`setValue`, a type-choices auto-trigger — has to wait for
+ *   that. Bounded so a control that is never attached is abandoned rather than
+ *   polled forever; the resolved value says which happened.
+ * @param {Element} el
+ * @param {number} [maxTicks]
+ * @returns {Promise<boolean>} Whether `el` became connected within the bound.
+ */
+export const whenConnected = async (el, maxTicks = MAX_CONNECT_WAIT_TICKS) => {
+  for (
+    let waited = 0;
+    !el.isConnected && waited < maxTicks;
+    waited++
+  ) {
+    // eslint-disable-next-line no-await-in-loop -- Sequential by design
+    await tick();
+  }
+  return el.isConnected;
+};