# Function

Static Public Summary
public | boundArgsReducer() |
public | compile(jsonx: Object, resources: Object): function converts a jsonx json object into a react function component |
public | displayComponent(options: Object): Boolean Used to evaluate whether or not to render a component |
public | getAdvancedBinding(): Boolean Use to test if can bind components this context for react-redux-router |
public | getBoundedComponents(options: Object, boundedComponents: string[]): Object getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list |
public | getChildrenComponents(options: *) returns children jsonx components defined on spreadComponent spread over an array on props.spread |
public | getChildrenProperty(options: Object): Object[] | String returns a valid jsonx.children property |
public | getChildrenProps(options: Object): Object | String Used to pass properties down to child components if passprops is set to true |
public | getComponentFromLibrary(options: Object): function | undefined returns a react component from a component library |
public | getComponentFromMap(options: Object): string | function | class returns a react element from jsonx.component |
public | getComponentProps(options: Object): Object Resolves jsonx.__dangerouslyInsertComponents into an object that turns each value into a React components. |
public | getComputedProps(options: Object) Returns computed properties for React Components and any property that's prefixed with __ is a computedProperty |
public | getEvalProps(options: Object): Object Used to evalute javascript and set those variables as props. |
public | getFunctionFromEval(options: Object): Function Returns a new function from an options object |
public | getFunctionFromProps(options: Object): Function Takes a function string and returns a function on either this.props or window. |
public | getFunctionProps(options: Object): Object Returns a resolved object from function strings that has functions pulled from jsonx.__functionProps |
public | getJSONXChildren(options: *) returns React Child Elements via JSONX |
public | getJSONXProps(traverseObject: Object, options: Object): Object It uses traverse on a traverseObject to returns a resolved object on propName. |
public | getParamNames(func: Function) returns the names of parameters from a function declaration |
public | getReactClassComponent(reactComponent: Object): Function Returns a new React Component |
public | getReactComponentProps(options: Object): Object Resolves jsonx.__dangerouslyInsertReactComponents into an object that turns each value into a React components. |
public | getReactContext() |
public | getReactElementFromJSON(): function converts a json object {type,props,children} into a react element |
public | getReactElementFromJSONX(jsonx: object, resources: object): function Use React.createElement and JSONX JSON to create React elements |
public | getReactFunctionComponent(reactComponent: *, functionBody: String): Function Returns new React Function Component |
public | getSimplifiedJSONX(jsonx: Object): Object Transforms Valid JSONX JSON to SimpleJSONX {component,props,children} => {[component]:{props,children}} |
public | getWindowComponents(options: Object): Object Returns a resolved object that has React Components pulled from window.__jsonx_custom_elements |
public | jsonToJSX(json: Object): String converts JSONX JSON IR to JSX |
public | jsonxRender(config: object) Use JSONX without any configuration to render JSONX JSON to HTML and insert JSONX into querySelector using ReactDOM.render |
public | outputHTML(config: object): string Use ReactDOMServer.renderToString to render html from JSONX |
public | outputJSON(jsonx: object, resources: object): Object Compiles JSONX into JSON IR format for react create element |
public | outputJSX(json: Object): String converts JSONX JSON IR to JSX |
public | simpleJSONXSyntax(simpleJSONX: Object): Object Transforms SimpleJSONX to Valid JSONX JSON {[component]:{props,children}} => {component,props,children} |
public | traverse(paths: Object, data: Object): Object take an object of array paths to traverse and resolve |
public | validSimpleJSONXSyntax(simpleJSONX: Object): Boolean validates simple JSONX Syntax {[component]:{props,children}} |
public | validateJSONX(jsonx: Object, returnAllErrors: Boolean): Boolean | Error[] Validates JSONX JSON Syntax |

Static Private Summary
private | __express(filePath: string, options: object, callback: *) Use JSONX for express view rendering |
private | __getReact(): Object Exposes react module used in JSONX |
private | __getReactDOM(): Object Exposes react dom module used in JSONX |
private | __getUseGlobalHook(): Object Exposes global hook used in JSONX |

## Static Public

### public boundArgsReducer() source

    import {boundArgsReducer} from 'jsonx/src/props.js'

