@es-joy/jsoe 0.0.1

package/src/subTypes/blobHTMLType.js

@@ -0,0 +1,160 @@
+/* globals sceditor */
+import {jml} from '../../node_modules/jamilih/dist/jml-es.js';
+import {$e} from '../utils/templateUtils.js';
+
+import dialogs from '../utils/dialogs.js';
+import {isNullish} from '../utils/types.js';
+
+const blobHTMLType = {
+  // Todo (low): Support other content-types
+  option: ['Blob (text/html)'],
+  stringRegex: /^data:text\/html(?:;base64)?,.*$/u,
+  valueMatch: (v) => v.type === 'text/html',
+  superType: 'blob',
+  toValue (s) {
+    // Todo (low): `Blob` untested; use https://stackoverflow.com/a/30407840/271577 ?
+    /**
+     *
+     * @param {string} dataURI
+     * @returns {Blob}
+     */
+    function dataURIToBlob (dataURI) {
+      // Adapted from https://stackoverflow.com/a/12300351/271577
+      const [mimeInfo, bytes] = dataURI.split(',');
+      const [mimeString, encoding] = mimeInfo.split(':')[1].split(';');
+      let ab;
+      if (encoding === 'base64') {
+        const byteString = atob(bytes);
+        ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < byteString.length; i++) {
+          // eslint-disable-next-line unicorn/prefer-code-point -- Only a byte
+          ia[i] = byteString.charCodeAt(i);
+        }
+      } else {
+        ab = bytes;
+      }
+      return new Blob([ab], {type: mimeString});
+    }
+    return {
+      value: dataURIToBlob(s)
+    };
+  },
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    return $e(root, 'textarea');
+  },
+  getValue (/* {root} */) {
+    return this.toValue(
+      'data:text/html,' + this.sceditorInstance.val()
+      // this.getInput({root}).value
+    ).value;
+  },
+  loadBlob (value) {
+    const reader = new FileReader();
+    // eslint-disable-next-line promise/avoid-new
+    return new Promise((resolve, reject) => {
+      reader.addEventListener('loadend', () => {
+        resolve(reader);
+      });
+      reader.addEventListener(
+        'error',
+        /* istanbul ignore next -- How to simulate? */
+        (_e) => {
+          reject(reader.error);
+        }
+      );
+      reader.readAsText(value);
+    });
+  },
+  async setValue ({/* root, */ value}) {
+    const {result} = await this.loadBlob(value);
+    this.sceditorInstance.val(result);
+    // this.getInput({root}).value = result;
+  },
+  viewUI ({value}) {
+    let val;
+    const div = jml('div', {dataset: {type: 'blobHTML'}}, [
+      'HTML: ',
+      ['button', {$on: {
+        click () {
+          dialogs.alert({message: ['div', [
+            'Source: ',
+            ['textarea', {class: 'view-source'}, [val]]
+          ]]});
+        }
+      }}, ['View source']]
+    ]);
+    // eslint-disable-next-line promise/prefer-await-to-then
+    this.loadBlob(value).then(({
+      result
+    }) => {
+      val = result;
+      jml('iframe', {
+        sandbox: '',
+        srcdoc: val
+      }, div);
+      return undefined;
+    // eslint-disable-next-line promise/prefer-await-to-then
+    }).catch(
+      /* istanbul ignore next -- How to simulate? */
+      () => {
+      // Todo: Show an error message?
+      }
+    );
+    return [div];
+    // return ['i', [`data:text/html,${value}`]];
+  },
+  editUI ({typeNamespace, value}) {
+    const textarea = jml('textarea', {name: `${typeNamespace}-blobHTML`});
+    const root = jml('div', {dataset: {type: 'blobHTML'}}, [
+      textarea
+    ]);
+    setTimeout(() => {
+      // Push onto these: https://www.sceditor.com/documentation/formats/xhtml/
+      // sceditor.formats.xhtml.converters array
+      // sceditor.formats.xhtml.allowedAttribs object
+      // sceditor.formats.xhtml.disallowedAttribs object
+      // sceditor.formats.xhtml.allowedTags array
+      // sceditor.formats.xhtml.disallowedTags array
+      // console.log(
+      //  'sceditor.formats.xhtml.converters',
+      //  sceditor.formats.xhtml.converters.map((c) => Object.keys(c.tags))
+      // );
+      // console.log(
+      //   'sceditor.formats.xhtml.converters',
+      //   sceditor.formats.xhtml.converters.map((c) => c.conv.toString())
+      // );
+      sceditor.create(textarea, {
+        // Todo (low): "dragdrop" plugin is for file handling (could
+        //   treat as Blobs but would need to reference them)
+        // "autoyoutube" plugin may be ok
+        // toolbarExclude (default of `null` doesn't exclude any)
+        // Must also add languages files (after editor files but
+        //   before editor creation)
+        // locale: 'en',
+        // emoticons: {}, icons, //
+        // width, height, resizeMinWidth, resizeMinHeight, autoExpand: true,
+        // autofocus, autofocusEnd
+        // id, spellcheck, toolbarContainer, dropDownCss, fonts, colors
+        // disableBlockRemove, parserOptions
+        width: '1000px',
+        height: '225px',
+        // auto-updates original textbox when the editor loses focus
+        autoUpdate: true,
+        resizeMaxHeight: -1,
+        resizeMaxWidth: -1,
+        plugins: 'xhtml,plaintext,undo',
+        emoticonsRoot: 'node_modules/sceditor/',
+        style: 'node_modules/sceditor/minified/themes/content/default.min.css'
+      });
+      this.sceditorInstance = sceditor.instance(textarea);
+      if (!isNullish(value)) {
+        this.setValue({root, value});
+      }
+    });
+    return [root];
+  }
+};
+
+export default blobHTMLType;

