[Feature]: Plugin apply in plugin

[Justinidlerz]

What problem does this feature solve?

As a infrastructure developer, we provides many plugins for team member to assemble for match the business cases.

Such as:

• pluginContentSecretly -> do some secretly thinks like: remove invalid charsets / remove domains ...
• pluginMultiBundle -> call modifyRsbuildConfig to add preset environments

Wanna to add the pluginContentSecretly into one of environment sets of the pluginMultiBundle.

Actually I can extract implements of the pluginContentSecretly and partially call the same API method set in pluginMultiBundle, But it's ugly.

The pluginContentSecretly content see like:

const pluginContentSecretly = () => {
  return {
    name: 'plugin-content-secretly',
    setup: (api) => {
      api.modifyRspackChain(chain => {
         chain.plugin('remove-invalid-content-plugin').use(Plugin, [[ ... ]])

        // .... many many other rules in this plugin
      })
    }
  }
}

The pluginMultiBundle content see like:

const pluginMultiBundle = () => {
  return {
    name: 'plugin-multi-bundle',
    setup: (api) => {
      api.modifyRsbuildConfig(config => {
         config.environments = {
           normal: {
             output: {
               target: 'web',
             }
           },
           safety: {
             output: {
               target: 'web',
             }
             plugins: [pluginContentSecretly()], // <- it's not work
             tools: { // <- now only can implement as this
               rspack: {
                 plugins: [
                   new Plugin({ .... })
                 ]
              }
            }
           }
         }
      })
    }
  }
}

What does the proposed API look like?

We can apply the plugins in another plugin, I think the plugin lifecycle well be modify. Should discuss about such how about the setting override, plugin order, etc..

const pluginContentSecretly = () => {
  return {
    name: 'plugin-content-secretly',
    setup: (api) => {
      api.modifyRspackChain(chain => {
         chain.plugin('remove-invalid-content-plugin').use(Plugin, [[ ... ]])
      })
    }
  }
}

const pluginMultiBundle = () => {
  return {
    name: 'plugin-multi-bundle',
    setup: (api) => {
      api.modifyRsbuildConfig(config => {
         config.environments = {
           normal: {
             output: {
               target: 'web',
             }
           },
           safety: {
             output: {
               target: 'web',
             }
             plugins: [pluginContentSecretly()],
           }
         }
      })
    }
  }
}

[chenjiahan]

Recursively registering plugins may not be a good idea, here is an reference: vitejs/vite#2484

[chenjiahan]

I think Rsbuild can support nested plugins config, so users can return an array of plugins in a plugin function:

function myPlugin() {
  return [
    fooPlugin()
    barPlugin()
  ];
}

export default {
  plugins: [myPlugin()]
}

[Justinidlerz]

I think Rsbuild can support nested plugins config, so users can return an array of plugins in a plugin function:

function myPlugin() {
  return [
    fooPlugin()
    barPlugin()
  ];
}

export default {
  plugins: [myPlugin()]
}

Okay, This cannot solve this problem, but seems it's helpful for preset to select plugin sets.

[Justinidlerz]

Recursively registering plugins may not be a good idea, here is an reference: vitejs/vite#2484

Sound good, I think what if we expand full Rspack configuration can solve it same as the issue of vite.