### public compile(jsonx: Object, resources: Object): function source

    import {compile} from 'jsonx/src/main.js'

converts a jsonx json object into a react function component

#### Params:

Name | Type | Attribute | Description
jsonx | Object |  | valid JSONX JSON
resources | Object |  | props for react element

#### Return:

function | React element via React.createElement

#### Example:

    jsonx.compile({jsonx:{component:'div',props:{title:'some title attribute'},children:'inner html text'}}) //=>React Function Component

### public displayComponent(options: Object): Boolean source

    import {displayComponent} from 'jsonx/src/utils.js'

Used to evaluate whether or not to render a component

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.props | Object |  | Props to test comparison values against, usually Object.assign(jsonx.props,jsonx.asyncprops,jsonx.thisprops,jsonx.windowprops)

#### Return:

Boolean | returns true if all comparisons are true or if using or comparisons, at least one condition is true

#### Example:

    const sampleJSONX = {
    component: 'div',
    props: {
    id: 'generatedJSONX',
    className: 'jsonx',
    bigNum: 1430931039,
    smallNum: 0.425,
    falsey: false,
    truthy: true,
    },
    children: 'some div',
    };
    const testJSONX = Object.assign({}, sampleJSONX, {
    comparisonprops: [{
    left: ['truthy',],
    operation:'==',
    right:['falsey',],
    }],
    });
    displayComponent({ jsonx: testJSONX, props: testJSONX2.props, }) // => false

### public getAdvancedBinding(): Boolean source

    import {getAdvancedBinding} from 'jsonx/src/utils.js'

Use to test if can bind components this context for react-redux-router

#### Return:

Boolean | true if browser is not IE or old android / chrome

### public getBoundedComponents(options: Object, boundedComponents: string[]): Object source

    import {getBoundedComponents} from 'jsonx/src/components.js'

getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list

#### Params:

Name | Type | Attribute | Description
options | Object |  | options for getBoundedComponents
options.reactComponents | Object |  | all react components available for JSONX
boundedComponents | string[] |  | list of components to bind JSONX this context (usually helpful for navigation and redux-router)

#### Return:

Object | reactComponents object of all react components available for JSONX

### public getChildrenComponents(options: *) source

    import {getChildrenComponents} from 'jsonx/src/props.js'

returns children jsonx components defined on spreadComponent spread over an array on props.spread

#### Params:

Name | Type | Attribute | Description
options | * |  |

### public getChildrenProperty(options: Object): Object[] | String source

    import {getChildrenProperty} from 'jsonx/src/children.js'

returns a valid jsonx.children property

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object | optional default: {} | Valid JSONX JSON
options.props | Object | optional default: options.jsonx.children | Props to pull children Object.assign(jsonx.props,jsonx.asyncprops,jsonx.thisprops,jsonx.windowprops)

#### Return:

Object[] | String | returns a valid jsonx.children property that's either an array of JSONX objects or a string

#### Example:

    const sampleJSONX = {
    component: 'div',
    props: {
    id: 'generatedJSONX',
    className:'jsonx',
    },
    children: [
    {
    component: 'p',
    props: {
    style: {
    color: 'red',
    },
    },
    children:'hello world',
    },
    {
    component: 'div',
    children: [
    {
    component: 'ul',
    children: [
    {
    component: 'li',
    children:'list',
    },
    ],
    },
    ],
    },
    ],
    };
    const JSONXChildren = getChildrenProperty({ jsonx: sampleJSONX, }); //=> [ [jsonx Object],[jsonx Object]]
    const JSONXChildrenPTag = getChildrenProperty({ jsonx: sampleJSONX.children[ 0 ], }); //=>hello world

### public getChildrenProps(options: Object): Object | String source

    import {getChildrenProps} from 'jsonx/src/children.js'

Used to pass properties down to child components if passprops is set to true

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object | optional default: {} | Valid JSONX JSON
options.childjsonx | Object | optional default: {} | Valid JSONX JSON
options.renderIndex | Number |  | React key property
options.props | Object | optional default: options.jsonx.props | Props to pull children Object.assign(jsonx.props,jsonx.asyncprops,jsonx.thisprops,jsonx.windowprops)

