RNDM Render Plugin: Builder
About
This plugin provides the core functionality for the RNDM Render package.
Installation
If you have not already done so, then please ensure you have installed the RNDM Render and RNDM Plugin: Core package.
From NPM
npm install --save @rndm/render-plugin-builderPost Installation
In order to allow this plugin to work, it must first be included in your project. You can do this inside your main index file:
import '@rndm/render-plugin-core';
import '@rndm/render-plugin-builder';Usage
The Builder plugin allows your application to describe functionality ahead of time through a middleware object for later usage. Once it has been described once, it will be retained for the lifetime of the application.
Please Note: This plugin will only create the functionality for the currently running instance and will be purged upon the close of the application. Future presets will include local stage versions of this.
Example
Below is a simple example of creating a Class in RNDM for future usage:
{
"type": "react-native.View",
"props": {
"middleware": [{
"middleware": "rndm-builder.prebuild",
"args": [{
"type": "TESTTEXT",
"rndm": {
"type": "react-native.View",
"props": {
"style": {
"padding": 20,
"backgroundColor": "green"
},
"children": {
"type": "react-native.Text",
"props": {
"children": "Hello world"
}
}
}
}
}]
}],
"children": {
"type": "rndm-builder.TESTTEXT"
}
}
}Changing the Input
The Builder plugin supplies the ability to change properties prior to execution. In the example above, we have created a simple class with the a background colour of green. However, this can be changed in one of two ways:
Props
The props property is an Object that can be passed into builder as is. For instance we may want to change the backgroundColor to 'red'. We can do this as below:
Example
{
"type": "react-native.View",
"props": {
"middleware": [{
"middleware": "rndm-builder.prebuild",
"args": [{
"type": "TESTTEXT",
"rndm": {
"type": "react-native.View",
"props": {
"style": {
"padding": 20,
"backgroundColor": "green"
},
"children": {
"type": "react-native.Text",
"props": {
"children": "Hello world"
}
}
}
}
}]
}],
"children": {
"type": "rndm-builder.TESTTEXT",
"props": {
"props": {
"props": {
"style": {
"backgroundColor": "red"
}
}
}
}
}
}
}Setters
The second way is less verbose and allows a simple key value object. Again we can change the background colour to another colour. This time we will select 'orange':
Example
{
"type": "react-native.View",
"props": {
"middleware": [{
"middleware": "rndm-builder.prebuild",
"args": [{
"type": "TESTTEXT",
"rndm": {
"type": "react-native.View",
"props": {
"style": {
"padding": 20,
"backgroundColor": "green"
},
"children": {
"type": "react-native.Text",
"props": {
"children": "Hello world"
}
}
}
}
}]
}],
"children": {
"type": "rndm-builder.TESTTEXT",
"props": {
"props": {
"props": {
"style": {
"backgroundColor": "red"
}
}
}
}
}
}
}We can combine both options. By default the setters will take priority over the props. However, we can determine the priority order of this merger using the "settersFirst" property as below:
Example
{
"type": "react-native.View",
"props": {
"middleware": [{
"middleware": "rndm-builder.prebuild",
"args": [{
"type": "TESTTEXT",
"rndm": {
"type": "react-native.View",
"props": {
"style": {
"padding": 20,
"backgroundColor": "green"
},
"children": {
"type": "react-native.Text",
"props": {
"children": "Hello world"
}
}
}
}
}]
}],
"children": {
"type": "rndm-builder.TESTTEXT",
"props": {
"settersFirst": true,
"props": {
"props": {
"style": {
"backgroundColor": "red"
}
}
},
"setters": {
"props.style.backgroundColor": "orange"
}
}
}
}
}Check out the Playground page to see how these features work.