@es-joy/jsoe 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-joy/jsoe",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./src/index.js",
@@ -13,7 +13,8 @@
   "description": "Editing of arbitrary JavaScript objects",
   "scripts": {
     "tsc": "tsc",
-    "eslint": "eslint --ext=js,cjs,md,html .",
+    "tsc-cypress": "tsc -p cypress/tsconfig.json",
+    "eslint": "eslint .",
     "lint": "npm run eslint --",
     "coverage": "open-cli http://localhost:8087/coverage/lcov-report/",
     "open": "open-cli http://localhost:8087/demo/",
@@ -26,11 +27,11 @@
     "instrument-remove-instrumented": "rimraf instrumented",
     "instrument-remove": "run-p -c instrument-remove-cache instrument-remove-instrumented",
     "copy-pages": "cp node_modules/sceditor/minified/themes/default.min.css vendor/sceditor/minified/themes/default.min.css && cp node_modules/sceditor/minified/sceditor.min.js vendor/sceditor/minified/sceditor.min.js && cp node_modules/sceditor/minified/formats/bbcode.js vendor/sceditor/minified/formats/bbcode.js && cp node_modules/sceditor/minified/formats/xhtml.js vendor/sceditor/minified/formats/xhtml.js",
-    "copy-index": "cp src/index-instrumented.html instrumented/index.html",
+    "copy-index": "echo \"Copy our index.html file too? \"",
     "copy-jamilih": "cp node_modules/jamilih/dist/jml-es.js vendor/jamilih/dist/jml-es.js",
     "copy-typeson-registry": "cp node_modules/typeson-registry/dist/index.js vendor/typeson-registry/dist/index.js",
     "copy": "run-p copy-jamilih copy-typeson-registry",
-    "instrument": "run-s -c instrument-remove instrument-add copy-index",
+    "instrument": "run-s -c instrument-remove instrument-add copy-index rollup",
     "cypress:log": "ELECTRON_ENABLE_LOGGING=1 cypress run; nyc report",
     "cypress": "cypress run; nyc report",
     "test": "npm run eslint && npm run rollup && npm run cypress"
@@ -39,58 +40,62 @@
     "cover 100%"
   ],
   "nyc": {
+    "excludeAfterRemap": true,
     "exclude": [
-      "node_modules/**"
+      "node_modules/**",
+      "src/fundamentalTypes/sparseUndefinedType.js"
     ]
   },
   "dependencies": {
     "@brettz9/node-static": "^0.1.1",
-    "jamilih": "0.58.1",
+    "jamilih": "0.58.2",
     "sceditor": "3.2.0",
-    "typeson-registry": "7.2.1"
+    "typeson-registry": "9.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/register": "^7.22.5",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/register": "^7.22.15",
     "@brettz9/eslint-plugin": "^1.0.4",
-    "@cypress/code-coverage": "^3.10.7",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.1",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@types/jsdom": "^21.1.1",
-    "axe-core": "^4.7.2",
-    "cypress": "^12.14.0",
-    "cypress-axe": "^1.4.0",
-    "eslint": "^8.42.0",
-    "eslint-config-ash-nazg": "^34.15.0",
+    "@cypress/code-coverage": "^3.12.10",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@stylistic/eslint-plugin": "^1.4.0",
+    "@types/jsdom": "^21.1.5",
+    "@types/node": "^20.9.2",
+    "axe-core": "^4.8.2",
+    "cypress": "^13.5.1",
+    "cypress-axe": "^1.5.0",
+    "eslint": "^8.54.0",
+    "eslint-config-ash-nazg": "^35.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-array-func": "^3.1.8",
-    "eslint-plugin-compat": "^4.1.4",
-    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-array-func": "^4.0.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^46.2.6",
-    "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-no-use-extend-native": "^0.5.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-unicorn": "^47.0.0",
+    "eslint-plugin-unicorn": "^49.0.0",
     "fast-deep-equal": "^3.1.3",
     "jsdom": "^21.1.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "open-cli": "^7.2.0",
-    "rimraf": "^5.0.1",
-    "rollup": "3.25.0",
-    "rollup-plugin-istanbul": "^4.0.0",
+    "rimraf": "^5.0.5",
+    "rollup": "4.5.0",
+    "rollup-plugin-istanbul": "^5.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "typescript": "^5.1.3"
+    "typescript": "^5.2.2"
   },
   "repository": {
     "type": "git",

package/rollup.config.js

@@ -3,8 +3,20 @@ import {nodeResolve} from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 // import babel from 'rollup-plugin-babel';
 // import {terser} from 'rollup-plugin-terser';
+import istanbul from 'rollup-plugin-istanbul';
 
-export default {
+export default [{
+  input: 'demo/index.js',
+  output: {
+    file: 'instrumented/demo/index.js',
+    format: 'es'
+  },
+  plugins: [
+    istanbul(),
+    nodeResolve(),
+    commonjs()
+  ]
+}, {
   input: 'node_modules/fast-deep-equal/es6/index.js',
   output: {
     file: 'src/deepEqual.js',
@@ -26,4 +38,4 @@ export default {
       include: 'node_modules/**'
     })
   ]
-};
+}];