#### Return:

Object | String | returns a valid Valid JSONX Child object or a string

### public getComponentFromLibrary(options: Object): function | undefined source

    import {getComponentFromLibrary} from 'jsonx/src/components.js'

returns a react component from a component library

#### Params:

Name | Type | Attribute | Description
options | Object |  | options for getComponentFromLibrary
options.componentLibraries | Object | optional default: {} | react component library like bootstrap
options.jsonx | Object | optional default: {} | any valid JSONX JSON

#### Return:

function | undefined | react component from react library like bootstrap, material design or bulma

### public getComponentFromMap(options: Object): string | function | class source

    import {getComponentFromMap} from 'jsonx/src/components.js'

returns a react element from jsonx.component

#### Params:

Name | Type | Attribute | Description
options | Object |  | options for getComponentFromMap
options.jsonx | object | optional default: {} | any valid JSONX JSON object
options.reactComponents | Object | optional default: {} | react components to render
options.componentLibraries | Object | optional default: {} | react components to render from another component library like bootstrap or bulma
options.logError | function | optional default: console.error | error logging function
options.debug | boolean | optional default: false | use debug messages

#### Return:

string | function | class | valid react element

#### Example:

    // returns react elements
    getComponentFromMap({jsonx:{component:'div'}})=>div
    getComponentFromMap({jsonx:{component:'MyModal'},reactComponents:{MyModal:MyModal extends React.Component}})=>MyModal
    getComponentFromMap({jsonx:{component:'reactBootstap.nav'},componentLibraries:{reactBootstrap,}})=>reactBootstap.nav

### public getComponentProps(options: Object): Object source

    import {getComponentProps} from 'jsonx/src/props.js'

Resolves jsonx.__dangerouslyInsertComponents into an object that turns each value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.resources | Object | optional default: {} | object to use for resourceprops(asyncprops), usually a result of an asynchronous call

#### Return:

Object | resolved object of React Components

### public getComputedProps(options: Object) source

    import {getComputedProps} from 'jsonx/src/props.js'

Returns computed properties for React Components and any property that's prefixed with __ is a computedProperty

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.resources | Object | optional default: {} | object to use for asyncprops, usually a result of an asynchronous call
options.renderIndex | Number |  | number used for React key prop
options.logError | function | optional default: console.error | error logging function
options.componentLibraries | Object | optional | react components to render with JSONX
options.useReduxState | Boolean | optional default: true | use redux props in this.props
options.ignoreReduxPropsInComponentLibraries | Boolean | optional default: true | ignore redux props in this.props for component libraries, this is helpful incase these properties collide with component library element properties
options.debug | boolean | optional default: false | use debug messages

#### Example:

    const testJSONX = { component: 'div',
    props: { id: 'generatedJSONX', className: 'jsonx' },
    children: [ [Object] ],
    asyncprops: { auth: [Array], username: [Array] },
    __dangerouslyEvalProps: { getUsername: '(user={})=>user.name' },
    __dangerouslyInsertComponents: { myComponent: [Object] }
    const resources = {
    user: {
    name: 'jsonx',
    description: 'react withouth javascript',
    },
    stats: {
    logins: 102,
    comments: 3,
    },
    authentication: 'OAuth2',
    };
    const renderIndex = 1;
    getComputedProps.call({}, {
    jsonx: testJSONX,
    resources,
    renderIndex,
    });
    computedProps = { key: 1,
    id: 'generatedJSONX',
    className: 'jsonx',
    auth: 'OAuth2',
    username: 'jsonx',
    getUsername: [Function],
    myComponent:
    { '$$typeof': Symbol(react.element),
    type: 'p',
    key: '8',
    ref: null,
    props: [Object],
    _owner: null,
    _store: {} } } }

### public getEvalProps(options: Object): Object source

    import {getEvalProps} from 'jsonx/src/props.js'

Used to evalute javascript and set those variables as props. getEvalProps evaluates dangerouslyEvalProps and dangerouslyBindEvalProps properties with eval, this is used when component properties are functions, dangerouslyBindEvalProps is used when those functions require that this is bound to the function. For dangerouslyBindEvalProps it must resolve an expression, so functions should be wrapped in (). I.e. (function f(x){ return this.minimum+x;})

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON

