[WIP] New hooks

packages/react-accounts/README.md

@@ -0,0 +1,4 @@
+meteor/react-accounts
+=====================
+
+A couple of simple hooks for accessing Meteor Accounts state.

packages/react-accounts/package.js

@@ -0,0 +1,17 @@
+/* global Package */
+
+Package.describe({
+  name: 'react-accounts',
+  summary: 'React hook for reactively tracking Meteor data',
+  version: '0.9.0',
+  documentation: 'README.md',
+  git: 'https://github.com/meteor/react-packages',
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom('1.10');
+  api.use('tracker');
+  api.use('typescript');
+
+  api.mainModule('react-accounts.ts', ['client', 'server'], { lazy: true });
+});

packages/react-accounts/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "meteor-react-accounts",
+  "scripts": {
+    "make-types": "npx typescript *.ts --declaration --emitDeclarationOnly --outDir types"
+  },
+  "dependencies": {
+    "@testing-library/react": "^10.0.2",
+    "@types/meteor": "^1.4.42",
+    "@types/react": "^16.9.34",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-test-renderer": "16.13.1",
+    "typescript": "^4.0.3"
+  }
+}

packages/react-accounts/react-accounts.ts

@@ -0,0 +1,29 @@
+import { Meteor } from 'meteor/meteor'
+import { Tracker } from 'meteor/tracker'
+import { useState, useEffect } from 'react'
+
+export const useUserId = () => {
+  const [userId, setUserId] = useState(Meteor.userId())
+  useEffect(() => {
+    const computation = Tracker.autorun(() => {
+      setUserId(Meteor.userId())
+    })
+    return () => {
+      computation.stop()
+    }
+  }, [])
+  return userId
+}
+
+export const useUser = () => {
+  const [user, setUser] = useState(Meteor.user())
+  useEffect(() => {
+    const computation = Tracker.autorun(() => {
+      setUser(Meteor.user())
+    })
+    return () => {
+      computation.stop()
+    }
+  }, [])
+  return user
+}

packages/react-accounts/types/react-accounts.d.ts

@@ -0,0 +1,3 @@
+import { Meteor } from 'meteor/meteor';
+export declare const useUserId: () => string;
+export declare const useUser: () => Meteor.User;

packages/react-meteor-data/useTracker.ts

@@ -39,13 +39,12 @@ type ComputationHandler = (c: Tracker.Computation) => () => void | void;
 type TrackerRefs = {
   reactiveFn: ReactiveFn;
   computationHandler?: ComputationHandler;
-  deps?: Array<any>;
+  deps?: React.DependencyList;
   computation?: Tracker.Computation;
   isMounted: boolean;
   disposeId?: ReturnType<typeof setTimeout>;
   trackerData: any;
   computationCleanup?: () => void;
-  trackerCount?: number
 }
 
 // The follow functions were hoisted out of the closure to reduce allocations.
@@ -133,7 +132,7 @@ const tracked = (c: Tracker.Computation, refs: TrackerRefs, forceUpdate: Functio
 };
 
 interface useTrackerSignature {
-  (reactiveFn: ReactiveFn, deps?: null | Array<any>, computationHandler?: ComputationHandler): any
+  (reactiveFn: ReactiveFn, deps?: null | React.DependencyList, computationHandler?: ComputationHandler): any
 }
 
 const useTrackerNoDeps: useTrackerSignature = (reactiveFn, deps = null, computationHandler) => {
@@ -184,7 +183,7 @@ const useTrackerNoDeps: useTrackerSignature = (reactiveFn, deps = null, computat
   return refs.trackerData;
 }
 
-const useTrackerWithDeps: useTrackerSignature = (reactiveFn, deps: Array<any>, computationHandler) => {
+const useTrackerWithDeps: useTrackerSignature = (reactiveFn, deps: React.DependencyList, computationHandler) => {
   const { current: refs } = useRef<TrackerRefs>({
     reactiveFn,
     isMounted: false,

packages/react-meteor-state/README.md

@@ -0,0 +1,4 @@
+meteor/react-meteor-state
+=========================
+
+A state hook, with an API similar to React's useState, which provides data persistence between page reloads using hte Meteor reload package.