@es-joy/jsoe 0.15.0 → 0.17.0

package/src/fundamentalTypes/fileType.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';
@@ -168,6 +168,9 @@ function binaryButton (value, editable) {
 const fileType = {
   option: ['File'],
   stringRegex: /^File\((.*)\)$/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'File';
+  },
   toValue (s) {
     const obj = JSON.parse(s);
     return {value: new File([obj.stringContents], obj.name, {
@@ -189,10 +192,13 @@ const fileType = {
       this.getInput({root})
     ).$value;
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     return ['div', {dataset: {type: 'file'}}, [
-      ['b', {class: 'emphasis'}, [
-        'File'
+      ['b', {
+        class: 'emphasis',
+        title: specificSchemaObject?.description ? '(a File)' : undefined
+      }, [
+        specificSchemaObject?.description ?? 'File'
       ]],
       ['br'],
       ['br'],
@@ -218,7 +224,7 @@ const fileType = {
       ['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', [
@@ -250,7 +256,7 @@ const fileType = {
       value.type.startsWith('video/')
         ? (() => {
           const objURL = URL.createObjectURL(value);
-          const video = /** @type {HTMLVideoElement} */ (jml('video', {
+          const video = jml('video', {
             src: objURL,
             class: 'video',
             $on: {
@@ -258,7 +264,7 @@ const fileType = {
                 URL.revokeObjectURL(objURL);
               }
             }
-          }));
+          });
 
           return ['div', [
             video,
@@ -303,7 +309,7 @@ const fileType = {
       value.type.startsWith('audio/')
         ? (() => {
           const objURL = URL.createObjectURL(value);
-          const audio = /** @type {HTMLAudioElement} */ (jml('audio', {
+          const audio = jml('audio', {
             src: objURL,
             class: 'audio',
             $on: {
@@ -311,7 +317,7 @@ const fileType = {
                 URL.revokeObjectURL(objURL);
               }
             }
-          }));
+          });
           return ['div', [
             audio,
             ['button', {
@@ -382,10 +388,13 @@ const fileType = {
         : ''
     ]];
   },
-  editUI ({typeNamespace, value = {}}) {
+  editUI ({typeNamespace, specificSchemaObject, value = {}}) {
     // Todo: Could add way to preview file in edit mode (whether
     //         recorded or uploaded)
-    return ['div', {dataset: {type: 'file'}}, [
+    return ['div', {
+      dataset: {type: 'file'},
+      title: specificSchemaObject?.description ?? 'File'
+    }, [
       ['fieldset', {
         class: 'fileMetaData',
         $custom: {
@@ -456,7 +465,7 @@ const fileType = {
         ['label', [
           'Size (in bytes) ',
           ['input', {
-            type: 'number', disabled: true, class: 'size',
+            type: 'number', step: '1', disabled: true, class: 'size',
             value: String(value.size)
           }]
         ]],
@@ -576,194 +585,192 @@ const fileType = {
           'Supply file 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();
@@ -864,8 +871,7 @@ const fileType = {
 
                 try {
                   mediaRecorder.start();
-                /* istanbul ignore if */
-                } catch (err) {
+                } catch /* istanbul ignore next */ {
                   dialogs.alert('Error starting media recorder');
                   return;
                 }
@@ -1009,9 +1015,9 @@ const fileType = {
                     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', () => {
@@ -1058,9 +1064,9 @@ const fileType = {
             {class: 'recordedMedia'},
             /** @type {import('jamilih').JamilihChildren} */ ([
               ...(() => {
-                const recordedMedia = /** @type {HTMLVideoElement} */ (jml(
+                const recordedMedia = jml(
                   'video', {class: 'recordedMedia'}
-                ));
+                );
                 return [
                   recordedMedia,
                   ['br'],

package/src/fundamentalTypes/filelistType.js

@@ -1,3 +1,4 @@
+import {toStringTag} from '../vendor-imports.js';
 import arrayType from './arrayType.js';
 
 /**
@@ -10,6 +11,9 @@ const filelistType = {
   regexEndings: [',', ')'],
   stringRegexBegin: /^FileList\(/u,
   stringRegexEnd: /^\)/u,
+  valueMatch (x) {
+    return toStringTag(x) === 'FileList';
+  },
 
   toValue (...args) {
     return /** @type {import('../types.js').ToValue} */ (

package/src/fundamentalTypes/functionType.js

@@ -0,0 +1,150 @@
+import {$e} from '../utils/templateUtils.js';
+import {copyObject} from '../utils/objects.js';
+
+/**
+ * @type {import('../types.js').TypeObject}
+ */
+const functionType = {
+  option: ['function'],
+  stringRegex: /^function\((.*)\): (.*)$/u,
+  // Todo: Fix all the following methods up to `editUI` to work with children
+  valueMatch (x) {
+    return typeof x === 'function';
+  },
+  toValue (s) {
+    return {value: s.slice(8, -1)};
+  },
+  getInput ({root}) {
+    return /** @type {HTMLTextAreaElement} */ ($e(root, 'input'));
+  },
+  setValue ({root, value}) {
+    this.getInput({root}).value = value;
+  },
+  getValue ({root}) {
+    return this.getInput({root}).value;
+  },
+  viewUI ({value, specificSchemaObject}) {
+    return ['span', {
+      dataset: {type: 'function'},
+      title: specificSchemaObject?.description ?? '(a function)'
+    }, [value]];
+  },
+  editUI ({
+    format, type, buildTypeChoices, specificSchemaObject,
+    topRoot, // schemaContent,
+    typeNamespace
+  }) {
+    // Todo: Support `getValue`; add to demo with tests; could also add to
+    //        use with `Promise` so that could also build a meaningful
+    //        implementation; use schema to inform user of types of args,
+    //        but remember we are not reimplementing the function schema to
+    //        ask for argument types, etc.
+
+    // We want to allow overriding its descriptions
+    const specificSchemaObj = copyObject(specificSchemaObject);
+    const argsTuple = /** @type {import('zodex').SzFunction<any, any>} */ (
+      specificSchemaObj
+    )?.args ?? {type: 'tuple', items: [], rest: {type: 'any'}};
+    argsTuple.description = '';
+    // This `description` not in use, but could support
+    if (argsTuple.rest) {
+      argsTuple.rest.description = 'Argument';
+    }
+
+    const size = argsTuple.items.length + (argsTuple.rest ? 1 : 0);
+    const args = /** @type {import('zodex').SzType} */ (
+      {
+        type: 'set',
+        minSize: size,
+        maxSize: size,
+        value: {
+          type: 'string',
+          // See https://github.com/tc39/proposal-regexp-unicode-property-escapes#other-examples
+          // eslint-disable-next-line @stylistic/max-len -- Long
+          regex: String.raw`^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$`,
+          flags: 'v'
+        }
+      }
+    );
+
+    return ['div', {dataset: {type: 'function'}}, [
+      ['b', ['Arguments']],
+      ['br'],
+
+      // This was working to allow choice of specific function argument types,
+      //   but we want function argument names to build a real function; the
+      //   specific attached schema should already specify function argument
+      //   types.
+      // ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+      //   buildTypeChoices
+      // )({
+      //   // resultType,
+      //   // eslint-disable-next-line object-shorthand -- TS
+      //   topRoot: /** @type {HTMLDivElement} */ (topRoot),
+      //   // eslint-disable-next-line object-shorthand -- TS
+      //   format:
+      //     /** @type {import('../formats.js').AvailableFormat} */ (format),
+      //   schemaOriginal: schemaContent,
+      //   schemaContent: argsTuple,
+      //   state: type,
+      //   // itemIndex,
+      //   typeNamespace
+      // }).domArray),
+
+      ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+        buildTypeChoices
+      )({
+        // resultType,
+        // eslint-disable-next-line object-shorthand -- TS
+        topRoot: /** @type {HTMLDivElement} */ (topRoot),
+        // eslint-disable-next-line object-shorthand -- TS
+        format: /** @type {import('../formats.js').AvailableFormat} */ (format),
+        // schemaOriginal: schemaContent,
+        schemaContent: args,
+        state: type,
+        // itemIndex,
+        typeNamespace
+      }).domArray),
+
+      ['b', ['Function body']],
+      ['br'],
+      ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+        buildTypeChoices
+      )({
+        // resultType,
+        // eslint-disable-next-line object-shorthand -- TS
+        topRoot: /** @type {HTMLDivElement} */ (topRoot),
+        // eslint-disable-next-line object-shorthand -- TS
+        format: /** @type {import('../formats.js').AvailableFormat} */ (format),
+        // schemaOriginal: schemaContent,
+        schemaContent: {type: 'string'},
+        state: type,
+        // itemIndex,
+        typeNamespace
+      }).domArray)
+
+      // This was previously working (see commented out block above)
+      // ['b', ['Returns']],
+      // ['br'],
+      // ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+      //   buildTypeChoices
+      // )({
+      //   // resultType,
+      //   // eslint-disable-next-line object-shorthand -- TS
+      //   topRoot: /** @type {HTMLDivElement} */ (topRoot),
+      //   // eslint-disable-next-line object-shorthand -- TS
+      //   format:
+      //     /** @type {import('../formats.js').AvailableFormat} */ (format),
+      //   schemaOriginal: schemaContent,
+      //   schemaContent: /** @type {import('zodex').SzFunction<any, any>} */ (
+      //     specificSchemaObj
+      //   )?.returns ?? {type: 'any'},
+      //   state: type,
+      //   // itemIndex,
+      //   typeNamespace
+      // }).domArray)
+    ]];
+  }
+};
+
+export default functionType;