@es-joy/jsoe 0.27.0 → 0.28.0

package/src/formats/schema.js

@@ -194,13 +194,15 @@ const dezerializerCodecs = {
 };
 
 /**
+ * Exported for reuse by `src/utils/rawTypesonEditor.js`, which must enforce
+ *   the same schema conformance check before accepting a raw-edited value.
  * @param {InstanceType<typeof import('../types.js').default>} types
  * @param {ZodexSchema} schemaObject
  * @param {ZodexSchema} originalShape
  * @param {unknown} value
  * @returns {ReturnType<ReturnType<typeof dezerialize>['safeParse']>}
  */
-function parseValue (types, schemaObject, originalShape, value) {
+export function parseValue (types, schemaObject, originalShape, value) {
   return dezerialize(schemaObject, {
     checks: getChecks(types),
     codecs: dezerializerCodecs,

package/src/formats/structuredCloning.js

@@ -274,23 +274,30 @@ const encapsulateObserver = (stateObj) => {
     // console.log('but could set to', schema);
     // console.log('arrayOrObjectPropertyName', arrayOrObjectPropertyName);
 
-    if (!stateObj.rootUI) {
-      // console.log('vvvv0', newType, newValue);
-      stateObj.rootUI = types?.getUIForModeAndType({
-        readonly,
-        typeNamespace,
-        type: newType,
-        bringIntoFocus: false,
-        buildTypeChoices,
-        format,
-        specificSchemaObject: schema,
-        schemaContent,
-        value: newValue,
-        hasValue: true,
-        // Not currently in use but may be convenient for a
-        //     type wanting the serialized data
-        replaced
-      });
+    if (!parents['']) {
+      // A caller repopulating an *existing* container in place (e.g. the raw
+      //   Typeson/JSON6 editor replacing one control's children after a
+      //   bulk edit, `src/utils/rawTypesonEditor.js`) pre-seeds
+      //   `stateObj.rootUI` with that container so it is reused here instead
+      //   of a fresh one being built.
+      if (!stateObj.rootUI) {
+        // console.log('vvvv0', newType, newValue);
+        stateObj.rootUI = types?.getUIForModeAndType({
+          readonly,
+          typeNamespace,
+          type: newType,
+          bringIntoFocus: false,
+          buildTypeChoices,
+          format,
+          specificSchemaObject: schema,
+          schemaContent,
+          value: newValue,
+          hasValue: true,
+          // Not currently in use but may be convenient for a
+          //     type wanting the serialized data
+          replaced
+        });
+      }
       parents[''] = /**
                      * @type {HTMLElement &
                      *   {$addAndSetArrayElement: AddAndSetArrayElement}}

package/src/fundamentalTypes/arrayType.js

@@ -7,6 +7,7 @@ import {
   schemaLabel, lastTypeChild, deprecatedClassSuffix
 } from '../utils/schemaMeta.js';
 import dialogs from '../utils/dialogs.js';
+import {openRawEditorDialog} from '../utils/rawTypesonEditor.js';
 import {
   resolveJSONPointer, getJSONPointerParts, reduceJSONPointerParts
 } from '../utils/jsonPointer.js';
@@ -428,6 +429,13 @@ const arrayType = {
       specificSchemaObject?.type === 'looseRecord';
     const tupleMode = specificSchemaObject?.type === 'tuple';
 
+    // See `docs/proposals/raw-typeson-edit-view.md` §1 for the scope
+    //   rationale (why `filelist` is included, why record/tuple count).
+    const isRawEditable = types.showRawTypesonControls &&
+      ((type === 'object' || type === 'array' ||
+        type === 'set' || type === 'map' || type === 'filelist') ||
+        recordMode || tupleMode);
+
     /**
      * @param {{
      *   itemIndex: number,
@@ -660,6 +668,31 @@ const arrayType = {
           target
         ).textContent = arrayContents.hidden ? '+' : '-';
       }}}, ['-']],
+      ...(isRawEditable
+        ? /** @type {import('jamilih').JamilihArray[]} */ ([
+          nbsp.repeat(2),
+          ['button', {
+            class: 'viewRawTypeson',
+            $on: {click (/** @type {Event} */ e) {
+              e.preventDefault();
+              openRawEditorDialog({
+                types,
+                format: /** @type {import('../formats.js').AvailableFormat} */ (
+                  format
+                ),
+                type: /** @type {import('../types.js').AvailableArbitraryType} */ (
+                  type
+                ),
+                root: /** @type {HTMLDivElement} */ (div),
+                topRoot: /** @type {HTMLDivElement} */ (topRoot),
+                typeNamespace,
+                specificSchemaObject,
+                readonly: true
+              });
+            }}
+          }, ['View raw']]
+        ])
+        : []),
       ['div', {class: 'arrayContents'}, [
         !recordMode && this.array
           ? ['div', {
@@ -724,6 +757,13 @@ const arrayType = {
       specificSchemaObject?.type === 'looseRecord';
     const tupleMode = specificSchemaObject?.type === 'tuple';
 
+    // See `docs/proposals/raw-typeson-edit-view.md` §1 for the scope
+    //   rationale (why `filelist` is included, why record/tuple count).
+    const isRawEditable = types.showRawTypesonControls &&
+      ((type === 'object' || type === 'array' ||
+        type === 'set' || type === 'map' || type === 'filelist') ||
+        recordMode || tupleMode);
+
     // A `record` refines `object` but, for legend numbering/reordering, behaves
     //   like the array-based types did when it was its own (`array: true`) type.
     const parentIsArrayLike = parentTypeObject.array || recordMode;
@@ -2358,6 +2398,34 @@ const arrayType = {
       ).textContent = arrayContents.hidden ? '+' : '-';
     }}}, ['-']];
 
+    const rawEditButton = isRawEditable
+      ? [
+        nbsp.repeat(2),
+        ['button', {
+          class: 'editRawTypeson',
+          $on: {click (/** @type {Event} */ e) {
+            e.preventDefault();
+            openRawEditorDialog({
+              types,
+              format: /** @type {import('../formats.js').AvailableFormat} */ (
+                format
+              ),
+              type: /** @type {import('../types.js').AvailableArbitraryType} */ (
+                type
+              ),
+              root: /** @type {HTMLDivElement} */ (div),
+              // By click time `topRoot ||= div` below has already run if
+              //   this control is itself the root.
+              topRoot: /** @type {HTMLDivElement} */ (topRoot),
+              typeNamespace,
+              specificSchemaObject,
+              readonly: false
+            });
+          }}
+        }, ['Edit raw']]
+      ]
+      : [];
+
     const arrayContents = /** @type {import('jamilih').JamilihArray} */ (
       ['div', {class: 'arrayContents'}, [
         arrayContentsFirstChild,
@@ -2433,7 +2501,8 @@ const arrayType = {
      *   $getTypeChoices: () => HTMLSelectElement & {
      *     $setType: import('../typeChoices.js').SetType,
      *     $getTypeRoot: import('../formatAndTypeChoices.js').TypeRootGetter
-     *   }
+     *   },
+     *   $resetItemIndex: () => void
      * }} DivArrayOrObjectHolder
      */
 
@@ -2585,6 +2654,40 @@ const arrayType = {
                 this.$getAddArrayElement().previousElementSibling
               );
             },
+            /**
+             * Resets the `itemIndex`/legend-numbering counter back to its
+             *   empty-container baseline (`itemAdjust - 1`, the same value
+             *   it's initialized to before any item is ever added — *not*
+             *   the `-1` the "x All" button below hardcodes, which is only
+             *   correct for arrays; an object's baseline is `0`). Exposed so
+             *   a caller that repopulates this container's children from
+             *   outside this closure (bypassing the normal per-item
+             *   add/remove handlers that keep `itemIndex` in sync as they
+             *   go) — currently only
+             *   `src/utils/rawTypesonEditor.js`'s `commitValueToContainer`,
+             *   after a raw-value edit replaces every child — ends up with
+             *   exactly the same numbering a fresh container holding the
+             *   same new items would have, rather than continuing from
+             *   wherever the replaced content had left off (or, using the
+             *   wrong baseline, starting one lower than a fresh container
+             *   would: a single-property object's only property would be
+             *   renumbered from "1" to "0" by a bulk edit that didn't even
+             *   change its key, for example).
+             * @this {DivArrayOrObjectHolder}
+             * @returns {void}
+             */
+            $resetItemIndex () {
+              if (sparse) {
+                decrementItemIndex(
+                  /**
+                   * @type {HTMLDivElement & {
+                   *   $getPropertyInputs: GetPropertyInputs
+                    }} */ (this.$getArrayItems())
+                );
+              } else {
+                itemIndex = itemAdjust - 1;
+              }
+            },
             /**
              * @this {DivArrayOrObjectHolder}
              * @returns {HTMLSelectElement & {
@@ -2684,6 +2787,7 @@ const arrayType = {
             }]
             : '',
           minusButton,
+          ...rawEditButton,
           arrayContents
         ]))
       );

package/src/jsoe.css

@@ -139,6 +139,18 @@ video.recordedMedia {
   height: 300px;
 }
 
+.jsoe-raw-editor {
+  width: 500px;
+  max-width: 100%;
+  height: 300px;
+  overflow: auto;
+  border: 1px solid;
+}
+
+.jsoe-raw-editor-error:not(:empty) {
+  color: #b00;
+}
+
 .visualizer {
   height: 60px;
 }

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,
@@ -200,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,
@@ -359,7 +386,9 @@ function buildXorTypeChoices ({
     }
   });
 
-  return /** @type {HTMLSelectElement} */ (/** @type {unknown} */ (fieldset));
+  return /** @type {TypeChoicesControl} */ (
+    /** @type {unknown} */ (fieldset)
+  );
 }
 
 /**
@@ -437,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();