@es-joy/jsoe 0.10.0 → 0.11.0

package/CHANGES.md

@@ -1,5 +1,9 @@
 # CHANGES TO `@es-joy/jsoe`
 
+## 0.11.0
+
+- feat: support `DOMException`, `DOMPoint`, `DOMMatrix`, `DOMRect` types
+
 ## 0.10.0
 
 - feat: add `filelist` type

package/README.md

@@ -30,6 +30,10 @@ Supported types include:
 - `Blob`
 - `Boolean` object
 - `Date`
+- `DOMException`,
+- `DOMMatrix`
+- `DOMPoint`
+- `DOMRect`
 - `Error`
 - `TypeError`, `RangeError`, `SyntaxError`, `ReferenceError`, `EvalError`,
     `URIError`, `AggregateError`, `InternalError`
@@ -107,10 +111,6 @@ Supported supertypes include:
             1. Web/API types
                 1. imagedata, imagebitmap
                 1. cryptokey
-                1. domexception
-                1. domrect
-                1. dompoint
-                1. dommatrix
             1. Our own custom derivative types? (e.g., MIDI using TypedArray)
 1. Expand subtypes
     1. String

package/demo/index.js

@@ -341,7 +341,17 @@ setTimeout(async function () {
           }),
           new Blob(['abc'], {
             type: 'text/plain'
-          })
+          }),
+          new DOMException('some message', 'someName'),
+          new DOMRect(1, 2, 3, 4),
+          new DOMPoint(1, 2, 3, 4),
+          new DOMMatrix([1, 2, 3, 4, 5, 6]),
+          new DOMMatrix([
+            1, 2, 3, 4,
+            5, 6, 7, 8,
+            9, 10, 11, 12,
+            13, 14, 15, 16
+          ])
         ],
         typeNamespace: 'demo-type-choices-only-initial-value'
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-joy/jsoe",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./src/index.js",

package/src/formats/structuredCloning.js

@@ -462,12 +462,11 @@ const structuredCloning = {
       'file',
       'set',
       'map',
-      'filelist'
-      // Ok:
-      // 'domexception',
-      // 'domrect',
-      // 'dompoint',
-      // 'dommatrix',
+      'filelist',
+      'domexception',
+      'domrect',
+      'dompoint',
+      'dommatrix'
 
       // Ok, but will need some work and/or decisions on how to present:
       // 'cryptokey',

package/src/fundamentalTypes/domexceptionType.js

@@ -0,0 +1,124 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const domexceptionType = {
+  option: ['DOMException'],
+  stringRegex: /^DOMException\((.*)\)$/u,
+  toValue (s) {
+    const {message, name} = JSON.parse(s);
+    return {value: new DOMException(message, name)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.message')
+    ).value = value.message;
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.name')
+    ).value = value.name;
+  },
+  getValue ({root}) {
+    const message = /** @type {HTMLInputElement} */ (
+      $e(root, '.message')
+    ).value;
+    const name = /** @type {HTMLInputElement} */ (
+      $e(root, '.name')
+    ).value;
+    return new DOMException(message, name);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'domexception'}}, [
+      ['b', ['Message ']],
+      value.message,
+      ['br'],
+      ['b', ['Name ']],
+      value.name,
+      ['br'],
+      ['b', ['Code ']],
+      value.code
+    ]];
+  },
+  editUI ({typeNamespace, value = ''}) {
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'domexception'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['label', [
+        'Name: ',
+        ['input', {
+          class: 'name',
+          name: `${typeNamespace}-domexception-name`, value
+        }]
+      ]],
+      ' ',
+      ['select', {
+        class: 'predefinedNames',
+        $on: {
+          /**
+           * @this {HTMLSelectElement}
+           */
+          change () {
+            /** @type {HTMLInputElement} */
+            ($e(
+              /** @type {HTMLLabelElement} */ (
+                this.previousElementSibling
+              ),
+              '.name'
+            )).value = this.value;
+          }
+        }
+      }, [
+        ['option', {value: ''}, [
+          '(Choose an optional predefined name)'
+        ]],
+        ...[
+          'IndexSizeError',
+          'HierarchyRequestError',
+          'WrongDocumentError',
+          'InvalidCharacterError',
+          'NoModificationAllowedError',
+          'NotFoundError',
+          'NotSupportedError',
+          'InvalidStateError',
+          'InUseAttributeError',
+          'SyntaxError',
+          'InvalidModificationError',
+          'NamespaceError',
+          'InvalidAccessError',
+          'TypeMismatchError',
+          'SecurityError',
+          'NetworkError',
+          'AbortError',
+          'URLMismatchError',
+          'QuotaExceededError',
+          'TimeoutError',
+          'InvalidNodeTypeError',
+          'DataCloneError',
+          'EncodingError',
+          'NotReadableError',
+          'UnknownError',
+          'ConstraintError',
+          'DataError',
+          'TransactionInactiveError',
+          'ReadOnlyErrorVersionError',
+          'OperationError',
+          'NotAllowedError'
+        ].map((name) => {
+          return ['option', [name]];
+        })
+      ]],
+      ['br'],
+      ['label', [
+        'Message: ',
+        ['input', {
+          class: 'message',
+          name: `${typeNamespace}-domexception-message`, value
+        }]
+      ]]
+    ])];
+  }
+};
+
+export default domexceptionType;

