Use createContext/Provider/Consumer naming

Author: mjackson

README.md

@@ -32,10 +32,10 @@ Then, use as you would anything else:
 
 ```js
 // using ES6 modules
-import { createBroadcast } from "react-broadcast"
+import { createContext } from "react-broadcast";
 
 // using CommonJS modules
-var createBroadcast = require("react-broadcast").createBroadcast
+var createContext = require("react-broadcast").createContext;
 ```
 
 The UMD build is also available on [unpkg](https://unpkg.com):
@@ -51,12 +51,12 @@ You can find the library on `window.ReactBroadcast`.
 The following is a contrived example, but illustrates the basic functionality we're after:
 
 ```js
-import React from "react"
-import { createBroadcast } from "react-broadcast"
+import React from "react";
+import { createContext } from "react-broadcast";
 
-const users = [{ name: "Michael Jackson" }, { name: "Ryan Florence" }]
+const users = [{ name: "Michael Jackson" }, { name: "Ryan Florence" }];
 
-const { Broadcast, Subscriber } = createBroadcast(users[0])
+const { Provider, Consumer } = createContext(users[0]);
 
 class UpdateBlocker extends React.Component {
   shouldComponentUpdate() {
@@ -66,35 +66,37 @@ class UpdateBlocker extends React.Component {
     // output will not change, but it makes it difficult for libraries
     // to communicate changes down the hierarchy that you don't really
     // know anything about.
-    return false
+    return false;
   }
 
   render() {
-    return this.props.children
+    return this.props.children;
   }
 }
 
 class App extends React.Component {
   state = {
-    currentUser: Broadcast.initialValue
-  }
+    currentUser: Provider.defaultValue
+  };
 
   componentDidMount() {
     // Randomly change the current user every 2 seconds.
     setInterval(() => {
-      const index = Math.floor(Math.random() * users.length)
-      this.setState({ currentUser: users[index] })
-    }, 2000)
+      const index = Math.floor(Math.random() * users.length);
+      this.setState({ currentUser: users[index] });
+    }, 2000);
   }
 
   render() {
     return (
-      <Broadcast value={this.state.currentUser}>
+      <Provider value={this.state.currentUser}>
         <UpdateBlocker>
-          <Subscriber>{currentUser => <p>The current user is {currentUser.name}</p>}</Subscriber>
+          <Consumer>
+            {currentUser => <p>The current user is {currentUser.name}</p>}
+          </Consumer>
         </UpdateBlocker>
-      </Broadcast>
-    )
+      </Provider>
+    );
   }
 }
 ```

modules/Broadcast.js

@@ -74,7 +74,7 @@ class Broadcast extends React.Component {
   componentWillMount() {
     deprecationWarning(
       "<Broadcast> is deprecated and will be removed in the next major release. " +
-        "Please use createBroadcast instead. See https://goo.gl/QAF37J for more info."
+        "Please use createContext instead. See https://goo.gl/QAF37J for more info."
     );
   }
 

modules/Subscriber.js

@@ -45,7 +45,7 @@ class Subscriber extends React.Component {
   componentWillMount() {
     deprecationWarning(
       "<Subscriber> is deprecated and will be removed in the next major release. " +
-        "Please use createBroadcast instead. See https://goo.gl/QAF37J for more info."
+        "Please use createContext instead. See https://goo.gl/QAF37J for more info."
     );
 
     const broadcast = this.getBroadcast();

modules/__tests__/createBroadcast-test.js renamed to modules/__tests__/createContext-test.js

@@ -1,49 +1,49 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { Simulate } from "react-dom/test-utils";
-import createBroadcast from "../createBroadcast";
+import createContext from "../createContext";
 
-describe("createBroadcast", () => {
-  it("creates a Broadcast component", () => {
-    const { Broadcast } = createBroadcast();
-    expect(typeof Broadcast).toBe("function");
+describe("createContext", () => {
+  it("creates a Provider component", () => {
+    const { Provider } = createContext();
+    expect(typeof Provider).toBe("function");
   });
 
-  it("creates a Subscriber component", () => {
-    const { Subscriber } = createBroadcast();
-    expect(typeof Subscriber).toBe("function");
+  it("creates a Consumer component", () => {
+    const { Consumer } = createContext();
+    expect(typeof Consumer).toBe("function");
   });
 });
 
-describe("A <Broadcast>", () => {
+describe("A <Provider>", () => {
   it("knows its default value", () => {
     const defaultValue = "bubblegum";
-    const { Broadcast } = createBroadcast(defaultValue);
-    expect(defaultValue).toEqual(Broadcast.defaultValue);
+    const { Provider } = createContext(defaultValue);
+    expect(defaultValue).toEqual(Provider.defaultValue);
   });
 });
 
-describe("A <Subscriber>", () => {
+describe("A <Consumer>", () => {
   let node;
   beforeEach(() => {
     node = document.createElement("div");
   });
 
   it("gets the initial broadcast value on the initial render", done => {
     const defaultValue = "cupcakes";
-    const { Broadcast, Subscriber } = createBroadcast(defaultValue);
+    const { Provider, Consumer } = createContext(defaultValue);
 
     let actualValue;
 
     ReactDOM.render(
-      <Broadcast>
-        <Subscriber
+      <Provider>
+        <Consumer
           children={value => {
             actualValue = value;
             return null;
           }}
         />
-      </Broadcast>,
+      </Provider>,
       node,
       () => {
         expect(actualValue).toBe(defaultValue);
@@ -53,22 +53,22 @@ describe("A <Subscriber>", () => {
   });
 
   it("gets the updated broadcast value as it changes", done => {
-    const { Broadcast, Subscriber } = createBroadcast("cupcakes");
+    const { Provider, Consumer } = createContext("cupcakes");
 
     class Parent extends React.Component {
       state = {
-        value: Broadcast.defaultValue
+        value: Provider.defaultValue
       };
 
       render() {
         return (
-          <Broadcast value={this.state.value}>
+          <Provider value={this.state.value}>
             <button
               onClick={() => this.setState({ value: "bubblegum" })}
               ref={node => (this.button = node)}
             />
             <Child />
-          </Broadcast>
+          </Provider>
         );
       }
     }
@@ -83,13 +83,13 @@ describe("A <Subscriber>", () => {
 
       render() {
         return (
-          <Subscriber
+          <Consumer
             children={value => {
               if (childDidRender) {
                 expect(value).toBe("bubblegum");
                 done();
               } else {
-                expect(value).toBe(Broadcast.defaultValue);
+                expect(value).toBe(Provider.defaultValue);
               }
 
               childDidRender = true;
@@ -106,24 +106,24 @@ describe("A <Subscriber>", () => {
     });
   });
 
-  describe("under a <Broadcast> with a value different from the default", () => {
+  describe("under a <Provider> with a value different from the default", () => {
     it("gets the broadcast value on the initial render", () => {
       const defaultValue = "bubblegum";
-      const { Broadcast, Subscriber } = createBroadcast(defaultValue);
+      const { Provider, Consumer } = createContext(defaultValue);
 
       const node = document.createElement("div");
 
       let actualValue;
 
       ReactDOM.render(
-        <Broadcast value="cupcakes">
-          <Subscriber
+        <Provider value="cupcakes">
+          <Consumer
             children={value => {
               actualValue = value;
               return null;
             }}
           />
-        </Broadcast>,
+        </Provider>,
         node,
         () => {
           expect(actualValue).toEqual("cupcakes");

modules/createBroadcast.js renamed to modules/createContext.js

@@ -20,33 +20,33 @@ function getPropType(value) {
   return valueTypes[type] || PropTypes.any;
 }
 
-function createBroadcast(defaultValue) {
+function createContext(defaultValue) {
   const valueType = getPropType(defaultValue);
   const channel = Symbol();
 
   /**
-   * A <Broadcast> is a container for a "value" that its <Subscriber>
+   * A <Provider> is a container for a "value" that its <Consumer>
    * may subscribe to.
    */
-  class Broadcast extends React.Component {
+  class Provider extends React.Component {
     /**
      * For convenience when setting up a component that tracks this
-     * <Broadcast>'s value in state.
+     * <Provider>'s value in state.
      *
      *     const {
-     *       Broadcast,
-     *       Subscriber
-     *     } = createBroadcast("default value")
+     *       Provider,
+     *       Consumer
+     *     } = createContext("default value")
      *
      *     class MyComponent {
      *       state = {
-     *         broadcastValue: Broadcast.defaultValue
+     *         broadcastValue: Provider.defaultValue
      *       }
      *
      *       // ...
      *
      *       render() {
-     *         return <Broadcast value={this.state.broadcastValue}/>
+     *         return <Provider value={this.state.broadcastValue}/>
      *       }
      *     }
      */
@@ -107,10 +107,10 @@ function createBroadcast(defaultValue) {
   }
 
   /**
-   * A <Subscriber> sets state whenever its <Broadcast value> changes
+   * A <Consumer> sets state whenever its <Provider value> changes
    * and calls its render prop with the result.
    */
-  class Subscriber extends React.Component {
+  class Consumer extends React.Component {
     static contextTypes = {
       broadcasts: PropTypes.object
     };
@@ -138,7 +138,7 @@ function createBroadcast(defaultValue) {
       } else {
         warning(
           this.props.quiet,
-          "<Subscriber> was rendered outside the context of its <Broadcast>"
+          "<Consumer> was rendered outside the context of its <Provider>"
         );
       }
     }
@@ -154,9 +154,9 @@ function createBroadcast(defaultValue) {
   }
 
   return {
-    Broadcast,
-    Subscriber
+    Provider,
+    Consumer
   };
 }
 
-export default createBroadcast;
+export default createContext;

modules/index.js

@@ -1,4 +1,4 @@
 export Broadcast from "./Broadcast";
 export Subscriber from "./Subscriber";
 
-export createBroadcast from "./createBroadcast";
+export createContext from "./createContext";