json-schema-form / json-schema-form-core

Core library

JSON Schema Form Core

Core library for working with JSON-Schema with a UI-Schema (Form) definition that doesn't depend on a framework.

This library, through the use of its merge module, combines the schema and ui-schema into a canonical schema for use by its services and external libraries.

You DO NOT use this file in addition to Angular Schema Form, it is embedded at build into any frameworks using it.

Work-In-Progress!

There is test output that forms some super basic documentation and I intend to expand them much further to the point of almost being useful before I create a proper API and document that.

Keeping Track

After changing to Webpack 2, this library now includes a detailed version header which is passed through into Angular Schema Form and also the Bootstrap decorator bundle

/*!
 * json-schema-form-core
 * @version 1.0.0-alpha.5
 * @date Sat, 14 Jan 2017 08:08:15 GMT
 * @link https://github.com/json-schema-form/json-schema-form-core
 * @license MIT
 * Copyright (c) 2014-2017 JSON Schema Form
 */

Contributing / Plans

The main contributions we need to the core at the moment are related to both the migration of Angular Schema Form features to the core (like templates/builders) and the addition of an API for use by ASF (Angular) and RSF (React) libraries.

Please contact @Anthropic via our Gitter if you wish to get involved.

Testing it

With Angular Schema Form

There is a branch in angular-schema-form called feature/webpack-babel that integrates the core. To use it roughly follow these steps:

• Clone angular-schema-form to a sibling directory and switch to branch feature/webpack-babel
• npm install to install dependencies
• npm run build to build with the core.
• Use dist/angular-schema-form.js, now with the core from this folder. No need to also load ObjectPath since it is already included

With Mocha tests

Tests are written in mocha + chai and run trough npm test.

When the command npm run testdoc is run instead, the tests will also generate a readable markdown file test.md to document elements of the library.

Notes

• ObjectPath is bundled with json-schema-form-core
• angular-schema-form bundles json-schema-form-core so the user doesn't have to include it as an dependency.
• The code for not using ObjectPath on Angular 1.2 is removed. Could maybe be fixed but I (davidlgj) strongly believe its time to drop Angular 1.2 support since it complicates validation code as well.

json-schema-form-core's Issues

Design suggestion

@Anthropic Hi Anthropic
I just completed a schema based form editor for angular 2 for a future project and I would like to discuss my solution with you - if you are interested? - since I think some of my ideas might be useful for this project and I am interested in co-operation.

My proposed solution consist of:

