Allow Wrapping the Root Component with a Global Context Provider in Addons

[sghng]

Is your feature request related to a problem? Please describe.

When creating addons that introduces other component libraries, some will require a context provider to enable the full capability of the libraries. e.g. to provide themes. Currently, seems like we only have control on the app object, (can do app.use(), etc), but we don't have access to the definition of the app itself.

Describe the solution you'd like

Give a config function for wrapping global context provider:

import { h, type Component } from "vue";

export function defineGlobalProvider(
  wrapper: (appRoot: Component) => Component
) {
  return (appRoot: Component) => wrapper(appRoot);
}

This should be put in createApp()

And the configuration will look like:

// main.ts
defineGlobalProvider((rootComponent) => ({
  render() {
    return h(MyGlobalProvider, null, () => h(rootComponent));
  },
}));

---

See also in:

https://github.com/slidevjs/slidev/discussions/2039

https://github.com/tusen-ai/naive-ui/discussions/6733

[sghng]

Inspired by https://sli.dev/features/global-layers, maybe we can have a global-context.vue.