subschema / subschema

Reactjs forms based on schema.

Subschema Development has moved to subschema-devel

subschema's Issues

Passing options to a new type

Let's say I have a new component that looks like:

class Range extends React.Component {
  static inputClassName = ' ';

  constructor(...rest) {
    super(...rest);
    this.state = {value: 0};
  }

  static defaultProps = {
    type: "range",
    min: 0,
    max: 10
  }

  render() {
    var {onChange, value, ...props} = this.props;
    return <div>
      <input {...props} value={this.state.value} onChange={(e) => this.setState({value: e.target.value}) } />
      <span>{this.state.value}</span> GB
    </div>
  }
}

Now let's say I want to pass min and max values. How would I do that?

I tried:

"myRange": {
  "type": "Range",
  "min": "8",
  "max": "16"
}

but the values just aren't passed to the component.

Input caret isn't properly updated for Restricted type

When 'backspace' key and/or range selection are involved in Restricted input, sometime input caret will jump to the end, and sometime it will be locked to the front.

Error Decoder in Production mode

When build project using "create-react-app" and deploy it, we get error "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ObjectType"
When we using "create-react-app" in development mode - all OK.

src/App.js

import React, { Component } from 'react';
import schema from './schema.json'
import { Form, ValueManager } from 'subschema'
const errors = {}
const values = {}
const vm = ValueManager(values, errors)
class App extends Component {
  render() {
    return (
      <div className="App">
        <div id='flexSchema'>
          <Form schema={schema} valueManager={vm} />
        </div>
      </div>
    );
  }
}
export default App;

src/schema.json

{
  "schema": {
    "location": {
      "type": "Select",
      "title": "Location:",
      "options": [
        "Denver",
        "Cologne",
        "Houston",
        "Los Gatos"
      ]
    },
    "Name": {
      "type": "Text",
      "title": "Name:",
      "validators": [
        "required"
      ]
    },
    "Group": {
      "type": "Select",
      "title": "Max Group:",
      "options": [
        1,
        2,
        3,
        4
      ]
    }
  },
  "fieldsets": [
    {
      "legend": false,
      "fields": ["location", "Name", "Group"]
    }
  ]
}

Import not found error.

[0] WARNING in .//subschema/src/index.jsx
[0] 46:22-24 "export 'Template' (imported as '_T') was not found in './core.js'
[0]
[0] WARNING in .//subschema/src/index.jsx
[0] 50:24-26 "export 'listenUtil' (imported as '_l') was not found in './core.js'

I don't see core.js exporting listenUtil or Template.

I have an issue form submit function

Looking at the sample below, I hooked a function to handle form submit. When I click on cancel button the target of the click even is the form but when I click on submit button the target is the submit button object. How can I get the right target when I click on cancel button?

(function () {
"use strict";
//uncomment these if you are using outside of the editor
//import React, {Component} from "react";
//import Subschema,{Form} from "Subschema";

var schema = {
    "schema": {
        "title": {
            "type": "Select",
            "options": [
                "Mr",
                "Mrs",
                "Ms"
            ]
        },
        "name": {
            "type": "Text",
            "validators": [
                "required"
            ]
        },
        "age": {
            "type": "Number"
        }
    },
    "fieldsets": [
        {
            "legend": "Name",
            "fields": "title, name, age",
            "buttons": [
                {
                    "label": "Cancel",
                    "action": "cancel",
                    "buttonClass": "btn"
                },
                {
                    "label": "Submit",
                    "action": "submit",
                    "buttonClass": "btn btn-primary"
                }
            ]
        }
    ]
};
var value = {};

function handleSubmit(e){

        e && e.preventDefault();
        debug.log(e);
}

return <Form schema={schema} value={value} onSubmit={handleSubmit} ><DisplayValueAndErrors/></Form>
}())

Using subschema.js with ASP.NET MVC and ReactJS.NET

I am trying to use the prebuild subschema.js with ASP.NET MVC 5 and ReactJS.NET (react-0.13.1).

