Immutable prop warning for various components

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/core@2.4.0
@stencil/router@1.0.1

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

dozens of console warnings for mutable props being changed are output to the console

"@Prop() \"root\" on <stencil-route-link> is immutable but was modified from within the component.
More information: https://stenciljs.com/docs/properties#prop-mutability"

Expected behavior:

no console warnings

Steps to reproduce:

1. create a new stencil app or upgrade to stencil 2.4.0, using app from https://stenciljs.com/docs/getting-started yields the results
2. open the app in the browser
3. open the web tools

Other information:

Screenshot:

Commit that introduced the warning: https://github.com/ionic-team/stencil/commit/9c18fa0da217be0bd9e28672f2a0b3c9599de2db

I think the fix would be change the code for these props (example) to be mutable, e.g.

@Prop({ mutable: true }) history?: RouterHistory;
@Prop({ mutable: true }) location?: LocationSegments;
@Prop({ mutable: true }) root?: string;

I’m happy to submit a PR if that’s accurate, but I’m not 100% confident in being able to cover the scope of these changes. Thanks!

[Overthane]

@gregorypratt I hope you are right.

In the meantime, does anyone know if it’s possible to temporarily solve this issue locally and prevent these warnings? It is really cluttering my console while developing.

I just went into node_modules/@stencil/router/collection/components/ and changed mutable: false to mutable: true for the appropriate Props, in the appropriate components.

[bleuscyther]

It seems to be because of the way Stencil State Tunnel shares state values across the hierarchy.

They would normally use events (with reserved names) to do that, but I am guessing that would be out of the scope of Stencil, at least in terms of the spirit behind it. That could be the reason why they moved it to the community repo, to separate the concerns: build cross-library components vs building a fully functional app/website.

Route https://github.com/stencil-community/stencil-router/blob/2580a320b68f3ad8a129d4bbd2c81c5dc6ef87cd/packages/router/src/components/route/route.tsx#L123-L128

Route-Link

https://github.com/stencil-community/stencil-router/blob/2580a320b68f3ad8a129d4bbd2c81c5dc6ef87cd/packages/router/src/components/route-link/route-link.tsx#L117-L121

Switch

https://github.com/stencil-community/stencil-router/blob/2580a320b68f3ad8a129d4bbd2c81c5dc6ef87cd/packages/router/src/components/switch/switch.tsx#L127-L130

Redirect https://github.com/stencil-community/stencil-router/blob/2580a320b68f3ad8a129d4bbd2c81c5dc6ef87cd/packages/router/src/components/redirect/redirect.tsx#L32-L35

I switched to the History API (1) (2)to handle the routing logic 😅. It feels less like using React or Angular