Automattic / Automattic/jetpack

Allow specifying `plugin_slug` in `ConnectButton` component and `useConnection` hook

Open
#40,011 2 comments 0 reactions 0 assignees View on GitHub
[JS Package] Connection [Status] Stale Enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.