Expose useTracker hook and reimplement withTracker HOC on top of it

packages/react-meteor-data/README.md

@@ -18,6 +18,8 @@ npm install --save react
 
 ### Usage
 
+@TODO document `useTracker` hook
+
 This package exports a symbol `withTracker`, which you can use to wrap your components with data returned from Tracker reactive functions.
 
 ```js

packages/react-meteor-data/ReactMeteorData.jsx

@@ -123,7 +123,7 @@ class MeteorDataManager {
   }
 }
 
-export const ReactMeteorData = {
+export default ReactMeteorData = {
   componentWillMount() {
     this.data = {};
     this._meteorDataManager = new MeteorDataManager(this);
@@ -158,31 +158,3 @@ export const ReactMeteorData = {
     this._meteorDataManager.dispose();
   },
 };
-
-class ReactComponent extends React.Component {}
-Object.assign(ReactComponent.prototype, ReactMeteorData);
-class ReactPureComponent extends React.PureComponent {}
-Object.assign(ReactPureComponent.prototype, ReactMeteorData);
-
-export default function connect(options) {
-  let expandedOptions = options;
-  if (typeof options === 'function') {
-    expandedOptions = {
-      getMeteorData: options,
-    };
-  }
-
-  const { getMeteorData, pure = true } = expandedOptions;
-
-  const BaseComponent = pure ? ReactPureComponent : ReactComponent;
-  return (WrappedComponent) => (
-    class ReactMeteorDataComponent extends BaseComponent {
-      getMeteorData() {
-        return getMeteorData(this.props);
-      }
-      render() {
-        return <WrappedComponent {...this.props} {...this.data} />;
-      }
-    }
-  );
-}

packages/react-meteor-data/createContainer.jsx

@@ -4,7 +4,7 @@
 
 import { Meteor } from 'meteor/meteor';
 import React from 'react';
-import connect from './ReactMeteorData.jsx';
+import withTracker from './withTracker.jsx';
 
 let hasDisplayedWarning = false;
 
@@ -17,5 +17,5 @@ export default function createContainer(options, Component) {
     hasDisplayedWarning = true;
   }
 
-  return connect(options)(Component);
+  return withTracker(options)(Component);
 }

packages/react-meteor-data/react-meteor-data.jsx

@@ -5,5 +5,6 @@ checkNpmVersions({
 }, 'react-meteor-data');
 
 export { default as createContainer } from './createContainer.jsx';
-export { default as withTracker } from './ReactMeteorData.jsx';
-export { ReactMeteorData } from './ReactMeteorData.jsx';
+export { default as ReactMeteorData } from './ReactMeteorData.jsx';
+export { default as withTracker } from './withTracker.jsx';
+export { default as useTracker } from './useTracker.js';

packages/react-meteor-data/useTracker.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { Tracker } from 'meteor/tracker';
+import { Meteor } from 'meteor/meteor';
+
+let useTracker;
+
+if (Meteor.isServer) {
+  // When rendering on the server, we don't want to use the Tracker.
+  // We only do the first rendering on the server so we can get the data right away
+  useTracker = reactiveFn => reactiveFn();
+}
+else {
+  // @todo specify a default value for dependencies ? Omitting them can be very bad perf-wise.
+  useTracker = (reactiveFn, dependencies) => {
+    // Run the function once on mount without autorun or subscriptions,
+    // to get the initial return value.
+    // Note: maybe when React Suspense is officially available we could
+    // throw a Promise instead to skip the 1st render altogether ?
+    const [trackerData, setTrackerData] = useState(() => {
+      // We need to prevent subscriptions from running in that initial run.
+      const realSubscribe = Meteor.subscribe;
+      Meteor.subscribe = () => ({ stop: () => {}, ready: () => false });
+      const initialData = Tracker.nonreactive(reactiveFn);
+      Meteor.subscribe = realSubscribe;
+      return initialData;
+    });
+
+    useEffect(() => {
+      let computation;
+      // Use Tracker.nonreactive in case we are inside a Tracker Computation.
+      // This can happen if someone calls `ReactDOM.render` inside a Computation.
+      // In that case, we want to opt out of the normal behavior of nested
+      // Computations, where if the outer one is invalidated or stopped,
+      // it stops the inner one.
+      Tracker.nonreactive(() => {
+        computation = Tracker.autorun(() => {
+          const data = reactiveFn();
+          if (Package.mongo && Package.mongo.Mongo && data instanceof Package.mongo.Mongo.Cursor) {
+            console.warn(
+              'Warning: you are returning a Mongo cursor from useEffect. '
+              + 'This value will not be reactive. You probably want to call '
+              + '`.fetch()` on the cursor before returning it.'
+            );
+          }
+          setTrackerData(data);
+        });
+      });
+      return () => computation.stop();
+    }, dependencies);
+
+    return trackerData;
+  };
+}
+
+export default useTracker;

packages/react-meteor-data/withTracker.jsx

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import useTracker from './useTracker.js';
+
+export default function withTracker(options) {
+  return Component => {
+    const expandedOptions = typeof options === 'function' ? { getMeteorData: options } : options;
+    const { getMeteorData, pure = true } = expandedOptions;
+
+    function WithTracker(props) {
+      const data = useTracker(() => getMeteorData(props) || {}, [props]);
+
+      if (Package.mongo && Package.mongo.Mongo && data) {
+        Object.keys(data).forEach((key) => {
+          if (data[key] instanceof Package.mongo.Mongo.Cursor) {
+            console.warn(
+              'Warning: you are returning a Mongo cursor from withTracker. '
+              + 'This value will not be reactive. You probably want to call '
+              + '`.fetch()` on the cursor before returning it.'
+            );
+          }
+        });
+      }
+
+      return <Component {...{ ...props, ...data }} />;
+    }
+
+    return pure ? memo(WithTracker) : WithTracker;
+  };
+}