Fixes for feedback

- Enforce <Subscriber> is rendered as descendant of <Broadcast>
- Allow <Broadcast> to be rendered more than once

Author: mjackson

modules/__tests__/createBroadcast-test.js

@@ -23,17 +23,19 @@ describe("A <Subscriber>", () => {
 
   it("gets the initial broadcast value on the initial render", done => {
     const initialValue = "cupcakes"
-    const { Subscriber } = createBroadcast(initialValue)
+    const { Broadcast, Subscriber } = createBroadcast(initialValue)
 
     let actualValue
 
     ReactDOM.render(
-      <Subscriber
-        children={value => {
-          actualValue = value
-          return null
-        }}
-      />,
+      <Broadcast>
+        <Subscriber
+          children={value => {
+            actualValue = value
+            return null
+          }}
+        />
+      </Broadcast>,
       node,
       () => {
         expect(actualValue).toBe(initialValue)

modules/createBroadcast.js

@@ -1,26 +1,29 @@
 import React from "react"
 import PropTypes from "prop-types"
-import invariant from "invariant"
+import warning from "warning"
 
 function createBroadcast(initialValue) {
-  let subscribers = []
   let currentValue = initialValue
+  let subscribers = []
 
   const publish = value => {
     currentValue = value
-    subscribers.forEach(subscriber => subscriber(currentValue))
+    subscribers.forEach(s => s(currentValue))
   }
 
   const subscribe = subscriber => {
     subscribers.push(subscriber)
-    return () => (subscribers = subscribers.filter(item => item !== subscriber))
+
+    return () => {
+      subscribers = subscribers.filter(s => s !== subscriber)
+    }
   }
 
-  let broadcastInstance = null
+  const channel = Symbol()
 
   /**
    * A <Broadcast> is a container for a "value" that its <Subscriber>
-   * may subscribe to. A <Broadcast> may only be rendered once.
+   * may subscribe to.
    */
   class Broadcast extends React.Component {
     /**
@@ -43,16 +46,24 @@ function createBroadcast(initialValue) {
      */
     static initialValue = initialValue
 
-    componentDidMount() {
-      invariant(
-        broadcastInstance == null,
-        "You cannot render the same <Broadcast> twice! There must be only one source of truth. " +
-          "Instead of rendering another <Broadcast>, just change the `value` prop of the one " +
-          "you already rendered."
-      )
+    static contextTypes = {
+      broadcasts: PropTypes.object
+    }
 
-      broadcastInstance = this
+    static childContextTypes = {
+      broadcasts: PropTypes.object.isRequired
+    }
+
+    getChildContext() {
+      return {
+        broadcasts: {
+          ...this.context.broadcasts,
+          [channel]: true
+        }
+      }
+    }
 
+    componentDidMount() {
       if (this.props.value !== currentValue) {
         // TODO: Publish and warn about the double render
         // problem if there are existing subscribers? Or
@@ -66,12 +77,6 @@ function createBroadcast(initialValue) {
       }
     }
 
-    componentWillUnmount() {
-      if (broadcastInstance === this) {
-        broadcastInstance = null
-      }
-    }
-
     render() {
       return this.props.children
     }
@@ -82,24 +87,41 @@ function createBroadcast(initialValue) {
    * and calls its render prop with the result.
    */
   class Subscriber extends React.Component {
+    static contextTypes = {
+      broadcasts: PropTypes.object
+    }
+
     static propTypes = {
-      children: PropTypes.func
+      children: PropTypes.func,
+      quiet: PropTypes.bool
+    }
+
+    static defaultProps = {
+      quiet: false
     }
 
     state = {
       value: currentValue
     }
 
     componentDidMount() {
-      this.unsubscribe = subscribe(value => {
-        this.setState({ value })
-      })
+      const broadcasts = this.context.broadcasts
+      const inContext = broadcasts && broadcasts[channel]
+
+      warning(
+        inContext || this.props.quiet,
+        "<Subscriber> was rendered outside the context of its <Broadcast>"
+      )
+
+      if (inContext) {
+        this.unsubscribe = subscribe(value => {
+          this.setState({ value })
+        })
+      }
     }
 
     componentWillUnmount() {
-      if (this.unsubscribe) {
-        this.unsubscribe()
-      }
+      if (this.unsubscribe) this.unsubscribe()
     }
 
     render() {

package.json

@@ -24,8 +24,8 @@
     "react": ">=15 || ^16"
   },
   "dependencies": {
-    "invariant": "^2.2.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "warning": "^3.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.17.0",