feat: add support for mobx 6 (#124)

IjzerenHein · Dec 23, 2020 · c8b26bb · c8b26bb
1 parent 77f20d5
commit c8b26bb
Show file tree

Hide file tree

Showing 12 changed files with 573 additions and 511 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,13 +4,22 @@ Use Firestore in React with zero effort, using MobX 🤘
 
 ## [Unreleased]
 
+## [3.0.0] - 2020-12-23
+
+### Added
+
+- Add support for MobX 6! 🤘🤘🤘🤘🤘🤘
+
+### Removed
+
+- MobX 5 and 4 are no longer supported. Use `firestorter@2` instead.
+
 ## [2.0.1] - 2019-12-02
 
 ### Added
 
 - Added new `isLoaded` property for checking whether data/docs have been loaded initially
 
-
 ## [2.0.0] - 2019-11-07
 
 ### Added

diff --git a/README.md b/README.md
@@ -18,6 +18,14 @@
 * 🚀 Fast, only fetches and re-renders data when needed
 * 🤘 No clutter, no complex stores/providers/actions/reducers, just go
 
+The latest version is compatible with **MobX 6**
+
+```sh
+yarn add firestorter
+```
+
+> When using **MobX 5** or **4**, install the v2 version: `yarn add firestorter@2`
+
 **1. Initialize**
 
 ```js

diff --git a/docs/guides/Installation.md b/docs/guides/Installation.md
@@ -4,6 +4,9 @@ Install Firestorter and MobX:
 
     yarn add firestorter mobx mobx-react
 
+Or when still using MobX 5 or 4, install the v2 version:
+
+	yarn add firestorter@2
 
 ## Usage on the web
 
@@ -14,7 +17,7 @@ To use Firestorter on the web, also install the [Firebase JavaScript SDK](https:
 After that, initialize Firebase and Firestorter:
 
 ```js
-import * as firebase from 'firebase/app';
+import firebase from 'firebase';
 import 'firebase/firestore';
 import { initFirestorter } from 'firestorter';
 

diff --git a/examples/geoquery/package.json b/examples/geoquery/package.json
@@ -3,11 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^7.2.2",
-    "firestorter": "file:.yalc/firestorter",
+    "firebase": "^8.2.1",
+    "firestorter": "^3.0.0-rc.0",
     "google-map-react": "^1.1.5",
-    "mobx": "^5.14.2",
-    "mobx-react": "^6.1.4",
+    "mobx": "^6.0.4",
+    "mobx-react": "^7.0.5",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-scripts": "3.2.0"

diff --git a/examples/geoquery/src/App.js b/examples/geoquery/src/App.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import GoogleMapReact from 'google-map-react';
 import { observer } from 'mobx-react';
 import './App.css';
-import * as firebase from 'firebase/app';
+import firebase from 'firebase';
 import 'firebase/firestore';
 import {
-	initFirestorter,
-	GeoQuery,
-	flattenGeohashes,
-	decodeGeohash,
-	geoRegionToPoints
+  initFirestorter,
+  GeoQuery,
+  flattenGeohashes,
+  decodeGeohash,
+  geoRegionToPoints,
 } from 'firestorter';
 import firebaseConfig from './firebaseConfig';
 import MapRect from './MapRect';
@@ -19,109 +19,103 @@ firebase.initializeApp(firebaseConfig);
 initFirestorter({ firebase });
 
 const initProps = {
-	bootstrapURLKeys: {
-		key: 'AIzaSyDgDX7GD9b8h8JxEB-ANs9LjlRkXpYpS3U'
-	},
-	defaultCenter: {
-		lat: 51.6846154,
-		lng: 4.8086858
-	},
-	defaultZoom: 1
+  bootstrapURLKeys: {
+    key: 'AIzaSyDgDX7GD9b8h8JxEB-ANs9LjlRkXpYpS3U',
+  },
+  defaultCenter: {
+    lat: 51.6846154,
+    lng: 4.8086858,
+  },
+  defaultZoom: 1,
 };
 
 export default observer(
-	class App extends React.Component {
-		state = {
-			maps: null,
-			map: null,
-			bounds: null,
-			geoQuery: new GeoQuery('chocolateBars', {
-				//debug: true
-			})
-		};
+  class App extends React.Component {
+    state = {
+      maps: null,
+      map: null,
+      bounds: null,
+      geoQuery: new GeoQuery('chocolateBars', {
+        //debug: true
+      }),
+    };
 
-		onRegionChange = event => {
-			const { maps, geoQuery } = this.state;
-			if (!maps) return;
-			const { bounds, center } = event;
+    onRegionChange = (event) => {
+      const { maps, geoQuery } = this.state;
+      if (!maps) return;
+      const { bounds, center } = event;
 
-			// Calculate region
-			const span = new maps.LatLngBounds(bounds.sw, bounds.ne).toSpan();
-			const region = {
-				latitude: center.lat,
-				longitude: center.lng,
-				latitudeDelta: span.lat() * 0.1,
-				longitudeDelta: span.lng() * 0.1
-			};
-			const { northWest, southEast } = geoRegionToPoints(region);
+      // Calculate region
+      const span = new maps.LatLngBounds(bounds.sw, bounds.ne).toSpan();
+      const region = {
+        latitude: center.lat,
+        longitude: center.lng,
+        latitudeDelta: span.lat() * 0.1,
+        longitudeDelta: span.lng() * 0.1,
+      };
+      const { northWest, southEast } = geoRegionToPoints(region);
 
-			// Update query-bounds state
-			const newBounds = {
-				east: southEast.longitude,
-				west: northWest.longitude,
-				north: northWest.latitude,
-				south: southEast.latitude
-			};
-			this.setState({
-				bounds: newBounds
-			});
+      // Update query-bounds state
+      const newBounds = {
+        east: southEast.longitude,
+        west: northWest.longitude,
+        north: northWest.latitude,
+        south: southEast.latitude,
+      };
+      this.setState({
+        bounds: newBounds,
+      });
 
-			// Update geo-query
-			geoQuery.region = region;
-		};
+      // Update geo-query
+      geoQuery.region = region;
+    };
 
-		onGoogleApiLoaded = event => {
-			this.setState({
-				map: event.map,
-				maps: event.maps
-			});
-		};
+    onGoogleApiLoaded = (event) => {
+      this.setState({
+        map: event.map,
+        maps: event.maps,
+      });
+    };
 
-		render() {
-			const { bounds, map, maps, geoQuery } = this.state;
-			const { docs, geohashes } = geoQuery;
-			const flattenedGeohashes = flattenGeohashes(geohashes);
-			//console.log(geohashes);
-			return (
-				<div className="App">
-					<GoogleMapReact
-						{...initProps}
-						yesIWantToUseGoogleMapApiInternals
-						onGoogleApiLoaded={this.onGoogleApiLoaded}
-						onChange={this.onRegionChange}
-					>
-						<MapRect maps={maps} map={map} color="red" bounds={bounds} />
-						{flattenedGeohashes.map(geohash => {
-							const [sw, ne] = decodeGeohash(geohash);
-							const bounds = {
-								east: ne.longitude,
-								west: sw.longitude,
-								north: ne.latitude,
-								south: sw.latitude
-							};
-							return (
-								<MapRect
-									key={geohash}
-									maps={maps}
-									map={map}
-									bounds={bounds}
-									color="blue"
-									//label={geohash}
-									//labelColor="white"
-								/>
-							);
-						})}
-						{docs.map(doc => (
-							<MapMarker
-								key={doc.id}
-								maps={maps}
-								map={map}
-								location={doc.data.location}
-							/>
-						))}
-					</GoogleMapReact>
-				</div>
-			);
-		}
-	}
+    render() {
+      const { bounds, map, maps, geoQuery } = this.state;
+      const { docs, geohashes } = geoQuery;
+      const flattenedGeohashes = flattenGeohashes(geohashes);
+      //console.log(geohashes);
+      return (
+        <div className="App">
+          <GoogleMapReact
+            {...initProps}
+            yesIWantToUseGoogleMapApiInternals
+            onGoogleApiLoaded={this.onGoogleApiLoaded}
+            onChange={this.onRegionChange}>
+            <MapRect maps={maps} map={map} color="red" bounds={bounds} />
+            {flattenedGeohashes.map((geohash) => {
+              const [sw, ne] = decodeGeohash(geohash);
+              const bounds = {
+                east: ne.longitude,
+                west: sw.longitude,
+                north: ne.latitude,
+                south: sw.latitude,
+              };
+              return (
+                <MapRect
+                  key={geohash}
+                  maps={maps}
+                  map={map}
+                  bounds={bounds}
+                  color="blue"
+                  //label={geohash}
+                  //labelColor="white"
+                />
+              );
+            })}
+            {docs.map((doc) => (
+              <MapMarker key={doc.id} maps={maps} map={map} location={doc.data.location} />
+            ))}
+          </GoogleMapReact>
+        </div>
+      );
+    }
+  }
 );