Global

Members

componentMap

object of all react components available for RJX
Source:

Methods

__express(filePath, options, callback)

Use RJX for express view rendering
Parameters:
Name Type Description
filePath string path to rjx express view
options object property used for express view {locals}
Properties
Name Type Attributes Default Description
__boundConfig object property used to bind this object for RJX, can be used to add custom components
__DOCTYPE string <optional>
"<!DOCTYPE html>" html doctype string
callback *
Source:

displayComponent(options) → {Boolean}

Used to evaluate whether or not to render a component
Parameters:
Name Type Description
options Object
Properties
Name Type Description
rjx Object Valid RJX JSON
props Object Props to test comparison values against, usually Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops)
Source:
Returns:
returns true if all comparisons are true or if using or comparisons, at least one condition is true
Type
Boolean
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

getAdvancedBinding() → {Boolean}

Use to test if can bind components this context for react-redux-router
Source:
Returns:
true if browser is not IE or old android / chrome
Type
Boolean

getBoundedComponents(options, boundedComponents) → {Object}

getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list
Parameters:
Name Type Description
options Object options for getBoundedComponents
Properties
Name Type Description
reactComponents Object all react components available for RJX
boundedComponents Array.<string> list of components to bind RJX this context (usually helpful for navigation and redux-router)
Source:
Returns:
reactComponents object of all react components available for RJX
Type
Object

getChildrenProperty(options) → {Array.<Object>|String}

returns a valid rjx.children property
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object <optional>
{} Valid RJX JSON
props Object <optional>
options.rjx.children Props to pull children Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops)
Source:
Returns:
returns a valid rjx.children property that's either an array of RJX objects or a string
Type
Array.<Object> | 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

getChildrenProps(options) → {Object|String}

Used to pass properties down to child components if passprops is set to true
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object <optional>
{} Valid RJX JSON
childrjx Object <optional>
{} Valid RJX JSON
renderIndex Number React key property
props Object <optional>
options.rjx.props Props to pull children Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops)
Source:
Returns:
returns a valid Valid RJX Child object or a string
Type
Object | String

getComponentFromLibrary(options) → {function|undefined}

returns a react component from a component library
Parameters:
Name Type Description
options Object options for getComponentFromLibrary
Properties
Name Type Attributes Default Description
componentLibraries Object <optional>
{} react component library like bootstrap
rjx Object <optional>
{} any valid RJX JSON
Source:
Returns:
react component from react library like bootstrap, material design or bulma
Type
function | undefined

getComponentFromMap(options) → {string|function|class}

returns a react element from rjx.component
Parameters:
Name Type Description
options Object options for getComponentFromMap
Properties
Name Type Attributes Default Description
rjx object <optional>
{} any valid RJX JSON object
reactComponents Object <optional>
{} react components to render
componentLibraries Object <optional>
{} react components to render from another component library like bootstrap or bulma
logError function <optional>
console.error error logging function
debug boolean <optional>
false use debug messages
Source:
Returns:
valid react element
Type
string | function | class
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

getComponentProps(options) → {Object}

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.
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object Valid RJX JSON
resources Object <optional>
{} object to use for resourceprops(asyncprops), usually a result of an asynchronous call
Source:
Returns:
resolved object of React Components
Type
Object

getComputedProps(options)

Returns computed properties for React Components and any property that's prefixed with __ is a computedProperty
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object Valid RJX JSON
resources Object <optional>
{} object to use for asyncprops, usually a result of an asynchronous call
renderIndex Number number used for React key prop
logError function <optional>
console.error error logging function
componentLibraries Object <optional>
react components to render with RJX
useReduxState Boolean <optional>
true use redux props in this.props
ignoreReduxPropsInComponentLibraries Boolean <optional>
true ignore redux props in this.props for component libraries, this is helpful incase these properties collide with component library element properties
debug boolean <optional>
false use debug messages
Source:
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: {} } } }

getEvalProps(options) → {Object}

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;})
Parameters:
Name Type Description
options Object
Properties
Name Type Description
rjx Object Valid RJX JSON
Source:
Returns:
returns resolved object with evaluated javascript
Type
Object
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');

getFunctionFromEval(options) → {function}

Returns a new function from an options object
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
body String <optional>
'' Function string body
args Array.<String> <optional>
[] Function arguments
Source:
Returns:
Type
function

getFunctionFromProps(options) → {function}

Takes a function string and returns a function on either this.props or window. The function can only be 2 levels deep
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
propFunc String <optional>
'func:' function string, like func:window.LocalStorage.getItem or this.props.onClick
allProps Object <optional>
{} merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, resourceprops, asyncprops, windowprops, evalProps, insertedComponents);
Source:
Returns:
returns a function from this.props or window functions
Type
function
Example
getFunctionFromProps({ propFunc='func:this.props.onClick', }) // => this.props.onClick

getFunctionProps(options) → {Object}

Returns a resolved object from function strings that has functions pulled from rjx.__functionProps
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object Valid RJX JSON
allProps Object <optional>
{} merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, asyncprops, windowprops, evalProps, insertedComponents);
Source:
Returns:
resolved object of functions from function strings
Type
Object

getReactComponent(reactComponentopt) → {function}

