@es-joy/jsoe 0.0.1

package/src/formats/structuredCloning.js

@@ -0,0 +1,372 @@
+import Formats from '../formats.js';
+import Types from '../types.js';
+import {
+  Typeson, unescapeKeyPathComponent, structuredCloningThrowing
+} from '../../node_modules/typeson-registry/dist/index.js';
+import {
+  typesonPathToJSONPointer
+} from '../utils/jsonPointer.js';
+
+import * as json from './json.js';
+
+/**
+ * @callback EncapsulateObserver
+ * @param {TypesonObserver} observerObj
+ * @returns {void}
+ */
+
+/**
+ * @typedef {{
+ *   typeNamespace: string,
+*   "readonly": boolean,
+*   format: string,
+*   schemaContent: string,
+*   getPossibleSchemasForPathAndType: (
+*     keypath: string,
+*     parentPath: string,
+*     arrayOrObjectPropertyName: string,
+*     valueType: string
+*   ) => StateObject
+* }} StateObject
+ */
+
+/**
+ * @param {StateObject} stateObj
+ * @returns {EncapsulateObserver}
+ */
+const encapsulateObserver = (stateObj) => {
+  const {
+    typeNamespace, readonly, format, schemaContent,
+    getPossibleSchemasForPathAndType
+  } = stateObj;
+  const parents = {};
+  return (observerObj) => {
+    const {
+      type,
+      cyclic,
+      keypath,
+      value,
+      replaced,
+      cyclicKeypath,
+      endIterateIn,
+      endIterateOwn,
+      endIterateUnsetNumeric,
+      clone
+    } = observerObj;
+    // console.log('observerObj', observerObj);
+    if ('replaced' in observerObj) {
+      return;
+    }
+    if (cyclic === 'readonly' && !Array.isArray(observerObj.value)) {
+      return;
+    }
+    if (endIterateIn || endIterateOwn) {
+      return;
+    }
+    if (endIterateUnsetNumeric || (
+      clone === undefined && cyclicKeypath === undefined && Array.isArray(value)
+    )) {
+      return;
+    }
+
+    /* istanbul ignore if -- Not part of format */
+    if (type === 'sparseUndefined') { // We'll handle otherwise
+      return;
+    }
+
+    // console.log('observerObj', observerObj);
+
+    let newType;
+    let newValue = value;
+
+    /* schema: || format.startsWith('schema-') */
+    const state = format === 'structuredCloning'
+      ? 'arrayNonindexKeys'
+    // ? 'sparseArrays'
+      : 'array';
+    if (typeof cyclicKeypath === 'string') {
+      newValue = typesonPathToJSONPointer(cyclicKeypath);
+      newType = type === 'array' ? 'arrayReference' : 'objectReference';
+      newType = canonicalToAvailableType(
+        format, state, newType, value
+      ); // Todo (low): Add accurate state for second argument
+    } else {
+      try {
+        newType = canonicalToAvailableType(
+          format, state, type, value
+        ); // Todo (low): Add state for second argument
+      } catch (err) {
+        console.log('err', type, err);
+        stateObj.error = err;
+        return;
+      }
+    }
+
+    const li = keypath.lastIndexOf('.');
+    const arrayOrObjectPropertyName =
+      unescapeKeyPathComponent(keypath.slice(li + 1));
+    const parentPath = li === -1 ? '' : keypath.slice(0, li);
+
+    const hasChildren = [
+      'array', 'object',
+      // 'sparseArrays',
+      'arrayNonindexKeys'
+    ].includes(newType);
+
+    if (!stateObj.rootUI) {
+      stateObj.rootUI = Types.getUIForModeAndType({
+        readonly,
+        typeNamespace,
+        type: newType,
+        bringIntoFocus: false,
+        buildTypeChoices: Formats.buildTypeChoices,
+        format,
+        schemaContent,
+        schemaState: getPossibleSchemasForPathAndType,
+        /* schema:
+        &&
+        getPossibleSchemasForPathAndType({
+          keypath,
+          parentPath: '',
+          valueType: newType
+        }),
+        */
+        value: newValue,
+        hasValue: true,
+        // Not currently in use but may be convenient for a
+        //     type wanting the serialized data
+        replaced
+      });
+      parents[''] = stateObj.rootUI;
+      return;
+    }
+
+    // Todo (low): If could be async, use async encapsulate method
+    // Todo (low): Handle `awaitingTypesonPromise` with place-holder
+    // Todo (low): Handle `resolvingTypesonPromise` to replace place-holder
+    setTimeout(() => {
+      const ui = parents[parentPath];
+      // These errors occur, e.g., if `replacing` not first added and then
+      //   a converted object gets treated as the root UI (e.g., for `regexp`
+      //   or `blobHTML` at root)
+      // If there isn't a problem in Typeson with transmitting the `readonly`
+      //   status recursively down the object (should be no need to check
+      //   for circulars there?), could change Typeson to report `readonly`
+      //   for the nested items, in which case, we could block out `readonly`
+      //   instead of doing this here
+      if (!ui || !ui.$addAndSetArrayElement) {
+        return;
+      }
+      const root = ui.$addAndSetArrayElement({
+        propName: arrayOrObjectPropertyName,
+        type: newType,
+        value: newValue,
+        bringIntoFocus: false,
+        schemaContent,
+        schemaState: getPossibleSchemasForPathAndType
+        /* schema:
+          && getPossibleSchemasForPathAndType({
+            keypath,
+            parentPath,
+            arrayOrObjectPropertyName,
+            valueType: newType
+          })
+        */
+      });
+      if (!readonly) {
+        Types.setValue({type: newType, root, value: newValue});
+        Types.validate({type: newType, root, topRoot: stateObj.rootUI});
+      }
+
+      if (hasChildren) {
+        parents[keypath] = root;
+      }
+    });
+  };
+};
+
+/**
+ * @param {string[]} originTypes
+ * @param {[originType: string, replacementType: string][]} replacements
+ * @returns {void}
+ */
+const replaceTypes = (originTypes, replacements) => {
+  replacements.forEach(([originType, replacementType]) => {
+    originTypes.splice(originTypes.indexOf(originType), 1, replacementType);
+  });
+};
+
+/**
+ * @param {string} format
+ * @param {string} state
+ * @param {string} valType
+ * @param {ArbitraryValue} v
+ * @throws {Error}
+ * @returns {string}
+ */
+const canonicalToAvailableType = (format, state, valType, v) => {
+  const frmt = Formats.availableFormats[format];
+  const {getTypesForState, convertFromTypeson, testInvalid} = frmt;
+  const allowableTypes = getTypesForState.call(frmt, state);
+  let ret;
+  console.log('format, state, valType, v', format, state, valType, v);
+  const isInvalid = (newValType) => {
+    console.log('newValType', newValType);
+    const err = new Error('Invalid');
+    err.newValType = newValType;
+    throw err;
+  };
+  if (convertFromTypeson) {
+    const newValType = convertFromTypeson(valType);
+    if (typeof newValType === 'string') {
+      if (testInvalid && testInvalid(newValType, v)) {
+        return isInvalid(newValType);
+      }
+      valType = newValType;
+    }
+  }
+  if (allowableTypes.some((allowableType) => {
+    if (allowableType === valType) {
+      ret = allowableType;
+      return true;
+    }
+    return false;
+  })) {
+    return ret;
+  }
+  console.log('ret', ret);
+  allowableTypes.some((allowableType) => {
+    const {
+      valueMatch, superType, childTypes
+    } = Types.availableTypes[allowableType];
+    if (
+      (superType && valueMatch &&
+        // Currently using for `true` and `false`
+        superType === valType && valueMatch(v)) ||
+      (childTypes && childTypes.includes(valType))
+    ) {
+      ret = allowableType;
+      return true;
+    }
+    return false;
+  });
+  console.log('ret2', ret);
+  if (ret === undefined) {
+    return isInvalid(valType);
+  }
+  return ret;
+};
+
+/**
+ * @callback FormatIterator
+ * @param {StructuredCloneValue} records
+ * @param {{
+ *   format: string
+ *   error: Error
+ *   rootUI: Element
+ * }} stateObj
+ * @returns {Promise<Element>}
+ */
+
+/**
+ * @type {FormatIterator}
+ */
+export const iterate = (records, stateObj) => {
+  console.log('records', records);
+  if (!stateObj.format) {
+    stateObj.format = 'structuredCloning';
+  }
+  // Todo: Replace this with async typeson?
+  // eslint-disable-next-line promise/avoid-new
+  return new Promise((resolve, reject) => {
+    const typeson = new Typeson({
+      encapsulateObserver: encapsulateObserver(stateObj)
+    }).register(structuredCloningThrowing);
+    typeson.encapsulate(records);
+    // Todo (low): We might want to run async encapsulate for
+    //   async types (and put this after Promise resolves)
+    if (stateObj.error) {
+      reject(stateObj.error);
+    } else {
+      resolve(stateObj.rootUI);
+    }
+  });
+};
+
+/**
+ * @param {string} state
+ * @returns {string[]}
+ */
+export const getTypesForState = function (state) {
+  if (state && Types.contexts.structuredCloning[state]) {
+    const typesForFormat = this.getTypesForState() ||
+      /* istanbul ignore next -- types should be an array */
+      [];
+    Types.contexts.structuredCloning[state].forEach(({type, after}) => {
+      const precedingIdx = typesForFormat.indexOf(after);
+      typesForFormat.splice(precedingIdx + 1, 0, type);
+    });
+    return typesForFormat;
+  }
+  return this.types();
+  /*
+  // Todo (low): These need to specify their own inner contexts
+  if (['map', 'set'].includes(state)) {return;}
+  if ('int8array', 'uint8array', 'uint8clampedarray',
+    'int16array', 'uint16array', 'int32array',
+    'uint32array', 'float32array', 'float64array'
+  ).includes(state)) {return;}
+  */
+};
+
+/**
+ * @returns {string[]}
+ */
+export const types = () => {
+  const jsonTypes = json.types();
+  replaceTypes(jsonTypes, [
+    [
+      'array',
+      // 'sparseArrays',
+      'arrayNonindexKeys'
+    ]
+  ]);
+  return [
+    // This type is only for throwing upon cloning errors:
+    // 'checkDataCloneException'
+    // This type might be supported by evaluable JS or config passed in:
+    // 'userObject'
+    ...jsonTypes,
+    'undef', // Explicit undefined only
+    'bigint',
+    'SpecialNumber', // '`NaN`, `Infinity`, `-Infinity`'},
+    'date',
+    'regexp',
+    'BooleanObject',
+    'NumberObject',
+    'StringObject',
+    'blobHTML'
+    // Ok, but will need some work
+    //     'map', 'set',
+    //     'blob', 'file', 'filelist'
+    //     'arraybuffer', 'arraybufferview'
+    //     'dataview', 'imagedata', 'imagebitmap',
+    /*
+              // Typed Arrays
+              'int8array',
+              'uint8array',
+              'uint8clampedarray',
+              'int16array',
+              'uint16array',
+              'int32array',
+              'uint32array',
+              'float32array',
+              'float64array',
+
+              // Intl (imperfect)
+              'IntlCollator',
+              'IntlDateTimeFormat',
+              'IntlNumberFormat'
+              */
+  ];
+};