package/src/fundamentalTypes/dommatrixType.js

@@ -0,0 +1,357 @@
+import {$e} from '../utils/templateUtils.js';
+
+let idx = 0;
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const dommatrixType = {
+  option: ['DOMMatrix'],
+  stringRegex: /^DOMMatrix\((.*)\)$/u,
+  toValue (s) {
+    const o = JSON.parse(s);
+
+    const dommatrix = Object.hasOwn(o, 'a')
+      ? new DOMMatrix([o.a, o.b, o.c, o.d, o.e, o.f])
+      : new DOMMatrix([
+        o.m11, o.m12, o.m13, o.m14,
+        o.m21, o.m22, o.m23, o.m24,
+        o.m31, o.m32, o.m33, o.m34,
+        o.m41, o.m42, o.m43, o.m44
+      ]);
+
+    return {value: dommatrix};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value: o}) {
+    const {is2D} = o;
+    /** @type {HTMLInputElement} */ ($e(root, '.d2')).checked = is2D;
+    /** @type {HTMLInputElement} */ ($e(root, '.d3')).checked = !is2D;
+
+    /** @type {HTMLDivElement} */ (
+      $e(root, '.holder2d')
+    ).hidden = /** @type {HTMLInputElement} */ !is2D;
+    /** @type {HTMLDivElement} */ (
+      $e(root, '.holder3d')
+    ).hidden = /** @type {HTMLInputElement} */ is2D;
+
+    if (is2D) {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.a')
+      ).value = o.a;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.b')
+      ).value = o.b;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.c')
+      ).value = o.c;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.d')
+      ).value = o.d;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.e')
+      ).value = o.e;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.f')
+      ).value = o.f;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m11')
+      ).value = o.m11;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m12')
+      ).value = o.m12;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m13')
+      ).value = o.m13;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m14')
+      ).value = o.m14;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m21')
+      ).value = o.m21;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m22')
+      ).value = o.m22;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m23')
+      ).value = o.m23;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m24')
+      ).value = o.m24;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m31')
+      ).value = o.m31;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m32')
+      ).value = o.m32;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m33')
+      ).value = o.m33;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m34')
+      ).value = o.m34;
+
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m41')
+      ).value = o.m41;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m42')
+      ).value = o.m42;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m43')
+      ).value = o.m43;
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.m44')
+      ).value = o.m44;
+    }
+  },
+  getValue ({root}) {
+    const aType = /** @type {HTMLInputElement} */ (
+      $e(root, '.a')
+    ).value;
+
+    if (aType) {
+      const a = Number(aType);
+      const b = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.b')
+      ).value);
+      const c = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.c')
+      ).value);
+      const d = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.d')
+      ).value);
+      const e = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.e')
+      ).value);
+      const f = Number(/** @type {HTMLInputElement} */ (
+        $e(root, '.f')
+      ).value);
+      return new DOMMatrix([a, b, c, d, e, f]);
+    }
+
+    const m11 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m11')
+    ).value);
+    const m12 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m12')
+    ).value);
+    const m13 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m13')
+    ).value);
+    const m14 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m14')
+    ).value);
+
+    const m21 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m21')
+    ).value);
+    const m22 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m22')
+    ).value);
+    const m23 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m23')
+    ).value);
+    const m24 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m24')
+    ).value);
+
+    const m31 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m31')
+    ).value);
+    const m32 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m32')
+    ).value);
+    const m33 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m33')
+    ).value);
+    const m34 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m34')
+    ).value);
+
+    const m41 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m41')
+    ).value);
+    const m42 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m42')
+    ).value);
+    const m43 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m43')
+    ).value);
+    const m44 = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.m44')
+    ).value);
+
+    return new DOMMatrix([
+      m11, m12, m13, m14,
+      m21, m22, m23, m24,
+      m31, m32, m33, m34,
+      m41, m42, m43, m44
+    ]);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'dommatrix'}}, [
+      value.is2D
+        ? ['div', [
+          ['b', ['a ']],
+          value.a,
+          ['br'],
+          ['b', ['b ']],
+          value.b,
+          ['br'],
+          ['b', ['c ']],
+          value.c,
+          ['br'],
+          ['b', ['d ']],
+          value.d,
+          ['br'],
+          ['b', ['e ']],
+          value.e,
+          ['br'],
+          ['b', ['f ']],
+          value.f
+        ]]
+        : ['div', [
+          ['b', ['m11 ']],
+          value.m11,
+          ['br'],
+          ['b', ['m12 ']],
+          value.m12,
+          ['br'],
+          ['b', ['m13 ']],
+          value.m13,
+          ['br'],
+          ['b', ['m14 ']],
+          value.m14,
+          ['br'],
+
+          ['b', ['m21 ']],
+          value.m21,
+          ['br'],
+          ['b', ['m22 ']],
+          value.m22,
+          ['br'],
+          ['b', ['m23 ']],
+          value.m23,
+          ['br'],
+          ['b', ['m24 ']],
+          value.m24,
+          ['br'],
+
+          ['b', ['m31 ']],
+          value.m31,
+          ['br'],
+          ['b', ['m32 ']],
+          value.m32,
+          ['br'],
+          ['b', ['m33 ']],
+          value.m33,
+          ['br'],
+          ['b', ['m34 ']],
+          value.m34,
+          ['br'],
+
+          ['b', ['m41 ']],
+          value.m41,
+          ['br'],
+          ['b', ['m42 ']],
+          value.m42,
+          ['br'],
+          ['b', ['m43 ']],
+          value.m43,
+          ['br'],
+          ['b', ['m44 ']],
+          value.m44
+        ]]
+    ]];
+  },
+  editUI ({typeNamespace, value = {}}) {
+    idx++;
+    const {is2D} = value;
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'dommatrix'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['div', {
+        $on: {
+          click (e) {
+            const {target} = e;
+            /* c8 ignore next 3 */
+            if (/** @type {HTMLInputElement} */ (target).type !== 'radio') {
+              return;
+            }
+            const parent = /** @type {HTMLDivElement} */ (this.parentElement);
+            /** @type {HTMLDivElement} */ (
+              $e(parent, '.holder2d')
+            ).hidden = /** @type {HTMLInputElement} */ (target).value === '3d';
+            /** @type {HTMLDivElement} */ (
+              $e(parent, '.holder3d')
+            ).hidden = /** @type {HTMLInputElement} */ (target).value === '2d';
+          }
+        }
+      }, [
+        ['label', [
+          '2d',
+          ['input', {
+            class: 'd2',
+            type: 'radio', name: `${typeNamespace}-dommatrix-dimension-${idx}`,
+            value: '2d',
+            checked: Boolean(is2D)
+          }]
+        ]],
+        ' ',
+        ['label', [
+          '3d',
+          ['input', {
+            class: 'd3',
+            type: 'radio', name: `${typeNamespace}-dommatrix-dimension-${idx}`,
+            value: '3d',
+            checked: !is2D
+          }]
+        ]]
+      ]],
+      ['div', {
+        class: 'holder2d',
+        hidden: !is2D
+      }, (['a', 'b', 'c', 'd', 'e', 'f'].flatMap((label) => {
+        return [
+          ['br'],
+          ['label', [
+            label + ': ',
+            ['input', {
+              class: label,
+              name: `${typeNamespace}-dommatrix-${label}`,
+              value: value[label] ?? ''
+            }]
+          ]]
+        ];
+      })).slice(1)],
+      ['div', {
+        class: 'holder3d',
+        hidden: Boolean(is2D)
+      }, ([
+        'm11', 'm12', 'm13', 'm14',
+        'm21', 'm22', 'm23', 'm24',
+        'm31', 'm32', 'm33', 'm34',
+        'm41', 'm42', 'm43', 'm44'
+      ].flatMap((label) => {
+        return [
+          ['br'],
+          ['label', [
+            label + ': ',
+            ['input', {
+              class: label,
+              name: `${typeNamespace}-dommatrix-${label}`,
+              value: value[label] ?? ''
+            }]
+          ]]
+        ];
+      })).slice(1)]
+    ])];
+  }
+};
+
+export default dommatrixType;

