@es-joy/jsoe 0.3.0 → 0.4.0

package/src/fundamentalTypes/bigintType.js

@@ -18,7 +18,7 @@ const bigintType = {
     return {value: BigInt(s.slice(0, -1))};
   },
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value}) {
     this.getInput({root}).value = String(value);
@@ -27,7 +27,7 @@ const bigintType = {
     const val = this.getInput({root}).value;
     return {
       message: 'Not a valid BigInt',
-      valid: val && val.match(/^-?(\d+)$/u)
+      valid: Boolean(val && (/^-?(\d+)$/u).test(val))
     };
   },
   getValue ({root}) {

package/src/fundamentalTypes/dateType.js

@@ -1,9 +1,22 @@
+import {jml} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
-import {jml} from '../../vendor/jamilih/dist/jml-es.js';
 import Types from '../types.js';
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @typedef {(
+ *   legitimateInvalid?: true|undefined
+ * ) => void} SetValidity
+ */
+
+/**
+ * @type {import('../types.js').TypeObject & {
+ *   dateRegex: RegExp,
+ *   isInvalid: (cfg: {root: HTMLDivElement}) => boolean,
+ *   isValueInvalid: (
+ *     value: import('../formats.js').StructuredCloneValue
+ *   ) => boolean
+ *   valid?: true
+ * }}
  */
 const dateType = {
   option: ['Date'],
@@ -21,12 +34,14 @@ const dateType = {
     return {value: new Date(s)};
   },
   getInput ({root}) {
-    return $e(root, 'input[type="date"]');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input[type="date"]'));
   },
   setValue ({root, value}) {
     const notANum = value && Number.isNaN(value.getTime());
     if (notANum) {
-      $e(root, '.invalidDate').$setValidity(true);
+      /** @type {HTMLElement & {$setValidity: SetValidity}} */ (
+        $e(root, '.invalidDate')
+      ).$setValidity(true);
       return;
     }
     const dateStr = new Date(Date.parse(value)).toISOString();
@@ -50,12 +65,14 @@ const dateType = {
       };
     }
     return {
-      valid: val.match(new RegExp(this.dateRegex, 'u')),
+      valid: new RegExp(this.dateRegex, 'u').test(val),
       message: 'Must match a valid date'
     }; // Input shouldn't allow anyways
   },
   isInvalid ({root}) {
-    return !this.valid && $e(root, '.invalidDate').checked;
+    return !this.valid && /** @type {HTMLInputElement} */ (
+      $e(root, '.invalidDate')
+    ).checked;
   },
   getValue ({root}) {
     if (this.isInvalid({root})) {
@@ -77,11 +94,11 @@ const dateType = {
   },
   // Change to default to `new Date()` when can't be `NaN`
   //   value (keys)?
-  editUI ({topRoot, typeNamespace, value = ''}) {
+  editUI ({typeNamespace, value = ''}) {
     const notANum = this.isValueInvalid(value);
     const invalid = this.valid
       ? ''
-      : jml('div', [
+      : /** @type {HTMLDivElement} */ (jml('div', [
         ['label', [
           'Invalid date',
           ['input', {
@@ -90,25 +107,36 @@ const dateType = {
             checked: notANum,
             name: `${typeNamespace}-invalidDate`,
             $custom: {
+              /**
+               * @type {SetValidity}
+               */
               $setValidity (legitimateInvalid) {
                 console.log('legitimateInvalid', legitimateInvalid);
                 if (legitimateInvalid === true) {
-                  this.checked = true;
+                  /** @type {HTMLInputElement} */ (this).checked = true;
                 }
-                const label = invalid.previousElementSibling;
+                const label = /** @type {HTMLLabelElement} */ (
+                  /** @type {HTMLDivElement} */ (
+                    invalid
+                  ).previousElementSibling
+                );
                 label.hidden = Boolean(legitimateInvalid);
-                const root = label.parentElement;
-                Types.validate({type: 'date', root, topRoot});
+                const root = /** @type {HTMLDivElement} */ (
+                  label.parentElement
+                );
+                Types.validate({type: 'date', root});
               }
             },
             $on: {
               click (e) {
-                this.$setValidity();
+                /** @type {Element & {$setValidity: SetValidity}} */ (
+                  this
+                ).$setValidity();
               }
             }
           }]
         ]]
-      ]);
+      ]));
     return ['div', {dataset: {type: this.valid ? 'ValidDate' : 'date'}}, [
       ['label', {
         hidden: notANum

package/src/fundamentalTypes/nullType.js

@@ -13,7 +13,7 @@ const nullType = {
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   editUI ({typeNamespace}) {
     return ['div', {dataset: {type: 'null'}}, [

package/src/fundamentalTypes/numberType.js

@@ -21,7 +21,7 @@ const numberType = {
     return {value: Number(s)};
   },
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value}) {
     this.getInput({root}).value = String(value);
@@ -30,7 +30,7 @@ const numberType = {
     const val = this.getInput({root}).value;
     return {
       message: 'Not a valid (finite) number',
-      valid: val && val.match(/^-?(\d+|\d*\.\d+)$/u)
+      valid: Boolean(val && (/^-?(\d+|\d*\.\d+)$/u).test(val))
     };
   },
   getValue ({root}) {

package/src/fundamentalTypes/objectReferenceType.js

@@ -1,7 +1,7 @@
 import Types from '../types.js';
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').TypeObject & {type: string}}
  */
 const objectReferenceType = {
   option: ['Object reference'],
@@ -11,7 +11,7 @@ const objectReferenceType = {
     return Types.availableTypes.arrayReference.toValue.apply(this, args);
   },
   resolveReference (...args) {
-    return Types.availableTypes.arrayReference.resolveReference.apply(
+    return Types.availableTypes.arrayReference.resolveReference?.apply(
       this, args
     );
   },
@@ -29,16 +29,18 @@ const objectReferenceType = {
     return Types.availableTypes.arrayReference.getInput.apply(this, args);
   },
   setValue (...args) {
-    return Types.availableTypes.arrayReference.setValue.apply(this, args);
+    return Types.availableTypes.arrayReference.setValue?.apply(this, args);
   },
   getValue (...args) {
     return Types.availableTypes.arrayReference.getValue.apply(this, args);
   },
   validate (...args) {
-    return Types.availableTypes.arrayReference.validate.apply(this, args);
+    return /** @type {{message?: string | undefined; valid: boolean;}} */ (
+      Types.availableTypes.arrayReference.validate?.apply(this, args)
+    );
   },
   validateAll (...args) {
-    return Types.availableTypes.arrayReference.validateAll.apply(this, args);
+    return Types.availableTypes.arrayReference.validateAll?.apply(this, args);
   },
   viewUI (...args) {
     return Types.availableTypes.arrayReference.viewUI.apply(this, args);

package/src/fundamentalTypes/regexpType.js

@@ -1,9 +1,9 @@
+import {jml} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
-import {jml} from '../../vendor/jamilih/dist/jml-es.js';
 import Types from '../types.js';
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').TypeObject & {allowedFlags: string[]}}
  */
 const regexpType = {
   option: ['RegExp'],
@@ -16,18 +16,29 @@ const regexpType = {
     }})$`, 'u');
   },
   toValue (s) {
-    const [, str, flags] = s.match(this.stringRegex());
+    /* istanbul ignore if */
+    if (typeof this.stringRegex !== 'function') {
+      throw new TypeError('Guard for TS');
+    }
+    const [, str, flags] = s.match(
+      /** @type {Required<import('../types.js').TypeObject>} */ (
+        this
+      ).stringRegex()
+    ) || [];
     return {value: new RegExp(str, flags)};
   },
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value}) {
     this.getInput({root}).value = value.source;
-    this.getSelect({root}).$set([...value.flags]);
+    /** @type {HTMLSelectElement & {$set: (flags: string[]) => void}} */
+    (/** @type {Required<import('../types.js').TypeObject>} */ (
+      this
+    ).getSelect({root})).$set([...value.flags]);
   },
   getSelect ({root}) {
-    return $e(root, 'select');
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
   validate ({root}) {
     try {
@@ -36,14 +47,16 @@ const regexpType = {
     } catch (err) {
       return {
         valid: false,
-        message: err.message
+        message: /** @type {Error} */ (err).message
       };
     }
   },
   getValue ({root}) {
     return new RegExp(
       this.getInput({root}).value, // .replace(/\\/g, '\\\\'),
-      [...this.getSelect({root}).selectedOptions].reduce((s, opt) => {
+      [...(/** @type {Required<import('../types.js').TypeObject>} */ (
+        this
+      )).getSelect({root}).selectedOptions].reduce((s, opt) => {
         return s + opt.value;
       }, '')
     );
@@ -54,11 +67,17 @@ const regexpType = {
   },
   editUI ({typeNamespace, value = {source: '', flags: ''}}) {
     // Todo (low): Add RegExp syntax highlighter
-    const select = jml(
+    const select = /** @type {HTMLSelectElement} */ (jml(
       'select',
       {multiple: true, size: 5, $custom: {
+        /**
+         * @param {string[]} valArr
+         * @returns {void}
+         */
         $set (valArr) { // A useful reusable method for multiple selects
-          [...this.options].forEach((opt) => {
+          [...(/** @type {HTMLSelectElement} */ (
+            this
+          )).options].forEach((opt) => {
             opt.selected = valArr.includes(opt.value);
           });
         }
@@ -68,21 +87,23 @@ const regexpType = {
           selected: value.flags.includes(flag)
         }, [flag]];
       })
+    ));
+    const root = /** @type {HTMLDivElement} */ (
+      jml('div', {dataset: {type: 'regexp'}}, [
+        ['label', [
+          'Source ',
+          ['input', {
+            name: `${typeNamespace}-regexp`, type: 'text',
+            value: value.source
+          }]
+        ]],
+        ['br'],
+        ['label', [
+          'Flags ',
+          select
+        ]]
+      ])
     );
-    const root = jml('div', {dataset: {type: 'regexp'}}, [
-      ['label', [
-        'Source ',
-        ['input', {
-          name: `${typeNamespace}-regexp`, type: 'text',
-          value: value.source
-        }]
-      ]],
-      ['br'],
-      ['label', [
-        'Flags ',
-        select
-      ]]
-    ]);
     // Could be disallowed flags; we might instead try in
     //   advance which will work
     select.addEventListener('change', () => {

package/src/fundamentalTypes/sparseUndefinedType.js

@@ -14,6 +14,12 @@ const sparseUndefinedType = {
       ]
     }
   },
+  toValue (_s) {
+    return {value: undefined};
+  },
+  getValue () {
+    return this.toValue('').value;
+  },
   /* istanbul ignore next -- Catching instead of this placeholder */
   viewUI (/* {value} */) {
     return ['i', {
@@ -22,7 +28,7 @@ const sparseUndefinedType = {
   },
   /* istanbul ignore next -- Catching instead of this placeholder */
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   /* istanbul ignore next -- Catching instead of this placeholder */
   editUI ({typeNamespace}) {

package/src/fundamentalTypes/stringType.js

@@ -10,7 +10,7 @@ const stringType = {
     return {value: s.slice(1, -1)};
   },
   getInput ({root}) {
-    return $e(root, 'textarea');
+    return /** @type {HTMLTextAreaElement} */ ($e(root, 'textarea'));
   },
   setValue ({root, value}) {
     this.getInput({root}).value = value;

package/src/fundamentalTypes/undefinedType.js

@@ -10,14 +10,14 @@ const undefinedType = {
     return {value: undefined};
   },
   getValue () {
-    return this.toValue().value;
+    return this.toValue('').value;
   },
   viewUI (/* {value} */) {
     return ['i', {dataset: {type: 'undef'}}, ['undefined']];
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   editUI ({typeNamespace}) {
     return ['div', {dataset: {type: 'undef'}}, [

package/src/subTypes/blobHTMLType.js

@@ -1,16 +1,25 @@
 /* globals sceditor */
-import {jml} from '../../vendor/jamilih/dist/jml-es.js';
+import {jml} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 
 import dialogs from '../utils/dialogs.js';
 import {isNullish} from '../utils/types.js';
 
+/**
+ * @type {import('../types.js').TypeObject & {
+ *   loadBlob: (blob: Blob) => Promise<FileReader>,
+ *   sceditorInstance: {val: (val?: string) => string|void}
+ * }}
+ */
 const blobHTMLType = {
   // Todo (low): Support other content-types
   option: ['Blob (text/html)'],
   stringRegex: /^data:text\/html(?:;base64)?,.*$/u,
   valueMatch: (v) => v.type === 'text/html',
   superType: 'blob',
+  sceditorInstance: {val () {
+    throw new Error('Not yet instantiated');
+  }},
   toValue (s) {
     // Todo (low): `Blob` untested; use https://stackoverflow.com/a/30407840/271577 ?
     /**
@@ -42,7 +51,7 @@ const blobHTMLType = {
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'textarea');
+    return /** @type {HTMLTextAreaElement} */ ($e(root, 'textarea'));
   },
   getValue (/* {root} */) {
     return this.toValue(
@@ -50,7 +59,7 @@ const blobHTMLType = {
       // this.getInput({root}).value
     ).value;
   },
-  loadBlob (value) {
+  loadBlob (blob) {
     const reader = new FileReader();
     // eslint-disable-next-line promise/avoid-new
     return new Promise((resolve, reject) => {
@@ -64,32 +73,35 @@ const blobHTMLType = {
           reject(reader.error);
         }
       );
-      reader.readAsText(value);
+      reader.readAsText(blob);
     });
   },
   async setValue ({/* root, */ value}) {
     const {result} = await this.loadBlob(value);
-    this.sceditorInstance.val(result);
+    this.sceditorInstance.val(/** @type {string} */ (result));
     // this.getInput({root}).value = result;
   },
   viewUI ({value}) {
+    /** @type {string} */
     let val;
-    const div = jml('div', {dataset: {type: 'blobHTML'}}, [
-      'HTML: ',
-      ['button', {$on: {
-        click () {
-          dialogs.alert({message: ['div', [
-            'Source: ',
-            ['textarea', {class: 'view-source'}, [val]]
-          ]]});
-        }
-      }}, ['View source']]
-    ]);
+    const div = /** @type {HTMLDivElement} */ (
+      jml('div', {dataset: {type: 'blobHTML'}}, [
+        'HTML: ',
+        ['button', {$on: {
+          click () {
+            dialogs.alert({message: ['div', [
+              'Source: ',
+              ['textarea', {class: 'view-source'}, [val]]
+            ]]});
+          }
+        }}, ['View source']]
+      ])
+    );
     // eslint-disable-next-line promise/prefer-await-to-then
     this.loadBlob(value).then(({
       result
     }) => {
-      val = result;
+      val = /** @type {string} */ (result);
       jml('iframe', {
         sandbox: '',
         srcdoc: val
@@ -106,10 +118,16 @@ const blobHTMLType = {
     // return ['i', [`data:text/html,${value}`]];
   },
   editUI ({typeNamespace, value}) {
-    const textarea = jml('textarea', {name: `${typeNamespace}-blobHTML`});
-    const root = jml('div', {dataset: {type: 'blobHTML'}}, [
-      textarea
-    ]);
+    const textarea = /** @type {HTMLTextAreaElement} */ (
+      jml('textarea', {name: `${typeNamespace}-blobHTML`})
+    );
+    const root = /** @type {HTMLDivElement} */ (jml(
+      'div',
+      {dataset: {type: 'blobHTML'}},
+      [
+        textarea
+      ]
+    ));
     setTimeout(() => {
       // Push onto these: https://www.sceditor.com/documentation/formats/xhtml/
       // sceditor.formats.xhtml.converters array
@@ -150,7 +168,9 @@ const blobHTMLType = {
       });
       this.sceditorInstance = sceditor.instance(textarea);
       if (!isNullish(value)) {
-        this.setValue({root, value});
+        /** @type {Required<import('../types.js').TypeObject>} */ (
+          this
+        ).setValue({root, value});
       }
     });
     return [root];

package/src/subTypes/falseType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').TypeObject & {ct: number}}
  */
 const falseType = {
   option: ['Boolean (false)', {value: 'false'}],
@@ -16,7 +16,7 @@ const falseType = {
   ct: 0,
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   editUI ({typeNamespace}) {
     this.ct++;

package/src/subTypes/trueType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').TypeObject & {ct: number}}
  */
 const trueType = {
   option: ['Boolean (true)', {value: 'true'}],
@@ -16,7 +16,7 @@ const trueType = {
   ct: 0,
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'input');
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   editUI ({typeNamespace}) {
     this.ct++;

package/src/superTypes/SpecialNumberSuperType.js

@@ -1,8 +1,9 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @typedef {TypeObject} SuperTypeObject
- * @property {string[]} childTypes
+ * @typedef {import('../types.js').TypeObject & {
+ *   childTypes: string[]
+ * }} SuperTypeObject
  */
 
 /**
@@ -24,17 +25,23 @@ const SpecialNumberSuperType = {
     };
   },
   getSelect ({root}) {
-    return $e(root, 'select');
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
-    return $e(root, 'select');
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
   getValue ({root}) {
-    return this.toValue(this.getSelect({root}).value).value;
+    return this.toValue(
+      /** @type {Required<import('../types.js').TypeObject>} */ (
+        this
+      ).getSelect({root}).value
+    ).value;
   },
   setValue ({root, value}) {
-    this.getSelect({root}).value = String(value);
+    /** @type {Required<import('../types.js').TypeObject>} */ (
+      this
+    ).getSelect({root}).value = String(value);
   },
   viewUI ({value}) {
     return ['i', {dataset: {type: 'SpecialNumber'}}, [

package/src/superTypes/SpecialRealNumberSuperType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {SuperTypeObject}
+ * @type {import('./SpecialNumberSuperType.js').SuperTypeObject}
  */
 const SpecialRealNumberSuperType = {
   option: ['Special Real Number', {title: '`Infinity`, `-Infinity`, `-0`'}],
@@ -17,13 +17,19 @@ const SpecialRealNumberSuperType = {
     };
   },
   getSelect ({root}) {
-    return $e(root, 'select');
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
   getValue ({root}) {
-    return this.toValue(this.getSelect({root}).value).value;
+    return this.toValue(
+      /** @type {Required<import('../types.js').TypeObject>} */ (
+        this
+      ).getSelect({root}).value
+    ).value;
   },
   setValue ({root, value}) {
-    this.getSelect({root}).value = String(value);
+    /** @type {Required<import('../types.js').TypeObject>} */ (
+      this
+    ).getSelect({root}).value = String(value);
   },
   viewUI ({value}) {
     return ['i', {dataset: {type: 'SpecialRealNumber'}}, [
@@ -31,7 +37,7 @@ const SpecialRealNumberSuperType = {
     ]];
   },
   getInput ({root}) {
-    return $e(root, 'select');
+    return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
   editUI ({typeNamespace, value = Number.POSITIVE_INFINITY}) {
     return ['div', {dataset: {type: 'SpecialRealNumber'}}, [