@es-joy/jsoe 0.5.0 → 0.6.0

package/src/fundamentalTypes/dateType.js

@@ -21,7 +21,7 @@ import Types from '../types.js';
 const dateType = {
   option: ['Date'],
   // ISO Date string
-  dateRegex: /^(?:\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}\.\d{3}Z)?|(?:\+|-)\d{6}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)$/u, // eslint-disable-line unicorn/no-unsafe-regex
+  dateRegex: /^(?:\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}\.\d{3}Z)?|(?:\+|-)\d{6}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z)$/u,
   stringRegex () {
     const regex = this.dateRegex;
     if (!this.valid) {
@@ -47,7 +47,7 @@ const dateType = {
     const dateStr = new Date(Date.parse(value)).toISOString();
     this.getInput({root}).value = dateStr.length === 24
       ? dateStr.slice(0, 10)
-      // eslint-disable-next-line max-len -- Long
+      // eslint-disable-next-line @stylistic/max-len -- Long
       /* istanbul ignore next -- 6 digits year not reliable through `Date.parse` */
       : dateStr.slice(3, 13); // Will cut off ten/hundred thousand years
   },
@@ -111,9 +111,8 @@ const dateType = {
                * @type {SetValidity}
                */
               $setValidity (legitimateInvalid) {
-                console.log('legitimateInvalid', legitimateInvalid);
+                // console.log('legitimateInvalid', legitimateInvalid);
                 if (legitimateInvalid === true) {
-                  // @ts-ignore Erring out of IDE
                   /** @type {HTMLInputElement} */ (this).checked = true;
                 }
                 const label = /** @type {HTMLLabelElement} */ (
@@ -129,8 +128,7 @@ const dateType = {
               }
             },
             $on: {
-              // @ts-ignore Erring out of IDE
-              click (e) {
+              click (/* e */) {
                 /** @type {HTMLElement & {$setValidity: SetValidity}} */ (
                   this
                 ).$setValidity();

package/src/fundamentalTypes/errorType.js

@@ -0,0 +1,416 @@
+import {error as errorTypesonRegistry} from 'typeson-registry';
+import {$e} from '../utils/templateUtils.js';
+import {jml} from '../vendor-imports.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const errorType = {
+  option: ['Error'],
+  stringRegex: /^Error\((.*)\)$/u,
+  toValue (s) {
+    const obj = JSON.parse(s);
+    const errObj = /** @type {{revive: import('typeson-registry').Reviver}} */ (
+      errorTypesonRegistry.error
+    ).revive(obj, {});
+    return {value: errObj};
+  },
+  getInput ({root}) { // Which one to get here?
+    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
+  },
+  setValue ({root, value}) {
+    if (typeof value.message === 'string') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.message:not([type])')
+      ).value = value.message;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.message[type=checkbox]')
+      ).click();
+    }
+    if (typeof value.name === 'string') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.name:not([type])')
+      ).value = value.name;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.name[type=checkbox]')
+      ).click();
+    }
+    if (typeof value.fileName === 'string') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.fileName:not([type])')
+      ).value = value.fileName;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.fileName[type=checkbox]')
+      ).click();
+    }
+
+    if (typeof value.lineNumber === 'number') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.lineNumber[type=number]')
+      ).value = value.lineNumber;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.lineNumber[type=number]')
+      ).value = '';
+    }
+
+    if (typeof value.columnNumber === 'number') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.columnNumber[type=number]')
+      ).value = value.columnNumber;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.columnNumber[type=number]')
+      ).value = '';
+    }
+
+    if (typeof value.stack === 'string') {
+      /** @type {HTMLTextAreaElement} */ (
+        $e(root, 'textarea.stack:not([type])')
+      ).value = value.stack;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, 'input.stack[type=checkbox]')
+      ).click();
+    }
+
+    setTimeout(() => {
+      if (typeof value.cause === 'object') {
+        /** @type {HTMLElement} */ ($e(root, '.cause')).click();
+        /** @type {import('../types.js').TypeObjectSetValue} */ (
+          this.setValue
+        )({
+          root: /** @type {HTMLDivElement} */ ($e(root, '.causeContents')),
+          value: value.cause
+        });
+      }
+    });
+  },
+  getValue ({root}) {
+    /**
+     * @type {{
+     *   name: string|undefined,
+     *   stack?: string|undefined,
+     *   cause?: unknown,
+     *   message?: string|undefined
+     *   fileName?: string,
+     *   lineNumber?: number|undefined,
+     *   columnNumber?: number|undefined
+     * }}
+     */
+    let errObj;
+    if (/** @type {HTMLInputElement} */ (
+      $e(root, 'input.message[type=checkbox]')
+    ).checked) {
+      const message = /** @type {HTMLInputElement} */ (
+        $e(root, 'input.message:not([type])')
+      ).value;
+      errObj = new Error(message);
+    } else {
+      // eslint-disable-next-line unicorn/error-message -- User requested
+      errObj = new Error();
+      errObj.message = undefined; // Force (at least needed for Chrome)
+    }
+    if (/** @type {HTMLInputElement} */ (
+      $e(root, 'input.name[type=checkbox]')
+    ).checked) {
+      const name = /** @type {HTMLInputElement} */ (
+        $e(root, 'input.name:not([type])')
+      ).value;
+      errObj.name = name;
+    } else {
+      errObj.name = undefined;
+    }
+    if (/** @type {HTMLInputElement} */ (
+      $e(root, 'input.fileName[type=checkbox]')
+    ).checked) {
+      const fileName = /** @type {HTMLInputElement} */ (
+        $e(root, 'input.fileName:not([type])')
+      ).value;
+      errObj.fileName = fileName;
+    } else {
+      errObj.fileName = undefined;
+    }
+    if (/** @type {HTMLInputElement} */ (
+      $e(root, 'input.stack[type=checkbox]')
+    ).checked) {
+      const stack = /** @type {HTMLTextAreaElement} */ (
+        $e(root, 'textarea.stack:not([type])')
+      ).value;
+      errObj.stack = stack;
+    } else {
+      errObj.stack = undefined;
+    }
+
+    const lineNumber = /** @type {HTMLInputElement} */ (
+      $e(root, 'input.lineNumber[type=number]')
+    ).value;
+    errObj.lineNumber = lineNumber === '' ? undefined : Number(lineNumber);
+
+    const columnNumber = /** @type {HTMLInputElement} */ (
+      $e(root, 'input.columnNumber[type=number]')
+    ).value;
+    errObj.columnNumber = columnNumber === ''
+      ? undefined
+      : Number(columnNumber);
+
+    const causeContents = /** @type {HTMLDivElement} */ (
+      $e(root, '.causeContents')
+    );
+    if (causeContents.children.length) {
+      errObj.cause = this.getValue({
+        root: causeContents
+      });
+    }
+
+    return errObj;
+  },
+  viewUI (
+    {value: o, format}
+  ) {
+    return /** @type {import('jamilih').JamilihArray} */ ([
+      'div', {dataset: {type: 'error'}}, [
+        typeof o.message === 'string'
+          ? ['div', [['b', ['Message: ']], ['span', [o.message]]]]
+          : [],
+        typeof o.name === 'string'
+          ? ['div', [['b', ['Name: ']], ['span', [o.name]]]]
+          : [],
+        typeof o.fileName === 'string'
+          ? ['div', [['b', ['File name: ']], ['span', [o.fileName]]]]
+          : [],
+        typeof o.lineNumber === 'number'
+          ? ['div', [['b', ['Line number: ']], ['span', [o.lineNumber]]]]
+          : [],
+        typeof o.columnNumber === 'number'
+          ? ['div', [['b', ['Column number: ']], ['span', [o.columnNumber]]]]
+          : [],
+        typeof o.stack === 'string'
+          ? ['div', [['b', ['Stack: ']], ['span', [o.stack]]]]
+          : [],
+        ['b', ['Cause: ']], ['div', {class: 'causeHolder'}, [
+          ['button', {$on: {click (/** @type {Event} */ e) {
+            e.preventDefault();
+            const {target} = e;
+            const causeContents = /** @type {HTMLDivElement} */ (
+              /** @type {HTMLElement} */ (target).nextElementSibling
+            );
+            causeContents.hidden = !causeContents.hidden;
+            /** @type {HTMLElement} */ (
+              target
+            ).textContent = causeContents.hidden ? '+' : '-';
+          }}}, ['-']],
+          ['div', {class: 'causeContents'}, [
+            o.cause
+              ? this.viewUI({
+                format,
+                value: o.cause
+              })
+              : ''
+          ]]
+        ]]
+      ]
+    ]);
+  },
+  editUI ({typeNamespace, value = {
+    message: '',
+    name: '',
+    fileName: '',
+    lineNumber: '',
+    columnNumber: '',
+    stack: '',
+    cause: undefined
+  }}) {
+    /**
+     * @param {Event} e
+     * @this {HTMLInputElement}
+     * @returns {void}
+     */
+    const click = function (e) {
+      /** @type {HTMLElement} */ (
+        /** @type {HTMLElement} */ (
+          this.parentNode
+        ).nextElementSibling
+      // eslint-disable-next-line @stylistic/space-unary-ops -- TS
+      ).hidden = !
+      /** @type {HTMLInputElement} */
+      (e.target).checked;
+    };
+    // eslint-disable-next-line consistent-this -- Clearer
+    const component = this;
+
+    if (typeof value.cause === 'object') {
+      setTimeout(() => {
+        /** @type {HTMLElement} */ ($e(
+          div, '.cause'
+        )).click();
+      });
+    }
+
+    const div = /** @type {HTMLDivElement} */ (jml(
+      'div',
+      {dataset: {type: 'error'}},
+      /** @type {import('jamilih').JamilihChildren} */ ([
+        ['div', [
+          ['label', [
+            'Message? ',
+            ['input', {
+              class: 'message',
+              type: 'checkbox', checked: typeof value.message === 'string',
+              $on: {
+                click
+              }
+            }]
+          ]],
+          ' ',
+          ['label', {
+            hidden: typeof value.message !== 'string'
+          }, [
+            'Message ',
+            ['input', {
+              class: 'message',
+              name: `${typeNamespace}-error-message`,
+              value: value.message
+            }]
+          ]]
+        ]],
+        ['div', [
+          ['label', [
+            'Name? ',
+            ['input', {
+              class: 'name',
+              type: 'checkbox', checked: typeof value.name === 'string',
+              $on: {
+                click
+              }
+            }]
+          ]],
+          ' ',
+          ['label', {
+            hidden: typeof value.name !== 'string'
+          }, [
+            'Name ',
+            ['input', {
+              class: 'name',
+              name: `${typeNamespace}-error-name`,
+              value: value.name
+            }]
+          ]]
+        ]],
+        ['br'],
+        ['div', [
+          ['label', [
+            'File name? ',
+            ['input', {
+              class: 'fileName',
+              type: 'checkbox', checked: typeof value.fileName === 'string',
+              $on: {
+                click
+              }
+            }]
+          ]],
+          ' ',
+          ['label', {
+            hidden: typeof value.fileName !== 'string'
+          }, [
+            'File name ',
+            ['input', {
+              class: 'fileName',
+              name: `${typeNamespace}-error-fileName`,
+              value: value.fileName
+            }]
+          ]]
+        ]],
+        ['label', [
+          'Line number ',
+          ['input', {
+            class: 'lineNumber',
+            name: `${typeNamespace}-error-lineNumber`,
+            type: 'number', step: 'any', value: value.lineNumber
+          }]
+        ]],
+        ['br'],
+        ['label', [
+          'Column number ',
+          ['input', {
+            class: 'columnNumber',
+            name: `${typeNamespace}-error-columnNumber`,
+            type: 'number', step: 'any', value: value.columnNumber
+          }]
+        ]],
+        ['div', [
+          ['label', [
+            'Stack? ',
+            ['input', {
+              class: 'stack',
+              type: 'checkbox', checked: typeof value.stack === 'string',
+              $on: {
+                click
+              }
+            }]
+          ]],
+          ['label', {
+            hidden: typeof value.stack !== 'string'
+          }, [
+            'Stack ',
+            ['textarea', {
+              class: 'stack',
+              name: `${typeNamespace}-error-stack`
+            }, [
+              value.stack
+            ]]
+          ]]
+        ]],
+        ['label', [
+          'Cause? ',
+          ['input', {
+            class: 'cause',
+            type: 'checkbox',
+            $on: {
+              click (e) {
+                click.call(/** @type {HTMLInputElement} */ (this), e);
+                const causeHolder = /** @type {Element} */ (
+                  /** @type {Element} */ (
+                    this.parentElement
+                  ).nextElementSibling
+                );
+                const causeContents = $e(causeHolder, '.causeContents');
+                if (!causeContents?.children.length) {
+                  const editui = component.editUI({
+                    typeNamespace,
+                    value: value.cause
+                  });
+                  jml(...editui, causeContents);
+                }
+              }
+            }
+          }]
+        ]],
+        ['div', {class: 'causeHolder', hidden: true}, [
+          ['label', ['Cause ']],
+          ['button', {$on: {click (/** @type {Event} */ e) {
+            e.preventDefault();
+            const {target} = e;
+            const causeContents = /** @type {HTMLDivElement} */ ($e(
+              /** @type {HTMLElement} */
+              (/** @type {HTMLElement} */ (target).closest('.causeHolder')),
+              '.causeContents'
+            ));
+            causeContents.hidden = !causeContents.hidden;
+            /** @type {HTMLElement} */ (
+              target
+            ).textContent = causeContents.hidden ? '+' : '-';
+          }}}, ['-']],
+          ['div', {class: 'causeContents'}]
+        ]]
+      ])
+    ));
+
+    return [div];
+  }
+};
+
+export default errorType;