Receive the following error:
Uncaught TypeError: Cannot read property 'createClass' of undefined @ Editor.js:58
t @ bootstrap cc196f695d536e0fcd55:19
(anonymous function) @ NestedMixin.js:3
t @ bootstrap cc196f695d536e0fcd55:19
t @ form.js:2
t @ bootstrap cc196f695d536e0fcd55:19
(anonymous function) @ index.js:1
t @ bootstrap cc196f695d536e0fcd55:19
(anonymous function) @ index.jsx:1
t @ bootstrap cc196f695d536e0fcd55:19
(anonymous function) @ bootstrap cc196f695d536e0fcd55:39
(anonymous function) @ bootstrap cc196f695d536e0fcd55:39
n.(anonymous function).exports @ universalModuleDefinition:9
(anonymous function) @ universalModuleDefinition:9

Issue with given default value to task

I have taken a look to this code but I was wordering how to add default task in the schema to be loaded in the form by default

(function () {
"use strict";
//uncomment these if you are using outside of the editor
//import React, {Component} from "react";
//import Subschema,{Form} from "Subschema";

var schema = {
    "schema": {
        "tasks": {
            "type": "List",
            "title": "Task",
            "canAdd": true,
            "canDelete": true,
            "canReorder": true,
            "canEdit": true,
            "inline": true,
            "addButton": {
                "label": "Add Task",
                "className": "btn btn-default btn-add"
            }
        }
    },
    "fieldsets": [
        {
            "legend": "Todo",
            "fields": [
                "tasks"
            ]
        }
    ]
};
var value = {};

return <Form schema={schema} value={value}><DisplayValueAndErrors/></Form>
}())

How do I disabled input or give default value to an input?

Is there any API I can disable input or give default value without customizing new component?

Editing first list entry creates a duplicate entry

Happens also in the example:

1. create a task, label it ABC.
2. click the created task
3. save.
   there are two tastk with ABC

Helper/Validator Text

Currently the helper/validator use the same DOM element to render text. Can these be separated? This would be something very useful.

Can I also build the application to test my changes?

Multiple conditions

Hi, is there a way to add multiple conditions in the "conditional" property of a sub schema?
Like the ability to add "AND" or "OR" and another condition.
I can't find a lot of documentation about this.

Thanks.

Array or string of fields doesn't work as expected

I have this: https://jsbin.com/welenapace/3/edit?html,js,output

Take a look at the second fields object inside fieldsets. If I remove tier.diskSize, I expect the UI to change, but nothing happens. Type, disk type and disk size keep being visible.

Is this expected or is it a bug? If this is expected behavior, how can I hide some of the fields from tier?

Number type support?

Hello, I wonder how to specify the schema so that the value is parsed into number?

Can this form generator render on server side ?

Hello , I really llike this component. I have been using it in one of my project. I was wondering if this library can render the form on the server side and get the value manager fill the form with data from ajax in the client side

In resolver/fieldAttrs.js 'propKeys' shrinks

This line of code:
https://github.com/subschema/subschema/blob/master/src/resolvers/fieldAttrs.js#L26
will cause the propKeys to shrink by 1 even if the 'key' is not found. Because 'splice(-1, 1)' will trim the last item from the array.

[FR] Input range

It would be nice if this library had support for an input range component. (Which is supported by all browsers, IE9+)

Or maybe just create a new repository with "extra" components and start adding there more advanced components.

Pre-built version on npm

Hey, I am very interested in your library. I've been evaluating several lately, but a lot of them seem to really abstract the rendered output of a form, making it difficult to customize your output. I know others feel the same way.

On that note, I'm finding it difficult to get up and running with subschema because I'm trying to incorporate it into my own project, as opposed to clone your repo and start there (with webpack, etc).

This other github issue explains the why's/hows of publishing pre-built jsx to npm: prometheusresearch-archive/react-forms#42

IE10 Promises

I just started to test m forms in IE10 and I am seeing the following error,

'Promise' is undefined.

Do need to provide a wrapper for the same? I am tracing this to Editor.js in src/

