+ This example demonstrates JSON schema validation. The JSON object in this example must contain properties like firstName and lastName, can can optionally have a property age which must be a positive integer.
+
+ See http://json-schema.org/ for more information. +
+ + + + + + diff --git a/rollup.config.js b/rollup.config.js index 539e74d..b040db3 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,6 +1,7 @@ import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; +import json from '@rollup/plugin-json'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import autoPreprocess from 'svelte-preprocess'; @@ -39,6 +40,7 @@ export default { dedupe: ['svelte'] }), commonjs(), + json(), // In dev mode, call `npm run start` once // the bundle has been generated diff --git a/src/components/JSONEditor.svelte b/src/components/JSONEditor.svelte index 191d91b..a789381 100644 --- a/src/components/JSONEditor.svelte +++ b/src/components/JSONEditor.svelte @@ -38,13 +38,17 @@ let divContents let domHiddenInput - export let validate = () => [] + export let validate = null export let onChangeJson = () => {} export function setValidator (newValidate) { validate = newValidate } + export function getValidator () { + return validate + } + export let doc = {} let state = undefined @@ -52,7 +56,7 @@ let clipboard = null $: state = syncState(doc, state, [], (path) => path.length < 1) - $: validationErrorsList = validate(doc) + $: validationErrorsList = validate ? validate(doc) : [] $: validationErrors = mapValidationErrors(validationErrorsList) let showSearch = false diff --git a/src/components/JSONNode.scss b/src/components/JSONNode.scss index 1617f61..a5bf456 100644 --- a/src/components/JSONNode.scss +++ b/src/components/JSONNode.scss @@ -151,7 +151,6 @@ margin: 0 5px; cursor: pointer; position: relative; - top: 1px; &:hover { background: lighten($light-gray, 5%); diff --git a/src/main.js b/src/main.js index 0f94155..ffd9400 100644 --- a/src/main.js +++ b/src/main.js @@ -3,3 +3,5 @@ import JSONEditor from './components/JSONEditor.svelte' export default function jsoneditor (config) { return new JSONEditor(config) } + +export { createAjvValidator } from './plugins/createAjvValidator.mjs' diff --git a/src/plugins/createAjvValidator.mjs b/src/plugins/createAjvValidator.mjs new file mode 100644 index 0000000..b82e4b2 --- /dev/null +++ b/src/plugins/createAjvValidator.mjs @@ -0,0 +1,80 @@ +import Ajv from 'ajv' +import { parseJSONPointer } from '../utils/jsonPointer.js' +import { draft04 } from '../generated/ajv/draft04.mjs' +import { draft06 } from '../generated/ajv/draft06.mjs' + +/** + * Create a JSON Schema validator powered by Ajv. + * @param {JSON} schema + * @param {Object} [schemaRefs=undefined] An object containing JSON Schema references + */ +export function createAjvValidator (schema, schemaRefs) { + const ajv = Ajv({ + allErrors: true, + verbose: true, + schemaId: 'auto', + jsonPointers: true, + $data: true + }) + + // support both draft-04 and draft-06 alongside the latest draft-07 + ajv.addMetaSchema(draft04) // FIXME + ajv.addMetaSchema(draft06) // FIXME + + if (schemaRefs) { + Object.keys(schemaRefs).forEach(ref => { + ajv.addSchema(schemaRefs[ref], ref) + }) + } + + const validateAjv = ajv.compile(schema) + + return function validate (doc) { + validateAjv(doc) + const ajvErrors = validateAjv.errors + + return ajvErrors + .map(improveAjvError) + .map(normalizeAjvError) + } +} + +/** + * @param {Object} ajvError + * @return {ValidationError} + */ +function normalizeAjvError (ajvError) { + return { + path: parseJSONPointer(ajvError.dataPath), + message: ajvError.message + } +} + +/** + * Improve the error message of a JSON schema error, + * for example list the available values of an enum. + * + * @param {Object} ajvError + * @return {Object} Returns the error with improved message + */ +function improveAjvError (ajvError) { + if (ajvError.keyword === 'enum' && Array.isArray(ajvError.schema)) { + let enums = ajvError.schema + if (enums) { + enums = enums.map(value => JSON.stringify(value)) + + if (enums.length > 5) { + const more = ['(' + (enums.length - 5) + ' more...)'] + enums = enums.slice(0, 5) + enums.push(more) + } + ajvError.message = 'should be equal to one of: ' + enums.join(', ') + } + } + + if (ajvError.keyword === 'additionalProperties') { + ajvError.message = 'should NOT have additional property: ' + ajvError.params.additionalProperty + } + + return ajvError +} diff --git a/src/plugins/createAjvValidator.test.mjs b/src/plugins/createAjvValidator.test.mjs new file mode 100644 index 0000000..6737a98 --- /dev/null +++ b/src/plugins/createAjvValidator.test.mjs @@ -0,0 +1,106 @@ +import assert from "assert" +import { createAjvValidator } from './createAjvValidator.mjs' + +const schema = { + "title": "Employee", + "description": "Object containing employee details", + "type": "object", + "properties": { + "firstName": { + "title": "First Name", + "description": "The given name.", + "examples": [ + "John" + ], + "type": "string" + }, + "lastName": { + "title": "Last Name", + "description": "The family name.", + "examples": [ + "Smith" + ], + "type": "string" + }, + "gender": { + "title": "Gender", + "enum": ["male", "female"] + }, + "availableToHire": { + "type": "boolean", + "default": false + }, + "age": { + "description": "Age in years", + "type": "integer", + "minimum": 0, + "examples": [28, 32] + }, + "job": { + "$ref": "job" + } + }, + "required": ["firstName", "lastName"] +} + +const schemaRefs = { + job: { + "title": "Job description", + "type": "object", + "required": ["address"], + "properties": { + "company": { + "type": "string", + "examples": [ + "ACME", + "Dexter Industries" + ] + }, + "role": { + "description": "Job title.", + "type": "string", + "examples": [ + "Human Resources Coordinator", + "Software Developer" + ], + "default": "Software Developer" + }, + "address": { + "type": "string" + }, + "salary": { + "type": "number", + "minimum": 120, + "examples": [100, 110, 120] + } + } + } +} + +describe('createAjvValidator', () => { + it('should create a validate function', () => { + const validate = createAjvValidator(schema, schemaRefs) + + const invalidDoc = { + firstName: 'John', + lastName: 'Doe', + gender: null, + age: "28", + availableToHire: true, + job: { + company: 'freelance', + role: 'developer', + salary: 100 + } + } + + assert.deepStrictEqual(validate(invalidDoc), [ + { path: ['gender'], message: 'should be equal to one of: \"male\", \"female\"' }, + { path: ['age'], message: 'should be integer' }, + { path: ['job'], message: 'should have required property \'address\'' }, + { path: ['job', 'salary'], message: 'should be >= 120' } + ]) + }) + + // TODO: test support for draft04, draft-06, draft-07 +}) diff --git a/src/styles.scss b/src/styles.scss index b64e3d8..1db3698 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,6 +1,6 @@ $font-family: consolas, monaco, "lucida console", "courier new", "dejavu sans mono", "droid sans mono", courier, monospace, sans-serif; -$font-size: 13px; +$font-size: 14px; $font-size-small: 11px; $font-family-menu: arial, "sans-serif"; $font-size-icon: 16px; diff --git a/tools/fix-lodash-es.cjs b/tools/fixLodashEs.cjs similarity index 100% rename from tools/fix-lodash-es.cjs rename to tools/fixLodashEs.cjs diff --git a/tools/generateAjvDrafts.mjs b/tools/generateAjvDrafts.mjs new file mode 100644 index 0000000..2ee4137 --- /dev/null +++ b/tools/generateAjvDrafts.mjs @@ -0,0 +1,25 @@ +import { readFileSync, writeFileSync } from 'fs' +import mkdirp from 'mkdirp' +import path from 'path' + +const outputFolder = './src/generated/ajv' +const jsonDrafts = [ + { + name: 'draft04', + path: './node_modules/ajv/lib/refs/json-schema-draft-04.json' + }, + { + name: 'draft06', + path: './node_modules/ajv/lib/refs/json-schema-draft-06.json' + } +] + +mkdirp.sync(outputFolder) + +// Create an embedded version of the json drafts for Ajv: a data url +jsonDrafts.forEach(jsonDraft => { + const json = String(readFileSync(jsonDraft.path)) + const outputFile = path.join(outputFolder, jsonDraft.name + '.mjs') + + writeFileSync(outputFile, `export const ${jsonDraft.name} = ${json}\n`) +})