Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Router Service] routeWillChange & routeDidChange #17025

Merged
merged 4 commits into from
Oct 3, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
"puppeteer": "^1.3.0",
"qunit": "^2.5.0",
"route-recognizer": "^0.3.4",
"router_js": "^5.0.3",
"router_js": "^5.1.1",
"rsvp": "^4.8.2",
"semver": "^5.5.0",
"serve-static": "^1.12.2",
Expand Down
83 changes: 81 additions & 2 deletions packages/@ember/-internals/routing/lib/services/router.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { Evented } from '@ember/-internals/runtime';
import { EMBER_ROUTING_ROUTER_SERVICE } from '@ember/canary-features';
import { readOnly } from '@ember/object/computed';
import Service from '@ember/service';
import { Transition } from 'router_js';
import EmberRouter from '../system/router';
import { extractRouteArgs, resemblesURL, shallowEqual } from '../utils';

/**
The Router service is the public API that provides access to the router.

Expand Down Expand Up @@ -148,7 +150,7 @@ export default class RouterService extends Service {
}
}

RouterService.reopen({
RouterService.reopen(Evented, {
/**
Name of the current route.

Expand Down Expand Up @@ -251,3 +253,80 @@ RouterService.reopen({
*/
rootURL: readOnly('_router.rootURL'),
});

if (EMBER_ROUTING_ROUTER_SERVICE) {
RouterService.reopen(Evented, {
init() {
this._super(...arguments);
this._router.on('routeWillChange', (transition: Transition) => {
this.trigger('routeWillChange', transition);
});

this._router.on('routeDidChange', (transition: Transition) => {
this.trigger('routeDidChange', transition);
});
},
// Uncomment this when we go the feature
// /**
// The `routeWillChange` event is fired at the beginning of any
// attempted transition with a `Transition` object as the sole
// argument. This action can be used for aborting, redirecting,
// or decorating the transition from the currently active routes.

// A good example is preventing navigation when a form is
// half-filled out:

// ```app/routes/contact-form.js
// import {inject as service} from '@ember/service';

// export default Route.extend({
// router: service('router'),
// init() {
// this._super(...arguments);
// this.router.on('routeWillUpdate', (transition) => {
// if (!transition.to.find(route => route.name === this.routeName)) {
// alert("Please save or cancel your changes.");
// transition.abort();
// }
// })
// }
// });
// ```

// The `routeWillChange` event fires whenever a new route is chosen as the desired target of a transition. This includes `transitionTo`, `replaceWith`, all redirection for any reason including error handling, and abort. Aborting implies changing the desired target back to where you already were. Once a transition has completed, `routeDidChange` fires.

// @event routeWillChange
// @param {Transition} transition
// @public
// */

// /**
// The `routeDidChange` event only fires once a transition has settled.
// This includes aborts and error substates. Like the `routeWillChange` event
// it recieves a Transition as the sole argument.

// A good example is sending some analytics when the route has transitioned:

// ```app/routes/contact-form.js
// import {inject as service} from '@ember/service';

// export default Route.extend({
// router: service('router'),
// init() {
// this._super(...arguments);
// this.router.on('routeDidUpdate', (transition) => {
// ga.send('pageView', {
// current: transition.to.name,
// from: transition.from.name
// });
// })
// }
// });
// ```

// @event routeDidChange
// @param {Transition} transition
// @public
// */
});
}
42 changes: 39 additions & 3 deletions packages/@ember/-internals/routing/lib/system/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import {
Object as EmberObject,
typeOf,
} from '@ember/-internals/runtime';
import { EMBER_ROUTING_ROUTER_SERVICE } from '@ember/canary-features';
import { assert, deprecate, info, isTesting } from '@ember/debug';
import { ROUTER_ROUTER } from '@ember/deprecated-features';
import { ROUTER_EVENTS, ROUTER_ROUTER } from '@ember/deprecated-features';
import { assign } from '@ember/polyfills';
import { once } from '@ember/runloop';
import { classify } from '@ember/string';
Expand Down Expand Up @@ -329,8 +330,8 @@ class Route extends EmberObject implements IRoute {
/**
@private

@method _reset
@since 1.7.0
@method _internalReset
@since 3.6.0
*/
_internalReset(isExiting: boolean, transition: Transition) {
let controller = this.controller;
Expand Down Expand Up @@ -2511,4 +2512,39 @@ Route.reopen(ActionHandler, Evented, {
},
});

export let ROUTER_EVENT_DEPRECATIONS: any;
if (EMBER_ROUTING_ROUTER_SERVICE && ROUTER_EVENTS) {
ROUTER_EVENT_DEPRECATIONS = {
on(name: string) {
this._super(...arguments);
let hasDidTransition = name === 'didTransition';
let hasWillTransition = name === 'willTransition';

if (hasDidTransition) {
deprecate(
'You attempted to listen to the "didTransition" event which is deprecated. Please inject the router service and listen to the "routeDidChange" event.',
false,
{
id: 'deprecate-router-events',
until: '4.0.0',
}
);
}

if (hasWillTransition) {
deprecate(
'You attempted to listen to the "willTransition" event which is deprecated. Please inject the router service and listen to the "routeWillChange" event.',
false,
{
id: 'deprecate-router-events',
until: '4.0.0',
}
);
}
},
};

Route.reopen(ROUTER_EVENT_DEPRECATIONS);
}

export default Route;
Loading