@es-joy/jsoe 0.13.8 → 0.15.0

package/src/{fundamentalTypes → superTypes}/dommatrixType.js

@@ -1,19 +1,31 @@
 import {$e} from '../utils/templateUtils.js';
+import {toStringTag} from '../vendor-imports.js';
 
 let idx = 0;
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').SuperTypeObject}
  */
 const dommatrixType = {
   option: ['DOMMatrix'],
-  stringRegex: /^DOMMatrix\((.*)\)$/u,
-  toValue (s) {
+  childTypes: ['dommatrixreadonly'],
+  stringRegex: /^(?<domMatrixClass>DOMMatrix|DOMMatrixReadOnly)\((?<innerContent>.*)\)$/u,
+  toValue (s, rootInfo) {
+    const {groups: {
+      domMatrixClass
+    /* istanbul ignore next -- Should always be found */
+    } = {}} = /** @type {RegExpMatchArray} */ (
+      /** @type {import('../types.js').RootInfo} */ (rootInfo).match
+    );
     const o = JSON.parse(s);
 
+    const DOMMatrixClass = domMatrixClass === 'DOMMatrix'
+      ? DOMMatrix
+      : DOMMatrixReadOnly;
+
     const dommatrix = Object.hasOwn(o, 'a')
-      ? new DOMMatrix([o.a, o.b, o.c, o.d, o.e, o.f])
-      : new DOMMatrix([
+      ? new DOMMatrixClass([o.a, o.b, o.c, o.d, o.e, o.f])
+      : new DOMMatrixClass([
         o.m11, o.m12, o.m13, o.m14,
         o.m21, o.m22, o.m23, o.m24,
         o.m31, o.m32, o.m33, o.m34,
@@ -23,7 +35,7 @@ const dommatrixType = {
     return {value: dommatrix};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
   },
   setValue ({root, value: o}) {
     const {is2D} = o;
@@ -109,8 +121,23 @@ const dommatrixType = {
         $e(root, '.m44')
       ).value = o.m44;
     }
+
+    if (toStringTag(o) === 'DOMMatrix') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.dommatrix-readonly-readwrite')
+      ).checked = true;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.dommatrix-readonly-readonly')
+      ).checked = true;
+    }
   },
   getValue ({root}) {
+    const isReadWrite = /** @type {HTMLInputElement} */ (
+      $e(root, '.dommatrix-readonly-readwrite')
+    ).checked;
+    const DOMMatrixClass = isReadWrite ? DOMMatrix : DOMMatrixReadOnly;
+
     const aType = /** @type {HTMLInputElement} */ (
       $e(root, '.a')
     ).value;
@@ -132,7 +159,7 @@ const dommatrixType = {
       const f = Number(/** @type {HTMLInputElement} */ (
         $e(root, '.f')
       ).value);
-      return new DOMMatrix([a, b, c, d, e, f]);
+      return new DOMMatrixClass([a, b, c, d, e, f]);
     }
 
     const m11 = Number(/** @type {HTMLInputElement} */ (
@@ -187,7 +214,7 @@ const dommatrixType = {
       $e(root, '.m44')
     ).value);
 
-    return new DOMMatrix([
+    return new DOMMatrixClass([
       m11, m12, m13, m14,
       m21, m22, m23, m24,
       m31, m32, m33, m34,
@@ -195,8 +222,11 @@ const dommatrixType = {
     ]);
   },
   viewUI ({value}) {
+    const isReadWrite = toStringTag(value) === 'DOMMatrix';
     return ['div', {dataset: {type: 'dommatrix'}}, [
-      ['b', {class: 'emphasis'}, ['DOMMatrix']],
+      ['b', {class: 'emphasis'}, [
+        isReadWrite ? 'DOMMatrix' : 'DOMMatrixReadOnly'
+      ]],
       value.is2D
         ? ['div', [
           ['b', ['a ']],
@@ -276,11 +306,34 @@ const dommatrixType = {
     const {is2D} = value;
     // eslint-disable-next-line @stylistic/max-len -- Long
     return ['div', {dataset: {type: 'dommatrix'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['div', [
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'dommatrix-readonly-readwrite',
+            name: `${typeNamespace}-dommatrix-readonly-${idx}`,
+            value: 'readwrite',
+            checked: toStringTag(value) !== 'DOMMatrixReadOnly'
+          }],
+          'Readwrite'
+        ]],
+        ' ',
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'dommatrix-readonly-readonly',
+            name: `${typeNamespace}-dommatrix-readonly-${idx}`,
+            value: 'readonly',
+            checked: toStringTag(value) === 'DOMMatrixReadOnly'
+          }],
+          'Read-only'
+        ]]
+      ]],
       ['div', {
         $on: {
           click (e) {
             const {target} = e;
-            /* c8 ignore next 3 */
+            /* istanbul ignore if */
             if (/** @type {HTMLInputElement} */ (target).type !== 'radio') {
               return;
             }

package/src/{fundamentalTypes → superTypes}/dompointType.js

@@ -1,17 +1,29 @@
 import {$e} from '../utils/templateUtils.js';
+import {toStringTag} from '../vendor-imports.js';
+
+let idx = 0;
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').SuperTypeObject}
  */
 const dompointType = {
   option: ['DOMPoint'],
-  stringRegex: /^DOMPoint\((.*)\)$/u,
-  toValue (s) {
+  childTypes: ['dompointreadonly'],
+  stringRegex: /^(?<domPointClass>DOMPoint|DOMPointReadOnly)\((?<innerContent>.*)\)$/u,
+  toValue (s, rootInfo) {
+    const {groups: {
+      domPointClass
+    /* istanbul ignore next -- Should always be found */
+    } = {}} = /** @type {RegExpMatchArray} */ (
+      /** @type {import('../types.js').RootInfo} */ (rootInfo).match
+    );
     const {x, y, z, w} = JSON.parse(s);
-    return {value: new DOMPoint(x, y, z, w)};
+    return {value: new (
+      domPointClass === 'DOMPoint' ? DOMPoint : DOMPointReadOnly
+    )(x, y, z, w)};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
   },
   setValue ({root, value}) {
     /** @type {HTMLInputElement} */ (
@@ -26,6 +38,16 @@ const dompointType = {
     /** @type {HTMLInputElement} */ (
       $e(root, '.w')
     ).value = String(value.w);
+
+    if (toStringTag(value) === 'DOMPoint') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.dompoint-readonly-readwrite')
+      ).checked = true;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.dompoint-readonly-readonly')
+      ).checked = true;
+    }
   },
   getValue ({root}) {
     const x = Number(/** @type {HTMLInputElement} */ (
@@ -40,11 +62,18 @@ const dompointType = {
     const w = Number(/** @type {HTMLInputElement} */ (
       $e(root, '.w')
     ).value);
-    return new DOMPoint(x, y, z, w);
+
+    const isReadWrite = /** @type {HTMLInputElement} */ (
+      $e(root, '.dompoint-readonly-readwrite')
+    ).checked;
+    return new (isReadWrite ? DOMPoint : DOMPointReadOnly)(x, y, z, w);
   },
   viewUI ({value}) {
+    const isReadWrite = toStringTag(value) === 'DOMPoint';
     return ['div', {dataset: {type: 'dompoint'}}, [
-      ['b', {class: 'emphasis'}, ['DOMPoint']],
+      ['b', {class: 'emphasis'}, [
+        isReadWrite ? 'DOMPoint' : 'DOMPointReadOnly'
+      ]],
       ['br'],
       ['b', ['x ']],
       value.x,
@@ -65,8 +94,32 @@ const dompointType = {
     z: '',
     w: ''
   }}) {
+    idx++;
     // eslint-disable-next-line @stylistic/max-len -- Long
     return ['div', {dataset: {type: 'dompoint'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['div', [
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'dompoint-readonly-readwrite',
+            name: `${typeNamespace}-dompoint-readonly-${idx}`,
+            value: 'readwrite',
+            checked: toStringTag(value) !== 'DOMPointReadOnly'
+          }],
+          'Readwrite'
+        ]],
+        ' ',
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'dompoint-readonly-readonly',
+            name: `${typeNamespace}-dompoint-readonly-${idx}`,
+            value: 'readonly',
+            checked: toStringTag(value) === 'DOMPointReadOnly'
+          }],
+          'Read-only'
+        ]]
+      ]],
       ['label', [
         'x: ',
         ['input', {

package/src/{fundamentalTypes → superTypes}/domrectType.js

@@ -1,17 +1,30 @@
 import {$e} from '../utils/templateUtils.js';
+import {toStringTag} from '../vendor-imports.js';
+
+let idx = 0;
 
 /**
- * @type {import('../types.js').TypeObject}
+ * @type {import('../types.js').SuperTypeObject}
  */
 const domrectType = {
   option: ['DOMRect'],
-  stringRegex: /^DOMRect\((.*)\)$/u,
-  toValue (s) {
+  childTypes: ['domrectreadonly'],
+  stringRegex: /^(?<domRectClass>DOMRect|DOMRectReadOnly)\((?<innerContent>.*)\)$/u,
+  toValue (s, rootInfo) {
+    const {groups: {
+      domRectClass
+    /* istanbul ignore next -- Should always be found */
+    } = {}} = /** @type {RegExpMatchArray} */ (
+      /** @type {import('../types.js').RootInfo} */ (rootInfo).match
+    );
     const {x, y, width, height} = JSON.parse(s);
-    return {value: new DOMRect(x, y, width, height)};
+    return {
+      value: new (
+        domRectClass === 'DOMRect' ? DOMRect : DOMRectReadOnly
+      )(x, y, width, height)};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
   },
   setValue ({root, value}) {
     /** @type {HTMLInputElement} */ (
@@ -26,6 +39,16 @@ const domrectType = {
     /** @type {HTMLInputElement} */ (
       $e(root, '.height')
     ).value = String(value.height);
+
+    if (toStringTag(value) === 'DOMRect') {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.domrect-readonly-readwrite')
+      ).checked = true;
+    } else {
+      /** @type {HTMLInputElement} */ (
+        $e(root, '.domrect-readonly-readonly')
+      ).checked = true;
+    }
   },
   getValue ({root}) {
     const x = Number(/** @type {HTMLInputElement} */ (
@@ -40,11 +63,16 @@ const domrectType = {
     const height = Number(/** @type {HTMLInputElement} */ (
       $e(root, '.height')
     ).value);
-    return new DOMRect(x, y, width, height);
+
+    const isReadWrite = /** @type {HTMLInputElement} */ (
+      $e(root, '.domrect-readonly-readwrite')
+    ).checked;
+    return new (isReadWrite ? DOMRect : DOMRectReadOnly)(x, y, width, height);
   },
   viewUI ({value}) {
+    const isReadWrite = toStringTag(value) === 'DOMRect';
     return ['div', {dataset: {type: 'domrect'}}, [
-      ['b', {class: 'emphasis'}, ['DOMRect']],
+      ['b', {class: 'emphasis'}, [isReadWrite ? 'DOMRect' : 'DOMRectReadOnly']],
       ['br'],
       ['b', ['x ']],
       value.x,
@@ -65,8 +93,32 @@ const domrectType = {
     width: '',
     height: ''
   }}) {
+    idx++;
     // eslint-disable-next-line @stylistic/max-len -- Long
     return ['div', {dataset: {type: 'domrect'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+      ['div', [
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'domrect-readonly-readwrite',
+            name: `${typeNamespace}-domrect-readonly-${idx}`,
+            value: 'readwrite',
+            checked: toStringTag(value) !== 'DOMRectReadOnly'
+          }],
+          'Readwrite'
+        ]],
+        ' ',
+        ['label', [
+          ['input', {
+            type: 'radio',
+            class: 'domrect-readonly-readonly',
+            name: `${typeNamespace}-domrect-readonly-${idx}`,
+            value: 'readonly',
+            checked: toStringTag(value) === 'DOMRectReadOnly'
+          }],
+          'Read-only'
+        ]]
+      ]],
       ['label', [
         'x: ',
         ['input', {

package/src/superTypes/errorsSpecialType.js

@@ -44,7 +44,7 @@ if (typeof InternalError !== 'undefined') {
 const specialErrors = [...specialErrorsMap.keys()];
 
 /**
- * @type {import('./SpecialNumberType.js').SuperTypeObject}
+ * @type {import('../types.js').SuperTypeObject}
  */
 const errorsSpecialType = {
   option: ['Special errors'],

package/src/types.js

@@ -38,9 +38,11 @@ import fileType from './fundamentalTypes/fileType.js';
 import filelistType from './fundamentalTypes/filelistType.js';
 import blobType from './fundamentalTypes/blobType.js';
 import domexceptionType from './fundamentalTypes/domexceptionType.js';
-import domrectType from './fundamentalTypes/domrectType.js';
-import dompointType from './fundamentalTypes/dompointType.js';
-import dommatrixType from './fundamentalTypes/dommatrixType.js';
+import domrectType from './superTypes/domrectType.js';
+import dompointType from './superTypes/dompointType.js';
+import dommatrixType from './superTypes/dommatrixType.js';
+import buffersourceType from './superTypes/buffersourceType.js';
+import noneditableType from './fundamentalTypes/noneditableType.js';
 
 /**
  * Utility to retrieve the property value given a legend element.
@@ -266,6 +268,16 @@ export const getPropertyValueFromLegend = (legend) => {
 * ) => void} TypeObjectSetValue
  */
 
+/**
+ * @typedef {(
+ *   s: string, info?: RootInfo
+ * ) => {
+ *   value?: StructuredCloneValue,
+ *   remnant?: string,
+ *   assign?: false
+ * }} ToValue
+ */
+
 /**
  * @typedef {object} TypeObject
  * @property {[
@@ -295,13 +307,7 @@ export const getPropertyValueFromLegend = (legend) => {
  *   check whether this subtype matches
  * @property {string} [superType] The greater fundamental type to which
  *   the type belongs
- * @property {(
- *   s: string, info?: RootInfo
- * ) => {
- *   value?: StructuredCloneValue,
- *   remnant?: string,
- *   assign?: false
- * }} toValue Converts from string to value. May use
+ * @property {ToValue} [toValue] Converts from string to value. May use
  *   `stringRegex` to find components.
  * @property {(info: {
  *   root: HTMLDivElement,
@@ -366,13 +372,19 @@ export const getPropertyValueFromLegend = (legend) => {
  *   "objectReference"|"array"|"object"|"date"|"userObject"|"undef"|
  *   "SpecialRealNumber"|"SpecialNumber"|"regexp"|"BooleanObject"|
  *   "NumberObject"|"StringObject"|"map"|"set"|"file"|"filelist"|"blobHTML"|
- *   "arraybuffer"|"arraybufferview"|"dataview"|"imagedata"|"imagebitmap"|
+ *   "buffersource"|"dataview"|"imagedata"|"imagebitmap"|
  *   "int8array"|"uint8array"|"uint8clampedarray"|"int16array"|"uint16array"|
  *   "int32array"|"uint32array"|"float32array"|"float64array"|"ValidDate"|
  *   "arrayNonindexKeys"|"error"|"errors"|"blob"|"domexception"|"domrect"|
- *   "dompoint"|"dommatrix"} AvailableType
+ *   "dompoint"|"dommatrix"|"resurrectable"} AvailableType
  */
 
+/**
+ * @typedef {TypeObject & {
+*   childTypes: string[]
+* }} SuperTypeObject
+*/
+
 /**
  *
  */
@@ -436,12 +448,9 @@ class Types {
       dompoint: dompointType,
       dommatrix: dommatrixType,
 
-      arraybuffer: {
-        option: ['ArrayBuffer']
-      },
-      arraybufferview: {
-        option: ['ArrayBufferView']
-      },
+      resurrectable: noneditableType,
+
+      buffersource: buffersourceType,
       dataview: {
         option: ['DataView']
       },
@@ -594,6 +603,7 @@ class Types {
     // Ensure `stateObj` remains a reference if present
     return typeObject.getValue({
       root,
+      /* istanbul ignore next -- Guard */
       stateObj: stateObj ?? {
         types: this
       },
@@ -638,11 +648,12 @@ class Types {
 
   /** @type {GetOptionForType} */
   getOptionForType (type) {
+    const availableType = /** @type {TypeObject} */ (
+      this.availableTypes[type]
+    );
     /** @type {[string, {value?: AvailableType, title?: string}?]} */
     const optInfo = [
-      ...(/** @type {TypeObject} */ (
-        this.availableTypes[type]
-      )).option
+      ...availableType.option
     ];
     optInfo[1] = {value: type, ...(optInfo[1])};
     return /** @type {[string, {value: AvailableType, title?: string}]} */ (
@@ -658,6 +669,7 @@ class Types {
     if (!typesForFormatAndState) {
       throw new Error('Unexpected type for format and state');
     }
+
     return typesForFormatAndState.map((type) => {
       return this.getOptionForType(type);
     });
@@ -840,7 +852,12 @@ class Types {
       // console.log('s0', s, '::', remnant, match);
       let valObj;
       try {
-        valObj = /** @type {TypeObject} */ (found[1]).toValue(
+        const typeObj = /** @type {TypeObject} */ (found[1]);
+        /* istanbul ignore if -- TS guard */
+        if (!typeObj.toValue) {
+          throw new Error('Type has no `toValue` method');
+        }
+        valObj = typeObj.toValue(
           mtch.groups?.innerContent || innerContent || s, {
             types: this,
             format,

package/src/utils/media.js

@@ -75,9 +75,10 @@ async function getUserMedia (constraints) {
   let stream = null;
   try {
     stream = await navigator.mediaDevices.getUserMedia(constraints);
-  /* c8 ignore next 4 */
   } catch (err) {
+    /* istanbul ignore next */
     console.error('err', err);
+    /* istanbul ignore next */
     return null;
   }
   return stream;
@@ -93,8 +94,8 @@ async function startScreenCapture (displayMediaOptions) {
   try {
     captureStream =
       await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-  /* c8 ignore next 3 */
   } catch (err) {
+    /* istanbul ignore next */
     console.error(`Error: ${err}`);
   }
   return captureStream;

package/src/vendor-imports.js

@@ -2,6 +2,7 @@ export {jml, body, nbsp, $} from 'jamilih';
 // export {jml, body, nbsp, $} from '../node_modules/jamilih/dist/jml-es.js';
 
 export {
-  getJSONType, Typeson, unescapeKeyPathComponent, structuredCloningThrowing
+  getJSONType, Typeson, unescapeKeyPathComponent, structuredCloningThrowing,
+  resurrectable, toStringTag
 } from 'typeson-registry';
 // } from '../node_modules/typeson-registry/dist/index.js';