use transition group for router transitions

README.md

@@ -1,136 +1,8 @@
-# preact-router
+# @jam3/preact-transition-router
 
-[![NPM](http://img.shields.io/npm/v/preact-router.svg)](https://www.npmjs.com/package/preact-router)
-[![travis-ci](https://travis-ci.org/developit/preact-router.svg)](https://travis-ci.org/developit/preact-router)
+This is a fork of [preact-router@2.5.2](https://github.com/developit/preact-router) that integrates with [preact-transition-group](https://github.com/developit/preact-transition-group).
 
-Connect your [Preact] components up to that address bar.
-
-`preact-router` provides a `<Router />` component that conditionally renders its children when the URL matches their `path`. It also automatically wires up `<a />` elements to the router.
-
-> 💁 **Note:** This is not a preact-compatible version of React Router. `preact-router` is a simple URL wiring and does no orchestration for you.
->
-> If you're looking for more complex solutions like nested routes and view composition, [react-router](https://github.com/ReactTraining/react-router) works great with preact as long as you alias in [preact-compat](https://github.com/developit/preact-compat).  React Router 4 even [works directly with Preact](http://codepen.io/developit/pen/BWxepY?editors=0010), no compatibility layer needed!
-
-#### [See a Real-world Example :arrow_right:](http://jsfiddle.net/developit/qc73v9va/)
-
----
-
-
-### Usage Example
-
-```js
-import Router from 'preact-router';
-import { h, render } from 'preact';
-/** @jsx h */
-
-const Main = () => (
-	<Router>
-		<Home path="/" />
-		<About path="/about" />
-		<Search path="/search/:query" />
-	</Router>
-);
-
-render(<Main />, document.body);
-```
-
-If there is an error rendering the destination route, a 404 will be displayed.
-
-### Handling URLS
-
-:information_desk_person: Pages are just regular components that get mounted when you navigate to a certain URL.
-Any URL parameters get passed to the component as `props`.
-
-Defining what component(s) to load for a given URL is easy and declarative.
-You can even mix-and-match URL parameters and normal `props`.
-
-```js
-<Router>
-  <A path="/" />
-  <B path="/b" id="42" />
-  <C path="/c/:id" />
-  <D default />
-</Router>
-```
-
-### Lazy Loading
-
-Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module:
-
-```js
-import AsyncRoute from 'preact-async-route';
-<Router>
-  <Home path="/" />
-  <AsyncRoute
-    path="/friends"
-    component={ () => import('./friends') }
-  />
-  <AsyncRoute
-    path="/friends/:id"
-    component={ () => import('./friend') }
-    loading={ () => <div>loading...</div> }
-  />
-</Router>
-```
-
-### Active Matching & Links
-
-`preact-router` includes an add-on module called `match` that lets you wire your components up to Router changes.
-
-Here's a demo of `<Match>`, which invokes the function you pass it (as its only child) in response to any routing:
-
-```js
-import Router from 'preact-router';
-import Match from 'preact-router/match';
-
-render(
-  <div>
-    <Match path="/">
-      { ({ matches, path, url }) => (
-        <pre>{url}</pre>
-      ) }
-    </Match>
-    <Router>
-      <div default>demo fallback route</div>
-    </Router>
-  </div>
-)
-
-// another example: render only if at a given URL:
-
-render(
-  <div>
-    <Match path="/">
-      { ({ matches }) => matches && (
-        <h1>You are Home!</h1>
-      ) }
-    </Match>
-    <Router />
-  </div>
-)
-```
-
-`<Link>` is just a normal link, but it automatically adds and removes an "active" classname to itself based on whether it matches the current URL.
-
-```js
-import { Router } from 'preact-router';
-import { Link } from 'preact-router/match';
-
-render(
-  <div>
-    <nav>
-      <Link activeClassName="active" href="/">Home</Link>
-      <Link activeClassName="active" href="/foo">Foo</Link>
-      <Link activeClassName="active" href="/bar">Bar</Link>
-    </nav>
-    <Router>
-      <div default>
-        this is a demo route that always matches
-      </div>
-    </Router>
-  </div>
-)
-```
+This is used internally by Jam3 — you probably just want to use `preact-router` directly!
 
 ---
 

karma.conf.js

@@ -20,7 +20,7 @@ module.exports = function(config) {
 			},
 			resolve: {
 				alias: {
-					'preact-router': __dirname+'/src/index.js',
+					'@jam3/preact-transition-router': __dirname+'/src/index.js',
 					src: __dirname+'/src'
 				}
 			}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "preact-router",
+  "name": "@jam3/preact-transition-router",
   "amdName": "preactRouter",
   "version": "2.5.2",
   "description": "Connect your components up to that address bar.",
@@ -17,7 +17,7 @@
     "lint": "eslint {src,test,test_helpers}",
     "test:karma": "karma start --single-run",
     "test:watch": "karma start",
-    "prepublish": "npm-run-all build test",
+    "prepublish": "npm run build",
     "release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "files": [
@@ -84,5 +84,8 @@
     "sinon": "^1.17.4",
     "sinon-chai": "^2.8.0",
     "webpack": "^1.13.1"
+  },
+  "dependencies": {
+    "preact-transition-group": "^1.1.1"
   }
 }

src/index.js

@@ -1,5 +1,6 @@
 import { cloneElement, h, Component } from 'preact';
 import { exec, pathRankSort, assign } from './util';
+import PreactTransitionGroup from 'preact-transition-group';
 
 let customHistory = null;
 
@@ -245,7 +246,10 @@ class Router extends Component {
 			}
 		}
 
-		return current;
+		const transitionGroupProps = this.props.transitionGroupProps || {};
+		return <PreactTransitionGroup {...transitionGroupProps}>
+			{current}
+		</PreactTransitionGroup>;
 	}
 }
 

src/match.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { subscribers, getCurrentUrl, Link as StaticLink } from 'preact-router';
+import { subscribers, getCurrentUrl, Link as StaticLink } from './';
 
 export class Match extends Component {
 	update = url => {