react-router - npm Package Compare versions

Comparing version 0.13.3 to 1.0.0-alpha1

lib/History.js

 'use strict';
 
-var invariant = require('react/lib/invariant');
-var canUseDOM = require('react/lib/ExecutionEnvironment').canUseDOM;
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
-var History = {
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
 
-  /**
-   * The current number of entries in the history.
-   *
-   * Note: This property is read-only.
-   */
-  length: 1,
+var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
-  /**
-   * Sends the browser back one entry in the history.
-   */
-  back: function back() {
-    invariant(canUseDOM, 'Cannot use History.back without a DOM');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-    // Do this first so that History.length will
-    // be accurate in location change listeners.
-    History.length -= 1;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
-    window.history.back();
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
+
+var _invariant = require('invariant');
+
+var _invariant2 = _interopRequireDefault(_invariant);
+
+var _URLUtils = require('./URLUtils');
+
+var _ChangeEmitter2 = require('./ChangeEmitter');
+
+var _ChangeEmitter3 = _interopRequireDefault(_ChangeEmitter2);
+
+var _Location = require('./Location');
+
+var _Location2 = _interopRequireDefault(_Location);
+
+var RequiredSubclassMethods = ['pushState', 'replaceState', 'go'];
+
+function createRandomKey() {
+  return Math.random().toString(36).substr(2);
+}
+
+/**
+ * A history interface that normalizes the differences across
+ * various environments and implementations. Requires concrete
+ * subclasses to implement the following methods:
+ *
+ * - pushState(state, path)
+ * - replaceState(state, path)
+ * - go(n)
+ */
+
+var History = (function (_ChangeEmitter) {
+  function History() {
+    var options = arguments[0] === undefined ? {} : arguments[0];
+
+    _classCallCheck(this, History);
+
+    _get(Object.getPrototypeOf(History.prototype), 'constructor', this).call(this);
+
+    this.parseQueryString = options.parseQueryString || _URLUtils.parseQueryString;
+    this.stringifyQuery = options.stringifyQuery || _URLUtils.stringifyQuery;
+    this.location = null;
+
+    RequiredSubclassMethods.forEach(function (method) {
+      (0, _invariant2['default'])(typeof this[method] === 'function', '%s needs a "%s" method', this.constructor.name, method);
+    }, this);
   }
 
-};
+  _inherits(History, _ChangeEmitter);
 
-module.exports = History;
+  _createClass(History, [{
+    key: 'back',
+    value: function back() {
+      this.go(-1);
+    }
+  }, {
+    key: 'forward',
+    value: function forward() {
+      this.go(1);
+    }
+  }, {
+    key: '_createState',
+    value: function _createState(state) {
+      state = state || {};
+
+      if (!state.key) state.key = createRandomKey();
+
+      return state;
+    }
+  }, {
+    key: '_createLocation',
+    value: function _createLocation(path, state, navigationType) {
+      var pathname = (0, _URLUtils.getPathname)(path);
+      var queryString = (0, _URLUtils.getQueryString)(path);
+      var query = queryString ? this.parseQueryString(queryString) : null;
+      return new _Location2['default'](pathname, query, state, navigationType);
+    }
+  }, {
+    key: 'makePath',
+
+    /**
+     * Returns a full URL path from the given pathname and query.
+     */
+    value: function makePath(pathname, query) {
+      if (query) {
+        if (typeof query !== 'string') query = this.stringifyQuery(query);
+
+        if (query !== '') return pathname + '?' + query;
+      }
+
+      return pathname;
+    }
+  }, {
+    key: 'makeHref',
+
+    /**
+     * Returns a string that may safely be used to link to the given
+     * pathname and query.
+     */
+    value: function makeHref(pathname, query) {
+      return this.makePath(pathname, query);
+    }
+  }]);
+
+  return History;
+})(_ChangeEmitter3['default']);
+
+exports['default'] = History;
+module.exports = exports['default'];

package.json

 {
   "name": "react-router",
-  "version": "0.13.3",
+  "version": "1.0.0-alpha1",
   "description": "A complete routing library for React.js",
-  "main": "lib",
+  "main": "lib/index",
   "repository": {
@@ -12,2 +12,10 @@ "type": "git",
   "bugs": "https://github.com/rackt/react-router/issues",
+  "scripts": {
+    "build": "scripts/build.sh",
+    "watch": "babel ./modules --watch -d lib",
+    "build-website": "scripts/build-website.sh",
+    "examples": "webpack-dev-server --config examples/webpack.config.js --content-base examples --inline",
+    "prepublish": "npm run build",
+    "test": "jsxhint modules && karma start"
+  },
   "authors": [
@@ -18,9 +26,37 @@ "Ryan Florence",
   "license": "MIT",
+  "dependencies": {
+    "invariant": "^2.0.0",
+    "keymirror": "^0.1.1",
+    "qs": "2.4.1",
+    "warning": "^1.0.1"
+  },
+  "devDependencies": {
+    "babel": "^5.4.7",
+    "babel-core": "^5.4.7",
+    "babel-loader": "^5.0.0",
+    "babel-plugin-object-assign": "^1.1.0",
+    "bundle-loader": "^0.5.2",
+    "events": "1.0.2",
+    "expect": "^1.6.0",
+    "jsxhint": "^0.12.1",
+    "karma": "^0.12.28",
+    "karma-chrome-launcher": "^0.1.7",
+    "karma-cli": "0.0.4",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.10",
+    "karma-sourcemap-loader": "^0.3.2",
+    "karma-webpack": "^1.3.1",
+    "marked": "0.3.3",
+    "mocha": "^2.0.1",
+    "pygmentize-bundled": "^2.3.0",
+    "react": "0.13.x",
+    "rf-changelog": "^0.4.0",
+    "rx": "2.3.18",
+    "slash": "^1.0.0",
+    "webpack": "^1.4.13",
+    "webpack-dev-server": "^1.6.6"
+  },
   "peerDependencies": {
     "react": "0.13.x"
   },
-  "dependencies": {
-    "object-assign": "^2.0.0",
-    "qs": "2.4.1"
-  },
   "tags": [
@@ -27,0 +63,0 @@ "react",

README.md

@@ -6,62 +6,54 @@ [![npm package](https://img.shields.io/npm/v/react-router.svg?style=flat-square)](https://www.npmjs.org/package/react-router)
 
-React Router
-============
+<img src="https://rackt.github.io/react-router/img/vertical.png" width="300"/>
 
 A complete routing library for React.
 
+React Router keeps the URL in sync with nested UI. It has a simple API
+with powerful features like lazy code loading, dynamic route matching,
+and location transition handling built right in. Make the URL your first
+thought, not an after-thought.
+
 Docs
 ----
 
-- [Guide: Overview](/docs/guides/overview.md)
-- [API](/docs/api/)
+- [Guides and API Docs](https://rackt.github.io/react-router)
+- [Upgrade Guide](/UPGRADE_GUIDE.md)
+- [Changelog](/CHANGELOG.md)
 
-Important Notes
----------------
-
-### SemVer
-
-Before our `1.0` release, breaking API changes will cause a bump to
-`0.x`. For example, `0.4.1` and `0.4.8` will have the same API, but
-`0.5.0` will have breaking changes.
-
-Please refer to the [upgrade guide](/UPGRADE_GUIDE.md) and
-[changelog](/CHANGELOG.md) when upgrading.
-
 Installation
 ------------
 
+### npm + webpack/browserify
+
 ```sh
 npm install react-router
-# or
-bower install react-router
 ```
 
-This library is written with CommonJS modules. If you are using
-browserify, webpack, or similar, you can consume it like anything else
-installed from npm.
+Then with a module bundler or webpack, use as you would anything else:
 
-There is also a global build available on bower, find the library on
-`window.ReactRouter`.
+```js
+// using an ES6 transpiler
+import { Router, Route, Link } from 'react-router';
 
-The library is also available on the popular CDN [cdnjs](https://cdnjs.com/libraries/react-router).
+// not using and ES6 transpiler
+var ReactRouter = require('react-router');
+var Router = ReactRouter.Router;
+var Route = ReactRouter.Route;
+```
 
-Features
---------
+There's also a `dist/` folder containing a UMD version.
 
-- Nested views mapped to nested routes
-- Modular construction of route hierarchy
-- Sync and async transition hooks
-- Transition abort / redirect / retry
-- Dynamic segments
-- Query parameters
-- Links with automatic `.active` class when their route is active
-- Multiple root routes
-- Hash or HTML5 history (with fallback) URLs
-- Declarative Redirect routes
-- Declarative NotFound routes
-- Browser scroll behavior with transitions
+### bower + who knows what
 
-Check out the `examples` directory to see how simple previously complex UI
-and workflows are to create.
+```sh
+bower install react-router
+```
 
+Find the UMD/global build in `dist/`, and the library on
+`window.ReactRouter`. Best of luck to you.
+
+### CDN
+
+Available on cdnjs [here](https://cdnjs.com/libraries/react-router).
+
 What's it look like?
@@ -71,62 +63,67 @@ --------------------
 ```js
-var routes = (
-  <Route handler={App} path="/">
-    <DefaultRoute handler={Home} />
-    <Route name="about" handler={About} />
-    <Route name="users" handler={Users}>
-      <Route name="recent-users" path="recent" handler={RecentUsers} />
-      <Route name="user" path="/user/:userId" handler={User} />
-      <NotFoundRoute handler={UserRouteNotFound}/>
-    </Route>
-    <NotFoundRoute handler={NotFound}/>
-    <Redirect from="company" to="about" />
-  </Route>
-);
+import { Router, Route } from 'react-router';
+import BrowserHistory from 'react-router/lib/BrowserHistory';
 
-Router.run(routes, function (Handler) {
-  React.render(<Handler/>, document.body);
+var App = React.createClass({/*...*/});
+var About = React.createClass({/*...*/});
+// etc.
+
+var Users = React.createClass({
+  render() {
+    return (
+      <div>
+        <h1>Users</h1>
+        <div className="master">
+          <ul>
+            {/* use Link to route around the app */}
+            {this.state.users.map(user => (
+              <li><Link to={`/users/${users.id}`}>{user.name}</Link></li>
+            ))}
+          </ul>
+        </div>
+        <div className="detail">
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
 });
 
-// Or, if you'd like to use the HTML5 history API for cleaner URLs:
+var User = React.createClass({
+  componentDidMount() {
+    this.setState({
+      // route components are rendered with useful information, like URL params
+      user: findUserById(this.props.params.userId)
+    });
+  },
 
-Router.run(routes, Router.HistoryLocation, function (Handler) {
-  React.render(<Handler/>, document.body);
+  render() {
+    return (
+      <div>
+        <h2>{this.state.user.name}</h2>
+        {/* etc. */}
+      </div>
+    );
+  }
 });
+
+// Declarative route configuration (could also load this config lazily
+// instead, all you reall need is a single root route, you don't need to
+// colocate the entire config).
+React.render((
+  <Router history={BrowserHistory}>
+    <Route path="/" component={App}>
+      <Route path="about" component={About}/>
+      <Route path="users" component={Users} indexComponent={RecentUsers}>
+        <Route path="/user/:userId" component={User}/>
+      </Route>
+      <Route path="*" component={NoMatch}/>
+    </Route>
+  </Router>
+), document.body);
 ```
 
-See more in the [overview guide](/docs/guides/overview.md).
+See more in the [overview guide](/docs/00 Guides/0 Overview.md) and [Advanced
+Usage](/doc/00 Guides/Advanced Usage.md)
 
-Benefits of this Approach
--------------------------
-
-1. **Incredible screen-creation productivity** - There is only one
-   use-case when a user visits a route: render something. Every user
-   interface has layers (or nesting) whether it's a simple navbar or
-   multiple levels of master-detail. Coupling nested routes to these
-   nested views gets rid of a ton of work for the developer to wire all
-   of it together when the user switches routes. Adding new screens
-   could not get faster.
-
-2. **Immediate understanding of application structure** - When routes
-   are declared in one place, developers can easily construct a mental
-   image of the application. It's essentially a sitemap. There's not a
-   better way to get so much information about your app this quickly.
-
-3. **Code tractability** - When a developer gets a ticket to fix a bug
-   at as specific url they simply 1) look at the route config, then 2)
-   go find the handler for that route. Every entry point into your
-   application is represented by these routes.
-
-4. **URLs are your first thought, not an after-thought** - With React
-   Router, you don't get UI on the page without configuring a url first.
-   Fortunately, it's wildly productive this way, too.
-
-Related Modules
----------------
-
-- [rnr-constrained-route](https://github.com/bjyoungblood/rnr-constrained-route) - validate paths
-  and parameters on route handlers.
-- [react-router-bootstrap](https://github.com/mtscout6/react-router-bootstrap) - Integration with [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) components.
-- [react-router-proxy-loader](https://github.com/odysseyscience/react-router-proxy-loader) - A Webpack loader to dynamically load react-router components on-demand
-
 Contributing
@@ -140,4 +137,4 @@ ------------
 
-This library is highly inspired by the Ember.js routing API. In general,
-it's a translation of the Ember router api to React. Huge thanks to the
-Ember team for solving the hardest part already.
+React Router was initially inspired by Ember's fantastic Router. Many
+thanks to the Ember team.
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

554826

increased by144.52%

Number of package files

158

increased by305.13%

Lines of code

7424

increased by48.48%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

24

increased byInfinity%

Number of lines in readme file

138

decreased by-2.13%

Number of low supply chain risk alerts

19

increased by1800%

Dependency changes

• + Addedinvariant@^2.0.0

• + Addedkeymirror@^0.1.1

• + Addedwarning@^1.0.1

• + Addedinvariant@2.2.4(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedkeymirror@0.1.1(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedwarning@1.0.2(transitive)

• - Removedobject-assign@^2.0.0