package/src/formats.js

@@ -0,0 +1,229 @@
+import Types from './types.js';
+import {jml} from '../node_modules/jamilih/dist/jml-es.js';
+
+import {$e, DOM} from './utils/templateUtils.js';
+import dialogs from './utils/dialogs.js';
+
+import * as indexedDBKey from './formats/indexedDBKey.js';
+import * as json from './formats/json.js';
+import * as structuredCloning from './formats/structuredCloning.js';
+
+// Using methods ensure we have fresh copies
+const Formats = {
+  availableFormats: {
+    indexedDBKey,
+    json,
+    // Todo (readme): these too? getTypesForState(state)
+    /* schema:
+    schemaAndArbitrary,
+    schemaOnly,
+    */
+    structuredCloning
+  }
+};
+
+/**
+ * An arbitrary Structured Clone, JSON, etc. value.
+ * @typedef {any} StructuredCloneValue
+ */
+
+/**
+ * @callback BuildTypeChoices
+ * @param {object} cfg
+ * @param {string} cfg.format
+ * @param {string} cfg.typeNamespace
+ * @param {StructuredCloneValue} cfg.value
+ * @param {boolean} [cfg.setValue=false]
+ * @param {string} cfg.state
+ * @param {string} cfg.keySelectClass
+ * @param {boolean} cfg.requireObject
+ * @param {boolean} cfg.objectHasValue
+ * @param {RootElement} cfg.topRoot Always a `div` element?
+ * @param {string} cfg.schema Schema name
+ * @param {string} cfg.schemaContent Schema contents
+ * @returns {JamilihArray}
+ */
+
+/**
+ * @type {BuildTypeChoices}
+ */
+const buildTypeChoices = Formats.buildTypeChoices = ({
+  format,
+  typeNamespace,
+  value,
+  setValue = false,
+  state,
+  // itemIndex = 0,
+  keySelectClass,
+  requireObject,
+  objectHasValue,
+  topRoot,
+  schema,
+  schemaContent
+}) => {
+  // console.log('format', format, 'state', state, 'path', typeNamespace);
+  const typeOptions = requireObject
+    ? [Types.getOptionForType('object')]
+    : Types.getTypeOptionsForFormatAndState(format, state);
+
+  let editUI;
+  const sel = jml('select', {
+    hidden: requireObject,
+    class: `typeChoices-${typeNamespace}${keySelectClass
+      ? ' ' + keySelectClass
+      : ''
+    }`,
+    // is: 'type-choices',
+    $custom: {
+      $setType ({type, baseValue, bringIntoFocus}) {
+        this.value = type;
+        this.$setStyles();
+        this.$addAndValidateEditUI({baseValue, bringIntoFocus});
+      },
+      $setTypeNoEditUI ({type}) {
+        this.value = type;
+        this.$setStyles();
+      },
+      $setStyles () {
+        const {value: type} = this;
+        this.dataset.type = type; // Used for styling
+        const parEl = this.parentElement;
+        if (parEl.nodeName.toLowerCase() === 'fieldset') {
+          parEl.dataset.type = type;
+          DOM.filterChildElements(parEl, 'legend').forEach((legend) => {
+            legend.dataset.type = type;
+          });
+        }
+      },
+      $getTypeRoot () {
+        const container = this.$getContainer();
+        /* istanbul ignore if -- How to replicate? */
+        if (!container) {
+          return false;
+        }
+        return $e(container, 'div[data-type]');
+      },
+      $addAndValidateEditUI ({baseValue, bringIntoFocus} = {}) {
+        const {value: type} = this;
+
+        const container = this.$getContainer();
+        DOM.removeChildren(container);
+
+        if (!type) { return; }
+        let topRoot = this.$getTopRoot();
+
+        // Todo (low): Try to avoid need for `baseValue`
+        //    (needed by arrayNonindexKeys for setting an array
+        //    length and avoiding errors); could set all
+        //    values through here?
+        editUI = Types.getUIForModeAndType({
+          readonly: false,
+          typeNamespace,
+          type,
+          bringIntoFocus,
+          hasValue: type === 'arrayNonindexKeys' && baseValue,
+          value: baseValue,
+          buildTypeChoices,
+          format,
+          topRoot
+        });
+        this.$addEditUI({editUI});
+        this.$validate();
+        topRoot = this.$getTopRoot(); // May be existing now
+        // Needed; Array/object ref somewhere could now be valid or invalid
+        Types.validateAllReferences({topRoot});
+      },
+      $addTypeAndEditUI ({type, editUI}) {
+        this.$setTypeNoEditUI({type});
+        this.$addEditUI({editUI});
+      },
+      $addEditUI ({editUI}) {
+        const container = this.$getContainer();
+        jml(editUI, container);
+      },
+      $getContainer () {
+        return this.nextElementSibling;
+      },
+      $getTopRoot () {
+        return topRoot || this.$getTypeRoot();
+      },
+      $validate () {
+        const {value: type} = this;
+        const container = this.$getContainer();
+        if (!container.firstElementChild) {
+          return false;
+        }
+        const editUI = container.firstElementChild;
+        return Types.validate({
+          type, root: editUI, topRoot: this.$getTopRoot()
+        });
+      }
+    },
+    $on: {change (e) {
+      // We don't want form `onchange` to run `$checkForKeyDuplicates`
+      //   again (through `addAndValidateEditUI`->`validateAllReferences`)
+      e.stopPropagation();
+      this.$addAndValidateEditUI();
+      this.$setStyles();
+    }}
+  }, [
+    ['option', {value: ''}, [
+      '(Choose a type)'
+    ]],
+    ...typeOptions.map(
+      ([optText, optAtts]) => [
+        'option',
+        optAtts ||
+          /* istanbul ignore next -- Should always have atts */
+          {},
+        [optText]
+      ]
+    )
+  ]);
+  if (setValue || (requireObject && !objectHasValue)) {
+    setTimeout(async () => {
+      if (!setValue) { // if (requireObject && !objectHasValue) {
+        // Todo (low): We could auto-populate keypath if has
+        //   keypath (and we probably also only want if
+        //   not autoincrement)
+        value = {};
+      }
+      try {
+        const rootEditUI = await Formats.availableFormats[format].iterate(
+          value,
+          {
+            readonly: false,
+            typeNamespace,
+            schema,
+            schemaContent
+          }
+        );
+        const type = Types.getTypeForRoot(rootEditUI);
+        sel.$addTypeAndEditUI({type, editUI: rootEditUI});
+      } catch (err) {
+        /* istanbul ignore next -- At least some errors handled earlier */
+        dialogs.alert({
+          message: 'The object to be added had types not supported ' +
+            'by the current format.'
+        });
+        /* istanbul ignore next -- How to trigger? */
+        console.log('err', err);
+      }
+    });
+  }
+  return [
+    sel,
+    ['div', {class: 'typeContainer'}]
+  ];
+};
+
+/* schema:
+Formats.getTypeForFormatStateAndValue = ({format, state, value}) => {
+  const valType = new Typeson().register(
+    structuredCloningThrowing
+  ).rootTypeName(value);
+  return canonicalToAvailableType(format, state, valType, value);
+};
+*/
+
+export default Formats;