package/src/fundamentalTypes/mapType.js

@@ -0,0 +1,34 @@
+import arrayType from './arrayType.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const mapType = {
+  option: ['Map'],
+  array: true,
+  map: true,
+  regexEndings: [',', ')'],
+  stringRegexBegin: /^Map\(/u,
+  stringRegexEnd: /^\)/u,
+  toValue (...args) {
+    return arrayType.toValue.apply(this, args);
+  },
+  getValue (...args) {
+    return arrayType.getValue.apply(this, args);
+  },
+  getInput (...args) {
+    return arrayType.getInput.apply(this, args);
+  },
+  viewUI ({...args}) {
+    return arrayType.viewUI.call(this, {
+      ...args, type: 'map'
+    });
+  },
+  editUI ({...args}) {
+    return arrayType.editUI.call(this, {
+      ...args, type: 'map'
+    });
+  }
+};
+
+export default mapType;

package/src/fundamentalTypes/nullType.js

@@ -22,8 +22,7 @@ const nullType = {
         ['input', {
           type: 'checkbox',
           name: `${typeNamespace}-null`,
-          checked: true,
-          disabled: true
+          checked: true
         }]
       ]]
     ]];

package/src/fundamentalTypes/objectReferenceType.js

@@ -21,7 +21,8 @@ const objectReferenceType = {
       contexts: [
         'arrayNonindexKeys',
         // 'sparseArrays',
-        'object'
+        'object',
+        'set'
       ]
     }
   },

