@es-joy/jsoe 0.16.0 → 0.17.0

package/src/superTypes/domrectType.js

@@ -10,6 +10,9 @@ const domrectType = {
   option: ['DOMRect'],
   childTypes: ['domrectreadonly'],
   stringRegex: /^(?<domRectClass>DOMRect|DOMRectReadOnly)\((?<innerContent>.*)\)$/u,
+  valueMatch (x) {
+    return ['DOMRect', 'DOMRectReadOnly'].includes(toStringTag(x));
+  },
   toValue (s, rootInfo) {
     const {groups: {
       domRectClass
@@ -24,7 +27,7 @@ const domrectType = {
       )(x, y, width, height)};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value}) {
     /** @type {HTMLInputElement} */ (
@@ -69,10 +72,22 @@ const domrectType = {
     ).checked;
     return new (isReadWrite ? DOMRect : DOMRectReadOnly)(x, y, width, height);
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     const isReadWrite = toStringTag(value) === 'DOMRect';
-    return ['div', {dataset: {type: 'domrect'}}, [
-      ['b', {class: 'emphasis'}, [isReadWrite ? 'DOMRect' : 'DOMRectReadOnly']],
+    return ['div', {
+      dataset: {
+        type: 'domrect'
+      },
+      title: specificSchemaObject?.description
+        ? `(a \`${(isReadWrite ? 'DOMRect' : 'DOMRectReadOnly')}\`)`
+        : undefined
+    }, [
+      ['b', {
+        class: 'emphasis'
+      }, [
+        specificSchemaObject?.description ??
+          (isReadWrite ? 'DOMRect' : 'DOMRectReadOnly')
+      ]],
       ['br'],
       ['b', ['x ']],
       value.x,
@@ -87,15 +102,18 @@ const domrectType = {
       value.height
     ]];
   },
-  editUI ({typeNamespace, value = {
+  editUI ({typeNamespace, specificSchemaObject, value = {
     x: '',
     y: '',
     width: '',
     height: ''
   }}) {
     idx++;
-    // eslint-disable-next-line @stylistic/max-len -- Long
-    return ['div', {dataset: {type: 'domrect'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+    const step = 'any'; // Proper step?
+    return ['div', {
+      dataset: {type: 'domrect'},
+      title: specificSchemaObject?.description ?? 'DOMRect'
+    }, /** @type {import('jamilih').JamilihChildren} */ ([
       ['div', [
         ['label', [
           ['input', {
@@ -122,6 +140,8 @@ const domrectType = {
       ['label', [
         'x: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'x',
           name: `${typeNamespace}-domrect-x`, value: value.x
         }]
@@ -130,6 +150,8 @@ const domrectType = {
       ['label', [
         'y: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'y',
           name: `${typeNamespace}-domrect-y`, value: value.y
         }]
@@ -138,6 +160,8 @@ const domrectType = {
       ['label', [
         'width: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'width',
           name: `${typeNamespace}-domrect-width`, value: value.width
         }]
@@ -146,6 +170,8 @@ const domrectType = {
       ['label', [
         'height: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'height',
           name: `${typeNamespace}-domrect-height`, value: value.height
         }]

package/src/superTypes/errorsSpecialType.js

@@ -1,7 +1,7 @@
-/* globals InternalError */
+/* globals InternalError -- Non-standard */
 import {errors as errorsTypesonRegistry} from 'typeson-registry';
 import {$e} from '../utils/templateUtils.js';
-import {jml} from '../vendor-imports.js';
+import {jml, hasConstructorOf} from '../vendor-imports.js';
 import arrayType from '../fundamentalTypes/arrayType.js';
 
 /**
@@ -48,12 +48,19 @@ const specialErrors = [...specialErrorsMap.keys()];
  */
 const errorsSpecialType = {
   option: ['Special errors'],
+  valueMatch (x) {
+    return [
+      TypeError, RangeError, SyntaxError, ReferenceError,
+      EvalError, URIError,
+      AggregateError
+    ].some((Ctor) => hasConstructorOf(x, Ctor));
+  },
   childTypes: specialErrors.map((err) => {
     return err.toLowerCase();
   }),
   stringRegex: new RegExp(
     '^(?<errorClass>' + specialErrors.join('|') +
-      ')\\((?<innerContent>.*)\\)$', 'u'
+      String.raw`)\((?<innerContent>.*)\)$`, 'u'
   ),
   toValue (s, rootInfo) {
     const {groups: {
@@ -288,14 +295,20 @@ const errorsSpecialType = {
     return errObj;
   },
   viewUI (
-    {value: o, types, format, typeNamespace, resultType}
+    {value: o, types, format, specificSchemaObject, typeNamespace, resultType}
   ) {
     const constructor = getConstructor(o.constructor);
     return /** @type {import('jamilih').JamilihArray} */ ([
-      'div', {dataset: {type: 'errors'}}, [
-        ['div', [['b', ['Error type: ']], ['span', [
-          constructor
-        ]]]],
+      'div', {
+        dataset: {type: 'errors'},
+        title: specificSchemaObject?.description
+          ? `(an Error ${constructor})`
+          : undefined
+      }, [
+        specificSchemaObject?.description ??
+          ['div', [['b', ['Error type: ']], ['span', [
+            constructor
+          ]]]],
         typeof o.message === 'string'
           ? ['div', [['b', ['Message: ']], ['span', [o.message]]]]
           : [],
@@ -378,7 +391,6 @@ const errorsSpecialType = {
                           : 'errors',
                         value: error,
                         bringIntoFocus: false
-                        // schemaContent, schemaState
                       });
                     });
                     return div;
@@ -394,6 +406,7 @@ const errorsSpecialType = {
   },
   editUI ({
     typeNamespace,
+    specificSchemaObject,
     types,
 
     // Pass these to `errors` array
@@ -447,9 +460,12 @@ const errorsSpecialType = {
       });
     }
 
-    const div = /** @type {HTMLDivElement} */ (jml(
+    const div = jml(
       'div',
-      {dataset: {type: 'errors'}},
+      {
+        dataset: {type: 'errors'},
+        title: specificSchemaObject?.description ?? 'Special error'
+      },
       /** @type {import('jamilih').JamilihChildren} */ ([
         ['div', [
           ['label', [
@@ -622,6 +638,7 @@ const errorsSpecialType = {
                 const causeContents = $e(causeHolder, '.causeContents');
                 if (!causeContents?.children.length) {
                   const editui = component.editUI({
+                    buildTypeChoices,
                     typeNamespace,
                     types,
                     value: value.cause
@@ -693,7 +710,7 @@ const errorsSpecialType = {
                     typeNamespace, types, buildTypeChoices, format,
                     type: 'array',
                     topRoot, bringIntoFocus,
-                    arrayState: 'errorsArray',
+                    forcedState: 'errorsArray',
                     value: []
                   });
 
@@ -713,7 +730,6 @@ const errorsSpecialType = {
                       value: error,
                       bringIntoFocus: false,
                       setAValue: true
-                      // schemaContent, schemaState
                     });
                   });
 
@@ -766,7 +782,7 @@ const errorsSpecialType = {
           ['div', {class: 'aggregateErrorsContents'}]
         ]]
       ])
-    ));
+    );
 
     return [div];
   }

package/src/typeChoices.js

@@ -11,18 +11,25 @@ import dialogs from './utils/dialogs.js';
  * @typedef {(cfg: {
  *   type: string,
  *   baseValue?: import('./formats.js').StructuredCloneValue,
- *   bringIntoFocus?: boolean
+ *   bringIntoFocus?: boolean,
+ *   avoidReport?: boolean
  * }) => void} SetType
  */
 
 /**
- * @typedef {(info: {type: string, editUI: Element}) => void} AddTypeAndEditUI
+ * @typedef {(info: {
+ *   type: string,
+ *   editUI: Element,
+ *   specificSchema?: import('zodex').SzType
+ * }) => void} AddTypeAndEditUI
  */
 
 /**
  * @typedef {(info?: {
  *   baseValue?: import('./formats.js').StructuredCloneValue,
- *   bringIntoFocus?: boolean
+ *   bringIntoFocus?: boolean,
+ *   schemaObject?: import('./formatAndTypeChoices.js').ZodexSchema,
+ *   avoidReport?: boolean
  * }) => void} AddAndValidateEditUI
  */
 
@@ -65,12 +72,13 @@ import dialogs from './utils/dialogs.js';
 /**
  * @callback BuildTypeChoices
  * @param {{
+ *   autoTrigger?: boolean,
  *   format: import('./formats.js').AvailableFormat,
  *   typeNamespace?: string,
  *   value?: import('./formats.js').StructuredCloneValue,
  *   setValue?: boolean,
  *   state?: string,
- *   arrayState?: string,
+ *   forcedState?: string,
  *   keySelectClass?: string,
  *   requireObject?: boolean,
  *   objectHasValue?: boolean,
@@ -78,7 +86,9 @@ import dialogs from './utils/dialogs.js';
  *   formats?: import('./formats.js').default
  *   types?: import('./types.js').default
  *   schema?: string,
- *   schemaContent?: object,
+ *   schemaIdx?: number,
+ *   schemaOriginal?: import('./formatAndTypeChoices.js').ZodexSchema,
+ *   schemaContent?: import('./formatAndTypeChoices.js').ZodexSchema,
  * }} cfg
  * @returns {{
  *   domArray: [select: HTMLElement, typeContainer: HTMLElement],
@@ -93,6 +103,7 @@ import dialogs from './utils/dialogs.js';
  * @type {BuildTypeChoices}
  */
 export const buildTypeChoices = ({
+  autoTrigger = true,
   format,
   typeNamespace,
   value,
@@ -106,12 +117,20 @@ export const buildTypeChoices = ({
   formats = new Formats(),
   types = new Types(),
   schema,
+  schemaIdx,
+  schemaOriginal,
   schemaContent
 }) => {
   // console.log('format', format, 'state', state, 'path', typeNamespace);
-  const typeOptions = requireObject
-    ? [types.getOptionForType('object')]
-    : types.getTypeOptionsForFormatAndState(format, state);
+  const typeAndSchemaInfo = requireObject
+    ? {
+      typeOptions: [types.getOptionForType('object')], schemaObjects: undefined
+    }
+    : types.getTypeOptionsForFormatAndState(
+      format, state, schemaContent, schemaOriginal
+    );
+  const {typeOptions} = typeAndSchemaInfo;
+  const schemaObjs = typeAndSchemaInfo.schemaObjects;
 
   let editUI;
 
@@ -133,7 +152,7 @@ export const buildTypeChoices = ({
     );
   };
   const sel = /** @type {HTMLSelectElement} */ (jml('select', {
-    hidden: requireObject,
+    hidden: requireObject || typeOptions.length === 1,
     class: `typeChoices-${typeNamespace}${keySelectClass
       ? ' ' + keySelectClass
       : ''
@@ -142,16 +161,24 @@ export const buildTypeChoices = ({
     $custom: {
       $getValue,
       /** @type {SetType} */
-      $setType ({type, baseValue, bringIntoFocus}) {
+      $setType ({type, baseValue, bringIntoFocus, avoidReport}) {
         this.value = type;
         this.$setStyles();
-        this.$addAndValidateEditUI({baseValue, bringIntoFocus});
+        this.$addAndValidateEditUI({baseValue, bringIntoFocus, avoidReport});
       },
       /**
-       * @type {(info: {type: string}) => void} cfg
+       * @type {(info: {
+       *   type: string,
+       *   specificSchema?: import('zodex').SzType
+       * }) => void} cfg
        */
-      $setTypeNoEditUI ({type}) {
-        this.value = type;
+      $setTypeNoEditUI ({type, specificSchema}) {
+        if (schemaObjs && specificSchema) {
+          const idx = schemaObjs.indexOf(specificSchema);
+          this.selectedIndex = idx + 1;
+        } else {
+          this.value = type;
+        }
         this.$setStyles();
       },
 
@@ -159,11 +186,15 @@ export const buildTypeChoices = ({
       $setStyles () {
         const {value: type} = this;
         this.dataset.type = type; // Used for styling
-        const parEl = this.parentElement;
-        if (parEl.nodeName.toLowerCase() === 'fieldset') {
-          parEl.dataset.type = type;
-          DOM.filterChildElements(parEl, 'legend').forEach((legend) => {
-            /** @type {HTMLElement} */ (legend).dataset.type = type;
+        let ancestorEl = this.parentElement;
+        if (ancestorEl.nodeName.toLowerCase() !== 'fieldset') {
+          // Grandparent check added for optional items placeholder
+          ancestorEl = this.parentElement.parentElement;
+        }
+        if (ancestorEl.nodeName.toLowerCase() === 'fieldset') {
+          ancestorEl.dataset.type = type;
+          DOM.filterChildElements(ancestorEl, 'legend').forEach((legend) => {
+            legend.dataset.type = type;
           });
         }
       },
@@ -177,7 +208,9 @@ export const buildTypeChoices = ({
       },
 
       /** @type {AddAndValidateEditUI} */
-      $addAndValidateEditUI ({baseValue, bringIntoFocus} = {}) {
+      $addAndValidateEditUI ({
+        baseValue, bringIntoFocus, schemaObject, avoidReport
+      } = {}) {
         const {value: type} = this;
 
         if (!type) {
@@ -198,18 +231,34 @@ export const buildTypeChoices = ({
           value: baseValue,
           buildTypeChoices,
           format,
-          topRoot
+          topRoot,
+          schemaContent: schemaOriginal ??
+            (schemaContent?.type === 'union' && schemaIdx !== undefined
+              ? schemaContent.options[schemaIdx]
+              : schemaContent),
+          // Added `schemaContent` as inner arrays were not getting their
+          //   schema info; this apparently allows (actually requires)
+          //   commenting out the auto-adding of object content at end of
+          //   editUI in arrayType.js; we add `schemaFallingBack` to
+          //   distinguish
+          specificSchemaObject: schemaObject ??
+            (schemaContent?.type === 'union' && schemaIdx !== undefined
+              ? schemaContent.options[schemaIdx]
+              : schemaContent),
+          schemaFallingBack: Boolean(!schemaObject && schemaContent)
         });
         this.$addEditUI({editUI});
-        this.$validate();
+        this.$validate({
+          avoidReport
+        });
         topRoot = this.$getTopRoot(); // May be existing now
         // Needed; Array/object ref somewhere could now be valid or invalid
         types.validateAllReferences({topRoot});
       },
 
       /** @type {AddTypeAndEditUI} */
-      $addTypeAndEditUI ({type, editUI}) {
-        this.$setTypeNoEditUI({type});
+      $addTypeAndEditUI ({type, editUI, specificSchema}) {
+        this.$setTypeNoEditUI({type, specificSchema});
         this.$addEditUI({editUI});
       },
       /**
@@ -227,9 +276,10 @@ export const buildTypeChoices = ({
         return topRoot || this.$getTypeRoot();
       },
       /**
+       * @param {{avoidReport?: boolean}} cfg
        * @returns {boolean}
        */
-      $validate () {
+      $validate ({avoidReport} = {}) {
         const {value: type} = this;
         const container = this.$getContainer();
         if (!container.firstElementChild) {
@@ -237,7 +287,8 @@ export const buildTypeChoices = ({
         }
         const editUI = container.firstElementChild;
         return types.validate({
-          type, root: editUI, topRoot: this.$getTopRoot()
+          type, root: editUI, topRoot: this.$getTopRoot(),
+          avoidReport
         });
       }
     },
@@ -245,26 +296,41 @@ export const buildTypeChoices = ({
       // We don't want form `onchange` to run `$checkForKeyDuplicates`
       //   again (through `addAndValidateEditUI`->`validateAllReferences`)
       e?.stopPropagation();
-      /** @type {TypeChoicesElementAPI} */ (this).$addAndValidateEditUI();
+      /** @type {TypeChoicesElementAPI} */ (this).$addAndValidateEditUI({
+        schemaObject: schemaObjs
+          ? schemaObjs[Number(
+            /** @type {HTMLSelectElement} */
+            (e.target).selectedOptions[0].dataset.idx
+          )]
+          : undefined
+      });
       /** @type {TypeChoicesElementAPI} */ (this).$setStyles();
     }}
   }, [
     ['option', {value: ''}, [
       '(Choose a type)'
     ]],
-    // [string, {value: AvailableType; title?: string | undefined;}]
-    // @ts-ignore Apparent TS bug
+
+    // @ts-expect-error Apparent TS bug
     ...typeOptions.map(
-      ([optText, optAtts]) => [
-        'option',
-        optAtts ||
-          /* istanbul ignore next -- Should always have atts */
-          {},
-        [optText]
-      ]
+      ([optText, optAtts], idx) => {
+        return [
+          'option',
+          {
+            ...optAtts,
+            dataset: schemaObjs ? {idx} : {}
+          },
+          [optText]
+        ];
+      }
     )
   ]));
-  if (setValue || (requireObject && !objectHasValue)) {
+  if (autoTrigger && typeOptions.length === 1 && !setValue) {
+    setTimeout(() => {
+      sel.selectedIndex = 1;
+      sel.dispatchEvent(new Event('change'));
+    });
+  } else if (setValue || (requireObject && !objectHasValue)) {
     setTimeout(async () => {
       if (!setValue) { // if (requireObject && !objectHasValue) {
         // Todo (low): We could auto-populate keypath if has
@@ -273,7 +339,10 @@ export const buildTypeChoices = ({
         value = {};
       }
       try {
-        const rootEditUI = await formats.getControlsForFormatAndValue(
+        const {
+          rootUI: rootEditUI,
+          specificSchemas
+        } = await formats.getControlsForFormatAndValue(
           types,
           format,
           value,
@@ -293,7 +362,11 @@ export const buildTypeChoices = ({
         // eslint-disable-next-line @stylistic/max-len -- Long
         /** @type {HTMLSelectElement & {$addTypeAndEditUI: AddTypeAndEditUI}} */ (
           sel
-        ).$addTypeAndEditUI({type, editUI: rootEditUI});
+        ).$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({
@@ -306,9 +379,7 @@ export const buildTypeChoices = ({
     });
   }
 
-  const typeContainer = /** @type {HTMLDivElement} */ (
-    jml('div', {class: 'typeContainer'})
-  );
+  const typeContainer = jml('div', {class: 'typeContainer'});
 
   return {
     domArray: [
@@ -339,10 +410,10 @@ export const buildTypeChoices = ({
     /** @type {SetValue} */
     async setValue (value, stateObj) {
       const rootEditUI = /** @type {HTMLDivElement} */ (
-        await formats.getControlsForFormatAndValue(
+        (await formats.getControlsForFormatAndValue(
           types,
           format, value, stateObj
-        )
+        )).rootUI
       );
       const type = Types.getTypeForRoot(rootEditUI);
       /** @type {HTMLSelectElement & {$addTypeAndEditUI: AddTypeAndEditUI}} */ (