Expose new convenience function: navigateTo

docs/client-transitions.md

@@ -11,7 +11,7 @@ That's where _client transitions_ come in.  Navigation between `react-server`
 pages can be done without ever hitting the server.  It's easy.  Pages don't
 need to do anything tricky to make this work.  It's part of the framework!
 
-## The `<Link>`
+## The `<Link>` component
 
 How easy is it?
 
@@ -27,22 +27,15 @@ transitions.  Middle-clicks, command-clicks, etc, all still behave as
 expected, but a normal left-click to navigate becomes a light-weight
 transition within the browser.
 
-## The `ClientRequest`
+## The `navigateTo()` function
 
 Want to manage your own `<a>` tags and click handlers?  Want to navigate based
 on some other action?
 
 ```javascript
-const {
-	ClientRequest
-	History,
-	getCurrentRequestContext,
-} = require("react-server");
-
-getCurrentRequestContext().navigate(
-	new ClientRequest(this.props.path),
-	History.events.PUSHSTATE
-);
+const {navigateTo} = require("react-server");
+
+navigateTo("/my-page");
 ```
 
 This is what the `<Link>` tag does for you on click.
@@ -61,7 +54,7 @@ key/value pair in an `options` object passed as a second argument to the
 ```javascript
 <Link path={path} bundleData={true}>...</Link>
 
-new ClientRequest(path, {bundleData: true});
+navigateTo(path, {bundleData: true});
 ```
 
 In order to render the new page in the browser, we first need to fetch the
@@ -83,7 +76,7 @@ the results in the bundle and we don't need to fire actual XHRs!
 ```javascript
 <Link path={path} reuseDom={true}>...</Link>
 
-new ClientRequest(path, {reuseDom: true});
+navigateTo(path, {reuseDom: true});
 ```
 
 This is useful for "single-page app" style navigation, where there may be UI
@@ -98,7 +91,7 @@ page that are the same as the previous page are _re-used_.  This includes
 ```javascript
 <Link path={path} frameback={true}>...</Link>
 
-new ClientRequest(path, {frameback: true});
+navigateTo(path, {frameback: true});
 ```
 
 This one addresses a very specific navigation pattern:  A _list_ page that's
@@ -118,7 +111,7 @@ the list.
 ```javascript
 <Link path={path} frameback={true} reuseFrame={true}>...</Link>
 
-new ClientRequest(path, {frameback: true, reuseFrame: true});
+navigateTo(path, {frameback: true, reuseFrame: true});
 ```
 
 This one only affects the behavior of `frameback`.  Ordinarily each new

packages/react-server-test-pages/entrypoints.js

@@ -33,6 +33,10 @@ module.exports = {
 		entry: "/navigation/data-bundle-cache",
 		description: "Data bundle cache",
 	},
+	NavigateTo: {
+		entry: "/navigation/navigateTo",
+		description: "Navigate using `navigateTo()`",
+	},
 	ErrorLogs: {
 		entry: "/error/logs",
 		description: "Generate errors in the logs",

packages/react-server-test-pages/pages/navigation/navigateTo.js

@@ -0,0 +1,17 @@
+import {navigateTo} from "react-server";
+
+const go = page => navigateTo(
+	`/navigation/navigateTo?cur=${page}`,
+	{reuseDom: true}
+)
+
+const Nav = ({cur}) => <div onClick={() => go(cur+1)}>
+	<div>Current page: {cur}</div>
+	<div>Click for next page</div>
+</div>
+
+export default class NavigateToPage {
+	getElements() {
+		return <Nav cur={+this.getRequest().getQuery().cur||0} />
+	}
+}

packages/react-server/core/common.js

@@ -5,6 +5,7 @@ module.exports = {
 	RootElement: require("./components/RootElement"),
 	Link: require('./components/Link'),
 	History: require('./components/History'),
+	navigateTo: require('./util/navigateTo').default,
 	ClientRequest: require('./ClientRequest'),
 	FramebackController: require('./FramebackController'),
 	components: {

packages/react-server/core/components/Link.jsx

@@ -1,8 +1,6 @@
 
 var React = require('react'),
-	ClientRequest = require("../ClientRequest"),
-	History = require("./History"),
-	getCurrentRequestContext = require("../context/RequestContext").getCurrentRequestContext;
+	navigateTo = require("../util/navigateTo").default;
 
 module.exports = React.createClass({
 	displayName: 'Link',
@@ -39,15 +37,12 @@ module.exports = React.createClass({
 			e.preventDefault();
 			e.stopPropagation();
 			const {bundleData, frameback, reuseDom, reuseFrame} = this.props;
-			getCurrentRequestContext().navigate(
-				new ClientRequest(this.props.path, {
-					bundleData,
-					frameback,
-					reuseDom,
-					reuseFrame,
-				}),
-				History.events.PUSHSTATE
-			);
+			navigateTo(this.props.path, {
+				bundleData,
+				frameback,
+				reuseDom,
+				reuseFrame,
+			});
 		} else {
 			// do normal browser navigate
 		}

packages/react-server/core/util/navigateTo.js

@@ -0,0 +1,12 @@
+import ClientRequest from "../ClientRequest";
+import History from "../components/History";
+import {getCurrentRequestContext} from "../context/RequestContext";
+
+// This initiates a client transition to `path` with `options`.
+// Just a convenience wrapper.
+export default function navigateTo(path, options) {
+	getCurrentRequestContext().navigate(
+		new ClientRequest(path, options),
+		History.events.PUSHSTATE
+	);
+}