package/src/fundamentalTypes/regexpType.js

@@ -20,11 +20,11 @@ const regexpType = {
     if (typeof this.stringRegex !== 'function') {
       throw new TypeError('Guard for TS');
     }
-    const [, str, flags] = s.match(
+    const [, str, flags] = /** @type {RegExpMatchArray} */ (s.match(
       /** @type {Required<import('../types.js').TypeObject>} */ (
         this
       ).stringRegex()
-    ) || [];
+    ));
     return {value: new RegExp(str, flags)};
   },
   getInput ({root}) {

package/src/fundamentalTypes/setType.js

@@ -0,0 +1,34 @@
+import arrayType from './arrayType.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const setType = {
+  option: ['Set'],
+  array: true,
+  set: true,
+  regexEndings: [',', ')'],
+  stringRegexBegin: /^Set\(/u,
+  stringRegexEnd: /^\)/u,
+  toValue (...args) {
+    return arrayType.toValue.apply(this, args);
+  },
+  getValue (...args) {
+    return arrayType.getValue.apply(this, args);
+  },
+  getInput (...args) {
+    return arrayType.getInput.apply(this, args);
+  },
+  viewUI ({...args}) {
+    return arrayType.viewUI.call(this, {
+      ...args, type: 'set'
+    });
+  },
+  editUI ({...args}) {
+    return arrayType.editUI.call(this, {
+      ...args, type: 'set'
+    });
+  }
+};
+
+export default setType;