#### Return:

Object | returns resolved object with evaluated javascript

#### Example:

    const testVals = {
    auth: 'true',
    username: '(user={})=>user.name',
    };
    const testJSONX = Object.assign({}, sampleJSONX, {
    __dangerouslyEvalProps: testVals, __dangerouslyBindEvalProps: {
    email: '(function getUser(user={}){ return this.testBound(); })',
    },
    });
    const JSONXP = getEvalProps.call({ testBound: () => 'bounded', }, { jsonx: testJSONX, });
    const evalutedComputedFunc = JSONXP.username({ name: 'bob', });
    const evalutedComputedBoundFunc = JSONXP.email({ email:'test@email.domain', });
    // expect(JSONXP.auth).to.be.true;
    // expect(evalutedComputedFunc).to.eql('bob');
    // expect(evalutedComputedBoundFunc).to.eql('bounded');

### public getFunctionFromEval(options: Object): Function source

    import {getFunctionFromEval} from 'jsonx/src/components.js'

Returns a new function from an options object

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.body | String | optional default: '' | Function string body
options.args | String[] | optional default: [] | Function arguments

#### Return:

Function

### public getFunctionFromProps(options: Object): Function source

    import {getFunctionFromProps} from 'jsonx/src/props.js'

Takes a function string and returns a function on either this.props or window. The function can only be 2 levels deep

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.propFunc | String | optional default: 'func:' | function string, like func:window.LocalStorage.getItem or func:this.props.onClick or func:inline.myInlineFunction
options.allProps | Object | optional default: {} | merged computed props, Object.assign({ key: renderIndex, }, thisprops, jsonx.props, resourceprops, asyncprops, windowprops, evalProps, insertedComponents);

#### Return:

Function | returns a function from this.props or window functions

#### Example:

    getFunctionFromProps({ propFunc='func:this.props.onClick', }) // => this.props.onClick

### public getFunctionProps(options: Object): Object source

    import {getFunctionProps} from 'jsonx/src/props.js'

Returns a resolved object from function strings that has functions pulled from jsonx.__functionProps

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.allProps | Object | optional default: {} | merged computed props, Object.assign({ key: renderIndex, }, thisprops, jsonx.props, asyncprops, windowprops, evalProps, insertedComponents);

#### Return:

Object | resolved object of functions from function strings

### public getJSONXChildren(options: *) source

    import {getJSONXChildren} from 'jsonx/src/children.js'

returns React Child Elements via JSONX

#### Params:

Name | Type | Attribute | Description
options | * |  |

### public getJSONXProps(traverseObject: Object, options: Object): Object source

    import {getJSONXProps} from 'jsonx/src/props.js'

It uses traverse on a traverseObject to returns a resolved object on propName. So if you're making an ajax call and want to pass properties into a component, you can assign them using asyncprops and reference object properties by an array of property paths

#### Params:

Name | Type | Attribute | Description
traverseObject | Object | optional default: {} | the object that contains values of propName
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.propName | Object | optional default: 'asyncprops' | Property on JSONX to resolve values onto, i.e (asyncprops,thisprops,windowprops)

#### Return:

Object | resolved object

#### Example:

    const traverseObject = {
    user: {
    name: 'jsonx',
    description: 'react withouth javascript',
    },
    stats: {
    logins: 102,
    comments: 3,
    },
    authentication: 'OAuth2',
    };
    const testJSONX = {
    component: 'div',
    props: {
    id: 'generatedJSONX',
    className:'jsonx',
    },
    asyncprops:{
    auth: [ 'authentication', ],
    username: [ 'user', 'name', ],
    },
    children: [
    {
    component: 'p',
    props: {
    style: {
    color: 'red',
    fontWeight:'bold',
    },
    },
    children:'hello world',
    },
    ],
    };
    const JSONXP = getJSONXProps({ jsonx: testJSONX, traverseObject, });
    // => {
    //   auth: 'OAuth2',
    //   username: 'jsonx'
    // }

    //finally resolves:
    const testJSONX = {
    component: 'div',
    props: {
    id: 'generatedJSONX',
    className:'jsonx',
    auth: 'OAuth2',
    username: 'jsonx',
    },
    children: [
    {
    component: 'p',
    props: {
    style: {
    color: 'red',
    fontWeight:'bold',
    },
    },
    children:'hello world',
    },
    ],
    };

