@es-joy/jsoe 0.16.0 → 0.17.0

package/src/fundamentalTypes/regexpType.js

@@ -1,4 +1,4 @@
-import {jml} from '../vendor-imports.js';
+import {jml, toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 
 /**
@@ -14,6 +14,9 @@ const regexpType = {
       this.allowedFlags.length
     }})$`, 'u');
   },
+  valueMatch (x) {
+    return toStringTag(x) === 'RegExp';
+  },
   toValue (s) {
     /* istanbul ignore if */
     if (typeof this.stringRegex !== 'function') {
@@ -61,48 +64,63 @@ const regexpType = {
     );
   },
   allowedFlags: ['g', 'i', 'm', 'u', 'y', 's', 'v'],
-  viewUI ({value}) {
-    return ['i', {dataset: {type: 'regexp'}}, [String(value)]];
+  viewUI ({value, specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'regexp'},
+      title: specificSchemaObject?.description ?? '(a `RegExp`)'
+    }, [
+      String(value)
+    ]];
   },
-  editUI ({typeNamespace, types, value = {source: '', flags: ''}}) {
+  editUI ({
+    typeNamespace, specificSchemaObject, types, value = {source: '', flags: ''}
+  }) {
     // Todo (low): Add RegExp syntax highlighter
-    const select = /** @type {HTMLSelectElement} */ (jml(
-      'select',
-      {multiple: true, size: 5, $custom: {
+    const select = jml('select', {
+      multiple: true, size: 5, $custom: {
         /**
+         * @callback $Set
          * @param {string[]} valArr
          * @returns {void}
          */
+
+        /** @type {$Set} */
         $set (valArr) { // A useful reusable method for multiple selects
-          [...(/** @type {HTMLSelectElement} */ (
-            this
-          )).options].forEach((opt) => {
+          [...(
+            /**
+             * @type {HTMLSelectElement & {
+             *   $set: $Set
+             * }}
+             */ (
+              this
+            )
+          ).options].forEach((opt) => {
             opt.selected = valArr.includes(opt.value);
           });
         }
-      }},
-      this.allowedFlags.map((flag) => {
-        return ['option', {
-          selected: value.flags.includes(flag)
-        }, [flag]];
-      })
-    ));
-    const root = /** @type {HTMLDivElement} */ (
-      jml('div', {dataset: {type: 'regexp'}}, [
-        ['label', [
-          'Source ',
-          ['input', {
-            name: `${typeNamespace}-regexp`, type: 'text',
-            value: value.source
-          }]
-        ]],
-        ['br'],
-        ['label', [
-          'Flags ',
-          select
-        ]]
-      ])
-    );
+      }
+    }, this.allowedFlags.map((flag) => {
+      return ['option', {
+        selected: value.flags.includes(flag)
+      }, [flag]];
+    }));
+    const root = jml('div', {
+      dataset: {type: 'regexp'},
+      title: specificSchemaObject?.description ?? 'RegExp'
+    }, [
+      ['label', [
+        'Source ',
+        ['input', {
+          name: `${typeNamespace}-regexp`, type: 'text',
+          value: value.source
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'Flags ',
+        select
+      ]]
+    ]);
     // Could be disallowed flags; we might instead try in
     //   advance which will work
     select.addEventListener('change', () => {

package/src/fundamentalTypes/setType.js

@@ -1,3 +1,4 @@
+import {toStringTag} from '../vendor-imports.js';
 import arrayType from './arrayType.js';
 
 /**
@@ -10,6 +11,9 @@ const setType = {
   regexEndings: [',', ')'],
   stringRegexBegin: /^Set\(/u,
   stringRegexEnd: /^\)/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'Set';
+  },
   toValue (...args) {
     return /** @type {import('../types.js').ToValue} */ (
       arrayType.toValue

package/src/fundamentalTypes/sparseUndefinedType.js

@@ -14,6 +14,9 @@ const sparseUndefinedType = {
       ]
     }
   },
+  valueMatch (x) {
+    return x === undefined;
+  },
   toValue (/* _s */) {
     return {value: undefined};
   },

package/src/fundamentalTypes/stringType.js

@@ -1,16 +1,71 @@
+import {datetimeRegex} from 'zod';
 import {$e} from '../utils/templateUtils.js';
 
+// Adapted from Zod: https://github.com/colinhacks/zod/blob/9257ab78eec366c04331a3c2d59deb344a02d9f6/src/types.ts
+const ipv4Regex =
+  /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/u;
+const ipv6Regex =
+  /^(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))$/u;
+// https://stackoverflow.com/questions/7860392/determine-if-string-is-in-base64-using-javascript
+const base64Regex =
+  /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/u;
+// from https://thekevinscott.com/emojis-in-javascript/#writing-a-regular-expression
+const emojiRegexStr = `^(\\p{Extended_Pictographic}|\\p{Emoji_Component})+$`;
+const emojiRegex = new RegExp(emojiRegexStr, 'u');
+const cuidRegex = /^c[^\s-]{8,}$/iu;
+const cuid2Regex = /^[0-9a-z]+$/u;
+const ulidRegex = /^[0-9A-HJKMNP-TV-Z]{26}$/iu;
+const uuidRegex =
+  /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/iu;
+const nanoidRegex = /^[a-z0-9_-]{21}$/iu;
+const durationRegex =
+  /^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/u;
+// End adapted from Zod
+
+/**
+ * @param {{precision?: number|null}} args
+ * @returns {string}
+ */
+function timeRegexSource (args) {
+  // let regex = `\\d{2}:\\d{2}:\\d{2}`;
+  let regex = `([01]\\d|2[0-3]):[0-5]\\d:[0-5]\\d`;
+
+  if (args.precision) {
+    regex = `${regex}\\.\\d{${args.precision}}`;
+  } else if (args.precision === null || args.precision === undefined) {
+    regex = `${regex}(\\.\\d+)?`;
+  }
+  return regex;
+}
+
+/**
+ * @param {{
+ *   offset?: boolean;
+ *   local?: boolean;
+ *   precision?: number|null;
+ * }} args
+ * @returns {RegExp}
+ */
+function timeRegex (args) {
+  return new RegExp(`^${timeRegexSource(args)}$`, 'u');
+}
+
 /**
  * @type {import('../types.js').TypeObject}
  */
 const stringType = {
   option: ['String'],
   stringRegex: /^"(?:[^\\"]|\\\\|\\")*"$/u,
+  valueMatch (x) {
+    return typeof x === 'string';
+  },
   toValue (s) {
     return {value: s.slice(1, -1)};
   },
   getInput ({root}) {
-    return /** @type {HTMLTextAreaElement} */ ($e(root, 'textarea'));
+    return /** @type {HTMLTextAreaElement} */ (
+      $e(root, '[data-type="string"] > textarea,input')
+    );
   },
   setValue ({root, value}) {
     this.getInput({root}).value = value;
@@ -18,12 +73,205 @@ const stringType = {
   getValue ({root}) {
     return this.getInput({root}).value;
   },
-  viewUI ({value}) {
-    return ['span', {dataset: {type: 'string'}}, [value]];
+  viewUI ({value, specificSchemaObject}) {
+    const kind = /** @type {import('zodex').SzString} */ (
+      specificSchemaObject
+    // @ts-expect-error Does exist
+    )?.kind;
+    return ['span', {
+      dataset: {type: 'string'},
+      title: specificSchemaObject?.description ??
+        (kind === 'email'
+          ? `(an ${kind} string)`
+          : kind
+            ? `(a ${kind} string)` // url, date
+            : '(a string)')
+    }, [value]];
   },
-  editUI ({typeNamespace, value = ''}) {
-    return ['div', {dataset: {type: 'string'}}, [
-      ['textarea', {name: `${typeNamespace}-string`}, [value]]
+  editUI ({typeNamespace, specificSchemaObject, value}) {
+    const stringSchemaObject = /** @type {import('zodex').SzString} */ (
+      specificSchemaObject
+    );
+    // @ts-expect-error Does exist
+    const kind = stringSchemaObject?.kind;
+    const isLiteral = specificSchemaObject?.type === 'literal';
+    const minlength = stringSchemaObject?.min ?? stringSchemaObject?.length;
+    const maxlength = stringSchemaObject?.max ?? stringSchemaObject?.length;
+
+    const startsWith = stringSchemaObject?.startsWith;
+    const endsWith = stringSchemaObject?.endsWith;
+
+    const toLowerCase = stringSchemaObject?.toLowerCase;
+    const toUpperCase = stringSchemaObject?.toUpperCase;
+    const trim = stringSchemaObject?.trim;
+
+    // @ts-expect-error It is indeed potentially present
+    const includes = stringSchemaObject?.includes;
+    // @ts-expect-error It is indeed potentially present
+    const position = stringSchemaObject?.position;
+
+    // @ts-expect-error It is indeed potentially present
+    const regex = stringSchemaObject?.regex;
+    // @ts-expect-error It is indeed potentially present
+    const flags = stringSchemaObject?.flags;
+
+    /**
+     * @param {string} value
+     */
+    const checkValue = (value) => {
+      if (startsWith && !value.startsWith(startsWith)) {
+        return `Value doesn't start with expected: ${startsWith}`;
+      }
+      if (endsWith && !value.endsWith(endsWith)) {
+        return `Value doesn't end with expected: ${endsWith}`;
+      }
+      if (includes && !value.includes(includes, position ?? 0)) {
+        return `Value doesn't include the expected: ${includes}${
+          position ? ` after position: ${position}` : ''
+        }`;
+      }
+      if (regex && !(new RegExp(regex, flags ?? '')).test(value)) {
+        return `Value doesn't match regular expression: ${regex}${
+          flags ? ` with flags: ${flags}` : ''
+        }`;
+      }
+      if (kind) {
+        switch (kind) {
+        case 'ip':
+          // @ts-expect-error Is present
+          switch (stringSchemaObject?.version) {
+          case 'v4':
+            if (!ipv4Regex.test(value)) {
+              return `Value doesn't match IP v4 pattern.`;
+            }
+            break;
+          default:
+            if (!ipv6Regex.test(value)) {
+              return `Value doesn't match IP v6 pattern.`;
+            }
+          }
+          break;
+        case 'time':
+          // @ts-expect-error It is present
+          if (!timeRegex(stringSchemaObject).test(value)) {
+            return `Value does not match time/precision.`;
+          }
+          break;
+        case 'datetime':
+          // @ts-expect-error It is present
+          if (!datetimeRegex(stringSchemaObject).test(value)) {
+            return `Value does not match datetime/precision/offset/local`;
+          }
+          break;
+        case 'emoji':
+          if (!emojiRegex.test(value)) {
+            return `Value does not match emoji pattern`;
+          }
+          break;
+        case 'uuid':
+          if (!uuidRegex.test(value)) {
+            return `Value does not match uuid pattern`;
+          }
+          break;
+        case 'nanoid':
+          if (!nanoidRegex.test(value)) {
+            return `Value does not match nanoid pattern`;
+          }
+          break;
+        case 'cuid':
+          if (!cuidRegex.test(value)) {
+            return `Value does not match cuid pattern`;
+          }
+          break;
+        case 'cuid2':
+          if (!cuid2Regex.test(value)) {
+            return `Value does not match cuid2 pattern`;
+          }
+          break;
+        case 'ulid':
+          if (!ulidRegex.test(value)) {
+            return `Value does not match ulid pattern`;
+          }
+          break;
+        case 'duration':
+          if (!durationRegex.test(value)) {
+            return `Value does not match duration pattern`;
+          }
+          break;
+        case 'base64':
+          if (!base64Regex.test(value)) {
+            return `Value does not match base64 pattern`;
+          }
+          break;
+        default:
+          // 'email'|'url'|'date' should already be handled by the input element
+          break;
+        }
+      }
+      return null;
+    };
+
+    /**
+     * @param {string} value
+     */
+    const transform = (value) => {
+      if (toLowerCase) {
+        value = value.toLowerCase();
+      }
+      if (toUpperCase) {
+        value = value.toUpperCase();
+      }
+      if (trim) {
+        value = value.trim();
+      }
+      return value;
+    };
+
+    return ['div', {
+      dataset: {type: 'string'},
+      title: specificSchemaObject?.description ?? 'String'
+    }, [
+      [
+        // There is a `time` and `datetime-local` but they don't
+        //    support milliseconds
+        'email', 'url', 'date'
+      ].includes(kind)
+        ? ['input', {
+          $on: {
+            change () {
+              const that = /** @type {HTMLInputElement} */ (this);
+              that.value = transform(that.value);
+              const message = checkValue(that.value);
+              that.setCustomValidity(message ?? '');
+              that.reportValidity();
+            }
+          },
+          name: `${typeNamespace}-string`,
+          type: kind,
+          value: value ?? specificSchemaObject?.defaultValue ?? '',
+
+          // Form doesn't support for date
+          minlength: kind === 'date' ? undefined : minlength,
+          maxlength: kind === 'date' ? undefined : maxlength
+        }]
+        : ['textarea', {
+          $on: {
+            change () {
+              const that = /** @type {HTMLTextAreaElement} */ (this);
+              that.value = transform(that.value);
+              const message = checkValue(that.value);
+              that.setCustomValidity(message ?? '');
+              that.reportValidity();
+            }
+          },
+          name: `${typeNamespace}-string`,
+          disabled: isLiteral,
+          minlength, maxlength
+        }, [
+          isLiteral
+            ? specificSchemaObject?.value
+            : (value ?? specificSchemaObject?.defaultValue ?? '')
+        ]]
     ]];
   }
 };

package/src/fundamentalTypes/symbolType.js

@@ -0,0 +1,81 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject & {ct: number}}
+ */
+const symbolType = {
+  option: ['Symbol'],
+  stringRegex: /^(?<symbolClassType>Symbol|Symbol.for)\("(?<innerContent>[^\\"]|\\\\|\\")*"\)$/u,
+  ct: 0,
+  valueMatch (x) {
+    return typeof x === 'symbol';
+  },
+  toValue (s, rootInfo) {
+    const {groups: {
+      symbolClassType
+    /* istanbul ignore next -- Should always be found */
+    } = {}} = /** @type {RegExpMatchArray} */ (
+      /** @type {import('../types.js').RootInfo} */ (rootInfo).match
+    );
+    const symbolClass = symbolClassType === 'Symbol'
+      ? Symbol
+      : Symbol.for.bind(Symbol);
+
+    return {value: symbolClass(s)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input.symbolInput'));
+  },
+  setValue ({root, value}) {
+    if (Symbol.keyFor(value)) {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input[value="Symbol.for"]')
+      ).checked = true;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input[value="Symbol"]')
+      ).checked = true;
+    }
+    this.getInput({root}).value = String(value).slice(7, -1);
+  },
+  getValue ({root}) {
+    const method = /** @type {HTMLInputElement} */ (
+      $e(root, 'input[value="Symbol"]')
+    ).checked
+      ? Symbol
+      : Symbol.for.bind(Symbol);
+    return method(this.getInput({root}).value);
+  },
+  viewUI ({value, specificSchemaObject}) {
+    return ['span', {
+      dataset: {type: 'symbol'},
+      title: specificSchemaObject?.description ?? '(a Symbol)'
+    }, [value]];
+  },
+  editUI ({typeNamespace, value = ''}) {
+    return ['div', {dataset: {type: 'symbol'}}, [
+      ['label', [
+        'Symbol()',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-symbol${this.ct}`,
+          value: 'Symbol', checked: !value || !Symbol.keyFor(value)
+        }]
+      ]],
+      ['label', [
+        'Symbol.for()',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-symbol${this.ct}`,
+          value: 'Symbol.for', checked: value && Boolean(Symbol.keyFor(value))
+        }]
+      ]],
+      ['br'],
+      ['input', {
+        className: 'symbolInput',
+        name: `${typeNamespace}-string`,
+        value: String(value).slice(7, -1)
+      }]
+    ]];
+  }
+};
+
+export default symbolType;

package/src/fundamentalTypes/tupleType.js

@@ -0,0 +1,39 @@
+import arrayType from './arrayType.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const tupleType = {
+  option: ['Tuple'],
+  array: true,
+  regexEndings: [',', ']'],
+  stringRegexBegin: /^Tuple\[/u,
+  stringRegexEnd: /^\]/u,
+  tuple: true,
+  valueMatch (x) {
+    return Array.isArray(x);
+  },
+  toValue (...args) {
+    return /** @type {import('../types.js').ToValue} */ (
+      arrayType.toValue
+    ).apply(this, args);
+  },
+  getValue (...args) {
+    return arrayType.getValue.apply(this, args);
+  },
+  getInput (...args) {
+    return arrayType.getInput.apply(this, args);
+  },
+  viewUI ({...args}) {
+    return arrayType.viewUI.call(this, {
+      ...args, type: 'tuple'
+    });
+  },
+  editUI ({...args}) {
+    return arrayType.editUI.call(this, {
+      ...args, type: 'tuple'
+    });
+  }
+};
+
+export default tupleType;

package/src/fundamentalTypes/undefinedType.js

@@ -6,6 +6,9 @@ import {$e} from '../utils/templateUtils.js';
 const undefinedType = {
   stringRegex: /^undefined$/u,
   option: ['Explicit undefined'], // Explicit undefined only
+  valueMatch (x) {
+    return x === undefined;
+  },
   toValue (/* _s */) {
     return {value: undefined};
   },
@@ -14,20 +17,27 @@ const undefinedType = {
       this.toValue
     )('').value;
   },
-  viewUI (/* {value} */) {
-    return ['i', {dataset: {type: 'undef'}}, ['undefined']];
+  viewUI ({specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'undef'},
+      title: specificSchemaObject?.description ?? '(an `undefined`)'
+    }, ['undefined']];
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
     return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
-  editUI ({typeNamespace}) {
-    return ['div', {dataset: {type: 'undef'}}, [
+  editUI ({typeNamespace, specificSchemaObject}) {
+    return ['div', {
+      dataset: {type: 'undef'},
+      title: specificSchemaObject?.description ?? 'Undefined'
+    }, [
       ['label', [
         'Undefined',
         ['input', {
           type: 'checkbox',
           name: `${typeNamespace}-undef`,
+          disabled: true,
           checked: true
         }]
       ]]

package/src/fundamentalTypes/voidType.js

@@ -0,0 +1,48 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const voidType = {
+  stringRegex: /^void$/u,
+  option: ['Void'],
+  valueMatch (x) {
+    return x === undefined;
+  },
+  toValue (/* _s */) {
+    return {value: undefined};
+  },
+  getValue () {
+    return /** @type {import('../types.js').ToValue} */ (
+      this.toValue
+    )('').value;
+  },
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  viewUI ({specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'void'},
+      title: specificSchemaObject?.description ?? '(a `void`)'
+    }, ['void']];
+  },
+  editUI ({typeNamespace, specificSchemaObject}) {
+    return ['div', {
+      dataset: {type: 'void'},
+      title: specificSchemaObject?.description ?? 'Void'
+    }, [
+      ['label', [
+        'Void',
+        ['input', {
+          type: 'checkbox',
+          name: `${typeNamespace}-void`,
+          checked: true,
+          disabled: true
+        }]
+      ]]
+    ]];
+  }
+};
+
+export default voidType;