Improve local dev experience (#152)

* make sample-simple depend on local reactfire instead of published version

* add a Prettier formatter pre-commit hook

* run prettier on the whole project

* Clarify local development instructions

Author: jhuleatt

README.md

@@ -90,10 +90,10 @@ render(<App />, document.getElementById('root'));
 
 ### For development
 
-1. `yarn install`
-1. `cd` into the _reactfire/reactfire_ directory. run `yarn run watch`.
-1. In a new terminal, `cd` into the _reactfire/sample-simple_ directory. run `yarn start`.
-1. Head over to https://localhost:3000 to see the running sample
+1. At the project root, run `yarn install`
+1. `cd` into the _reactfire_ directory. Run `yarn` and `yarn watch`.
+1. In a new terminal, `cd` into the _reactfire/sample-simple_ directory. run `yarn` and `yarn start`.
+1. Head over to https://localhost:3000 to see the running sample! If you edit the reactfire source, the sample will reload.
 
 ### Testing
 

package.json

@@ -5,5 +5,15 @@
     "reactfire/pub/reactfire",
     "sample-simple",
     "sample-complex"
-  ]
+  ],
+  "devDependencies": {
+    "husky": "^3.0.8",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  }
 }

reactfire/firestore/firestore.test.tsx

@@ -9,7 +9,7 @@ import {
   useFirestoreCollection,
   FirebaseAppProvider,
   useFirestoreCollectionData,
-  useFirestoreDocData,
+  useFirestoreDocData
 } from '..';
 import { firestore } from 'firebase/app';
 
@@ -21,7 +21,7 @@ describe('Firestore', () => {
       projectId: '12345',
       databaseName: 'my-database',
       auth: { uid: 'alice' }
-    }) as import('firebase').app.App; 
+    }) as import('firebase').app.App;
     // TODO(davideast): Wait for rc and analytics to get included in test app
   });
 
@@ -73,7 +73,7 @@ describe('Firestore', () => {
       expect(getByTestId('readSuccess')).toContainHTML(mockData.a);
     });
   });
-  
+
   describe('useFirestoreDocData', () => {
     it('can get a Firestore document [TEST REQUIRES EMULATOR]', async () => {
       const mockData = { a: 'hello' };
@@ -89,11 +89,7 @@ describe('Firestore', () => {
       const ReadFirestoreDoc = () => {
         const data = useFirestoreDocData<any>(ref, { idField: 'id' });
 
-        return (
-          <h1 data-testid={data.id}>
-            {data.a}
-          </h1>
-        );
+        return <h1 data-testid={data.id}>{data.a}</h1>;
       };
       const { getByTestId } = render(
         <FirebaseAppProvider firebase={app}>
@@ -148,7 +144,7 @@ describe('Firestore', () => {
       expect(getAllByTestId('listItem').length).toEqual(2);
     });
   });
-  
+
   // THIS TEST CAUSES A REACT `act` WARNING
   // IT WILL BE FIXED IN REACT 16.9
   // More info here: https://github.com/testing-library/react-testing-library/issues/281
@@ -188,5 +184,4 @@ describe('Firestore', () => {
       expect(getAllByTestId('listItem').length).toEqual(2);
     });
   });
-
 });

reactfire/firestore/index.tsx

@@ -1,5 +1,10 @@
 import { firestore } from 'firebase/app';
-import { doc, collectionData, fromCollectionRef, docData } from 'rxfire/firestore';
+import {
+  doc,
+  collectionData,
+  fromCollectionRef,
+  docData
+} from 'rxfire/firestore';
 import { ReactFireOptions, useObservable } from '..';
 
 /**

reactfire/package.json

@@ -10,8 +10,9 @@
     "test-dev": "jest --verbose --watch",
     "emulator": "firebase emulators:start --only firestore",
     "test": "firebase emulators:exec --only firestore \"jest --no-cache --verbose --detectOpenHandles --forceExit\"",
-    "watch": "tsc --watch",
-    "build": "rm -rf pub && tsc && cp package.pub.json pub/reactfire/package.json && cp ../README.md pub/reactfire/README.md && cp ../LICENSE pub/reactfire/LICENSE"
+    "copy-package-json": "cp package.pub.json pub/reactfire/package.json",
+    "watch": "yarn build && tsc --watch",
+    "build": "rm -rf pub && tsc && yarn copy-package-json && cp ../README.md pub/reactfire/README.md && cp ../LICENSE pub/reactfire/LICENSE"
   },
   "repository": {
     "type": "git",

sample-simple/package.json

@@ -9,7 +9,7 @@
     "react-dom": "^16.8.6",
     "react-firebaseui": "^3.1.2",
     "react-scripts": "3.0.1",
-    "reactfire": "^2.0.0-alpha.2"
+    "reactfire": "2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

sample-simple/src/Firestore.js

@@ -78,7 +78,7 @@ const List = props => {
           <li key={animal.id}>
             {animal.commonName}{' '}
             <button onClick={() => removeAnimal(animal.id)}>X</button>
-        </li>
+          </li>
         ))}
       </ul>
     </>