@es-joy/jsoe 0.15.0 → 0.17.0

package/src/fundamentalTypes/booleanType.js

@@ -0,0 +1,63 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject & {ct: number}}
+ */
+const booleanType = {
+  option: ['Boolean', {value: 'boolean'}],
+  stringRegex: /^(?:true|false)$/u,
+  valueMatch (x) {
+    return typeof x === 'boolean';
+  },
+  toValue: (s) => ({value: s === 'true'}),
+  getValue ({root}) {
+    return /** @type {HTMLInputElement} */ (this.getInput({root})).checked;
+  },
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    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]'));
+    input.checked = true;
+  },
+  viewUI ({value, specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'boolean'},
+      title: specificSchemaObject?.description ?? '(a boolean)'
+    }, [value ? 'true' : 'false']];
+  },
+  ct: 0,
+  editUI ({typeNamespace, specificSchemaObject, value}) {
+    this.ct++;
+    const isLiteral = specificSchemaObject?.type === 'literal';
+    const val = isLiteral
+      ? specificSchemaObject?.value
+      : (value ?? specificSchemaObject?.defaultValue);
+    return ['div', {
+      dataset: {type: 'boolean'},
+      title: specificSchemaObject?.description ?? 'Boolean'
+    }, [
+      ['label', [
+        'True',
+        ['input', {
+          disabled: isLiteral,
+          type: 'radio', name: `${typeNamespace}-boolean${this.ct}`,
+          value: 'true', checked: typeof val === 'boolean' ? val : true
+        }]
+      ]],
+      ['label', [
+        'False',
+        ['input', {
+          disabled: isLiteral,
+          type: 'radio', name: `${typeNamespace}-boolean${this.ct}`,
+          value: 'false', checked: typeof val === 'boolean' ? !val : false
+        }]
+      ]]
+    ]];
+  }
+};
+
+export default booleanType;

package/src/fundamentalTypes/catchType.js

@@ -0,0 +1,140 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const catchType = {
+  option: ['Catch'],
+  stringRegex: /^catch\((.*)\)$/u,
+  valueMatch (x) {
+    // Todo: Should expand types here and in `toValue`
+    return ['number', 'string'].includes(typeof x);
+  },
+  toValue (s) {
+    const value = s.charAt(0) === '"' ? s.slice(1, -1) : Number(s);
+    return {value};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLTextAreaElement} */ (
+      $e(root, 'input,textarea')
+    );
+  },
+  setValue ({root, value}) {
+    // input/textarea hasn't yet been added, so set timeout
+    setTimeout(() => {
+      this.getInput({root}).value = value;
+    });
+  },
+  getValue ({root}) {
+    return this.getInput({root}).value;
+  },
+  viewUI ({
+    specificSchemaObject, types,
+    resultType, typeNamespace, topRoot, format,
+    bringIntoFocus, buildTypeChoices, // schemaContent,
+    replaced, value
+  }) {
+    return ['span', {
+      dataset: {type: 'catch'},
+      title: specificSchemaObject?.description ?? '(a catch)'
+    }, [
+      ['b', ['Catch']],
+      ['br'],
+      'Default value',
+      ['br'],
+      ['div', {
+        class: 'defaultValue'
+      }, [
+        types.getUIForModeAndType({
+          readonly: true,
+          specificSchemaObject: /** @type {import('zodex').SzCatch} */ (
+            specificSchemaObject
+          )?.innerType,
+          hasValue: true,
+          value,
+          resultType, typeNamespace,
+          type: /** @type {import('../types.js').AvailableType} */ (
+            /** @type {import('zodex').SzCatch} */ (
+              specificSchemaObject
+            )?.innerType?.type
+          ),
+          topRoot, bringIntoFocus,
+          buildTypeChoices, format,
+          // schemaContent,
+          replaced
+        })
+      ]],
+      'Catch value',
+      ['br'],
+      ['div', {
+        class: 'catchValue'
+      }, [
+        types.getUIForModeAndType({
+          readonly: true,
+          specificSchemaObject: {
+            ...(/** @type {import('zodex').SzCatch} */ (
+              specificSchemaObject
+            )?.innerType),
+            description: '(catch value)'
+          },
+          hasValue: true,
+          value: /** @type {import('zodex').SzCatch} */ (
+            specificSchemaObject
+          ).value,
+          resultType, typeNamespace,
+          type: /** @type {import('../types.js').AvailableType} */ (
+            /** @type {import('zodex').SzCatch} */ (
+              specificSchemaObject
+            )?.innerType?.type
+          ),
+          topRoot, bringIntoFocus,
+          buildTypeChoices, format,
+          // schemaContent,
+          replaced
+        })
+      ]]
+    ]];
+  },
+  editUI ({
+    format, type, buildTypeChoices, specificSchemaObject,
+    topRoot, schemaContent, typeNamespace, value
+  }) {
+    const schemaValue =
+      /** @type {import('zodex').SzCatch} */ (
+        specificSchemaObject
+      )?.value;
+    return ['div', {
+      dataset: {type: 'catch'},
+      title: specificSchemaObject?.description ?? '(a `catch`)'
+    }, [
+      ['label', [
+        ['b', {
+          title: String(schemaValue)
+        }, ['Value']],
+        ' ',
+        ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+          buildTypeChoices
+        )({
+          // resultType,
+          // eslint-disable-next-line object-shorthand -- TS
+          topRoot: /** @type {HTMLDivElement} */ (topRoot),
+          // eslint-disable-next-line object-shorthand -- TS
+          format: /** @type {import('../formats.js').AvailableFormat} */ (
+            format
+          ),
+          setValue: true,
+          value: value ?? schemaValue,
+          schemaOriginal: schemaContent,
+          schemaContent: /** @type {import('zodex').SzCatch} */ (
+            specificSchemaObject
+          )?.innerType,
+          state: type,
+          // itemIndex,
+          typeNamespace
+        }).domArray)
+      ]]
+    ]];
+  }
+};
+
+export default catchType;

