Migration guide for v4 (#351)

* Migration guide for v4

* headers fix in docs.

Author: fahad19

site/content/docs/migration/v3.md

@@ -10,9 +10,9 @@ sidebarPartial: docsSidebar
 - [RxJS imports](#rxjs-imports)
 - [Lodash imports](#lodash-imports)
 - [Webpack builds](#webpack-builds)
-- [`frint-store`](#frint-store)
-- [`frint-model`](#frint-model)
-- [`frint-compat`](#frint-compat)
+- [frint-store](#frint-store)
+- [frint-model](#frint-model)
+- [frint-compat](#frint-compat)
 
 <!-- /MarkdownTOC -->
 
@@ -33,6 +33,7 @@ const todos$ = store.getState$()
 
 todos$.subscribe(todos => console.log(todos));
 ```
+
 ### After
 
 ```js
@@ -79,7 +80,7 @@ import _ from 'lodash';
 _.isPlainObject({});
 ```
 
-## After
+### After
 
 ```js
 import isPlainObject from 'lodash/isPlainObject';

site/content/docs/migration/v4.md

@@ -0,0 +1,53 @@
+---
+title: Migrating from v3.x to v4.x
+sidebarPartial: docsSidebar
+---
+
+# Migrating from v3.x to v4.x
+
+FrintJS itself doesn't have any breaking changes in this release. The only reason for a major semver is because of RxJS v5.5+ requirement.
+
+<!-- MarkdownTOC depth=1 autolink=true bracket=round -->
+
+- [RxJS](#rxjs)
+
+<!-- /MarkdownTOC -->
+
+## RxJS
+
+We now use [lettable operators](https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md) since RxJS v5.5.0, which has resulted into smaller bundle sizes without requiring any stage-1 or below language features.
+
+### Before
+
+```js
+import { of } from 'rxjs/observable/of';
+import { filter } from 'rxjs/operator/filter'; // singular `operator`
+import { map } from 'rxjs/operator/map'; // singular `operator`
+
+const numbers$ = of(1, 2, 3)
+  ::filter(x => x % 2 === 0)
+  ::map(x => x * 10);
+
+numbers$.subscribe(x => console.log(x));
+// outputs: 20
+```
+
+The code above is written using [bind-operator](https://github.com/tc39/proposal-bind-operator).
+
+### After
+
+```js
+import { of } from 'rxjs/observable/of';
+import { filter } from 'rxjs/operators/filter'; // plural `operators`
+import { map } from 'rxjs/operators/map'; // plural `operators`
+
+const numbers$ = of(1, 2, 3).pipe(
+  filter(x => x % 2 === 0),
+  map(x => x * 10)
+);
+
+numbers$.subscribe(x => console.log(x));
+// outputs: 20
+```
+
+Instead of using bind-operator, we are using the new `.pipe()` method that all Observables now expose in their instances.

site/partials/docsSidebar.html

@@ -37,6 +37,7 @@
       <li><a href="/docs/migration/v1">Migrating to v1.x</a></li>
       <li><a href="/docs/migration/v2">Migrating to v2.x</a></li>
       <li><a href="/docs/migration/v3">Migrating to v3.x</a></li>
+      <li><a href="/docs/migration/v4">Migrating to v4.x</a></li>
     </ul>
 
     <p class="menu-label">