package/src/subTypes/falseType.js

@@ -0,0 +1,42 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {TypeObject}
+ */
+const falseType = {
+  option: ['Boolean (false)', {value: 'false'}],
+  stringRegex: /^false$/u,
+  toValue: () => ({value: false}),
+  valueMatch: (v) => v === false,
+  superType: 'boolean',
+  getValue: () => false,
+  viewUI () {
+    return ['i', {dataset: {type: 'false'}}, ['false']];
+  },
+  ct: 0,
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    return $e(root, 'input');
+  },
+  editUI ({typeNamespace}) {
+    this.ct++;
+    return ['div', {dataset: {type: 'false'}}, [
+      ['label', [
+        'True',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-false${this.ct}`,
+          value: 'true', disabled: true
+        }]
+      ]],
+      ['label', [
+        'False',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-false${this.ct}`,
+          value: 'false', checked: true, disabled: true
+        }]
+      ]]
+    ]];
+  }
+};
+
+export default falseType;

package/src/subTypes/trueType.js

@@ -0,0 +1,42 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {TypeObject}
+ */
+const trueType = {
+  option: ['Boolean (true)', {value: 'true'}],
+  stringRegex: /^true$/u,
+  toValue: (_s) => ({value: true}),
+  valueMatch: (v) => v === true,
+  superType: 'boolean',
+  getValue: () => true,
+  viewUI () {
+    return ['i', {dataset: {type: 'true'}}, ['true']];
+  },
+  ct: 0,
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    return $e(root, 'input');
+  },
+  editUI ({typeNamespace}) {
+    this.ct++;
+    return ['div', {dataset: {type: 'true'}}, [
+      ['label', [
+        'True',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-true${this.ct}`,
+          value: 'true', checked: true, disabled: true
+        }]
+      ]],
+      ['label', [
+        'False',
+        ['input', {
+          type: 'radio', name: `${typeNamespace}-true${this.ct}`,
+          value: 'false', disabled: true
+        }]
+      ]]
+    ]];
+  }
+};
+
+export default trueType;

package/src/superTypes/InfinitiesSuperType.js

@@ -0,0 +1,49 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @type {SuperTypeObject}
+ */
+const InfinitiesSuperType = {
+  option: ['Infinities', {title: '`Infinity`, `-Infinity`'}],
+  childTypes: ['infinity', 'negativeInfinity'],
+  stringRegex: /^-?Infinity$/u,
+  toValue (s) {
+    return {
+      value: s === 'Infinity'
+        ? Number.POSITIVE_INFINITY
+        : Number.NEGATIVE_INFINITY
+    };
+  },
+  getSelect ({root}) {
+    return $e(root, 'select');
+  },
+  getValue ({root}) {
+    return this.toValue(this.getSelect({root}).value).value;
+  },
+  setValue ({root, value}) {
+    this.getSelect({root}).value = String(value);
+  },
+  viewUI ({value}) {
+    return ['i', {dataset: {type: 'Infinities'}}, [String(value)]];
+  },
+  getInput ({root}) {
+    return $e(root, 'select');
+  },
+  editUI ({typeNamespace, value = Number.POSITIVE_INFINITY}) {
+    return ['div', {dataset: {type: 'Infinities'}}, [
+      ['label', [
+        'Infinities: ',
+        ['select', {name: `${typeNamespace}-Infinities`}, [
+          ['option', {
+            value: 'Infinity', selected: value === Number.POSITIVE_INFINITY
+          }, ['Infinity']],
+          ['option', {
+            value: '-Infinity', selected: value === Number.NEGATIVE_INFINITY
+          }, ['-Infinity']]
+        ]]
+      ]]
+    ]];
+  }
+};
+
+export default InfinitiesSuperType;

package/src/superTypes/SpecialNumberSuperType.js

@@ -0,0 +1,62 @@
+import {$e} from '../utils/templateUtils.js';
+
+/**
+ * @typedef {TypeObject} SuperTypeObject
+ * @property {string[]} childTypes
+ */
+
+/**
+ * @type {SuperTypeObject}
+ */
+const SpecialNumberSuperType = {
+  option: ['SpecialNumber', {title: '`NaN`, `Infinity`, `-Infinity`'}],
+  childTypes: ['infinity', 'negativeInfinity', 'nan'],
+  stringRegex: /^(?:NaN|-?Infinity)$/u,
+  toValue (s) {
+    return {
+      value: s === 'NaN'
+        ? Number.NaN
+        : s === 'Infinity'
+          ? Number.POSITIVE_INFINITY
+          : Number.NEGATIVE_INFINITY
+    };
+  },
+  getSelect ({root}) {
+    return $e(root, 'select');
+  },
+  /* istanbul ignore next -- No dupe keys, array refs, or validation */
+  getInput ({root}) {
+    return $e(root, 'select');
+  },
+  getValue ({root}) {
+    return this.toValue(this.getSelect({root}).value).value;
+  },
+  setValue ({root, value}) {
+    this.getSelect({root}).value = String(value);
+  },
+  viewUI ({value}) {
+    return ['i', {dataset: {type: 'SpecialNumber'}}, [String(value)]];
+  },
+  editUI ({typeNamespace, value = Number.NaN}) {
+    return ['div', {dataset: {type: 'SpecialNumber'}}, [
+      ['label', [
+        'Special number: ',
+        ['select', {
+          name: `${typeNamespace}-SpecialNumber`
+        }, [
+          ['option', {
+            value: 'NaN', selected: Number.isNaN(value)
+          }, ['NaN']],
+          ['option', {
+            value: 'Infinity', selected: value === Number.POSITIVE_INFINITY
+          }, ['Infinity']],
+          ['option', {
+            value: '-Infinity', selected: value === Number.NEGATIVE_INFINITY
+          }, ['-Infinity']]
+        ]]
+      ]]
+    ]];
+  }
+};
+
+export default SpecialNumberSuperType;

package/src/typeChoices.js

@@ -0,0 +1,125 @@
+import {jml} from '../node_modules/jamilih/dist/jml-es.js';
+import Formats from './formats.js';
+import {$e, DOM} from './utils/templateUtils.js';
+
+/**
+ * @todo Compose from format metadata, so can make user customizable.
+ * @param {object} cfg
+ * @param {string} cfg.schema
+ * @param {boolean} cfg.hasKeyPath
+ * @returns {JamilihArray[]}
+ */
+export const getFormatAndSchemaChoices = ({schema, hasKeyPath}) => {
+  const hasSchema = typeof schema === 'string';
+  return [
+    ['JSON only', {value: 'json'}],
+    ...(hasKeyPath
+      ? []
+      : [['IndexedDB key', {value: 'indexedDBKey'}]]),
+    ['Structured Clone (via Typeson JSON)', {
+      value: 'structuredCloning', selected: !hasSchema
+    }]
+    /* schema:
+    ...(hasSchema
+      ? [
+        [`Schema + arbitrary: ${schema}`, {
+          value: 'schemaAndArbitrary',
+          dataset: {schema}
+        }],
+        [`Schema only: ${schema}`, {
+          value: 'schemaOnly',
+          dataset: {schema},
+          selected: hasSchema
+        }]
+      ]
+      : []
+    )
+    */
+    /*
+        // This can be supported for editing only
+        ['Arbitrary (Non-Typeson-serializable will be read-only)', {
+            value: 'arbitrary',
+            title: 'Any value that the typeson-registry supports ' +
+              'for structured cloning'
+        }]
+    */
+  ].map(([optText, optAtts]) => {
+    return ['option', optAtts, [optText]];
+  });
+};
+
+/**
+ * Builds a selector and container for types.
+ * @param {object} cfg
+ * @param {string} cfg.schema The schema name
+ * @param {object} cfg.schemaContent The schema content
+ * @param {boolean} cfg.hasValue If false and `hasKeyPath` is `true`,
+ *   will initialize with an object
+ * @param {boolean} cfg.singleValue
+ * @param {boolean} cfg.hasKeyPath
+ * @param {string} cfg.typeNamespace
+ * @returns {{
+ *   mainTypeChoices: HTMLSelectElement,
+ *   typesHolder: HTMLDivElement
+ * }} The selector for types and the container for them
+ */
+function typeChoices ({
+  schema,
+  schemaContent,
+  hasValue,
+  singleValue,
+  hasKeyPath,
+  typeNamespace
+}) {
+  const mainTypeChoices = jml('select', {
+    class: 'mainTypeChoices',
+    hidden: singleValue,
+    // is: 'main-type-choices',
+    $custom: {
+      $setFormat (valueFormat) {
+        this.value = valueFormat;
+        this.$buildTypeChoices();
+      },
+      $buildTypeChoices () {
+        const typesHolder = this.nextElementSibling;
+        DOM.removeChildren(typesHolder);
+        jml({'#': Formats.buildTypeChoices({
+          topRoot: $e(typesHolder, 'div[data-type]'),
+          resultType: 'both',
+          format: this.value,
+          typeNamespace,
+          requireObject: hasKeyPath,
+          objectHasValue: hasValue,
+          schema,
+          schemaContent
+        })}, typesHolder);
+      }
+    },
+    $on: {change () {
+      this.$buildTypeChoices();
+    }}
+  }, getFormatAndSchemaChoices({schema, hasKeyPath}));
+  const typesHolder = jml('div', {class: 'typesHolder', $custom: {
+    $getTypeRoot () {
+      return $e(this, 'div[data-type]');
+    },
+    $getTypeSelect () {
+      return $e(this, `.typeChoices-${typeNamespace}`);
+    }
+  }});
+
+  jml({'#': Formats.buildTypeChoices({
+    resultType: 'both',
+    topRoot: $e(typesHolder, 'div[data-type]'),
+    format: 'structuredCloning',
+    typeNamespace,
+    requireObject: hasKeyPath,
+    objectHasValue: hasValue,
+    schema,
+    schemaContent
+  })}, typesHolder);
+
+  return {mainTypeChoices, typesHolder};
+}
+
+export default typeChoices;