package/src/fundamentalTypes/dateType.js

@@ -1,9 +1,9 @@
-import {jml} from '../vendor-imports.js';
+import {jml, toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 
 /**
  * @typedef {(
- *   legitimateInvalid?: true|undefined
+ *   legitimateInvalid?: boolean|undefined
  * ) => void} SetValidity
  */
 
@@ -20,7 +20,9 @@ import {$e} from '../utils/templateUtils.js';
 const dateType = {
   option: ['Date'],
   // ISO Date string
-  dateRegex: /^(?:\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,
+  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) {
@@ -29,11 +31,16 @@ const dateType = {
     }
     return new RegExp(regex, 'u');
   },
+  valueMatch (x) {
+    return toStringTag(x) === 'Date';
+  },
   toValue (s) {
     return {value: new Date(s)};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input[type="date"]'));
+    return /** @type {HTMLInputElement} */ (
+      $e(root, 'input[type="datetime-local"]')
+    );
   },
   setValue ({root, value}) {
     const notANum = value && Number.isNaN(value.getTime());
@@ -43,9 +50,10 @@ const dateType = {
       ).$setValidity(true);
       return;
     }
+
     const dateStr = new Date(Date.parse(value)).toISOString();
     this.getInput({root}).value = dateStr.length === 24
-      ? dateStr.slice(0, 10)
+      ? 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
@@ -63,6 +71,7 @@ const dateType = {
         message: 'Must not be empty`'
       };
     }
+
     return {
       valid: new RegExp(this.dateRegex, 'u').test(val),
       message: 'Must match a valid date'
@@ -86,22 +95,32 @@ const dateType = {
   isValueInvalid (value) {
     return value && Number.isNaN(value.getTime());
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     return !this.valid && this.isValueInvalid(value)
       ? ['i', {
-        dataset: {type: 'date'}, class: 'InvalidDate'
+        dataset: {type: 'date'}, class: 'InvalidDate',
+        title: specificSchemaObject?.description ?? '(an InvalidDate)'
       }, ['InvalidDate']]
-      : ['i', {dataset: {type: 'date'}, class: 'ValidDate'}, [
-        value.toISOString().slice(0, 10)
+      : ['i', {
+        dataset: {type: 'date'}, class: 'ValidDate',
+        title: specificSchemaObject?.description ?? '(a `Date`)'
+      }, [
+        value.toISOString().slice(0, -8)
       ]];
   },
   // Change to default to `new Date()` when can't be `NaN`
   //   value (keys)?
-  editUI ({typeNamespace, types, value = ''}) {
-    const notANum = this.isValueInvalid(value);
+  editUI ({typeNamespace, specificSchemaObject, types, value}) {
+    const dateSchemaObject = /** @type {import('zodex').SzDate} */ (
+      specificSchemaObject
+    );
+    const val = value ?? (specificSchemaObject?.defaultValue
+      ? new Date(specificSchemaObject?.defaultValue)
+      : '');
+    const notANum = this.isValueInvalid(val);
     const invalid = this.valid
       ? ''
-      : /** @type {HTMLDivElement} */ (jml('div', [
+      : jml('div', [
         ['label', [
           'Invalid date',
           ['input', {
@@ -116,7 +135,13 @@ const dateType = {
               $setValidity (legitimateInvalid) {
                 // console.log('legitimateInvalid', legitimateInvalid);
                 if (legitimateInvalid === true) {
-                  /** @type {HTMLInputElement} */ (this).checked = true;
+                  /**
+                   * @type {HTMLInputElement & {
+                   *   $setValidity: SetValidity
+                   * }}
+                   */ (
+                    this
+                  ).checked = true;
                 }
                 const label = /** @type {HTMLLabelElement} */ (
                   /** @type {HTMLDivElement} */ (
@@ -132,24 +157,37 @@ const dateType = {
             },
             $on: {
               click (/* e */) {
-                /** @type {HTMLElement & {$setValidity: SetValidity}} */ (
+                /** @type {HTMLInputElement & {$setValidity: SetValidity}} */ (
+                  this
+                ).$setValidity(/** @type {HTMLInputElement} */ (
                   this
-                ).$setValidity();
+                ).checked);
               }
             }
           }]
         ]]
-      ]));
-    return ['div', {dataset: {type: this.valid ? 'ValidDate' : 'date'}}, [
+      ]);
+    return ['div', {
+      dataset: {type: this.valid ? 'ValidDate' : 'date'},
+      title: specificSchemaObject?.description ?? 'Date'
+    }, [
       ['label', {
         hidden: notANum
       }, [
         'Date: ',
         ['input', {
           name: `${typeNamespace}-date`,
-          type: 'date',
+          type: 'datetime-local',
           // Required yyyy-MM-dd format
-          value: !value || notANum ? '' : value.toISOString().slice(0, 10)
+          value: !val || notANum
+            ? ''
+            : val.toISOString().slice(0, -8),
+          min: dateSchemaObject?.min
+            ? new Date(dateSchemaObject.min).toISOString().slice(0, -8)
+            : undefined,
+          max: dateSchemaObject?.max
+            ? new Date(dateSchemaObject.max).toISOString().slice(0, -8)
+            : undefined
         }]
       ]],
       invalid

package/src/fundamentalTypes/domexceptionType.js

@@ -1,11 +1,17 @@
+import {toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 
+let domExceptionNameId = 0;
+
 /**
  * @type {import('../types.js').TypeObject}
  */
 const domexceptionType = {
   option: ['DOMException'],
   stringRegex: /^DOMException\((.*)\)$/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'DOMException';
+  },
   toValue (s) {
     const {message, name} = JSON.parse(s);
     return {value: new DOMException(message, name)};
@@ -30,8 +36,11 @@ const domexceptionType = {
     ).value;
     return new DOMException(message, name);
   },
-  viewUI ({value}) {
-    return ['div', {dataset: {type: 'domexception'}}, [
+  viewUI ({value, specificSchemaObject}) {
+    return ['div', {
+      dataset: {type: 'domexception'},
+      title: specificSchemaObject?.description ?? '(a `DOMException`)'
+    }, [
       ['b', ['Message ']],
       value.message,
       ['br'],
@@ -42,79 +51,68 @@ const domexceptionType = {
       value.code
     ]];
   },
-  editUI ({typeNamespace, value = ''}) {
-    // eslint-disable-next-line @stylistic/max-len -- Long
-    return ['div', {dataset: {type: 'domexception'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+  editUI ({typeNamespace, specificSchemaObject, value = ''}) {
+    domExceptionNameId++;
+    return ['div', {
+      dataset: {type: 'domexception'},
+      title: specificSchemaObject?.description ?? 'DOMException'
+    }, /** @type {import('jamilih').JamilihChildren} */ ([
       ['label', [
         'Name: ',
         ['input', {
           class: 'name',
-          name: `${typeNamespace}-domexception-name`, value
+          list: `domExceptionNames-${domExceptionNameId}`,
+          name: `${typeNamespace}-domexception-name`,
+          value: value?.name ?? '',
+          size: 30,
+          placeholder: '(Optional predefined name)'
         }]
       ]],
-      ' ',
-      ['select', {
-        class: 'predefinedNames',
-        $on: {
-          /**
-           * @this {HTMLSelectElement}
-           */
-          change () {
-            /** @type {HTMLInputElement} */
-            ($e(
-              /** @type {HTMLLabelElement} */ (
-                this.previousElementSibling
-              ),
-              '.name'
-            )).value = this.value;
-          }
-        }
+      ['datalist', {
+        id: `domExceptionNames-${domExceptionNameId}`,
+        class: 'predefinedNames'
       }, [
-        ['option', {value: ''}, [
-          '(Choose an optional predefined name)'
-        ]],
-        ...[
-          'IndexSizeError',
-          'HierarchyRequestError',
-          'WrongDocumentError',
-          'InvalidCharacterError',
-          'NoModificationAllowedError',
-          'NotFoundError',
-          'NotSupportedError',
-          'InvalidStateError',
-          'InUseAttributeError',
-          'SyntaxError',
-          'InvalidModificationError',
-          'NamespaceError',
-          'InvalidAccessError',
-          'TypeMismatchError',
-          'SecurityError',
-          'NetworkError',
-          'AbortError',
-          'URLMismatchError',
-          'QuotaExceededError',
-          'TimeoutError',
-          'InvalidNodeTypeError',
-          'DataCloneError',
-          'EncodingError',
-          'NotReadableError',
-          'UnknownError',
-          'ConstraintError',
-          'DataError',
-          'TransactionInactiveError',
-          'ReadOnlyErrorVersionError',
-          'OperationError',
-          'NotAllowedError'
-        ].map((name) => {
-          return ['option', [name]];
-        })
-      ]],
+        'IndexSizeError',
+        'HierarchyRequestError',
+        'WrongDocumentError',
+        'InvalidCharacterError',
+        'NoModificationAllowedError',
+        'NotFoundError',
+        'NotSupportedError',
+        'InvalidStateError',
+        'InUseAttributeError',
+        'SyntaxError',
+        'InvalidModificationError',
+        'NamespaceError',
+        'InvalidAccessError',
+        'TypeMismatchError',
+        'SecurityError',
+        'NetworkError',
+        'AbortError',
+        'URLMismatchError',
+        'QuotaExceededError',
+        'TimeoutError',
+        'InvalidNodeTypeError',
+        'DataCloneError',
+        'EncodingError',
+        'NotReadableError',
+        'UnknownError',
+        'ConstraintError',
+        'DataError',
+        'TransactionInactiveError',
+        'ReadOnlyErrorVersionError',
+        'OperationError',
+        'NotAllowedError'
+      ].map((name) => {
+        return ['option', [name]];
+      })],
       ['br'],
       ['label', [
         'Message: ',
         ['input', {
           class: 'message',
-          name: `${typeNamespace}-domexception-message`, value
+          name: `${typeNamespace}-domexception-message`,
+          value: value?.message ?? ''
         }]
       ]]
     ])];

package/src/fundamentalTypes/enumType.js

@@ -0,0 +1,52 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const enumType = {
+  option: ['Enum'],
+  stringRegex: /^Enum\((.*)\)$/u,
+  valueMatch (x) {
+    return typeof x === 'string';
+  },
+  toValue (s) {
+    return {value: s.slice(1, -1)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
+  },
+  setValue ({root, value}) {
+    this.getInput({root}).value = value;
+  },
+  getValue ({root}) {
+    return this.getInput({root}).value;
+  },
+  viewUI ({value, specificSchemaObject}) {
+    return ['span', {
+      dataset: {type: 'enum'},
+      title: specificSchemaObject?.description ?? '(an enum)'
+    }, [
+      value
+    ]];
+  },
+  editUI ({typeNamespace, specificSchemaObject, value = ''}) {
+    return ['div', {
+      dataset: {type: 'enum'},
+      title: specificSchemaObject?.description ?? 'Enum'
+    }, [
+      ['select', {
+        name: `${typeNamespace}-enum`
+      }, /** @type {import('zodex').SzEnum} */ (
+        specificSchemaObject
+      )?.values.map((val) => {
+        return ['option', {
+          selected: value
+            ? value === val
+            : specificSchemaObject?.defaultValue === val
+        }, [val]];
+      })]
+    ]];
+  }
+};
+
+export default enumType;

package/src/fundamentalTypes/errorType.js

@@ -1,6 +1,6 @@
 import {error as errorTypesonRegistry} from 'typeson-registry';
 import {$e} from '../utils/templateUtils.js';
-import {jml} from '../vendor-imports.js';
+import {jml, toStringTag, hasConstructorOf} from '../vendor-imports.js';
 
 /**
  * @type {import('../types.js').TypeObject}
@@ -8,6 +8,11 @@ import {jml} from '../vendor-imports.js';
 const errorType = {
   option: ['Error'],
   stringRegex: /^Error\((.*)\)$/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'Error' &&
+      // Exclude special errors to let it be handled elsewhere
+      hasConstructorOf(x, Error);
+  },
   toValue (s) {
     const obj = JSON.parse(s);
     const errObj = /** @type {{revive: import('typeson-registry').Reviver}} */ (
@@ -169,11 +174,16 @@ const errorType = {
     return errObj;
   },
   viewUI (
-    {value: o, types, format}
+    {value: o, specificSchemaObject, types, format}
   ) {
     return /** @type {import('jamilih').JamilihArray} */ ([
       'div', {dataset: {type: 'error'}}, [
-        ['b', {class: 'emphasis'}, ['Error']],
+        ['b', {
+          class: 'emphasis',
+          title: specificSchemaObject?.description ? '(an Error)' : undefined
+        }, [
+          specificSchemaObject?.description ?? 'Error'
+        ]],
         typeof o.message === 'string'
           ? ['div', [['b', ['Message: ']], ['span', [o.message]]]]
           : [],
@@ -217,7 +227,7 @@ const errorType = {
       ]
     ]);
   },
-  editUI ({typeNamespace, types, value = {
+  editUI ({typeNamespace, types, specificSchemaObject, value = {
     message: '',
     name: '',
     fileName: '',
@@ -252,9 +262,12 @@ const errorType = {
       });
     }
 
-    const div = /** @type {HTMLDivElement} */ (jml(
+    const div = jml(
       'div',
-      {dataset: {type: 'error'}},
+      {
+        dataset: {type: 'error'},
+        title: specificSchemaObject?.description ?? 'Error'
+      },
       /** @type {import('jamilih').JamilihChildren} */ ([
         ['div', [
           ['label', [
@@ -410,7 +423,7 @@ const errorType = {
           ['div', {class: 'causeContents'}]
         ]]
       ])
-    ));
+    );
 
     return [div];
   }