@es-joy/jsoe 0.26.1 → 0.28.0

package/src/typeChoices.js

@@ -66,17 +66,44 @@ import deepEqual from 'fast-deep-equal/es6/index.js';
  */
 
 /**
- * @typedef {HTMLSelectElement & {
+ * The `$`-methods every type-choices control exposes, whether it's a real
+ *   `<select>` (`TypeChoicesElementAPI`) or the `xor` radio group's
+ *   `<fieldset>` standing in for one (`TypeChoicesControl` — see its comment
+ *   for why that one is *not* typed as `HTMLSelectElement`).
+ * @typedef {{
  *   $addAndValidateEditUI: AddAndValidateEditUI,
+ *   $addTypeAndEditUI: AddTypeAndEditUI,
  *   $setStyles: SetStyles,
  *   $getTypeRoot: GetTypeRoot,
  *   $getContainer: () => HTMLElement,
  *   $getTopRoot: () => HTMLDivElement,
  *   $addEditUI: AddEditUI,
  *   $validate: Validate,
+ *   $setType: SetType,
  *   $setTypeNoEditUI: SetTypeNoEditUI,
+ *   $getValue: GetValue,
  *   $whenReady: WhenReady
- * }} TypeChoicesElementAPI
+ * }} TypeChoicesAPIMethods
+ */
+
+/**
+ * @typedef {HTMLSelectElement & TypeChoicesAPIMethods} TypeChoicesElementAPI
+ */
+
+/**
+ * The type-choices control surface downstream code actually relies on:
+ *   the `$`-methods, plus the `value`/`selectedIndex`/`selectedOptions`
+ *   surface a real `<select>` provides natively. Deliberately *not* typed as
+ *   `HTMLSelectElement`, because `buildXorTypeChoices` below returns a real
+ *   `<fieldset>` with that surface shimmed on via `Object.defineProperties`
+ *   (and the `$`-methods copied by reference from the parallel `<select>`)
+ *   rather than an actual `<select>` — asserting `HTMLSelectElement` there
+ *   would be a false claim, not just a loose one.
+ * @typedef {HTMLElement & TypeChoicesAPIMethods & {
+ *   value: string,
+ *   selectedIndex: number,
+ *   selectedOptions: ArrayLike<{value: string, dataset?: {idx?: string}}>
+ * }} TypeChoicesControl
  */
 
 /**
@@ -126,7 +153,7 @@ import deepEqual from 'fast-deep-equal/es6/index.js';
  *   schemaContent?: import('./formatAndTypeChoices.js').ZodexSchema,
  * }} cfg
  * @returns {{
- *   domArray: [select: HTMLElement, typeContainer: HTMLElement],
+ *   domArray: [select: TypeChoicesControl, typeContainer: HTMLElement],
  *   getValue: GetValue,
  *   getType: GetType,
  *   validValuesSet: ValidValuesSet,
@@ -166,7 +193,9 @@ function deriveXorBranchLabel (schemaObj, optText, idx) {
       return String(values[0]);
     }
   }
-  if (schemaObj && schemaObj.type === 'object') {
+  if (schemaObj &&
+    (schemaObj.type === 'object' || schemaObj.type === 'properties')
+  ) {
     const {properties} = /** @type {import('zodexy').SzObject} */ (schemaObj);
     const keys = properties && typeof properties === 'object'
       ? Object.keys(properties)
@@ -198,9 +227,9 @@ function deriveXorBranchLabel (schemaObj, optText, idx) {
  *   types: InstanceType<typeof import('./types.js').default>,
  *   typeContainer: HTMLElement,
  *   xorSchema: import('zodexy').SzUnion|undefined,
- *   selectEl: HTMLSelectElement
+ *   selectEl: TypeChoicesElementAPI
  * }} cfg
- * @returns {HTMLSelectElement}
+ * @returns {TypeChoicesControl}
  */
 function buildXorTypeChoices ({
   typeNamespace, keySelectClass, typeOptions, schemaObjs, types,
@@ -357,7 +386,9 @@ function buildXorTypeChoices ({
     }
   });
 
-  return /** @type {HTMLSelectElement} */ (/** @type {unknown} */ (fieldset));
+  return /** @type {TypeChoicesControl} */ (
+    /** @type {unknown} */ (fieldset)
+  );
 }
 
 /**
@@ -435,7 +466,7 @@ export const buildTypeChoices = ({
   //   match indicator to value changes inside it
   const typeContainer = jml('div', {class: 'typeContainer'});
 
-  const selectEl = /** @type {HTMLSelectElement} */ (jml('select', {
+  const selectEl = /** @type {TypeChoicesElementAPI} */ (jml('select', {
     hidden: requireObject || typeOptions.length === 1,
     class: `typeChoices-${typeNamespace}${keySelectClass
       ? ' ' + keySelectClass

package/src/types.js

@@ -438,17 +438,28 @@ class Types {
   /**
    * @param {{
    *   useZodexyErrorMessages?: boolean,
-   *   useZodexyErrorMessagesInTypes?: boolean
+   *   useZodexyErrorMessagesInTypes?: boolean,
+   *   allowUnsafeEval?: boolean,
+   *   showRawTypesonControls?: boolean
    * }} [cfg]
    */
   constructor ({
     useZodexyErrorMessages = false,
-    useZodexyErrorMessagesInTypes = false
+    useZodexyErrorMessagesInTypes = false,
+    allowUnsafeEval = false,
+    showRawTypesonControls = true
   } = {}) {
     this.formats = new Formats(); // Todo: Make customizable and test
 
     this.useZodexyErrorMessages = useZodexyErrorMessages;
     this.useZodexyErrorMessagesInTypes = useZodexyErrorMessagesInTypes;
+    // Gates the eval-mode sub-feature of the raw Typeson edit/view buttons
+    //   (`src/utils/rawTypesonEditor.js`); disabled by default since eval'ing
+    //   arbitrary user-supplied text is inherently unsafe.
+    this.allowUnsafeEval = allowUnsafeEval;
+    // Master on/off switch for the raw Typeson edit/view buttons themselves;
+    //   when `false` neither button is rendered anywhere in the tree.
+    this.showRawTypesonControls = showRawTypesonControls;
     /** @type {WeakMap<RootElement, import('./formats/schema.js').ZodexSchema>} */
     this.schemasForRoots = new WeakMap();
 
@@ -721,6 +732,13 @@ class Types {
     // `record`/`tuple` are not shown as their own pull-down entries; they render
     //   as `Object`/`Array` (their schema, incl. child descriptions, informs the
     //   layout — see `arrayType.js`).
+    // `z.properties()` likewise renders through the `object` type/UI; when the
+    //   schema supplies no label of its own, name it "Properties" so it is not
+    //   shown as an indistinguishable "Object".
+    if (type === 'object' && schemaContent?.type === 'properties') {
+      optInfo[0] = 'Properties';
+    }
+
     const schemaContentLabel = resolveSchemaMeta(schemaContent).label;
     if (schemaContentLabel) {
       optInfo[0] = `${optInfo[0]} (${schemaContentLabel})`;