Returns a new React Component
Parameters:
Name Type Attributes Default Description
options.returnFactory Boolean <optional>
true returns a React component if true otherwise returns Component Class
options.resources Object <optional>
{} asyncprops for component
reactComponent Object <optional>
{} an object of functions used for create-react-class
Properties
Name Type Description
render.body Object Valid RJX JSON
getDefaultProps.body String return an object for the default props
getInitialState.body String return an object for the default state
Source:
See:
Returns:
Type
function

getReactComponentProps(options) → {Object}

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.
Parameters:
Name Type Description
options Object
Properties
Name Type Description
rjx Object Valid RJX JSON // * @param {Object} [options.resources={}] - object to use for asyncprops, usually a result of an asynchronous call
Source:
Returns:
resolved object of React Components
Type
Object

getRenderedJSON(rjx, resources) → {function}

Use React.createElement and RJX JSON to create React elements
Parameters:
Name Type Description
rjx object any valid RJX JSON object
resources object any additional resource used for asynchronous properties
Properties:
Name Type Description
this object options for getRenderedJSON
Properties
Name Type Attributes Default Description
componentLibraries Object <optional>
react components to render with RJX
debug boolean <optional>
false use debug messages
logError function <optional>
console.error error logging function
boundedComponents Array.<string> <optional>
[] list of components that require a bound this context (usefult for redux router)
Source:
Returns:
React element via React.createElement
Type
function
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'})

getRJXChildren(options)

returns React Child Elements via RJX
Parameters:
Name Type Description
options *
Properties:
Name Type Description
this object options for getRenderedJSON
Properties
Name Type Attributes Default Description
componentLibraries Object <optional>
react components to render with RJX
debug boolean <optional>
false use debug messages
logError function <optional>
console.error error logging function
boundedComponents Array.<string> <optional>
[] list of components that require a bound this context (usefult for redux router)
Source:

getRJXProps(traverseObjectopt, options) → {Object}

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
Parameters:
Name Type Attributes Default Description
traverseObject Object <optional>
{} the object that contains values of propName
options Object
Properties
Name Type Attributes Default Description
rjx Object Valid RJX JSON
propName Object <optional>
'asyncprops' Property on RJX to resolve values onto, i.e (asyncprops,thisprops,windowprops)
Source:
Returns:
resolved object
Type
Object
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',
    },
  ],
};

getWindowComponents(options) → {Object}

Returns a resolved object that has React Components pulled from window.__rjx_custom_elements
Parameters:
Name Type Description
options Object
Properties
Name Type Attributes Default Description
rjx Object Valid RJX JSON
allProps Object <optional>
{} merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, asyncprops, windowprops, evalProps, insertedComponents);
Source:
Returns:
resolved object of with React Components from a window property window.__rjx_custom_elements
Type
Object

rjxHTMLString(config) → {string}

Use ReactDOMServer.renderToString to render html from RJX
Parameters:
Name Type Description
config object options used to inject html via ReactDOM.render
Properties
Name Type Description
rjx object any valid RJX JSON object
resources object any additional resource used for asynchronous properties
Properties:
Name Type Description
this object options for getRenderedJSON
Source:
Returns:
React genereated html via RJX JSON
Type
string
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' }]}}, });

rjxRender(config)

Use RJX without any configuration to render RJX JSON to HTML and insert RJX into querySelector using ReactDOM.render
Parameters:
Name Type Description
config object options used to inject html via ReactDOM.render
Properties
Name Type Description
rjx object any valid RJX JSON object
resources object any additional resource used for asynchronous properties
querySelector string selector for document.querySelector
Properties:
Name Type Description
this object options for getRenderedJSON
Source:
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', });

simpleRJXSyntax(simpleRJX) → {Object}

Transforms SimpleRJX to Valid RJX JSON {[component]:{props,children}} => {component,props,children}
Parameters:
Name Type Description
simpleRJX Object JSON Object
Source:
Returns:
- returns a valid RJX JSON Object from a simple RJX JSON Object
Type
Object

traverse(paths, data) → {Object}

take an object of array paths to traverse and resolve
Parameters:
Name Type Description
paths Object an object to resolve array property paths
data Object object to traverse
Source:
Throws:
TypeError
Returns:
resolved object with traversed properties
Type
Object
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',  }

validateRJX(rjx, returnAllErrorsopt) → {Boolean|Array.<Error>}

Validates RJX JSON Syntax
Parameters:
Name Type Attributes Default Description
rjx Object RJX JSON to validate
returnAllErrors Boolean <optional>
false flag to either throw error or to return all errors in an array of errors
Source:
Throws:
SyntaxError | TypeError | ReferenceError
Returns:
either returns true if RJX is valid, or throws validation error or returns list of errors in array
Type
Boolean | Array.<Error>
Example
validateRJX({component:'p',children:'hello world'})=>true
validateRJX({children:'hello world'})=>throw SyntaxError('[0001] Missing React Component')

validSimpleRJXSyntax(simpleRJX) → {Boolean}

validates simple RJX Syntax {[component]:{props,children}}
Parameters:
Name Type Description
simpleRJX Object Any valid simple RJX Syntax
Source:
Returns:
returns true if simpleRJX is valid
Type
Boolean