Browser compatibility (#1)

Make better-ajv-errors browser compatible

.gitignore

@@ -5,3 +5,4 @@
 .vscode
 .env
 package-lock.json
+dist

package.json

@@ -1,9 +1,9 @@
 {
   "name": "better-ajv-errors",
-  "version": "0.6.7",
+  "version": "0.6.7-graphext01",
   "description": "JSON Schema validation for Human",
   "repository": "atlassian/better-ajv-errors",
-  "main": "index.js",
+  "main": "dist/index.js",
   "keywords": [
     "json-schema",
     "ajv",
@@ -16,28 +16,19 @@
     "Tong Li"
   ],
   "license": "Apache-2.0",
-  "typings": "typings.d.ts",
   "files": [
-    "lib",
-    "index.js",
-    "typings.d.ts"
+    "dist/index.js"
   ],
   "scripts": {
-    "prebuild": "rm -rf lib",
-    "build": "yarn build:modern && yarn build:legacy",
-    "build:modern": "BABEL_ENV=modern babel src -d lib/modern/",
-    "build:legacy": "BABEL_ENV=legacy babel src -d lib/legacy",
+    "prebuild": "rm -rf dist",
+    "build": "yarn webpack",
     "prerelease": "yarn build",
-    "release": "changeset release",
     "format": "prettier --write src/*.js src/**/*.js .changeset/*.js",
     "test": "jest",
     "test-ci": "jest --coverage --colors",
     "screenshot": "svg-term --command='node screenshot' --out=media/screenshot.svg --padding=5 --width=80 --height=13 --at=1000 --no-cursor --term iterm2 --profile='deep' --window"
   },
   "dependencies": {
-    "@babel/code-frame": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "chalk": "^2.4.1",
     "core-js": "^3.2.1",
     "json-to-ast": "^2.0.3",
     "jsonpointer": "^4.0.1",
@@ -65,7 +56,9 @@
     "jest-fixtures": "^0.6.0",
     "prettier": "^1.14.2",
     "pretty-quick": "^1.6.0",
-    "svg-term-cli": "^2.1.1"
+    "svg-term-cli": "^2.1.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   },
   "peerDependencies": {
     "ajv": "4.11.8 - 6"

src/index.js

@@ -2,23 +2,17 @@ import parse from 'json-to-ast';
 import prettify from './helpers';
 
 export default (schema, data, errors, options = {}) => {
-  const { format = 'cli', indent = null } = options;
+  const { indent = null } = options;
 
   const jsonRaw = JSON.stringify(data, null, indent);
   const jsonAst = parse(jsonRaw, { loc: true });
 
-  const customErrorToText = error => error.print().join('\n');
   const customErrorToStructure = error => error.getError();
   const customErrors = prettify(errors, {
     data,
     schema,
     jsonAst,
     jsonRaw,
   });
-
-  if (format === 'cli') {
-    return customErrors.map(customErrorToText).join('\n\n');
-  } else {
-    return customErrors.map(customErrorToStructure);
-  }
+  return customErrors.map(customErrorToStructure);
 };

src/validation-errors/__tests__/__snapshots__/main.js.snap

@@ -15,6 +15,7 @@ Array [
       "line": 1,
       "offset": 21,
     },
+    "suggestion": "Did you mean 'bar'? Allowed values are: foo, bar",
   },
 ]
 `;

src/validation-errors/__tests__/enum.js

@@ -22,8 +22,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print()).toMatchSnapshot();
     });
 
     it('prints correctly for no levenshtein match', () => {
@@ -37,8 +35,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print()).toMatchSnapshot();
     });
 
     it('prints correctly for empty value', () => {
@@ -52,8 +48,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print(schema, { id: '' })).toMatchSnapshot();
     });
   });
 
@@ -78,8 +72,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print()).toMatchSnapshot();
     });
 
     it('prints correctly for no levenshtein match', () => {
@@ -95,8 +87,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print()).toMatchSnapshot();
     });
 
     it('prints correctly for empty value', () => {
@@ -112,8 +102,6 @@ describe('Enum', () => {
         },
         { data, schema, jsonRaw, jsonAst }
       );
-
-      expect(error.print(schema, '')).toMatchSnapshot();
     });
   });
 });

src/validation-errors/__tests__/required.js

@@ -18,7 +18,5 @@ describe('Required', () => {
       },
       { data, schema, jsonRaw, jsonAst }
     );
-
-    expect(error.print()).toMatchSnapshot();
   });
 });

src/validation-errors/additional-prop.js

@@ -1,33 +1,56 @@
-import chalk from 'chalk';
 import BaseValidationError from './base';
+import leven from 'leven';
+import pointer from 'jsonpointer';
 
 export default class AdditionalPropValidationError extends BaseValidationError {
   constructor(...args) {
     super(...args);
     this.options.isIdentifierLocation = true;
   }
 
-  print() {
-    const { message, dataPath, params } = this.options;
-    const output = [chalk`{red {bold ADDTIONAL PROPERTY} ${message}}\n`];
-
-    return output.concat(
-      this.getCodeFrame(
-        chalk`😲  {magentaBright ${params.additionalProperty}} is not expected to be here!`,
-        `${dataPath}/${params.additionalProperty}`
-      )
-    );
-  }
-
   getError() {
     const { params, dataPath } = this.options;
-
-    return {
+    const bestMatch = this.findBestMatch();
+    //console.log(this.options)
+    const output = {
       ...this.getLocation(`${dataPath}/${params.additionalProperty}`),
       error: `${this.getDecoratedPath(dataPath)} Property ${
         params.additionalProperty
       } is not expected to be here`,
       path: dataPath,
+      suggestion: `Allowed values are: ${Object.keys(
+        this.schema.properties
+      ).join(', ')}`,
     };
+
+    if (bestMatch !== null) {
+      output.suggestion = `Did you mean '${bestMatch}'? ` + output.suggestion;
+    }
+    return output;
+  }
+
+  findBestMatch() {
+    const { params } = this.options;
+
+    const allowedValues = Object.keys(this.schema.properties);
+    const currentValue = params.additionalProperty;
+
+    if (!currentValue) {
+      return null;
+    }
+
+    const bestMatch = allowedValues
+      .map(value => ({
+        value,
+        weight: leven(value, currentValue.toString()),
+      }))
+      .sort((x, y) =>
+        x.weight > y.weight ? 1 : x.weight < y.weight ? -1 : 0
+      )[0];
+
+    return allowedValues.length === 1 ||
+      bestMatch.weight < bestMatch.value.length
+      ? bestMatch.value
+      : null;
   }
 }

src/validation-errors/base.js

@@ -1,4 +1,3 @@
-import { codeFrameColumns } from '@babel/code-frame';
 import { getMetaFromPath, getDecoratedDataPath } from '../json';
 
 export default class BaseValidationError {
@@ -31,19 +30,6 @@ export default class BaseValidationError {
     return decoratedPath;
   }
 
-  getCodeFrame(message, dataPath = this.options.dataPath) {
-    return codeFrameColumns(this.jsonRaw, this.getLocation(dataPath), {
-      highlightCode: true,
-      message,
-    });
-  }
-
-  print() {
-    throw new Error(
-      `Implement the 'print' method inside ${this.constructor.name}!`
-    );
-  }
-
   getError() {
     throw new Error(
       `Implement the 'getError' method inside ${this.constructor.name}!`