package/src/fundamentalTypes/dompointType.js

@@ -0,0 +1,103 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const dompointType = {
+  option: ['DOMPoint'],
+  stringRegex: /^DOMPoint\((.*)\)$/u,
+  toValue (s) {
+    const {x, y, z, w} = JSON.parse(s);
+    return {value: new DOMPoint(x, y, z, w)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value = String(value.x);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value = String(value.y);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.z')
+    ).value = String(value.z);
+    /** @type {HTMLInputElement} */ (
+      $e(root, '.w')
+    ).value = String(value.w);
+  },
+  getValue ({root}) {
+    const x = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.x')
+    ).value);
+    const y = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.y')
+    ).value);
+    const z = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.z')
+    ).value);
+    const w = Number(/** @type {HTMLInputElement} */ (
+      $e(root, '.w')
+    ).value);
+    return new DOMPoint(x, y, z, w);
+  },
+  viewUI ({value}) {
+    return ['div', {dataset: {type: 'dompoint'}}, [
+      ['b', ['x ']],
+      value.x,
+      ['br'],
+      ['b', ['y ']],
+      value.y,
+      ['br'],
+      ['b', ['z ']],
+      value.z,
+      ['br'],
+      ['b', ['w ']],
+      value.w
+    ]];
+  },
+  editUI ({typeNamespace, value = {
+    x: '',
+    y: '',
+    z: '',
+    w: ''
+  }}) {
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return ['div', {dataset: {type: 'dompoint'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['label', [
+        'x: ',
+        ['input', {
+          class: 'x',
+          name: `${typeNamespace}-dompoint-x`, value: value.x
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'y: ',
+        ['input', {
+          class: 'y',
+          name: `${typeNamespace}-dompoint-y`, value: value.y
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'z: ',
+        ['input', {
+          class: 'z',
+          name: `${typeNamespace}-dompoint-z`, value: value.z
+        }]
+      ]],
+      ['br'],
+      ['label', [
+        'w: ',
+        ['input', {
+          class: 'w',
+          name: `${typeNamespace}-dompoint-w`, value: value.w
+        }]
+      ]]
+    ])];
+  }
+};
+
+export default dompointType;