@es-joy/jsoe 0.1.0 → 0.2.0

package/src/formats.js

@@ -1,13 +1,17 @@
-import Types from './types.js';
-import {jml} from '../vendor/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';
 
+/* schema:
+const getTypeForFormatStateAndValue = ({format, state, value}) => {
+  const valType = new Typeson().register(
+    structuredCloningThrowing
+  ).rootTypeName(value);
+  return canonicalToAvailableType(format, state, valType, value);
+};
+Formats.getTypeForFormatStateAndValue = getTypeForFormatStateAndValue;
+*/
+
 // Using methods ensure we have fresh copies
 const Formats = {
   availableFormats: {
@@ -23,207 +27,14 @@ const Formats = {
 };
 
 /**
- * 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}
+ * @type {import('./formats/structuredCloning.js').FormatIterator}
  */
-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);
-      }
+export async function getControlsForFormatAndValue (format, record, stateObj) {
+  return await Formats.availableFormats[format]
+    .iterate(record, {
+      format,
+      ...stateObj
     });
-  }
-  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

@@ -1,7 +1,7 @@
 import {$e, $$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const BooleanObjectType = {
   option: ['BooleanObject'],

package/src/fundamentalTypes/NumberObjectType.js

@@ -2,7 +2,7 @@ import {$e} from '../utils/templateUtils.js';
 import Types from '../types.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const NumberObjectType = {
   option: ['NumberObject'],

package/src/fundamentalTypes/StringObjectType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const StringObjectType = {
   stringRegex: /^String\(([^)]*)\)$/u,

package/src/fundamentalTypes/arrayReferenceType.js

@@ -5,7 +5,7 @@ import {
 } from '../utils/jsonPointer.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const arrayReferenceType = {
   option: ['Array reference'],

package/src/fundamentalTypes/arrayType.js

@@ -8,7 +8,7 @@ import {
 } from '../utils/jsonPointer.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const arrayType = {
   option: ['Array'],
@@ -646,14 +646,14 @@ const arrayType = {
       ], arrayItems);
       // We must ensure fieldset is built before passing it
       jml({'#': [
-        ...buildTypeChoices({
+        ...(buildTypeChoices({
           resultType,
           topRoot,
           format,
           state: type,
           itemIndex,
           typeNamespace
-        }),
+        }).domArray),
         nbsp.repeat(2),
         ['button', {$on: {click (e) {
           e.preventDefault();

package/src/fundamentalTypes/bigintType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const bigintType = {
   option: ['BigInt'],

package/src/fundamentalTypes/dateType.js

@@ -3,7 +3,7 @@ import {jml} from '../../vendor/jamilih/dist/jml-es.js';
 import Types from '../types.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const dateType = {
   option: ['Date'],

package/src/fundamentalTypes/nullType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const nullType = {
   option: ['Null'],

package/src/fundamentalTypes/numberType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const numberType = {
   option: ['Number'],

package/src/fundamentalTypes/objectReferenceType.js

@@ -1,7 +1,7 @@
 import Types from '../types.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const objectReferenceType = {
   option: ['Object reference'],

package/src/fundamentalTypes/objectType.js

@@ -1,7 +1,7 @@
 import Types from '../types.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const objectType = {
   option: ['Object'],

package/src/fundamentalTypes/regexpType.js

@@ -3,7 +3,7 @@ import {jml} from '../../vendor/jamilih/dist/jml-es.js';
 import Types from '../types.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const regexpType = {
   option: ['RegExp'],

package/src/fundamentalTypes/sparseUndefinedType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const sparseUndefinedType = {
   option: ['Sparse undefined'],

package/src/fundamentalTypes/stringType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const stringType = {
   option: ['String'],

package/src/fundamentalTypes/undefinedType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const undefinedType = {
   stringRegex: /^undefined$/u,

package/src/index.js

@@ -1,7 +1,12 @@
 export {default as Types} from './types.js';
 
-export {default as Formats} from './formats.js';
+export {default as Formats, getControlsForFormatAndValue} from './formats.js';
 
 export {
-  default as typeChoices, getFormatAndSchemaChoices
+  buildTypeChoices as typeChoices
 } from './typeChoices.js';
+
+export {
+  formatAndTypeChoices,
+  getFormatAndSchemaChoices
+} from './formatAndTypeChoices.js';

package/src/jsoe.css

@@ -0,0 +1,58 @@
+input:invalid {
+  background-color: pink;
+}
+
+[data-type="undef"] {
+  background-color: green;
+}
+[data-type="null"] {
+  background-color: lightgreen;
+}
+[data-type="true"] {
+  background-color: blue;
+  color: white;
+}
+[data-type="false"] {
+  background-color: pink;
+}
+[data-type="number"] {
+  background-color: violet;
+}
+[data-type="string"] {
+  background-color: lightblue;
+}
+[data-type="array"], [data-type="sparseArrays"], [data-type="arrayNonindexKeys"] {
+  background-color: lightyellow;
+}
+[data-type="object"] {
+  background-color: orange;
+}
+
+
+[data-type="arrayReference"] {
+  color: white;
+  background-color: indigo;
+}
+[data-type="objectReference"] {
+  color: white;
+  background-color: purple;
+}
+[data-type="date"] {
+  background-color: teal;
+}
+[data-type="regexp"] {
+  background-color: yellow;
+}
+[data-type="SpecialNumber"], [data-type="Infinities"] {
+  background-color: red;
+}
+[data-type="BooleanObject"], [data-type="NumberObject"], [data-type="StringObject"] {
+  background-color: aqua;
+}
+[data-type="blobHTML"] {
+  background-color: sandybrown;
+}
+
+[class^="propertyName-"] {
+  background-color: yellow;
+}

package/src/subTypes/falseType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const falseType = {
   option: ['Boolean (false)', {value: 'false'}],

package/src/subTypes/trueType.js

@@ -1,7 +1,7 @@
 import {$e} from '../utils/templateUtils.js';
 
 /**
- * @type {TypeObject}
+ * @type {import('../types.js').TypeObject}
  */
 const trueType = {
   option: ['Boolean (true)', {value: 'true'}],