package/server.js

@@ -9,7 +9,7 @@ const fileServer = new statik.Server();
 
 http.createServer(function (request, response) {
   request.addListener('end', function () {
-    fileServer.serve(request, response, function (e, res) {
+    fileServer.serve(request, response, function (e /* , res */) {
       if (e && (e.status === 404)) { // If the file wasn't found
         fileServer.serveFile(
           instrumented === 'instrumented'

package/src/formatAndTypeChoices.js

@@ -21,7 +21,7 @@ import {$e, DOM} from './utils/templateUtils.js';
  */
 export const getFormatAndSchemaChoices = ({schema, hasKeyPath} = {}) => {
   const hasSchema = typeof schema === 'string';
-  // eslint-disable-next-line max-len -- Long
+  // eslint-disable-next-line @stylistic/max-len -- Long
   return /** @type {[optText: string, opts: {value: string, selected?: boolean}][]} */ ([
     ['JSON only', {value: 'json'}],
     ...(hasKeyPath
@@ -96,7 +96,7 @@ export const getFormatAndSchemaChoices = ({schema, hasKeyPath} = {}) => {
  *   domArray: [formatChoices: FormatChoices, typesHolder: TypesHolder],
  *   getValue: (stateObj: import('./types.js').StateObject,
  *     currentPath: string) => import('./formats.js').StructuredCloneValue,
- *   getType: () => string|null|undefined,
+ *   getType: () => string,
  *   validValuesSet: () => boolean,
  *   setValue: SetValue
  * }} The selector for types and the container for them. Both should be
@@ -111,7 +111,7 @@ export function formatAndTypeChoices ({
   typeNamespace
 }) {
   const format = 'structuredCloning';
-  const formatChoices = /** @type {HTMLSelectElement} */ (jml('select', {
+  const formatChoices = /** @type {FormatChoices} */ (jml('select', {
     class: 'formatChoices',
     hidden: singleValue,
     // is: 'main-type-choices',
@@ -130,9 +130,10 @@ export function formatAndTypeChoices ({
        */
 
       /**
-       * @typedef {HTMLSelectElement} FormatChoices
-       * @property {SetFormat} $setFormat
-       * @property {TypeChoiceBuilder} $buildTypeChoices
+       * @typedef {HTMLSelectElement & {
+       *   $setFormat: SetFormat,
+       *   $buildTypeChoices: TypeChoiceBuilder
+       * }} FormatChoices
        */
 
       /**
@@ -227,7 +228,7 @@ export function formatAndTypeChoices ({
      * @returns {import('./formats.js').StructuredCloneValue}
      */
     getValue (stateObj, currentPath) {
-      // eslint-disable-next-line max-len -- Long
+      // eslint-disable-next-line @stylistic/max-len -- Long
       const root = /** @type {HTMLDivElement & {$getTypeRoot: TypeRootGetter}} */ (
         typesHolder
       ).$getTypeRoot();
@@ -241,10 +242,10 @@ export function formatAndTypeChoices ({
     },
 
     /**
-     * @returns {string|null|undefined}
+     * @returns {string}
      */
     getType () {
-      // eslint-disable-next-line max-len -- Long
+      // eslint-disable-next-line @stylistic/max-len -- Long
       const root = /** @type {HTMLDivElement & {$getTypeRoot: TypeRootGetter}} */ (
         typesHolder
       ).$getTypeRoot();
@@ -255,7 +256,7 @@ export function formatAndTypeChoices ({
      * @returns {boolean}
      */
     validValuesSet () {
-      // eslint-disable-next-line max-len -- Long
+      // eslint-disable-next-line @stylistic/max-len -- Long
       const root = /** @type {HTMLDivElement & {$getTypeRoot: TypeRootGetter}} */ (
         typesHolder
       ).$getTypeRoot();
@@ -276,12 +277,12 @@ export function formatAndTypeChoices ({
           stateObj
         )
       );
-      const type = /** @type {string} */ (Types.getTypeForRoot(rootEditUI));
-      // eslint-disable-next-line max-len -- Long
+      const type = Types.getTypeForRoot(rootEditUI);
+      // eslint-disable-next-line @stylistic/max-len -- Long
       const sel = /** @type {HTMLDivElement & {$getTypeSelect: TypeSelectGetter}} */ (
         typesHolder
       ).$getTypeSelect();
-      // eslint-disable-next-line max-len -- Long
+      // eslint-disable-next-line @stylistic/max-len -- Long
       /** @type {HTMLSelectElement & {$addTypeAndEditUI: import('./typeChoices.js').AddTypeAndEditUI}} */ (
         sel
       ).$addTypeAndEditUI({type, editUI: rootEditUI});

package/src/formats/indexedDBKey.js

@@ -36,8 +36,8 @@ const indexedDBKey = {
     if (!state || ['array'].includes(state)) {
       return this.types();
     }
-    /* istanbul ignore next -- Can't be object, so shouldn't reach here */
-    return undefined; // Todo: Should this throw?
+    // Can't be object, so shouldn't normally reach here
+    return undefined;
   }
 };
 

package/src/formats/json.js

@@ -46,8 +46,7 @@ const json = {
     if (!state || ['array', 'object'].includes(state)) {
       return this.types();
     }
-    // Todo: Should this throw?
-    /* istanbul ignore next -- No other states apparently */
+    // Shouldn't normally reach here
     return undefined;
   }
 };

package/src/formats/structuredCloning.js

@@ -17,9 +17,10 @@ import json from './json.js';
  *   type: import('../types.js').AvailableType,
  *   value: import('../formats.js').StructuredCloneValue,
  *   bringIntoFocus?: boolean,
+ *   setAValue?: boolean,
  *   schemaContent?: object,
  *   schemaState?: import('../types.js').GetPossibleSchemasForPathAndType
- * }) => HTMLElement} AddAndSetArrayElement
+ * }) => HTMLElement|null} AddAndSetArrayElement
  */
 
 /**
@@ -44,6 +45,10 @@ const encapsulateObserver = (stateObj) => {
    * }}}
    */
   const parents = {};
+
+  /** @type {string[]} */
+  const mapPaths = [];
+
   return (observerObj) => {
     const {
       type,
@@ -57,13 +62,15 @@ const encapsulateObserver = (stateObj) => {
       endIterateUnsetNumeric,
       clone
     } = observerObj;
-    // console.log('observerObj', observerObj);
     if ('replaced' in observerObj) {
       return;
     }
     if (cyclic === 'readonly' && !Array.isArray(observerObj.value)) {
       return;
     }
+    if (cyclic === 'readonly' && type === 'set') {
+      return;
+    }
     if (endIterateIn || endIterateOwn) {
       return;
     }
@@ -73,6 +80,12 @@ const encapsulateObserver = (stateObj) => {
       return;
     }
 
+    // What other situations is this firing twice, and it
+    //   shouldn't reach here?
+    if (observerObj.replacing && type === 'negativeZero') {
+      return;
+    }
+
     /* istanbul ignore if -- Not part of format */
     if (type === 'sparseUndefined') { // We'll handle otherwise
       return;
@@ -119,12 +132,21 @@ const encapsulateObserver = (stateObj) => {
     const parentPath = li === -1 ? '' : keypath.slice(0, li);
 
     const hasChildren = [
-      'array', 'object',
+      'array', 'object', 'set', 'map',
       // 'sparseArrays',
       'arrayNonindexKeys'
     ].includes(newType);
 
+    // Maps are followed up by arrays which we don't want as such;
+    //  we track the paths to avoid reporting these child arrays
+    const mapType = type === 'map' &&
+      Object.prototype.toString.call(value) === '[object Map]';
+    if (mapType) {
+      mapPaths.push(keypath);
+    }
+
     if (!stateObj.rootUI) {
+      // console.log('vvvv0', newType, newValue);
       stateObj.rootUI = Types.getUIForModeAndType({
         readonly,
         typeNamespace,
@@ -152,6 +174,18 @@ const encapsulateObserver = (stateObj) => {
       * @type {HTMLElement &
       *   {$addAndSetArrayElement: AddAndSetArrayElement}}
       */ (stateObj.rootUI);
+
+      // Since we're skipping the array elements, we need to add the
+      //   map element to the array index where the array children
+      //   will be found (which we do want)
+      if (mapType) {
+        /** @type {Map<any, any>} */ [...value].forEach((_, i) => {
+          parents[i] = /**
+          * @type {HTMLElement &
+          *   {$addAndSetArrayElement: AddAndSetArrayElement}}
+          */ (stateObj.rootUI);
+        });
+      }
       return;
     }
 
@@ -172,6 +206,22 @@ const encapsulateObserver = (stateObj) => {
         return;
       }
 
+      // Skip the array structures immediately following the Map,
+      //   as map needs to handle
+      if (!mapType && mapPaths.some((mapPath) => {
+        if (mapPath === keypath ||
+          (mapPath === '' && (/^\d+$/u).test(keypath))) {
+          return true;
+        }
+        const trailingIndex = keypath.match(/\.\d+$/u);
+        return (trailingIndex && mapPath !== '' &&
+          keypath.slice(0, -trailingIndex[0].length) === mapPath);
+      })) {
+        return;
+      }
+
+      // console.log('vvvv', newType, '::', newValue, '::', newValue?.cause);
+
       const root = ui.$addAndSetArrayElement({
         propName: arrayOrObjectPropertyName,
         type: newType,
@@ -188,7 +238,16 @@ const encapsulateObserver = (stateObj) => {
           })
         */
       });
+
+      /* istanbul ignore if -- Guard for `null` return */
+      if (!root) {
+        return;
+      }
+
       if (!readonly) {
+        // Todo: Redundant with `typeObj.setValue`? Ensure `idb-manager`
+        //    does not need both; this write-only would seem preferable
+        //    to the block in `arrayType.js` if readonly indeed not needed
         Types.setValue({
           type: newType,
           // eslint-disable-next-line object-shorthand -- TS
@@ -210,6 +269,18 @@ const encapsulateObserver = (stateObj) => {
           */ (
             root
           );
+
+        // Since we're skipping the array elements, we need to add the
+        //   map element to the array index where the array children
+        //   will be found (which we do want)
+        if (mapType) {
+          /** @type {Map<any, any>} */ [...value].forEach((_, i) => {
+            parents[`${keypath}.${i}`] = /**
+            * @type {HTMLElement &
+            *   {$addAndSetArrayElement: AddAndSetArrayElement}}
+            */ (root);
+          });
+        }
       }
     });
   };
@@ -247,7 +318,7 @@ const canonicalToAvailableType = (format, state, valType, v) => {
    * @type {import('../types.js').AvailableType|undefined}
    */
   let ret;
-  console.log('format, state, valType, v', format, state, valType, v);
+  // console.log('format, state, valType, v', format, state, valType, v);
 
   /**
    * @param {string} newValType
@@ -278,9 +349,9 @@ const canonicalToAvailableType = (format, state, valType, v) => {
   })) {
     return /** @type {import('../types.js').AvailableType} */ (ret);
   }
-  console.log('ret', ret);
+  // console.log('ret', ret);
   allowableTypes.some((allowableType) => {
-    // eslint-disable-next-line max-len -- Long
+    // eslint-disable-next-line @stylistic/max-len -- Long
     const typeObj = /** @type {import('../types.js').TypeObject & {childTypes: string[]}} */ (
       Types.availableTypes[allowableType]
     );
@@ -298,7 +369,7 @@ const canonicalToAvailableType = (format, state, valType, v) => {
     }
     return false;
   });
-  console.log('ret2', ret);
+  // console.log('ret2', ret);
   if (ret === undefined) {
     return isInvalid(valType);
   }
@@ -315,7 +386,7 @@ const canonicalToAvailableType = (format, state, valType, v) => {
 /** @type {import('../formats.js').Format} */
 const structuredCloning = {
   iterate (records, stateObj) {
-    console.log('records', records);
+    // console.log('records', records);
     if (!stateObj.format) {
       stateObj.format = 'structuredCloning';
     }
@@ -348,6 +419,12 @@ const structuredCloning = {
       });
       return typesForFormat;
     }
+    // Todo: Could we implement schemas here by introducing new keys to
+    //         `Types.contexts` which could be used rather than manual
+    //         handling to determine a delimited group of children
+    if (state === 'errorsArray') {
+      return ['error', 'errors'];
+    }
     return this.types();
     /*
     // Todo (low): These need to specify their own inner contexts
@@ -375,35 +452,33 @@ const structuredCloning = {
       ...jsonTypes,
       'undef', // Explicit undefined only
       'bigint',
-      'SpecialNumber', // '`NaN`, `Infinity`, `-Infinity`'},
+      'SpecialNumber', // '`NaN`, `Infinity`, `-Infinity`, `-0`
       'date',
       'regexp',
       'BooleanObject',
       'NumberObject',
       'StringObject',
-      'blobHTML'
+      'error',
+      'errors',
+      'blobHTML',
+      'set',
+      'map'
       // Ok, but will need some work
-      //     'map', 'set',
-      //     'blob', 'file', 'filelist'
-      //     'arraybuffer', 'arraybufferview'
+      //     'blob', 'file', 'filelist',
+      //     'arraybuffer',
       //     'dataview', 'imagedata', 'imagebitmap',
       /*
-              // Typed Arrays
-              'int8array',
-              'uint8array',
-              'uint8clampedarray',
-              'int16array',
-              'uint16array',
-              'int32array',
-              'uint32array',
-              'float32array',
-              'float64array',
-
-              // Intl (imperfect)
-              'IntlCollator',
-              'IntlDateTimeFormat',
-              'IntlNumberFormat'
-              */
+      // Typed Arrays
+        'int8array',
+        'uint8array',
+        'uint8clampedarray',
+        'int16array',
+        'uint16array',
+        'int32array',
+        'uint32array',
+        'float32array',
+        'float64array',
+      */
     ];
   }
 };

package/src/formats.js

@@ -56,8 +56,8 @@ const Formats = {
  * @returns {Promise<Element>}
  */
 export async function getControlsForFormatAndValue (format, record, stateObj) {
-  return await Formats.availableFormats[format]
-    .iterate(record, {
+  return await Formats.availableFormats[format].
+    iterate(record, {
       ...stateObj,
       // This had been before `stateObj` but should apparently have precedence
       //   or just avoid passing `format` to this function

package/src/fundamentalTypes/arrayReferenceType.js

@@ -35,7 +35,7 @@ const arrayReferenceType = {
     structuredCloning: {
       // after: 'sparseArrays',
       after: 'arrayNonindexKeys',
-      contexts: ['arrayNonindexKeys', 'object']
+      contexts: ['arrayNonindexKeys', 'object', 'set']
       // contexts: ['sparseArrays', 'object']
     }
   },
@@ -47,7 +47,7 @@ const arrayReferenceType = {
   },
   getValue ({root, stateObj, currentPath}) {
     const referentPath = this.getInput({root}).value;
-    // eslint-disable-next-line max-len -- Long
+    // eslint-disable-next-line @stylistic/max-len -- Long
     /* istanbul ignore else -- ArrayRef will not be a root, so should have stateObj */
     if (stateObj) {
       if (!stateObj.paths) {
@@ -97,7 +97,7 @@ const arrayReferenceType = {
         'arrayNonindexKeys'
         // 'sparseArrays'
       ].includes(
-        /** @type {string} */ (Types.getTypeForRoot(referent))
+        Types.getTypeForRoot(referent)
       );
     };
     let message;