Incorrect recognized types for SignalSlice in Rider IDE

[robbaman]

We're looking to use SignalSlice in our projects, but we notice that the editor support in Rider is not too great. Unfortunately I'm not TypeScript expert enough to figure out what is going wrong.

What happens is that all the auto-generated top level property-selectors are not recognized (timelineQueryParams is a top level property on the state, whereas filterCount is a custom selector defined in the selectors section of the config).

In addition, the actions on the state object are recognized to exist, but also seem to have their types recognized incorrectly so it gives an error in Rider.

Is this anything that can be fixed? As mentioned, I'm not that great at TypeScript and just looking at the type-magic going on in the SignalSlice source makes my head spin

[robbaman]

After some further investigation I've noticed that the top lever property-selectors problem only occurs when there is more than one source in the sources array of the configuration, where at least one source does not have all properties. The ones that are not in all sources will yield an error (in Rider that is)

[joshuamorony]

Hi @robbaman can you provide the sources/config that produces the issue (or a simplified repro) and I'll look into it, thanks

[robbaman]

Hi Josh, thanks for getting back to me. The issue is pretty easy to reproduce.

First I create a new blank project:

ng new ExampleProject --skip-git
cd ExampleProject
ng add ngxtension

Then in the app.component.ts I add a state interface at the top:

interface State {
  pageName: string;
  somethingElse: number;
  oneMoreThing: number;
}

And some code to initialize the signalSlice

  readonly initialState: State = {
    oneMoreThing: 54,
    somethingElse: 54,
    pageName: '',
  } as const

  state = signalSlice({
    initialState: this.initialState,
    sources: [
      (state) => of({pageName: 'PageName', oneMoreThing: 10}),
      //() => of(this.initialState)
    ]
  })
  
  constructor() {
    var value = this.state.pageName();
    var y = this.state.somethingElse();
  }

In addition I just replace the app.component.html content with this:

<div>
  {{state.oneMoreThing()}}
</div>
<div>
  {{state.pageName()}}
</div>
<div>
  {{state.somethingElse()}}
</div>

Now, this will compile just fine, and Rider will provide intellisense and font coloring as expected. However, when you uncomment the second source () => of(this.initialState), suddenly Rider gets confused and will no longer know the somethingElse property as indicated by a lack of font coloring in the component file:

And by showing an error in the template file:

Note that this is in the Rider IDE only, the project still builds and runs fine

Some noteworthy observations:

• Swapping the order of the two sources also seems to fix the issue
• Removing either of the two sources (or both) seems to fix the issue
• Changing both sources to just ben an observable instead of a function returning an observable seems to fix the issue

I hope this helps.