diff --git a/CHANGELOG.md b/CHANGELOG.md index f5ea4ea..cf6997b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # CHANGELOG +## 0.26.1-no-react-async + - Special build targeting React 0.13 but with react-async removed. + +## 0.26.1 + - Remove deprecated replaceState(). + ## 0.26.0 - Support querystrings. * Querystrings are not matched - they are stripped before matching patterns. diff --git a/index.js b/index.js index 77cbb6c..9ca7b26 100644 --- a/index.js +++ b/index.js @@ -5,7 +5,6 @@ var Route = require('./lib/Route'); var Link = require('./lib/Link'); var RouterMixin = require('./lib/RouterMixin'); -var AsyncRouteRenderingMixin = require('./lib/AsyncRouteRenderingMixin'); var RouteRenderingMixin = require('./lib/RouteRenderingMixin'); var NavigatableMixin = require('./lib/NavigatableMixin'); @@ -30,7 +29,6 @@ var exportsObject = { RouterMixin: RouterMixin, RouteRenderingMixin: RouteRenderingMixin, - AsyncRouteRenderingMixin: AsyncRouteRenderingMixin, NavigatableMixin: NavigatableMixin, CaptureClicks: CaptureClicks, diff --git a/lib/AsyncRouteRenderingMixin.js b/lib/AsyncRouteRenderingMixin.js deleted file mode 100644 index fe518d3..0000000 --- a/lib/AsyncRouteRenderingMixin.js +++ /dev/null @@ -1,53 +0,0 @@ -"use strict"; - -var assign = Object.assign || require('object.assign'); -var prefetchAsyncState = require('react-async/lib/prefetchAsyncState'); -var isAsyncComponent = require('react-async/lib/isAsyncComponent'); -var RouteRenderingMixin = require('./RouteRenderingMixin'); - -/** - * Mixin for router components which prefetches state of async components - * (as in react-async). - */ -var AsyncRouteRenderingMixin = { - mixins: [RouteRenderingMixin], - - setRoutingState: function(state, cb) { - var currentHandler = this.state && this.state.handler; - var nextHandler = state && state.handler; - - if (nextHandler && nextHandler.type && - isAsyncComponent(nextHandler) && - // if component's type is the same we would need to skip async state - // update - !(currentHandler && currentHandler.type === nextHandler.type)) { - // store pending state and start fetching async state of a new handler - this.setState( - {pendingState: state}, - this.prefetchMatchHandlerState.bind(null, state, cb) - ); - } else { - this.replaceState(state, cb); - } - }, - - hasPendingUpdate: function() { - return !!this.state.pendingState; - }, - - prefetchMatchHandlerState: function(state, cb) { - prefetchAsyncState(state.handler, function(err, handler) { - // check if we router is still mounted and have the same match in state - // as we started fetching state with - if (this.isMounted() && - this.state.pendingState && - this.state.pendingState.match === state.match) { - var nextState = assign({}, this.state.pendingState, {handler: handler}); - this.replaceState(nextState, cb); - - } - }.bind(this)); - } -}; - -module.exports = AsyncRouteRenderingMixin; diff --git a/lib/Router.js b/lib/Router.js index 4206638..2238da8 100644 --- a/lib/Router.js +++ b/lib/Router.js @@ -2,7 +2,7 @@ var React = require('react'); var RouterMixin = require('./RouterMixin'); -var AsyncRouteRenderingMixin = require('./AsyncRouteRenderingMixin'); +var RouteRenderingMixin = require('./RouteRenderingMixin'); var assign = Object.assign || require('object.assign'); /** @@ -15,7 +15,7 @@ function createRouter(name, component) { return React.createClass({ - mixins: [RouterMixin, AsyncRouteRenderingMixin], + mixins: [RouterMixin, RouteRenderingMixin], displayName: name, diff --git a/lib/RouterMixin.js b/lib/RouterMixin.js index ed89999..046af6b 100644 --- a/lib/RouterMixin.js +++ b/lib/RouterMixin.js @@ -196,7 +196,7 @@ var RouterMixin = { if (this.setRoutingState) { this.setRoutingState(state, cb); } else { - this.replaceState(state, cb); + this.setState(state, cb); } } diff --git a/package.json b/package.json index 12f251a..5328d08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-router-component", - "version": "0.26.0", + "version": "0.26.1-no-react-async", "description": "Declarative router component for React", "main": "index.js", "dependencies": { @@ -25,7 +25,6 @@ "zuul": "~3.0.0" }, "peerDependencies": { - "react-async": "^2.1.0", "react": ">=0.12.0 <0.14.0" }, "browserify": { diff --git a/tests/browser-jsx.js b/tests/browser-jsx.js index e9de7c2..18067d2 100644 --- a/tests/browser-jsx.js +++ b/tests/browser-jsx.js @@ -1,6 +1,7 @@ 'use strict'; var assert = require('assert'); var React = require('react'); +var ReactDOM = React; // For 0.13 var Router = require('../index'); var historyAPI = ( @@ -22,7 +23,7 @@ function delay(ms, func) { function getRenderedContent() { var content = app.refs.content || app.refs.router; - var node = content.getDOMNode(); + var node = ReactDOM.findDOMNode(content); return node.textContent || node.innerText; } @@ -34,7 +35,7 @@ function assertRendered(text) { } function cleanUp(done) { - React.unmountComponentAtNode(host); + ReactDOM.unmountComponentAtNode(host); if (historyAPI) { window.history.pushState({}, '', '/__zuul'); } @@ -45,7 +46,7 @@ function cleanUp(done) { function setUp(App) { return function() { host = document.createElement('div'); - app = React.render(React.createElement(App), host); + app = ReactDOM.render(React.createElement(App), host); router = app.refs.router; }; } @@ -53,21 +54,6 @@ describe('JSX + Routing with async components', function() { if (!historyAPI) return; - var App = React.createClass({displayName: "App", - - render: function() { - var Locations = Router.Locations; - var Location = Router.Location; - return ( - React.createElement(Locations, {ref: "router", className: "App"}, - React.createElement(Location, {path: "/__zuul", handler: Main, ref: "main"}), - React.createElement(Location, {path: "/__zuul/page1", handler: Page1, ref: "page1"}), - React.createElement(Location, {path: "/__zuul/:text", handler: Page2, ref: "page2"}) - ) - ); - } - }); - var Main = React.createClass({displayName: "Main", render: function() { return React.createElement("div", null, "Main"); @@ -86,6 +72,21 @@ describe('JSX + Routing with async components', function() { } }); + var App = React.createClass({displayName: "App", + render: function() { + var Locations = Router.Locations; + var Location = Router.Location; + return ( + React.createElement(Locations, {ref: "router", className: "App"}, + React.createElement(Location, {path: "/__zuul", handler: Main, ref: "main"}), + React.createElement(Location, {path: "/__zuul/page1", handler: Page1, ref: "page1"}), + React.createElement(Location, {path: "/__zuul/:text", handler: Page2, ref: "page2"}) + ) + ); + } + }); + + beforeEach(setUp(App)); afterEach(cleanUp); diff --git a/tests/browser.js b/tests/browser.js index f237fc0..6fa0f41 100644 --- a/tests/browser.js +++ b/tests/browser.js @@ -1,6 +1,5 @@ 'use strict'; var assert = require('assert'); -var ReactAsync = require('react-async'); var React = require('react'); var ReactTestUtils = require('react/lib/ReactTestUtils'); var EventConstants = require('react/lib/EventConstants'); @@ -364,164 +363,6 @@ describe('Routing', function() { }); -describe('Routing with async components', function() { - - if (!historyAPI) return; - - var mainWasInLoadingState; - var aboutWasInLoadingState; - var mainSeenPendingUpdate; - - var mainAsyncStateCount; - var aboutAsyncStateCount; - - var App = React.createClass({ - - render: function() { - return Locations({ref: 'router', className: 'App'}, - Location({path: '/__zuul', handler: Main, ref: 'main'}), - Location({path: '/__zuul/about', handler: About, ref: 'about'}), - Location({path: '/__zuul/about2', handler: About, ref: 'about2'}) - ); - } - }); - - var Main = React.createClass({ - mixins: [ReactAsync.Mixin, Router.NavigatableMixin], - - getInitialStateAsync: function(cb) { - mainAsyncStateCount += 1; - setTimeout(function() { - cb(null, {message: 'main'}); - }, 20); - }, - - render: function() { - if (!this.state.message) { - mainWasInLoadingState = true; - } - - if (this.context.router.hasPendingUpdate()) { - mainSeenPendingUpdate = true; - } - return div(null, this.state.message ? this.state.message : 'loading...'); - } - }); - - var About = React.createClass({ - mixins: [ReactAsync.Mixin], - - getInitialStateAsync: function(cb) { - aboutAsyncStateCount += 1; - delay(function() { - cb(null, {message: 'about'}); - }); - }, - - render: function() { - if (!this.state.message) { - aboutWasInLoadingState = true; - } - return div(null, this.state.message ? this.state.message : 'loading...'); - } - }); - - beforeEach(function() { - mainWasInLoadingState = false; - aboutWasInLoadingState = false; - - mainSeenPendingUpdate = false; - - mainAsyncStateCount = 0; - aboutAsyncStateCount = 0; - }); - - beforeEach(setUp(App)); - afterEach(cleanUp); - - it('renders async component', function(done) { - assertRendered('loading...'); - delay(50, function() { - assertRendered('main'); - assert(!mainSeenPendingUpdate); - assert(mainWasInLoadingState); - assert.equal(mainAsyncStateCount, 1); - assert.equal(aboutAsyncStateCount, 0); - done(); - }); - }); - - it('renders async component and navigates', function(done) { - assertRendered('loading...'); - - delay(100, function() { - assertRendered('main'); - - router.navigate('/__zuul/about', function(err) { - if (err) return done(err); - assertRendered('about'); - assert(mainWasInLoadingState); - assert(mainSeenPendingUpdate); - assert(!aboutWasInLoadingState); - assert.equal(mainAsyncStateCount, 1); - assert.equal(aboutAsyncStateCount, 1); - done(); - }); - }); - }); - - it('cancels pending update on navigate', function(done) { - assertRendered('loading...'); - - delay(100, function() { - assertRendered('main'); - - router.navigate('/__zuul/about', function(err) { - if (err) return done(err); - assert(false); - }); - - router.navigate('/__zuul', function(err) { - if (err) return done(err); - - assertRendered('main'); - assert(mainSeenPendingUpdate); - assert(mainWasInLoadingState); - assert(!aboutWasInLoadingState); - assert.equal(mainAsyncStateCount, 1); - assert.equal(aboutAsyncStateCount, 1); - done(); - }); - - }); - }); - - it('does not trigger async state load if type of the next component is the same', function(done) { - assertRendered('loading...'); - - delay(100, function() { - assertRendered('main'); - - router.navigate('/__zuul/about', function(err) { - if (err) return done(err); - assertRendered('about'); - - router.navigate('/__zuul/about2', function(err) { - if (err) return done(err); - assertRendered('about'); - assert(mainWasInLoadingState); - assert(mainSeenPendingUpdate); - assert(!aboutWasInLoadingState); - assert.equal(mainAsyncStateCount, 1); - assert.equal(aboutAsyncStateCount, 1); - done(); - }); - }); - }); - - }); -}); - describe('Nested routers', function() { if (!historyAPI) return;