improved toggle propagation through child components via context

Author: Daniel de la Cruz

README.md

@@ -29,37 +29,52 @@ class MyComponent extends Component {
 }
 ```
 
-The component will receive a prop named `toggles` with an array of toggles, similar to this:
+The component will receive a prop named `toggles` with an array of toggles. You are free to implement any object pattern with the information needed to implement your toggle. This may be the simplest configuration possible to activate a simple toggle:
 
 ```javascript
 [{
   myToggle: true
-}, {
-  myDisabledToggle: false
-}, {
-  yetAnotherToggle: true
 }]
 ```
 
+Just keep in mind to be consistent when implementing the feature toggle in your component, and with the object you are sending in the array of toggles.
+
 In the previous example, the component will only make use of `myToggle`... But how does it receive it? This is where `react-feature-toggles` is useful.
 
-First, wrap your component into the higher order component `ReactToggle`:
+React Feature Toggles provides you two HOC: `ToggleApp` and `ToggleComponent`. Let's examine them in detail:
+
+## ToggleComponent
+At the component level, just wrap your component into the higher order component `ToggleComponent`:
 
 ```javascript
-import { ReactToggle } from "../src";
+import { ToggleComponent } from 'react-feature-toggle';
 ...
-export default ReactToggle(MyComponent);
+export default ToggleComponent(MyComponent);
 ```
 
-This will export your component as a _toggleable_ component.
+This will export your component as a _toggled_ component. What does it mean? Just that it will be wrapped with a Higher Order Component that will receive by context an array of toggles and pass it as props to your component.
+
+Please notice that you only need to wrap your toggled component with the `ToggleComponent`, not the rest of your application's components, and the organic components using it neither. Please review the `docs` folder for a full example.
 
-Secondly, the user of your component will need to provide the toggles somehow. It's up to you how to decide which toggles are activated or not, but you must provide the component a `promise` property with a `Promise` function that returns an array of feature toggles on being fullfilled:
+## ToggleApp
+At the top level of your application, you must wrap your app with the higher order component `ToggleApp`:
 
 ```javascript
