@es-joy/jsoe 0.16.0 → 0.17.0

package/src/fundamentalTypes/bigintObjectType.js

@@ -0,0 +1,64 @@
+import {hasConstructorOf} from '../vendor-imports.js';
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const bigintObjectType = {
+  option: ['BigInt Object'],
+  stringRegex: new RegExp(
+    '^BigIntObject' +
+      '-?' + // Optional negative sign.
+      // How many digits?
+      '[0-9]{1,}' +
+      'n' +
+      '$', // No trailing content.
+    'u'
+  ),
+  valueMatch (x) {
+    return typeof x === 'object' && hasConstructorOf(x, BigInt);
+  },
+  toValue (s) {
+    return {value: new Object(BigInt(s.slice(12, -1)))};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    this.getInput({root}).value = String(value);
+  },
+  validate ({root}) {
+    const val = this.getInput({root}).value;
+    return {
+      message: 'Not a valid BigInt',
+      valid: Boolean(val && (/^-?(\d+)$/u).test(val))
+    };
+  },
+  getValue ({root}) {
+    return new Object(BigInt(this.getInput({root}).value));
+  },
+  /* schema:
+  viewSchemaUI () {
+    // Todo?
+  },
+  */
+  viewUI ({value, specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'bigintObject'},
+      title: specificSchemaObject?.description ?? '(a BigInt Object)'
+    }, [`${String(value)}n`]];
+  },
+  editUI ({typeNamespace, specificSchemaObject, value = ''}) {
+    return ['div', {
+      dataset: {type: 'bigintObject'},
+      title: specificSchemaObject?.description ?? 'BigInt object'
+    }, [
+      ['input', {
+        name: `${typeNamespace}-bigintObject`, type: 'number', step: '1',
+        value
+      }]
+    ]];
+  }
+};
+
+export default bigintObjectType;

package/src/fundamentalTypes/bigintType.js

@@ -14,6 +14,9 @@ const bigintType = {
       '$', // No trailing content.
     'u'
   ),
+  valueMatch (x) {
+    return typeof x === 'bigint';
+  },
   toValue (s) {
     return {value: BigInt(s.slice(0, -1))};
   },
@@ -38,13 +41,36 @@ const bigintType = {
     // Todo?
   },
   */
