redux-first-routing - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

lib/actions.js

@@ -1,55 +0,33 @@
-'use strict';
+import { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD, LOCATION_CHANGE } from './constants';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+export const push = href => ({
+  type: PUSH,
+  payload: href
 });
-exports.locationChange = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = undefined;
 
-var _constants = require('./constants');
+export const replace = href => ({
+  type: REPLACE,
+  payload: href
+});
 
-var push = exports.push = function push(href) {
-  return {
-    type: _constants.PUSH,
-    payload: href
-  };
-};
+export const go = index => ({
+  type: GO,
+  payload: index
+});
 
-var replace = exports.replace = function replace(href) {
-  return {
-    type: _constants.REPLACE,
-    payload: href
-  };
-};
+export const goBack = () => ({
+  type: GO_BACK
+});
 
-var go = exports.go = function go(index) {
-  return {
-    type: _constants.GO,
-    payload: index
-  };
-};
+export const goForward = () => ({
+  type: GO_FORWARD
+});
 
-var goBack = exports.goBack = function goBack() {
-  return {
-    type: _constants.GO_BACK
-  };
-};
-
-var goForward = exports.goForward = function goForward() {
-  return {
-    type: _constants.GO_FORWARD
-  };
-};
-
-var locationChange = exports.locationChange = function locationChange(_ref) {
-  var pathname = _ref.pathname,
-      search = _ref.search,
-      hash = _ref.hash;
-  return {
-    type: _constants.LOCATION_CHANGE,
-    payload: {
-      pathname: pathname,
-      search: search,
-      hash: hash
-    }
-  };
-};
+export const locationChange = ({ pathname, search, hash }) => ({
+  type: LOCATION_CHANGE,
+  payload: {
+    pathname,
+    search,
+    hash
+  }
+});

lib/constants.js

@@ -1,11 +0,6 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var PUSH = exports.PUSH = 'ROUTER/PUSH';
-var REPLACE = exports.REPLACE = 'ROUTER/REPLACE';
-var GO = exports.GO = 'ROUTER/GO';
-var GO_BACK = exports.GO_BACK = 'ROUTER/GO_BACK';
-var GO_FORWARD = exports.GO_FORWARD = 'ROUTER/GO_FORWARD';
-var LOCATION_CHANGE = exports.LOCATION_CHANGE = 'ROUTER/LOCATION_CHANGE';
+export const PUSH = 'ROUTER/PUSH';
+export const REPLACE = 'ROUTER/REPLACE';
+export const GO = 'ROUTER/GO';
+export const GO_BACK = 'ROUTER/GO_BACK';
+export const GO_FORWARD = 'ROUTER/GO_FORWARD';
+export const LOCATION_CHANGE = 'ROUTER/LOCATION_CHANGE';

lib/index.js

@@ -1,119 +0,9 @@
-'use strict';
+// History API
+export { createBrowserHistory } from 'history/createBrowserHistory';
+export { startListener } from './listener';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createBrowserHistory = require('history/createBrowserHistory');
-
-Object.defineProperty(exports, 'createBrowserHistory', {
-  enumerable: true,
-  get: function get() {
-    return _createBrowserHistory.createBrowserHistory;
-  }
-});
-
-var _listener = require('./listener');
-
-Object.defineProperty(exports, 'startListener', {
-  enumerable: true,
-  get: function get() {
-    return _listener.startListener;
-  }
-});
-
-var _constants = require('./constants');
-
-Object.defineProperty(exports, 'PUSH', {
-  enumerable: true,
-  get: function get() {
-    return _constants.PUSH;
-  }
-});
-Object.defineProperty(exports, 'REPLACE', {
-  enumerable: true,
-  get: function get() {
-    return _constants.REPLACE;
-  }
-});
-Object.defineProperty(exports, 'GO', {
-  enumerable: true,
-  get: function get() {
-    return _constants.GO;
-  }
-});
-Object.defineProperty(exports, 'GO_BACK', {
-  enumerable: true,
-  get: function get() {
-    return _constants.GO_BACK;
-  }
-});
-Object.defineProperty(exports, 'GO_FORWARD', {
-  enumerable: true,
-  get: function get() {
-    return _constants.GO_FORWARD;
-  }
-});
-Object.defineProperty(exports, 'LOCATION_CHANGE', {
-  enumerable: true,
-  get: function get() {
-    return _constants.LOCATION_CHANGE;
-  }
-});
-
-var _actions = require('./actions');
-
-Object.defineProperty(exports, 'push', {
-  enumerable: true,
-  get: function get() {
-    return _actions.push;
-  }
-});
-Object.defineProperty(exports, 'replace', {
-  enumerable: true,
-  get: function get() {
-    return _actions.replace;
-  }
-});
-Object.defineProperty(exports, 'go', {
-  enumerable: true,
-  get: function get() {
-    return _actions.go;
-  }
-});
-Object.defineProperty(exports, 'goBack', {
-  enumerable: true,
-  get: function get() {
-    return _actions.goBack;
-  }
-});
-Object.defineProperty(exports, 'goForward', {
-  enumerable: true,
-  get: function get() {
-    return _actions.goForward;
-  }
-});
-Object.defineProperty(exports, 'locationChange', {
-  enumerable: true,
-  get: function get() {
-    return _actions.locationChange;
-  }
-});
-
-var _middleware = require('./middleware');
-
-Object.defineProperty(exports, 'routerMiddleware', {
-  enumerable: true,
-  get: function get() {
-    return _middleware.routerMiddleware;
-  }
-});
-
-var _reducer = require('./reducer');
-
-Object.defineProperty(exports, 'routerReducer', {
-  enumerable: true,
-  get: function get() {
-    return _reducer.routerReducer;
-  }
-});
+// Redux API
+export { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD, LOCATION_CHANGE } from './constants';
+export { push, replace, go, goBack, goForward, locationChange } from './actions';
+export { routerMiddleware } from './middleware';
+export { routerReducer } from './reducer';