1. A generic gui model in typescript that can be easily consumed and used to draw a form. The gui model only contains representational data + mappings back to the schema. No validation stuff.
2. A typescript translator that reads a JSON schema file and translates it into a gui model.
3. A web form in angular 2 that process the gui model, shows the corresponding form and calls into AJV (https://github.com/epoberezkin/ajv) at roughly each keystroke to validate and show validation errors.

This solution is very simple yet works fine for my yet-to-be announced OS project. See example of an Angular2 form below using this approach. The code could be extended to work with any web framework with modifications to step 3. The main idea, which I think could affect this core project is to introduce a gui model - or a IR (intermediate representation) in other words - as a translation target for the core AND to simplify things by not putting validations stuff into it but still requiring a fast schema validator to be used in the gui rather than standard validation api's for form elements.

Example of dynamic from produced from a json schema:

An example of how an instance of the corresponding gui model could look like is shown below:

const complex_gui_model1: SettingsGuiModel = {
  kind: 'group',
  name: '',
  controlType: 'group',
  label: '',
  tooltip: '',
  settingsObjectPath: '',
  required: true,
  elements: [
    { kind: 'group', name: 'authentication', controlType: 'group', label: 'Authentication', tooltip: 'an authentication description here', settingsObjectPath: 'authentication', isRoot: false, required: true,
      elements: [ { kind: 'field', name: 'user', controlType: 'input', label: 'User', tooltip: 'a username', settingsObjectPath: 'authentication.user', defaultValue: '', values: undefined, required: true, type: 'string', subType: 'none' },
                  { kind: 'field', name: 'password', controlType: 'input', label: 'Password', tooltip: 'a password', settingsObjectPath: 'authentication.password', defaultValue: '', values: undefined, required: true, type: 'string', subType: 'none' },
                  { kind: 'field', name: 'scheme', controlType: 'input', label: 'scheme',  tooltip: '', settingsObjectPath: 'authentication.scheme', defaultValue: 'basic', values: undefined, required: true, type: 'string', subType: 'none' },
                  { kind: 'field', name: 'preemptive', controlType: 'yesno', label: 'preemptive',  tooltip: '', settingsObjectPath: 'authentication.preemptive', defaultValue: true, values: undefined, required: true, type: 'boolean', subType: 'none'}
                ]
    },
    { kind: 'group', name: 'server', controlType: 'group', label: 'Server', tooltip: '', settingsObjectPath: 'server', isRoot: false, required: true,
      elements: [ { kind: 'field', name: 'host', controlType: 'input', label: 'host', tooltip: '', settingsObjectPath: 'server.host', defaultValue: '', values: undefined, required: true, type: 'string', subType: 'none' },
                  { kind: 'field', name: 'port', controlType: 'input', label: 'port', tooltip: '', settingsObjectPath: 'server.port', defaultValue: 80, values: undefined, required: true, type: 'integer', subType: 'none' },
                  { kind: 'field', name: 'protocol', controlType: 'dropdown', label: 'protocol', tooltip: '', settingsObjectPath: 'server.protocol', defaultValue: 'http', values: ['http', 'ftp'], required: true, type: 'string', subType: 'none' }
                ]
    }
  ],
  errors: [],
  isRoot: true
};

And the corresponding source schema looks like is shown here:

{
  '$schema': 'http://json-schema.org/draft-04/schema#',
  'type': 'object',
  'properties': {
    'authentication': {
      'type': 'object',
      'title': 'Authentication',
      'description': 'an authentication description here',
      'properties': {
        'user': {
          'type': 'string',
          'minLength': 1,
          'default': '',
          'title' : 'User',
          'description': 'a username',
        },
        'password': {
          'type': 'string',
          'minLength': 1,
          'default': '',
          'title' : 'Password',
          'description': 'a password',
        },
        'scheme': {
          'type': 'string',
          'default': 'basic'
        },
        'preemptive': {
          'type': 'boolean',
          'default': true
        }
      },
      'required': [
        'user',
        'password',
        'scheme',
        'preemptive'
      ]
    },
    'server': {
      'type': 'object',
      'title': 'Server',
      'properties': {
        'host': {
          'type': 'string',
          'default': ''
        },
        'port': {
          'type': 'integer',
          'multipleOf': 1,
          'maximum': 65535,
          'minimum': 0,
          'exclusiveMaximum': false,
          'exclusiveMinimum': false,
          'default': 80
        },
        'protocol': {
          'type': 'string',
          'default': 'http',
          'enum' : ['http', 'ftp']
        }
      },
      'required': [
        'host',
        'port',
        'protocol'
      ]
    }
  },
  'required': [
    'authentication',
    'server'
  ],
  'additionalProperties': false
}

Let me know if you think this sounds interesting?. If so, we could co-operate on a "standardised" gui model and a translator from json schema to that model. As noted, I have an initial version working.

/Morten

could not use this as npm lib.

Enhancement

As a developer, when I install json-schema-form-core

Expected behaviour

I expect to be able to require the library.
I'm looking at refactor our react-talend-forms package using the uischema of schemaform.io.
At the moment this is a fork of react-jsonschema-form;

It seems json-schema-form-core is what I'm looking for and I would like to use it.
So for that I expect to be able to just import it and use it.

Actual behaviour

It fails with the following error:

ReferenceError: tv4 is not defined
    at Object.eval (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:2623:18)
    at __webpack_require__ (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:29:30)
    at Object.module.exports.ObjectPath.parse.i (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:2452:62)
    at __webpack_require__ (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:29:30)
    at Object.module.exports._typeof (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:491:72)
    at __webpack_require__ (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:29:30)
    at Object.eval (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:2629:18)
    at __webpack_require__ (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:29:30)
    at module.exports.Object.defineProperty.value (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:75:18)
    at Object.eval (webpack:///./~/json-schema-form-core/dist/json-schema-form-core.js?:78:10)

or just with node:

> var test = require('json-schema-form-core')
ReferenceError: tv4 is not defined
    at Object.<anonymous> (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:2623:18)
    at __webpack_require__ (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:29:30)
    at Object.module.exports.ObjectPath.parse.i (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:2452:62)
    at __webpack_require__ (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:29:30)
    at Object.module.exports._typeof (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:491:72)
    at __webpack_require__ (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:29:30)
    at Object.<anonymous> (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:2629:18)
    at __webpack_require__ (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:29:30)
    at module.exports.Object.defineProperty.value (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:75:18)
    at Object.<anonymous> (/Users/jmfrancois/github/talend/ui/packages/forms/node_modules/json-schema-form-core/dist/json-schema-form-core.js:78:10)

In my opinion the issue comes from the build which should be more a babel transpilation instead of webpack build which target bundle.

Are you opened to PR to fix this ?

Support for $ref?

Do you have an ETA for $ref support as in the example below?

{
  "$schema": "http://json-schema.org/draft-04/schema#",

  "definitions": {
    "notes": {
      "type": "object",
      "properties": {
        "classification": {
          "type": "string",
          "enum": [
            "Lite",
            "Premium",
            "Plus",
          ]
        }
      }
    }
  },

  "title": "Customer Creative Brief",
  "type": "object",
  "properties": {
    "notes": { "$ref": "#/definitions/notes" }
  }
}

How to use the core lib?

Hello, I'd like to use the core lib without a framework. Is there an example of that anywhere?

npm build is failing

when I run npm run build it fails due to the following error:

json-schema-form-core$ npm run build

> [email protected] build /Users/dmurtagh/workspace/examples/asf/json-schema-form-core
> webpack

/Users/dmurtagh/workspace/examples/asf/json-schema-form-core/webpack.config.js:22
let library = 'JSONSchemaFormCore';
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at requireConfig (/Users/dmurtagh/workspace/examples/asf/json-schema-form-core/node_modules/webpack/bin/convert-argv.js:96:18)
    at /Users/dmurtagh/workspace/examples/asf/json-schema-form-core/node_modules/webpack/bin/convert-argv.js:109:17
    at Array.forEach (native)

@json-schema-form/angular-schema-form-lead