Webiny-js: Apps - change the way we access plugins (use context / hook)

Created on 11 Sep 2020 · 4Comments · Source: webiny/webiny-js

This is:

Feature request

Detailed Description

In React apps, right now, we are using the default registerPlugins, getPlugins, getPlugin functions to work with plugins, e.g.:

import { getPlugins } from "@webiny/plugins";

(...)

const settingsPlugins = getPlugins<AdminMenuSettingsPlugin>("admin-menu-settings");

Although this is very convenient, it actually becomes problematic in situations where you dynamically want to add new plugins.

Let's say we have a view that renders three items because initially, we had three plugins registered. Now, let's say, on a click of a button, a new plugin needs to be added, thus four items should be rendered.

For this, we would of course use the registerPlugins function, but, although this would add the plugin successfully, the view wouldn't be rerendered, simply because React system doesn't know about changes that happened in the internal @webiny/plugins plugins object.

The right way to fix this is to have a React context, in which we'll be storing plugins. With that, we'll also going to need a simple hook, which would expose a simple registerPlugins function (and other needed functions), which would add the plugin into the context object, which means the React would rerender the needed view.

Possible Solution

The hook we mentioned above might work like so:

const { getPlugin, getPlugins, registerPlugins } = usePlugins();

This is probably the easier part of this whole issue. The more daunting part might be going over the whole system, and replacing the existing plugins calls, with the new hook and calling the functions that came out of the usePlugins call instead. Get yourself a beer, some nice music, and enjoy. 🙂🍻

Is this a must-have?

No, but it would certainly make things work more correctly. If there will be time, let's try to resolve this issue.

feature low

Source

doitadrian

Most helpful comment

As much as I want this, I'm not 100% sure this will be possible, as not all plugins are React components. A plugin can be an Apollo link which is created outside of React context, so we still need to access plugins directly using import.