Home
Global
-
diff --git a/docs/global.html b/docs/global.html
index b8ba8b2a..01242833 100644
--- a/docs/global.html
+++ b/docs/global.html
@@ -6054,7 +6054,7 @@
Home
Global
-
diff --git a/docs/index.html b/docs/index.html
index 3feb0213..e0815fbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -171,6 +171,8 @@
Installation
$ npm i rjxAdvanced - Using Custom Components & UI Libraries
If you plan on using an entire UI library, then bind the library to this before using RJX.
import { default as rjx } from 'rjx'; import { * as Semantic } from 'semantic-ui-react'; @@ -246,7 +248,186 @@Installation
$ npm i rjxDevelopment
Note Make sure you have grunt installed
+const myReactElements = getRenderedJSON(myRJX);Advanced - Special properties
asyncprops / thisprops / windowprops
The only different between asyncprops, thisprops and windowprops are the source of the transverse Object.
+Asyncprops transverse an object that is manually passed (usually as a result of an asynchronous fetch all - hence the name asyncpropc).
+Thisprops transverse anything bound to
+this.props, a good example would be if you're storing and passing a user object onthis.props.user, pulling the username would be where you would use thisprops.Windowprops transverse anything on the global window object, like the current page location
+window.location.href.Dynamic props are transversed by passing an array to the property value you want, so for a window's location (
+window.location.href) the property value is accessed by an array to the href['location','href']where you omit the transverse object from the array path.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', + }, + ], +};dangerouslyEvalProps / dangerouslyBindEvalProps
The only difference between
+__dangerouslyEvalPropsand__dangerouslyBindEvalPropsis each__dangerouslyBindEvalPropshas to be a function, because it's returned as the bound instance of the function withthis.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');__functionProps
Function props merge onto rjx.props after evaluating each functon string.
+const thisProp = { + debug: true, + window: { + print: () => 'printed', + localStorage: { + getItem:()=>'gotItem', + }, + }, + props: { + onClick:()=>'clicked', + reduxRouter: { + push:()=>'pushed', + pop:()=>'poped', + }, + }, +}; +const rxjTest = { + component:'div', + props: { + name:'test', + }, + __functionProps: { + onclick:'func:this.props.onClick', + printPage: 'func:window.print', + nav:'func:this.props.reduxRouter.push', + }, +}; +const rxjObj = getFunctionProps.call(thisProp, { + rjx: rxjTest, +}); +expect(rxjObj).is.an('object'); +expect(Object.keys(rxjObj)).to.eql(Object.keys(rxjTest.__functionProps)); +expect(rxjObj.onclick()).to.eq('clicked'); +expect(rxjObj.printPage()).to.eql('printed'); +expect(rxjObj.nav()).to.eql('pushed');comparisionprops
Comparison props are used to contionally show components if they're truthy. They compare an array of left and right side values, if they are all true, the component is rendered. If
+comparisonorprops:truethen only one condition needs to be true in order to render the component//and conditions +rjx={ + comparisonprops: [{ + left: ['bigNum',], + operation:'lte', + right:['smallNum',], + },{ + left: ['smallNum',], + operation:'<=', + right:['bigNum',], + }], +} +//or conditions +rjx={ + comparisonorprops:true, + comparisonprops: [{ + left: ['truthy',], + operation:'eq', + right:['falsey',], + },{ + left: ['smallNum',], + operation:'eq', + right:['smallNum',], + }], +} + +// All comparison operations +switch (opscompares.operation) { + case 'eq': + case '==': + return opscompares.left == opscompares.right; + case 'dneq': + case '!=': + case '!': + return opscompares.left !== opscompares.right; + case 'dnseq': + case '!==': + return opscompares.left !== opscompares.right; + case 'seq': + case '===': + return opscompares.left === opscompares.right; + case 'lt': + case '<': + return opscompares.left < opscompares.right; + case 'lte': + case '<=': + return opscompares.left <= opscompares.right; + case 'gt': + case '>': + return opscompares.left > opscompares.right; + case 'gte': + case '>=': + return opscompares.left >= opscompares.right; + case 'dne': + case 'undefined': + case 'null': + return opscompares.left === undefined || opscompares.left === null; + case '!null': + case '!undefined': + case 'exists': + default://'exists' + return opscompares.left !== undefined && opscompares.left !== null; +}Development
Note Make sure you have grunt installed
$ npm i -g grunt-cli jsdoc-to-markdownFor generating documentation
$ grunt doc $ jsdoc2md src/**/*.js > docs/api.mdNotes
Check out https://github.com/repetere/rjx for the full rjx Documentation
@@ -290,7 +471,14 @@Example Browser Usage
&l rjx.rjxRender.call(boundConfig,{ rjx: sampleRJX, querySelector:'#root', }); </script> </body> -</html>License
+</html>+ ++ + +
+
+License
MIT
@@ -309,7 +497,7 @@Home
Global
-
diff --git a/docs/main.js.html b/docs/main.js.html
index 4f85c0e8..c009ee98 100644
--- a/docs/main.js.html
+++ b/docs/main.js.html
@@ -146,7 +146,7 @@
Home
Global
-
diff --git a/docs/props.js.html b/docs/props.js.html
index 6d778779..3e83aaef 100644
--- a/docs/props.js.html
+++ b/docs/props.js.html
@@ -367,7 +367,7 @@
Home
Global
-
diff --git a/docs/props.js.html b/docs/props.js.html
index 6d778779..3e83aaef 100644
--- a/docs/props.js.html
+++ b/docs/props.js.html
@@ -367,7 +367,7 @@
-
diff --git a/docs/main.js.html b/docs/main.js.html
index 4f85c0e8..c009ee98 100644
--- a/docs/main.js.html
+++ b/docs/main.js.html
@@ -146,7 +146,7 @@
-
diff --git a/docs/index.html b/docs/index.html
index 3feb0213..e0815fbf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -171,6 +171,8 @@