@es-joy/jsoe 0.25.1 → 0.26.1

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/fundamentalTypes/regexpType.js

@@ -106,7 +106,15 @@ const regexpType = {
         'Source ',
         ['input', {
           name: `${typeNamespace}-regexp`, type: 'text',
-          value: value.source
+          value: value.source,
+          $on: {
+            input () {
+              types.validate({type: 'regexp', root});
+            },
+            change () {
+              types.validate({type: 'regexp', root});
+            }
+          }
         }]
       ]],
       ['br'],

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
@@ -464,7 +471,12 @@ export const buildTypeChoices = ({
           this.value = type;
         }
         this.$setStyles();
-        this.$addAndValidateEditUI({baseValue, bringIntoFocus, avoidReport});
+        this.$addAndValidateEditUI({
+          baseValue,
+          bringIntoFocus,
+          schemaObject: specificSchema,
+          avoidReport
+        });
       },
       /**
        * @this {TypeChoicesElementAPI}
@@ -544,7 +556,7 @@ export const buildTypeChoices = ({
           typeNamespace,
           type: /** @type {import('./types.js').AvailableArbitraryType} */ (type),
           bringIntoFocus,
-          hasValue: type === 'arrayNonindexKeys' && baseValue,
+          hasValue: baseValue !== undefined,
           value: baseValue,
           buildTypeChoices,
           format,
@@ -581,7 +593,7 @@ export const buildTypeChoices = ({
         });
         topRoot = this.$getTopRoot(); // May be existing now
         // Needed; Array/object ref somewhere could now be valid or invalid
-        types.validateAllReferences({topRoot});
+        types.validateAllReferences({topRoot, avoidReport});
       },
 
       /**
@@ -689,62 +701,81 @@ 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 builtState = await formats.getControlsForFormatAndValue(
+            types,
+            format,
+            value,
+            {
+              readonly: false,
+              typeNamespace,
+              schema,
+              schemaContent,
+              formats,
+              types
+            }
+          );
+          const {
+            rootUI: rootEditUI,
+            specificSchemas
+          } = builtState;
+          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]
+          });
+          await builtState.whenBuilt;
+        } 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 +784,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/types.js

@@ -202,7 +202,8 @@ export const getPropertyValueFromLegend = (legend) => {
 
 /**
  * @typedef {(cfg: {
- *   topRoot: RootElement
+ *   topRoot: RootElement,
+ *   avoidReport?: boolean
  * }) => void} ValidateAllReferences
  */
 
@@ -359,6 +360,7 @@ export const getPropertyValueFromLegend = (legend) => {
  *   buildTypeChoices?: import('./typeChoices.js').BuildTypeChoices,
  *   schemaContent?: import('./formats/schema.js').ZodexSchema
  *   replaced?: any
+ *   hasValue?: boolean
  * }) => JamilihArray} viewUI
  * @property {(info: {
  *   value?: StructuredCloneValue,
@@ -374,7 +376,8 @@ export const getPropertyValueFromLegend = (legend) => {
  *   topRoot?: HTMLDivElement
  *   schemaContent?: import('./formats/schema.js').ZodexSchema,
  *   specificSchemaObject?: import('./formats/schema.js').ZodexSchema,
- *   schemaFallingBack?: boolean
+ *   schemaFallingBack?: boolean,
+ *   hasValue?: boolean
  * }) => JamilihArray} editUI
  * @property {(info: {root: HTMLDivElement}) =>
  *   HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement|
@@ -391,7 +394,8 @@ export const getPropertyValueFromLegend = (legend) => {
  * }} [validate] Message will be used if validity is false.
  * @property {(info: {
  *   topRoot: HTMLDivElement,
- *   types: Types
+ *   types: Types,
+ *   avoidReport?: boolean
  * }) => void} [validateAll] For
  *   validation of array and object references only.
  * @property {{
@@ -766,7 +770,7 @@ class Types {
         format, schemaContent,
         resultType, topRoot, bringIntoFocus, value,
         replaced,
-        specificSchemaObject, schemaFallingBack,
+        specificSchemaObject, schemaFallingBack, hasValue,
         types: this
       }
       : {
@@ -774,7 +778,7 @@ class Types {
         format, schemaContent,
         resultType, topRoot, bringIntoFocus,
         replaced,
-        specificSchemaObject, schemaFallingBack,
+        specificSchemaObject, schemaFallingBack, hasValue,
         types: this
       };
     const root = /** @type {HTMLDivElement} */ (jml(
@@ -796,7 +800,7 @@ class Types {
   }
 
   /** @type {ValidateAllReferences} */
-  validateAllReferences ({topRoot}) {
+  validateAllReferences ({topRoot, avoidReport}) {
     /* istanbul ignore if -- Unreachable? */
     if (!topRoot) {
       console.log('No references present');
@@ -808,7 +812,7 @@ class Types {
     Object.values(this.availableTypes).forEach((typeObj) => {
       const typeObject = /** @type {TypeObject} */ (typeObj);
       if (typeObject.validateAll) {
-        typeObject.validateAll({topRoot, types: this});
+        typeObject.validateAll({topRoot, types: this, avoidReport});
       }
     });
 
@@ -858,7 +862,7 @@ class Types {
         'message' in error
         ? error.message
         : undefined;
-      if (errorMessage !== 'Not yet instantiated') {
+      if (errorMessage !== 'Not yet instantiated' && typeValidation.valid) {
         return false;
       }
       valueReady = false;

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;
+};