Validation not triggered if directly submitting the form instead of focusing on the fields

Steps to Reproduce

1. Goto http://jspears.github.io/subschema/?#/Login
2. Click on "Login" Button.

Expected : Username is required error
Actual : Page gets reloaded

If I place the focus on Username field and then press login the error is displayed as expected.

Custom type not working correctly after taking GIT update of repo

I took GIT update of Subschema.

I had earlier created a custom type named SwitchButton that is basicaly an On/Off toggle button. When user clicks on its div, if it is currently "Off", it would togle to "On" and vice versa.

It was working before but after today's update its giving following error in console when I click on its div (having class 'slider-frame primary'):
e is undefined

See the attached pic also.

Here is the code for my custom type:

Subschema.loader.addType('SwitchButton', React.createClass({
    displayName: 'SwitchButton',
    contextTypes: {
        valueManager: Subschema.PropTypes.valueManager,
        loader: Subschema.PropTypes.loader
    },
    propTypes: {
        id: React.PropTypes.string,
        onText: React.PropTypes.string,
        offText: React.PropTypes.string,
        value: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.number, React.PropTypes.string])   //Values can be (true, 1, '1', 'ON')
    },
    getInitialState(){
        return {
            value: false
        };
    },
    getDefaultProps: function() {
        return {
            onText: "ON",
            offText: "OFF",
            value: false
        };
    },
    getValue(){
        var val = this.refs.val.getValue();
        return this._resolveValue(val);
    },
    setValue(state){
        this.setState({value: this._resolveValue(state) });
    },
    _resolveValue: function(value) {
        return value === true || value == 1 || value == 'ON' ? true : false;
    },
    componentWillMount: function() {
        this.setState({value: this._resolveValue(this.props.value) });
        this._listener = this.context.valueManager.addListener(this.props.path, this.onUpdate, this, true);
    },
    componenWillUnmount(){
        this._listener.remove();
    },
    handleClick: function() {
        this.update(!this.state.value);
    },
    // This will update your state, when valueManager changes value.
    onUpdate(value){
        //console.log('onUpdate', value);
        this.setState({value: value});
    },
    // This will update the value manager when your component changes something (see handleClick above). onUpdate will set the state
    // of the component so don't do it here unless you want double state changes.
    update(value){
        //console.log('update', value);
        this.context.valueManager.update(this.props.path, value);
    },
    render() {

        var props = this.props;
        var isChecked = this._resolveValue(this.state.value);

        return (<div className={'form-group field-name switchButton' + (props.className ? (' ' + props.className) : '')} >
            <div className="col-sm-10">
                <div className="slider-frame primary" onClick={this.handleClick}>
                    <input id={props.name} type="hidden" ref="val" value={isChecked === true ? "1" : "0"} />
                    <span className={'slider-button' + (isChecked === true ? ' on' : '') } data-off-text={this.props.onText} data-on-text={this.props.offText}>
                        {isChecked === true ? this.props.onText : this.props.offText}
                    </span>
                    <p className="help-block"></p>
                </div>
            </div>
        </div>);
    }
}));

Please guide. Thanks.

ValueManager for all event is not trigger

first of all it seems like excellent component and I would be pleased to use it in my project.

but i face a problem with listen to all events: listener to all events is not working, I try to catch any change and directly record it but without success.

'''
var vm = ValueManager(values,errors);
//listen to all events
vm.addListener( function(newValue, oldValue, path){
debugger;
console.log(newValue, oldValue, path);
});
'''

when I debug the app I see there are listeners but no response to events i have bind.

would be happy to get your help.

Is file input supported?

Or should I create a custom input for this?

can we get a non minified version of subschema dist file?

I have been using subschema and like it so far .But recently I have updated to node 4.1 and react 0.13.3 and getting an error . The detail of the error is cited bellow. My question is can I have non minified version of subschema dist file so I can debug the error?

Uncaught TypeError: Cannot read property '_currentElement' of nullReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:744ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:726ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:642ReactPerf.measure.wrapper @ ReactPerf.js:70ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:539i.performUpdateIfNecessary @ subschema.js:2s @ subschema.js:1o.perform @ subschema.js:2o.perform @ subschema.js:2v.perform @ subschema.js:1O @ subschema.js:1o.measure.a @ subschema.js:1o.closeAll @ subschema.js:2o.perform @ subschema.js:2d.batchedUpdates @ subschema.js:20u @ subschema.js:1r @ subschema.js:3h.enqueueSetState @ subschema.js:3r.setState @ subschema.js:17r.createClass.setError @ subschema.js:18(anonymous function) @ subschema.js:2r.createClass.componentWillMount @ subschema.js:18ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:228ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:192ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:289ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:199ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:192ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js:289ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:199ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247ReactPerf.measure.wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38mountComponentIntoNode @ ReactMount.js:248Mixin.perform @ Transaction.js:134batchedMountComponentIntoNode @ ReactMount.js:269Mixin.perform @ Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:66batchedUpdates @ ReactUpdates.js:110ReactMount._renderNewRootComponent @ ReactMount.js:404ReactPerf.measure.wrapper @ ReactPerf.js:70ReactMount.render @ ReactMount.js:493ReactPerf.measure.wrapper @ ReactPerf.js:70newInscript @ inscript.js:65(anonymous function) @ inscript.js:32_.extend.execute @ backbone.js:1485(anonymous function) @ backbone.js:1473(anonymous function) @ backbone.js:1756_.some._.any @ underscore.js:258_.extend.loadUrl @ backbone.js:1754_.extend.start @ backbone.js:1696start @ RouterService.js:29services.autorun @ services.js:25(anonymous function) @ main.js:26__webpack_require__ @ bootstrap 8e08669c73c592058953:19_interopRequire @ bootstrap 8e08669c73c592058953:39(anonymous function) @ bootstrap 8e08669c73c592058953:39

Components loses props when navigating

I have app which have two pages both have form or forms created with subschema.
When i go first time to page which have multiple forms, all props gets right to component.
BUT when i navigate off the page and then back, all props are reset to default values!
I noticed this with at least Select component. I have made custom select component with listener property.
All props are defined in schema and schema holds right values in navigation but for some reason component doesn't get props anymore. Here is my select component:

import React from 'react';
import BaseComponent from './BaseComponent.jsx';
import Subschema from "Subschema";

const {PropTypes, types} = Subschema;
const {Select} = types;

export default class SelectListener extends BaseComponent {
static displayName = "SelectListener";
static propTypes = {
...Select.propTypes,
options: PropTypes.listener,
size: React.PropTypes.number,
};

static defaultProps = {
    size: 1
};

static contextTypes = {valueManager: PropTypes.valueManager};

constructor(...rest) {
    super(...rest);        
    this._bind('render');
}

render() {
    var {size, ...restProps} = this.props;
    var value = this.props.value;
    // Here size is 1 when second navigation occurs, in schema it's defined to 5
    console.log(size);
    if (value == null && this.props.options) {
        value = this.props.options[0].val;
    }
    
    return (        
        <Select {...restProps} value={value} size={size} />
    );
}	

}

and part of schema:
schema: {
"Application": {
"type": "SelectListener",
"multiple": false,
"options": "appOptions",
"size": 5
},

I'm using version 1.3.0 of subschema because dynamic population of select's options thru value doesn't work on newer versions.

Excellent React component but some concerns

Hi Justin,
Your work is remarkable. Its an excellent component but here are some concerns:

1. Documentation needs to be improved. It should be clear. At some points it is hard to understand what exactly is meant. e.g It took me sometime to understand following, that this will be done ahead :)
   DateTime
Barely a component, but oneday it will be made useful
2. How should I provide the label of my field like
   PersonAge: { type: Number, label: 'Your Age' }
3. I could not understand how to provide validators for a field through schema especially via a custom function. Please guide about this in your documentation and demo. It would be better if these validators are provided like in the following:
   https://github.com/SteveVitali/react-form-generator#formfield-validators
4. No information regarding how the the overall layout of a form should be provided in schema so that for example Form field groups could be placed in a vertical layout. Bootstrap indeed provides us options for it:
   Example a form in vertical layout:

Name

Input Field here

Age

Input field here

So Form layout should be configurable via schema.

1. It would be very nice if you provide something like objectField, arrayOfObjectsField, arrayOfArraysField, arrayOfArrayOfArrayOfObjectsField as in the following:
   https://github.com/SteveVitali/react-form-generator#formfield-validators
   This I guess is like your custom type but that contains a set (or multiple set) of fields.

That was just my feedback. I hope you will like it and look to my mentioned concerns. Counting on you. Thanks

[Update] Also how to populate actual data on a Form. An example is needed.

React ES6 Class Notation

Hey,

This is probably more of a mailing list thing, I tried to post but it didn't seem to come up. I've been trying to get this to work with ES6 class notation without much luck. Initially I was having problems with React 0.14 but that seems to work fine now if I use createClass notation.

The project I'm currently working on was built with ES6 notation, it seemed like a good idea at the time but it seems it is now incompatible with Subschema? I was looking through the code and saw there are a few mixins kicking around which means this won't work with ES6 notation without some manual intervention.

I found the react-mixin library and react-mixin-decorator library (although the latter uses ES7) but I don't know how much work it is to go through and change things in Subschema.

Am I missing something?

Thanks a lot

missing dist/subschema.js in v0.9.0?

This breaks my plain simple project that uses npm and webpack (which works with v0.8.1).

File size of library

I'm trying to build this library, but the file size in the dist folder is about 4.1 MBs, which doesn't look right.
Anyways, after looking at the demos, I saw that the dist file is around 1.7 MBs, which also doesn't look right.

Is this library actually that big or is that just some misconfiguration of webpack?

Fix react-addons-css-transition-group dependency

Hello @jspears, latest version v0.50.6 seems to lack saved dependency on react-addons-css-transition-group.

Of all react form libraries, i like the API of subschema the most. Thumbs up, good job!

React 15.2.1 issue a warning about unknown props passed to DOM elements

React 15.2.1 issue a warning about unknown props passed to DOM elements as state in the documentation: https://fb.me/react-unknown-prop . I have review subschema code and found that the following module was passing {...props} to the DOM elements. some props which does not belongs to standard DOM form props may then be passed to the DOM form elements and therefore create the warning.

subschema/src/templates/FormTemplate.jsx

 render() {
        const {children, style, fieldAttrs, formClass, className, ...props} = this.props;
        return (<form {...props} className={className || formClass} {...fieldAttrs}>
            {children}
        </form>);
    }

Default value of select doesn't trigger conditional operator

I have a select with 2 options. Each option has a conditional field that shows more fields, based on the selection of the main select.

On page load, the conditional field isn't executed and because of that the rest of the inputs remain hidden.

Is there a way I can make subschema run the conditional fields on page load?

How to design a custom UI?

Due to a requirement, I am trying to use subschema to generate a long form with each form field having a checkbox coming against it.
But I cant figure out how to make it using subschema.
Please see the attached pic and guide me how is this UI possible using subschema?
Thanks.

Get entity object on valid form submit

Hello, I like subschema a lot so I want to use it for my next project.

I didn't find a way to pull entity object from form on submit, is this implemented? I suppose this functionality would incorporate ValueManager but I can't find much of docs for it.

Thank you!

Dependant inputs

I have a very complex form like this one: https://jsbin.com/hojoxavixe/2/edit?html,js,output

As you can see, the first dropdown lets the user select the type of configuration. Just for the sake of this example, lets pretend there will be only 2 options: Single and Front + backend. Anyways, in my app there could be multiple options.

If Single is selected, then only 1 Tier component is rendered (1 dropdown + 1 set of options + 1 slider). If Front + backend is selected, 2 Tier components are rendered. Each option (Single, Front + backend, etc..) can have from 1 to N Tier components.

Each Tier component is independent of the rest, so, for example, Front + backend could have a m1.micro at the Front and a m2.micro at the Backend.

Given all that information, my question is: is there a way (and if "yes", how) to make the Type, the Disk Type and the Disk Size elements of each Tier to depend on themselves in chain.

For example, if m1.micro is selected, only Magnetic disks should be allowed, from 10 to 80GB. But if m2.micro is selected, both SSD and Magnetic disks should be allowed. If SSD is selected, sizes from 10 to 40GB should be allowed, if Magnetic is selected, allow disks from 40 to 100GB.

Any ideas or tips how to implement that?

Created Mailing List

Hey Folks,
Created a mailing list mailto:[email protected] signup. Want to make sure I don't break people with the upgrade to react0.14 and would really like better feedback. I also have some css modularization coming up that could effect your implementation. Anyways wanted to have a better place to discuss changes, plans, and whatever.

You can sign up here.
https://groups.google.com/d/forum/subschema

-Justin

Uncaught SyntaxError: Unexpected token import

Hi @jspears
Awesome lib but I am struggling to get started with it, I am getting "Uncaught SyntaxError: Unexpected token import" in index.jsx on line 3 when it comes to importing the jsx files from here onwards import _ReactCSSReplaceTransition from "./transition/ReactCSSReplaceTransition";. I am not sure if it is not able to parse jsx, I have requisite babel loaders.
I have exhausted all options to fix it myself, any help would be much appreciated.

Thanks

My package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "repository": "",
  "scripts": {
    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progess --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-loose": "^7.0.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "lodash": "^4.13.1",
    "node-sass": "^3.7.0",
    "postcss-loader": "^0.9.1",
    "sass-loader": "^2.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "peerDependencies": {
    "fbjs": "^0.8.0-alpha.3",
    "react-addons-css-transition-group": "^15.0.2",
    "subschema-prop-types": "*"
  },
  "dependencies": {
    "axios": "^0.12.0",
    "babel-preset-stage-1": "^6.5.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-jsonschema-form": "^0.33.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "redux": "^3.5.2",
    "redux-promise": "^0.5.3"
  }
}

My webpack.config.js

var webpack = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const sassLoaders = [
  'css-loader',
  'postcss-loader',
  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './src')
];

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        include: __dirname
      },
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      }
    ]
  },
  plugins: [
    new webpack.IgnorePlugin(/^(buffertools)$/), // unwanted "deeper" dependency,
    new ExtractTextPlugin('style.css')
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', 'sass'],
    root: [path.join(__dirname, './src')]
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Got these for .babelrc

{
  "presets": ["react", "es2015-loose", "es2015", "stage-0", "react-hmre"]
}

Hidden prevents other examples from loading

Demo screencast-- http://screencast.com/t/HjlifLbMU6n6

Getting error after using current Subschema dist

I am getting following error after I have updated to latest build of Subschema.
See the attached image please. My web page which was working before with the old code is not working anymore.

Is is possible to use backbone collection instead of simple json data?

Lodash version

Hello!

We are using subschema in a project. The version of lodash library is ˆ3.0.1. Is there a reason to use this version of that library? The last version is 4.15.0. npm are showing us several problems of UNMET PEER DEPENDENCY.

I was preparing a pull request to update it but I saw that related projects like subschema-expressions have that dependency too. So before start to fork several project, I prefer to ask you.

Thanks!

Update subschema-lib.js on npm to latest version

dist/subschema-lib.js seems to built off an old version of subschema-expression and is failing when the expression contains a single quote. when I built subschema locally (using npm run lib ) it did not have the same issue.

Compiled subschema.js not working when using with ReactJS

I am using the subschema.js file (that I got from dist folder after building via webpack) in my HTML page head section along with react-with-addons.js
When I execute my jsx code it gives me following error in firebug:
prevComponentInstance is null
But when I use subschema-noreact.js file, my jsx code works fine.

What am I missing?
Do I have to use JSXTransformer.js in page with it or compile subschema.js with react-tools?