### public getParamNames(func: Function) source

    import {getParamNames} from 'jsonx/src/props.js'

returns the names of parameters from a function declaration

#### Params:

Name | Type | Attribute | Description
func | Function |  |

#### Example:

    const arrowFunctionAdd = (a,b)=>a+b;
    function regularFunctionAdd(c,d){return c+d;}
    getParamNames(arrowFunctionAdd) // => ['a','b']
    getParamNames(regularFunctionAdd) // => ['c','d']

#### TODO:

- write tests

### public getReactClassComponent(reactComponent: Object): Function source

    import {getReactClassComponent} from 'jsonx/src/components.js'

Returns a new React Component

#### Params:

Name | Type | Attribute | Description
options.returnFactory | Boolean | optional default: true | returns a React component if true otherwise returns Component Class
options.resources | Object | optional default: {} | asyncprops for component
options.name | String | optional | Component name
options.lazy | Function | optional | function that resolves {reactComponent,options} to lazy load component for code splitting
options.use_getState | Boolean | optional default: true | define getState prop
options.bindContext | Boolean | optional default: true | bind class this reference to render function components
options.passprops | Boolean | optional | pass props to rendered component
options.passstate | Boolean | optional | pass state as props to rendered component
reactComponent | Object | optional default: {} | an object of functions used for create-react-class
reactComponent.render.body | Object |  | Valid JSONX JSON
reactComponent.getDefaultProps.body | String |  | return an object for the default props
reactComponent.getInitialState.body | String |  | return an object for the default state

#### Return:

Function

#### See:

- https://reactjs.org/docs/react-without-es6.html

### public getReactComponentProps(options: Object): Object source

    import {getReactComponentProps} from 'jsonx/src/props.js'

Resolves jsonx.__dangerouslyInsertReactComponents into an object that turns each value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON // * @param {Object} [options.resources={}] - object to use for asyncprops, usually a result of an asynchronous call

#### Return:

Object | resolved object of React Components

### public getReactContext() source

    import {getReactContext} from 'jsonx/src/components.js'

### public getReactElementFromJSON(): function source

    import {getReactElementFromJSON} from 'jsonx/src/main.js'

converts a json object {type,props,children} into a react element

#### Params:

Name | Type | Attribute | Description
options.type | Object | String |  | 'div' or react component
options.props | Object |  | props for react element
options.children | String | [Object] |  | children elements

#### Return:

function | React element via React.createElement

#### Example:

    jsonx.getReactElementFromJSON({type:'div',props:{title:'some title attribute'},children:'inner html text'})

### public getReactElementFromJSONX(jsonx: object, resources: object): function source

    import {getReactElementFromJSONX} from 'jsonx/src/main.js'

Use React.createElement and JSONX JSON to create React elements

#### Params:

Name | Type | Attribute | Description
jsonx | object |  | any valid JSONX JSON object
resources | object |  | any additional resource used for asynchronous properties

#### Return:

function | React element via React.createElement

#### Return Properties:

Name | Type | Attribute | Description
this | object |  | options for getReactElementFromJSONX
this.componentLibraries | Object | optional | react components to render with JSONX
this.debug | boolean | optional default: false | use debug messages
this.returnJSON | boolean | optional default: false | return json object of {type,props,children} instead of react element
this.disableRenderIndexKey | boolean | optional default: false | disables auto assign a key prop
this.logError | function | optional default: console.error | error logging function
this.boundedComponents | string[] | optional default: [] | list of components that require a bound this context (usefult for redux router)

#### Example:

    // Uses react to create the equivalent JSX <myComponent style={{color:blue}}>hello world</myComponent>
    jsonx.getReactElementFromJSONX({component:'myCompnent',props:{style:{color:'blue'}},children:'hello world'})

### public getReactFunctionComponent(reactComponent: *, functionBody: String): Function source

    import {getReactFunctionComponent} from 'jsonx/src/components.js'

