Automattic / Automattic/jetpack
Allow specifying `plugin_slug` in `ConnectButton` component and `useConnection` hook
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
I would like to use `ConnectButton` component and `useConnection` hook from https://www.npmjs.com/package/@automattic/jetpack-connection in my own custom WooCommerce plugin.
However, when I use it, during the `registerSite` process, I noticed that the `plugin_slug` / `consumer_plug` is set to `'connection_package'`, and there isn't a way for me to override it:
https://github.com/Automattic/jetpack/blob/13222c64b1c391f2a4f9d119773a70c47bb7b2f2/projects/js-packages/api/index.jsx#L92-L94
https://github.com/Automattic/jetpack/blob/13222c64b1c391f2a4f9d119773a70c47bb7b2f2/projects/packages/connection/webpack.config.js#L59
I looked into https://www.npmjs.com/package/@automattic/jetpack-config, and I've put the following webpack config in my plugin, but it doesn't work:
```js
externals: {
jetpackConfig: JSON.stringify( {
consumer_slug: 'my-plugin-slug',
} ),
}
```
Looking at the [source code](https://github.com/Automattic/jetpack/blob/7e6c3355181f49536cfb8b18d527f56d477a7964/projects/js-packages/config/src/index.js) for `jetpackConfigHas` and `jetpackConfigGet`, it seems that it would only work for projects / packages within the Jetpack monorepo, and wouldn't work for plugins outside of the monorepo.
So, my suggestion in this issue is to expose `plugin_slug` in the `ConnectButton` component and `useConnection` hook, so that third party plugins can specify their own `plugin_slug`.
Contributor guide
Research direction
Start with projects/js-packages/api/index.jsx, especially the registerSite call, and inspect projects/packages/connection/webpack.config.js for the current consumer configuration. Trace ConnectButton and useConnection to determine where the plugin slug is fixed; done means third-party consumers can provide their own plugin_slug and that value reaches registration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100