@es-joy/jsoe 0.28.1 → 0.29.0

package/src/search/fundamentalTypes/arraySearchType.js

@@ -0,0 +1,66 @@
+import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Has length/size of <number>; Is/Is not sparse (README), plus - by
+ * recursing into the element schema's own search widget (search plan §6
+ * build order) - "the array contains at least one element matching Y",
+ * expressed via a `*` path segment (`queryTree.js`) so no dedicated wrapper
+ * leaf kind is needed: the two constraints simply combine with `$and`.
+ * @type {SearchTypeObject}
+ */
+const arraySearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-array`;
+    const arraySchemaObject = /** @type {import('zodexy').SzArray} */ (
+      schemaObject
+    );
+    const elementPath = `${path}/*`;
+    const elementArr = buildSearchWidget({
+      schemaObject: arraySchemaObject.element,
+      path: elementPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-array', {
+      dataset: {searchPath: path, searchKind: 'array'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const lengthLeaf = readLengthSizeQuery(this, searchPath);
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          const elementLeaf = elementEl && hasGetQuery(elementEl)
+            ? elementEl.getQuery()
+            : undefined;
+          return combineAnd([lengthLeaf, elementLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildLengthSizeControls({
+        name,
+        min: arraySchemaObject.minLength,
+        max: arraySchemaObject.maxLength,
+        includeSparse: true
+      }),
+      ['div', {class: 'searchArrayElement'}, [
+        ['span', ['Element matches: ']],
+        elementArr
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default arraySearchType;

package/src/search/fundamentalTypes/bigintSearchType.js

@@ -0,0 +1,62 @@
+import {buildPathLabel, buildRangeInputsPair, readRangeInputsPair} from '../searchUtils.js';
+import {makeRangeLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {string} str
+ * @returns {string|undefined}
+ */
+function parseBigIntBound (str) {
+  if (!str) {
+    return undefined;
+  }
+  try {
+    // Kept as a decimal string (not a runtime `BigInt`) so the tree stays
+    //   JSON-serializable, mirroring `dateSearchType.js`'s ISO-string bounds.
+    return String(BigInt(str));
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * OR Ranges/Is Not Range (README) - text inputs rather than
+ * `<input type="number">`, since a native number input silently loses
+ * precision beyond `Number.MAX_SAFE_INTEGER`.
+ * @type {SearchTypeObject}
+ */
+const bigintSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-bigint`;
+    return ['jsoe-search-bigint', {
+      dataset: {searchPath: path, searchKind: 'bigint'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const {gte: gteStr, lte: lteStr} = readRangeInputsPair(this);
+          const $gte = parseBigIntBound(gteStr);
+          const $lte = parseBigIntBound(lteStr);
+          if ($gte === undefined && $lte === undefined) {
+            return undefined;
+          }
+          return makeRangeLeaf(this.dataset.searchPath ?? '', 'bigint', {
+            ...($gte === undefined ? {} : {$gte}),
+            ...($lte === undefined ? {} : {$lte})
+          });
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildRangeInputsPair({name, type: 'text'})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default bigintSearchType;

package/src/search/fundamentalTypes/blobSearchType.js

@@ -0,0 +1,41 @@
+import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Blob: OR literal or regex search/Does Not contain search (README, grouped
+ * with string/StringObject/File/regexp-source/symbol-description) - against
+ * the Blob's `.type` (MIME string), a value-level facet the schema itself
+ * carries no constraint for (`blob` is one of jsoe's "checked" types,
+ * `{type: 'any', checks: [{name: 'blob'}]}`, with no further structural
+ * fields to read), the same way `symbolSearchType.js` targets
+ * `.description`. Matching *content* rather than the MIME type belongs to
+ * `blobHTMLSearchType.js` (XPath/CSS-selector/full-text/raw-HTML-regex,
+ * README) for the Blob-as-HTML case specifically, not this generic module.
+ * @type {SearchTypeObject}
+ */
+const blobSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-blob`;
+    return ['jsoe-search-blob', {
+      dataset: {searchPath: path, searchKind: 'blob'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [`${label} (MIME type)`]],
+      buildLiteralRegexControls({name})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default blobSearchType;

package/src/search/fundamentalTypes/booleanSearchType.js

@@ -0,0 +1,40 @@
+import {buildPathLabel, buildTriStateSelect, readTriStateSelect} from '../searchUtils.js';
+import {makeBooleanEqualsLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * True or false (README).
+ * @type {SearchTypeObject}
+ */
+const booleanSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-boolean`;
+    return ['jsoe-search-boolean', {
+      dataset: {searchPath: path, searchKind: 'boolean'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const value = readTriStateSelect(this);
+          return value === undefined
+            ? undefined
+            : makeBooleanEqualsLeaf(this.dataset.searchPath ?? '', value);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['label', [
+        `${label}: `,
+        buildTriStateSelect({name, trueLabel: 'True', falseLabel: 'False'})
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default booleanSearchType;

package/src/search/fundamentalTypes/catchSearchType.js

@@ -0,0 +1,59 @@
+import {buildPathLabel} from '../searchUtils.js';
+import {makePassThroughLeaf} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Promise, Literal, catch: pass on children (README) - same shape as
+ * `promiseSearchType.js`'s pass-through (recurse into `.innerType` at the
+ * same path, wrap in a `passThrough` leaf), except `getSchemaType`
+ * (`src/formats/schema.js`) has no case for `catch` at all - unlike
+ * `promise`/`function`, which `zodexToStructuredCloningTypeMap` already
+ * maps - so `getSearchSchemaType` adds `catch` as its own extra case purely
+ * for the search side, the same way it already does for `tuple`/`record`/
+ * the union family.
+ * @type {SearchTypeObject}
+ */
+const catchSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const catchSchemaObject = /** @type {import('zodexy').SzCatch} */ (
+      schemaObject
+    );
+    const childArr = buildSearchWidget({
+      schemaObject: catchSchemaObject.innerType,
+      path,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-catch', {
+      dataset: {searchPath: path, searchKind: 'catch'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const childEl = findSearchElement(this, searchPath);
+          const childQuery = childEl && hasGetQuery(childEl)
+            ? childEl.getQuery()
+            : undefined;
+          return childQuery === undefined
+            ? undefined
+            : makePassThroughLeaf(searchPath, childQuery);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      childArr
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default catchSearchType;

package/src/search/fundamentalTypes/dateSearchType.js

@@ -0,0 +1,73 @@
+import {buildDateInputControl} from '../../fundamentalTypes/dateType.js';
+import {buildPathLabel} from '../searchUtils.js';
+import {makeRangeLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Reads the two `datetime-local` inputs directly off the element rather
+ * than off any closed-over reference, since a custom element's mixin
+ * methods (`$define`, search plan §8) are installed once on the shared
+ * prototype the first time the tag is defined - every instance must read
+ * its own state off `this`, never off a build-time closure variable.
+ * @param {HTMLElement} el
+ * @returns {{gte: string, lte: string}}
+ */
+function readInputs (el) {
+  const [gteInput, lteInput] = /** @type {HTMLInputElement[]} */ (
+    [...el.querySelectorAll('input[type="datetime-local"]')]
+  );
+  return {gte: gteInput.value, lte: lteInput.value};
+}
+
+/**
+ * OR date range/Is Not Range (README). `dateType.js`'s own
+ * `buildDateInputControl` is reused twice (range start/end) so the min/max
+ * wiring and ISO-slicing stay in one place.
+ * @type {SearchTypeObject}
+ */
+const dateSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const dateSchemaObject = /** @type {import('zodexy').SzDate} */ (
+      schemaObject
+    );
+    return ['jsoe-search-date', {
+      dataset: {searchPath: path, searchKind: 'date'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const {gte, lte} = readInputs(this);
+          if (!gte && !lte) {
+            return undefined;
+          }
+          return makeRangeLeaf(
+            this.dataset.searchPath ?? '',
+            'date',
+            {
+              ...(gte ? {$gte: new Date(gte).toISOString()} : {}),
+              ...(lte ? {$lte: new Date(lte).toISOString()} : {})
+            }
+          );
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['label', [
+        'From: ',
+        buildDateInputControl({name: `${typeNamespace}-date-gte`, dateSchemaObject})
+      ]],
+      ['label', [
+        'To: ',
+        buildDateInputControl({name: `${typeNamespace}-date-lte`, dateSchemaObject})
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default dateSearchType;

package/src/search/fundamentalTypes/domexceptionSearchType.js

@@ -0,0 +1,55 @@
+import {domExceptionNames} from '../../fundamentalTypes/domexceptionType.js';
+import {buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * DOMException: Literal/Regex search of child string properties; also
+ * pull-down of name for DOMException (README) - `.name` gets the
+ * multi-select pull-down (its standard predefined values, imported as-is
+ * from `domexceptionType.js`'s own `domExceptionNames` export rather than a
+ * second copy of the list), `.message` gets the usual literal/regex/
+ * does-not-contain control, combined via `$and`.
+ * @type {SearchTypeObject}
+ */
+const domexceptionSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-domexception`;
+    return ['jsoe-search-domexception', {
+      dataset: {searchPath: path, searchKind: 'domexception'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const selectedNames = readMultiSelect(this);
+          const nameLeaf = selectedNames.length
+            ? makeMultiSelectLeaf(`${searchPath}/name`, {$in: selectedNames})
+            : undefined;
+          const messageLeaf = readLiteralRegexQuery(
+            this, `${searchPath}/message`, 'message'
+          );
+          return combineAnd([nameLeaf, messageLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['div', {class: 'domexceptionName'}, [
+        ['span', ['Name: ']],
+        buildMultiSelect({name: `${name}-name`, options: domExceptionNames})
+      ]],
+      ['div', {class: 'domexceptionMessage'}, [
+        ['span', ['Message: ']],
+        buildLiteralRegexControls({name: `${name}-message`, key: 'message'})
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default domexceptionSearchType;

package/src/search/fundamentalTypes/enumSearchType.js

@@ -0,0 +1,58 @@
+import {buildPathLabel, buildMultiSelect, readMultiSelect} from '../searchUtils.js';
+import {makeMultiSelectLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Enum, Native Enum: multiple select (README). The value-editing side has
+ * no dedicated `enumType.js` (`getSchemaType` resolves `enum` to whatever
+ * its underlying value type is), but search needs the actual allowed
+ * values listed, so this is one of the search-only dedicated modules
+ * (search plan §1).
+ *
+ * The README's further "native enum also can search key vs. value" is not
+ * implemented by this pass - only the plain multi-select-of-values
+ * affordance every enum gets either way. A native enum whose keys differ
+ * from its values (unlike a plain `z.enum([...])`, where they're the same)
+ * still gets a usable widget here, just not that extra key-vs-value mode
+ * yet; `values`'s keys are shown alongside their value as a hint.
+ * @type {SearchTypeObject}
+ */
+const enumSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-enum`;
+    const {values} = /** @type {import('zodexy').SzEnum} */ (
+      schemaObject
+    );
+    const options = Object.entries(values).map(([key, value]) => {
+      const strValue = String(value);
+      return /** @type {[string, string]} */ ([
+        strValue,
+        key === strValue ? strValue : `${strValue} (${key})`
+      ]);
+    });
+    return ['jsoe-search-enum', {
+      dataset: {searchPath: path, searchKind: 'enum'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const selected = readMultiSelect(this);
+          return selected.length
+            ? makeMultiSelectLeaf(this.dataset.searchPath ?? '', {$in: selected})
+            : undefined;
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      buildMultiSelect({name, options})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default enumSearchType;

package/src/search/fundamentalTypes/errorSearchType.js

@@ -0,0 +1,11 @@
+import {makeErrorFamilySearchType} from '../searchElementUtils.js';
+
+/**
+ * Error: Literal/Regex search of child string properties, numeric of
+ * number children (README) - see `searchElementUtils.js`'s
+ * `makeErrorFamilySearchType` for the shared implementation.
+ * @type {import('../searchDispatch.js').SearchTypeObject}
+ */
+const errorSearchType = makeErrorFamilySearchType({tagName: 'jsoe-search-error'});
+
+export default errorSearchType;

package/src/search/fundamentalTypes/fileSearchType.js

@@ -0,0 +1,41 @@
+import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * File: OR literal or regex search/Does Not contain search (README, grouped
+ * with string/StringObject/Blob/regexp-source/symbol-description) - against
+ * the File's `.name`, a value-level facet the schema itself carries no
+ * constraint for (`SzFile` only has `min`/`max`/`mime`), the same way
+ * `symbolSearchType.js` targets `.description` rather than anything the
+ * schema declares. `SzFile`'s own `min`/`max` (byte size) is left for a
+ * later pass - the README's literal/regex bullet doesn't ask for a size
+ * range here, and README explicitly reserves that shape of control
+ * ("OR Range/Is Not Range") for `buffersource` instead.
+ * @type {SearchTypeObject}
+ */
+const fileSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-file`;
+    return ['jsoe-search-file', {
+      dataset: {searchPath: path, searchKind: 'file'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [`${label} (name)`]],
+      buildLiteralRegexControls({name})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default fileSearchType;

package/src/search/fundamentalTypes/filelistSearchType.js

@@ -0,0 +1,78 @@
+import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @typedef {{
+ *   type: 'array',
+ *   element: import('../../formats/schema.js').ZodexSchema,
+ *   minLength?: number,
+ *   maxLength?: number
+ * }} FilelistOutputSchema
+ */
+
+/**
+ * Has length/size of <number> (README, grouped with array/set/
+ * tuple-with-rest) - no sparse toggle, matching `setSearchType.js`. A
+ * `FileList` schema serializes as `{type: 'codec', name: 'filelist',
+ * output: {type: 'array', element: {type: 'file', ...}}}`
+ * (`src/formats/schema.js`'s `codec`/`filelist` handling); the length
+ * bounds and element schema both live on that `output` array shape, whose
+ * element recurses into `fileSearchType.js` under the same `*` path-segment
+ * convention `arraySearchType.js` uses.
+ * @type {SearchTypeObject}
+ */
+const filelistSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-filelist`;
+    const outputSchema = /** @type {FilelistOutputSchema} */ (
+      /** @type {{output: unknown}} */ (schemaObject).output
+    );
+    const elementPath = `${path}/*`;
+    const elementArr = buildSearchWidget({
+      schemaObject: outputSchema.element,
+      path: elementPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-filelist', {
+      dataset: {searchPath: path, searchKind: 'filelist'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const lengthLeaf = readLengthSizeQuery(this, searchPath);
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          const elementLeaf = elementEl && hasGetQuery(elementEl)
+            ? elementEl.getQuery()
+            : undefined;
+          return combineAnd([lengthLeaf, elementLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildLengthSizeControls({
+        name,
+        min: outputSchema.minLength,
+        max: outputSchema.maxLength,
+        includeSparse: false
+      }),
+      ['div', {class: 'searchFilelistElement'}, [
+        ['span', ['File matches: ']],
+        elementArr
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default filelistSearchType;

package/src/search/fundamentalTypes/functionSearchType.js

@@ -0,0 +1,78 @@
+import {buildPathLabel} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Function; pass on args, return type (README) - recurses into both
+ * `.input` (itself a tuple, so its own per-position controls come for free
+ * via `tupleSearchType.js`) and `.output`, at `*args`/`*output` path
+ * segments (`queryTree.js`), combined via `$and`. The build order's own
+ * note that `function` is "fuzzy" in the README and could ship as a
+ * minimal stub predates `tupleSearchType.js` existing; now that it does,
+ * recursing into `.input` through it is no more work than `.output` alone
+ * would have been.
+ * @type {SearchTypeObject}
+ */
+const functionSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const functionSchemaObject = /** @type {import('zodexy').SzFunction<any, any>} */ (
+      schemaObject
+    );
+    const argsPath = `${path}/*args`;
+    const outputPath = `${path}/*output`;
+    const argsArr = buildSearchWidget({
+      schemaObject: functionSchemaObject.input,
+      path: argsPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    const outputArr = buildSearchWidget({
+      schemaObject: functionSchemaObject.output,
+      path: outputPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-function', {
+      dataset: {searchPath: path, searchKind: 'function'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const argsEl = findSearchElement(this, `${searchPath}/*args`);
+          const outputEl = findSearchElement(this, `${searchPath}/*output`);
+          const argsQuery = argsEl && hasGetQuery(argsEl)
+            ? argsEl.getQuery()
+            : undefined;
+          const outputQuery = outputEl && hasGetQuery(outputEl)
+            ? outputEl.getQuery()
+            : undefined;
+          return combineAnd([argsQuery, outputQuery]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['div', {class: 'searchFunctionArgs'}, [
+        ['span', ['Args match: ']],
+        argsArr
+      ]],
+      ['div', {class: 'searchFunctionOutput'}, [
+        ['span', ['Return value matches: ']],
+        outputArr
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default functionSearchType;