@es-joy/jsoe 0.23.0 → 0.24.0

package/src/fundamentalTypes/promiseType.js

@@ -1,42 +1,165 @@
-import {toStringTag} from '../vendor-imports.js';
+import {
+  jml, toStringTag,
+  Typeson, structuredCloningThrowing,
+  resurrectable as noneditable, symbol, promise
+} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
+import arrayType from './arrayType.js';
+
+/**
+ *
+ */
+const getTypeson = () => {
+  const structuredCloningFixed = structuredCloningThrowing.filter(
+    (typeSpecSet) => {
+      return ![
+        // Not yet supported within JSOE
+        'imagedata',
+        'imagebitmap',
+        'cryptokey',
+        'domquad'
+      ].some((prop) => {
+        return Object.hasOwn(typeSpecSet, prop);
+      });
+    }
+  );
+  structuredCloningFixed.splice(
+    // Add after userObjects
+    1,
+    0,
+    noneditable
+  );
+  return new Typeson().register(
+    [
+      ...structuredCloningFixed,
+      symbol,
+      promise,
+      {
+        function: {
+          test (x) {
+            return typeof x === 'function';
+          },
+          replace (funcType) {
+            return '(' + funcType.toString() + ')';
+          },
+          revive (o) {
+            // eslint-disable-next-line no-eval -- User opted in
+            return eval(o);
+          }
+        }
+      }
+    ]
+  );
+};
 
 /**
  * @type {import('../types.js').TypeObject}
  */
 const promiseType = {
   option: ['Promise'],
-  stringRegex: /^Promise\((.*)\)$/u,
-  // Todo: Fix all the following methods up to `editUI` to work with children
+  regexEndings: [',', ')'],
+  stringRegexBegin: /^Promise\(/u,
+  stringRegexEnd: /^\)/u,
+  array: true,
+
   valueMatch (x) {
     return toStringTag(x) === 'Promise';
   },
-  toValue (s) {
-    return {value: s.slice(8, -1)};
+  toValue (...args) {
+    const val = /** @type {import('../types.js').ToValue} */ (
+      arrayType.toValue
+    ).apply(this, args);
+
+    return {
+      value: Promise.resolve(val.value[0]),
+      remnant: val.remnant
+    };
   },
   getInput ({root}) {
-    return /** @type {HTMLTextAreaElement} */ ($e(root, 'input'));
+    const childRoot = /** @type {HTMLDivElement} */ (
+      $e(root, 'div[data-type]')
+    );
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    return /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement|HTMLButtonElement} */ (
+      this.types?.getFormControlForRoot(childRoot)
+    );
   },
   setValue ({root, value}) {
-    this.getInput({root}).value = value;
+    // Need to wait a tick
+    setTimeout(async () => {
+      const val = await value;
+      const typeson = getTypeson();
+      const type = /** @type {import('../types.js').AvailableArbitraryType} */ (
+        await typeson.rootTypeName(val)
+      );
+
+      const select = /** @type {HTMLSelectElement} */ ($e(root, 'select'));
+      select.value = type;
+      select.dispatchEvent(new Event('change'));
+
+      const childRoot = /** @type {HTMLDivElement} */ (
+        $e(root, 'div[data-type]')
+      );
+
+      this.types?.setValue({
+        type,
+        root: childRoot,
+        value: val
+      });
+      const input = this.types?.getFormControlForRoot(childRoot);
+      // Avoid invalid number, etc.
+      input?.dispatchEvent(new Event('input'));
+      input?.blur();
+    });
   },
   getValue ({root}) {
-    return this.getInput({root}).value;
+    const childRoot = /** @type {HTMLDivElement} */ (
+      $e(root, 'div[data-type]')
+    );
+    return Promise.resolve(this.types?.getValueForRoot(childRoot));
   },
-  viewUI ({specificSchemaObject}) {
+  viewUI ({specificSchemaObject, types, value, ...args}) {
+    const typeson = getTypeson();
+
+    const span = jml('span');
+    const valueHolder = jml('div');
+
+    (async () => {
+      const val = await value;
+      const type = await typeson.rootTypeName(val);
+      span.textContent = type;
+      const typeObj = /** @type {import('../types.js').TypeObject} */ (
+        types.getTypeObject(
+          /** @type {import('../types.js').AvailableArbitraryType} */ (type)
+        )
+      );
+      valueHolder.append(
+        jml(...typeObj.viewUI({
+          specificSchemaObject, types, value: val, ...args
+        }))
+      );
+    })();
+
     return ['span', {
       dataset: {type: 'promise'},
       title: specificSchemaObject?.description
     }, [
-      // We don't know what it resolves to without awaiting it
-      'A Promise'
+      'A Promise ',
+      span,
+      valueHolder
     ]];
   },
   editUI ({
-    format, type, buildTypeChoices, specificSchemaObject,
-    topRoot, schemaContent, typeNamespace
+    format, types, type, buildTypeChoices, specificSchemaObject,
+    topRoot, schemaContent, typeNamespace, value
   }) {
-    return ['div', {dataset: {type: 'promise'}}, [
+    this.types = types;
+
+    const div = jml('div', {
+      dataset: {type: 'promise'},
+      title: specificSchemaObject?.description ?? '(a Promise)'
+    }, [
+      'Promise ',
       ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
         buildTypeChoices
       )({
@@ -53,7 +176,13 @@ const promiseType = {
         // itemIndex,
         typeNamespace
       }).domArray)
-    ]];
+    ]);
+
+    if (value && this.setValue) {
+      this.setValue({root: div, value});
+    }
+
+    return [div];
   }
 };
 