-  viewUI ({value}) {
-    return ['i', {dataset: {type: 'bigint'}}, [`${String(value)}n`]];
+  viewUI ({value, specificSchemaObject}) {
+    return ['i', {
+      dataset: {type: 'bigint'},
+      title: specificSchemaObject?.description ?? '(a BigInt)'
+    }, [
+      `${String(value)}n`
+    ]];
   },
-  editUI ({typeNamespace, value = ''}) {
-    return ['div', {dataset: {type: 'bigint'}}, [
+  editUI ({typeNamespace, specificSchemaObject, value}) {
+    const bigintSchemaObject = /** @type {import('zodex').SzBigInt} */ (
+      specificSchemaObject
+    );
+    return ['div', {
+      dataset: {type: 'bigint'},
+      title: specificSchemaObject?.description ?? 'BigInt'
+    }, [
       ['input', {
-        name: `${typeNamespace}-bigint`, type: 'number', step: 'any', value
+        name: `${typeNamespace}-bigint`, type: 'number',
+        value: value ?? specificSchemaObject?.defaultValue ?? '',
+        min: bigintSchemaObject?.min
+          ? bigintSchemaObject?.minInclusive
+            ? bigintSchemaObject?.min
+            : String(BigInt(bigintSchemaObject?.min) + 1n)
+          : undefined,
+        max: bigintSchemaObject?.max
+          ? bigintSchemaObject?.maxInclusive
+            ? bigintSchemaObject?.max
+            : String(BigInt(bigintSchemaObject?.max) - 1n)
+          : undefined,
+        step: bigintSchemaObject?.multipleOf ?? '1'
       }]
     ]];
   }

package/src/fundamentalTypes/blobType.js

@@ -1,4 +1,4 @@
-import {jml} from '../vendor-imports.js';
+import {jml, toStringTag} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 import {visualize, getUserMedia, startScreenCapture} from '../utils/media.js';
 import dialogs from '../utils/dialogs.js';
@@ -20,7 +20,7 @@ import dialogs from '../utils/dialogs.js';
  *   name?: string,
  *   type?: string
  * }} value
- * @returns {void}
+ * @returns {Blob}
  */
 function newBlobForBinary (viewBinary, value) {
   const oldBlob = /** @type {Blob|undefined} */ (
@@ -52,6 +52,7 @@ function newBlobForBinary (viewBinary, value) {
     }
   );
   viewBinary.$value = blob;
+  return blob;
 }
 
 /**
@@ -97,9 +98,12 @@ function binaryButton (value, editable) {
               const textarea = /** @type {HTMLTextAreaElement} */ (
                 $e(dialog, '.view-binary')
               );
-              newBlobForBinary(viewBinary, {
+              const blob = newBlobForBinary(viewBinary, {
                 stringContents: textarea.value
               });
+              // May need to update size:
+              /** @type {HTMLFieldSetElement & {$setValue: SetValue}} */
+              (viewBinary.parentElement).$setValue(blob);
               dialog.close();
             },
             // @ts-expect-error TS bug
@@ -146,6 +150,9 @@ function binaryButton (value, editable) {
 const blobType = {
   option: ['Blob'],
   stringRegex: /^Blob\((.*)\)$/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'Blob';
+  },
   toValue (s) {
     const obj = JSON.parse(s);
     return {value: new Blob([obj.stringContents], {
@@ -166,10 +173,13 @@ const blobType = {
       this.getInput({root})
     ).$value;
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     return ['div', {dataset: {type: 'blob'}}, [
-      ['b', {class: 'emphasis'}, [
-        'Blob'
+      ['b', {
+        class: 'emphasis',
+        title: specificSchemaObject?.description ? '(a Blob)' : undefined
+      }, [
+        specificSchemaObject?.description ?? 'Blob'
       ]],
       ['br'],
       ['br'],
@@ -185,7 +195,7 @@ const blobType = {
       ['br'],
       value.type.startsWith('text/') || value.type === 'application/json'
         ? (() => {
-          const div = /** @type {HTMLDivElement} */ (jml('div'));
+          const div = jml('div');
           const reader = new FileReader();
           reader.addEventListener('load', function () {
             div.append(jml('div', [
@@ -217,7 +227,7 @@ const blobType = {
       value.type.startsWith('video/')
         ? (() => {
           const objURL = URL.createObjectURL(value);
-          const video = /** @type {HTMLVideoElement} */ (jml('video', {
+          const video = jml('video', {
             src: objURL,
             class: 'video',
             $on: {
@@ -225,7 +235,7 @@ const blobType = {
                 URL.revokeObjectURL(objURL);
               }
             }
-          }));
+          });
 
           return ['div', [
             video,
@@ -270,7 +280,7 @@ const blobType = {
       value.type.startsWith('audio/')
         ? (() => {
           const objURL = URL.createObjectURL(value);
-          const audio = /** @type {HTMLAudioElement} */ (jml('audio', {
+          const audio = jml('audio', {
             src: objURL,
             class: 'audio',
             $on: {
@@ -278,7 +288,7 @@ const blobType = {
                 URL.revokeObjectURL(objURL);
               }
             }
-          }));
+          });
           return ['div', [
             audio,
             ['button', {
@@ -349,10 +359,13 @@ const blobType = {
         : ''
     ]];
   },
-  editUI ({typeNamespace, value = {}}) {
+  editUI ({typeNamespace, specificSchemaObject, value = {}}) {
     // Todo: Could add way to preview blob in edit mode (whether
     //         recorded or uploaded)
-    return ['div', {dataset: {type: 'blob'}}, [
+    return ['div', {
+      dataset: {type: 'blob'},
+      title: specificSchemaObject?.description ?? 'Blob'
+    }, [
       ['fieldset', {
         class: 'blobMetaData',
         $custom: {
@@ -390,7 +403,7 @@ const blobType = {
         ['label', [
           'Size (in bytes) ',
           ['input', {
-            type: 'number', disabled: true, class: 'size',
+            type: 'number', step: '1', disabled: true, class: 'size',
             value: String(value.size)
           }]
         ]],
@@ -481,194 +494,192 @@ const blobType = {
           'Supply blob through recording'
         ]],
         (() => {
-          const select = /** @type {HTMLSelectElement} */ (
-            jml('select', {
-              class: 'device',
-              $on: {
-                async change () {
-                  const videoContainer = /** @type {HTMLDivElement} */ (
-                    this.nextElementSibling?.nextElementSibling
-                  );
+          const select = jml('select', {
+            class: 'device',
+            $on: {
+              async change () {
+                const videoContainer = /** @type {HTMLDivElement} */ (
+                  this.nextElementSibling?.nextElementSibling
+                );
 
-                  const photo =
-                    /**
-                     * @type {HTMLCanvasElement}
-                     */
-                    ($e(videoContainer, 'img.photo'));
-                  photo.hidden = true;
-
-                  const oldVideo =
-                    /**
-                     * @type {HTMLVideoElement & {
-                     *   $stream: MediaStream
-                     * }}
-                     */
-                    ($e(
-                      videoContainer,
-                      'video.previewMedia'
-                    ));
-
-                  // Drop preexisting listeners
-                  const previewMedia =
-                    /**
-                     * @type {HTMLVideoElement & {
-                     *   $stream: MediaStream,
-                     *   $screenShare: boolean
-                     * }}
-                     */ (
-                      jml('video', {
-                        class: 'previewMedia'
-                      })
-                    );
-
-                  if (oldVideo.$stream) {
-                    const tracks = /** @type {MediaStream} */ (
-                      oldVideo.$stream
-                    ).getTracks();
-                    tracks.forEach((track) => {
-                      track.stop();
-                    });
-                    oldVideo.srcObject = null;
-                  }
+                const photo =
+                  /**
+                   * @type {HTMLCanvasElement}
+                   */
+                  ($e(videoContainer, 'img.photo'));
+                photo.hidden = true;
 
-                  oldVideo.replaceWith(previewMedia);
+                const oldVideo =
+                  /**
+                   * @type {HTMLVideoElement & {
+                   *   $stream: MediaStream
+                   * }}
+                   */
+                  ($e(
+                    videoContainer,
+                    'video.previewMedia'
+                  ));
 
-                  const takeSnapshot = /** @type {HTMLButtonElement} */ (
-                    $e(/** @type {HTMLDivElement} */ (
-                      select.nextElementSibling
-                    ), '.takeSnapshot')
+                // Drop preexisting listeners
+                const previewMedia =
+                  /**
+                   * @type {HTMLVideoElement & {
+                   *   $stream: MediaStream,
+                   *   $screenShare: boolean
+                   * }}
+                   */ (
+                    jml('video', {
+                      class: 'previewMedia'
+                    })
                   );
 
-                  const recordMedia = /** @type {HTMLButtonElement} */ (
-                    $e(/** @type {HTMLDivElement} */ (
-                      select.nextElementSibling
-                    ), '.recordMedia')
-                  );
+                if (oldVideo.$stream) {
+                  const tracks = /** @type {MediaStream} */ (
+                    oldVideo.$stream
+                  ).getTracks();
+                  tracks.forEach((track) => {
+                    track.stop();
+                  });
+                  oldVideo.srcObject = null;
+                }
 
-                  /** @type {HTMLDivElement} */ ($e(
-                    /** @type {HTMLDivElement} */
-                    (select.nextElementSibling?.
-                      nextElementSibling),
-                    'div.recordedMedia'
-                  )).hidden = true;
+                oldVideo.replaceWith(previewMedia);
 
-                  const visualizer = /** @type {HTMLCanvasElement} */ (
-                    $e(videoContainer, 'canvas.visualizer')
-                  );
+                const takeSnapshot = /** @type {HTMLButtonElement} */ (
+                  $e(/** @type {HTMLDivElement} */ (
+                    select.nextElementSibling
+                  ), '.takeSnapshot')
+                );
 
-                  /**
-                   * @type {{
-                   *   video?: true,
-                   *   audio?: true
-                   * }|undefined}
-                   */
-                  let constraints;
-                  let screenShareConstraints;
-
-                  previewMedia.$screenShare = false;
-                  switch (select.value) {
-                  case 'audio-and-video':
-                    constraints = {video: true, audio: true};
-                    previewMedia.hidden = false;
-                    takeSnapshot.hidden = false;
-                    recordMedia.textContent = 'Record video/audio';
-                    break;
-                  case 'video':
-                    constraints = {video: true};
-                    previewMedia.hidden = false;
-                    takeSnapshot.hidden = false;
-                    recordMedia.textContent = 'Record video';
-                    break;
-                  case 'audio':
-                    constraints = {audio: true};
-                    previewMedia.hidden = true;
-                    takeSnapshot.hidden = true;
-                    recordMedia.textContent = 'Record audio';
-                    break;
-                  case 'screenShare':
-                    screenShareConstraints = {video: true};
-                    // Fallthrough
-                  case 'screenShareAndVideo':
-                    if (!screenShareConstraints) {
-                      screenShareConstraints = {video: true, audio: true};
-                    }
-                    previewMedia.$screenShare = true;
-                    previewMedia.hidden = true;
-                    takeSnapshot.hidden = true;
-                    visualizer.hidden = true;
-                    break;
-                  default:
-                    return;
-                  }
+                const recordMedia = /** @type {HTMLButtonElement} */ (
+                  $e(/** @type {HTMLDivElement} */ (
+                    select.nextElementSibling
+                  ), '.recordMedia')
+                );
 
-                  if (constraints) {
-                    const mediaStream = await getUserMedia(constraints);
-                    /* istanbul ignore if */
-                    if (!mediaStream) {
-                      await dialogs.alert('Error getting user media');
-                      return;
-                    }
+                /** @type {HTMLDivElement} */ ($e(
+                  /** @type {HTMLDivElement} */
+                  (select.nextElementSibling?.
+                    nextElementSibling),
+                  'div.recordedMedia'
+                )).hidden = true;
 
-                    videoContainer.hidden = false;
-                    previewMedia.srcObject = mediaStream;
-
-                    // Save as stream for later reuse as stream
-                    previewMedia.$stream = mediaStream;
-
-                    if (constraints.video) {
-                      const canvas =
-                        /**
-                         * @type {HTMLCanvasElement}
-                         */
-                        ($e(
-                          videoContainer,
-                          'canvas.recordedImage'
-                        ));
-                      // https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos
-                      previewMedia.addEventListener('canplay', () => {
-                        canvas.setAttribute('width', String(
-                          previewMedia.videoWidth
-                        ));
-                        canvas.setAttribute(
-                          'height', String(previewMedia.videoHeight)
-                        );
-                      });
-                    }
+                const visualizer = /** @type {HTMLCanvasElement} */ (
+                  $e(videoContainer, 'canvas.visualizer')
+                );
 
-                    previewMedia.addEventListener('loadedmetadata', () => {
-                      previewMedia.play();
-                      if (constraints?.audio) {
-                        visualizer.hidden = false;
-                        visualize(
-                          mediaStream,
-                          visualizer
-                        );
-                      } else {
-                        visualizer.hidden = true;
-                      }
+                /**
+                 * @type {{
+                 *   video?: true,
+                 *   audio?: true
+                 * }|undefined}
+                 */
+                let constraints;
+                let screenShareConstraints;
+
+                previewMedia.$screenShare = false;
+                switch (select.value) {
+                case 'audio-and-video':
+                  constraints = {video: true, audio: true};
+                  previewMedia.hidden = false;
+                  takeSnapshot.hidden = false;
+                  recordMedia.textContent = 'Record video/audio';
+                  break;
+                case 'video':
+                  constraints = {video: true};
+                  previewMedia.hidden = false;
+                  takeSnapshot.hidden = false;
+                  recordMedia.textContent = 'Record video';
+                  break;
+                case 'audio':
+                  constraints = {audio: true};
+                  previewMedia.hidden = true;
+                  takeSnapshot.hidden = true;
+                  recordMedia.textContent = 'Record audio';
+                  break;
+                case 'screenShare':
+                  screenShareConstraints = {video: true};
+                  // Fallthrough
+                case 'screenShareAndVideo':
+                  if (!screenShareConstraints) {
+                    screenShareConstraints = {video: true, audio: true};
+                  }
+                  previewMedia.$screenShare = true;
+                  previewMedia.hidden = true;
+                  takeSnapshot.hidden = true;
+                  visualizer.hidden = true;
+                  break;
+                default:
+                  return;
+                }
+
+                if (constraints) {
+                  const mediaStream = await getUserMedia(constraints);
+                  /* istanbul ignore if */
+                  if (!mediaStream) {
+                    await dialogs.alert('Error getting user media');
+                    return;
+                  }
+
+                  videoContainer.hidden = false;
+                  previewMedia.srcObject = mediaStream;
+
+                  // Save as stream for later reuse as stream
+                  previewMedia.$stream = mediaStream;
+
+                  if (constraints.video) {
+                    const canvas =
+                      /**
+                       * @type {HTMLCanvasElement}
+                       */
+                      ($e(
+                        videoContainer,
+                        'canvas.recordedImage'
+                      ));
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos
+                    previewMedia.addEventListener('canplay', () => {
+                      canvas.setAttribute('width', String(
+                        previewMedia.videoWidth
+                      ));
+                      canvas.setAttribute(
+                        'height', String(previewMedia.videoHeight)
+                      );
                     });
-                  } else if (screenShareConstraints) {
-                    const mediaStream = await startScreenCapture(
-                      screenShareConstraints
-                    );
-                    /* istanbul ignore if */
-                    if (!mediaStream) {
-                      await dialogs.alert('Error getting user media');
-                      return;
+                  }
+
+                  previewMedia.addEventListener('loadedmetadata', () => {
+                    previewMedia.play();
+                    if (constraints?.audio) {
+                      visualizer.hidden = false;
+                      visualize(
+                        mediaStream,
+                        visualizer
+                      );
+                    } else {
+                      visualizer.hidden = true;
                     }
+                  });
+                } else if (screenShareConstraints) {
+                  const mediaStream = await startScreenCapture(
+                    screenShareConstraints
+                  );
+                  /* istanbul ignore if */
+                  if (!mediaStream) {
+                    await dialogs.alert('Error getting user media');
+                    return;
+                  }
 
-                    videoContainer.hidden = false;
-                    previewMedia.srcObject = mediaStream;
+                  videoContainer.hidden = false;
+                  previewMedia.srcObject = mediaStream;
 
-                    // Save as stream for later reuse as stream
-                    previewMedia.$stream = mediaStream;
-                  }
+                  // Save as stream for later reuse as stream
+                  previewMedia.$stream = mediaStream;
                 }
               }
-            }, [
-              ['option', {value: ''}, ['Please choose a device']]
-            ])
-          );
+            }
+          }, [
+            ['option', {value: ''}, ['Please choose a device']]
+          ]);
 
           (async () => {
             const devices = await navigator.mediaDevices.enumerateDevices();
@@ -770,7 +781,7 @@ const blobType = {
                 try {
                   mediaRecorder.start();
                 /* istanbul ignore next */
-                } catch (err) {
+                } catch {
                   /* istanbul ignore next */
                   dialogs.alert('Error starting media recorder');
                   /* istanbul ignore next */
@@ -909,9 +920,9 @@ const blobType = {
                     dialogs.alert('Error converting canvas to Blob');
                     return;
                   }
-                  const newPhoto = /** @type {HTMLImageElement} */ (jml('img', {
+                  const newPhoto = jml('img', {
                     class: 'photo'
-                  }));
+                  });
                   const url = URL.createObjectURL(blob);
 
                   newPhoto.addEventListener('load', () => {
@@ -951,9 +962,9 @@ const blobType = {
             {class: 'recordedMedia'},
             /** @type {import('jamilih').JamilihChildren} */ ([
               ...(() => {
-                const recordedMedia = /** @type {HTMLVideoElement} */ (jml(
+                const recordedMedia = jml(
                   'video', {class: 'recordedMedia'}
-                ));
+                );
                 return [
                   recordedMedia,
                   ['br'],