@es-joy/jsoe 0.31.0 → 0.32.0

package/src/search/fundamentalTypes/promiseSearchType.js

@@ -1,6 +1,9 @@
-import {buildPathLabel} from '../searchUtils.js';
+import {buildPathLabel, extractLeafOfKind} from '../searchUtils.js';
 import {makePassThroughLeaf} from '../queryTreeBuilders.js';
-import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {
+  findSearchElement, getQueryViaElement, hasGetQuery,
+  applyQueryViaElement, hasApplyQuery
+} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
 
 /**
@@ -48,6 +51,19 @@ const promiseSearchType = {
           return childQuery === undefined
             ? undefined
             : makePassThroughLeaf(searchPath, childQuery);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const {matched} = extractLeafOfKind(queryNode, 'passThrough');
+          const searchPath = this.dataset.searchPath ?? '';
+          const childEl = findSearchElement(this, searchPath);
+          if (childEl && hasApplyQuery(childEl)) {
+            childEl.applyQuery(matched?.query);
+          }
         }
       }
     }, [
@@ -55,7 +71,8 @@ const promiseSearchType = {
       childArr
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default promiseSearchType;

package/src/search/fundamentalTypes/regexpSearchType.js

@@ -1,9 +1,9 @@
 import {
-  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery,
-  buildMultiSelect, readMultiSelect, findOwnControl
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery,
+  buildMultiSelect, readMultiSelect, applyMultiSelect, findOwnControl, extractLeafOfKind
 } from '../searchUtils.js';
 import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -43,6 +43,25 @@ const regexpSearchType = {
             ? makeMultiSelectLeaf(searchPath, {$in: selectedFlags})
             : undefined;
           return combineAnd([sourceLeaf, flagsLeaf]);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const {matched: flagsLeaf, rest: sourceLeaf} = extractLeafOfKind(queryNode, 'multiSelect');
+          // Sets Mode/Value first (dispatching the `change` that also
+          // toggles the Flags multi-select's own `hidden` state via this
+          // widget's `onModeChange`), then Flags.
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (sourceLeaf)
+          );
+          applyMultiSelect(this, flagsLeaf?.$in ?? []);
         }
       }
     }, [
@@ -66,7 +85,8 @@ const regexpSearchType = {
       ]]
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default regexpSearchType;

package/src/search/fundamentalTypes/setSearchType.js

@@ -1,10 +1,13 @@
 import {
-  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
-  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
-  buildAtLeastOneSentinel, syncAtLeastOneCheck
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery, applyLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset, applyOptIn,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck, extractLeafOfKind
 } from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
-import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {
+  findSearchElement, getQueryViaElement, hasGetQuery,
+  applyQueryViaElement, hasApplyQuery
+} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
 
 /**
@@ -69,6 +72,22 @@ const setSearchType = {
             ? elementEl.getQuery()
             : undefined;
           return combineAnd([lengthLeaf, elementLeaf]);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const searchPath = this.dataset.searchPath ?? '';
+          const {matched: lengthLeaf, rest} = extractLeafOfKind(queryNode, 'lengthSize');
+          applyLengthSizeQuery(this, lengthLeaf);
+          applyOptIn(this, rest !== undefined, '');
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          if (elementEl && hasApplyQuery(elementEl)) {
+            elementEl.applyQuery(rest);
+          }
+          syncSetValidity(this);
         }
       }
     }, [
@@ -85,7 +104,8 @@ const setSearchType = {
       buildAtLeastOneSentinel()
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default setSearchType;

package/src/search/fundamentalTypes/stringSearchType.js

@@ -1,5 +1,7 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery
+} from '../searchUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -31,6 +33,25 @@ const stringSearchType = {
         /** @this {HTMLElement} */
         getQuery () {
           return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        },
