@es-joy/jsoe 0.29.0 → 0.31.0

package/src/search/subTypes/blobHTMLSearchType.js

@@ -1,18 +1,142 @@
-import {buildPathLabel, findOwnControl} from '../searchUtils.js';
+import {
+  buildPathLabel, findOwnControl, isExemptedByAncestorHasProperty
+} from '../searchUtils.js';
 import {makeBlobHTMLLeaf} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * Live syntax-checks a blobHTML Value against its currently-chosen Mode -
+ * a CSS selector and an XPath expression are each tried against a detached,
+ * inert target (a fragment for the selector, the live `document` itself,
+ * required by `Element.prototype.evaluate`'s own contract, for the XPath -
+ * neither actually has to *match* anything, only parse without throwing),
+ * and a regex is tried via the same `new RegExp(value, flags)` constructor
+ * `readLiteralRegexQuery` relies on elsewhere - a "Full text search" value
+ * is a plain phrase with no format to violate, so it always passes.
+ * @param {string} mode
+ * @param {string} value
+ * @param {string} flags
+ * @returns {string}
+ */
+function computeBlobHTMLValueMessage (mode, value, flags) {
+  if (!value) {
+    return '';
+  }
+  try {
+    switch (mode) {
+    case 'cssSelector':
+      document.createDocumentFragment().querySelector(value);
+      break;
+    case 'xpath':
+      document.evaluate(value, document, null, XPathResult.ANY_TYPE, null);
+      break;
+    case 'rawHTMLRegex':
+      // eslint-disable-next-line no-new -- Testing
+      new RegExp(value, flags);
+      break;
+    default:
+      break;
+    }
+    return '';
+  } catch {
+    switch (mode) {
+    case 'cssSelector':
+      return 'Enter a valid CSS selector.';
+    case 'xpath':
+      return 'Enter a valid XPath expression.';
+    case 'rawHTMLRegex':
+      return 'Enter a valid regular expression.';
+    default:
+      return '';
+    }
+  }
+}
+
+/**
+ * Re-runs `computeBlobHTMLValueMessage` against whichever of the input/
+ * textarea pair the current Mode makes active, clearing the other one's
+ * custom validity (a hidden-but-still-`required` control would otherwise
+ * keep blocking the form, the same reasoning `buildUI`'s own doc gives for
+ * toggling `required` alongside `hidden`) - call on every `input` on either
+ * value control, `change` on the Mode `<select>`, and `change` on the Flags
+ * multi-select (changing flags can itself flip a regex between valid and
+ * invalid, e.g. the `u`/`v` flags' stricter escape rules).
+ * @param {Element|null} container
+ * @returns {void}
+ */
+function syncBlobHTMLValueValidity (container) {
+  if (!container) {
+    return;
+  }
+  const mode = /** @type {HTMLSelectElement|undefined} */ (
+    findOwnControl(container, 'select.jsoeSearchBlobHTMLMode')
+  )?.value ?? '';
+  const input = /** @type {HTMLInputElement|undefined} */ (
+    findOwnControl(container, 'input.jsoeSearchBlobHTMLValue')
+  );
+  const textarea = /** @type {HTMLTextAreaElement|undefined} */ (
+    findOwnControl(container, 'textarea.jsoeSearchBlobHTMLValue')
+  );
+  const flagsSelect = /** @type {HTMLSelectElement|undefined} */ (
+    findOwnControl(container, 'select.jsoeSearchBlobHTMLFlags')
+  );
+  const flags = mode === 'rawHTMLRegex'
+    ? [...(flagsSelect?.selectedOptions ?? [])].map((opt) => opt.value).join('')
+    : '';
+  const active = mode === 'fullText' ? textarea : input;
+  if (input && input !== active) {
+    input.setCustomValidity('');
+  }
+  if (textarea && textarea !== active) {
+    textarea.setCustomValidity('');
+  }
+  if (active) {
+    active.setCustomValidity(computeBlobHTMLValueMessage(mode, active.value, flags));
+  }
+}
+
 /**
  * Blob HTML: XPath, CSS selectors, full text search, regex search of raw
- * HTML (README) - a mode `<select>` plus one text `<input>`, the same
+ * HTML (README) - a mode `<select>` plus one value control, the same
  * "pick a mode, give it one value" shape as `buildLiteralRegexControls`
  * (`searchUtils.js`), but not built through it: the four modes and the
  * `blobHTML` leaf kind they produce are specific to this one type, with no
- * second caller to share the helper with.
+ * second caller to share the helper with. The value control is a single-line
+ * `<input>` for XPath/CSS-selector/regex, but swaps to a `<textarea>` for
+ * "Full text search" mode alone, since a search phrase in a body of text is
+ * the one mode actually expected to run to more than one line - both share
+ * the same class, so the mode `<select>`'s `change` handler (and `getQuery`)
+ * only need the tag name to tell them apart. Only the currently-visible one
+ * of the pair is ever `required` (toggled alongside `hidden` by the mode
+ * `change` handler): a `required` field that's merely hidden, rather than
+ * also un-required, still blocks the form's validity even though the user
+ * has no way to see or fill it. "CSS selector" is listed ahead of "XPath"
+ * (and is the default mode) as the option most jsoe users will recognize.
+ *
+ * The `change` handler also checks `isExemptedByAncestorHasProperty` before
+ * (re-)asserting `required` on the now-visible control: nested as an
+ * optional object property's own child widget, an enclosing "Has property"
+ * already provides a complete constraint on its own (the same relief
+ * `setDescendantsRequired` gives other `required`-attribute controls), but
+ * that relief is a one-time toggle applied *before* `revalidateDescendants`
+ * re-dispatches a synthetic `change` on this very `<select>` - without this
+ * check, that synthetic event would immediately reassert `required` on
+ * whichever control the current mode makes visible, undoing the exemption
+ * `setDescendantsRequired` had just granted.
+ *
+ * "Regex search of raw HTML" gets its own Flags multi-select (the same
+ * `regexpType.js` `allowedFlags` list `stringSearchType.js`'s literal/regex
+ * control passes as `buildLiteralRegexControls`'s `flagOptions`), shown only
+ * while that mode is chosen, folded into the `blobHTML` leaf's own
+ * `$options` (mirroring `QueryRegexLeaf`'s field of the same name) - and,
+ * via `syncBlobHTMLValueValidity`, included when syntax-checking the Value
+ * itself, since the chosen flags can affect whether a given pattern is
+ * actually valid.
  * @type {SearchTypeObject}
  */
 const blobHTMLSearchType = {
@@ -29,16 +153,25 @@ const blobHTMLSearchType = {
           const mode = /** @type {HTMLSelectElement|undefined} */ (
             findOwnControl(this, 'select.jsoeSearchBlobHTMLMode')
           )?.value;
-          const value = /** @type {HTMLInputElement|undefined} */ (
-            findOwnControl(this, 'input.jsoeSearchBlobHTMLValue')
+          const value = /** @type {HTMLInputElement|HTMLTextAreaElement|undefined} */ (
+            findOwnControl(
+              this,
+              `${mode === 'fullText' ? 'textarea' : 'input'}.jsoeSearchBlobHTMLValue`
+            )
           )?.value;
           if (!value || !mode) {
             return undefined;
           }
+          const flags = mode === 'rawHTMLRegex'
+            ? [...(/** @type {HTMLSelectElement|undefined} */ (
+              findOwnControl(this, 'select.jsoeSearchBlobHTMLFlags')
+            )?.selectedOptions ?? [])].map((opt) => opt.value).join('')
+            : '';
           return makeBlobHTMLLeaf(
             searchPath,
             /** @type {import('../queryTree.js').QueryBlobHTMLLeaf['mode']} */ (mode),
-            value
+            value,
+            flags || undefined
           );
         }
       }
@@ -46,16 +179,76 @@ const blobHTMLSearchType = {
       ['span', {class: 'searchLabel'}, [label]],
       ['label', [
         'Mode: ',
-        ['select', {name: `${name}-mode`, class: 'jsoeSearchBlobHTMLMode'}, [
-          ['option', {value: 'xpath'}, ['XPath']],
+        ['select', {
+          name: `${name}-mode`,
+          class: 'jsoeSearchBlobHTMLMode',
+          $on: {
+            change () {
+              const container = this.closest('jsoe-search-blob-html');
+              const input = /** @type {HTMLInputElement|null|undefined} */ (
+                container?.querySelector('input.jsoeSearchBlobHTMLValue')
+              );
+              const textarea = /** @type {HTMLTextAreaElement|null|undefined} */ (
+                container?.querySelector('textarea.jsoeSearchBlobHTMLValue')
+              );
+              const flagsLabel = /** @type {HTMLElement|null|undefined} */ (
+                container?.querySelector('.jsoeSearchBlobHTMLFlagsLabel')
+              );
+              const mode = /** @type {HTMLSelectElement} */ (this).value;
+              const isFullText = mode === 'fullText';
+              const exempted = container !== null &&
+                isExemptedByAncestorHasProperty(container);
+              if (input) {
+                input.hidden = isFullText;
+                input.required = !isFullText && !exempted;
+              }
+              if (textarea) {
+                textarea.hidden = !isFullText;
+                textarea.required = isFullText && !exempted;
+              }
+              if (flagsLabel) {
+                flagsLabel.hidden = mode !== 'rawHTMLRegex';
+              }
+              syncBlobHTMLValueValidity(container);
+            }
+          }
+        }, [
           ['option', {value: 'cssSelector'}, ['CSS selector']],
+          ['option', {value: 'xpath'}, ['XPath']],
           ['option', {value: 'fullText'}, ['Full text search']],
           ['option', {value: 'rawHTMLRegex'}, ['Regex search of raw HTML']]
         ]]
       ]],
       ['label', [
         'Value: ',
-        ['input', {type: 'text', name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue'}]
+        ['input', {
+          type: 'text', name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue',
+          required: true,
+          $on: {
+            input () {
+              syncBlobHTMLValueValidity(this.closest('jsoe-search-blob-html'));
+            }
+          }
+        }],
+        ['textarea', {
+          name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue', hidden: true,
+          $on: {
+            input () {
+              syncBlobHTMLValueValidity(this.closest('jsoe-search-blob-html'));
+            }
+          }
+        }]
+      ]],
+      ['label', {class: 'jsoeSearchBlobHTMLFlagsLabel', hidden: true}, [
+        'Flags: ',
+        ['select', {
+          name: `${name}-flags`, multiple: true, class: 'jsoeSearchBlobHTMLFlags',
+          $on: {
+            change () {
+              syncBlobHTMLValueValidity(this.closest('jsoe-search-blob-html'));
+            }
+          }
+        }, regexpType.allowedFlags.map((flag) => ['option', {value: flag}, [flag]])]
       ]]
     ]];
   },

package/src/search/subTypes/recordSearchType.js

@@ -1,4 +1,7 @@
-import {buildPathLabel, buildCheckbox, readCheckbox} from '../searchUtils.js';
+import {
+  buildPathLabel, buildCheckbox, readCheckbox, buildOptInFieldset,
+  readOptInChecked, wireOptInFieldset, buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {makeMapRecordJointLeaf} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,6 +10,16 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-record` element
+ * @returns {void}
+ */
+function syncKeyValueValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'key') || readOptInChecked(root, 'value')
+  );
+}
+
 /**
  * Record search is "key-schema search AND/OR value-schema search,"
  * structurally unlike object's additive "has property" (search plan §1) -
@@ -15,7 +28,10 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * whether a match must come from the *same* entry ("has key 2-4 and value
  * 7-9", README) via the "joint" toggle on the resulting `mapRecordJoint`
  * leaf - also used for `looseRecord`, aliased to this same module in
- * `searchDispatch.js` since the search semantics are identical.
+ * `searchDispatch.js` since the search semantics are identical. Key and
+ * value each get their own `buildOptInFieldset` (see `mapSearchType.js`'s
+ * matching doc for why), but leaving *both* unopted-in is itself invalid via
+ * `buildAtLeastOneSentinel`.
  * @type {SearchTypeObject}
  */
 const recordSearchType = {
@@ -47,15 +63,21 @@ const recordSearchType = {
       dataset: {searchPath: path, searchKind: 'record'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'key', () => syncKeyValueValidity(this));
+          wireOptInFieldset(this, 'value', () => syncKeyValueValidity(this));
+          syncKeyValueValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const keyEl = findSearchElement(this, `${searchPath}/*key`);
           const valueEl = findSearchElement(this, `${searchPath}/*value`);
-          const keyQuery = keyEl && hasGetQuery(keyEl)
+          const keyQuery = keyEl && hasGetQuery(keyEl) && readOptInChecked(this, 'key')
             ? keyEl.getQuery()
             : undefined;
-          const valueQuery = valueEl && hasGetQuery(valueEl)
+          const valueQuery = valueEl && hasGetQuery(valueEl) && readOptInChecked(this, 'value')
             ? valueEl.getQuery()
             : undefined;
           if (!keyQuery && !valueQuery) {
@@ -67,15 +89,14 @@ const recordSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      ['div', {class: 'searchRecordKey'}, [
-        ['span', ['Key matches: ']],
-        keyArr
-      ]],
-      ['div', {class: 'searchRecordValue'}, [
-        ['span', ['Value matches: ']],
-        valueArr
-      ]],
-      buildCheckbox({name: `${name}-joint`, label: 'Require same entry'})
+      ...buildOptInFieldset({
+        name: `${name}-key`, key: 'key', label: 'Key matches', children: [keyArr]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-value`, key: 'value', label: 'Value matches', children: [valueArr]
+      }),
+      buildCheckbox({name: `${name}-joint`, label: 'Require same entry'}),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/subTypes/tupleSearchType.js

@@ -1,4 +1,8 @@
-import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,6 +11,21 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-tuple` element
+ * @returns {void}
+ */
+function syncTupleValidity (root) {
+  const itemCount = Number(/** @type {HTMLElement} */ (root).dataset.itemCount ?? '0');
+  const hasRest = /** @type {HTMLElement} */ (root).dataset.hasRest === 'true';
+  syncAtLeastOneCheck(root, () => (
+    Array.from({length: itemCount}, (_, idx) => String(idx)).some(
+      (key) => readOptInChecked(root, key)
+    ) ||
+    (hasRest && (readOptInChecked(root, 'rest') || readLengthSizeQuery(root, '') !== undefined))
+  ));
+}
+
 /**
  * Each fixed position gets its own control from `.items[i]`, not one
  * control repeated per element (search plan §1 - unlike the value-editing
@@ -19,6 +38,9 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * items.length`, no sparse toggle - not applicable to a tuple), and the
  * `rest` element itself recurses into its own search widget under the same
  * `*` path-segment convention `arraySearchType.js` uses for its element.
+ * Leaving every position, the rest element, and (when present) the length
+ * unconfigured at once is invalid (`buildAtLeastOneSentinel`), the same as
+ * `arraySearchType.js`/`setSearchType.js`/`filelistSearchType.js`.
  * @type {SearchTypeObject}
  */
 const tupleSearchType = {
@@ -54,22 +76,24 @@ const tupleSearchType = {
     /** @type {import('../../types.js').JamilihArray[]} */
     const children = [['span', {class: 'searchLabel'}, [label]]];
     itemArrs.forEach((itemArr, idx) => {
-      children.push(['div', {class: 'searchTupleItem'}, [
-        ['span', [`Position ${idx}: `]],
-        itemArr
-      ]]);
+      children.push(...buildOptInFieldset({
+        name: `${name}-${idx}`, key: String(idx), label: `Position ${idx} matches`,
+        children: [itemArr]
+      }));
     });
     if (rest) {
+      const restChild = /** @type {import('../../types.js').JamilihArray} */ (restArr);
       children.push(
         ...buildLengthSizeControls({
           name, min: items.length, max: undefined, includeSparse: false
         }),
-        ['div', {class: 'searchTupleRest'}, [
-          ['span', ['Rest element matches: ']],
-          /** @type {import('../../types.js').JamilihArray} */ (restArr)
-        ]]
+        ...buildOptInFieldset({
+          name: `${name}-rest`, key: 'rest', label: 'Rest element matches',
+          children: [restChild]
+        })
       );
     }
+    children.push(buildAtLeastOneSentinel());
 
     return ['jsoe-search-tuple', {
       dataset: {
@@ -84,11 +108,28 @@ const tupleSearchType = {
         //   defined, so a second tuple widget on the same page would
         //   otherwise silently reuse the first tuple's item count/rest-ness.
         /** @this {HTMLElement} */
+        connectedCallback () {
+          const itemCount = Number(this.dataset.itemCount ?? '0');
+          Array.from({length: itemCount}, (_, idx) => String(idx)).forEach(
+            (key) => wireOptInFieldset(this, key, () => syncTupleValidity(this))
+          );
+          if (this.dataset.hasRest === 'true') {
+            wireOptInFieldset(this, 'rest', () => syncTupleValidity(this));
+            this.querySelector('input.jsoeSearchSize')?.addEventListener(
+              'input', () => syncTupleValidity(this)
+            );
+          }
+          syncTupleValidity(this);
+        },
+        /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const itemCount = Number(this.dataset.itemCount ?? '0');
           const hasRest = this.dataset.hasRest === 'true';
           const itemLeaves = Array.from({length: itemCount}, (_, idx) => {
+            if (!readOptInChecked(this, String(idx))) {
+              return undefined;
+            }
             const itemEl = findSearchElement(this, `${searchPath}/${idx}`);
             return itemEl && hasGetQuery(itemEl) ? itemEl.getQuery() : undefined;
           });
@@ -97,7 +138,7 @@ const tupleSearchType = {
           }
           const lengthLeaf = readLengthSizeQuery(this, searchPath);
           const restEl = findSearchElement(this, `${searchPath}/*`);
-          const restLeaf = restEl && hasGetQuery(restEl)
+          const restLeaf = restEl && hasGetQuery(restEl) && readOptInChecked(this, 'rest')
             ? restEl.getQuery()
             : undefined;
           return combineAnd([...itemLeaves, lengthLeaf, restLeaf]);

package/src/search/superTypes/SpecialRealNumberSearchType.js

@@ -32,7 +32,7 @@ const SpecialRealNumberSearchType = {
     }, [
       ['span', {class: 'searchLabel'}, [label]],
       buildMultiSelect({
-        name, options: ['Infinity', '-Infinity', '-0']
+        name, options: ['Infinity', '-Infinity', '-0'], required: true
       })
     ]];
   },

package/src/search/superTypes/buffersourceSearchType.js

@@ -1,4 +1,6 @@
-import {buildPathLabel, buildRangeInputsPair, readRangeInputsPair} from '../searchUtils.js';
+import {
+  buildPathLabel, buildRangeInputsPair, readRangeInputsPair, syncRangeValidity
+} from '../searchUtils.js';
 import {makeRangeLeaf} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
@@ -24,6 +26,10 @@ const buffersourceSearchType = {
       dataset: {searchPath: path, searchKind: 'buffersource'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          syncRangeValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const {gte, lte} = readRangeInputsPair(this);

package/src/search/unions/unionFamilySearchType.js

@@ -110,6 +110,14 @@ export function makeUnionFamilySearchType ({tagName, discriminated}) {
           ['select', {
             name,
             class: 'jsoeSearchTypeOf',
+            // The "(any)" placeholder's `value: ''` below is exactly what
+            // native `required` treats as "nothing selected", so choosing
+            // any real branch already satisfies it - no custom validity
+            // code needed. A union/xor/discriminatedUnion has no other
+            // possible constraint (unlike `mapSearchType.js`'s key/value or
+            // `objectSearchType.js`'s properties), so this alone is "no
+            // absent values" for the whole widget, not just one facet of it.
+            required: true,
             $on: {
               change () {
                 if (!isSelectElement(this)) {

package/vendor/zod/classic/schemas.d.ts

@@ -788,7 +788,9 @@ export declare const describe: typeof core.describe;
 export declare const meta: typeof core.meta;
 type ZodInstanceOfParams = core.Params<ZodCustom, core.$ZodIssueCustom, "type" | "check" | "checks" | "fn" | "abort" | "error" | "params" | "path">;
 export interface ZodInstanceOf<T = unknown> extends ZodCustom<T, T> {
-    properties<Shape extends core.$ZodShape>(shape: Shape, params?: string | core.$ZodCheckPropertiesParams): ZodInstanceOf<T & core.$InferObjectInput<Shape, {}>>;
+    properties<Shape extends {
+        [k in keyof T as T[k] extends Function ? never : k]?: core.$ZodType<unknown, T[k]>;
+    }>(shape: Shape, params?: string | core.$ZodCheckPropertiesParams): ZodInstanceOf<T & core.$InferObjectInput<Shape, {}>>;
 }
 export declare const ZodInstanceOf: core.$constructor<ZodInstanceOf>;
 declare function _instanceof<T extends typeof util.Class>(cls: T, params?: ZodInstanceOfParams): ZodInstanceOf<InstanceType<T>>;

package/vendor/zod/core/versions.js

@@ -1,5 +1,5 @@
 export const version = {
     major: 4,
     minor: 6,
-    patch: 4,
+    patch: 5,
 };