package/src/fundamentalTypes/BooleanObjectType.js

@@ -0,0 +1,55 @@
+import {$e, $$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {TypeObject}
+ */
+const BooleanObjectType = {
+  option: ['BooleanObject'],
+  stringRegex: /^Boolean\((.*)\)$/u,
+  toValue (s) {
+    return {
+      // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins
+      value: new Boolean(s === 'true')
+    };
+  },
+  getInput ({root}) {
+    return $e(root, 'input');
+  },
+  getValue ({root}) {
+    return this.toValue(String(this.getInput({root}).checked)).value;
+  },
+  setValue ({root, value}) {
+    const inputs = $$e(root, 'input');
+    const input = inputs[value.valueOf() ? 0 : 1];
+    input.checked = true;
+  },
+  viewUI ({value}) {
+    return ['i', {dataset: {type: 'BooleanObject'}}, [`Boolean(${value})`]];
+  },
+  ct: 0,
+  editUI ({
+    // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins
+    typeNamespace, value = new Boolean(true)
+  }) {
+    this.ct++;
+    return ['div', {dataset: {type: 'BooleanObject'}}, [
+      ['label', [
+        'True',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-BooleanObject${this.ct}`,
+          value: 'true', checked: value.valueOf()
+        }]
+      ]],
+      ['label', [
+        'False',
+        ['input', {
+          type: 'radio',
+          name: `${typeNamespace}-BooleanObject${this.ct}`,
+          value: 'false', checked: !value.valueOf()
+        }]
+      ]]
+    ]];
+  }
+};
+
+export default BooleanObjectType;

package/src/fundamentalTypes/NumberObjectType.js

@@ -0,0 +1,41 @@
+import {$e} from '../utils/templateUtils.js';
+import Types from '../types.js';
+
+/**
+ * @type {TypeObject}
+ */
+const NumberObjectType = {
+  option: ['NumberObject'],
+  stringRegex: /^Number\((.*)\)$/u,
+  toValue (s) {
+    // eslint-disable-next-line no-new-wrappers, unicorn/new-for-builtins
+    return {value: new Number(s)};
+  },
+  validate ({root}) {
+    return Types.availableTypes.number.validate({root});
+  },
+  getInput ({root}) {
+    return $e(root, 'input');
+  },
+  getValue ({root}) {
+    return this.toValue(this.getInput({root}).value).value;
+  },
+  setValue ({root, value}) {
+    this.getInput({root}).value = String(value);
+  },
+  viewUI ({value}) {
+    return ['i', {dataset: {type: 'NumberObject'}}, [`Number(${value})`]];
+  },
+  editUI ({typeNamespace, value}) {
+    return ['div', {dataset: {type: 'NumberObject'}}, [
+      ['input', {
+        name: `${typeNamespace}-NumberObject`,
+        type: 'number',
+        value,
+        step: 'any'
+      }]
+    ]];
+  }
+};
+
+export default NumberObjectType;