package/src/fundamentalTypes/stringType.js

@@ -3,22 +3,23 @@ import {$e} from '../utils/templateUtils.js';
 
 // Adapted from Zod: https://github.com/colinhacks/zod/blob/9257ab78eec366c04331a3c2d59deb344a02d9f6/src/types.ts
 const ipv4Regex =
-  /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/u;
+  /^(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)$/u;
 const ipv6Regex =
-  /^(([a-f0-9]{1,4}:){7}|::([a-f0-9]{1,4}:){0,6}|([a-f0-9]{1,4}:){1}:([a-f0-9]{1,4}:){0,5}|([a-f0-9]{1,4}:){2}:([a-f0-9]{1,4}:){0,4}|([a-f0-9]{1,4}:){3}:([a-f0-9]{1,4}:){0,3}|([a-f0-9]{1,4}:){4}:([a-f0-9]{1,4}:){0,2}|([a-f0-9]{1,4}:){5}:([a-f0-9]{1,4}:){0,1})([a-f0-9]{1,4}|(((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2}))\.){3}((25[0-5])|(2[0-4][0-9])|(1[0-9]{2})|([0-9]{1,2})))$/u;
+  /^(([a-f\d]{1,4}:){7}|::([a-f\d]{1,4}:){0,6}|([a-f\d]{1,4}:):([a-f\d]{1,4}:){0,5}|([a-f\d]{1,4}:){2}:([a-f\d]{1,4}:){0,4}|([a-f\d]{1,4}:){3}:([a-f\d]{1,4}:){0,3}|([a-f\d]{1,4}:){4}:([a-f\d]{1,4}:){0,2}|([a-f\d]{1,4}:){5}:([a-f\d]{1,4}:)?)([a-f\d]{1,4}|(((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{1,2}))\.){3}((25[0-5])|(2[0-4]\d)|(1\d{2})|(\d{1,2})))$/u;
 // https://stackoverflow.com/questions/7860392/determine-if-string-is-in-base64-using-javascript
 const base64Regex =
-  /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/u;
+  /^([\da-zA-Z+/]{4})*(([\da-zA-Z+/]{2}==)|([\da-zA-Z+/]{3}=))?$/u;
 // from https://thekevinscott.com/emojis-in-javascript/#writing-a-regular-expression
 const emojiRegexStr = `^(\\p{Extended_Pictographic}|\\p{Emoji_Component})+$`;
 const emojiRegex = new RegExp(emojiRegexStr, 'u');
 const cuidRegex = /^c[^\s-]{8,}$/iu;
-const cuid2Regex = /^[0-9a-z]+$/u;
-const ulidRegex = /^[0-9A-HJKMNP-TV-Z]{26}$/iu;
+const cuid2Regex = /^[\da-z]+$/u;
+const ulidRegex = /^[\dA-HJKMNP-TV-Z]{26}$/iu;
 const uuidRegex =
-  /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/iu;
-const nanoidRegex = /^[a-z0-9_-]{21}$/iu;
+  /^[\da-f]{8}\b-[\da-f]{4}\b-[\da-f]{4}\b-[\da-f]{4}\b-[\da-f]{12}$/iu;
+const nanoidRegex = /^[a-z\d_-]{21}$/iu;
 const durationRegex =
+  // eslint-disable-next-line sonarjs/no-empty-after-reluctant -- Ok
   /^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/u;
 // End adapted from Zod
 

package/src/fundamentalTypes/symbolType.js

