Plugin Support

[eiof]

React-json-schema is intentionally minimal. It's purpose is to create React elements from JSON, and does not support configurations beyond this scope. However, there's an opportunity to define configuration beside component definitions (#24, #32, #33). Providing plugin support in react-json-schema will allow users to customize their react-json-schema implementation, and keep the core library small.

The thought is that plugins would be capable of modifying each subSchema before element creation.

We could migrate to a monorepo (using Lerna) so that all plugins are housed in the same repository, which is common for open source JavaScript (webpack, babel, etc.).

I'm personally exploring what this would look like. I'm open to suggestions.

[richbai90]

One idea I had was switching the default export from a class to a factory. Then you could do something along these lines:

const reactJsonSchemaFactory = (middleware = []) => {
  let i = -1;
  const next = (schema) => {
    if (!middleware.length) return;
    if (i < middleware.length) {
      i += 1;
      middleware[i](schema, next);
    }
  };
  class ReactJsonSchema {
    // ...
    parseSchema(schema) {
      next(schema);
      // ...
    }
  }

  return new ReactJsonSchema();
};

export default reactJsonSchemaFactory;

I think it's reasonable to suggest that pretty much the only behavior an end user would want to augment would be the parsing behavior. In this way we give the schema over to the middleware to adjust it how it will and parse the end result. A naive middleware for #32 would look something like this:

const  passFnMiddleware(map) => (schema, next) => {
    if (schema['@handlers']) {
        Object.keys(schema['@handlers']).map(key => {
            schema[key] = map[schema['@handlers'][key]]
        })
    }
    next(schema);
}

And you could use it like this

let reactJsonSchema = ReactJsonSchema([passFnMiddleware({'foo' : () => alert('bar')})])

This is heavily based on the express middleware concept, but I'm open to suggestions about how to improve it.

[richbai90]

It occurs to me that the above approach will need to be modified some due to the recursive tree parsing. We wouldn't want only a portion of the tree to be passed through middleware. But nonetheless the concept here I think is sound.

[richbai90]

I've added a PR to give a working example of what this might look like, if anyone is interested.

[eiof]

Thanks for the PR. That does help conceptualize what we should do.

I'm expecting this to change to result in a major release, as it's probably better to include middleware capabilities on ReactJsonSchema. This will keep our API simple. I also like the idea of using a factory. To expand on this thought, it'd be preferable for us to move towards using a functional factory, and remove object instantiation. This of course means a new API, but like I said, we're already working towards something that could warrant a major release.

The new api could look something like this:

// other imports
import createParser from 'react-json-schema';
import functionMapper from 'react-json-schema-function-mapper';

const parser = createParser()
    .withMiddleware(functionMapper) // loops through args
    .withComponents(components);

// OR
// const parser = createParser(applyMiddeware(functionMapper)).withComponents(components);

ReactDOM.render(parser.parseSchema(schema), document.getElementById('app'));

This is the rough idea.

Resources considered:

• https://medium.com/javascript-scene/why-composition-is-harder-with-classes-c3e627dcd0aa

[richbai90]

I just made another commit to #35 to utilize a functional factory. I wasn't clear if you wanted to rewrite the entire class using functional paradigms or just the factory. The commit only changes the factory. I'm depending on this library as a critical part of a project I'm actively working on, and would like to see it improved and maintained rather than maintaining my own branch. So anything that I can do to help I will.

[eiof]

Upon further reflection, this isn't necessary. react-json-schema makes it convenient to map strings to components. The idea is that with middleware, we'd be able to do more than just map strings to components. However, this would make react-json-schema a JSON to object literal with references adapter.

react-json-schema should be able to parse object literals. If mutation needs to happen to the JSON/object schema, it can be done before being passed into parseSchema.