# Function

Static Public Summary
public | DynamicComponent() |
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 | async fetchJSON(path: String, options: Object): Object Fetches JSON from remote path |
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 | getReactComponents() |
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 DynamicComponent() source

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

### 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 async fetchJSON(path: String, options: Object): Object source

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

Fetches JSON from remote path

#### Params:

Name | Type | Attribute | Description
path | String |  | fetch path url
options | Object |  | fetch options

#### Return:

Object | returns fetched JSON data

### 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 getReactComponents() source

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

### 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