Function
Static Public Summary | ||
public |
|
|
public |
|
|
public |
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 |
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 |
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 |
|
|
public |
|
|
public |
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 |
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 |
converts JSONX JSON IR to JSX |
|
public |
simpleJSONXSyntax(simpleJSONX: Object): Object Transforms SimpleJSONX to Valid JSONX JSON {[component]:{props,children}} => {component,props,children} |
|
public |
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 |
Use JSONX for express view rendering |
|
private |
__getReact(): Object Exposes react module used in JSONX |
|
private |
Exposes react dom module used in JSONX |
|
private |
Exposes global hook used in JSONX |
Static Public
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
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
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
public getAdvancedBinding(): Boolean source
import {getAdvancedBinding} from 'jsonx/src/utils.js'
Use to test if can bind components this context for react-redux-router
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
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
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 |
|
Valid JSONX JSON |
options.childjsonx | Object |
|
Valid JSONX JSON |
options.renderIndex | Number | React key property |
|
options.props | Object |
|
Props to pull children Object.assign(jsonx.props,jsonx.asyncprops,jsonx.thisprops,jsonx.windowprops) |
public getComponentFromLibrary(options: Object): function | undefined source
import {getComponentFromLibrary} from 'jsonx/src/components.js'
returns a react component from a component library
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 |
|
any valid JSONX JSON object |
options.reactComponents | Object |
|
react components to render |
options.componentLibraries | Object |
|
react components to render from another component library like bootstrap or bulma |
options.logError | function |
|
error logging function |
options.debug | boolean |
|
use debug messages |
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.
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 |
|
object to use for asyncprops, usually a result of an asynchronous call |
options.renderIndex | Number | number used for React key prop |
|
options.logError | function |
|
error logging function |
options.componentLibraries | Object |
|
react components to render with JSONX |
options.useReduxState | Boolean |
|
use redux props in this.props |
options.ignoreReduxPropsInComponentLibraries | Boolean |
|
ignore redux props in this.props for component libraries, this is helpful incase these properties collide with component library element properties |
options.debug | boolean |
|
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;})
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
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 |
|
function string, like func:window.LocalStorage.getItem or func:this.props.onClick or func:inline.myInlineFunction |
options.allProps | Object |
|
merged computed props, Object.assign({ key: renderIndex, }, thisprops, jsonx.props, resourceprops, asyncprops, windowprops, evalProps, insertedComponents); |
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
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 |
|
the object that contains values of propName |
options | Object | ||
options.jsonx | Object | Valid JSONX JSON |
|
options.propName | Object |
|
Property on JSONX to resolve values onto, i.e (asyncprops,thisprops,windowprops) |
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 |
|
returns a React component if true otherwise returns Component Class |
options.resources | Object |
|
asyncprops for component |
options.name | String |
|
Component name |
options.lazy | Function |
|
function that resolves {reactComponent,options} to lazy load component for code splitting |
options.use_getState | Boolean |
|
define getState prop |
options.bindContext | Boolean |
|
bind class this reference to render function components |
options.passprops | Boolean |
|
pass props to rendered component |
options.passstate | Boolean |
|
pass state as props to rendered component |
reactComponent | Object |
|
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 |
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.
public getReactElementFromJSON(): function source
import {getReactElementFromJSON} from 'jsonx/src/main.js'
converts a json object {type,props,children} into a react element
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
Return:
function | React element via React.createElement |
Return Properties:
Name | Type | Attribute | Description |
this | object | options for getReactElementFromJSONX |
|
this.componentLibraries | Object |
|
react components to render with JSONX |
this.debug | boolean |
|
use debug messages |
this.returnJSON | boolean |
|
return json object of {type,props,children} instead of react element |
this.disableRenderIndexKey | boolean |
|
disables auto assign a key prop |
this.logError | function |
|
error logging function |
this.boundedComponents | string[] |
|
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
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 |
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
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} |
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
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
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
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} |
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 |
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
Throw:
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 |
public validateJSONX(jsonx: Object, returnAllErrors: Boolean): Boolean | Error[] source
import {validateJSONX} from 'jsonx/src/utils.js'
Validates JSONX JSON Syntax
Return:
Boolean | Error[] | either returns true if JSONX is valid, or throws validation error or returns list of errors in array |
Throw:
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 |
|
html doctype string |
callback | * |
private __getReact(): Object source
import {__getReact} from 'jsonx/src/main.js'
Exposes react module used in JSONX
private __getReactDOM(): Object source
import {__getReactDOM} from 'jsonx/src/main.js'
Exposes react dom module used in JSONX
private __getUseGlobalHook(): Object source
import {__getUseGlobalHook} from 'jsonx/src/main.js'
Exposes global hook used in JSONX