Implement withPerformanceLoggerContext

Summary:
This function returns a HOC that passes `scopedPerformanceLogger` as a prop to the wrapped component. That HOC
can be used whenever we can't declare `static contextType` as `PerformanceLoggerContext` on a component,
for example because React supports only one React Context per component.

Reviewed By: sahrens

Differential Revision: D14385560

fbshipit-source-id: 41971b4bf499f336c34b9220a3ee97c4ed89498d

Libraries/Utilities/PerformanceLoggerContext.js

@@ -14,7 +14,13 @@ import * as React from 'react';
 import GlobalPerformanceLogger from 'GlobalPerformanceLogger';
 import type {IPerformanceLogger} from 'createPerformanceLogger';
 
+/**
+ * This is a React Context that provides a scoped instance of IPerformanceLogger.
+ * We wrap every <AppContainer /> with a Provider for this context so the logger
+ * should be available in every component.
+ * See React docs about using Context: https://reactjs.org/docs/context.html
+ */
 const PerformanceLoggerContext: React.Context<IPerformanceLogger> = React.createContext(
   GlobalPerformanceLogger,
 );
-export default PerformanceLoggerContext;
+module.exports = PerformanceLoggerContext;

Libraries/Utilities/withPerformanceLoggerContext.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const React = require('React');
+const PerformanceLoggerContext = require('PerformanceLoggerContext');
+import type {IPerformanceLogger} from 'createPerformanceLogger';
+
+export type PerformanceLoggerContextProps = $Exact<PerformanceLoggerContextConfig>;
+
+type PerformanceLoggerContextConfig = {
+  +scopedPerformanceLogger: IPerformanceLogger,
+};
+
+/**
+ * If you already have one React Context on your component, you can't use
+ * PerformanceLoggerContext without a consumer for it. This function helps to
+ * do that by providing a HOC. Here's how to use it:
+ * 1) Spread PerformanceLoggerContextProps into your component's Props.
+ * 2) Call this function with Props and DefaultProps of your component.
+ 3 3) Use the returned HOC instead of your component.
+ */
+function withPerformanceLoggerContext<Config: PerformanceLoggerContextConfig>(
+  Component: React.AbstractComponent<Config>,
+): React.AbstractComponent<$Diff<Config, PerformanceLoggerContextConfig>> {
+  return class WrappedComponent extends React.Component<
+    $Diff<Config, PerformanceLoggerContextConfig>,
+  > {
+    render() {
+      return (
+        <PerformanceLoggerContext.Consumer>
+          {scopedPerformanceLogger => (
+            <Component
+              {...this.props}
+              scopedPerformanceLogger={scopedPerformanceLogger}
+            />
+          )}
+        </PerformanceLoggerContext.Consumer>
+      );
+    }
+  };
+}
+
+module.exports = withPerformanceLoggerContext;