Returns new React Function Component

#### Params:

Name | Type | Attribute | Description
reactComponent | * |  | Valid JSONX to render
functionBody | String |  | String of function component body
options.name | String |  | Function Component name

#### Return:

Function

#### Example:

    const jsonxRender = {
    component:'div',
    passprops:'true',
    children:[
    {
    component:'input',
    thisprops:{
    value:['count'],
    },
    },
    {
    component:'button',
    __dangerouslyBindEvalProps:{
    onClick:function(count,setCount){
    setCount(count+1);
    console.log('this is inline',{count,setCount});
    },
    // onClick:`(function(count,setCount){
    //   setCount(count+1)
    //   console.log('this is inline',{count,setCount});
    // })`,
    children:'Click me'
    }
    ]
    };
    const functionBody = 'const [count, setCount] = useState(0); const functionprops = {count,setCount};'
    const options = { name: IntroHook}
    const MyCustomFunctionComponent = jsonx._jsonxComponents.getReactFunctionComponent({jsonxRender, functionBody, options});

#### See:

- https://reactjs.org/docs/hooks-intro.html

#### TODO:

- set 'functionprops' to set arguments for function

### public getSimplifiedJSONX(jsonx: Object): Object source

    import {getSimplifiedJSONX} from 'jsonx/src/utils.js'

Transforms Valid JSONX JSON to SimpleJSONX {component,props,children} => {[component]:{props,children}}

#### Params:

Name | Type | Attribute | Description
jsonx | Object |  | Valid JSONX JSON object

#### Return:

Object | returns a simple JSONX JSON Object from a valid JSONX JSON Object

### public getWindowComponents(options: Object): Object source

    import {getWindowComponents} from 'jsonx/src/props.js'

Returns a resolved object that has React Components pulled from window.__jsonx_custom_elements

#### Params:

Name | Type | Attribute | Description
options | Object |  |
options.jsonx | Object |  | Valid JSONX JSON
options.allProps | Object | optional default: {} | merged computed props, Object.assign({ key: renderIndex, }, thisprops, jsonx.props, asyncprops, windowprops, evalProps, insertedComponents);

#### Return:

Object | resolved object of with React Components from a window property window.__jsonx_custom_elements

### public jsonToJSX(json: Object): String source

    import {jsonToJSX} from 'jsonx/src/main.js'

converts JSONX JSON IR to JSX

#### Params:

Name | Type | Attribute | Description
json | Object |  | {type,props,children}

#### Return:

String | jsx string

#### Example:

    jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '<div key={5} title="test">hello</div>'

### public jsonxRender(config: object) source

    import {jsonxRender} from 'jsonx/src/main.js'

Use JSONX without any configuration to render JSONX JSON to HTML and insert JSONX into querySelector using ReactDOM.render

#### Params:

Name | Type | Attribute | Description
config | object |  | options used to inject html via ReactDOM.render
config.jsonx | object |  | any valid JSONX JSON object
config.resources | object |  | any additional resource used for asynchronous properties
config.querySelector | string |  | selector for document.querySelector

#### Example:

    // Uses react to create <!DOCTYPE html><body><div id="myApp"><div class="jsonx-generated"><p style="color:red;">hello world</p></div></div></body>
    jsonx.jsonxRender({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });

### public outputHTML(config: object): string source

    import {outputHTML} from 'jsonx/src/main.js'

Use ReactDOMServer.renderToString to render html from JSONX

#### Params:

Name | Type | Attribute | Description
config | object |  | options used to inject html via ReactDOM.render
config.jsonx | object |  | any valid JSONX JSON object
config.resources | object |  | any additional resource used for asynchronous properties

#### Return:

string | React genereated html via JSONX JSON

#### Return Properties:

Name | Type | Attribute | Description
this | object |  | options for getReactElementFromJSONX

#### Example:

    // Uses react to create <div class="jsonx-generated"><p style="color:red;">hello world</p></div>
    jsonx.outputHTML({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, });

### public outputJSON(jsonx: object, resources: object): Object source

    import {outputJSON} from 'jsonx/src/main.js'

Compiles JSONX into JSON IR format for react create element

#### Params:

Name | Type | Attribute | Description
jsonx | object |  | any valid JSONX JSON object
resources | object |  | any additional resource used for asynchronous properties

#### Return:

Object | json - {type,props,children}

#### Return Properties:

Name | Type | Attribute | Description
this | object |  | options for getReactElementFromJSONX

#### Example:

    jsonx.outputJSON({ component: 'div', props: { title: 'test', }, children: 'hello', }); //=> { type: 'div',
    props: { key: 5, title: 'test' },
    children: 'hello' }

