Import RxJS and Lodash modules individually (#316)

* frint: import RxJS modules individually.

* import RxJS modules individually.

* make: command for quickly listing all `rxjs/*` imports in source across all packages.

* import lodash functions individually.

* frint-config: initial commit.

* frint-config: list in docs.

* internally use `frint-config` for generating dists.

* eslint: fail the build for any full import of `rxjs` or `lodash`.

* frint-store: update docs about epics not providing all RxJS operators by default.

* eslint: do not allow extending RxJS modules on the fly.

Author: fahad19

.eslintrc

@@ -4,6 +4,13 @@
   ],
   "parser": "babel-eslint",
   "rules": {
-    "no-underscore-dangle": 0
+    "no-underscore-dangle": 0,
+    "no-restricted-imports": ["error", {
+      "paths": [
+        "lodash",
+        "rxjs",
+        "rxjs/add/*"
+      ]
+    }]
   }
 }

Makefile

@@ -94,3 +94,16 @@ site-publish-only:
 	(cd ./_site && git add .)
 	(cd ./_site && git commit -am 'update site')
 	(cd ./_site && git push [email protected]:Travix-International/frint gh-pages --force)
+
+##
+# Usage stats
+#
+define list_usage_in_source
+	find ./packages -iname "*.js" | grep "/src/" | grep -v -e ".spec.js" -e "/node_modules/" | xargs cat | grep $(1) | sort -u
+endef
+
+list-usage-rxjs:
+	@$(call list_usage_in_source,'rxjs/')
+
+list-usage-lodash:
+	@$(call list_usage_in_source,'lodash/')

README.md

@@ -48,7 +48,7 @@ The framework is a collection of these packages, which can be composed together
 | [frint-store]              | [![frint-store-status]][frint-store-package]                           | State management with reactive stores |
 | [frint-data]               | [![frint-data-status]][frint-data-package]                             | Reactive data modelling |
 | [frint-react]              | [![frint-react-status]][frint-react-package]                           | React.js integration |
-| [frint-react-server]       | [![frint-react-server-status]][frint-react-server-package]             | Server-rendering of Apps |
+| [frint-react-server]       | [![frint-react-server-status]][frint-react-server-package]             | Server-side rendering of Apps |
 | [frint-router]             | [![frint-router-status]][frint-router-package]                         | Router services for building Single Page Applications |
 | [frint-router-react]       | [![frint-router-react-status]][frint-router-react-package]             | React components for building SPAs |
 | [frint-cli]                | [![frint-cli-status]][frint-cli-package]                               | CLI runner |
@@ -57,6 +57,7 @@ The framework is a collection of these packages, which can be composed together
 | [frint-component-utils]    | [![frint-component-utils-status]][frint-component-utils-package]       | Utils for reactive Components |
 | [frint-component-handlers] | [![frint-component-handlers-status]][frint-component-handlers-package] | Handlers for integrating with other rendering libraries |
 | [frint-test-utils]         | [![frint-test-utils-status]][frint-test-utils-package]                 | Internally used test utilities |
+| [frint-config]             | [![frint-config-status]][frint-config-package]                         | Common config for your Apps |
 
 [frint]: https://frint.js.org/docs/packages/frint
 [frint-store]: https://frint.js.org/docs/packages/frint-store
@@ -71,6 +72,7 @@ The framework is a collection of these packages, which can be composed together
 [frint-component-utils]: https://frint.js.org/docs/packages/frint-component-utils
 [frint-component-handlers]: https://frint.js.org/docs/packages/frint-component-handlers
 [frint-test-utils]: https://frint.js.org/docs/packages/frint-test-utils
+[frint-config]: https://frint.js.org/docs/packages/frint-config
 
 [frint-status]: https://img.shields.io/npm/v/frint.svg
 [frint-store-status]: https://img.shields.io/npm/v/frint-store.svg
@@ -85,6 +87,7 @@ The framework is a collection of these packages, which can be composed together
 [frint-component-utils-status]: https://img.shields.io/npm/v/frint-component-utils.svg
 [frint-component-handlers-status]: https://img.shields.io/npm/v/frint-component-handlers.svg
 [frint-test-utils-status]: https://img.shields.io/npm/v/frint-test-utils.svg
+[frint-config-status]: https://img.shields.io/npm/v/frint-config.svg
 
 [frint-package]: https://npmjs.com/package/frint
 [frint-store-package]: https://npmjs.com/package/frint-store
