@es-joy/jsoe 0.24.2 → 0.25.0

package/src/fundamentalTypes/stringType.js

@@ -1,55 +1,8 @@
-import {datetimeRegex} from 'zod';
+import {regexes, z} from 'zod';
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
-// Adapted from Zod: https://github.com/colinhacks/zod/blob/9257ab78eec366c04331a3c2d59deb344a02d9f6/src/types.ts
-const ipv4Regex =
-  /^(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)$/u;
-const ipv6Regex =
-  /^(([a-f\d]{1,4}:){7}|::([a-f\d]{1,4}:){0,6}|([a-f\d]{1,4}:):([a-f\d]{1,4}:){0,5}|([a-f\d]{1,4}:){2}:([a-f\d]{1,4}:){0,4}|([a-f\d]{1,4}:){3}:([a-f\d]{1,4}:){0,3}|([a-f\d]{1,4}:){4}:([a-f\d]{1,4}:){0,2}|([a-f\d]{1,4}:){5}:([a-f\d]{1,4}:)?)([a-f\d]{1,4}|(((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{1,2}))\.){3}((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{1,2})))$/u;
-// https://stackoverflow.com/questions/7860392/determine-if-string-is-in-base64-using-javascript
-const base64Regex =
-  /^([\da-zA-Z+/]{4})*(([\da-zA-Z+/]{2}==)|([\da-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 = /^[\da-z]+$/u;
-const ulidRegex = /^[\dA-HJKMNP-TV-Z]{26}$/iu;
-const uuidRegex =
-  /^[\da-f]{8}\b-[\da-f]{4}\b-[\da-f]{4}\b-[\da-f]{4}\b-[\da-f]{12}$/iu;
-const nanoidRegex = /^[a-z\d_-]{21}$/iu;
-const durationRegex =
-  // eslint-disable-next-line sonarjs/no-empty-after-reluctant -- Ok
-  /^[-+]?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');
-}
+const cidrv6Schema = z.cidrv6();
 
 /**
  * @type {import('../types.js').TypeObject}
@@ -65,7 +18,7 @@ const stringType = {
   },
   getInput ({root}) {
     return /** @type {HTMLTextAreaElement} */ (
-      $e(root, '[data-type="string"] > textarea,input')
+      $e(root, '[data-type="string"] > textarea,input,select')
     );
   },
   setValue ({root, value}) {
@@ -75,27 +28,31 @@ const stringType = {
     return this.getInput({root}).value;
   },
   viewUI ({value, specificSchemaObject}) {
-    const kind = /** @type {import('zodex').SzString} */ (
-      specificSchemaObject
-    // @ts-expect-error Does exist
-    )?.kind;
+    const kind = specificSchemaObject && 'kind' in specificSchemaObject &&
+      specificSchemaObject.kind;
+    // `z.stringbool()` serializes as a string -> boolean `pipe` carrying
+    //   `truthy`/`falsy` token arrays; jsoe edits its encoded (string) side.
+    const isStringbool = specificSchemaObject &&
+      'truthy' in specificSchemaObject && 'falsy' in specificSchemaObject;
     return ['span', {
       dataset: {type: 'string'},
-      title: specificSchemaObject?.description ??
-        (kind === 'email'
-          ? `(an ${kind} string)`
-          : kind
-            ? `(a ${kind} string)` // url, date
-            : '(a string)')
+      title: schemaLabel(specificSchemaObject) ??
+        (isStringbool
+          ? '(a string boolean)'
+          : kind === 'email'
+            ? `(an ${kind} string)`
+            : kind
+              ? `(a ${kind} string)` // url, date
+              : '(a string)')
     }, [value]];
   },
-  editUI ({typeNamespace, specificSchemaObject, value}) {
-    const stringSchemaObject = /** @type {import('zodex').SzString} */ (
-      specificSchemaObject
+  editUI ({typeNamespace, specificSchemaObject, types, value}) {
+    const stringSchemaObject = /** @type {import('zodexy').SzString} */ (
+      specificSchemaObject ?? {type: 'string'}
     );
-    // @ts-expect-error Does exist
-    const kind = stringSchemaObject?.kind;
-    const isLiteral = specificSchemaObject?.type === 'literal';
+    const kind = 'kind' in stringSchemaObject ? stringSchemaObject.kind : null;
+    const isConstrained = specificSchemaObject?.type === 'literal' ||
+      specificSchemaObject?.type === 'enum';
     const minlength = stringSchemaObject?.min ?? stringSchemaObject?.length;
     const maxlength = stringSchemaObject?.max ?? stringSchemaObject?.length;
 
@@ -106,20 +63,48 @@ const stringType = {
     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;
+    const includes = 'includes' in stringSchemaObject &&
+      stringSchemaObject.includes;
+    const position = 'position' in stringSchemaObject
+      ? stringSchemaObject.position
+      : undefined;
 
-    // @ts-expect-error It is indeed potentially present
-    const regex = stringSchemaObject?.regex;
-    // @ts-expect-error It is indeed potentially present
-    const flags = stringSchemaObject?.flags;
+    const regex = 'regex' in stringSchemaObject &&
+      stringSchemaObject.regex;
+    const pattern = kind === 'email' && 'pattern' in stringSchemaObject
+      ? stringSchemaObject.pattern
+      : undefined;
+    const flags = 'flags' in stringSchemaObject
+      ? stringSchemaObject.flags
+      : undefined;
+
+    // A `z.stringbool()` codec serializes as a string -> boolean `pipe` that
+    //   carries `truthy`/`falsy` token arrays (and an optional `case`). jsoe
+    //   edits the encoded (string) side, so it is handled here as a String
+    //   whose value must be one of those recognized tokens.
+    const stringbool = /** @type {{truthy?: string[], falsy?: string[], case?: string}} */ (
+      stringSchemaObject
+    );
+    const stringboolTokens = Array.isArray(stringbool.truthy) &&
+        Array.isArray(stringbool.falsy)
+      ? [...stringbool.truthy, ...stringbool.falsy]
+      : null;
 
     /**
      * @param {string} value
      */
     const checkValue = (value) => {
+      if (stringboolTokens) {
+        const sensitive = stringbool.case === 'sensitive';
+        const compare = sensitive ? value : value.toLowerCase();
+        const matched = stringboolTokens.some((token) => {
+          return (sensitive ? token : token.toLowerCase()) === compare;
+        });
+        if (!matched) {
+          return `Value is not a recognized string boolean; expected one ` +
+            `of: ${stringboolTokens.join(', ')}`;
+        }
+      }
       if (startsWith && !value.startsWith(startsWith)) {
         return `Value doesn't start with expected: ${startsWith}`;
       }
@@ -136,74 +121,136 @@ const stringType = {
           flags ? ` with flags: ${flags}` : ''
         }`;
       }
+      if (pattern && !(new RegExp(pattern, flags ?? '')).test(value)) {
+        return `Value doesn't match email pattern: ${pattern}${
+          flags ? ` with flags: ${flags}` : ''
+        }`;
+      }
       if (kind) {
         switch (kind) {
+        case 'credit_card':
+          if (!regexes.creditCard.test(value)) {
+            return `Value doesn't match credit card pattern.`;
+          }
+          break;
         case 'ip':
-          // @ts-expect-error Is present
-          switch (stringSchemaObject?.version) {
+          switch ('version' in stringSchemaObject &&
+              stringSchemaObject.version) {
           case 'v4':
-            if (!ipv4Regex.test(value)) {
+            if (!regexes.ipv4.test(value)) {
               return `Value doesn't match IP v4 pattern.`;
             }
             break;
           default:
-            if (!ipv6Regex.test(value)) {
+            if (!regexes.ipv6.test(value)) {
               return `Value doesn't match IP v6 pattern.`;
             }
           }
           break;
         case 'time':
           // @ts-expect-error It is present
-          if (!timeRegex(stringSchemaObject).test(value)) {
+          if (!regexes.time(stringSchemaObject).test(value)) {
             return `Value does not match time/precision.`;
           }
           break;
         case 'datetime':
           // @ts-expect-error It is present
-          if (!datetimeRegex(stringSchemaObject).test(value)) {
+          if (!regexes.datetime(stringSchemaObject).test(value)) {
             return `Value does not match datetime/precision/offset/local`;
           }
           break;
         case 'emoji':
-          if (!emojiRegex.test(value)) {
+          if (!regexes.emoji().test(value)) {
             return `Value does not match emoji pattern`;
           }
           break;
         case 'uuid':
-          if (!uuidRegex.test(value)) {
+          if (!regexes.uuid(
+            'version' in stringSchemaObject && stringSchemaObject.version
+              ? Number(stringSchemaObject.version.slice(1))
+              : undefined
+          ).test(value)) {
             return `Value does not match uuid pattern`;
           }
           break;
+        case 'jwt':
+          if (!z.jwt(
+            'algorithm' in stringSchemaObject
+              ? {alg: stringSchemaObject.algorithm}
+              : undefined
+          ).safeParse(value).success) {
+            return `Value does not match jwt pattern`;
+          }
+          break;
+        case 'e164':
+        case 'xid':
+        case 'guid':
+        case 'ksuid':
+          if (!regexes[kind].test(value)) {
+            return `Value does not match ${kind} pattern`;
+          }
+          break;
         case 'nanoid':
-          if (!nanoidRegex.test(value)) {
+          if ('length' in stringSchemaObject && stringSchemaObject.length) {
+            if (value.length !== stringSchemaObject.length) {
+              return `Nanoid value is not of the expected length: ${
+                stringSchemaObject.length
+              }`;
+            }
+
+            if (!regexes.nanoidOfLength(15).test(value)) {
+              return `Value does not match nanoid pattern`;
+            }
+            break;
+          }
+          if (!regexes.nanoid.test(value)) {
             return `Value does not match nanoid pattern`;
           }
           break;
         case 'cuid':
-          if (!cuidRegex.test(value)) {
+          if (!regexes.cuid.test(value)) {
             return `Value does not match cuid pattern`;
           }
           break;
         case 'cuid2':
-          if (!cuid2Regex.test(value)) {
+          if (!regexes.cuid2.test(value)) {
             return `Value does not match cuid2 pattern`;
           }
           break;
         case 'ulid':
-          if (!ulidRegex.test(value)) {
+          if (!regexes.ulid.test(value)) {
             return `Value does not match ulid pattern`;
           }
           break;
         case 'duration':
-          if (!durationRegex.test(value)) {
+          if (!regexes.duration.test(value)) {
             return `Value does not match duration pattern`;
           }
           break;
         case 'base64':
-          if (!base64Regex.test(value)) {
+          if (!regexes.base64.test(value)) {
             return `Value does not match base64 pattern`;
           }
           break;
+        case 'base64url':
+          if (!regexes.base64url.test(value)) {
+            return `Value does not match base64url pattern`;
+          }
+          break;
+        case 'cidr':
+          switch ('version' in stringSchemaObject &&
+            stringSchemaObject.version) {
+          case 'v4':
+            if (!regexes.cidrv4.test(value)) {
+              return `Value doesn't match IP v4 cidr pattern.`;
+            }
+            break;
+          default:
+            if (!cidrv6Schema.safeParse(value).success) {
+              return `Value doesn't match IP v6 cidr pattern.`;
+            }
+          }
+          break;
         default:
           // 'email'|'url'|'date' should already be handled by the input element
           break;
@@ -230,9 +277,9 @@ const stringType = {
 
     return ['div', {
       dataset: {type: 'string'},
-      title: specificSchemaObject?.description ?? 'String'
+      title: schemaLabel(specificSchemaObject) ?? 'String'
     }, [
-      [
+      kind && [
         // There is a `time` and `datetime-local` but they don't
         //    support milliseconds
         'email', 'url', 'date'
@@ -243,7 +290,11 @@ const stringType = {
               const that = /** @type {HTMLInputElement} */ (this);
               that.value = transform(that.value);
               const message = checkValue(that.value);
-              that.setCustomValidity(message ?? '');
+              that.setCustomValidity(types.getValidationMessage({
+                message,
+                schema: specificSchemaObject,
+                typeSpecific: true
+              }) ?? '');
               that.reportValidity();
             }
           },
@@ -255,24 +306,39 @@ const stringType = {
           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 ?? '')
-        ]]
+        : isConstrained
+          ? ['select', {
+            name: `${typeNamespace}-string`
+          }, Object.values(specificSchemaObject.values).filter((
+            /** @type {string} */ val
+          ) => {
+            return typeof val === 'string';
+          }).map((
+            /** @type {string} */ val
+          ) => {
+            return ['option', {
+              selected: val === (value ?? specificSchemaObject.defaultValue)
+            }, [val]];
+          })]
+          : ['textarea', {
+            $on: {
+              change () {
+                const that = /** @type {HTMLTextAreaElement} */ (this);
+                that.value = transform(that.value);
+                const message = checkValue(that.value);
+                that.setCustomValidity(types.getValidationMessage({
+                  message,
+                  schema: specificSchemaObject,
+                  typeSpecific: true
+                }) ?? '');
+                that.reportValidity();
+              }
+            },
+            name: `${typeNamespace}-string`,
+            minlength, maxlength
+          }, [
+            (value ?? specificSchemaObject?.defaultValue ?? '')
+          ]]
     ]];
   }
 };

package/src/fundamentalTypes/symbolType.js

@@ -1,4 +1,5 @@
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 /**
  * @type {import('../types.js').TypeObject & {ct: number}}
@@ -49,7 +50,7 @@ const symbolType = {
   viewUI ({value, specificSchemaObject}) {
     return ['span', {
       dataset: {type: 'symbol'},
-      title: specificSchemaObject?.description ?? '(a Symbol)'
+      title: schemaLabel(specificSchemaObject) ?? '(a Symbol)'
     }, [
       Symbol.keyFor(value) === undefined ? '' : ['b', ['Global: ']],
       String(value).slice(7, -1)
@@ -59,7 +60,7 @@ const symbolType = {
     this.ct++;
     return ['div', {
       dataset: {type: 'symbol'},
-      title: specificSchemaObject?.description ?? '(a Symbol)'
+      title: schemaLabel(specificSchemaObject) ?? '(a Symbol)'
     }, [
       ['label', [
         'Symbol()',

package/src/fundamentalTypes/undefinedType.js

@@ -1,4 +1,5 @@
 import {$e} from '../utils/templateUtils.js';
+import {schemaLabel} from '../utils/schemaMeta.js';
 
 /**
  * @type {import('../types.js').TypeObject}
@@ -20,7 +21,7 @@ const undefinedType = {
   viewUI ({specificSchemaObject}) {
     return ['i', {
       dataset: {type: 'undef'},
-      title: specificSchemaObject?.description ?? '(an `undefined`)'
+      title: schemaLabel(specificSchemaObject) ?? '(an `undefined`)'
     }, ['undefined']];
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
@@ -30,7 +31,7 @@ const undefinedType = {
   editUI ({typeNamespace, specificSchemaObject}) {
     return ['div', {
       dataset: {type: 'undef'},
-      title: specificSchemaObject?.description ?? 'Undefined'
+      title: schemaLabel(specificSchemaObject) ?? 'Undefined'
     }, [
       ['label', [
         'Undefined',

package/src/index.js

@@ -1,13 +1,14 @@
+/* eslint-disable unicorn/no-barrel-files -- Has own typedefs */
 /**
  * @typedef {import('./formatAndTypeChoices.js').TypeRootGetter} TypeRootGetter
  */
 /**
  * @typedef {(cfg: {
-*   type: string,
-*   baseValue?: import('./formats.js').StructuredCloneValue,
-*   bringIntoFocus?: boolean
-* }) => void} SetType
-*/
+ *   type: string,
+ *   baseValue?: import('./formats.js').StructuredCloneValue,
+ *   bringIntoFocus?: boolean
+ * }) => void} SetType
+ */
 
 export {default as Types} from './types.js';
 

package/src/jsoe.css

@@ -2,6 +2,110 @@ input:invalid {
   background-color: pink;
 }
 
+.schema-meta {
+  display: inline-block;
+  margin-inline-start: 0.25em;
+}
+.schema-meta-toggle {
+  border: 0;
+  padding: 0;
+  background: none;
+  cursor: help;
+  font-size: 0.85em;
+  line-height: 1;
+  color: #555;
+}
+.schema-meta-toggle::before {
+  content: "\24D8"; /* ⓘ */
+}
+.schema-meta-table {
+  border-collapse: collapse;
+  margin-block-start: 0.25em;
+  font-size: 0.85em;
+}
+.schema-meta-table th,
+.schema-meta-table td {
+  border: 1px solid #ccc;
+  padding: 1px 4px;
+  text-align: start;
+  vertical-align: top;
+}
+.schema-meta-table th {
+  font-weight: bold;
+  white-space: nowrap;
+}
+/* Deprecation. `.schema-deprecated` lands on the type root, whose element and
+   internal label placement vary too much for a reliable CSS strike-through, so
+   the consistent signal is on the always-present metadata toggle: a muted-red
+   glyph with a "deprecated" tag. Where the root itself is an inline label
+   element, also strike it. */
+.schema-deprecated > .schema-meta .schema-meta-toggle {
+  color: #b00020;
+}
+.schema-deprecated > .schema-meta .schema-meta-toggle::after {
+  content: " deprecated";
+  font-size: 0.85em;
+  font-style: italic;
+}
+/* Struck through where the class lands on an element that is itself a label:
+   an inline type root (viewUI leaf) or a property/item `<legend>` (editUI). */
+span.schema-deprecated,
+b.schema-deprecated,
+i.schema-deprecated,
+legend.schema-deprecated {
+  text-decoration: line-through;
+}
+.schema-deprecated > .schema-meta {
+  text-decoration: none;
+}
+
+/* `xor` (exclusive union) type choices: a "choose exactly one" radio list */
+fieldset.xorTypeChoices {
+  display: inline-block;
+  margin: 0;
+  margin-top: .5em;
+  margin-bottom: .5em;
+  padding: 0.3em 0.6em 0.4em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  vertical-align: top;
+}
+
+fieldset.xorTypeChoices > legend.xorTypeChoicesLegend {
+  padding: 0 0.3em;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: white;
+  background-color: gray;
+}
+
+fieldset.xorTypeChoices label.xorTypeChoice {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4em;
+  padding: 0.15em 0;
+  cursor: pointer;
+}
+
+fieldset.xorTypeChoices label.xorTypeChoice > input {
+  flex: none;
+}
+
+/* Live "N of M branches match" indicator; `xor` needs exactly one */
+fieldset.xorTypeChoices .xorMatchStatus {
+  margin-top: 0.3em;
+  font-size: 0.85em;
+}
+
+fieldset.xorTypeChoices .xorMatchStatus.xorMatchOk {
+  color: #2e7d32;
+}
+
+fieldset.xorTypeChoices .xorMatchStatus.xorMatchErr {
+  color: #c62828;
+}
+
 b.emphasis {
   text-decoration: underline;
 }
@@ -43,7 +147,7 @@ video.recordedMedia {
   background-color: 1px solid pink !important;
 }
 
-[data-type="undef"], [data-type="void"] {
+[data-type="undef"] {
   background-color: green;
 }
 [data-type="null"] {
@@ -76,10 +180,6 @@ video.recordedMedia {
   background-color: orange;
 }
 
-[data-type="literal"] {
-  background-color: lightblue;
-}
-
 [data-type="symbol"] {
   background-color: lightgreen;
 }
@@ -139,11 +239,10 @@ video.recordedMedia {
 
 [data-type="map"], [data-type="set"],
 [data-type="bigint"], [data-type="bigintObject"],
-[data-type="never"], [data-type="domexception"],
+[data-type="domexception"],
 [data-type="resurrectable"], /* i.e., `noneditable` */
 [data-type="domrect"], [data-type="dompoint"],
-[data-type="dommatrix"],
-[data-type="catch"], [data-type="enum"], [data-type="nativeEnum"] {
+[data-type="dommatrix"] {
   background-color: lightgray;
 }