### public outputJSX(json: Object): String source

    import {outputJSX} from 'jsonx/src/main.js'

converts JSONX JSON IR to JSX

#### Params:

Name | Type | Attribute | Description
json | Object |  | {type,props,children}

#### Return:

String | jsx string

#### Example:

    jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '<div key={5} title="test">hello</div>'

### public simpleJSONXSyntax(simpleJSONX: Object): Object source

    import {simpleJSONXSyntax} from 'jsonx/src/utils.js'

Transforms SimpleJSONX to Valid JSONX JSON {[component]:{props,children}} => {component,props,children}

#### Params:

Name | Type | Attribute | Description
simpleJSONX | Object |  | JSON Object

#### Return:

Object | returns a valid JSONX JSON Object from a simple JSONX JSON Object

### public traverse(paths: Object, data: Object): Object source

    import {traverse} from 'jsonx/src/utils.js'

take an object of array paths to traverse and resolve

#### Params:

Name | Type | Attribute | Description
paths | Object |  | an object to resolve array property paths
data | Object |  | object to traverse

#### Return:

Object | resolved object with traversed properties

#### Throw:

TypeError

#### Example:

    const testObj = {
    user: {
    name: 'jsonx',
    description: 'react withouth javascript',
    },
    stats: {
    logins: 102,
    comments: 3,
    },
    authentication: 'OAuth2',
    };
    const testVals = { auth: ['authentication', ], username: ['user', 'name', ], };

    traverse(testVals, testObj) // =>{ auth:'OAuth2', username:'jsonx',  }

### public validSimpleJSONXSyntax(simpleJSONX: Object): Boolean source

    import {validSimpleJSONXSyntax} from 'jsonx/src/utils.js'

validates simple JSONX Syntax {[component]:{props,children}}

#### Params:

Name | Type | Attribute | Description
simpleJSONX | Object |  | Any valid simple JSONX Syntax

#### Return:

Boolean | returns true if simpleJSONX is valid

### public validateJSONX(jsonx: Object, returnAllErrors: Boolean): Boolean | Error[] source

    import {validateJSONX} from 'jsonx/src/utils.js'

Validates JSONX JSON Syntax

#### Params:

Name | Type | Attribute | Description
jsonx | Object |  | JSONX JSON to validate
returnAllErrors | Boolean | optional default: false | flag to either throw error or to return all errors in an array of errors

#### Return:

Boolean | Error[] | either returns true if JSONX is valid, or throws validation error or returns list of errors in array

#### Throw:

SyntaxError

#### Example:

    validateJSONX({component:'p',children:'hello world'})=>true
    validateJSONX({children:'hello world'})=>throw SyntaxError('[0001] Missing React Component')

## Static Private

### private __express(filePath: string, options: object, callback: *) source

    import {__express} from 'jsonx/src/express.js'

Use JSONX for express view rendering

#### Params:

Name | Type | Attribute | Description
filePath | string |  | path to jsonx express view
options | object |  | property used for express view {locals}
options.__boundConfig | object |  | property used to bind this object for JSONX, can be used to add custom components
options.__DOCTYPE | string | optional default: "" | html doctype string
callback | * |  |

### private __getReact(): Object source

    import {__getReact} from 'jsonx/src/main.js'

Exposes react module used in JSONX

#### Return:

Object | React

### private __getReactDOM(): Object source

    import {__getReactDOM} from 'jsonx/src/main.js'

Exposes react dom module used in JSONX

#### Return:

Object | ReactDOM

### private __getUseGlobalHook(): Object source

    import {__getUseGlobalHook} from 'jsonx/src/main.js'

Exposes global hook used in JSONX

#### Return:

Object | useGlobalHook