Function
Static Public Summary | ||
public |
displayComponent(options: Object): Boolean Used to evaluate whether or not to render a component |
|
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 |
getChildrenProperty(options: Object): Object[] | String returns a valid rjx.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 rjx.component |
|
public |
getComponentProps(options: Object): Object Resolves rjx.__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 rjx.__functionProps |
|
public |
getParamNames(func: Function) returns the names of parameters from a function declaration |
|
public |
getRJXChildren(options: *) returns React Child Elements via RJX |
|
public |
getRJXProps(traverseObject: Object, options: Object): Object It uses traverse on a traverseObject to returns a resolved object on propName. |
|
public |
getReactClassComponent(reactComponent: Object): Function Returns a new React Component |
|
public |
getReactComponentProps(options: Object): Object Resolves rjx.__dangerouslyInsertReactComponents into an object that turns each value into a React components. |
|
public |
getReactFunctionComponent(reactComponent: *, functionBody: String): Function Returns new React Function Component |
|
public |
getRenderedJSON(rjx: object, resources: object): function Use React.createElement and RJX JSON to create React elements |
|
public |
getSimplifiedRJX(rjx: Object): Object Transforms Valid RJX JSON to SimpleRJX {component,props,children} => {[component]:{props,children}} |
|
public |
getWindowComponents(options: Object): Object Returns a resolved object that has React Components pulled from window.__rjx_custom_elements |
|
public |
rjxHTMLString(config: object): string Use ReactDOMServer.renderToString to render html from RJX |
|
public |
Use RJX without any configuration to render RJX JSON to HTML and insert RJX into querySelector using ReactDOM.render |
|
public |
simpleRJXSyntax(simpleRJX: Object): Object Transforms SimpleRJX to Valid RJX JSON {[component]:{props,children}} => {component,props,children} |
|
public |
take an object of array paths to traverse and resolve |
|
public |
validSimpleRJXSyntax(simpleRJX: Object): Boolean validates simple RJX Syntax {[component]:{props,children}} |
|
public |
validateRJX(rjx: Object, returnAllErrors: Boolean): Boolean | Error[] Validates RJX JSON Syntax |
Static Private Summary | ||
private |
Use RJX for express view rendering |
|
private |
|
|
private |
|
Static Public
public displayComponent(options: Object): Boolean source
import {displayComponent} from 'rjx/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 sampleRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className: 'rjx',
bigNum: 1430931039,
smallNum: 0.425,
falsey: false,
truthy: true,
},
children: 'some div',
};
const testRJX = Object.assign({}, sampleRJX, {
comparisonprops: [{
left: ['truthy',],
operation:'==',
right:['falsey',],
}],
});
displayComponent({ rjx: testRJX, props: testRJX2.props, }) // => false
public getAdvancedBinding(): Boolean source
import {getAdvancedBinding} from 'rjx/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 'rjx/src/components.js'
getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list
public getChildrenProperty(options: Object): Object[] | String source
import {getChildrenProperty} from 'rjx/src/children.js'
returns a valid rjx.children property
Return:
Object[] | String | returns a valid rjx.children property that's either an array of RJX objects or a string |
Example:
const sampleRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
},
},
children:'hello world',
},
{
component: 'div',
children: [
{
component: 'ul',
children: [
{
component: 'li',
children:'list',
},
],
},
],
},
],
};
const RJXChildren = getChildrenProperty({ rjx: sampleRJX, }); //=> [ [rjx Object],[rjx Object]]
const RJXChildrenPTag = getChildrenProperty({ rjx: sampleRJX.children[ 0 ], }); //=>hello world
public getChildrenProps(options: Object): Object | String source
import {getChildrenProps} from 'rjx/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.rjx | Object |
|
Valid RJX JSON |
options.childrjx | Object |
|
Valid RJX JSON |
options.renderIndex | Number | React key property |
|
options.props | Object |
|
Props to pull children Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops) |
public getComponentFromLibrary(options: Object): function | undefined source
import {getComponentFromLibrary} from 'rjx/src/components.js'
returns a react component from a component library
public getComponentFromMap(options: Object): string | function | class source
import {getComponentFromMap} from 'rjx/src/components.js'
returns a react element from rjx.component
Params:
Name | Type | Attribute | Description |
options | Object | options for getComponentFromMap |
|
options.rjx | object |
|
any valid RJX 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({rjx:{component:'div'}})=>div
getComponentFromMap({rjx:{component:'MyModal'},reactComponents:{MyModal:MyModal extends React.Component}})=>MyModal
getComponentFromMap({rjx:{component:'reactBootstap.nav'},componentLibraries:{reactBootstrap,}})=>reactBootstap.nav
public getComponentProps(options: Object): Object source
import {getComponentProps} from 'rjx/src/props.js'
Resolves rjx.__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 'rjx/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.rjx | Object | Valid RJX 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 RJX |
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 testRJX = { component: 'div',
props: { id: 'generatedRJX', className: 'rjx' },
children: [ [Object] ],
asyncprops: { auth: [Array], username: [Array] },
__dangerouslyEvalProps: { getUsername: '(user={})=>user.name' },
__dangerouslyInsertComponents: { myComponent: [Object] }
const resources = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const renderIndex = 1;
getComputedProps.call({}, {
rjx: testRJX,
resources,
renderIndex,
});
computedProps = { key: 1,
id: 'generatedRJX',
className: 'rjx',
auth: 'OAuth2',
username: 'rjx',
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 'rjx/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 testRJX = Object.assign({}, sampleRJX, {
__dangerouslyEvalProps: testVals, __dangerouslyBindEvalProps: {
email: '(function getUser(user={}){ return this.testBound(); })',
},
});
const RJXP = getEvalProps.call({ testBound: () => 'bounded', }, { rjx: testRJX, });
const evalutedComputedFunc = RJXP.username({ name: 'bob', });
const evalutedComputedBoundFunc = RJXP.email({ email:'test@email.domain', });
// expect(RJXP.auth).to.be.true;
// expect(evalutedComputedFunc).to.eql('bob');
// expect(evalutedComputedBoundFunc).to.eql('bounded');
public getFunctionFromEval(options: Object): Function source
import {getFunctionFromEval} from 'rjx/src/components.js'
Returns a new function from an options object
public getFunctionFromProps(options: Object): Function source
import {getFunctionFromProps} from 'rjx/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, rjx.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 'rjx/src/props.js'
Returns a resolved object from function strings that has functions pulled from rjx.__functionProps
public getParamNames(func: Function) source
import {getParamNames} from 'rjx/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 getRJXChildren(options: *) source
import {getRJXChildren} from 'rjx/src/children.js'
returns React Child Elements via RJX
Params:
Name | Type | Attribute | Description |
options | * |
public getRJXProps(traverseObject: Object, options: Object): Object source
import {getRJXProps} from 'rjx/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.rjx | Object | Valid RJX JSON |
|
options.propName | Object |
|
Property on RJX to resolve values onto, i.e (asyncprops,thisprops,windowprops) |
Example:
const traverseObject = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const testRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
},
asyncprops:{
auth: [ 'authentication', ],
username: [ 'user', 'name', ],
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
fontWeight:'bold',
},
},
children:'hello world',
},
],
};
const RJXP = getRJXProps({ rjx: testRJX, traverseObject, });
// => {
// auth: 'OAuth2',
// username: 'rjx'
// }
//finally resolves:
const testRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
auth: 'OAuth2',
username: 'rjx',
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
fontWeight:'bold',
},
},
children:'hello world',
},
],
};
public getReactClassComponent(reactComponent: Object): Function source
import {getReactClassComponent} from 'rjx/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 RJX 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 'rjx/src/props.js'
Resolves rjx.__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 getReactFunctionComponent(reactComponent: *, functionBody: String): Function source
import {getReactFunctionComponent} from 'rjx/src/components.js'
Returns new React Function Component
Example:
const rjxRender = {
component:'div',
passprops:'true',
children:[
{
component:'input',
thisprops:{
value:['count'],
},
},
{
component:'button',
__functionProps:{
onClick:'func:inline.onClick'
},
__functionargs:['count','setCount'],
__inline:{
onClick:`return setCount(count+1)`,
},
children:'Click me'
}
]
};
const functionBody = 'const [count, setCount] = useState(0); const functionprops = {count,setCount};'
const options = { name: IntroHook}
const MyCustomFunctionComponent = rjx._rjxComponents.getReactFunctionComponent({rjxRender, functionBody, options});
See:
- https://reactjs.org/docs/hooks-intro.html
TODO:
- set 'functionprops' to set arguments for function
public getRenderedJSON(rjx: object, resources: object): function source
import {getRenderedJSON} from 'rjx/src/main.js'
Use React.createElement and RJX JSON to create React elements
Return:
function | React element via React.createElement |
Return Properties:
Name | Type | Attribute | Description |
this | object | options for getRenderedJSON |
|
this.componentLibraries | Object |
|
react components to render with RJX |
this.debug | boolean |
|
use debug messages |
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>
rjx.getRenderedJSON({component:'myCompnent',props:{style:{color:'blue'}},children:'hello world'})
public getSimplifiedRJX(rjx: Object): Object source
import {getSimplifiedRJX} from 'rjx/src/utils.js'
Transforms Valid RJX JSON to SimpleRJX {component,props,children} => {[component]:{props,children}}
Params:
Name | Type | Attribute | Description |
rjx | Object | Valid RJX JSON object |
public getWindowComponents(options: Object): Object source
import {getWindowComponents} from 'rjx/src/props.js'
Returns a resolved object that has React Components pulled from window.__rjx_custom_elements
Return:
Object | resolved object of with React Components from a window property window.__rjx_custom_elements |
public rjxHTMLString(config: object): string source
import {rjxHTMLString} from 'rjx/src/main.js'
Use ReactDOMServer.renderToString to render html from RJX
Return:
string | React genereated html via RJX JSON |
Return Properties:
Name | Type | Attribute | Description |
this | object | options for getRenderedJSON |
Example:
// Uses react to create <div class="rjx-generated"><p style="color:red;">hello world</p></div>
rjx.rjxHTMLString({ rjx: { component: 'div', props:{className:'rjx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, });
public rjxRender(config: object) source
import {rjxRender} from 'rjx/src/main.js'
Use RJX without any configuration to render RJX JSON to HTML and insert RJX into querySelector using ReactDOM.render
Example:
// Uses react to create <!DOCTYPE html><body><div id="myApp"><div class="rjx-generated"><p style="color:red;">hello world</p></div></div></body>
rjx.rjxRender({ rjx: { component: 'div', props:{className:'rjx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });
public simpleRJXSyntax(simpleRJX: Object): Object source
import {simpleRJXSyntax} from 'rjx/src/utils.js'
Transforms SimpleRJX to Valid RJX JSON {[component]:{props,children}} => {component,props,children}
Params:
Name | Type | Attribute | Description |
simpleRJX | Object | JSON Object |
public traverse(paths: Object, data: Object): Object source
import {traverse} from 'rjx/src/utils.js'
take an object of array paths to traverse and resolve
Throw:
Example:
const testObj = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const testVals = { auth: ['authentication', ], username: ['user', 'name', ], };
traverse(testVals, testObj) // =>{ auth:'OAuth2', username:'rjx', }
public validSimpleRJXSyntax(simpleRJX: Object): Boolean source
import {validSimpleRJXSyntax} from 'rjx/src/utils.js'
validates simple RJX Syntax {[component]:{props,children}}
Params:
Name | Type | Attribute | Description |
simpleRJX | Object | Any valid simple RJX Syntax |
public validateRJX(rjx: Object, returnAllErrors: Boolean): Boolean | Error[] source
import {validateRJX} from 'rjx/src/utils.js'
Validates RJX JSON Syntax
Return:
Boolean | Error[] | either returns true if RJX is valid, or throws validation error or returns list of errors in array |
Throw:
Example:
validateRJX({component:'p',children:'hello world'})=>true
validateRJX({children:'hello world'})=>throw SyntaxError('[0001] Missing React Component')
Static Private
private __express(filePath: string, options: object, callback: *) source
import {__express} from 'rjx/src/main.js'
Use RJX for express view rendering
Params:
Name | Type | Attribute | Description |
filePath | string | path to rjx express view |
|
options | object | property used for express view {locals} |
|
options.__boundConfig | object | property used to bind this object for RJX, can be used to add custom components |
|
options.__DOCTYPE | string |
|
html doctype string |
callback | * |