lib/listener.js

@@ -1,16 +0,17 @@
-'use strict';
+import { locationChange } from './actions';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.startListener = startListener;
+export function startListener(history, store) {
+  store.dispatch(locationChange({
+    pathname: history.location.pathname,
+    search: history.location.search,
+    hash: history.location.hash
+  }));
 
-var _actions = require('./actions');
-
-function startListener(history, store) {
-  store.dispatch((0, _actions.locationChange)(history.location.pathname, history.location.search, history.location.hash));
-
-  history.listen(function (location) {
-    store.dispatch((0, _actions.locationChange)(location.pathname, location.search, location.hash));
+  history.listen(location => {
+    store.dispatch(locationChange({
+      pathname: location.pathname,
+      search: location.search,
+      hash: location.hash
+    }));
   });
 }

lib/middleware.js

@@ -1,36 +0,23 @@
-'use strict';
+import { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD } from './constants';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.routerMiddleware = undefined;
-
-var _constants = require('./constants');
-
-var routerMiddleware = exports.routerMiddleware = function routerMiddleware(history) {
-  return function () {
-    return function (next) {
-      return function (action) {
-        switch (action.type) {
-          case _constants.PUSH:
-            history.push(action.payload);
-            break;
-          case _constants.REPLACE:
-            history.replace(action.payload);
-            break;
-          case _constants.GO:
-            history.go(action.payload);
-            break;
-          case _constants.GO_BACK:
-            history.goBack();
-            break;
-          case _constants.GO_FORWARD:
-            history.goForward();
-            break;
-          default:
-            return next(action);
-        }
-      };
-    };
-  };
+export const routerMiddleware = history => () => next => action => {
+  switch (action.type) {
+    case PUSH:
+      history.push(action.payload);
+      break;
+    case REPLACE:
+      history.replace(action.payload);
+      break;
+    case GO:
+      history.go(action.payload);
+      break;
+    case GO_BACK:
+      history.goBack();
+      break;
+    case GO_FORWARD:
+      history.goForward();
+      break;
+    default:
+      return next(action);
+  }
 };

lib/reducer.js

@@ -1,25 +0,18 @@
-'use strict';
+import queryString from 'query-string';
+import { LOCATION_CHANGE } from './constants';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.routerReducer = undefined;
-
-var _constants = require('./constants');
-
-var getInitialState = {
+const getInitialState = {
   pathname: '/',
   search: '',
+  queries: {},
   hash: ''
 };
 
-var routerReducer = exports.routerReducer = function routerReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getInitialState;
-  var action = arguments[1];
-
+export const routerReducer = (state = getInitialState, action) => {
   switch (action.type) {
-    case _constants.LOCATION_CHANGE:
+    case LOCATION_CHANGE:
       return {
         pathname: action.payload.pathname,
         search: action.payload.search,
+        queries: queryString.parse(action.payload.search),
         hash: action.payload.hash
@@ -26,0 +19,0 @@ };

package.json

 {
   "name": "redux-first-routing",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Redux-first routing",
   "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "license": "MIT",
@@ -27,4 +29,10 @@ "homepage": "https://github.com/mksarge/redux-first-routing",
   },
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
   "dependencies": {
-    "history": "^4.6.1"
+    "history": "^4.6.1",
+    "query-string": "^4.3.4"
   },
@@ -38,2 +46,3 @@ "devDependencies": {
     "chai": "^4.0.1",
+    "cross-env": "^5.0.0",
     "eslint": "^3.19.0",
@@ -44,12 +53,18 @@ "eslint-config-airbnb-base": "^11.2.0",
     "rimraf": "^2.6.1",
+    "rollup": "^0.42.0",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-uglify": "^2.0.1",
     "sinon": "^2.3.2"
   },
   "scripts": {
-    "clean": "rimraf lib dist",
+    "clean": "rimraf lib es dist",
     "lint": "eslint src test",
-    "build": "npm run clean && npm run build:lib",
-    "build:lib": "node_modules/.bin/babel src --out-dir lib",
-    "test": "node_modules/.bin/_mocha --compilers js:babel-core/register test/**/*.spec.js",
-    "prepublish": "npm run lint && npm run test && npm run build"
+    "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
+    "build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup -c -i src/index.js -o dist/redux.js",
+    "build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup -c -i src/index.js -o dist/redux.min.js",
+    "test": "mocha --compilers js:babel-core/register test/**/*.spec.js",
+    "prepublish": "npm run lint && npm run test && npm run clean && npm run build"
   }
 }

README.md

@@ -1,1 +0,81 @@
-Redux-First Routing
+# Redux-First Routing
+
+Achieve client-side routing *the Redux way*:
+
+- Read location data from the store.
+- Update the location by dispatching navigation actions.
+- Let middleware handle the side-effect of history navigation.
+
+![Redux-first routing](https://camo.githubusercontent.com/b08b1b78a08e0444ab451f692618d59da977e6a1/687474703a2f2f692e696d6775722e636f6d2f734169566c6b4d2e6a7067)
+
+## Ideology
+
+This library wraps [`history`](https://github.com/ReactTraining/history) and provides a framework-agnostic base for accomplishing Redux-first routing. For a complete routing solution, pair it with a compatible client-side routing library (see [Recipies](#recipies) for examples).
+
+## Recipies
+
+- [Basic Usage](https://github.com/mksarge/redux-first-routing/blob/master/docs/basic-usage.md)
+- [Usage with Universal Router](https://github.com/mksarge/redux-first-routing/blob/master/docs/usage-with-universal-router.md)
+
+## API
+
+#### State Shape
+
+There are dozens of ways to design the state shape of the location data, and this project by nature must choose a single, opinonated implementation. Here is the current design:
+
+```js
+{
+  ..., // other redux state 
+  location: {
+    pathname: '/nested/path/',
+    search: '?with=query',
+    queries: {
+      with: 'query',
+    },
+    hash: '#and-hash'
+  }
+}
+// current location: 'www.website.com/nested/path?with=query#and-hash'
+```
+
+#### Exports
+
+Here's a look at the exports in [`src/index.js`](https://github.com/mksarge/redux-first-routing/blob/master/src/index.js):
+
+```js
+// History API
+export { createBrowserHistory } from 'history/createBrowserHistory';
+export { startListener } from './listener';
+
+// Redux API
+export { PUSH, REPLACE, GO, GO_BACK, GO_FORWARD, LOCATION_CHANGE } from './constants';
+export { push, replace, go, goBack, goForward, locationChange } from './actions';
+export { routerMiddleware } from './middleware';
+export { routerReducer } from './reducer';
+```
+
+- **Redux API**
+  - `push()`, `replace()`, `go()`, `goBack()`, `goForward()`
+    - Public action creators used to update the location.
+    - **Use these navigation actions instead of calling the `history` navigation methods directly!**
+  - `PUSH`, `REPLACE`, `GO`, `GO_BACK`, `GO_FORWARD`
+    - Public action types for use in user-defined middleware.
+  - `routerMiddleware(history)`
+    - Intercepts the navigation actions to update the browser history.
+  - `routerReducer`
+    - Adds the location data (`pathname`, `search`, `hash`) to the state tree upon receiving a `LOCATION_CHANGE` action.
+- **History API**
+  - `createBrowserHistory()`
+    - Creates a `history` object.
+  - `startListener(history, store)`
+    - Creates a `history` [listener](https://github.com/ReactTraining/history#listening) that responds to the middleware and external navigation by dispatching a `locationChange` action.
+
+## Contributing
+
+Contributions are welcome and are greatly appreciated!  :tada:
+
+Feel free to file an issue, start a discussion, or send a pull request.
+
+## License
+
+MIT

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17648

increased by106.14%

Number of package files

17

increased by70%

Lines of code

351

increased by54.63%

Number of lines in readme file

82

increased by4000%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

16

increased by33.33%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedquery-string@^4.3.4

• + Addedobject-assign@4.1.1(transitive)

• + Addedquery-string@4.3.4(transitive)

• + Addedstrict-uri-encode@1.1.0(transitive)