package/src/fundamentalTypes/sparseUndefinedType.js

@@ -14,7 +14,7 @@ const sparseUndefinedType = {
       ]
     }
   },
-  toValue (_s) {
+  toValue (/* _s */) {
     return {value: undefined};
   },
   getValue () {
@@ -38,8 +38,7 @@ const sparseUndefinedType = {
         ['input', {
           type: 'checkbox',
           name: `${typeNamespace}-sparseUndefined`,
-          checked: true,
-          disabled: true
+          checked: true
         }]
       ]]
     ]];

package/src/fundamentalTypes/undefinedType.js

@@ -6,7 +6,7 @@ import {$e} from '../utils/templateUtils.js';
 const undefinedType = {
   stringRegex: /^undefined$/u,
   option: ['Explicit undefined'], // Explicit undefined only
-  toValue (_s) {
+  toValue (/* _s */) {
     return {value: undefined};
   },
   getValue () {
@@ -26,8 +26,7 @@ const undefinedType = {
         ['input', {
           type: 'checkbox',
           name: `${typeNamespace}-undef`,
-          checked: true,
-          disabled: true
+          checked: true
         }]
       ]]
     ]];

package/src/jsoe.css

@@ -52,6 +52,9 @@ input:invalid {
 [data-type="blobHTML"] {
   background-color: sandybrown;
 }
+[data-type="error"], [data-type="errors"] {
+  background-color: red;
+}
 
 [class^="propertyName-"] {
   background-color: yellow;