create-subscription

packages/create-component-with-subscriptions/README.md

@@ -0,0 +1,81 @@
+# create-component-with-subscriptions
+
+Below is an example showing how the container can be used:
+
+```js
+// This is an example functional component that subscribes to some values.
+function ExampleComponent({
+  examplePassThroughProperty,
+  friendsList,
+  userProfile
+}) {
+  // The rendered output of this component is not very important.
+  // It just exists to show how the observed values are provided.
+  // Properties not related to subscriptions are passed through as-is,
+  // (e.g. examplePassThroughProperty).
+}
+
+// In the below example, "friendsList" mimics an RxJS BehaviorSubject,
+// and "userProfile" mimics an event dispatcher (like a DOM element).
+function getDataFor(subscribable, propertyName) {
+  switch (propertyName) {
+    case "friendsListSubject":
+      return subscribable.getValue();
+    case "userProfile":
+      return subscribable.value;
+    default:
+      throw Error(`Invalid subscribable, "${propertyName}", specified.`);
+  }
+}
+
+function subscribeTo(valueChangedCallback, subscribable, propertyName) {
+  switch (propertyName) {
+    case "friendsListSubject":
+      // Return the subscription in this case; it's necessary to unsubscribe.
+      return subscribable.subscribe(valueChangedCallback);
+    case "userProfile":
+      const onChange = () => valueChangedCallback(subscribable.value);
+      subscribable.addEventListener(onChange);
+      // Return the event handling callback, since it's required to unsubscribe.
+      return onChange;
+    default:
+      throw Error(`Invalid subscribable, "${propertyName}", specified.`);
+  }
+}
+
+function unsubscribeFrom(subscribable, propertyName, subscription) {
+  switch (propertyName) {
+    case "friendsListSubject":
+      // Unsubscribe using the subscription rather than the subscribable.
+      subscription.unsubscribe();
+    case "userProfile":
+      // In this case, 'subscription', is the event handler/function.
+      subscribable.removeEventListener(subscription);
+      break;
+    default:
+      throw Error(`Invalid subscribable, "${propertyName}", specified.`);
+  }
+}
+
+// Map incoming subscriptions property names (e.g. friendsListSubject)
+// to property names expected by our functional component (e.g. friendsList).
+const subscribablePropertiesMap = {
+  friendsListSubject: "friendsList",
+  userProfile: "userProfile"
+};
+
+// Decorate our functional component with a subscriber component.
+// This HOC will automatically manage subscriptions to the incoming props,
+// and map them to subscribed values to be passed to the inner component.
+// All other props will be passed through as-is.
+export default createSubscribable(
+  {
+    getDataFor,
+    subscribablePropertiesMap,
+    subscribeTo,
+    unsubscribeFrom
+  },
+  ExampleComponent
+);
+
+```

packages/create-component-with-subscriptions/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/createComponentWithSubscriptions';

packages/create-component-with-subscriptions/npm/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/create-component-with-subscriptions.production.min.js');
+} else {
+  module.exports = require('./cjs/create-component-with-subscriptions.development.js');
+}

packages/create-component-with-subscriptions/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "create-component-with-subscriptions",
+  "description": "HOC for creating async-safe React components with subscriptions",
+  "version": "0.0.1",
+  "repository": "facebook/react",
+  "files": ["LICENSE", "README.md", "index.js", "cjs/"],
+  "dependencies": {
+    "fbjs": "^0.8.16"
+  },
+  "peerDependencies": {
+    "react": "16.3.0-alpha.1"
+  }
+}