@es-joy/jsoe 0.5.0 → 0.6.0

package/demo/index.js

@@ -1,4 +1,4 @@
-import {jml, body} from '../src/vendor-imports.js';
+import {jml, body, $} from '../src/vendor-imports.js';
 
 import {
   typeChoices,
@@ -13,151 +13,507 @@ const keyPathNotExpectedTypeChoices = formatAndTypeChoices({
   typeNamespace: 'demo-keypath-not-expected'
 });
 
-jml('section', {role: 'main'}, [
-  ['h2', [
-    'Format and type choices: No key path expected (type can vary at root)'
-  ]],
-
-  // Put inside form so can validate
-  ['form', [
-    ...keyPathNotExpectedTypeChoices.domArray
-  ]],
-
-  ['button', {
-    $on: {
-      click () {
-        // eslint-disable-next-line no-alert -- Simple demo
-        alert(keyPathNotExpectedTypeChoices.getType());
+setTimeout(async function () {
+  jml('section', {role: 'main'}, [
+    ['h1', [
+      'Jsoe testing'
+    ]],
+    ['h2', [
+      'Format and type choices: No key path expected (type can vary at root)'
+    ]],
+
+    // Put inside form so can validate
+    ['form', {id: 'formatAndTypeChoices'}, [
+      ...keyPathNotExpectedTypeChoices.domArray
+    ]],
+
+    ['button', {
+      id: 'getType',
+      $on: {
+        click () {
+          // eslint-disable-next-line no-alert -- Simple demo
+          alert(keyPathNotExpectedTypeChoices.getType());
+        }
+      }
+    }, ['Get type']],
+
+    ['button', {
+      id: 'isValid',
+      $on: {
+        click () {
+          // eslint-disable-next-line no-alert -- Simple demo
+          alert(keyPathNotExpectedTypeChoices.validValuesSet());
+        }
+      }
+    }, ['Is valid']],
+
+    ['button', {
+      id: 'logValue',
+      $on: {
+        click () {
+          console.log(keyPathNotExpectedTypeChoices.getValue());
+        }
       }
-    }
-  }, ['Get type']],
-
-  ['button', {
-    $on: {
-      click () {
-        // eslint-disable-next-line no-alert -- Simple demo
-        alert(keyPathNotExpectedTypeChoices.validValuesSet());
+    }, ['Log value']],
+
+    ['button', {
+      id: 'viewUI',
+      $on: {
+        async click () {
+          const controls = await getControlsForFormatAndValue(
+            $('#useIndexedDBKey').checked
+              ? 'indexedDBKey'
+              : 'structuredCloning',
+            keyPathNotExpectedTypeChoices.getValue(),
+            {
+              readonly: true
+            }
+          );
+          $('#viewUIResults').firstChild?.remove();
+          $('#viewUIResults').append(controls);
+        }
       }
-    }
-  }, ['Is valid']],
+    }, ['view UI']],
+
+    ['div', {id: 'viewUIResults'}],
 
-  ['button', {
-    $on: {
-      click () {
-        console.log(keyPathNotExpectedTypeChoices.getValue());
+    ['button', {
+      id: 'initializeWithValue',
+      $on: {
+        async click () {
+          await keyPathNotExpectedTypeChoices.setValue(42);
+        }
       }
-    }
-  }, ['Log value']],
+    }, ['Initialize with a value']],
 
-  ['button', {
-    $on: {
-      async click () {
-        await keyPathNotExpectedTypeChoices.setValue(42);
+    ['button', {
+      id: 'initializeWithComplexValue',
+      $on: {
+        async click () {
+          const a = {
+            bbb: {},
+            xxx: {yyy: []}
+          };
+          a.bbb.ccc = a;
+          a.zzz = a.xxx.yyy;
+          await keyPathNotExpectedTypeChoices.setValue(a);
+        }
       }
-    }
-  }, ['Initialize with a value']],
-
-  ['h2', [
-    'Format and type choices: Key path expected (object required at root)'
-  ]],
-  ...formatAndTypeChoices({
-    hasKeyPath: true,
-    typeNamespace: 'demo-keypath-expected'
-  }).domArray,
-
-  ['h2', [
-    'Format choices without type selection ' +
-      '(might use as retrieval return format)'
-  ]],
-  ['select', [
-    getFormatAndSchemaChoices()
-  ]],
-
-  ['h2', [
-    'Type choices only'
-  ]],
-
-  (() => {
-    const typeSelection = typeChoices({
-      format: 'structuredCloning',
-      typeNamespace: 'demo-type-choices-only'
-    });
-
-    return ['form', {
+    }, ['Initialize with a complex value']],
+
+    ['button', {
+      id: 'programmaticallySetFormatToJSON',
       $on: {
-        submit (e) {
-          e.preventDefault();
+        click () {
+          keyPathNotExpectedTypeChoices.formatChoices.$setFormat('json');
         }
       }
     }, [
-      ...typeSelection.domArray,
-      ['button', {
-        $on: {
-          click () {
+      'Programmatically set format (to JSON)'
+    ]],
+
+    ['button', {
+      id: 'setCustomValidateAllReferences',
+      $on: {
+        click () {
+          Types.customValidateAllReferences = () => {
             // eslint-disable-next-line no-alert -- Simple demo
-            alert(typeSelection.getType());
-          }
+            alert('customValidateAllReferences set');
+          };
         }
-      }, ['Get type']],
+      }
+    }, [
+      'Set custom all reference validation'
+    ]],
+
+    ['button', {
+      id: 'showRootFormControl',
+      $on: {
+        click () {
+          const root = $(
+            '#formatAndTypeChoices > .typesHolder > ' +
+              '.typeContainer > div[data-type]'
+          );
+          const formControl = Types.getFormControlForRoot(root);
+          formControl.style.backgroundColor = 'red';
+          setTimeout(() => {
+            formControl.style.backgroundColor = 'white';
+          }, 3000);
+        }
+      }
+    }, ['Show root form control']],
+
+    ['button', {
+      id: 'getValueFromRootAncestor',
+      $on: {
+        click () {
+          const val = Types.getValueFromRootAncestor(
+            '#formatAndTypeChoices > .typesHolder > ' +
+              '.typeContainer'
+          );
+          console.log(val);
+        }
+      }
+    }, [
+      'Get value from root ancestor'
+    ]],
+
+    ['button', {
+      id: 'showFormControlFromRootAncestor',
+      $on: {
+        click () {
+          const formControl = Types.getFormControlFromRootAncestor(
+            '#formatAndTypeChoices > .typesHolder > ' +
+              '.typeContainer'
+          );
+          formControl.style.backgroundColor = 'red';
+          setTimeout(() => {
+            formControl.style.backgroundColor = 'initial';
+          }, 3000);
+        }
+      }
+    }, [
+      'Show form control from root ancestor'
+    ]],
+
+    ['h2', [
+      'Format and type choices: Key path expected (object required at root)'
+    ]],
+    ...formatAndTypeChoices({
+      hasKeyPath: true,
+      typeNamespace: 'demo-keypath-expected'
+    }).domArray,
+
+    ['h2', [
+      'Format choices without type selection ' +
+        '(might use as retrieval return format)'
+    ]],
+    ['select', {id: 'formatAndSchemaChoices'}, [
+      getFormatAndSchemaChoices()
+    ]],
 
-      ['button', {
+    ['h2', [
+      'Type choices only'
+    ]],
+
+    (() => {
+      const typeSelection = typeChoices({
+        format: 'structuredCloning',
+        typeNamespace: 'demo-type-choices-only'
+      });
+
+      return ['form', {
+        id: 'typeChoicesOnly',
         $on: {
-          click () {
-            // eslint-disable-next-line no-alert -- Simple demo
-            alert(typeSelection.validValuesSet());
+          submit (e) {
+            e.preventDefault();
           }
         }
-      }, ['Is valid']],
+      }, [
+        ...typeSelection.domArray,
+        ['button', {
+          id: 'typeChoicesOnly-getType',
+          $on: {
+            click () {
+              // eslint-disable-next-line no-alert -- Simple demo
+              alert(typeSelection.getType());
+            }
+          }
+        }, ['Get type']],
 
-      ['button', {
-        $on: {
-          click () {
-            console.log(typeSelection.getValue());
+        ['button', {
+          id: 'typeChoicesOnly-isValid',
+          $on: {
+            click () {
+              // eslint-disable-next-line no-alert -- Simple demo
+              alert(typeSelection.validValuesSet());
+            }
+          }
+        }, ['Is valid']],
+
+        ['button', {
+          id: 'validateInitialType',
+          $on: {
+            click () {
+              // eslint-disable-next-line no-alert -- Simple demo
+              alert(typeSelection.domArray[0].$validate());
+            }
+          }
+        }, [
+          'Validate initial type'
+        ]],
+
+        ['button', {
+          id: 'typeChoicesOnly-logValue',
+          $on: {
+            click () {
+              console.log(typeSelection.getValue());
+            }
+          }
+        }, ['Log value']],
+
+        ['button', {
+          id: 'typeChoicesOnly-initializeWithValue',
+          $on: {
+            async click () {
+              await typeSelection.setValue(42);
+            }
           }
+        }, ['Initialize with a value']]
+      ]];
+    })(),
+
+    ['h2', [
+      'Type choices with initial value set'
+    ]],
+
+    (() => {
+      const badDate = new Date('Bad date');
+      const cause = new Error('some cause');
+      const error = new Error('msg');
+      error.cause = cause;
+
+      // eslint-disable-next-line unicorn/error-message -- Testing empty
+      const error2 = new Error();
+      error2.message = undefined; // Needed to force (at least in Chrome)
+      error2.fileName = 'abc';
+      error2.name = undefined;
+      error2.stack = undefined;
+      error2.lineNumber = 10;
+      error2.columnNumber = 20;
+
+      const typeError = new TypeError('msg');
+      const typeCause = new RangeError('some cause');
+      typeError.cause = typeCause;
+
+      // eslint-disable-next-line unicorn/error-message -- Testing empty
+      const error3 = new TypeError();
+      error3.message = undefined; // Needed to force (at least in Chrome)
+      error3.fileName = 'abc';
+      error3.name = undefined;
+      error3.stack = undefined;
+      error3.lineNumber = 10;
+      error3.columnNumber = 20;
+
+      const aggregate1 = new RangeError('agg err1');
+      const aggregate2 = new TypeError('agg err2');
+      const aggregate3 = new Error('agg err3');
+      const errAggregate = new AggregateError(
+        [aggregate1, aggregate2, aggregate3], 'agg msg'
+      );
+
+      const typeSelection = typeChoices({
+        format: 'structuredCloning',
+        setValue: true,
+        value: [
+          42, 123n, 'test123', new Date('1999-01-01'), badDate,
+          // eslint-disable-next-line require-unicode-regexp -- Testing
+          /.*?/,
+          // eslint-disable-next-line @stylistic/max-len -- Long
+          // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins -- Testing
+          new Boolean(false),
+          // eslint-disable-next-line @stylistic/max-len -- Long
+          // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins -- Testing
+          new Boolean(true),
+          // eslint-disable-next-line @stylistic/max-len -- Long
+          // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins -- Testing
+          new Number(42),
+          // eslint-disable-next-line @stylistic/max-len -- Long
+          // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins -- Testing
+          new String('test123'),
+          Number.NaN,
+          -0,
+          new Blob(['<b>Testing</b>'], {type: 'text/html'}),
+          new Map([
+            [null, 3],
+            [true, new Map([[false, 5]])],
+            [new Map([[6, 4]]), 7]
+          ]),
+          error,
+          error2,
+          error3,
+          typeError,
+          errAggregate
+        ],
+        typeNamespace: 'demo-type-choices-only-initial-value'
+      });
+
+      const typeSelectionBlob = typeChoices({
+        format: 'structuredCloning',
+        setValue: true,
+        value: new Blob(['<b>Testing</b>'], {type: 'text/html'}),
+        typeNamespace: 'demo-type-choices-only-initial-value'
+      });
+
+      const error4 = new Error('msg2');
+      const cause4 = new Error('some cause2');
+      error4.cause = cause4;
+      const typeSelectionErrorWithCause = typeChoices({
+        format: 'structuredCloning',
+        setValue: true,
+        value: error4,
+        typeNamespace: 'demo-type-choices-only-initial-value-ErrorCause'
+      });
+
+      const error5 = new TypeError('msg2');
+      const cause5 = new RangeError('some cause2');
+      error5.cause = cause5;
+      const typeSelectionTypeErrorWithCause = typeChoices({
+        format: 'structuredCloning',
+        setValue: true,
+        value: error5,
+        typeNamespace: 'demo-type-choices-only-initial-value-ErrorsCause'
+      });
+
+      const typeSelectionIndexedDBKey = typeChoices({
+        format: 'indexedDBKey',
+        setValue: true,
+        value: [-0, Number.NEGATIVE_INFINITY],
+        typeNamespace: 'demo-type-choices-only-initial-value',
+        keySelectClass: 'only-initial'
+      });
+
+      const agg1 = new RangeError('some err1');
+      const agg2 = new TypeError('some err2');
+      const agg3 = new Error('some err3');
+      const errorAggregate = new AggregateError([agg1, agg2, agg3], 'msg2');
+      errorAggregate.stack = undefined; // For coverage
+      const typeSelectionTypeErrorWithAggregate = typeChoices({
+        format: 'structuredCloning',
+        setValue: true,
+        value: errorAggregate,
+        typeNamespace: 'demo-type-choices-only-initial-value-ErrorsAggregate'
+      });
+
+      return ['form', [
+        ...typeSelection.domArray,
+        ...typeSelectionBlob.domArray,
+        ...typeSelectionErrorWithCause.domArray,
+        ...typeSelectionIndexedDBKey.domArray,
+        ...typeSelectionTypeErrorWithCause.domArray,
+        ...typeSelectionTypeErrorWithAggregate.domArray
+      ]];
+    })(),
+
+    ['button', {
+      id: 'validValuesSet',
+      $on: {
+        click () {
+          // eslint-disable-next-line no-alert -- Simple demo
+          alert(Types.validValuesSet({
+            form: this.previousElementSibling,
+            typeNamespace: 'demo-type-choices-only-initial-value',
+            keySelectClass: 'only-initial'
+          }));
         }
-      }, ['Log value']],
+      }
+    }, [
+      'Valid values set?'
+    ]],
+
+    ['h2', [
+      'Convert arbitrary value to an editable menu'
+    ]],
+
+    await getControlsForFormatAndValue(
+      'structuredCloning', new Date('1999-01-01')
+    ),
 
-      ['button', {
+    ['h2', [
+      'Convert arbitrary value to a readonly menu'
+    ]],
+
+    await getControlsForFormatAndValue(
+      'structuredCloning',
+      new Date('1999-01-01'), {
+        readonly: true
+      }
+    ),
+
+    ['h2', [
+      'Convert structured cloning string representation to value and log'
+    ]],
+    ['input', {
+      id: 'getValueForString',
+      placeholder: 'e.g., ["abc", 17]',
+      $on: {
+        change () {
+          const value = Types.getValueForString(this.value, {
+            format: $('#useIndexedDBKey').checked
+              ? 'indexedDBKey'
+              : 'structuredCloning'
+          })[0];
+          console.log(value);
+        }
+      }
+    }],
+
+    (() => {
+      return ['form', {
         $on: {
-          async click () {
-            await typeSelection.setValue(42);
+          submit (e) {
+            e.preventDefault();
           }
         }
-      }, ['Initialize with a value']]
-    ]];
-  })(),
-
-  ['h2', [
-    'Convert arbitrary value to an editable menu'
-  ]],
-
-  await getControlsForFormatAndValue(
-    'structuredCloning', new Date('1999-01-01')
-  ),
-
-  ['h2', [
-    'Convert arbitrary value to a readonly menu'
-  ]],
-
-  await getControlsForFormatAndValue(
-    'structuredCloning',
-    new Date('1999-01-01'), {
-      readonly: true
-    }
-  ),
-
-  ['h2', [
-    'Convert structured cloning string representation to value and log'
-  ]],
-  ['input', {
-    placeholder: 'e.g., ["abc", 17]',
-    $on: {
-      change () {
-        const value = Types.getValueForString(this.value, {
-          format: 'structuredCloning'
-        })[0];
-        console.log(value);
-      }
-    }
-  }]
-], body);
+      }, [
+        ['button', {
+          id: 'attemptBadIndexedDBKey',
+          $on: {
+            click () {
+              const badDate = new Date('Bad date');
+              typeChoices({
+                format: 'indexedDBKey',
+                setValue: true,
+                value: [badDate],
+                typeNamespace: 'demo-type-choices-only-initial-value'
+              });
+            }
+          }
+        }, [
+          'Attempt bad indexedDBKey (invalid Date)'
+        ]],
+        ['button', {
+          id: 'attemptBadIndexedDBKeyStringObject',
+          $on: {
+            click () {
+              typeChoices({
+                format: 'indexedDBKey',
+                setValue: true,
+                // eslint-disable-next-line @stylistic/max-len -- Long
+                // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins -- Testing
+                value: [new String('Bad value')],
+                typeNamespace: 'demo-type-choices-only-initial-value'
+              });
+            }
+          }
+        }, [
+          'Attempt bad indexedDBKey (String object)'
+        ]],
+        ['button', {
+          id: 'attemptBadJSON',
+          $on: {
+            click () {
+              typeChoices({
+                format: 'json',
+                setValue: true,
+                // eslint-disable-next-line no-sparse-arrays -- Testing
+                value: [,],
+                typeNamespace: 'demo-type-choices-only-initial-value'
+              });
+            }
+          }
+        }, [
+          'Attempt bad JSON (sparse array)'
+        ]]
+      ]];
+    })(),
+
+    ['label', [
+      'Use indexedDBKey (valid dates only)',
+      ['input', {
+        id: 'useIndexedDBKey',
+        type: 'checkbox'
+      }]
+    ]]
+  ], body);
+}, 500);

package/dist/formatAndTypeChoices.d.ts

@@ -26,7 +26,7 @@
  *   domArray: [formatChoices: FormatChoices, typesHolder: TypesHolder],
  *   getValue: (stateObj: import('./types.js').StateObject,
  *     currentPath: string) => import('./formats.js').StructuredCloneValue,
- *   getType: () => string|null|undefined,
+ *   getType: () => string,
  *   validValuesSet: () => boolean,
  *   setValue: SetValue
  * }} The selector for types and the container for them. Both should be
@@ -40,11 +40,17 @@ export function formatAndTypeChoices({ schema, schemaContent, hasValue, singleVa
     hasKeyPath?: boolean | undefined;
     typeNamespace?: string | undefined;
 }): {
-    formatChoices: HTMLSelectElement;
+    formatChoices: HTMLSelectElement & {
+        $setFormat: (valueFormat: string) => void;
+        $buildTypeChoices: () => void;
+    };
     typesHolder: HTMLDivElement;
-    domArray: [formatChoices: HTMLSelectElement, typesHolder: HTMLDivElement];
+    domArray: [formatChoices: HTMLSelectElement & {
+        $setFormat: (valueFormat: string) => void;
+        $buildTypeChoices: () => void;
+    }, typesHolder: HTMLDivElement];
     getValue: (stateObj: import('./types.js').StateObject, currentPath: string) => import('./formats.js').StructuredCloneValue;
-    getType: () => string | null | undefined;
+    getType: () => string;
     validValuesSet: () => boolean;
     setValue: SetValue;
 };

package/dist/formatAndTypeChoices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatAndTypeChoices.d.ts","sourceRoot":"","sources":["../src/formatAndTypeChoices.js"],"names":[],"mappings":"AAqEA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;IAzBwB,MAAM;IACN,aAAa;IACZ,QAAQ;IAGR,WAAW;IACX,UAAU;IAKX,aAAa;;;;;yBAMX,OAAO,YAAY,EAAE,WAAW,eACtC,MAAM,KAAK,OAAO,cAAc,EAAE,oBAAoB;aAC5D,MAAM,MAAM,GAAC,IAAI,GAAC,SAAS;oBACpB,MAAM,OAAO;cACnB,QAAQ;EA6LtB;AA5QM;IANiB,MAAM;IACL,UAAU;IAGtB,gBAAgB,CAgD5B;+BAIU,OAAO,cAAc,EAAE,oBAAoB,YAC3C,OAAO,YAAY,EAAE,WAAW,KAC9B,QAAQ,IAAI,CAAC;mCAjEb,cAAc,GAAC,IAAI"}
+{"version":3,"file":"formatAndTypeChoices.d.ts","sourceRoot":"","sources":["../src/formatAndTypeChoices.js"],"names":[],"mappings":"AAqEA;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;IAzBwB,MAAM;IACN,aAAa;IACZ,QAAQ;IAGR,WAAW;IACX,UAAU;IAKX,aAAa;;;kCA+BpB,MAAM,KACJ,IAAI;iCAMJ,IAAI;;;;kCAPN,MAAM,KACJ,IAAI;iCAMJ,IAAI;;yBAhCG,OAAO,YAAY,EAAE,WAAW,eACtC,MAAM,KAAK,OAAO,cAAc,EAAE,oBAAoB;aAC5D,MAAM,MAAM;oBACL,MAAM,OAAO;cACnB,QAAQ;EA8LtB;AA7QM;IANiB,MAAM;IACL,UAAU;IAGtB,gBAAgB,CAgD5B;+BAIU,OAAO,cAAc,EAAE,oBAAoB,YAC3C,OAAO,YAAY,EAAE,WAAW,KAC9B,QAAQ,IAAI,CAAC;mCAjEb,cAAc,GAAC,IAAI"}

package/dist/formats/json.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/formats/json.js"],"names":[],"mappings":";AAWA,6CAA6C;AAC7C,oBADW,OAAO,eAAe,EAAE,MAAM,CAyCvC"}
+{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/formats/json.js"],"names":[],"mappings":";AAWA,6CAA6C;AAC7C,oBADW,OAAO,eAAe,EAAE,MAAM,CAwCvC"}

package/dist/formats/structuredCloning.d.ts

@@ -4,9 +4,10 @@ export type AddAndSetArrayElement = (info: {
     type: import('../types.js').AvailableType;
     value: import('../formats.js').StructuredCloneValue;
     bringIntoFocus?: boolean;
+    setAValue?: boolean;
     schemaContent?: object;
     schemaState?: import('../types.js').GetPossibleSchemasForPathAndType;
-}) => HTMLElement;
+}) => HTMLElement | null;
 export type EncapsulateObserver = import('typeson-registry').EncapsulateObserver;
 export type FormatIterator = (records: import('../formats.js').StructuredCloneValue, stateObj: import('../types.js').StateObject) => Promise<Element>;
 /**