feat(v2): Allow activeBasePath to be a RegExp

[nebrelbug]

Motivation

Closes #2574. Allows activeBasePath to be a Regular Expression as well as a string.

Have you read the Contributing Guidelines on pull requests?

Yep

Test Plan

Run website and make sure that nav links are highlighted correctly. Change activeBasePath to a Regular Expression and make sure nav links are highlighted correctly.

Related PRs

No related PRs. I included a slight edit to the docs in this PR -- I can move that to a separate PR if necessary.

[docusaurus-bot]

Deploy preview for docusaurus-2 failed.

Built with commit fa899cd

https://app.netlify.com/sites/docusaurus-2/deploys/5ea71dce98a45a00067b735e

[lex111]

We do not use throw errors on invalid type checking, I think this should be removed for consistency.

[nebrelbug]

Got it, will do

[lex111]

typeof activeBasePath === 'object';

Why not activeBasePath instanceof RegExp or something like that?

[nebrelbug]

So, there's a bug. For some reason, none of the methods I've used to check if activeBaseUrl is a Regular Expression work. It's almost like React Context breaks RegExps.

[nebrelbug]

Instead, activeBasePath shows up (when it should be a RegExp) as an empty object.

[lex111]

But currently it looks rather unreliable, we need to find out what exactly is the matter.

[nebrelbug]

I almost think there's a bug, where React Context can't handle Regular Expressions correctly.

[lex111]

I'll try to investigate this issue.

[lex111]

It would be nice to have a real-word example regex for this.

[nebrelbug]

👍

[nebrelbug]

@lex111 problem example:

  const {
    siteConfig: {
      themeConfig: {
        navbar: {title, links = [], hideOnScroll = false} = {},
        disableDarkMode = false,
      },
    },
    isClient,
  } = useDocusaurusContext();
  console.log(links[0].activeBasePath)

Where docusaurus.config.js looks like:

    navbar: {
      hideOnScroll: true,
      title: 'Docusaurus',
      logo: {
        alt: 'Docusaurus Logo',
        src: 'img/docusaurus.svg',
        srcDark: 'img/docusaurus_keytar.svg',
      },
      links: [
        {
          label: 'Docs',
          to: 'docs/introduction', // "fake" link
          position: 'left',
          activeBasePath: /docs/,
          ...

Logs: Object, an object which, when inspected, has 0 RegExp properties.

Object
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

[nebrelbug]

I have no idea what's wrong, but somehow it seems like useDocusaurusContext can't handle Regular Expressions.

[yangshun]

Look at .docusaurus/docusaurus.config.js and find the corresponding value. I suspect the RegExp cannot be serialized.

[nebrelbug]

@yangshun yep, that's the problem. activeBasePath: {}.

Perhaps we create a new string property called activeBaseTest, and, if it exists, use new RegExp() on it?

[yangshun]

Perhaps we create a new string property called activeBaseTest, and, if it exists, use new RegExp() on it?

Yep sounds good!

[nebrelbug]

@yangshun sweet. I'll close this PR and open up a new one 😃