Missing param due to case-sensitive token regex

[pimlie]

Version

3.1.3

Reproduction link

https://jsfiddle.net/j4s8ka1v/

Steps to reproduce

Unfortunately the above reproduction link does not reproduce the issue, not sure why the tokensToFunction method isnt used in the jsfiddle. But I've traced the issue to tokensToFunction from path-to-regexp. The issue seems to have been fixed in v3.1.0 due to this pr. You can check eg dist/vue-router.esm.js to see the RegExp does not set the i modifier

That makes this report more or less a fyi / request to upgrade path-to-regexp 😃

Locally the error is caused by a route similar to

  routes: [{
      path: "/:locale(en|pt-br)?/:source(.*)?",
      component: myComponent,
    }],

which fails when you browse to e.g. /pt-BR/path:

What is expected?

That the token / param is matched case-insensitively

What is actually happening?

It doesnt, causing a missing param error

[posva]

Thanks, unfortunately upgrading it comes with some breaking changes, one of them is changing '*' routes to '(.*)' which is widely used. The upgrade will happen in next major version though.
So this is something people will have to workaround by providing different possible versions (case sensitive and case insensitive) until next major version.

[pimlie]

Thanks, could you please explain what you think the workaround is?

Unfortunately I dont fully understand why this issue should be closed, this issue exists and directly contradicts with the docs which says that all routes are matched case insensitively by default. Wouldnt it be better for visibility to keep this open with a target label like breaking-change and/or target: v4?

[boringame]

This problem also bothers me, which is why I submitted the PR.
Here's what I did while waiting for the merge: generate expressions with upper and lower case letters.

function escapeIgnoreCase(
    text: string
): string {
    const holderFlag = "((holderFlag))";
    const holderFlagEscape = RegExp.escape(holderFlag);
    const holder = text.replace(/[a-zA-Z]/g, a => `${holderFlag}${a}`);
    const escapeHolder = RegExp.escape(holder);
    const result = escapeHolder.
        replace(
            new RegExp(`${RegExp.escape(holderFlagEscape)}([a-zA-Z])`, "g"),
            a => `[${a.replace(holderFlagEscape, "").toLowerCase()}${a.replace(holderFlagEscape, "").toUpperCase()}]`
        );
    return result;
}
// escapeIgnoreCase("pt-br"): "[pP][tT]-[bB][rR]"
routes: [{
    path: `/:locale(${escapeIgnoreCase("en")}|${escapeIgnoreCase("pt-br")})?/:source(.*)?`,
    component: myComponent,
}]

[pimlie]

fyi: path-to-regexp v1.8.0 has been released which includes the backported tokenstofunctionoptions fix by @boringame

[posva]

Thanks for that! Let's reopen this then. Feel free to upgrade the version to 1.8.0 in a PR

[posva]

fixed by #3032