-ReactDom.render(<MyComponent promise={
-  new Promise(resolve => {
-    resolve([{myToggle: true}]);
-  })
-}
-/>, document.getElementById('main'));
+import { ToggleApp } from 'react-feature-toggle';
+...
+const MyToggledApp = ToggleApp(MyApp, toggles);
 ```
+
+The way to provide the array of toggles is up to you, but keep in mind that the user of your app will need to provide the toggles somehow. In the following example, I'm providing a `Promise` function that returns an array of feature toggles on being fullfilled:
+
+```javascript
+new Promise(resolve => {
+  resolve([{myToggle: false}]);
+})
+.then(toggles => {
+  const MyToggledApp = ToggleApp(MyApp, toggles);
+  ReactDom.render(<MyToggledApp />, document.getElementById('main'));
+});
+```
+
+Please review the `docs` folder to get a complete example.

docs/index.jsx

@@ -1,12 +1,24 @@
 /* eslint no-undef:0 */
+/* eslint new-cap:0 */
 import 'babel-polyfill';
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDom from 'react-dom';
-import MyComponent from './myComponent';
+import MyComponentList from './myComponentList';
+import { ToggleApp } from '../src';
 
-ReactDom.render(<MyComponent promise={
-  new Promise(resolve => {
-    resolve([{myToggle: true}]);
-  })
+class MyApp extends Component {
+  constructor(...args){
+    super(...args);
+  }
+  render() {
+    return <MyComponentList />;
+  }
 }
-/>, document.getElementById('main'));
+
+new Promise(resolve => {
+  resolve([{myToggle: false}]);
+})
+.then(toggles => {
+  const MyToggledApp = ToggleApp(MyApp, toggles);
+  ReactDom.render(<MyToggledApp />, document.getElementById('main'));
+});

docs/myComponent.js

@@ -1,10 +1,13 @@
 /* eslint react/prop-types: 0 new-cap: 0 */
-import { ReactToggle } from '../src';
+import { ToggleComponent } from '../src';
 import React, { Component } from 'react';
 
 class MyComponent extends Component {
+  constructor(...args){
+    super(...args);
+  }
   render() {
-    let myToggle = this.props.toggles.find(t => {
+    let myToggle = this.props.toggles && this.props.toggles.find(t => {
       let {myToggle} = t;
       return myToggle;
     });
@@ -16,4 +19,4 @@ class MyComponent extends Component {
   }
 }
 
-export default ReactToggle(MyComponent);
+export default ToggleComponent(MyComponent);

docs/myComponentList.js

@@ -0,0 +1,19 @@
+/* eslint react/prop-types: 0 new-cap: 0 */
+import MyComponent from './myComponent';
+import React, { Component } from 'react';
+
+class MyComponentList extends Component {
+  constructor(...args){
+    super(...args);
+  }
+  render() {
+    return (<div>
+      <MyComponent />
+      <MyComponent />
+      <MyComponent />
+      <MyComponent />
+    </div>);
+  }
+}
+
+export default MyComponentList;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-feature-toggle",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "lib/",
   "scripts": {
     "clean:lib": "rimraf ./lib/*",
@@ -15,8 +15,6 @@
     "lint": "npm run lint:eslint && npm run lint:sass",
     "lint:eslint": "eslint --ext=.js --ext=.jsx ./src/ ./test/ ./docs/",
     "lint:sass": "sass-lint src/**/*.scss -c -v",
-    "test": "mocha --compilers js:babel-register --recursive --require babel-polyfill",
-    "test:watch": "npm run test -- -w test src --watch-extensions jsx",
     "start": "npm run start:open && npm run start:server",
     "start:server": "webpack-dev-server",
     "start:open": "opener http://localhost:8080",
@@ -32,8 +30,7 @@
     "url": ""
   },
   "pre-commit": [
-    "lint",
-    "test"
+    "lint"
   ],
   "peerDependencies": {
     "react": "0.14"

src/index.jsx

@@ -1,2 +1,4 @@
-import {ReactToggle} from './react-toggle';
-export {ReactToggle};
+import { ToggleApp } from './toggle-app';
+import { ToggleComponent } from './toggle-component';
+
+export { ToggleApp, ToggleComponent };

src/react-toggle/index.jsx

@@ -0,0 +1,30 @@
+import React, { Component, PropTypes } from 'react';
+
+const ToggleApp = (ComposedApp, toggles) => class extends Component {
+  constructor(...args){
+    super(...args);
+  }
+  static get displayName() {
+    const componentDisplayName =
+    ComposedApp.name ||
+    ComposedApp.displayName ||
+    'App';
+
+    return `Toggled${componentDisplayName}`;
+  }
+  static get childContextTypes() {
+    return {
+      toggles: PropTypes.array
+    };
+  }
+  getChildContext() {
+    return {
+      toggles: toggles
+    };
+  }
+  render() {
+    return <ComposedApp {...this.props} toggles={this.context.toggles} />;
+  }
+};
+
+export { ToggleApp };

src/toggle-app/index.jsx

@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react';
+
+const ToggleComponent = ComposedComponent => class extends Component {
+  static get childContextTypes() {
+    return {
+      toggles: PropTypes.array
+    };
+  }
+  static get displayName() {
+    const componentDisplayName =
+    ComposedComponent.name ||
+    ComposedComponent.displayName ||
+    'Component';
+
+    return `Toggled${componentDisplayName}`;
+  }
+  static get contextTypes() {
+    return {
+      toggles: PropTypes.array
+    };
+  }
+  getChildContext() {
+    return this.toggles ? {
+      toggles: this.toggles
+    } : {
+      toggles: [{ noToggles: true }]
+    };
+  }
+  render() {
+    return <ComposedComponent {...this.props} toggles={this.context.toggles} />;
+  }
+};
+
+export { ToggleComponent };