ember.js icon indicating copy to clipboard operation
ember.js copied to clipboard

[Bug] Give proper feedback when dynamic segments are passed as a hash to LinkTo or transitionTo

Open aoumiri opened this issue 2 years ago • 0 comments

🐞 Description

Recently, we had an issue when updating to [email protected]: a part of the code that was doing transitions to routes with dynamic segments started failing in a particular case: when we transition to a route (with dynamic segments) then leave it.

On the following route, when we have a look at the transition.from object, we have the correct paramNames attribute but the params one is an empty object:

// transition.from
{
  name: 'route-name',
  paramNames: ['firstParam', 'secondParam'],
  params: {}, // the param values are missing
  /* ... other attributes ... */
}

This makes it impossible to reconstruct the full URL of the previous route for example. After some investigation, it appeared that we were passing the dynamic segments as a hash to the transitionTo method:

this.transitionTo('route-name', { firstParam: 'foo', secondParam: 'bar' });

When it should be:

this.router.transitionTo('route-name', 'foo', 'bar');

Now the issue is that hash form worked until v4.7.1. I'm not sure if passing the dynamic segments as a hash is discouraged, but if this shouldn't be done it would nice to have some kind of warning or error when someone tries it, as the transition might be in a non stable state. Although I'm not sure if this can be done easily.

🔬 Minimal Reproduction

I created a small reproduction repository, where we can see it. The repro steps are:

  • clone, npm install and npm start

😕 Actual Behavior

First test: success

  • click on the first link: this is a LinkTo with a @models array
  • click on Go back to parent => you should see the queryParams and params from the previous route displayed ✅

second test: failure

  • click on the second link: this is a LinkTo with a @model hash
  • click on Go back to parent => you see the queryParams but the params is an empty object ❎

If you open the console, you will be able to see more logs.

🤔 Expected Behavior

Two options:

  • passing a hash is consistent with passing an model array
  • a warning (or a developer error) is displayed when trying to pass dynamic params in the form of hash

🌍 Environment

  • Ember: 4.7.1+
  • Node.js/npm: 18
  • OS: Mac OS Monterey
  • Browser: All modern browsers

➕ Additional Context

  • Currently, the only hint is when you enable routing logs: dynamic-segments: resolving provided model in the case of a hash.

  • The PR that introduced this new behaviour in router_js.

aoumiri avatar Mar 01 '23 18:03 aoumiri