[v4] Vite plugin direct communication for Community developer

[sonofmagic]

In Vite plugins, there is a communication method called direct-plugin-communication, which allows one plugin to access content exposed by another plugin.

function tailwindcss() {
    return {
        name: '@tailwindcss/vite',
        api: {
            //...methods and properties exposed for other plugins
            get root() {
                return root
            },
            get designSystem() {
                return designSystem
            }
        }
        // ...plugin hooks
    };
}

function communityPlugin() {
    let tailwindcssApi;
    return {
        name: 'dependent',
        buildStart({ plugins }) {
            const tailwindcssPlugin = plugins.find(
                plugin => plugin.name === '@tailwindcss/vite'
            );
            if (!tailwindcssPlugin) {
                // or handle this silently if it is optional
                throw new Error(
                    `This plugin depends on the @tailwindcss/vite plugin.`
                );
            }
            // now you can access the API methods in subsequent hooks
            tailwindcssApi = tailwindcssPlugin.api;
        },
        transform(code, id) {
            if (thereIsAReasonToDoSomething(id)) {
                tailwindcssApi.root.generate() 

                tailwindcssApi.designSystem.doSomeThing();
            }
        }
    };
}

By exposing this API capability, the functionality of community plugins can be greatly enhanced.