Support non absolute paths in EditableTreeNode

[jods4]

I'm using extendRoute to normalize our paths (to camelcase, but our files and folders sometimes have different casing).

Setting route.path sometimes incorrectly logs warnings "Only absolute paths are supported.".
Offending code is here: https://github.com/posva/unplugin-vue-router/blob/main/src/core/extendRoutes.ts#L135

The oversight of this warning is that a route can be a nested child route, and path is only the local path, not the full one. In this instance a relative path is ok (common, even).

[posva]

Can you share a failing test case?

[jods4]

/Pages
  parent.vue
  /parent
    child.vue

In this situation, the routing table looks like:

[
  { 
    path: "/parent",
    children: [
      { path: "child" } 
    ]
  }
]

Doing a simple route.path = route.path on the child route will report the warning.

[posva]

The warning is actually correct: currently, only absolute paths are supported. Ideally, setting the path should work with both absolute and non-absolute paths, but that hasn't been implemented yet. Contribution welcome!

[jods4]

@posva can you explain a little more where the problem lies? I don't get it.
For nested child routes, paths are relative by default and they work.
How is path.route = path.route not idempotent?
Where would something break if I set a nested child path to a relative value, whereas the default relative path actually works?

[posva]

It’s because in the build-time hooks to change routes you don’t get access to the route records, you get access to an editable tree node that then gets serialized into a route tree. Therefore some operations are different

[jods4]

ok.
It's very surprising and unintuitive that what you read (get route() on the record returns the relative path) does not match the semantics of what you write (set route("..") on the record can't be relative?). I think it'd be worthwhile thinking about how this could be improved.

I suppose a work-around for the time being is building and assigning the full absolute path of the child route. With a bit of glue code it can be done (walk up the parents routes and merge them, being careful if they are relative or absolute).

[posva]

Yeah, it’s not intuitive. It will be improved sooner or later

[robertmoura]

Just for context, I believe the issue comes from the differences between the meaning of path in different contexts. Here's an example in the TreeNode class:

https://github.com/posva/unplugin-vue-router/blob/main/src/core/tree.ts

  /**
   * Returns the route path of the node without parent paths. If the path was overridden, it returns the override.
   */
  get path() {
    return (
      this.value.overrides.path ??
      (this.parent?.isRoot() ? '/' : '') + this.value.pathSegment
    )
  }

  /**
   * Returns the route path of the node including parent paths.
   */
  get fullPath() {
    return this.value.overrides.path ?? this.value.path
  }

You can see that the override is actually overriding the whole path not just the pathSegment.