@@ -5,7 +5,7 @@ import {$e} from '../utils/templateUtils.js';
  */
 const symbolType = {
   option: ['Symbol'],
-  stringRegex: /^(?<symbolClassType>Symbol|Symbol.for)\("(?<innerContent>[^\\"]|\\\\|\\")*"\)$/u,
+  stringRegex: /^(?<symbolClassType>Symbol|Symbol.for)\((?<innerContent>[^)]*)\)$/u,
   ct: 0,
   valueMatch (x) {
     return typeof x === 'symbol';
@@ -50,10 +50,17 @@ const symbolType = {
     return ['span', {
       dataset: {type: 'symbol'},
       title: specificSchemaObject?.description ?? '(a Symbol)'
-    }, [value]];
+    }, [
+      Symbol.keyFor(value) === undefined ? '' : ['b', ['Global: ']],
+      String(value).slice(7, -1)
+    ]];
   },
-  editUI ({typeNamespace, value = ''}) {
-    return ['div', {dataset: {type: 'symbol'}}, [
+  editUI ({typeNamespace, specificSchemaObject, value = ''}) {
+    this.ct++;
+    return ['div', {
+      dataset: {type: 'symbol'},
+      title: specificSchemaObject?.description ?? '(a Symbol)'
+    }, [
       ['label', [
         'Symbol()',
         ['input', {
@@ -65,13 +72,14 @@ const symbolType = {
         'Symbol.for()',
         ['input', {
           type: 'radio', name: `${typeNamespace}-symbol${this.ct}`,
-          value: 'Symbol.for', checked: value && Boolean(Symbol.keyFor(value))
+          value: 'Symbol.for',
+          checked: value && Symbol.keyFor(value) !== undefined
         }]
       ]],
       ['br'],
       ['input', {
         className: 'symbolInput',
-        name: `${typeNamespace}-string`,
+        name: `${typeNamespace}-symbol`,
         value: String(value).slice(7, -1)
       }]
     ]];

package/src/subTypes/blobHTMLType.js

@@ -31,7 +31,9 @@ const blobHTMLType = {
      */
     function dataURIToBlob (dataURI) {
       // Adapted from https://stackoverflow.com/a/12300351/271577
-      const [mimeInfo, bytes] = dataURI.split(',');
+      const pos = dataURI.indexOf(',');
+      const mimeInfo = dataURI.slice(0, pos);
+      const bytes = dataURI.slice(pos + 1);
       const [mimeString, encoding] = mimeInfo.split(':')[1].split(';');
       let ab;
       if (encoding === 'base64') {

package/src/types.js

@@ -55,10 +55,9 @@ import neverType from './fundamentalTypes/neverType.js';
 import catchType from './fundamentalTypes/catchType.js';
 import nativeEnumType from './fundamentalTypes/nativeEnumType.js';
 
-// Todo: Reenable
-// import symbolType from './fundamentalTypes/symbolType.js';
-// import promiseType from './fundamentalTypes/promiseType.js';
-// import functionType from './fundamentalTypes/functionType.js';
+import symbolType from './fundamentalTypes/symbolType.js';
+import promiseType from './fundamentalTypes/promiseType.js';
+import functionType from './fundamentalTypes/functionType.js';
 
 /**
  * Utility to retrieve the property value given a legend element.
@@ -93,7 +92,7 @@ export const getPropertyValueFromLegend = (legend) => {
  * Utility to retrieve the type out of a type root element.
  * @callback GetTypeForRoot
  * @param {?RootElement} root
- * @returns {string} Why would it not exist?
+ * @returns {AvailableArbitraryType} Why would it not exist?
  */
 
 /**
@@ -135,7 +134,7 @@ export const getPropertyValueFromLegend = (legend) => {
 
 /**
  * @callback GetOptionForType
- * @param {AvailableType} type
+ * @param {AvailableArbitraryType} type
  * @param {import('./formatAndTypeChoices.js').ZodexSchema|
  *   undefined} [schemaContent]
  * @returns {[string, {value: AvailableType, title?: string}]}
@@ -183,7 +182,7 @@ export const getPropertyValueFromLegend = (legend) => {
  *   readonly?: boolean,
  *   resultType?: "both"|"keys"|"values",
  *   typeNamespace?: string,
- *   type: AvailableType,
+ *   type: AvailableArbitraryType,
  *   topRoot?: RootElement,
  *   bringIntoFocus?: boolean|undefined,
  *   buildTypeChoices?: import('./typeChoices.js').BuildTypeChoices,
@@ -214,7 +213,7 @@ export const getPropertyValueFromLegend = (legend) => {
 
 /**
  * @typedef {(cfg: {
- *   type: AvailableType,
+ *   type: AvailableArbitraryType,
  *   root: RootElement,
  *   topRoot?: RootElement,
  *   avoidReport?: boolean
@@ -223,7 +222,7 @@ export const getPropertyValueFromLegend = (legend) => {
 
 /**
  * @typedef {(cfg: {
- *   type: AvailableType,
+ *   type: AvailableArbitraryType,
  *   root: RootElement,
  *   value: StructuredCloneValue,
  * }) => void} SetValue
@@ -289,10 +288,10 @@ export const getPropertyValueFromLegend = (legend) => {
 /**
  * @typedef {(
  *   info: {
-*     root: HTMLDivElement,
-*     value: StructuredCloneValue
-*   }
-* ) => void} TypeObjectSetValue
+ *     root: HTMLDivElement,
+ *     value: StructuredCloneValue
+ *   }
+ * ) => void} TypeObjectSetValue
  */
 
 /**
@@ -349,12 +348,13 @@ export const getPropertyValueFromLegend = (legend) => {
  * }) =>
  *  StructuredCloneValue
  * } getValue Gets the value for the type
+ * @property {Types} [types]
  * @property {TypeObjectSetValue} [setValue] Should set the value of the
  *   form's `getInput` element
  * @property {(info: {
  *   value?: StructuredCloneValue,
  *   typeNamespace?: string,
- *   type?: AvailableType,
+ *   type?: AvailableArbitraryType,
  *   topRoot?: HTMLDivElement,
  *   resultType?: "keys"|"values"|"both",
  *   format: import('./formats.js').AvailableFormat,
@@ -373,7 +373,7 @@ export const getPropertyValueFromLegend = (legend) => {
  *   formats?: import('./formats.js').default,
  *   types: Types,
  *   resultType?: "keys"|"values"|"both",
- *   type?: AvailableType,
+ *   type?: AvailableArbitraryType,
  *   forcedState?: string,
  *   buildTypeChoices?: import('./typeChoices.js').BuildTypeChoices,
  *   topRoot?: HTMLDivElement
@@ -422,8 +422,10 @@ export const getPropertyValueFromLegend = (legend) => {
  *   "record"|"void"|"enum"|"literal"|"never"|"catch"|"nativeEnum"
  * } AvailableType
  */
-// Todo: Add to own section when ready for these non-structured-cloning:
-// "symbol"|"promise"|"function"
+
+/**
+ * @typedef {AvailableType|"symbol"|"promise"|"function"} AvailableArbitraryType
+ */
 
 /**
  * @typedef {TypeObject & {
@@ -445,7 +447,7 @@ class Types {
     this.customValidateAllReferences = undefined;
     /**
      * @type {{
-     *   [key in AvailableType]: Partial<TypeObject>|string[]
+     *   [key in AvailableArbitraryType]: Partial<TypeObject>|string[]
      * }}
      */
     this.availableTypes = {
@@ -506,10 +508,9 @@ class Types {
       resurrectable: noneditableType,
       never: neverType,
 
-      // Todo: Reenable
-      // symbol: symbolType, // Non-cloning type
-      // promise: promiseType,
-      // function: functionType,
+      symbol: symbolType, // Non-cloning type
+      promise: promiseType,
+      function: functionType,
 
       catch: catchType,
       nativeEnum: nativeEnumType,
@@ -716,7 +717,7 @@ class Types {
     const availableType = /** @type {TypeObject} */ (
       this.availableTypes[type]
     );
-    /** @type {[string, {value?: AvailableType, title?: string}?]} */
+    /** @type {[string, {value?: AvailableArbitraryType, title?: string}?]} */
     const optInfo = [
       ...availableType.option
     ];
@@ -986,6 +987,9 @@ class Types {
         }
       }
       if (firstRun) {
+        // Todo: should take into account `format`, e.g., to widen to
+        //        allow `arbitraryJS` values; should also be using
+        //        `structuredCloningFixed`
         const typeson = new Typeson().register(
           structuredCloningThrowing
         );
@@ -1020,7 +1024,7 @@ class Types {
   }
 
   /**
-   * @param {AvailableType} type
+   * @param {AvailableArbitraryType} type
    * @returns {Partial<TypeObject>|string[]}
    */
   getTypeObject (type) {
@@ -1030,7 +1034,9 @@ class Types {
 
 /** @type {GetTypeForRoot} */
 Types.getTypeForRoot = (root) => {
-  return String(root ? root.dataset.type : root);
+  return /** @type {AvailableArbitraryType} */ (
+    String(root ? root.dataset.type : root)
+  );
 };
 
 /** @type {ValidValuesSet} */

package/src/vendor-imports.js

@@ -3,6 +3,11 @@ export {jml, body, nbsp, $} from 'jamilih';
 
 export {
   getJSONType, Typeson, unescapeKeyPathComponent, structuredCloningThrowing,
-  resurrectable, toStringTag, hasConstructorOf
+  resurrectable, toStringTag, hasConstructorOf, symbol, promise
 } from 'typeson-registry';
 // } from '../node_modules/typeson-registry/dist/index.js';
+
+export {
+  parse as parseAcorn
+} from 'acorn';
+// } from '../node_modules/acorn/dist/acorn.mjs';