Home Manual Reference Source Test

Function

Static Public Summary
public
public
public

compile(jsonx: Object, resources: Object): function

converts a jsonx json object into a react function component

public

Used to evaluate whether or not to render a component

public

async fetchJSON(path: String, options: Object): Object

Fetches JSON from remote path

public

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

returns a valid jsonx.children property

public

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

public

returns a react component from a component library

public

getComponentFromMap(options: Object): string | function | class

returns a react element from jsonx.component

public

Resolves jsonx.__dangerouslyInsertComponents into an object that turns each value into a React components.

public

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

public

Used to evalute javascript and set those variables as props.

public

Returns a new function from an options object

public

Takes a function string and returns a function on either this.props or window.

public

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

returns the names of parameters from a function declaration

public

Returns a new React Component

public

Resolves jsonx.__dangerouslyInsertReactComponents into an object that turns each value into a React components.

public
public
public

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

public

Use React.createElement and JSONX JSON to create React elements

public

getReactFunctionComponent(reactComponent: *, functionBody: String): Function

Returns new React Function Component

public

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

public

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

public

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

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

converts JSONX JSON IR to JSX

public

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

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

Exposes react module used in JSONX

private

Exposes react dom module used in JSONX

private

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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
options *

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

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

returns a valid jsonx.children property

Params:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
jsonx object

any valid JSONX JSON object

resources object

any additional resource used for asynchronous properties

Return:

Object

json - {type,props,children}

Return Properties:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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