`req.params` includes port number, regression `0.35.0`-`0.36.0`

Describe the bug

When upgrading msw@0.35.0 to latest I noticed one of my utility method started to fail. I narrowed this issue to msw@0.36.0.

Some background. Not necessary for the bug but gives some insight.

I have a utility method which validates that all req.params values are encrypted. I have a specific pattern which can be utilized to identify such fields. For now lets call this pattern /somepattern/.

function validateQueryParametersAreEncrypted(request) {
    Object.entries(request.params).forEach(([name, value]) => {
        if (!/somepattern/.test(value)) {
            throw new Error(`URL parameter (${name}) was not encrypted: (${value})`);
        }
    });
}

This validation is applied to all my MSW handlers. It is now failing due to :3000 not matching /somepattern/.

Environment

• msw: 0.36.3
• nodejs: 16.13.1
• npm: 8.3.0

Please also provide your browser version.

• Google Chrome 96

To Reproduce

Steps to reproduce the behavior:

1. Setup https://github.com/mswjs/examples/tree/master/examples/rest-react
2. Add new handler:

rest.get("/example/:id", (req, res, ctx) => {
    console.log("req.params", req.params);
    return res(ctx.status(200));
})

1. Add new request: fetch("/example/someid");.

Expected behavior

Below is logs from different MSW versions. Version 0.35.0 works as expected.

rest.get("/example/:id", (req, res, ctx) => {
    console.log("req.params", req.params);
    // ^^ msw@0.35.0 req.params {id: 'someid'}
    // ^^ msw@0.36.0 req.params {3000: ':3000', id: 'someid'}
    // ^^ msw@0.36.1 req.params {3000: ':3000', id: 'someid'}
    // ^^ msw@0.36.2 req.params {3000: ':3000', id: 'someid'}
    // ^^ msw@0.36.3 req.params {3000: ':3000', id: 'someid'}

    return res(ctx.status(200));
});

[AriPerkkio]

I was comparing the bundled coercePath and the one from source, and was able to find the likely root cause. It seems main branch contains unreleased changes which might have fixed these, https://github.com/mswjs/msw/pull/1028 (👋 @tdeekens).

Below is comparison between 0.36.3 and main.

coercePath msw@0.36.3

function coercePath(path) {
  return (
    path
      /**
       * Replace wildcards ("*") with unnamed capturing groups
       * because "path-to-regexp" doesn't support wildcards.
       * Ignore path parameter' modifiers (i.e. ":name*").
       */
      .replace(
        /([:a-zA-Z_-]*)(\*{1,2})+/g,
        (_, parameterName, wildcard) => {
          const expression = '(.*)'

          if (!parameterName) {
            return expression
          }

          return parameterName.startsWith(':')
            ? `${parameterName}${wildcard}`
            : `${parameterName}${expression}`
        },
      )
      /**
       * Escape the protocol so that "path-to-regexp" could match
       * absolute URL.
       * @see https://github.com/pillarjs/path-to-regexp/issues/259
       */
      .replace(/^([^\/]+)(:)(?=\/\/)/g, '$1\\$2')
  )
}

> coercePath('http://localhost:3000/example/:id')
> 'http\\://localhost:3000/example/:id'
//                   ^^ Incorrect

coercePath msw@main, unreleased

function coercePath(path) {
  return (
    path
      /**
       * Replace wildcards ("*") with unnamed capturing groups
       * because "path-to-regexp" doesn't support wildcards.
       * Ignore path parameter' modifiers (i.e. ":name*").
       */
      .replace(
        /([:a-zA-Z_-]*)(\*{1,2})+/g,
        (_, parameterName, wildcard) => {
          const expression = '(.*)'

          if (!parameterName) {
            return expression
          }

          return parameterName.startsWith(':')
            ? `${parameterName}${wildcard}`
            : `${parameterName}${expression}`
        },
      )
      /**
       * Escape the port so that "path-to-regexp" can match
       * absolute URLs including port numbers.
       */
      .replace(/([^\/])(:)(?=\d+)/, '$1\\$2')
      /**
       * Escape the protocol so that "path-to-regexp" could match
       * absolute URL.
       * @see https://github.com/pillarjs/path-to-regexp/issues/259
       */
      .replace(/^([^\/]+)(:)(?=\/\/)/, '$1\\$2')
  )
}

> coercePath('http://localhost:3000/example/:id')
> 'http\\://localhost\\:3000/example/:id'
//                   ^^ Correct

So it seems coercePath will be buggy in releases 0.36.0 - 0.36.3 only. Once new version is released I can do the final verification.

[AriPerkkio]

Fix verified with version 0.36.4 - port number is no longer included in the req.params. Thanks!