[svelte] ownership_invalid_mutation

[Slonik]

Can't work!
[svelte] ownership_invalid_mutation node_modules/@wjfe/n-savant/dist/Route/Route.svelte mutated a value owned by node_modules/@wjfe/n-savant/dist/Router/Router.svelte. This is strongly discouraged. Consider passing values to child components with bind:, or use a callback instead
My source:
<Router id="root-router"> <Route key="assettypes" path="/assettypes"> <DataReference addr='assets/types' httpmethod='GET' bind:data={lastListData} /> </Route> </Router>
package.json dependecies:
"devDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.3", "svelte": "^5.15.0", "vite": "^6.0.5", "wx-core-locales": "^2.0.1", "wx-svelte-core": "^2.0.1", "wx-svelte-menu": "^2.0.1" }, "dependencies": { "@wjfe/n-savant": "^0.2.0", "wx-svelte-grid": "^2.1.0" }

[webJose]

You should use code blocks to show code, not inline code.

Routers create an instance of the RouterEngine class. This class holds the reactive routes property. This is where Route components register themselves. This value is passed by context, not props. There is no way to "pass the value to child components with bind".

This, however, doesn't prevent you from "working". So "can't work" is not an accurate statement. This is merely a warning that, to the best of my knowledge, only shows in development builds. The production build will not show this.

[webJose]

This REPL is a simplified version of what goes on.

The result:

From the code in this REPL it should be evident that there is no way to fulfill Svelte's requirement of binding.

[webJose]

I guess what I can do is add // svelte-ignore ownership_invalid_mutation to silence this warning. I'll get on it.

[Slonik]

I guess what I can do is add // svelte-ignore ownership_invalid_mutation to silence this warning. I'll get on it.

Sorry, I think it's wrong. You're misleading people.

[Slonik]

Routers create an instance of the RouterEngine class. This class holds the reactive routes property. This is where Route components register themselves. This value is passed by context, not props. There is no way to "pass the value to child components with bind".

Why is it impossible to directly specify the global variable Router in Route without passing it by context?

[Slonik]

In my real project:

in browser "/assettypes/new" will render two path's: "/assettypes" and "/assettypes/new" simultaneously. The path "/assettypes" is not render without "/assettypes/new".

[webJose]

Ok, that has nothing to do with the issue about the Svelte warning.

As explained in the documentation, all route matching is exact. If you need "starts with" matching behavior, specify the rest parameter:

<Route key="assettypes" path="/assettypes/*">
...

[Slonik]

How to use the router correctly to handle multiple levels?
/features/send/123
/features/receive/456

[webJose]

It can be done in a couple of ways, and I don't think one is better than the other.

One Router

<Router>
  <Route key="p1" path="/features/send/:id">...</Route>
  <Route key="p2" path="/features/receive/:id">...</Route>
</Router>

This one only creates one router that stores all of the routes. It should work just fine.

Nesting Routers

<Router>
  <Route key="p1" path="/features/*"><!-- This is optional, but it is nice to have because it doesn't create the nested router if not needed. -->
    <Router basePath="/features">
      <Route key="p2" path="/send/:id">...</Route>
      <Route key="p3" path="/receive/:id">...</Route>
    </Router>
  </Route>
  <!-- ETC.  Other routes and content here. -->
</Router>

---

Both should work the same. There will be technical differences. For example, adding a <RouterTrace> component will only present data from the parent router. In the first case, there is only one parent, so all data for all routes is displayed; in the second case it depends where you put it and not all routes will be shown, as routes are now split between (at least) 2 routers.

As seen in the documentation, this hierarchy also has an effect on <Link> components.

So while both work, make sure you do the one that's best for you.

[Slonik]

How to make the work "/features" without parameters?
This <Route key="assettypes" path="/assettypes"> don't work.

[Slonik]

Found the correct sequence:

<Route key="assettypes" path="/assettypes/:id"></Route>
<Route key="assettypes" path="/assettypes"></Route>

[webJose]

What do you mean? This router evaluates all routes, so sequence is irrelevant. The route's ability to match is not dependant on its position in the markup.