+        /**
+         * `getQuery` returns a bare leaf here (no other facet to combine it
+         * with via `$and`), so `queryNode` normally already is one -
+         * unwrapping a trivial one-element `$and` too just tolerates a
+         * hand-edited raw query that wraps it anyway.
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const leaf = queryNode && '$and' in queryNode ? queryNode.$and[0] : queryNode;
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (leaf)
+          );
         }
       }
     }, [
@@ -38,7 +59,8 @@ const stringSearchType = {
       buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default stringSearchType;

package/src/search/fundamentalTypes/symbolSearchType.js

@@ -1,5 +1,7 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery
+} from '../searchUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -26,6 +28,21 @@ const symbolSearchType = {
         /** @this {HTMLElement} */
         getQuery () {
           return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const leaf = queryNode && '$and' in queryNode ? queryNode.$and[0] : queryNode;
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (leaf)
+          );
         }
       }
     }, [
@@ -33,7 +50,8 @@ const symbolSearchType = {
       buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default symbolSearchType;

package/src/search/index.js

@@ -5,6 +5,7 @@ import {getSearchTypeObject, buildSearchWidget, resolveIntersection} from './sea
  * @typedef {{
  *   container: HTMLFormElement,
  *   $getQuery: () => import('./queryTree.js').QueryAnd,
+ *   $applyQuery: (queryDoc: import('./queryTree.js').QueryAnd) => void,
  *   whenReady: Promise<void>
  * }} SearchChoicesControl
  */
@@ -91,6 +92,27 @@ export function buildSearchChoices ({schemaContent, typeNamespace, topRoot, type
       });
       return {$and: result === undefined ? [] : [result]};
     },
+    /**
+     * The "Edit raw" round-trip's entry point - the inverse of `$getQuery`,
+     * unwrapping its own `{$and: [...]}` convention back to a bare
+     * `QueryNode` (or `undefined` for an empty `$and`, "no constraint")
+     * before handing off to the root schema's own `applyQuery`, which
+     * recurses through the whole tree exactly as `getQuery` does.
+     * @param {import('./queryTree.js').QueryAnd} queryDoc
+     * @returns {void}
+     */
+    $applyQuery (queryDoc) {
+      const {$and: clauses} = queryDoc;
+      let queryNode;
+      if (clauses.length === 1) {
+        [queryNode] = clauses;
+      } else if (clauses.length > 1) {
+        queryNode = {$and: clauses};
+      }
+      getSearchTypeObject(schemaObject).applyQuery({
+        root: container, path, queryNode
+      });
+    },
     whenReady: Promise.resolve()
   };
 }

package/src/search/searchDispatch.js

@@ -41,9 +41,12 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
  */
 
 /**
- * The search-side analogue of `TypeObject` (`src/types.js:308-408`): two
- * methods, `buildUI` (a `jml` array) and `getQuery` (reads the built DOM
- * back into a `QueryNode`, or `undefined` when no constraint was entered).
+ * The search-side analogue of `TypeObject` (`src/types.js:308-408`): three
+ * methods, `buildUI` (a `jml` array), `getQuery` (reads the built DOM back
+ * into a `QueryNode`, or `undefined` when no constraint was entered), and
+ * `applyQuery` (the inverse - drives the built DOM back into the state a
+ * previously-read, or hand-edited, `QueryNode` describes, for the "Edit raw"
+ * round-trip, `SearchChoicesControl.$applyQuery`, `src/search/index.js`).
  * @typedef {{
  *   buildUI: (cfg: {
  *     schemaObject: import('../formats/schema.js').ZodexSchema,
@@ -56,7 +59,12 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
  *   getQuery: (cfg: {
  *     root: HTMLElement,
  *     path: string
- *   }) => QueryNode|undefined
+ *   }) => QueryNode|undefined,
+ *   applyQuery: (cfg: {
+ *     root: HTMLElement,
+ *     path: string,
+ *     queryNode: QueryNode|undefined
+ *   }) => void
  * }} SearchTypeObject
  */
 
@@ -71,7 +79,8 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
 function stubSearchType (searchSchemaType) {
   return {
     buildUI: () => ['span', [`TODO: ${searchSchemaType}`]],
-    getQuery: () => undefined
+    getQuery: () => undefined,
+    applyQuery () {}
   };
 }
 

package/src/search/searchElementUtils.js

@@ -1,10 +1,12 @@
 import {
   buildPathLabel, buildCheckbox, readCheckbox,
-  buildLiteralRegexControls, readLiteralRegexQuery,
-  buildRangeInputsPair, readRangeInputsPair, syncRangeValidity,
-  buildTriStateSelect, readTriStateSelect,
-  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
-  buildAtLeastOneSentinel, syncAtLeastOneCheck
+  buildLiteralRegexControls, readLiteralRegexQuery, applyOptInLiteralRegexFacet,
+  buildRangeInputsPair, readRangeInputsPair, syncRangeValidity, applyOptInRangeFacet,
+  applyRangeQuery,
+  buildTriStateSelect, readTriStateSelect, applyTriState,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset, applyOptIn,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck,
+  extractLeafOfKind
 } from './searchUtils.js';
 import {combineAnd, makeRangeLeaf, makeDomShapeLeaf} from './queryTreeBuilders.js';
 import regexpType from '../fundamentalTypes/regexpType.js';
