Vuepress: [Feature request] Pass custom themeConfig from child to parent theme

[cyrilf]

Feature request

When extending a theme, I would like to pass a themeConfig object to my parent theme with pre-defined values. (i.e a sidebarDepth).

What problem does this feature solve?

It allows a child theme config to pre-fill some config for it's parent theme.

Right now the possibilities are:

.vuepress/config.js : User config where it defines his themeConfig values. (i.e the sidebarDepth).
.vuepress/theme/index.js: Child theme extending from the parent theme (i.e @vuepress/theme-default). Here we can only get the user config and pass it to our child theme.

I would like the possibility to pass some values to the parent config. (i.e force a sidebarDepth to be 0)

What does the proposed API look like?

A new key in the theme/index.js file to pass in config to the parent theme.

How should this be implemented in your opinion?

I think adding a new key to the theme/index.js file is a valid option.
For now we have the extend key like so:

module.exports = {
  extend: "@vuepress/theme-default",
}

we could add another key like parentThemeConfig:

module.exports = {
  extend: "@vuepress/theme-default",
  parentThemeConfig: {
    sidebarDepth: 0
  }
}

Then https://github.com/vuejs/vuepress/blob/51de6cfde8c725a52dc7d95803390b29d9c737eb/packages/%40vuepress/core/lib/node/loadTheme.js#L126

could be replaced with entry = pluginAPI.normalizePlugin('theme', path, theme.entry.parentThemeConfig || ctx.themeConfig)

(some more code change need to be done in the function calls above, but that's the big picture I have in mind)

Are you willing to work on this yourself?

Yes, that would be fine if we agree in a correct approach beforehand.

[Mister-Hope]

I am not sure if it 's actually needed. At least it has a work around here.
For plugins, just config them, it will overide the parent theme configuration.

For others, note that themeConfig is a computed value in components. So just make a function editing it in your theme/index.js.

E.G.:

module.exports = (themeConfig) =>{
    themeConfig.sidebarDepth = 0;
};

[cyrilf]

@Mister-Hope thanks! :clap:
That's so simple.. :see_no_evil:
I don't know how I didn't thought about this one.
I lost at least 2 hours trying so many different options..
Maybe we should update the docs to reflect this in the extend a theme section.

Thanks, my theme/index.js would be:

module.exports = themeConfig => {
  themeConfig.sidebarDepth = themeConfig.sidebarDepth || 0

  return {
    extend: "@vuepress/theme-default"
  }
}

[Mister-Hope]

By the way, this issue may help you #1938