From 966d4f227c5ae3ab23bf311f2dab86f0dd9761fb Mon Sep 17 00:00:00 2001 From: mattdesl Date: Fri, 5 May 2017 14:17:05 -0400 Subject: [PATCH] use transition group for router transitions --- README.md | 134 ++------------------------------------------------ karma.conf.js | 2 +- package.json | 7 ++- src/index.js | 6 ++- src/match.js | 2 +- 5 files changed, 15 insertions(+), 136 deletions(-) diff --git a/README.md b/README.md index 507effda..79e75967 100644 --- a/README.md +++ b/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 `` component that conditionally renders its children when the URL matches their `path`. It also automatically wires up `` 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 = () => ( - - - - - -); - -render(
, 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 - - - - - - -``` - -### 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'; - - - import('./friends') } - /> - import('./friend') } - loading={ () =>
loading...
} - /> - -``` - -### 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 ``, 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( -
- - { ({ matches, path, url }) => ( - 
{url}
- ) } - - -
demo fallback route
- -
-) - -// another example: render only if at a given URL: - -render( -
- - { ({ matches }) => matches && ( -

You are Home!

- ) } - - -
-) -``` - -`` 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( -
- - -
- this is a demo route that always matches -
- -
-) -``` +This is used internally by Jam3 — you probably just want to use `preact-router` directly! --- diff --git a/karma.conf.js b/karma.conf.js index edfb42de..c5cd2af8 100644 --- a/karma.conf.js +++ b/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' } } diff --git a/package.json b/package.json index 1e6e1ea9..c44a4412 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.js b/src/index.js index 868b190c..76239307 100644 --- a/src/index.js +++ b/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 + {current} + ; } } diff --git a/src/match.js b/src/match.js index ae3a00ca..dd96f856 100644 --- a/src/match.js +++ b/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 => {