@@ -27,7 +29,8 @@ export function findSearchElement (root, path) {
 
 /**
  * @typedef {HTMLElement & {
- *   getQuery: () => import('./queryTree.js').QueryNode|undefined
+ *   getQuery: () => import('./queryTree.js').QueryNode|undefined,
+ *   applyQuery?: (queryNode: import('./queryTree.js').QueryNode|undefined) => void
  * }} SearchElement
  */
 
@@ -45,6 +48,24 @@ export function getQueryViaElement ({root, path}) {
   return el?.getQuery();
 }
 
+/**
+ * The `SearchTypeObject.applyQuery` every module implements identically -
+ * the "Edit raw" round-trip's counterpart to `getQueryViaElement`: locate
+ * the element built under `root` and delegate to its own `applyQuery(...)`
+ * method.
+ * @param {{
+ *   root: HTMLElement, path: string,
+ *   queryNode: import('./queryTree.js').QueryNode|undefined
+ * }} cfg
+ * @returns {void}
+ */
+export function applyQueryViaElement ({root, path, queryNode}) {
+  const el = /** @type {SearchElement|undefined} */ (
+    findSearchElement(root, path)
+  );
+  el?.applyQuery?.(queryNode);
+}
+
 /**
  * Type-predicate guard distinguishing a built search element (leaf or
  * container, either answers to `.getQuery()`) from a plain DOM node - used
@@ -60,6 +81,20 @@ export function hasGetQuery (el) {
     'function';
 }
 
+/**
+ * Same as `hasGetQuery`, for `applyQuery` - a container walking its own
+ * children to recurse an "Edit raw" apply into each needs to know which
+ * ones answer to it, same reasoning as `hasGetQuery`'s own doc.
+ * @param {Element} el
+ * @returns {el is SearchElement & {applyQuery: (
+ *   queryNode: import('./queryTree.js').QueryNode|undefined
+ * ) => void}}
+ */
+export function hasApplyQuery (el) {
+  return typeof (/** @type {{applyQuery?: unknown}} */ (el)).applyQuery ===
+    'function';
+}
+
 /**
  * Factory for the README's "no variants to allow for distinct search"
  * leaves (`undefined`/`void`, `null`, `NaN`): the only meaningful question
@@ -89,7 +124,10 @@ export function makePresenceOnlySearchType ({tagName}) {
             return checked
               ? {kind: 'presence', path: this.dataset.searchPath ?? '', $exists: true}
               : undefined;
-          }
+          },
+          // The checkbox is permanently checked and `disabled` - nothing
+          // for a raw query to change here either way.
+          applyQuery () {}
         }
       }, [
         ['span', {class: 'searchLabel'}, [label]],
@@ -98,7 +136,8 @@ export function makePresenceOnlySearchType ({tagName}) {
         })
       ]];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }
 
@@ -211,11 +250,27 @@ export function makeErrorFamilySearchType ({tagName}) {
               });
             });
             return combineAnd([...stringLeaves, ...numberLeaves]);
+          },
+          /**
+           * @this {HTMLElement}
+           * @param {import('./queryTree.js').QueryNode|undefined} queryNode
+           * @returns {void}
+           */
+          applyQuery (queryNode) {
+            const searchPath = this.dataset.searchPath ?? '';
+            errorStringProps.forEach((prop) => {
+              applyOptInLiteralRegexFacet(this, queryNode, `${searchPath}/${prop}`, prop);
+            });
+            errorNumberProps.forEach((prop) => {
+              applyOptInRangeFacet(this, queryNode, `${searchPath}/${prop}`, prop);
+            });
+            syncErrorFamilyValidity(this);
           }
         }
       }, buildErrorFamilyChildren({label, name})];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }
 
@@ -362,12 +417,45 @@ export function makeDomShapeSearchType ({
                 ? {}
                 : {dimensionCheck: dimensionCheck ? 3 : 2})
             });
+          },
+          /**
+           * @this {HTMLElement}
+           * @param {import('./queryTree.js').QueryNode|undefined} queryNode
+           * @returns {void}
+           */
+          applyQuery (queryNode) {
+            // A `domShape` leaf embeds each dimension's own `range` leaf
+            // directly (`dimensions`), not via `$and` - so, unlike
+            // `makeErrorFamilySearchType`'s flat properties,
+            // `extractClauseForPath` (which `applyOptInRangeFacet` uses)
+            // isn't needed here: read the whole leaf once and apply each
+            // dimension straight from it.
+            const {matched} = extractLeafOfKind(queryNode, 'domShape');
+            dimensionKeys.forEach((dim) => {
+              const dimLeaf = matched?.dimensions[dim];
+              applyOptIn(this, dimLeaf !== undefined, dim);
+              applyRangeQuery(this, dimLeaf, dim);
+            });
+            if (includeReadonly) {
+              applyTriState(this, matched?.readonlyCheck, 'readonly');
+            }
+            if (includeDimensionCheck) {
+              applyTriState(
+                this,
+                matched?.dimensionCheck === undefined
+                  ? undefined
+                  : matched.dimensionCheck === 3,
+                'dimension'
+              );
+            }
+            syncDomShapeValidity({root: this, dimensionKeys, includeReadonly, includeDimensionCheck});
           }
         }
       }, buildDomShapeChildren({
         label, name, dimensionKeys, includeReadonly, includeDimensionCheck
       })];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }