Example

$ jxsjam input.json

Example input.json

{
    "components": {
        "someModule/components/MyComponent": {
            "component": {
                "displayName": "MyComponent",
                "state": {
                    "test": 1
                },
                "defaultProps": {},
                "propTypes": {},
                "props": {
                    "children": ["someFolder/AnotherComponent"]
                }
            },
            "pureRender": true,
            "redux": true
        },
        "someFolder/AnotherComponent": {
            "component": {
                "displayName": "AnotherComponent",
                "props": {
                    "children": ["someFolder/YetAnotherComponent"]
                }
            },
            "pureRender": true
        },
        "someFolder/YetAnotherComponent": {
            "component": {
                "displayName": "YetAnotherComponent"
            },
            "stateless": true
        }
    },
    "config": {
        "baseDir": "src/scripts"
    }
}

Using the built-in template

Found in /templates/component.jsx

Output

src/
└── scripts
    ├── someFolder
    │   ├── AnotherComponent.jsx
    │   └── YetAnotherComponent.jsx
    └── someModule
        └── components
            └── MyComponent.jsx

AnotherComponent.jsx

import React from 'react'
import PureRenderDecorator from 'pure-render-decorator'
import YetAnotherComponent from '../someFolder/YetAnotherComponent'

class AnotherComponent extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = AnotherComponent
        this.state = {}
    }

    render() {
        return (
            <div className="AnotherComponent">
                AnotherComponent
                <YetAnotherComponent />
            </div>
        )
    }
}

AnotherComponent.propTypes = {}
AnotherComponent.defaultProps = {}

AnotherComponent = PureRenderDecorator(AnotherComponent) || AnotherComponent

export default AnotherComponent

YetAnotherComponent

import React from 'react'

let YetAnotherComponent = (props) => {
    return (
        <div className="YetAnotherComponent">
            YetAnotherComponent
        </div>
    )
}

YetAnotherComponent.propTypes = {}
YetAnotherComponent.defaultProps = {}

export default YetAnotherComponent

MyComponent

import React from 'react'
import PureRenderDecorator from 'pure-render-decorator'
import { connect } from 'react-redux'
import AnotherComponent from '../../someFolder/AnotherComponent'

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = MyComponent
        this.state = {"test":1}
    }

    render() {
        return (
            <div className="MyComponent">
                MyComponent
                <AnotherComponent />
            </div>
        )
    }
}

MyComponent.propTypes = {}
MyComponent.defaultProps = {}

MyComponent = PureRenderDecorator(MyComponent) || MyComponent

function mapStateToProps(state) {
    return {}
}

export default connect(mapStateToProps)(MyComponent)

Available variables passed to the template file for MyComponent

{
    "config": {
        "baseDir": "src/scripts",
        "output": "/www",
        "template": "/www/_repos/jsxjam/jsxjam-cli/templates/component.jsx"
    },
    "componentName": "MyComponent",
    "componentPath": "someModule/components/MyComponent",
    "children": {
        "someFolder/AnotherComponent": {
            "component": {
                "component": {
                    "displayName": "AnotherComponent",
                    "props": {
                        "children": [
                            "someFolder/YetAnotherComponent"
                        ]
                    }
                },
                "pureRender": true
            },
            "importComponent": "import AnotherComponent from '../../someFolder/AnotherComponent'",
            "renderComponent": "<AnotherComponent />"
        }
    },
    "components": {
        "someModule/components/MyComponent": {
            "component": {
                "displayName": "MyComponent",
                "state": {
                    "test": 1
                },
                "defaultProps": {},
                "propTypes": {},
                "props": {
                    "children": [
                        "someFolder/AnotherComponent"
                    ]
                }
            },
            "pureRender": true,
            "redux": true
        },
        "someFolder/AnotherComponent": {
            "component": {
                "displayName": "AnotherComponent",
                "props": {
                    "children": [
                        "someFolder/YetAnotherComponent"
                    ]
                }
            },
            "pureRender": true
        },
        "someFolder/YetAnotherComponent": {
            "component": {
                "displayName": "YetAnotherComponent"
            },
            "stateless": true
        }
    },
    "component": {
        "displayName": "MyComponent",
        "state": {
            "test": 1
        },
        "defaultProps": {},
        "propTypes": {},
        "props": {
            "children": [
                "someFolder/AnotherComponent"
            ]
        }
    },
    "meta": {
        "pureRender": true,
        "redux": true
    },
    "context": {}
}