emberjs / emberjs/ember.js

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

Open
#20,395 0 comments 0 reactions 0 assignees View on GitHub
bug Routing
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

### 🐞 Description

Recently, we had an issue when updating to `ember-source@4.7.1`: 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:

```js
// 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:

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

When it should be:

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

Now the issue is that hash form worked until [v4.7.1](https://github.com/emberjs/ember.js/releases/tag/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](https://github.com/aoumiri/nested-dynamic-segments-info/tree/simple-reproduction), 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](https://github.com/tildeio/router.js/pull/334) that introduced this new behaviour in router_js.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.