@@ -99,6 +102,7 @@ The framework is a collection of these packages, which can be composed together
 [frint-component-utils-package]: https://npmjs.com/package/frint-component-utils
 [frint-component-handlers-package]: https://npmjs.com/package/frint-component-handlers
 [frint-test-utils-package]: https://npmjs.com/package/frint-test-utils
+[frint-config-package]: https://npmjs.com/package/frint-config
 
 ## Community projects
 

packages/frint-cli/commands/init.js

@@ -53,7 +53,7 @@ module.exports = createApp({
 
           deps.console.log('Initializing...');
 
-          mkdirp(dir, function (error) {
+          mkdirp(dir, function mkdirpCallback(error) {
             if (error) {
               deps.console.error(error);
               return;

packages/frint-cli/root/providers.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const _ = require('lodash');
+const clone = require('lodash/clone');
 const argv = require('yargs').argv;
 
 module.exports = [
@@ -29,7 +29,7 @@ module.exports = [
   {
     name: 'params',
     useFactory: function useFactory() {
-      const clonedArgv = _.clone(argv);
+      const clonedArgv = clone(argv);
       clonedArgv._.shift();
 
       return clonedArgv;

packages/frint-compat/package.json

@@ -29,7 +29,8 @@
   ],
   "dependencies": {},
   "devDependencies": {
-    "cross-env": "^5.0.5"
+    "cross-env": "^5.0.5",
+    "frint-config": "^2.8.1"
   },
   "bugs": {
     "url": "https://github.com/Travix-International/frint/issues"

packages/frint-compat/webpack.config.js

@@ -1,4 +1,5 @@
 var webpack = require('webpack');
+var externals = require('frint-config').externals;
 
 var minify = process.env.DIST_MIN;
 var plugins = !minify
@@ -23,7 +24,7 @@ module.exports = {
     libraryTarget: 'this',
     library: 'FrintCompat'
   },
-  externals: {
+  externals: Object.assign({}, {
     'frint': 'Frint',
     'frint-model': 'FrintModel',
     'frint-react': 'FrintReact',
@@ -33,7 +34,7 @@ module.exports = {
     'react': 'React',
     'react-dom': 'ReactDOM',
     'rxjs': 'Rx',
-  },
+  }, externals),
   target: 'web',
   plugins: plugins,
   module: {

packages/frint-component-handlers/package.json

@@ -34,7 +34,8 @@
   "devDependencies": {
     "cross-env": "^5.0.5",
     "frint": "^2.8.1",
-    "frint-component-utils": "^2.8.1"
+    "frint-component-utils": "^2.8.1",
+    "frint-config": "^2.8.1"
   },
   "bugs": {
     "url": "https://github.com/Travix-International/frint/issues"

packages/frint-component-handlers/src/ObserveHandler.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, func-names */
 /* global describe, it */
 import { expect } from 'chai';
-import { Observable } from 'rxjs';
+import { of as of$ } from 'rxjs/observable/of';
 
 import { composeHandlers } from 'frint-component-utils';
 import ObserveHandler from './ObserveHandler';
@@ -31,7 +31,7 @@ describe('frint-component-handlers › ObserveHandler', function () {
       ObserveHandler,
       {
         getProps$: function (a) {
-          return Observable.of({
+          return of$({
             appName: a.getName(),
           });
         },

packages/frint-component-handlers/src/RegionHandler.js

@@ -1,6 +1,7 @@
 /* global window */
 /* eslint-disable no-console */
-import _ from 'lodash';
+import isEqual from 'lodash/isEqual';
+import zipWith from 'lodash/zipWith';
 
 export default {
   getInitialData() {
@@ -95,13 +96,13 @@ export default {
     });
   },
   shouldUpdate(nextProps, nextData) {
-    let shouldUpdate = !_.isEqual(this.getProps(), nextProps);
+    let shouldUpdate = !isEqual(this.getProps(), nextProps);
 
     if (!shouldUpdate) {
       const { listForRendering } = nextData;
       shouldUpdate = shouldUpdate || this.getData('listForRendering').length !== listForRendering.length;
       shouldUpdate = shouldUpdate ||
-        _.zipWith(this.getData('listForRendering'), listForRendering, (a, b) => a.name === b.name)
+        zipWith(this.getData('listForRendering'), listForRendering, (a, b) => a.name === b.name)
           .some(value => !value);
     }