@es-joy/jsoe 0.24.2 → 0.25.0

package/src/fundamentalTypes/bigintObjectType.js

@@ -1,5 +1,6 @@
 import {hasConstructorOf} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 /**
  * @type {import('../types.js').TypeObject}
@@ -45,13 +46,13 @@ const bigintObjectType = {
   viewUI ({value, specificSchemaObject}) {
     return ['i', {
       dataset: {type: 'bigintObject'},
-      title: specificSchemaObject?.description ?? '(a BigInt Object)'
+      title: schemaLabel(specificSchemaObject) ?? '(a BigInt Object)'
     }, [`${String(value)}n`]];
   },
   editUI ({typeNamespace, specificSchemaObject, value = ''}) {
     return ['div', {
       dataset: {type: 'bigintObject'},
-      title: specificSchemaObject?.description ?? 'BigInt object'
+      title: schemaLabel(specificSchemaObject) ?? 'BigInt object'
     }, [
       ['input', {
         name: `${typeNamespace}-bigintObject`, type: 'number', step: '1',

package/src/fundamentalTypes/bigintType.js

@@ -1,4 +1,12 @@
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
+
+/**
+ * @typedef {HTMLInputElement & {
+ *   $minBigInt?: string,
+ *   $maxBigInt?: string
+ * }} BigIntInput
+ */
 
 /**
  * @type {import('../types.js').TypeObject}
@@ -21,16 +29,30 @@ const bigintType = {
     return {value: BigInt(s.slice(0, -1))};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+    return /** @type {HTMLInputElement|HTMLSelectElement} */ (
+      $e(root, 'input,select')
+    );
   },
   setValue ({root, value}) {
     this.getInput({root}).value = String(value);
   },
   validate ({root}) {
-    const val = this.getInput({root}).value;
+    const input = /** @type {BigIntInput} */ (this.getInput({root}));
+    const {value} = input;
+    const validSyntax = Boolean(value && (/^-?(\d+)$/u).test(value));
+    if (!validSyntax) {
+      return {message: 'Not a valid BigInt', valid: false};
+    }
+    const bigint = BigInt(value);
+    if (input.$minBigInt !== undefined && bigint < BigInt(input.$minBigInt)) {
+      return {message: `BigInt must be at least ${input.$minBigInt}`, valid: false};
+    }
+    if (input.$maxBigInt !== undefined && bigint > BigInt(input.$maxBigInt)) {
+      return {message: `BigInt must be at most ${input.$maxBigInt}`, valid: false};
+    }
     return {
-      message: 'Not a valid BigInt',
-      valid: Boolean(val && (/^-?(\d+)$/u).test(val))
+      message: '',
+      valid: true
     };
   },
   getValue ({root}) {
@@ -44,32 +66,72 @@ const bigintType = {
   viewUI ({value, specificSchemaObject}) {
     return ['i', {
       dataset: {type: 'bigint'},
-      title: specificSchemaObject?.description ?? '(a BigInt)'
+      title: schemaLabel(specificSchemaObject) ?? '(a BigInt)'
     }, [
       `${String(value)}n`
     ]];
   },
   editUI ({typeNamespace, specificSchemaObject, value}) {
-    const bigintSchemaObject = /** @type {import('zodex').SzBigInt} */ (
+    if (specificSchemaObject?.type === 'literal') {
+      const selectedValue = value ?? specificSchemaObject.defaultValue;
+      return ['div', {
+        dataset: {type: 'bigint'},
+        title: schemaLabel(specificSchemaObject) ?? 'BigInt'
+      }, [
+        ['select', {
+          name: `${typeNamespace}-bigint`
+        }, specificSchemaObject.values.filter((/** @type {unknown} */ val) => {
+          return typeof val === 'bigint';
+        }).map((/** @type {bigint} */ val) => {
+          return ['option', {
+            selected: val === selectedValue
+          }, [String(val)]];
+        })]
+      ]];
+    }
+    const bigintSchemaObject = /** @type {import('zodexy').SzBigInt} */ (
       specificSchemaObject
     );
+    const formatBounds = bigintSchemaObject?.format
+      ? {
+        int64: {
+          min: '-9223372036854775808',
+          max: '9223372036854775807'
+        },
+        uint64: {
+          min: '0',
+          max: '18446744073709551615'
+        }
+      }[bigintSchemaObject.format]
+      : undefined;
+    const schemaMin = bigintSchemaObject?.min;
+    const schemaMax = bigintSchemaObject?.max;
+    const min = schemaMin ?? formatBounds?.min;
+    const max = schemaMax ?? formatBounds?.max;
+    const inputMin = min !== undefined
+      ? schemaMin === undefined || bigintSchemaObject?.minInclusive
+        ? min
+        : String(BigInt(min) + 1n)
+      : undefined;
+    const inputMax = max !== undefined
+      ? schemaMax === undefined || bigintSchemaObject?.maxInclusive
+        ? max
+        : String(BigInt(max) - 1n)
+      : undefined;
+
     return ['div', {
       dataset: {type: 'bigint'},
-      title: specificSchemaObject?.description ?? 'BigInt'
+      title: schemaLabel(specificSchemaObject) ?? 'BigInt'
     }, [
       ['input', {
         name: `${typeNamespace}-bigint`, type: 'number',
+        $custom: {
+          $minBigInt: inputMin,
+          $maxBigInt: inputMax
+        },
         value: value ?? specificSchemaObject?.defaultValue ?? '',
-        min: bigintSchemaObject?.min
-          ? bigintSchemaObject?.minInclusive
-            ? bigintSchemaObject?.min
-            : String(BigInt(bigintSchemaObject?.min) + 1n)
-          : undefined,
-        max: bigintSchemaObject?.max
-          ? bigintSchemaObject?.maxInclusive
-            ? bigintSchemaObject?.max
-            : String(BigInt(bigintSchemaObject?.max) - 1n)
-          : undefined,
+        min: inputMin,
+        max: inputMax,
         step: bigintSchemaObject?.multipleOf ?? '1'
       }]
     ]];

package/src/fundamentalTypes/blobType.js

@@ -1,5 +1,6 @@
 import {jml, toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 import {visualize, getUserMedia, startScreenCapture} from '../utils/media.js';
 import dialogs from '../utils/dialogs.js';
 
@@ -61,24 +62,26 @@ function newBlobForBinary (viewBinary, value) {
  * @returns {import('jamilih').JamilihArray}
  */
 function binaryButton (value, editable) {
-  // @ts-expect-error It's ok
-  return ['button', /** @type {import('jamilih').JamilihAttributes} */ ({
+  return ['button', {
     class: 'viewBinary',
     $custom: {
       $value: value
     },
     $on: {
       /**
-       * @this {HTMLButtonElement & {$value: Blob}}
        * @param {Event} e
        */
       click (e) {
         // eslint-disable-next-line consistent-this -- Clarity
-        const viewBinary = this;
+        const viewBinary = /** @type {HTMLButtonElement & {$value: Blob}} */ (
+          this
+        );
         e.preventDefault();
         if (
-          !this.$value ||
-          Object.prototype.toString.call(this.$value).slice(8, -1) !== 'Blob'
+          !viewBinary.$value ||
+          Object.prototype.toString.call(
+            viewBinary.$value
+          ).slice(8, -1) !== 'Blob'
         ) {
           // Non-editable shouldn't be empty
           // if (!editable) {
@@ -108,7 +111,7 @@ function binaryButton (value, editable) {
             },
             // @ts-expect-error TS bug
             children: [
-              ['div', /** @type {import('jamilih').JamilihChildren} */ ([
+              ['div', [
                 'Binary source',
                 ['br'],
                 ['textarea', {
@@ -117,7 +120,7 @@ function binaryButton (value, editable) {
                   /* istanbul ignore next */
                   /** @type {string|null} */ (reader.result) ?? ''
                 ]]
-              ])]
+              ]]
             ]
           });
         });
@@ -134,10 +137,10 @@ function binaryButton (value, editable) {
             ));
           }
         );
-        reader.readAsBinaryString(this.$value);
+        reader.readAsBinaryString(viewBinary.$value);
       }
     }
-  }), [
+  }, [
     editable
       ? 'Edit binary data'
       : 'View binary data'
@@ -177,9 +180,9 @@ const blobType = {
     return ['div', {dataset: {type: 'blob'}}, [
       ['b', {
         class: 'emphasis',
-        title: specificSchemaObject?.description ? '(a Blob)' : undefined
+        title: schemaLabel(specificSchemaObject) ? '(a Blob)' : undefined
       }, [
-        specificSchemaObject?.description ?? 'Blob'
+        schemaLabel(specificSchemaObject) ?? 'Blob'
       ]],
       ['br'],
       ['br'],
@@ -348,17 +351,17 @@ const blobType = {
         })()
         : '',
       value.type.startsWith('image/')
-        // @ts-expect-error It's ok
-        ? ['img', /** @type {import('jamilih').JamilihAttributes} */ ({
+        ? ['img', {
           class: 'imageView',
           src: URL.createObjectURL(value),
           $on: {
-            /** @this {HTMLImageElement} */
             load () {
-              URL.revokeObjectURL(this.src);
+              URL.revokeObjectURL(
+                /** @type {HTMLImageElement} */ (this).src
+              );
             }
           }
-        })]
+        }]
         : ''
     ]];
   },
@@ -367,7 +370,7 @@ const blobType = {
     //         recorded or uploaded)
     return ['div', {
       dataset: {type: 'blob'},
-      title: specificSchemaObject?.description ?? 'Blob'
+      title: schemaLabel(specificSchemaObject) ?? 'Blob'
     }, [
       ['fieldset', {
         class: 'blobMetaData',
@@ -460,18 +463,16 @@ const blobType = {
         ['legend', ['Supply blob through upload']],
         ['label', [
           'Blob ',
-          // @ts-expect-error It's ok
-          ['input', /** @type {import('jamilih').JamilihAttributes} */ ({
+          ['input', {
             $on: {
-              /**
-               * @this {HTMLInputElement}
-               */
               change () {
+                // eslint-disable-next-line consistent-this -- Clarity
+                const input = /** @type {HTMLInputElement} */ (this);
                 /* istanbul ignore if -- TS */
-                if (!this.files) {
+                if (!input.files) {
                   return;
                 }
-                const file = this.files[0];
+                const file = input.files[0];
 
                 const blob = new Blob([file], {
                   type: file.type
@@ -489,7 +490,7 @@ const blobType = {
               }
             },
             name: `${typeNamespace}-blob`, type: 'file'
-          })]
+          }]
         ]]
       ]],
       ['fieldset', [
@@ -729,15 +730,11 @@ const blobType = {
         })(),
         ' ',
         ['div', [
-          // @ts-expect-error It's ok
-          ['button', /** @type {import('jamilih').JamilihAttributes} */ ({
+          ['button', {
             class: 'recordMedia',
             $on: {
               /**
                * @param {Event} e
-               * @this {HTMLButtonElement & {
-               *   $mediaRecorder: MediaRecorder
-               * }}
                */
               click (e) {
                 e.preventDefault();
@@ -831,13 +828,16 @@ const blobType = {
                   chunks = [];
                 });
 
-                this.$mediaRecorder = mediaRecorder;
+                (
+                  /** @type {HTMLButtonElement & {$mediaRecorder: MediaRecorder}} */
+                  (this)
+                ).$mediaRecorder = mediaRecorder;
 
                 // Todo: Could make option for front/back
                 //         camera ("user"/"environment") and bringIntoFocus
               }
             }
-          }), [
+          }, [
             'Record media'
           ]],
           ['button', {
@@ -968,7 +968,7 @@ const blobType = {
           [
             'div',
             {class: 'recordedMedia'},
-            /** @type {import('jamilih').JamilihChildren} */ ([
+            [
               ...(() => {
                 const recordedMedia = jml(
                   'video', {class: 'recordedMedia'}
@@ -1013,7 +1013,7 @@ const blobType = {
                   ])
                 ];
               })()
-            ])
+            ]
           ]
         ]]
       ]]

package/src/fundamentalTypes/booleanType.js

@@ -1,4 +1,5 @@
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 /**
  * @type {import('../types.js').TypeObject & {ct: number}}
@@ -18,32 +19,39 @@ const booleanType = {
     return /** @type {HTMLInputElement} */ ($e(root, 'input[value=true]'));
   },
   setValue ({root, value}) {
-    const input = value
-      ? /** @type {HTMLInputElement} */ ($e(root, 'input[value=true]'))
-      : /** @type {HTMLInputElement} */ ($e(root, 'input[value=false]'));
+    const input = /** @type {HTMLInputElement} */ (
+      $e(root, value ? 'input[value=true]' : 'input[value=false]')
+    );
     input.checked = true;
   },
   viewUI ({value, specificSchemaObject}) {
     return ['i', {
       dataset: {type: 'boolean'},
-      title: specificSchemaObject?.description ?? '(a boolean)'
+      title: schemaLabel(specificSchemaObject) ?? '(a boolean)'
     }, [value ? 'true' : 'false']];
   },
   ct: 0,
   editUI ({typeNamespace, specificSchemaObject, value}) {
     this.ct++;
     const isLiteral = specificSchemaObject?.type === 'literal';
-    const val = isLiteral
-      ? specificSchemaObject?.value
+    const booleanVals = /** @type {import('zodexy').SzLiteral<boolean[]>} */ (
+      specificSchemaObject)?.values?.filter((
+      /** @type {boolean} */ val
+    ) => {
+      return typeof val === 'boolean';
+    }) ?? [];
+    const hasOneValue = isLiteral && booleanVals.length === 1;
+    const val = hasOneValue
+      ? booleanVals[0]
       : (value ?? specificSchemaObject?.defaultValue);
     return ['div', {
       dataset: {type: 'boolean'},
-      title: specificSchemaObject?.description ?? 'Boolean'
+      title: schemaLabel(specificSchemaObject) ?? 'Boolean'
     }, [
       ['label', [
         'True',
         ['input', {
-          disabled: isLiteral,
+          disabled: hasOneValue,
           type: 'radio', name: `${typeNamespace}-boolean${this.ct}`,
           value: 'true', checked: typeof val === 'boolean' ? val : true
         }]

package/src/fundamentalTypes/dateType.js

@@ -1,5 +1,6 @@
 import {jml, toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 /**
  * @typedef {(
@@ -21,13 +22,12 @@ const dateType = {
   option: ['Date'],
   // ISO Date string
   dateRegex: /^(?:\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d)$/u, // ([+-][0-2]\d:[0-5]\d|Z)
-  // eslint-disable-next-line @stylistic/max-len -- Long
   // /^(?:\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}\.\d{3}Z)?|(?:\+|-)\d{6}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)$/u,
   stringRegex () {
     const regex = this.dateRegex;
     if (!this.valid) {
       const {source} = regex;
-      return new RegExp('^' + '(?:InvalidDate)|' + source.slice(1), 'u');
+      return new RegExp('^(?:InvalidDate)|' + source.slice(1), 'u');
     }
     return new RegExp(regex, 'u');
   },
@@ -53,11 +53,9 @@ const dateType = {
 
     const dateStr = new Date(Date.parse(value)).toISOString();
     /* istanbul ignore next -- See below */
-    // eslint-disable-next-line @stylistic/max-len -- Long
     /* istanbul ignore next -- 6 digits year not reliable through `Date.parse` */
     this.getInput({root}).value = dateStr.length === 24
       ? dateStr.slice(0, -8)
-      // eslint-disable-next-line @stylistic/max-len -- Long
       /* istanbul ignore next -- 6 digits year not reliable through `Date.parse` */
       : dateStr.slice(3, 13); // Will cut off ten/hundred thousand years
   },
@@ -102,11 +100,11 @@ const dateType = {
     return !this.valid && this.isValueInvalid(value)
       ? ['i', {
         dataset: {type: 'date'}, class: 'InvalidDate',
-        title: specificSchemaObject?.description ?? '(an InvalidDate)'
+        title: schemaLabel(specificSchemaObject) ?? '(an InvalidDate)'
       }, ['InvalidDate']]
       : ['i', {
         dataset: {type: 'date'}, class: 'ValidDate',
-        title: specificSchemaObject?.description ?? '(a `Date`)'
+        title: schemaLabel(specificSchemaObject) ?? '(a `Date`)'
       }, [
         value.toISOString().slice(0, -8)
       ]];
@@ -114,7 +112,7 @@ const dateType = {
   // Change to default to `new Date()` when can't be `NaN`
   //   value (keys)?
   editUI ({typeNamespace, specificSchemaObject, types, value}) {
-    const dateSchemaObject = /** @type {import('zodex').SzDate} */ (
+    const dateSchemaObject = /** @type {import('zodexy').SzDate} */ (
       specificSchemaObject
     );
     const val = value ?? (specificSchemaObject?.defaultValue
@@ -172,7 +170,7 @@ const dateType = {
       ]);
     return ['div', {
       dataset: {type: this.valid ? 'ValidDate' : 'date'},
-      title: specificSchemaObject?.description ?? 'Date'
+      title: schemaLabel(specificSchemaObject) ?? 'Date'
     }, [
       ['label', {
         hidden: notANum

package/src/fundamentalTypes/domexceptionType.js

@@ -1,5 +1,6 @@
 import {toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 let domExceptionNameId = 0;
 
@@ -39,7 +40,7 @@ const domexceptionType = {
   viewUI ({value, specificSchemaObject}) {
     return ['div', {
       dataset: {type: 'domexception'},
-      title: specificSchemaObject?.description ?? '(a `DOMException`)'
+      title: schemaLabel(specificSchemaObject) ?? '(a `DOMException`)'
     }, [
       ['b', ['Message ']],
       value.message,
@@ -55,8 +56,8 @@ const domexceptionType = {
     domExceptionNameId++;
     return ['div', {
       dataset: {type: 'domexception'},
-      title: specificSchemaObject?.description ?? 'DOMException'
-    }, /** @type {import('jamilih').JamilihChildren} */ ([
+      title: schemaLabel(specificSchemaObject) ?? 'DOMException'
+    }, [
       ['label', [
         'Name: ',
         ['input', {
@@ -115,7 +116,7 @@ const domexceptionType = {
           value: value?.message ?? ''
         }]
       ]]
-    ])];
+    ]];
   }
 };
 

package/src/fundamentalTypes/errorType.js

@@ -1,5 +1,7 @@
 import {error as errorTypesonRegistry} from 'typeson-registry';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
+import {tick} from '../utils/timing.js';
 import {jml, toStringTag, hasConstructorOf} from '../vendor-imports.js';
 
 /**
@@ -82,17 +84,22 @@ const errorType = {
       ).click();
     }
 
-    setTimeout(() => {
-      if (typeof value.cause === 'object') {
-        /** @type {HTMLElement} */ ($e(root, '.cause')).click();
-        /** @type {import('../types.js').TypeObjectSetValue} */ (
-          this.setValue
-        )({
-          root: /** @type {HTMLDivElement} */ ($e(root, '.causeContents')),
-          value: value.cause
-        });
+    // Return a promise that settles once the deferred `.cause` sub-editor is
+    //   built and populated, so callers can await a fully-built subtree.
+    return (async () => {
+      await tick();
+      if (typeof value.cause !== 'object') {
+        return;
       }
-    });
+
+      /** @type {HTMLElement} */ ($e(root, '.cause')).click();
+      await /** @type {import('../types.js').TypeObjectSetValue} */ (
+        this.setValue
+      )({
+        root: /** @type {HTMLDivElement} */ ($e(root, '.causeContents')),
+        value: value.cause
+      });
+    })();
   },
   getValue ({root}) {
     /**
@@ -180,28 +187,28 @@ const errorType = {
       'div', {dataset: {type: 'error'}}, [
         ['b', {
           class: 'emphasis',
-          title: specificSchemaObject?.description ? '(an Error)' : undefined
+          title: schemaLabel(specificSchemaObject) ? '(an Error)' : undefined
         }, [
-          specificSchemaObject?.description ?? 'Error'
+          schemaLabel(specificSchemaObject) ?? 'Error'
         ]],
-        typeof o.message === 'string'
-          ? ['div', [['b', ['Message: ']], ['span', [o.message]]]]
-          : [],
-        typeof o.name === 'string'
-          ? ['div', [['b', ['Name: ']], ['span', [o.name]]]]
-          : [],
-        typeof o.fileName === 'string'
-          ? ['div', [['b', ['File name: ']], ['span', [o.fileName]]]]
-          : [],
-        typeof o.lineNumber === 'number'
-          ? ['div', [['b', ['Line number: ']], ['span', [o.lineNumber]]]]
-          : [],
-        typeof o.columnNumber === 'number'
-          ? ['div', [['b', ['Column number: ']], ['span', [o.columnNumber]]]]
-          : [],
-        typeof o.stack === 'string'
-          ? ['div', [['b', ['Stack: ']], ['span', [o.stack]]]]
-          : [],
+        ...(typeof o.message === 'string'
+          ? [['div', [['b', ['Message: ']], ['span', [o.message]]]]]
+          : []),
+        ...(typeof o.name === 'string'
+          ? [['div', [['b', ['Name: ']], ['span', [o.name]]]]]
+          : []),
+        ...(typeof o.fileName === 'string'
+          ? [['div', [['b', ['File name: ']], ['span', [o.fileName]]]]]
+          : []),
+        ...(typeof o.lineNumber === 'number'
+          ? [['div', [['b', ['Line number: ']], ['span', [o.lineNumber]]]]]
+          : []),
+        ...(typeof o.columnNumber === 'number'
+          ? [['div', [['b', ['Column number: ']], ['span', [o.columnNumber]]]]]
+          : []),
+        ...(typeof o.stack === 'string'
+          ? [['div', [['b', ['Stack: ']], ['span', [o.stack]]]]]
+          : []),
         ['b', ['Cause: ']], ['div', {class: 'causeHolder'}, [
           ['button', {$on: {click (/** @type {Event} */ e) {
             e.preventDefault();
@@ -259,14 +266,14 @@ const errorType = {
         /** @type {HTMLElement} */ ($e(
           div, '.cause'
         )).click();
-      });
+      }, 0);
     }
 
     const div = jml(
       'div',
       {
         dataset: {type: 'error'},
-        title: specificSchemaObject?.description ?? 'Error'
+        title: schemaLabel(specificSchemaObject) ?? 'Error'
       },
       /** @type {import('jamilih').JamilihChildren} */ ([
         ['div', [